Commit c05b77f0 by wong.peiyi

消耗详情

parent 37c0c896
......@@ -17,7 +17,7 @@
&-content
position absolute
width 100%
max-height 300px
max-height 350px
min-height: 100px
background-color foundation_color
bottom 0
......
......@@ -29,6 +29,7 @@ type IModalProps = {
contentHeight: number
onClose: Function
action: number
headerHeight: number
}
/**
......@@ -63,10 +64,12 @@ let scrollRef = null
* @return {*}
*/
export function BottomModal(props: IModalProps) {
const { mask = true, onChange, visible, title, onClose, contentHeight = 300, action } = props
const { mask = true, onChange, visible, title, onClose, contentHeight = 300, action, headerHeight } = props
const { width, height } = Resolution.get()
const [modalHeight, setModalHeight] = useState(height - store.headerHeight)
const hasNavHeight = isBlank(headerHeight) ? store.headerHeight : headerHeight
const [modalHeight, setModalHeight] = useState(height - hasNavHeight)
const bottom = useRef(new Animated.Value(-contentHeight)).current
const opacity = useRef(new Animated.Value(0)).current
......
@import '../../../assets/styles/base.styl'
@import '../../../assets/styles/variable.styl'
.content
padding-bottom 48px
.header
height 48px
border-bottom-width 1px
border-bottom-color rgba(222, 219, 219, 1)
justify-content center
padding 0 20px
.list
padding 0 20px
.item
@extend .row
justify-content space-between
padding 7px 0
&-info
flex 1
border-bottom-width 1px
border-bottom-color rgba(234, 234, 234, 1)
padding-bottom 7px
&__title
line-height 20px
color rgba(0, 0, 0, 0.87)
font-size 14px
font-family PingFangSC-Regular
&__number
line-height 20px
color rgba(197, 198, 197, 100)
font-size 14px
font-family PingFangSC-Regular
&-action
justify-content center
padding-left 15px
&__img
width 22px
height @width
/*
* @FilePath: /BoneHouse_Business_APP/src/pages/consume/components/consumables-modal.tsx
* @Author: peii
* @Date: 2021-05-18 20:46:57
* @Vision: 1.0
* @Description: 已选择耗材弹窗
*
*/
import React, { useEffect, useRef, useState, createRef } from 'react'
import { View, Text, TouchableOpacity, FlatList, Image } from 'react-native'
import { ISurgeryCollectLine } from 'bonehouse'
import * as R from 'ramda'
import { isBlank } from '../../../utils/utils'
import { BottomModal } from '../../../components/modals/base/bottom'
import { g } from '../../../utils/utils'
import styles from './consumables-modal.styl'
type IProps = {
onChange: Function
onClose: Function
visible: boolean
data: ISurgeryCollectLine[]
}
let onChangeHandler = null
export function ConsumablesModal(props: IProps) {
const { onChange, onClose, visible, data } = props
const [contentHeight, setContentHeight] = useState(350)
const [action, setAction] = useState(0)
useEffect(() => {
onChangeHandler = onChange
}, [])
return (
<BottomModal
contentHeight={contentHeight}
visible={visible}
onClose={onClose}
action={action}
headerHeight={89}
>
<View style={g(styles, 'content')}>
<View style={g(styles, 'header')}>
<Text>耗材({data.length})</Text>
</View>
<FlatList
style={g(styles, 'list')}
data={data}
keyExtractor={item => item.serialNumber}
renderItem={Item}
/>
</View>
</BottomModal>
)
}
/**
* @description: 渲染行
* @param {*} item
* @param {*} index
* @return {*}
*/
function Item({ item, index }: { item: ISurgeryCollectLine; index: number }) {
return (
<View style={g(styles, 'item')}>
<View style={g(styles, 'item-info')}>
<Text style={g(styles, 'item-info__title')} numberOfLines={2}>
{item.itemName} {item.specification}
</Text>
<Text style={g(styles, 'item-info__number')}>序列号: {item.serialNumber}</Text>
</View>
<TouchableOpacity
style={g(styles, 'item-action')}
onPress={() => {
onChangeHandler && onChangeHandler(item)
}}
>
<Image
source={require('../../../assets/images/close_icon.png')}
style={g(styles, 'item-action__img')}
/>
</TouchableOpacity>
</View>
)
}
@import '../../assets/styles/base.styl'
@import '../../assets/styles/variable.styl'
@import '../../../assets/styles/base.styl'
@import '../../../assets/styles/variable.styl'
.hd
&-text
......
......@@ -3,7 +3,7 @@ import { View, Text, ScrollView, TouchableOpacity, Image } from 'react-native'
import { inject, observer } from 'mobx-react'
import { IFormField } from 'bonehouse'
import * as R from 'ramda'
import { g, isBlank, isNotBlank } from '../../utils/utils'
import { g, isBlank, isNotBlank } from '../../../utils/utils'
import styles from './selected-consumables.styl'
type IProps = {
......
......@@ -22,9 +22,8 @@ import { inject, observer } from 'mobx-react'
import { IFormField, ISurgeryCollectLine } from 'bonehouse'
import * as R from 'ramda'
import dayjs from 'dayjs'
import { ConsumablesModal } from './components/consumables-modal'
import Checkbox from '../../components/common/checkbox'
import Select from './select'
import Input from './input'
import Header from '../../components/header/header'
import { g, isBlank, isNotBlank } from '../../utils/utils'
import styles from './consumables.styl'
......@@ -85,11 +84,13 @@ class Consumables extends Component<IProps, IState> {
type: 'date',
},
],
modalVisible: false,
}
constructor(props: IProps) {
super(props)
this.onSelectHandler = this.onSelectHandler.bind(this)
this.onRemoveHandler = this.onRemoveHandler.bind(this)
}
componentDidMount() {
......@@ -141,13 +142,23 @@ class Consumables extends Component<IProps, IState> {
}
// 取消
else {
this.onRemoveHandler(item)
}
}
/**
* @description: 删除所选
* @param {ISurgeryCollectLine} item
* @return {*}
*/
onRemoveHandler(item: ISurgeryCollectLine) {
let { selectedLines, setSelectedLines } = this.props.consumeStore
const idx = R.findIndex(R.propEq('serialNumber', item.serialNumber))(selectedLines)
if (idx === -1) return
selectedLines = R.remove(idx, 1, selectedLines)
setSelectedLines(selectedLines)
}
}
/**
* @description: 列表单项渲染
......@@ -211,7 +222,7 @@ class Consumables extends Component<IProps, IState> {
}
render() {
const { lines } = this.state
const { lines, modalVisible } = this.state
const { loading, selectedLines } = this.props.consumeStore
return (
......@@ -257,7 +268,13 @@ class Consumables extends Component<IProps, IState> {
]}
>
<View style={g(styles, 'footer-btn')}>
<TouchableOpacity style={g(styles, 'footer-btn__selected')} activeOpacity={0.8}>
<TouchableOpacity
style={g(styles, 'footer-btn__selected')}
activeOpacity={0.8}
onPress={() => {
this.setState({ modalVisible: true })
}}
>
<Text style={g(styles, 'footer-btn__selected-text', 'mr10')}>已选:</Text>
<Text style={g(styles, 'footer-btn__selected-text')}>{R.length(selectedLines)}</Text>
</TouchableOpacity>
......@@ -266,6 +283,16 @@ class Consumables extends Component<IProps, IState> {
</TouchableOpacity>
</View>
</View>
{/* 已选择耗材弹窗 */}
<ConsumablesModal
visible={modalVisible}
onClose={() => {
this.setState({ modalVisible: false })
}}
data={selectedLines}
onChange={this.onRemoveHandler}
/>
</View>
)
}
......
......@@ -17,7 +17,7 @@ import Form from '../../components/form'
import { FieldType } from '../../enums'
import Header from '../../components/header/header'
import { g, getFormItem, isBlank, isNotBlank, show } from '../../utils/utils'
import Consumables from './selected-consumables'
import Consumables from './components/selected-consumables'
import styles from './consume.styl'
type IProps = {
......
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