Skip to content

zhangzhonghua / BoneHouse_Business_APP

Go to a project
Commit e1e8052b by wong.peiyi
Options

checkbox

parent a48961b2
Inline Side-by-side
Showing with 141 additions and 27 deletions
package.json
......@@ -14,7 +14,7 @@
"babel-plugin-import": "^1.13.3",
"dayjs": "^1.10.4",
"inversify": "^5.0.5",
"mobx": "^4.4",
"mobx": "^5.7.0",
"mobx-persist": "^0.4.1",
"mobx-react": "~6.0.0",
"moment": "2.29.1",
......
src/components/common/checkbox.styl
@import '../../assets/styles/base.styl'
@import '../../assets/styles/variable.styl'
.checkbox
&-inner
@extend .row
margin-right 10px
&__box
width 25px
height @width
border-radius 13.5px
border 1px solid #ccc
&-img
width 25px
height 25px
&-active
border-color transparent
src/components/common/checkbox.tsx
......@@ -12,9 +12,23 @@ type IProps = {
export default ({ checked, label, onChange, style }: Iprops) => {
return (
<TouchableWithoutFeedback style={g(styles, 'checkbox')}>
<TouchableWithoutFeedback
style={g(styles, 'checkbox')}
onPress={() => {
onChange && onChange(!checked)
}}
>
<View style={[g(styles, 'checkbox-inner'), style]}>
{!!checked && <Image source={require('../../assets/images/ic_checked_blue.png')} />}
<View
style={g(styles, { 'checkbox-inner__box': true, 'checkbox-inner__box-active': checked })}
>
{!!checked && (
<Image
source={require('../../assets/images/ic_checked_blue.png')}
style={g(styles, 'checkbox-inner__box-img')}
/>
)}
</View>
{isNotBlank(label) && <Text>{label}</Text>}
</View>
</TouchableWithoutFeedback>
......
src/pages/consume/consumables.styl
......@@ -36,6 +36,7 @@
background-color #fff
padding 10px
@extend .row
@extend .center
.info-item
@extend .row
......
src/pages/consume/consumables.tsx
......@@ -3,13 +3,13 @@
* @Author: peii
* @Date: 2021-05-11 21:21:43
* @Vision: 1.0
* @Description: 订单明细页面
* @Description: 借货订单明细页面
*
* @Revision:
*
*/
import React, { Component } from 'react'
import { View, Text, ScrollView, Image, TextInput, FlatList } from 'react-native'
import { View, Text, Image, TextInput, FlatList, TouchableWithoutFeedback } from 'react-native'
import { inject, observer } from 'mobx-react'
import { IFormField, ISurgeryCollectLine } from 'bonehouse'
import * as R from 'ramda'
......@@ -18,7 +18,7 @@ import Checkbox from '../../components/common/checkbox'
import Select from './select'
import Input from './input'
import Header from '../../components/header/header'
import { g, isBlank } from '../../utils/utils'
import { g, isBlank, isNotBlank } from '../../utils/utils'
import styles from './consumables.styl'
type IProps = {
......@@ -27,6 +27,8 @@ type IProps = {
getOrderLines: Function
orderLines: ISurgeryCollectLine[]
loading: boolean
selectedLines: ISurgeryCollectLine[]
setSelectedLines: Function
}
}
......@@ -79,6 +81,7 @@ class Consumables extends Component<IProps, IState> {
constructor(props: IProps) {
super(props)
this.onSelectHandler = this.onSelectHandler.bind(this)
}
componentDidMount() {
......@@ -104,33 +107,80 @@ class Consumables extends Component<IProps, IState> {
}
/**
* @description: 是否被选择
* @param {ISurgeryCollectLine} item
* @return {*}
*/
isSelected(item: ISurgeryCollectLine) {
const { selectedLines } = this.props.consumeStore
return R.compose(isNotBlank, R.find(R.propEq('serialNumber', item.serialNumber)))(selectedLines)
}
/**
* @description: 选择操作
* @param {ISurgeryCollectLine} item
* @param {boolean} checked
*/
onSelectHandler(item: ISurgeryCollectLine, checked: boolean) {
let { selectedLines, setSelectedLines } = this.props.consumeStore
// 选中
if (checked) {
const storeItem = R.find(R.propEq('serialNumber', item.serialNumber))(selectedLines)
if (isNotBlank(storeItem)) return
selectedLines = R.append(item, selectedLines)
setSelectedLines(selectedLines)
}
// 取消
else {
const idx = R.findIndex(R.propEq('serialNumber', item.serialNumber))(selectedLines)
if (idx === -1) return
selectedLines = R.remove(idx, 1, selectedLines)
setSelectedLines(selectedLines)
}
}
/**
* @description: 列表单项渲染
* @param {*} item
* @return {*}
*/
_renderItem({ item }: { item: ISurgeryCollectLine }) {
const { mainColumns, subColumns } = this.state
const checked = this.isSelected(item)
return (
<View style={g(styles, 'list-item')}>
<Checkbox checked={false} />
<Checkbox
checked={checked}
onChange={checked => {
this.onSelectHandler(item, checked)
}}
/>
<View style={g(styles, 'list-item__info')}>
<View style={g(styles, 'list-item__info-main')}>
<Text style={g(styles, 'info-item__code')}>
{item.manufacturerProductCode || '无厂家产品代码'}
</Text>
{mainColumns.map(col => {
return (
<View style={g(styles, 'info-item')} key={col.field}>
<Text style={g(styles, 'info-item__key', 'info-item__text')}>{col.label}:</Text>
<Text style={g(styles, 'info-item__text')}>
{R.propOr('无', col.field, item)}
</Text>
</View>
)
})}
</View>
<TouchableWithoutFeedback
onPress={() => {
this.onSelectHandler(item, !checked)
}}
>
<View style={g(styles, 'list-item__info-main')}>
<Text style={g(styles, 'info-item__code')}>
{item.manufacturerProductCode || '无厂家产品代码'}
</Text>
{mainColumns.map(col => {
return (
<View style={g(styles, 'info-item')} key={col.field}>
<Text style={g(styles, 'info-item__key', 'info-item__text')}>{col.label}:</Text>
<Text style={g(styles, 'info-item__text')}>
{R.propOr('无', col.field, item)}
</Text>
</View>
)
})}
</View>
</TouchableWithoutFeedback>
<View style={g(styles, 'list-item__info-main')}>
{subColumns.map(col => {
return (
......@@ -154,7 +204,7 @@ class Consumables extends Component<IProps, IState> {
render() {
const { lines } = this.state
const { loading } = this.props.consumeStore
const { loading, selectedLines } = this.props.consumeStore
return (
<View style={g(styles, 'container')}>
......
src/pages/consume/consume.tsx
......@@ -48,6 +48,8 @@ type IProps = {
orderFollower: Function
orderDoctor: Function
getOrderLines: Function
setSelectedLines: Function
resetOrderLines: Function
}
}
......@@ -188,6 +190,11 @@ class Consume extends Component<IProps> {
this.setOptionsFormItems()
}
componentWillUnmount() {
this.props.consumeStore.resetOrderLines()
this.props.consumeStore.setSelectedLines([])
}
/**
* @description: 设置配置性的表单字段
* @param {*}
......@@ -406,6 +413,7 @@ class Consume extends Component<IProps> {
}
this.props.consumeStore.getOrderLines(data.surgeryCollectNumber)
this.props.consumeStore.setSelectedLines([])
}
/**
......
src/stores/consume.ts
......@@ -30,6 +30,27 @@ export default class Consume {
@observable loading = false
@observable selectedLines: ISurgeryCollectLine[] = []
@action.bound
resetOrders() {
this._orders = {}
}
@action.bound
resetOrderLines() {
this._orderLines = {}
}
/**
* @description: 设置用户选择的消耗行
* @return {*}
*/
@action.bound
setSelectedLines(lines: ISurgeryCollectLine) {
this.selectedLines = lines
}
/**
* @description: 借货订单列表
* @param {string} sellerCode
......
yarn.lock
......@@ -5001,10 +5001,10 @@ mobx-react@~6.0.0:
dependencies:
mobx-react-lite "1.4.0"
mobx@^4.4:
version "4.15.7"
resolved "https://registry.nlark.com/mobx/download/mobx-4.15.7.tgz?cache=0&sync_timestamp=1619171408362&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fmobx%2Fdownload%2Fmobx-4.15.7.tgz#933281268c3b4658b6cf2526e872cf78ea48ab95"
integrity sha1-kzKBJow7Rli2zyUm6HLPeOpIq5U=
mobx@^5.7.0:
version "5.15.7"
resolved "https://registry.nlark.com/mobx/download/mobx-5.15.7.tgz?cache=0&sync_timestamp=1619170964364&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fmobx%2Fdownload%2Fmobx-5.15.7.tgz#b9a5f2b6251f5d96980d13c78e9b5d8d4ce22665"
integrity sha1-uaXytiUfXZaYDRPHjptdjUziJmU=
moment@2.29.1, moment@^2.22.1:
version "2.29.1"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment