选择产品

package.json

@@ -14,7 +14,7 @@
     "babel-plugin-import": "^1.13.3",
     "dayjs": "^1.10.4",
     "inversify": "^5.0.5",
-    "mobx": "^5.7.0",
+    "mobx": "~4.4",
     "mobx-persist": "^0.4.1",
     "mobx-react": "~6.0.0",
     "moment": "2.29.1",

src/components/form/common.tsx

-import React, { Component } from 'react'
-import { View, Text, Image, TouchableOpacity, TextInput } from 'react-native'
-import { IFormField } from 'bonehouse'
+// @ts-nocheck
+import React from 'react'
+import { Text } from 'react-native'
 import { g, isRequired } from '../../utils/utils'
 import styles from './index.styl'
 
@@ -10,7 +10,7 @@ export const Title = props => {
   return (
     <Text style={g(styles, 'form-label')}>
       {!!required && <Text style={g(styles, 'red', 'pr5')}>*</Text>}
-      <Text>{item.label}</Text>
+      <Text style={g(styles, 'form-label__text')}>{item.label}</Text>
     </Text>
   )
 }

src/components/form/index.styl

@@ -37,6 +37,9 @@
     color primary_text_color
     width 120px
 
+    &-text
+      white-space nowrap
+
   &-input
     flex-direction row
     align-items center

src/inversify/index.ts

@@ -18,6 +18,7 @@ import User from '../stores/user'
 import Organization from '../stores/organization'
 import Consume from '../stores/consume'
 import Order from '../stores/order'
+import Production from '../stores/production'
 
 const container = new Container({ defaultScope: 'Singleton' })
 
@@ -28,5 +29,6 @@ container.bind<User>(TYPES.UserStore).to(User)
 container.bind<Organization>(TYPES.OrgStore).to(Organization)
 container.bind<Consume>(TYPES.Consume).to(Consume)
 container.bind<Order>(TYPES.Order).to(Order)
+container.bind<Production>(TYPES.Production).to(Production)
 
 export default container

src/inversify/types.ts

@@ -16,4 +16,5 @@ export const TYPES = {
   OrgStore: Symbol.for('organization'),
   Consume: Symbol.for('consume'),
   Order: Symbol.for('order'),
+  Production: Symbol.for('production'),
 }

src/pages/order/productions/category.tsx

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/category.tsx
+ * @Author: peii
+ * @Date: 2021-07-15 14:56:10
+ * @LastEditTime: 2021-07-15 18:09:17
+ * @LastEditors: peii
+ * @Vision: 1.0
+ * @Description: 产品分类
+ */
+
+// @ts-nocheck
+import React, { Component } from 'react'
+import { View, Text, ScrollView, Image, TouchableOpacity } from 'react-native'
+import { inject, observer } from 'mobx-react'
+import { ISupplier, ICategory } from 'bonehouse'
+import * as R from 'ramda'
+import { g, getFormItem, isBlank, isNotBlank, show, translateSysprofile } from '../../../utils/utils'
+import { IMAGE_PREFIX } from './constant'
+import styles from './index.styl'
+
+type IProps = {
+  productionStore: {
+    categories: ICategory[]
+  }
+}
+
+class Category extends Component<IProps> {
+  render() {
+    const categories = this.props.productionStore.categories
+
+    return (
+      <View style={g(styles, 'category')}>
+        <ScrollView style={g(styles, 'category-scroll')}>
+          {categories &&
+            categories.map(category => {
+              const icon = isNotBlank(category.categoryIcon)
+                ? category.categoryIcon
+                : isNotBlank(category.categoryImage)
+                ? { uri: category.categoryImage }
+                : ''
+
+              return (
+                <TouchableOpacity style={g(styles, 'category-item')} key={category.categoryCode}>
+                  {isNotBlank(icon) && <Image source={icon} style={g(styles, 'category-item__icon')} />}
+                  <Text>{category.categoryName}</Text>
+                </TouchableOpacity>
+              )
+            })}
+        </ScrollView>
+      </View>
+    )
+  }
+}
+
+export default inject('store', 'productionStore')(observer(Category))

src/pages/order/productions/constant.ts

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/constant.ts
+ * @Author: peii
+ * @Date: 2021-07-15 12:18:52
+ * @LastEditTime: 2021-07-15 12:20:16
+ * @LastEditors: peii
+ * @Vision: 1.0
+ * @Description: 产品相关常数定义
+ */
+
+// 图片文件夹路径
+export const IMAGE_PREFIX = '/jeecg-boot/sys/common/view/'

src/pages/order/productions/index.styl

+@import '../../../assets/styles/base.styl'
+@import '../../../assets/styles/variable.styl'
+
+iconWidth = 44px
+colors = {
+  '1': 
+}
+
+.container
+  background-color home_background_color
+
+.suppliers
+  width 100%
+  height 64px
+  padding 0px 20px
+  background-color foundation_color
+  margin-bottom 5px
+
+  &-item
+    width iconWidth
+    height: iconWidth + 20px
+    margin-right 20px
+    padding-top 10px
+
+    &__active
+      border-bottom-width 2px
+      border-bottom-color primary_color
+
+    &__icon
+      width iconWidth
+      height iconWidth
+
+    &__text-icon
+      width iconWidth
+      height iconWidth
+      borderRadius 22px
+      justify-content center
+      align-items center
+      borderWidth 2px
+
+      &-text
+        font-size 16px
+        font-family font_family_semibold
+
+for i in 1 .. 50
+  .text-icon-{i}
+    borderColor hsl(i * 50, 50%, 50%)
+
+  .text-icon__text-{i}
+    color hsl(i * 30, 50%, 50%)
+
+.category
+  width 80px
+  flex 1
+
+  &-item
+    height 60px
+    justify-content center
+    padding 0 10px
\ No newline at end of file

src/pages/order/productions/index.tsx

@@ -2,37 +2,74 @@
  * @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/index.tsx
  * @Author: peii
  * @Date: 2021-07-14 17:54:04
- * @LastEditTime: 2021-07-14 18:01:56
+ * @LastEditTime: 2021-07-15 17:03:56
  * @LastEditors: peii
  * @Vision: 1.0
- * @Description:
+ * @Description: 自助下单选择产品页面
  */
 
 // @ts-nocheck
 import React, { Component } from 'react'
 import { View, Text, ScrollView } from 'react-native'
 import { inject, observer } from 'mobx-react'
-import { IOrganization, IFormField } from 'bonehouse'
+import { ISupplier } from 'bonehouse'
 import * as R from 'ramda'
-import Form from '../../../components/form'
-import { FieldType, SelectMode } from '../../../enums'
 import Header from '../../../components/header/header'
+import Supplier from './supplier'
+import Category from './category'
 import { g, getFormItem, isBlank, isNotBlank, show, translateSysprofile } from '../../../utils/utils'
 import styles from './index.styl'
 
-type IProps = {}
+type IProps = {
+  productionStore: {
+    getSuppliers: (orgCode: string) => {}
+    setOrgCode: (orgCode: string) => {}
+    suppliers: ISupplier[]
+    getCategory: (manufacturerCode: string) => {}
+  }
+}
 
 type IState = {}
 
 class Productions extends Component<IProps, IState> {
+  state = {}
+
+  constructor(props) {
+    super(props)
+  }
+
+  componentDidMount() {
+    this.initDatas()
+  }
+
+  /**
+   * @description: 初始化数据
+   * @param {*}
+   * @return {*}
+   */
+  async initDatas() {
+    const orgCode = this.props.navigation.getParam('orgCode')
+    this.props.productionStore.setOrgCode(orgCode)
+    // 供应商信息
+    this.props.productionStore.getSuppliers(orgCode)
+  }
+
   render() {
-    const { navigation } = this.props
+    const { navigation, productionStore } = this.props
+
     return (
       <View style={g(styles, 'container')}>
+        {/* 页面头 */}
         <Header title="选择产品" backCallback={() => navigation.goBack()} />
+
+        {/* 供应商 */}
+        <Supplier />
+
+        {/* 产品分类 */}
+        <Category />
       </View>
     )
   }
 }
 
-export default inject('orgStore')(observer(Productions))
+export default inject('orgStore', 'orderStore', 'productionStore')(observer(Productions))

src/pages/order/productions/supplier.tsx

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/supplier.tsx
+ * @Author: peii
+ * @Date: 2021-07-15 12:07:24
+ * @LastEditTime: 2021-07-15 17:47:20
+ * @LastEditors: peii
+ * @Vision: 1.0
+ * @Description: 供应商列表
+ */
+
+// @ts-nocheck
+import React, { Component } from 'react'
+import { View, Text, ScrollView, Image, TouchableOpacity } 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 { IMAGE_PREFIX } from './constant'
+import styles from './index.styl'
+
+type IProps = {
+  store: {
+    host: string
+  }
+  productionStore: {
+    suppliers: ISupplier[]
+    setActiveSupplier: (supplier: ISupplier) => {}
+    activeSupplier: ISupplier
+  }
+}
+
+class Supplier extends Component<IProps> {
+  constructor(props) {
+    super(props)
+  }
+
+  /**
+   * @description: 图标解释
+   * @param {ISupplier} supplier
+   * @return {*}
+   */
+  getIcon(supplier: ISupplier) {
+    if (isBlank(supplier) || isBlank(supplier.supplierIcon)) {
+      return ''
+    } else if (R.type(supplier.supplierIcon) === 'String') {
+      return supplier.supplierIcon
+    } else {
+      return R.pathOr('', ['supplierIcon', 0])(supplier)
+    }
+  }
+
+  supplierClickHandler(supplier) {
+    this.props.productionStore.setActiveSupplier(supplier)
+  }
+
+  render() {
+    const { suppliers, activeSupplier } = this.props.productionStore
+
+    return (
+      <View style={g(styles, 'suppliers')}>
+        <ScrollView style={[g(styles, 'suppliers-scroll')]} horizontal={true} showsHorizontalScrollIndicator={false}>
+          {isNotBlank(suppliers) &&
+            suppliers.map((supplier, index) => {
+              const icon = this.getIcon(supplier)
+              return (
+                <TouchableOpacity
+                  style={g(styles, {
+                    'suppliers-item': true,
+                    'suppliers-item__active': R.compose(
+                      R.equals(supplier.supplierCode),
+                      R.propOr('', 'supplierCode'),
+                    )(activeSupplier),
+                  })}
+                  key={supplier.supplierCode}
+                  touchableOpacity={0.8}
+                  onPress={() => {
+                    this.supplierClickHandler(supplier)
+                  }}
+                >
+                  {isBlank(icon) ? (
+                    <View style={g(styles, 'suppliers-item__text-icon', `text-icon-${index + 1}`)}>
+                      <Text style={g(styles, 'suppliers-item__text-icon-text', `text-icon__text-${index + 1}`)}>
+                        {supplier.supplierShortName}
+                      </Text>
+                    </View>
+                  ) : (
+                    <Image
+                      source={{ uri: this.props.store.host + IMAGE_PREFIX + icon }}
+                      style={g(styles, 'suppliers-item__icon')}
+                      resizeMode="contain"
+                    />
+                  )}
+                </TouchableOpacity>
+              )
+            })}
+        </ScrollView>
+      </View>
+    )
+  }
+}
+
+export default inject('store', 'productionStore')(observer(Supplier))

src/pages/order/self.tsx

@@ -2,7 +2,7 @@
  * @FilePath: /BoneHouse_Business_APP/src/pages/order/self.tsx
  * @Author: peii
  * @Date: 2021-07-13 22:40:12
- * @LastEditTime: 2021-07-14 18:07:32
+ * @LastEditTime: 2021-07-15 10:26:50
  * @LastEditors: peii
  * @Vision: 1.0
  * @Description: 自助下单
@@ -79,6 +79,7 @@ class SelfOrder extends Component<IProps, IState> {
   state = {
     data: {
       sellerCode: this.props.userStore.userName,
+      replaceItemFlag: 'N',
     },
     formItems: [
       {
@@ -188,6 +189,7 @@ class SelfOrder extends Component<IProps, IState> {
         field: 'takeCertFlag',
         label: '需要携带合格证',
         type: FieldType.RADIO,
+        rules: [{ required: true, message: '请选择是否需要携带合格证' }],
         options: [
           {
             label: '是',

src/services/service.ts

@@ -144,4 +144,22 @@ export default class Service {
   createCollectOrder(data: any) {
     return request({ url: `${ctx}/surgery/collect_order/via_data/create`, data, method: 'post' })
   }
+
+  /**
+   * @description: 请求供应商
+   * @param {object} data
+   * @return {*}
+   */
+  getSuppliers(data: { orgCode: string; supplierType: string; filterFlag: string }) {
+    return request({ url: `${ctx}/order/pur_supplier/search`, data })
+  }
+
+  /**
+   * @description:
+   * @param {object} data
+   * @return {*}
+   */
+  getProductionCategories(data: { manufacturerCode: string }) {
+    return request({ url: `${ctx}/order/item/search`, data })
+  }
 }

src/stores/index.ts

@@ -19,6 +19,7 @@ const userStore = container.get<any>(TYPES.UserStore)
 const orgStore = container.get<any>(TYPES.OrgStore)
 const consumeStore = container.get<any>(TYPES.Consume)
 const orderStore = container.get<any>(TYPES.Order)
+const productionStore = container.get<any>(TYPES.Production)
 
 const hydrate = create({
   storage: AsyncStorage,
@@ -30,5 +31,6 @@ hydrate('store', store)
 hydrate('sysStore', sysStore)
 hydrate('userStore', userStore)
 hydrate('orgStore', orgStore)
+hydrate('productionStore', productionStore)
 
-export default { store, sysStore, userStore, orgStore, consumeStore, orderStore }
+export default { store, sysStore, userStore, orgStore, consumeStore, orderStore, productionStore }

src/stores/order.ts

@@ -2,7 +2,7 @@
  * @FilePath: /BoneHouse_Business_APP/src/stores/order.ts
  * @Author: peii
  * @Date: 2021-07-04 14:52:03
- * @LastEditTime: 2021-07-14 16:14:00
+ * @LastEditTime: 2021-07-15 10:48:33
  * @LastEditors: peii
  * @Vision: 1.0
  * @Description: 订单store

src/stores/production.ts

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/stores/production.ts
+ * @Author: peii
+ * @Date: 2021-07-15 10:49:02
+ * @LastEditTime: 2021-07-15 18:02:56
+ * @LastEditors: peii
+ * @Vision: 1.0
+ * @Description: 产品store
+ * @ts-nocheck
+ */
+
+import { observable, action, runInAction, toJS, flow, computed, ObservableMap } from 'mobx'
+import { persist } from 'mobx-persist'
+import { injectable, inject } from 'inversify'
+import * as R from 'ramda'
+import { ISupplier, ICategory } from 'bonehouse'
+import Service from '../services/service'
+import { isBlank, isNotBlank } from '../utils/utils'
+import { TYPES } from '../inversify/types'
+
+@injectable()
+export default class Production {
+  @inject(TYPES.Service)
+  private service!: Service
+
+  defaultCategories = [
+    {
+      categoryCode: 'SURGERY_TEMPLATE',
+      categoryName: '手术套包',
+      categoryIcon: require('../assets/images/surg_temp.png'),
+    },
+    {
+      categoryCode: '1301',
+      categoryName: '钉盒',
+      categoryIcon: require('../assets/images/screw_box.png'),
+    },
+    {
+      categoryCode: '1302',
+      categoryName: '器械包',
+      categoryIcon: require('../assets/images/equip_bag.png'),
+    },
+    {
+      categoryCode: 'SCATTERED_EQUIPMENT',
+      categoryName: '零散器械',
+      categoryIcon: require('../assets/images/auxili_tool.png'),
+    },
+  ]
+
+  @observable orgCode: string = ''
+  @observable activeSupplier!: ISupplier
+  @observable activeCatetory!: ICategory
+
+  @persist('map')
+  @observable
+  _suppliers: ObservableMap<string, ISupplier[]> = new ObservableMap()
+
+  @persist('map')
+  @observable
+  _categories: ObservableMap<string, ICategory[]> = new ObservableMap()
+
+  @computed
+  get suppliers() {
+    return isNotBlank(this.orgCode) ? this._suppliers.get(this.orgCode) : []
+  }
+
+  @computed
+  get categories() {
+    if (isBlank(this.orgCode) || isBlank(this.activeSupplier)) {
+      return []
+    } else {
+      return this._categories.get(`${this.activeSupplier.supplierCode}`)
+    }
+  }
+
+  @action
+  setOrgCode(orgCode: string) {
+    this.orgCode = orgCode
+  }
+
+  @action
+  setActiveSupplier(supplier: ISupplier) {
+    this.activeSupplier = supplier
+  }
+
+  /**
+   * @description: 请求供应商信息
+   * @param {*} function
+   * @param {string} orgCode
+   * @return {*}
+   */
+  getSuppliers = flow(function* (this: Production, orgCode: string) {
+    const params = {
+      orgCode,
+      supplierType: 'MANUFACTURER,M%26O', // 供应商
+      filterFlag: 'Y', // 过滤标识
+    }
+
+    const res = yield this.service.getSuppliers(params)
+    if (res.errorCode) return
+    const suppliers = R.filter(isNotBlank)(res.data)
+    this._suppliers.set(orgCode, suppliers as ISupplier[])
+
+    if (isNotBlank(suppliers)) {
+      this.setActiveSupplier(R.head(suppliers as any) as any)
+      this.getCategory(this.activeSupplier.supplierCode)
+    }
+  })
+
+  /**
+   * @description: 请求供应商产品分类
+   * @param {*} function
+   * @param {string} manufacturerCode
+   * @return {*}
+   */
+  getCategory = flow(function* (this: Production, manufacturerCode: string) {
+    const params = {
+      manufacturerCode: manufacturerCode,
+    }
+    const res = yield this.service.getProductionCategories(params)
+    if (res.errorCode) return
+
+    const categories = R.concat(R.clone(this.defaultCategories), res.data.item)
+    this._categories.set(manufacturerCode, categories)
+  })
+}

src/utils/transform.ts

@@ -9,7 +9,7 @@
  *
  */
 import * as R from 'ramda'
-import { isBlank } from './utils'
+import { isBlank, isNotBlank } from './utils'
 
 /**
  * 下划线转换驼峰
@@ -48,7 +48,10 @@ export function transformObject(obj: ITransObj, type: ITransformTypes = 'toHump'
     R.compose(
       R.map((key: string) => {
         const dKey = fn.call(null, key)
-        if (R.type(item[key]) === 'Array' || R.type(item[key]) === 'Object') {
+        if (
+          (R.type(item[key]) === 'Array' && isNotBlank(item[key]) && R.type(item[key][0]) === 'Object') ||
+          R.type(item[key]) === 'Object'
+        ) {
           desc[dKey] = isBlank(item[key]) ? item[key] : transformObject(item[key], type)
         } else {
           desc[dKey] = item[key]

types/global.ts

@@ -186,4 +186,31 @@ declare module 'bonehouse' {
     feeAmount: number
     remark: string
   }
+
+  export type ISupplier = {
+    attribute2: string
+    bigCategoryLevel: number
+    categoryId: string
+    identifyLevel: number
+    initialsPinyin: string
+    organizationCode: string
+    purchasableFlag: string
+    selfServiceFlag: string
+    sortord: string
+    status: string
+    supplierCode: string
+    supplierDesc: string
+    supplierIcon: string[]
+    supplierName: string
+    supplierShortName: string
+    supplierType: string
+    taxRegistrationCode: string
+  }
+
+  export type ICategory = {
+    categoryCode: string
+    categoryName: string
+    categoryIcon?: string
+    categoryImage?: string
+  }
 }

yarn.lock

@@ -5006,10 +5006,10 @@ mobx-react@~6.0.0:
   dependencies:
     mobx-react-lite "1.4.0"
 
-mobx@^5.7.0:
-  version "5.15.7"
-  resolved "https://registry.yarnpkg.com/mobx/-/mobx-5.15.7.tgz#b9a5f2b6251f5d96980d13c78e9b5d8d4ce22665"
-  integrity sha512-wyM3FghTkhmC+hQjyPGGFdpehrcX1KOXsDuERhfK2YbJemkUhEB+6wzEN639T21onxlfYBmriA1PFnvxTUhcKw==
+mobx@~4.4:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-4.4.2.tgz#6aa83a8c94b518fad348e3f7c4a6de424bc92bd2"
+  integrity sha512-EZ8vZjR6o0b6t3XaVOJXTMwedzs9xRfYRCTPKg+0HNWWdei5E+F3qHgtkkJ5q0Op+4Yot1N1igJJdNgPL26hxA==
 
 moment@2.29.1, moment@^2.22.1:
   version "2.29.1"