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 @@ ...@@ -14,7 +14,7 @@
"babel-plugin-import": "^1.13.3", "babel-plugin-import": "^1.13.3",
"dayjs": "^1.10.4", "dayjs": "^1.10.4",
"inversify": "^5.0.5", "inversify": "^5.0.5",
"mobx": "^4.4", "mobx": "^5.7.0",
"mobx-persist": "^0.4.1", "mobx-persist": "^0.4.1",
"mobx-react": "~6.0.0", "mobx-react": "~6.0.0",
"moment": "2.29.1", "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 = { ...@@ -12,9 +12,23 @@ type IProps = {
export default ({ checked, label, onChange, style }: Iprops) => { export default ({ checked, label, onChange, style }: Iprops) => {
return ( return (
<TouchableWithoutFeedback style={g(styles, 'checkbox')}> <TouchableWithoutFeedback
style={g(styles, 'checkbox')}
onPress={() => {
onChange && onChange(!checked)
}}
>
<View style={[g(styles, 'checkbox-inner'), style]}> <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>} {isNotBlank(label) && <Text>{label}</Text>}
</View> </View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
......
src/pages/consume/consumables.styl
...@@ -36,6 +36,7 @@ ...@@ -36,6 +36,7 @@
background-color #fff background-color #fff
padding 10px padding 10px
@extend .row @extend .row
@extend .center
.info-item .info-item
@extend .row @extend .row
......
src/pages/consume/consumables.tsx
...@@ -3,13 +3,13 @@ ...@@ -3,13 +3,13 @@
* @Author: peii * @Author: peii
* @Date: 2021-05-11 21:21:43 * @Date: 2021-05-11 21:21:43
* @Vision: 1.0 * @Vision: 1.0
* @Description: 订单明细页面 * @Description: 借货订单明细页面
* *
* @Revision: * @Revision:
* *
*/ */
import React, { Component } from 'react' 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 { inject, observer } from 'mobx-react'
import { IFormField, ISurgeryCollectLine } from 'bonehouse' import { IFormField, ISurgeryCollectLine } from 'bonehouse'
import * as R from 'ramda' import * as R from 'ramda'
...@@ -18,7 +18,7 @@ import Checkbox from '../../components/common/checkbox' ...@@ -18,7 +18,7 @@ import Checkbox from '../../components/common/checkbox'
import Select from './select' import Select from './select'
import Input from './input' import Input from './input'
import Header from '../../components/header/header' import Header from '../../components/header/header'
import { g, isBlank } from '../../utils/utils' import { g, isBlank, isNotBlank } from '../../utils/utils'
import styles from './consumables.styl' import styles from './consumables.styl'
type IProps = { type IProps = {
...@@ -27,6 +27,8 @@ type IProps = { ...@@ -27,6 +27,8 @@ type IProps = {
getOrderLines: Function getOrderLines: Function
orderLines: ISurgeryCollectLine[] orderLines: ISurgeryCollectLine[]
loading: boolean loading: boolean
selectedLines: ISurgeryCollectLine[]
setSelectedLines: Function
} }
} }
...@@ -79,6 +81,7 @@ class Consumables extends Component<IProps, IState> { ...@@ -79,6 +81,7 @@ class Consumables extends Component<IProps, IState> {
constructor(props: IProps) { constructor(props: IProps) {
super(props) super(props)
this.onSelectHandler = this.onSelectHandler.bind(this)
} }
componentDidMount() { componentDidMount() {
...@@ -104,33 +107,80 @@ class Consumables extends Component<IProps, IState> { ...@@ -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: 列表单项渲染 * @description: 列表单项渲染
* @param {*} item * @param {*} item
* @return {*} * @return {*}
*/ */
_renderItem({ item }: { item: ISurgeryCollectLine }) { _renderItem({ item }: { item: ISurgeryCollectLine }) {
const { mainColumns, subColumns } = this.state const { mainColumns, subColumns } = this.state
const checked = this.isSelected(item)
return ( return (
<View style={g(styles, 'list-item')}> <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')}>
<View style={g(styles, 'list-item__info-main')}> <TouchableWithoutFeedback
<Text style={g(styles, 'info-item__code')}> onPress={() => {
{item.manufacturerProductCode || '无厂家产品代码'} this.onSelectHandler(item, !checked)
</Text> }}
{mainColumns.map(col => { >
return ( <View style={g(styles, 'list-item__info-main')}>
<View style={g(styles, 'info-item')} key={col.field}> <Text style={g(styles, 'info-item__code')}>
<Text style={g(styles, 'info-item__key', 'info-item__text')}>{col.label}:</Text> {item.manufacturerProductCode || '无厂家产品代码'}
<Text style={g(styles, 'info-item__text')}> </Text>
{R.propOr('无', col.field, item)} {mainColumns.map(col => {
</Text> return (
</View> <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')}>
</View> {R.propOr('无', col.field, item)}
</Text>
</View>
)
})}
</View>
</TouchableWithoutFeedback>
<View style={g(styles, 'list-item__info-main')}> <View style={g(styles, 'list-item__info-main')}>
{subColumns.map(col => { {subColumns.map(col => {
return ( return (
...@@ -154,7 +204,7 @@ class Consumables extends Component<IProps, IState> { ...@@ -154,7 +204,7 @@ class Consumables extends Component<IProps, IState> {
render() { render() {
const { lines } = this.state const { lines } = this.state
const { loading } = this.props.consumeStore const { loading, selectedLines } = this.props.consumeStore
return ( return (
<View style={g(styles, 'container')}> <View style={g(styles, 'container')}>
......
src/pages/consume/consume.tsx
...@@ -48,6 +48,8 @@ type IProps = { ...@@ -48,6 +48,8 @@ type IProps = {
orderFollower: Function orderFollower: Function
orderDoctor: Function orderDoctor: Function
getOrderLines: Function getOrderLines: Function
setSelectedLines: Function
resetOrderLines: Function
} }
} }
...@@ -188,6 +190,11 @@ class Consume extends Component<IProps> { ...@@ -188,6 +190,11 @@ class Consume extends Component<IProps> {
this.setOptionsFormItems() this.setOptionsFormItems()
} }
componentWillUnmount() {
this.props.consumeStore.resetOrderLines()
this.props.consumeStore.setSelectedLines([])
}
/** /**
* @description: 设置配置性的表单字段 * @description: 设置配置性的表单字段
* @param {*} * @param {*}
...@@ -406,6 +413,7 @@ class Consume extends Component<IProps> { ...@@ -406,6 +413,7 @@ class Consume extends Component<IProps> {
} }
this.props.consumeStore.getOrderLines(data.surgeryCollectNumber) this.props.consumeStore.getOrderLines(data.surgeryCollectNumber)
this.props.consumeStore.setSelectedLines([])
} }
/** /**
......
src/stores/consume.ts
...@@ -30,6 +30,27 @@ export default class Consume { ...@@ -30,6 +30,27 @@ export default class Consume {
@observable loading = false @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: 借货订单列表 * @description: 借货订单列表
* @param {string} sellerCode * @param {string} sellerCode
......
yarn.lock
...@@ -5001,10 +5001,10 @@ mobx-react@~6.0.0: ...@@ -5001,10 +5001,10 @@ mobx-react@~6.0.0:
dependencies: dependencies:
mobx-react-lite "1.4.0" mobx-react-lite "1.4.0"
mobx@^4.4: mobx@^5.7.0:
version "4.15.7" version "5.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" 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-kzKBJow7Rli2zyUm6HLPeOpIq5U= integrity sha1-uaXytiUfXZaYDRPHjptdjUziJmU=
moment@2.29.1, moment@^2.22.1: moment@2.29.1, moment@^2.22.1:
version "2.29.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