产品选择相关

src/pages/order/productions/index.styl

@@ -53,9 +53,14 @@ for i in 1 .. 50
   .text-icon-{i}__text
     color hsl(i * 30, 50%, 50%)
 
+.body
+  width 100%
+  flex 1
+  @extend .row
+
 .category
   width 80px
-  flex 1
+  background-color #f5f5f5
 
   &-item
     height 60px
@@ -90,3 +95,13 @@ for i in 1 .. 50
       &__active
         color first_text_color
         font-weight 700
+
+.pro
+  flex 1
+  background-color foundation_color
+  padding-left 20px
+
+  &-item
+    padding 10px 0
+    border-bottom-width 1px
+    border-bottom-color rgba(99, 99, 99, 0.1)

src/pages/order/productions/index.tsx

@@ -2,7 +2,7 @@
  * @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/index.tsx
  * @Author: peii
  * @Date: 2021-07-14 17:54:04
- * @LastEditTime: 2021-07-16 16:39:13
+ * @LastEditTime: 2021-08-03 23:45:15
  * @LastEditors: peii
  * @Vision: 1.0
  * @Description: 自助下单选择产品页面
@@ -17,6 +17,7 @@ import * as R from 'ramda'
 import Header from '../../../components/header/header'
 import Supplier from './supplier'
 import Category from './category'
+import Production from './production'
 import { g, getFormItem, isBlank, isNotBlank, show, translateSysprofile } from '../../../utils/utils'
 import styles from './index.styl'
 
@@ -81,8 +82,13 @@ class Productions extends Component<IProps, IState> {
         {/* 头部供应商 */}
         <Supplier />
         
+        <View style={g(styles, 'body')}>
           {/* 左侧产品分类 */}
           <Category />
+
+          {/* 产品块 */}
+          <Production />
+        </View>
       </View>
     )
   }

src/pages/order/productions/production.tsx

@@ -2,34 +2,80 @@
  * @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/production.tsx
  * @Author: peii
  * @Date: 2021-07-16 15:36:02
- * @LastEditTime: 2021-07-16 17:43:16
+ * @LastEditTime: 2021-08-04 00:03:18
  * @LastEditors: peii
  * @Vision: 1.0
- * @Description: 右侧产品列表
+ * @Description: 产品列表
  */
 
 // @ts-nocheck
 import React, { Component } from 'react'
-import { View, Text, ScrollView } from 'react-native'
+import { View, Text, ScrollView, FlatList } from 'react-native'
 import { inject, observer } from 'mobx-react'
 import { ISupplier } from 'bonehouse'
 import * as R from 'ramda'
 import { g, getFormItem, isBlank, isNotBlank, show, translateSysprofile } from '../../../utils/utils'
 import styles from './index.styl'
 
+type IField = {
+  field: string
+  label: string
+  type?: string
+  style?: string
+}
+
 type IProps = {
   productionStore: {
-    
+    productionFields: IField[]
+    productions: any[]
   }
 }
 
 type IState = {}
 
 class Production extends Component<IProps, IState> {
+  renderItem({ item, index }) {
+    const productionFields = this.props.productionStore.productionFields
+    console.log(item)
+
+    return (
+      <View style={g(styles, 'pro-item')}>
+        {productionFields.map((field, idx) => {
+          return (
+            <View key={field.field} style={g(styles, 'pro-item__field')}>
+              <Text
+                style={[
+                  g(styles, { 'pro-item__field-text': true, 'pro-item__field-text-title': field.type === 'title' }),
+                  field.style,
+                ]}
+              >
+                {field.type === 'title' ? (
+                  <Text>
+                    {index + 1 + '.'} {item[field.field]}
+                  </Text>
+                ) : (
+                  <Text>{field.label + '：' + (item[field.field] || '无')}</Text>
+                )}
+              </Text>
+            </View>
+          )
+        })}
+      </View>
+    )
+  }
+
   render() {
-    return <View style={g(styles, 'pro')}>
+    const productions = this.props.productionStore.productions
 
+    return (
+      <View style={g(styles, 'pro')}>
+        <FlatList
+          data={productions}
+          renderItem={this.renderItem.bind(this)}
+          keyExtractor={item => item.itemCode || item.templateNumber}
+        />
       </View>
+    )
   }
 }
 

src/stores/production.ts

@@ -2,7 +2,7 @@
  * @FilePath: /BoneHouse_Business_APP/src/stores/production.ts
  * @Author: peii
  * @Date: 2021-07-15 10:49:02
- * @LastEditTime: 2021-07-16 18:12:13
+ * @LastEditTime: 2021-08-03 23:57:52
  * @LastEditors: peii
  * @Vision: 1.0
  * @Description: 产品store
@@ -50,21 +50,53 @@ export default class Production {
     // 手术模板显示
     SURGERY_TEMPLATE: [
       { field: 'templateName', label: '', type: 'title' },
-      { field: 'customerName', label: '客户', style: 'production-item__text-big' },
+      { field: 'customerName', label: '客户', style: 'pro-item__text-big' },
       { field: 'doctorName', label: '手术医生' },
       { field: 'surgeryTypeName', label: '手术类型' },
-      { field: 'templateDesc', label: '模板说明', style: 'production-item__text-small' },
+      { field: 'templateDesc', label: '模板说明', style: 'pro-item__text-small' },
     ],
+    // 钉盒及器械包
     package: [
-      { field: 'templateName', label: '', type: 'title' },
-      { field: 'customerName', label: '客户', style: 'production-item__text-big' },
-      { field: 'doctorName', label: '手术医生' },
-      { field: 'surgeryTypeName', label: '手术类型' },
+      { field: 'itemName', label: '', type: 'title' },
+      { field: 'generalName', label: '通用名称', style: 'pro-item__text-big' },
+      { field: 'specification', label: '规格型号' },
+      { field: 'serialNumber', label: '物料序列' },
+    ],
+    // 零散器械
+    SCATTERED_EQUIPMENT: [
+      { field: 'manufacturerProductCode', label: '', type: 'title' },
+      { field: 'itemName', label: '物料名称', style: 'pro-item__text-big' },
+      { field: 'generalName', label: '通用名称' },
+      { field: 'specification', label: '规格型号' },
+      // { field: 'itemCode', label: '', style: 'production-item__text-small' },
+    ],
+    // 耗材
+    materials: [
+      { field: 'itemCode', label: '', type: 'title' },
+      { field: 'itemName', label: '物料名称', style: 'pro-item__text-big' },
+      { field: 'generalName', label: '通用名称' },
+      { field: 'specification', label: '规格型号' },
     ],
   }
 
+  // 图片字段
   imageFields = {
-    
+    SURGERY_TEMPLATE: {
+      sourceField: '',
+      textField: 'templateName',
+    },
+    package: {
+      sourceField: 'photos',
+      textField: 'itemName',
+    },
+    SCATTERED_EQUIPMENT: {
+      sourceField: 'photos',
+      textField: 'itemName',
+    },
+    materials: {
+      sourceField: 'photos',
+      textField: 'itemName',
+    },
   }
 
   @observable orgCode: string = ''
@@ -99,8 +131,36 @@ export default class Production {
 
   @computed
   get productions() {
+    if (isBlank(this.orgCode) || isBlank(this.activeSupplier) || isBlank(this.activeCatetory)) {
       return []
     }
+    return this._productions.get(this.currentProductionKey)
+  }
+
+  /**
+   * @description: 产品具体显示的字段
+   * @param {*}
+   * @return {*}
+   */
+  @computed
+  get productionFields() {
+    if (isBlank(this.orgCode) || isBlank(this.activeSupplier) || isBlank(this.activeCatetory)) {
+      return []
+    }
+    if (R.includes(this.activeCatetory.categoryCode, ['1301', '1302'])) {
+      return this.showFields.package
+    }
+    let fields = this.showFields[this.activeCatetory.categoryCode]
+    if (isBlank(fields)) {
+      fields = this.showFields.materials
+    }
+    return fields
+  }
+
+  @computed
+  get currentProductionKey() {
+    return `${this.orgCode}_${this.activeSupplier.supplierCode}_${this.activeCatetory.categoryCode}`
+  }
 
   @action
   setOrgCode(orgCode: string) {
@@ -230,7 +290,9 @@ export default class Production {
       manufacturerCode: this.activeSupplier.supplierCode,
     }
     const res = yield this.service.getSurgeryTemplates(params)
-    console.log(res)
+    if (res.errorCode) return
+
+    this._productions.set(this.currentProductionKey, R.pathOr([], ['data', 'surgeryTemplateHeaders'])(res))
   })
 
   /**
@@ -243,7 +305,8 @@ export default class Production {
       categoryCode: this.activeCatetory.categoryCode,
     }
     const res = yield this.service.getItemPackage(params)
-    console.log(res)
+    if (res.errorCode) return
+    this._productions.set(this.currentProductionKey, R.pathOr([], ['data', 'items'])(res))
   })
 
   /**
@@ -255,7 +318,8 @@ export default class Production {
       manufacturerCode: this.activeSupplier.supplierCode,
     }
     const res = yield this.service.getTools(params)
-    console.log(res)
+    if (res.errorCode) return
+    this._productions.set(this.currentProductionKey, R.pathOr([], ['data', 'tools'])(res))
   })
 
   /**
@@ -269,6 +333,7 @@ export default class Production {
       categoryCode: this.activeCatetory.categoryCode,
     }
     const res = yield this.service.getItemDetail(params)
-    console.log(res)
+    if (res.errorCode) return
+    this._productions.set(this.currentProductionKey, R.pathOr([], ['data', 'details'])(res))
   })
 }