消耗明细

src/assets/styles/variable.styl

@@ -6,7 +6,7 @@ home_background_color = #F7F7F7 // 背景色
 btn_sub_color = #0296F7 // 按钮色
 dis_sub_color = #BBBBBB // 禁用按钮色
 input_background_color = #efefef // 输入框底色
-
+btn_color = #ffffff // 按钮字体颜色
 // 字体色
 primary_text_color = #000000 // 主字颜色
 title_text_color = #ffffff // 标题颜色

src/components/form/index.tsx

@@ -16,6 +16,7 @@ import Select from './select'
 import Input from './input'
 import DatePicker from './date'
 import { g } from '../../utils/utils'
+import Consumables from '../../pages/consume/selected-consumables'
 import styles from './index.styl'
 
 type IProps = {
@@ -65,7 +66,12 @@ export default class Form extends Component<IProps> {
         <ScrollView style={g(styles, 'form')}>
           <View style={g(styles, 'form-inner')}>
             {fields.map(item => {
-              const FormComponent = formComponents[item.type] || Select
+              let FormComponent = formComponents[item.type] || Select
+
+              if (item.type === FieldType.CUSTOM) {
+                FormComponent = item.component
+              }
+
               return (
                 <FormComponent
                   key={item.field}
@@ -78,6 +84,9 @@ export default class Form extends Component<IProps> {
                 />
               )
             })}
+
+            {/* TODO: */}
+            {/* <Consumables /> */}
           </View>
         </ScrollView>
 

src/enums/index.ts

@@ -22,4 +22,5 @@ export enum FieldType {
   DATE,
   CHECKBOX,
   RADIO,
+  CUSTOM
 }

src/pages/consume/consumables.tsx

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/pages/consume/consumables.tsx
+ * @Author: peii
+ * @Date: 2021-05-11 21:21:43
+ * @Vision: 1.0
+ * @Description: 订单明细页面
+ *
+ * @Revision:
+ *
+ */
+import React, { Component } from 'react'
+import { View, Text, ScrollView, SafeAreaView } from 'react-native'
+import { inject, observer } from 'mobx-react'
+import { IFormField } from 'bonehouse'
+import Select from './select'
+import Input from './input'
+import Header from '../../components/header/header'
+import { g } from '../../utils/utils'
+import styles from './consumables.styl'
+
+type IProps = {
+  consumeStore: {
+    getOrderLines: Function
+  }
+}
+
+class Consumables extends Component<IProps> {
+  constructor(props: IProps) {
+    super(props)
+  }
+
+  componentDidMount() {
+    this.getOrderLines()
+  }
+
+  /**
+   * @description: 获取订单明细信息
+   * @param {*}
+   * @return {*}
+   */
+  getOrderLines() {
+    console.log(this.props.navigation)
+  }
+
+  render() {
+    return (
+      <View style={g(styles, 'container')}>
+        <Header title="消耗确认 - 消耗明细" />
+      </View>
+    )
+  }
+}
+
+export default inject('consumeStore')(observer(Consumables))

src/pages/consume/consume.tsx

@@ -16,7 +16,8 @@ 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 } from '../../utils/utils'
+import { g, getFormItem, isBlank, isNotBlank, show } from '../../utils/utils'
+import Consumables from './selected-consumables'
 import styles from './consume.styl'
 
 type IProps = {
@@ -142,7 +143,10 @@ class Consume extends Component<IProps> {
         label: '年龄',
         type: FieldType.TEXT,
         placeholder: '请输入年龄',
-        rules: [{ required: true, message: '请输入年龄' }],
+        rules: [
+          { required: true, message: '请输入年龄' },
+          { pattern: /\d{3}/, message: '请输入正确的年龄' },
+        ],
       },
       {
         field: 'patientBed',
@@ -166,6 +170,15 @@ class Consume extends Component<IProps> {
         multiline: true,
         rules: [],
       },
+      {
+        field: 'lines',
+        label: '耗材明细',
+        type: FieldType.CUSTOM, // 自定义类型
+        component: Consumables, // ReactElement
+        customHandler: this.orderBeforeHandler.bind(this, 'lines'),
+        rules: [{ required: true, message: '请选择耗材' }],
+        refrence: ['orgCode', 'surgeryCollectNumber'],
+      },
     ],
   }
 
@@ -366,8 +379,13 @@ class Consume extends Component<IProps> {
     data.doctorName = doctor
 
     if (isNotBlank(orderFollower)) {
-      followers = R.append(orderFollower, followers)
       data.surgeryFollowerCode = orderFollower.value
+      const follower = R.find(R.propEq('value', orderFollower.value))(followers)
+      if (isBlank(follower)) {
+        followers = R.append(orderFollower, followers)
+      }
+    } else {
+      data.surgeryFollowerCode = null
     }
 
     const item = getFormItem(formItems, 'surgeryFollowerCode')
@@ -379,6 +397,41 @@ class Consume extends Component<IProps> {
     }
   }
 
+  /**
+   * @description: 依赖项检查
+   * @param {*} itemName
+   * @return {*}
+   */
+  refrenceCheck(itemName: string) {
+    const { data, formItems } = this.state
+    const item = R.find(R.propEq('field', itemName))(formItems)
+    if (isBlank(item)) {
+      return true
+    }
+    // 需要先选择依赖的字段
+    for (const ref of item.refrence || []) {
+      if (isBlank(data[ref])) {
+        const field = R.find(R.propEq('field', ref))(formItems)
+        if (isNotBlank(field)) {
+          show(`请先选择${field.label}`)
+          return false
+        }
+      }
+    }
+    return true
+  }
+
+  /**
+   * @description: 添加消耗明细跳转前处理
+   * @param {*}
+   * @return {*}
+   */
+  orderBeforeHandler(itemName: string) {
+    if (!this.refrenceCheck(itemName)) return
+    const { data } = this.state
+    this.props.navigation.navigate('Consumables', { orderId: data.surgeryCollectNumber })
+  }
+
   render() {
     const { formItems, data, scrollable } = this.state
     const { navigation } = this.props

src/pages/consume/selected-consumables.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
+
+.ft
+  margin-top 10px
+  align-items center
+
+  &-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/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 * as R from 'ramda'
+import { g, isBlank, isNotBlank } from '../../utils/utils'
+import styles from './selected-consumables.styl'
+
+type IProps = {
+  value: any[]
+  item: IFormField
+}
+
+export default (props: IProps) => {
+  const { value, item } = props
+
+  return (
+    <View style={g(styles, 'consumeable')}>
+      <View style={g(styles, 'hd')}>
+        <Text style={g(styles, 'hd-text')}>耗材明细</Text>
+      </View>
+
+      {isNotBlank(value) && (
+        <View style={g(styles, 'bd')}>
+          <Text>耗材明细</Text>
+        </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/router.tsx

@@ -12,6 +12,7 @@ import Home from './pages/index/index'
 import Mine from './pages/mine/mine'
 import Signin from './pages/signin/signin'
 import Consume from './pages/consume/consume'
+import Consumables from './pages/consume/consumables'
 
 function createNavigator() {
   const options = {
@@ -84,6 +85,7 @@ function createNavigator() {
     {
       Main: { screen: SwitchNavigator },
       Consume: { screen: Consume },
+      Consumables: { screen: Consumables },
     },
     { initialRouteName: 'Main', ...options },
   )

src/stores/consume.ts

@@ -11,7 +11,7 @@
  */
 
 import { observable, flow, runInAction, action } from 'mobx'
-import { ISurgeryCollectHeader } from 'bonehouse'
+import { ISurgeryCollectHeader, ISurgeryCollectLine } from 'bonehouse'
 import { injectable, inject } from 'inversify'
 import * as R from 'ramda'
 import { isNotBlank } from '../utils/utils'
@@ -26,6 +26,8 @@ export default class Consume {
 
   @observable _orders: { [key: string]: ISurgeryCollectHeader[] } = {}
 
+  @observable _orderLines: { [key: string]: ISurgeryCollectLine[] } = {}
+
   /**
    * @description: 借货订单列表
    * @param {string} sellerCode
@@ -89,7 +91,7 @@ export default class Consume {
   }
 
   /**
-   * @description: 获取借货订单
+   * @description: 获取借货订单头列表
    * @param {*}
    * @return {*}
    */
@@ -98,4 +100,11 @@ export default class Consume {
     const { sellerCode, orgCode, customerCode } = params
     this._orders[`${sellerCode}_${orgCode}_${customerCode}`] = res.data.surgeryCollectHeaders
   })
+
+  /**
+   * @description: 获取借货订单行列表
+   * @param {string} surggerCollectNumber
+   * @return {*}
+   */
+  getOrderLines = flow(function* (this: Consume, surggerCollectNumber: string) {})
 }

types/global.ts

@@ -55,6 +55,7 @@ declare module 'bonehouse' {
     disabled?: boolean
     refrence?: string[]
     multiline?: boolean
+    customHandler?: Function
   }
 
   export type IOrganization = {
@@ -147,4 +148,8 @@ declare module 'bonehouse' {
     updateBy: string
     updateTime: string
   }
+
+  export type ISurgeryCollectLine = {
+
+  }
 }