消耗明细

9caf2ad0 · wong.peiyi · c05b77f0 · 9caf2ad0 · 9caf2ad0 · 9caf2ad0
Commit 9caf2ad0 authored May 20, 2021 by wong.peiyi
Showing with 158 additions and 33 deletions
src/enums/index.ts
src/pages/consume/components/selected-consumables.styl
src/pages/consume/components/selected-consumables.tsx
src/pages/consume/consumables.styl
src/pages/consume/consumables.tsx
src/pages/consume/consume.tsx
src/utils/utils.ts
--- a/src/enums/index.ts
+++ b/src/enums/index.ts
@@ -22,5 +22,6 @@ export enum FieldType {
  DATE,
  CHECKBOX,
  RADIO,
+  IMAGE,
  CUSTOM
 }
--- a/src/pages/consume/components/selected-consumables.styl
+++ b/src/pages/consume/components/selected-consumables.styl
@@ -6,10 +6,35 @@
    color rgba(163, 163, 163, 100)
    font-size second_text_size
    font-family font_family_regular
+    margin-bottom 10px
+.bd
+  background-color #fff
+  padding 0 15px 5px 15px
+  margin-bottom 18px
+  &-title
+    color rgba(0, 0, 0, 1)
+    font-size 17px
+    font-family font_family_regular
+    line-height 50px
+.item
+  margin-bottom 10px
+  &-title
+    font-size second_text_size
+    color rgba(0, 0, 0, 1)
+    line-height 20px
+  &-text
+    color second_text_color
+    font-size 14px
+    line-height 20px
 .ft
-  margin-top 10px
  align-items center
+  margin-bottom 20px
  &-btn
    width 343px

--- a/src/pages/consume/components/selected-consumables.tsx
+++ b/src/pages/consume/components/selected-consumables.tsx
 import React, { Component } from 'react'
 import { View, Text, ScrollView, TouchableOpacity, Image } from 'react-native'
 import { inject, observer } from 'mobx-react'
-import { IFormField } from 'bonehouse'
+import { IFormField, ISurgeryCollectLine } from 'bonehouse'
 import * as R from 'ramda'
 import { g, isBlank, isNotBlank } from '../../../utils/utils'
 import styles from './selected-consumables.styl'
 type IProps = {
-  value: any[]
+  value: ISurgeryCollectLine[]
  item: IFormField
 }
@@ -22,7 +22,18 @@ export default (props: IProps) => {
      {isNotBlank(value) && (
        <View style={g(styles, 'bd')}>
-          <Text>耗材明细</Text>
+          <Text style={g(styles, 'bd-title')}>耗材({R.length(value || [])})</Text>
+          {value.map((val, idx) => {
+            return (
+              <View style={g(styles, 'item')}>
+                <Text style={g(styles, 'item-title')}>
+                  {idx + 1}. {val.itemName}
+                </Text>
+                <Text style={g(styles, 'item-text')}>序列号: {val.serialNumber}</Text>
+                <Text style={g(styles, 'item-text')}>单价(￥): {val.salePrice}</Text>
+              </View>
+            )
+          })}
        </View>
      )}

--- a/src/pages/consume/consumables.styl
+++ b/src/pages/consume/consumables.styl
@@ -44,6 +44,22 @@
    @extend .row
    @extend .center
+    &__info
+      width 100%
+    &__cny
+      @extend .row
+      padding-top 10px
+      &-text
+        color list_one_color
+        font-size 14px
+        font-family font_family_regular
+      &-input
+        width 200px
+        color second_text_color
 .info-item
  @extend .row
@@ -101,3 +117,6 @@
 .mr10
  margin-right 10px
+.red
+  color #f00
--- a/src/pages/consume/consumables.tsx
+++ b/src/pages/consume/consumables.tsx
@@ -25,7 +25,7 @@ import dayjs from 'dayjs'
 import { ConsumablesModal } from './components/consumables-modal'
 import Checkbox from '../../components/common/checkbox'
 import Header from '../../components/header/header'
-import { g, isBlank, isNotBlank } from '../../utils/utils'
+import { g, isBlank, isNotBlank, show } from '../../utils/utils'
 import styles from './consumables.styl'
 type IProps = {
@@ -91,6 +91,8 @@ class Consumables extends Component<IProps, IState> {
    super(props)
    this.onSelectHandler = this.onSelectHandler.bind(this)
    this.onRemoveHandler = this.onRemoveHandler.bind(this)
+    this.onInputPriceHandler = this.onInputPriceHandler.bind(this)
+    this.onConfirmHandler = this.onConfirmHandler.bind(this)
  }
  componentDidMount() {
@@ -137,7 +139,7 @@ class Consumables extends Component<IProps, IState> {
      const storeItem = R.find(R.propEq('serialNumber', item.serialNumber))(selectedLines)
      if (isNotBlank(storeItem)) return
-      selectedLines = R.append(item, selectedLines)
+      selectedLines = R.compose(R.append(R.__, selectedLines), R.clone)(item)
      setSelectedLines(selectedLines)
    }
    // 取消
@@ -161,6 +163,44 @@ class Consumables extends Component<IProps, IState> {
  }
  /**
+   * @description: 输入单价
+   * @param {*} serialNumber
+   * @param {*} text
+   * @return {*}
+   */
+  onInputPriceHandler(serialNumber: string, text: string) {
+    if (isNotBlank(text) && isNaN(text)) return show('请输入数字')
+    const { selectedLines, setSelectedLines } = this.props.consumeStore
+    const item = R.find(R.propEq('serialNumber', serialNumber))(selectedLines)
+    if (isNotBlank(item)) {
+      item.salePrice = Number(text)
+      setSelectedLines(selectedLines)
+    }
+  }
+  /**
+   * @description: 确定耗材
+   * @param {*}
+   * @return {*}
+   */
+  onConfirmHandler() {
+    const { selectedLines } = this.props.consumeStore
+    const { lines } = this.state
+    for (const item of R.values(selectedLines)) {
+      if (isBlank(item.salePrice)) {
+        return show(`请输入耗材${item.itemName}的单价`)
+      }
+    }
+    const { state, goBack } = this.props.navigation
+    const { callback } = state.params
+    callback && callback()
+    goBack()
+  }
+  /**
   * @description: 列表单项渲染
   * @param {*} item
   * @return {*}
@@ -168,6 +208,8 @@ class Consumables extends Component<IProps, IState> {
  _renderItem({ item }: { item: ISurgeryCollectLine }) {
    const { mainColumns, subColumns } = this.state
    const checked = this.isSelected(item)
+    const { selectedLines } = this.props.consumeStore
+    const selectItem = R.find(R.propEq('serialNumber', item.serialNumber))(selectedLines)
    return (
      <View style={g(styles, 'list-item')}>
@@ -188,6 +230,7 @@ class Consumables extends Component<IProps, IState> {
              <Text style={g(styles, 'info-item__code')}>
                {item.manufacturerProductCode || '无厂家产品代码'}
              </Text>
              {mainColumns.map(col => {
                return (
                  <View style={g(styles, 'info-item')} key={col.field}>
@@ -198,24 +241,39 @@ class Consumables extends Component<IProps, IState> {
                  </View>
                )
              })}
+              {subColumns.map(col => {
+                return (
+                  <View style={g(styles, 'info-item')} key={col.field}>
+                    <Text style={g(styles, 'info-item__sub-text', 'info-item__key')}>
+                      {col.label}:
+                    </Text>
+                    <Text style={g(styles, 'info-item__sub-text')}>
+                      {col.type === 'date'
+                        ? R.compose(d => {
+                            return (d && dayjs(d).format('YYYY-MM-DD')) || '无'
+                          }, R.prop(col.field))(item)
+                        : item[col.field]}
+                    </Text>
+                  </View>
+                )
+              })}
            </View>
          </TouchableWithoutFeedback>
-          <View style={g(styles, 'list-item__info-main')}>
-            {subColumns.map(col => {
+          {/* 单价 */}
-              return (
+          {!!checked && (
-                <View style={g(styles, 'info-item')} key={col.field}>
+            <View style={g(styles, 'list-item__cny')}>
-                  <Text style={g(styles, 'info-item__sub-text', 'info-item__key')}>
+              <Text style={g(styles, ['list-item__cny-text', 'red'])}>*</Text>
-                    {col.label}:
+              <Text style={g(styles, 'list-item__cny-text')}>单价(￥)：</Text>
-                  </Text>
+              <TextInput
-                  <Text style={g(styles, 'info-item__sub-text')}>
+                style={g(styles, 'list-item__cny-input')}
-                    {R.compose(d => {
+                placeholder="请输入单价"
-                      return (d && dayjs(d).format('YYYY-MM-DD')) || '无'
+                defaultValue={R.compose(R.toString(), R.prop('salePrice'))(selectItem)}
-                    }, R.prop(col.field))(item)}
+                onChangeText={text => this.onInputPriceHandler(item.serialNumber, text)}
-                  </Text>
+              />
-                </View>
+            </View>
-              )
+          )}
-            })}
-          </View>
        </View>
      </View>
    )
@@ -227,12 +285,7 @@ class Consumables extends Component<IProps, IState> {
    return (
      <View style={g(styles, 'container')}>
-        <Header
+        <Header title="消耗确认 - 消耗明细" backCallback={this.onConfirmHandler} />
-          title="消耗确认 - 消耗明细"
-          backCallback={() => {
-            this.props.navigation.goBack()
-          }}
-        />
        {/* 搜索框 */}
        <View style={g(styles, 'search')}>
@@ -261,6 +314,7 @@ class Consumables extends Component<IProps, IState> {
          />
        </View>
+        {/* 下方按钮 */}
        <View
          style={[
            g(styles, 'footer'),
@@ -278,7 +332,11 @@ class Consumables extends Component<IProps, IState> {
              <Text style={g(styles, 'footer-btn__selected-text', 'mr10')}>已选:</Text>
              <Text style={g(styles, 'footer-btn__selected-text')}>{R.length(selectedLines)}</Text>
            </TouchableOpacity>
-            <TouchableOpacity style={g(styles, 'footer-btn__confirm')} activeOpacity={0.8}>
+            <TouchableOpacity
+              style={g(styles, 'footer-btn__confirm')}
+              activeOpacity={0.8}
+              onPress={this.onConfirmHandler}
+            >
              <Text style={g(styles, 'footer-btn__selected-text')}>确定耗材</Text>
            </TouchableOpacity>
          </View>

--- a/src/pages/consume/consume.tsx
+++ b/src/pages/consume/consume.tsx
@@ -11,6 +11,7 @@
 import React, { Component } from 'react'
 import { View, Text, ScrollView } from 'react-native'
 import { inject, observer } from 'mobx-react'
+import { toJS } from 'mobx'
 import { IOrganization, ISurgeryCollectHeader } from 'bonehouse'
 import * as R from 'ramda'
 import Form from '../../components/form'
@@ -183,6 +184,11 @@ class Consume extends Component<IProps> {
        rules: [{ required: true, message: '请选择耗材' }],
        refrence: ['orgCode', 'surgeryCollectNumber'],
      },
+      {
+        field: 'imgUrl',
+        label: '添加图片',
+        type: FieldType.IMAGE,
+      },
    ],
  }
@@ -448,7 +454,14 @@ class Consume extends Component<IProps> {
  orderBeforeHandler(itemName: string) {
    if (!this.refrenceCheck(itemName)) return
    const { data } = this.state
-    this.props.navigation.navigate('Consumables', { orderId: data.surgeryCollectNumber })
+    this.props.navigation.navigate('Consumables', {
+      orderId: data.surgeryCollectNumber,
+      // 添加消耗明细后处理
+      callback: () => {
+        data.lines = this.props.consumeStore.selectedLines
+        this.setState({ data })
+      },
+    })
  }
  render() {

--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -3,9 +3,7 @@
 * @Author: peii
 * @Date: 2021-04-24 22:45:15
 * @Vision: 1.0
- * @Description:
+ * @Description: 工具方法
- *
- * @Revision:
 *
 */
 // @ts-nocheck