消耗费用及确认消耗

src/components/form/index.tsx

@@ -11,12 +11,13 @@
 import React, { Component } from 'react'
 import { View, Text, ScrollView, SafeAreaView, TouchableOpacity } from 'react-native'
 import { IFormField } from 'bonehouse'
+import * as R from 'ramda'
 import { FieldType } from '../../enums'
 import Select from './select'
 import Input from './input'
 import DatePicker from './date'
 import ImageForm from './image'
-import { g } from '../../utils/utils'
+import { g, isBlank, show, debounce } from '../../utils/utils'
 import Consumables from '../../pages/consume/selected-consumables'
 import styles from './index.styl'
 
@@ -38,17 +39,50 @@ export default class Form extends Component<IProps> {
     value: '',
     scrollable: true,
     modal: null,
+    canSubmit: false,
+    submiting: false,
   }
 
-  constructor(props: IProps) {
-    super(props)
+  componentDidMount() {
     this.onChange = this.onChange.bind(this)
     this.modalCallback = this.modalCallback.bind(this)
+    this.checkCanSubmit = debounce(this.checkCanSubmit.bind(this))
+    this.submitHandler = debounce(this.submitHandler.bind(this), 500)
   }
 
+  /**
+   * @description: 修改回调
+   * @param {*} key
+   * @param {*} value
+   * @param {*} callback
+   * @return {*}
+   */
   async onChange(key: string, value: any, callback?: Function) {
     this.props.onChange && (await this.props.onChange(key, value))
-    callback && callback()
+    // callback && callback()
+    this.checkCanSubmit()
+  }
+
+  /**
+   * @description: 是否可以提交
+   */
+  checkCanSubmit() {
+    const { fields, data } = this.props
+
+    for (const item of fields) {
+      if (isBlank(item.rules)) continue
+
+      // 校验是否可以提交
+      for (const rule of item.rules) {
+        if (rule.required && isBlank(data[item.field])) {
+          return this.setState({ canSubmit: false })
+        }
+        if (rule.pattern && R.complement(R.test)(rule.pattern, data[item.field])) {
+          return this.setState({ canSubmit: false })
+        }
+      }
+      this.setState({ canSubmit: true })
+    }
   }
 
   /**
@@ -59,10 +93,18 @@ export default class Form extends Component<IProps> {
     this.setState({ modal })
   }
 
+  /**
+   * @description: 提交信息
+   */
+  async submitHandler() {
+    this.setState({ submiting: true })
+    this.props.submitHandler && (await this.props.submitHandler())
+    this.setState({ submiting: false })
+  }
+
   render() {
     const { fields = [], data = {} } = this.props
-    const { scrollable, modal } = this.state
-    const disabled = false
+    const { scrollable, modal, canSubmit } = this.state
 
     return (
       <View style={g(styles, 'container')}>
@@ -89,14 +131,15 @@ export default class Form extends Component<IProps> {
             })}
 
             <TouchableOpacity
-              style={g(styles, { 'submit-btn': true, 'submit-btn__disabled': disabled })}
-              disabled={disabled}
+              style={g(styles, { 'submit-btn': true, 'submit-btn__disabled': !canSubmit })}
+              disabled={!canSubmit}
               activeOpacity={0.8}
+              onPress={this.submitHandler}
             >
               <Text
                 style={g(styles, {
                   'submit-btn__text': true,
-                  'btn-primary__text__disabled': disabled,
+                  'btn-primary__text__disabled': !canSubmit,
                 })}
               >
                 提交
@@ -105,7 +148,7 @@ export default class Form extends Component<IProps> {
           </View>
         </ScrollView>
 
-        {/* 弹出窗 */}
+        {/* form内层的弹出窗 */}
         {modal}
       </View>
     )

src/components/form/select-modal.tsx

@@ -46,7 +46,7 @@ let scrollRef = null
  * @return {*}
  */
 export function SelectModal(props: IModalProps) {
-  const { data = [], value, mask, onChange, visible, title, onClose, loading } = props
+  const { data = [], value, mask, onChange, visible, title, onClose, loading, headerHeight } = props
 
   const [contentHeight, setContentHeight] = useState(300)
   const [action, setAction] = useState(0)
@@ -83,7 +83,13 @@ export function SelectModal(props: IModalProps) {
   }
 
   return (
-    <BottomModal contentHeight={contentHeight} visible={visible} onClose={onClose} action={action}>
+    <BottomModal
+      contentHeight={contentHeight}
+      visible={visible}
+      onClose={onClose}
+      action={action}
+      headerHeight={headerHeight}
+    >
       {!!loading ? (
         <View style={g(styles, 'loading')}>
           <ActivityIndicator size="small" />

src/components/form/select.tsx

@@ -62,6 +62,7 @@ export default class Select extends Component<IProps> {
     if (item && item.options && item.options.length === 1 && item.options[0].value !== value) {
       this.onChange(item.options[0].value)
     }
+    // 换了options，表示依赖的项没有了，把当前设置为空
     const val = getText(item, value)
     if (isNotBlank(value) && isBlank(val)) {
       this.onChange(null)

src/components/modals/base/bottom.tsx

@@ -64,7 +64,16 @@ let scrollRef = null
  * @return {*}
  */
 export function BottomModal(props: IModalProps) {
-  const { mask = true, onChange, visible, title, onClose, contentHeight = 300, action, headerHeight } = props
+  const {
+    onChange,
+    visible,
+    title,
+    onClose,
+    action,
+    headerHeight,
+    mask = true,
+    contentHeight = 300,
+  } = props
   const { width, height } = Resolution.get()
 
   const hasNavHeight = isBlank(headerHeight) ? store.headerHeight : headerHeight

src/pages/consume/components/fees.styl

+@import '../../../assets/styles/base.styl'
+@import '../../../assets/styles/variable.styl'
+
+.hd
+  &-text
+    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
+  align-items center
+  margin-bottom 20px
+
+  &-btn
+    width 343px
+    height 48px
+    border-radius 9px
+    background-color primary_color
+    justify-content center
+    align-items center
+
+    &__text
+      color btn_color
+      font-size second_text_size
+      font-family font_family_semibold

src/pages/consume/components/fees.tsx

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/pages/consume/components/fees.tsx
+ * @Author: peii
+ * @Date: 2021-05-20 23:05:43
+ * @Vision: 1.0
+ * @Description: 费用明细组件
+ *
+ * @Revision:
+ *
+ */
+import React, { Component } from 'react'
+import { View, Text, ScrollView, TouchableOpacity, Image } from 'react-native'
+import { inject, observer } from 'mobx-react'
+import { IFormField, IFee } from 'bonehouse'
+import * as R from 'ramda'
+import { g, isBlank, isNotBlank } from '../../../utils/utils'
+import container from '../../../inversify'
+import { TYPES } from '../../../inversify/types'
+import styles from './fees.styl'
+
+const store = container.get(TYPES.SysStore)
+
+type IProps = {
+  item: IFormField
+  value: IFee[]
+}
+
+const getText = (code: string) => {
+  const feeTypes = store.sysValueSets.SUR_FEE_TYPE
+  return R.compose(R.prop('valueName'), R.find(R.propEq('valueCode', code)))(feeTypes)
+}
+
+export default (props: IProps) => {
+  const { item, value } = props
+
+  return (
+    <View style={g(styles, 'fees')}>
+      <View style={g(styles, 'hd')}>
+        <Text style={g(styles, 'hd-text')}>费用明细</Text>
+      </View>
+
+      {isNotBlank(value) && (
+        <View style={g(styles, 'bd')}>
+          <Text style={g(styles, 'bd-title')}>费用（{R.length(value)}）</Text>
+          {value.map((val, idx) => {
+            return (
+              <View style={g(styles, 'item')} key={R.toString(val.fid)}>
+                <Text style={g(styles, 'item-title')}>
+                  {idx + 1}: {getText(val.feeType)}
+                </Text>
+                <Text style={g(styles, 'item-text')}>费用金额(￥)：{val.feeAmount}</Text>
+              </View>
+            )
+          })}
+        </View>
+      )}
+
+      <View style={g(styles, 'ft')}>
+        <TouchableOpacity
+          style={g(styles, 'ft-btn')}
+          activeOpacity={0.8}
+          onPress={() => {
+            item.customHandler && item.customHandler()
+          }}
+        >
+          <Text style={g(styles, 'ft-btn__text')}>+添加费用明细</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  )
+}

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

@@ -25,7 +25,7 @@ export default (props: IProps) => {
           <Text style={g(styles, 'bd-title')}>耗材({R.length(value || [])})</Text>
           {value.map((val, idx) => {
             return (
-              <View style={g(styles, 'item')}>
+              <View style={g(styles, 'item')} key={val.serialNumber}>
                 <Text style={g(styles, 'item-title')}>
                   {idx + 1}. {val.itemName}
                 </Text>

src/pages/consume/consume.tsx

@@ -12,15 +12,15 @@ 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 { IOrganization, ISurgeryCollectHeader, IFee } from 'bonehouse'
 import * as R from 'ramda'
 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 './components/selected-consumables'
+import Fees from './components/fees'
 import styles from './consume.styl'
-import { Toast } from '@ant-design/react-native'
 
 type IProps = {
   store: {}
@@ -46,12 +46,15 @@ type IProps = {
   }
   consumeStore: {
     orders: ISurgeryCollectHeader[]
+    selectedLines: ISurgeryCollectLine[]
+    feeLines: IFee[]
     getOrders: Function
     orderFollower: Function
     orderDoctor: Function
     getOrderLines: Function
     setSelectedLines: Function
     resetOrderLines: Function
+    submit: Function
   }
 }
 
@@ -59,6 +62,7 @@ class Consume extends Component<IProps> {
   constructor(props) {
     super(props)
     this.setData = this.setData.bind(this)
+    this.submitHandler = this.submitHandler.bind(this)
   }
 
   state = {
@@ -151,7 +155,7 @@ class Consume extends Component<IProps> {
         placeholder: '请输入年龄',
         rules: [
           { required: true, message: '请输入年龄' },
-          { pattern: /\d{3}/, message: '请输入正确的年龄' },
+          { pattern: /\d{1,3}/, message: '请输入正确的年龄' },
         ],
       },
       {
@@ -186,6 +190,13 @@ class Consume extends Component<IProps> {
         refrence: ['orgCode', 'surgeryCollectNumber'],
       },
       {
+        field: 'feeLines',
+        label: '费用明细',
+        type: FieldType.CUSTOM,
+        component: Fees,
+        customHandler: this.feeBeforeHandler.bind(this),
+      },
+      {
         field: 'imgUrl',
         label: '添加图片',
         type: FieldType.IMAGE,
@@ -285,10 +296,11 @@ class Consume extends Component<IProps> {
    */
   setData(key: string, value: any) {
     return new Promise<any>((resolve, reject) => {
-      const { data } = this.state
+      const { data, formItems } = this.state
       data[key] = value
       this.setState({ data }, () => {
-        console.log(data)
+        const item = getFormItem(formItems, key)
+        item && item.callback && item.callback()
         resolve()
       })
     })
@@ -454,17 +466,48 @@ 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,
       // 添加消耗明细后处理
       callback: () => {
         data.lines = this.props.consumeStore.selectedLines
-        this.setState({ data })
+        this.setState({ data }, () => {
+          this.formRef.checkCanSubmit()
+        })
+      },
+    })
+  }
+
+  /**
+   * @description: 费用明细跳转前处理
+   * @param {*}
+   * @return {*}
+   */
+  feeBeforeHandler() {
+    const { data } = this.state
+    this.props.navigation.navigate('ConsumeFee', {
+      feeLines: R.clone(data.feeLines),
+      callback: feeLines => {
+        data.feeLines = R.clone(feeLines)
+        this.setState({ data }, () => {
+          this.formRef.checkCanSubmit()
+        })
       },
     })
   }
 
+  /**
+   * @description: 提交
+   */
+  async submitHandler() {
+    const { data } = this.state
+    data.lines = R.map(R.assoc('consumedQuantity', 1))(data.lines)
+
+    const res = await this.props.consumeStore.submit(data)
+  }
+
   render() {
     const { formItems, data, scrollable } = this.state
     const { navigation } = this.props
@@ -480,7 +523,13 @@ class Consume extends Component<IProps> {
         />
 
         {/* form表单 */}
-        <Form fields={formItems} data={data} onChange={this.setData} />
+        <Form
+          fields={formItems}
+          data={data}
+          onChange={this.setData}
+          ref={ref => (this.formRef = ref)}
+          submitHandler={this.submitHandler}
+        />
       </View>
     )
   }

src/pages/consume/fee.styl

+@import '../../assets/styles/base.styl'
+@import '../../assets/styles/variable.styl'
+
+font_size = 18px
+
+.container
+  flex 1
+  background-color home_background_color
+
+.bd-inner
+  align-items center
+  padding-bottom 30px
+
+.list
+  padding 20px
+  width 100%
+
+.form
+  background-color #fff
+  border-radius 4px
+  padding 0 20px
+  margin-bottom 20px
+
+  &-item
+    padding 15px 0
+    border-bottom-color rgba(224, 224, 224, 0.5)
+    border-bottom-width 1px
+    flex-direction row
+    justify-content space-between
+
+    &__remove
+      &-text
+        font-size font_size
+        font-family font_family_semibold
+        color primary_color
+
+    &__select
+      flex 1
+      flex-direction row
+      justify-content flex-end
+      align-items center
+
+      &-text
+        font-size font_size
+        font-family font_family_regular
+        color second_text_color
+
+      &-arrow
+        width 18px
+        height @width
+
+    &__value
+      font-size font_size
+      font-family font_family_regular
+      color second_text_color
+
+    &__remark
+      border-bottom-width 0
+      flex-direction column
+
+      &-value
+        height 80px
+
+    &__label
+      font-size font_size
+      color first_text_color
+      padding-bottom 15px
+
+  &-label
+    font-size 18px
+    font-family font_family_semibold
+
+.red
+  color red
+
+.btn
+  width 342px
+  height 52px
+  border-radius 10px
+  background-color btn_sub_color
+  overflow hidden
+  @extend .center
+  @extend .middle
+
+  &__text
+    color rgba(255, 255, 255, 100)
+    font-size 17px
+    font-family font_family_semibold
+
+.add-btn
+  width 374px
+  background-color btn_color
+
+  &__text
+    color primary_color
+
+.ft
+  height 88px
+  width 100%
+  background-color #fff
+  @extend .middle
+  @extend .center

src/pages/consume/fee.tsx

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/pages/consume/fee.tsx
+ * @Author: peii
+ * @Date: 2021-05-20 22:57:01
+ * @Vision: 1.0
+ * @Description: 费用明细页面
+ *
+ * @Revision:
+ *
+ */
+import React, { Component, useState } from 'react'
+import { View, Text, FlatList, TouchableOpacity, Image, TextInput, ScrollView } from 'react-native'
+import { inject, observer } from 'mobx-react'
+import { toJS } from 'mobx'
+import { IFee } from 'bonehouse'
+import * as R from 'ramda'
+import Header from '../../components/header/header'
+import { BottomModal } from '../../components/modals/base/bottom'
+import { SelectModal } from '../../components/form/select-modal'
+import { g, isBlank, isNotBlank, show, genPid } from '../../utils/utils'
+import styles from './fee.styl'
+
+type IProps = {
+  sysStore: {
+    sysValueSets: {
+      SUR_FEE_TYPE: any[]
+    }
+  }
+}
+
+class Fee extends Component<IProps> {
+  state = {
+    feeLines: [
+      {
+        fid: genPid(),
+        feeType: '',
+        feeAmount: '',
+        remark: '',
+      },
+    ],
+    fee: {
+      feeType: '',
+      feeAmount: '',
+      remark: '',
+    },
+    visible: false,
+    currentFeeType: '',
+    currentIndex: -1,
+    feeTypes: [],
+  }
+
+  constructor(props: IProps) {
+    super(props)
+    this.onBackHandler = this.onBackHandler.bind(this)
+    this.onFeeTypeChnageHandler = this.onFeeTypeChnageHandler.bind(this)
+    this.textInputHandler = this.textInputHandler.bind(this)
+    this.addFeeHandler = this.addFeeHandler.bind(this)
+    this.submitHandler = this.submitHandler.bind(this)
+  }
+
+  componentDidMount() {
+    const { feeLines } = this.props.navigation.state.params
+    if (isNotBlank(feeLines)) {
+      this.setState({ feeLines })
+    }
+
+    setTimeout(() => {
+      const feeTypes = R.compose(
+        R.map(
+          R.applySpec({
+            label: R.prop('valueName'),
+            value: R.prop('valueCode'),
+          }),
+        ),
+        R.pathOr([], ['sysStore', 'sysValueSets', 'SUR_FEE_TYPE']),
+      )(this.props)
+      this.setState({ feeTypes })
+    }, 0)
+  }
+
+  /**
+   * @description: 返回操作
+   * @param {*}
+   * @return {*}
+   */
+  onBackHandler() {
+    this.props.navigation.goBack()
+  }
+
+  openModal(item: IFee, index: number) {
+    this.setState({ visible: true, currentIndex: index, currentFeeType: item.feeType })
+  }
+
+  /**
+   * @description: 选择回调
+   * @param {*} value
+   * @return {*}
+   */
+  onFeeTypeChnageHandler(value) {
+    const { feeLines, currentIndex } = this.state
+    feeLines[currentIndex].feeType = value
+    this.setState({ feeLines })
+  }
+
+  /**
+   * @description: 输入操作
+   * @param {*} text
+   * @param {*} index
+   * @param {*} key
+   * @return {*}
+   */
+  textInputHandler(text: string, index: number, key: string) {
+    const { feeLines } = this.state
+    if (key === 'feeAmount' && isNaN(text)) {
+      return show('请输入数字')
+    }
+    feeLines[index][key] = text
+    this.setState({ feeLines })
+  }
+
+  /**
+   * @description: 添加消耗明细
+   * @param {*}
+   * @return {*}
+   */
+  addFeeHandler() {
+    let { feeLines, fee } = this.state
+    for (const i in feeLines) {
+      const fee = feeLines[i]
+      if (R.any(isBlank, [fee.feeAmount, fee.feeType])) {
+        return show(`请先填写费用明细(${Number(i) + 1})的类型和金额`)
+      }
+    }
+    fee.fid = genPid()
+    feeLines = R.append(R.clone(fee), feeLines)
+    this.setState({ feeLines }, () => {
+      setTimeout(() => {
+        this.scrollRef.scrollToEnd({ animated: true })
+      }, 100)
+    })
+  }
+
+  /**
+   * @description: 删除一项
+   * @param {*} index
+   * @return {*}
+   */
+  removeItemHandler(index) {
+    let { feeLines } = this.state
+    if (R.length(feeLines) === 1) {
+      return show('至少添加一项费用明细')
+    }
+    feeLines = R.remove(index, 1, feeLines)
+    this.setState({ feeLines })
+  }
+
+  /**
+   * @description: 选择显示
+   * @param {*} value
+   * @return {*}
+   */
+  _text(value: string) {
+    return R.compose(
+      R.propOr('请选择', 'label'),
+      R.find(R.propEq('value', value)),
+    )(this.state.feeTypes)
+  }
+
+  /**
+   * @description: 确认返回
+   * @param {*}
+   * @return {*}
+   */
+  submitHandler() {
+    const { state, goBack } = this.props.navigation
+    const { callback } = state.params
+    callback && callback(this.state.feeLines)
+    goBack()
+  }
+
+  /**
+   * @description: 渲染单项
+   * @param {*} item
+   * @param {*} index
+   * @return {*}
+   */
+  _renderItem({ item, index }: { item: IFee; index: number }) {
+    return (
+      <View style={g(styles, 'form')}>
+        <View style={g(styles, 'form-item')}>
+          <Label label={`费用明细(${index + 1})`} />
+          <TouchableOpacity
+            style={g(styles, 'form-item__remove')}
+            activeOpacity={0.5}
+            onPress={() => this.removeItemHandler(index)}
+          >
+            <Text style={g(styles, 'form-item__remove-text')}>删除</Text>
+          </TouchableOpacity>
+        </View>
+
+        <View style={g(styles, 'form-item')}>
+          <Label label="费用类型" required={true} />
+          <TouchableOpacity
+            style={g(styles, 'form-item__select')}
+            activeOpacity={0.8}
+            onPress={() => this.openModal(item, index)}
+          >
+            <Text style={g(styles, 'form-item__select-text')}>{this._text(item.feeType)}</Text>
+            <Image
+              style={g(styles, 'form-item__select-arrow')}
+              source={require('../../assets/images/arr_rig.png')}
+            />
+          </TouchableOpacity>
+        </View>
+
+        <View style={g(styles, 'form-item')}>
+          <Label label="费用金额" required={true} />
+          <TextInput
+            keyboardType="numeric"
+            defaultValue={item.feeAmount}
+            placeholder="请输入"
+            style={g(styles, 'form-item__value')}
+            onChangeText={text => {
+              this.textInputHandler(text, index, 'feeAmount')
+            }}
+          />
+        </View>
+        <View style={g(styles, 'form-item', 'form-item__remark')}>
+          <Text style={g(styles, 'form-item__label')}>备注</Text>
+          <TextInput
+            defaultValue={item.remark}
+            placeholder="请输入备注信息"
+            multiline={true}
+            style={g(styles, 'form-item__value', 'form-item__remark-value')}
+            onChangeText={text => {
+              this.textInputHandler(text, index, 'remark')
+            }}
+          />
+        </View>
+      </View>
+    )
+  }
+
+  render() {
+    const { feeLines, visible, currentFeeType, feeTypes } = this.state
+
+    return (
+      <View style={g(styles, 'container')}>
+        <Header title="器械消耗 - 费用明细" backCallback={this.onBackHandler} />
+
+        <ScrollView style={g(styles, 'bd')} ref={ref => (this.scrollRef = ref)}>
+          <View style={g(styles, 'bd-inner')}>
+            <FlatList
+              style={g(styles, 'list')}
+              data={feeLines}
+              renderItem={this._renderItem.bind(this)}
+              keyExtractor={item => R.toString(item.fid)}
+            />
+
+            <TouchableOpacity
+              style={g(styles, 'btn', 'add-btn')}
+              activeOpacity={0.8}
+              onPress={this.addFeeHandler}
+            >
+              <Text style={g(styles, 'btn__text', 'add-btn__text')}>+添加</Text>
+            </TouchableOpacity>
+          </View>
+        </ScrollView>
+
+        <View style={g(styles, 'ft')}>
+          <TouchableOpacity
+            style={[
+              g(styles, 'btn'),
+              { shadowColor: '#ccc', shadowOffset: { height: -6 }, shadowOpacity: 0.3 },
+            ]}
+            onPress={this.submitHandler}
+          >
+            <Text style={g(styles, 'btn__text')}>确定费用</Text>
+          </TouchableOpacity>
+        </View>
+
+        {/* 选择器弹窗 */}
+        <SelectModal
+          visible={visible}
+          data={feeTypes}
+          headerHeight={0}
+          value={currentFeeType}
+          onClose={() => this.setState({ visible: false })}
+          onChange={this.onFeeTypeChnageHandler}
+        />
+      </View>
+    )
+  }
+}
+
+/**
+ * @description:
+ * @param {*} required
+ * @param {*} label
+ * @return {*}
+ */
+function Label({ required, label }) {
+  return (
+    <Text style={g(styles, 'form-label')}>
+      {!!required && <Text style={g(styles, 'red', 'pr5')}>*</Text>}
+      <Text>{label}</Text>
+    </Text>
+  )
+}
+
+export default inject('consumeStore', 'sysStore')(observer(Fee))

src/router.tsx

@@ -13,6 +13,7 @@ import Mine from './pages/mine/mine'
 import Signin from './pages/signin/signin'
 import Consume from './pages/consume/consume'
 import Consumables from './pages/consume/consumables'
+import ConsumeFee from './pages/consume/fee'
 
 function createNavigator() {
   const options = {
@@ -86,6 +87,7 @@ function createNavigator() {
       Main: { screen: SwitchNavigator },
       Consume: { screen: Consume },
       Consumables: { screen: Consumables },
+      ConsumeFee: { screen: ConsumeFee },
     },
     { initialRouteName: 'Main', ...options },
   )

src/services/request.ts

@@ -97,6 +97,17 @@ export const request = (args: Partial<RequestConfig>) => {
         })
         .catch(e => {
           if (isCancel) return
+          // 登录错误直接cancel掉
+          if (e.error_code === 41006) {
+            show(e.error_msg)
+            removeRequestByPid(pid)
+            R.map(p => {
+              p.cancel()
+            }, requestQueue)
+            requestQueue = []
+            store.navigation.navigate('Signin')
+            return
+          }
           if (requestTimes < options.reTries) {
             return doRequest()
           }
@@ -130,18 +141,8 @@ const failHandler = async (err: any, store: Store, pid) => {
       show(err.status ? `${err.status} ${err.statusText}` : err.message)
     },
     () => {
-      if (err.error_code === 41006) {
-        show(err.error_msg)
-        removeRequestByPid(pid)
-        R.map(p => {
-          p.cancel()
-        }, requestQueue)
-        requestQueue = []
-        store.navigation.navigate('Signin')
-      } else {
-        show(err.error_msg)
-        removeRequestByPid(pid)
-      }
+      show(err.error_msg)
+      removeRequestByPid(pid)
     },
   )(err.error_code)
   return err

src/services/service.ts

@@ -21,6 +21,15 @@ export default class Service {
   }
 
   /**
+   * @description: 获取系统值集
+   * @param {object} data
+   * @return {*}
+   */
+  getSysValueSet(data: { valueSetCode: string }) {
+    return request({ url: `${ctx}/system/value_set/search`, data })
+  }
+
+  /**
    * 登录
    * @param data
    * @returns
@@ -99,4 +108,13 @@ export default class Service {
       needToken: false,
     })
   }
+
+  /**
+   * @description: 创建消耗订单
+   * @param {any} data
+   * @return {*}
+   */
+  createConsumeOrder(data: any) {
+    return request({ url: `${ctx}/surgery/consume_order/create`, data, method: 'post' })
+  }
 }

src/stores/consume.ts

@@ -10,7 +10,7 @@
  *
  */
 
-import { observable, flow, runInAction, action, computed } from 'mobx'
+import { observable, flow, action } from 'mobx'
 import { ISurgeryCollectHeader, ISurgeryCollectLine } from 'bonehouse'
 import { injectable, inject } from 'inversify'
 import * as R from 'ramda'
@@ -150,4 +150,13 @@ export default class Consume {
       R.pathOr([], ['data', 'lines']),
     )(res)
   })
+
+  /**
+   * @description: 提交数据
+   * @param {any} data
+   * @return {*}
+   */
+  async submit(data: any) {
+    return await this.service.createConsumeOrder(data)
+  }
 }

src/stores/system.ts

@@ -18,7 +18,6 @@ import { toBinaryNumber } from '../utils/utils'
 
 @injectable()
 export default class System {
-
   @observable
   headerHeight = 78
 
@@ -46,6 +45,11 @@ export default class System {
     OBS_MOBILE_EQU_CON_DISPLAY_PRICE: 'N',
   }
 
+  @persist('map') @observable sysValueSets = {
+    // 消耗明细费用类型
+    SUR_FEE_TYPE: [],
+  }
+
   @action
   setHeaderHeight(height: number) {
     this.headerHeight = height
@@ -69,4 +73,21 @@ export default class System {
 
     R.compose(R.map(getProfiles), R.keys)(this.sysProfiles)
   })
+
+  /**
+   * @description: 获取系统值集
+   * @param {*} function
+   * @return {*}
+   */
+  getSysValueSet = flow(function* (this: System) {
+    const getValueSets = async (key: any) => {
+      const res = (await this.service.getSysValueSet({ valueSetCode: key })) as any
+      runInAction(() => {
+        // @ts-ignore
+        this.sysValueSets[key] = res.data.sysValues
+      })
+    }
+
+    R.compose(R.map(getValueSets), R.keys)(this.sysValueSets)
+  })
 }

src/stores/user.ts

@@ -82,5 +82,6 @@ export default class UserStore {
     this.store.setToken(res.accessToken)
     this.store.setFunctions(res.functions)
     this.sysStore.getSysProfile()
+    this.sysStore.getSysValueSet()
   })
 }

types/global.ts

@@ -179,4 +179,10 @@ declare module 'bonehouse' {
     surCollectLineNumber: string
     surgeryCollectNumber: string
   }
+
+  export type IFee = {
+    feeType: string
+    feeAmount: number
+    remark: string
+  }
 }