消耗详情

src/components/modals/base/bottom.styl

@@ -17,7 +17,7 @@
   &-content
     position absolute
     width 100%
-    max-height 300px
+    max-height 350px
     min-height: 100px
     background-color foundation_color
     bottom 0

src/components/modals/base/bottom.tsx

@@ -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
 

src/pages/consume/components/consumables-modal.styl

+@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

src/pages/consume/components/consumables-modal.tsx

+/*
+ * @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>
+  )
+}

src/pages/consume/selected-consumables.styl → src/pages/consume/components/selected-consumables.styl

-@import '../../assets/styles/base.styl'
-@import '../../assets/styles/variable.styl'
+@import '../../../assets/styles/base.styl'
+@import '../../../assets/styles/variable.styl'
 
 .hd
   &-text

src/pages/consume/selected-consumables.tsx → src/pages/consume/components/selected-consumables.tsx

@@ -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 = {

src/pages/consume/consumables.tsx

@@ -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>
     )
   }

src/pages/consume/consume.tsx

@@ -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 = {