package details

package.json

@@ -8,9 +8,10 @@
     "test": "jest"
   },
   "dependencies": {
-    "@ant-design/react-native": "^4.1.0",
+    "@ant-design/react-native": "^3.1.15",
     "@babel/plugin-proposal-decorators": "^7.13.15",
     "@react-native-community/async-storage": "^1.12.1",
+    "@react-native-community/viewpager": "^5.0.11",
     "babel-plugin-import": "^1.13.3",
     "dayjs": "^1.10.4",
     "inversify": "^5.0.5",
@@ -30,7 +31,6 @@
     "react-native-image-picker": "0.28.0",
     "react-native-image-zoom-viewer": "3.0.1",
     "react-native-root-toast": "3.1.1",
-    "react-native-scrollable-tab-view": "0.9.0",
     "react-native-sound": "0.11.0",
     "react-native-splash-screen": "3.2.0",
     "react-navigation": "3.11.0",

src/enums/index.ts

@@ -5,7 +5,7 @@
  * @Vision: 1.0
  * @Description:
  *
- * @Revision:
+ * @Revision: enum
  *
  */
 export enum MsgType {
@@ -31,3 +31,10 @@ export enum SelectMode {
   PAGE,
   MODAL,
 }
+
+export enum DefaultCategory {
+  SURGERY_TEMPLATE = 'SURGERY_TEMPLATE',
+  NAIL_BOX = '1301',
+  EQUIP_BOX = '1302',
+  SCATTERED_EQUIPMENT = 'SCATTERED_EQUIPMENT',
+}

src/pages/order/productions/common.tsx

@@ -2,21 +2,21 @@
  * @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/common.tsx
  * @Author: peii
  * @Date: 2021-07-16 17:04:20
- * @LastEditTime: 2021-08-05 17:45:16
+ * @LastEditTime: 2021-08-12 23:45:34
  * @LastEditors: peii
  * @Vision: 1.0
  * @Description: 一些产品的通用组件
  */
 
 // @ts-nocheck
-import React, { Component } from 'react'
-import { View, Text, Image, ActivityIndicator } from 'react-native'
+import React, { useState, useEffect } from 'react'
+import { View, Text, Image, ActivityIndicator, TouchableOpacity, TextInput } from 'react-native'
 import * as R from 'ramda'
 import { g, isBlank, isNotBlank } from '../../../utils/utils'
-import styles from './index.styl'
 import { IMAGE_PREFIX } from './constant'
 import container from '../../../inversify'
 import { TYPES } from '../../../inversify/types'
+import styles from './index.styl'
 
 const store = container.get(TYPES.Store)
 
@@ -78,3 +78,124 @@ export function Loading({ text = '加载中', color, clzss }) {
     </View>
   )
 }
+
+/**
+ * @description: 产品加减
+ * @param {*} text
+ * @param {*} active
+ * @param {*} pressHandler
+ * @return {*}
+ */
+export const SinglePlus = ({ text = '+', active = false, pressHandler = () => {} }) => {
+  return (
+    <TouchableOpacity
+      style={g(styles, { plus: true, 'plus-active': active })}
+      onPress={pressHandler}
+      activeOpacity={0.8}
+    >
+      <Text style={g(styles, { plus__text: true, 'plus-active__text': active })}>{text}</Text>
+    </TouchableOpacity>
+  )
+}
+
+/**
+ * @description: 下单操作组件
+ * @param {*} num
+ * @param {*} pressHandler
+ * @return {*}
+ */
+export const CollectOperation = ({
+  num,
+  item,
+  getQuantity,
+  min = 0,
+  max,
+  isWholePress = true,
+  pressHandler = () => {},
+}) => {
+  const [quantity, setQuantity] = useState(num)
+  const [count, setCount] = useState(0)
+  useEffect(() => {
+    // 使用count去优化更新，不然想要触发num更新的话，整个列表都会刷新一次性能太差了
+    const n = getQuantity ? getQuantity(item) : num
+    setQuantity(n)
+  }, [num, count])
+
+  return (
+    <View style={g(styles, 'operation')}>
+      {quantity > 0 && (
+        <SinglePlus
+          text="-"
+          pressHandler={() => {
+            pressHandler(quantity - 1)
+            setCount(count + 1)
+          }}
+        />
+      )}
+      {/* 一整块可点击 */}
+      {isWholePress ? (
+        <TouchableOpacity onPress={() => pressHandler(quantity)} activeOpacity={0.8}>
+          <Text style={g(styles, 'operation-num')}>{quantity}</Text>
+        </TouchableOpacity>
+      ) : (
+        <TextInput
+          style={g(styles, 'operation-num')}
+          keyboardType="numeric"
+          onChangeText={text => {
+            if (isBlank(text) || isNaN(text)) {
+              pressHandler()
+            } else {
+              text = Number(text)
+              if (isNotBlank(max)) {
+                text = R.clamp(min, max, text)
+              }
+              pressHandler(text)
+            }
+            setCount(count + 1)
+          }}
+          defaultValue={isNotBlank(quantity) && !isNaN(quantity) ? String(quantity) : ''}
+        />
+      )}
+      {!(isNotBlank(max) && quantity >= max) && (
+        <SinglePlus
+          text="+"
+          pressHandler={() => {
+            pressHandler(quantity + 1)
+            setCount(count + 1)
+          }}
+          active={quantity > 0}
+        />
+      )}
+    </View>
+  )
+}
+
+/**
+ * @description: 产品详情中的tab
+ * @param {*} tabs
+ * @param {*} activeIndex
+ * @param {*} onChangeTab
+ * @return {*}
+ */
+export const Tabs = ({ tabs = [], activeIndex = 0, onChangeTab = () => {} }) => {
+  return (
+    <View style={g(styles, 'tabs')}>
+      {tabs &&
+        tabs.map((tab, idx) => {
+          const isActive = activeIndex === idx
+          return (
+            <TouchableOpacity
+              style={g(styles, { 'tabs-item': true, 'tabs-item__active': isActive })}
+              activeOpacity={0.8}
+              key={tab.key || idx}
+              onPress={() => {
+                onChangeTab(idx)
+              }}
+            >
+              <Text style={g(styles, { 'tabs-item__text': true, 'tabs-item__active': isActive })}>{tab.title}</Text>
+            </TouchableOpacity>
+          )
+        })}
+    </View>
+  )
+}

src/pages/order/productions/constant.ts

@@ -2,7 +2,7 @@
  * @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
+ * @LastEditTime: 2021-08-11 10:38:14
  * @LastEditors: peii
  * @Vision: 1.0
  * @Description: 产品相关常数定义

src/pages/order/productions/details/details.styl

+@import '../../../../assets/styles/base.styl'
+@import '../../../../assets/styles/variable.styl'
+
+.container
+  background-color home_background_color
+
+.templates
+  &-loading
+    margin-top 150px
+
+  &-content
+    flex 1
+    padding 18px
+
+.tabs
+  border-bottom-width 0
+
+  &-underline
+    background-color #ff0
+    height 2px
+
+  &-text
+    font-size 14px
+    font-family font_family_regular
+
+  &-bar
+    border-width 0
+
+  &-tab
+    border-bottom-width 2px
+    border-bottom-color home_background_color
+
+  &-content
+    border-top-width 0
+    background-color home_background_color

src/pages/order/productions/details/details.tsx

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/details/details.tsx
+ * @Author: peii
+ * @Date: 2021-08-10 00:06:43
+ * @LastEditTime: 2021-08-11 12:16:36
+ * @LastEditors: peii
+ * @Vision: 1.0
+ * @Description: 详情列表组件
+ */
+import React, { Component } from 'react'
+import { View, Text, FlatList, Image } from 'react-native'
+import { inject, observer } from 'mobx-react'
+import { ITemplateHeader, ITemplateItem } from 'bonehouse'
+import { toJS } from 'mobx'
+import * as R from 'ramda'
+import { g, isBlank, isNotBlank } from '../../../../utils/utils'
+import { TextImage, Loading, CollectOperation } from '../common'
+import styles from './details.styl'
+
+/**
+ * @description: 详情
+ * @param {*}
+ * @return {*}
+ */
+export const Details = ({ items }) => {
+  return (
+    <View style={g(styles, 'details')}>
+      <Text>items</Text>
+    </View>
+  )
+}
+
+export const Empty = () => {
+  return (
+    <View style={g(styles, 'empty')}>
+      <Image style={g(styles, 'empty__icon')} source={require('../../../../assets/images/empty-list.png')} />
+      <Text style={g(styles, 'empty__text')}>暂无数据</Text>
+    </View>
+  )
+}

src/pages/order/productions/details/package.tsx

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/details/package.tsx
+ * @Author: peii
+ * @Date: 2021-08-09 23:21:45
+ * @LastEditTime: 2021-08-10 17:38:48
+ * @LastEditors: peii
+ * @Vision: 1.0
+ * @Description: 套包详情
+ */
+
+import React, { Component } from 'react'
+import { View, Text, FlatList, Image } from 'react-native'
+import { inject, observer } from 'mobx-react'
+import { IPackageHeader } from 'bonehouse'
+import Header from '../../../../components/header/header'
+import { INavigation } from 'rn-navigation'
+import { toJS } from 'mobx'
+import * as R from 'ramda'
+import { g, isBlank, isNotBlank } from '../../../../utils/utils'
+import { TextImage, Loading, CollectOperation } from '../common'
+import { Details } from './details'
+import styles from './details.styl'
+
+type IProps = {
+  navigation: INavigation
+  productionStore: {
+    detailLoading: boolean
+    templateLines: { [key: string]: ITemplateItem[] }
+  }
+}
+
+type IState = {}
+
+class Templates extends Component<IProps, IState> {
+  render() {
+    const { detailLoading, templateLines } = this.props.productionStore
+    const item: IPackageHeader = this.props.navigation.getParam('item')
+
+    return (
+      <View style={g(styles, 'templates')}>
+        <Header
+          title={item.itemName}
+          backCallback={() => {
+            this.props.navigation.goBack()
+          }}
+        />
+
+        {detailLoading ? (
+          <Loading color="#999" clzss={g(styles, 'templates-loading')} />
+        ) : (
+          <Details items={templateLines} />
+        )}
+      </View>
+    )
+  }
+}
+
+export default inject('productionStore')(observer(Templates))

src/pages/order/productions/details/templates.tsx

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/details/templates.tsx
+ * @Author: peii
+ * @Date: 2021-08-09 23:21:45
+ * @LastEditTime: 2021-08-12 23:38:03
+ * @LastEditors: peii
+ * @Vision: 1.0
+ * @Description: 产品模板详情
+ */
+
+import React, { Component } from 'react'
+import { View, Text, FlatList, Image, Platform } from 'react-native'
+import { inject, observer } from 'mobx-react'
+import { ITemplateHeader, ITemplateItem } from 'bonehouse'
+import Header from '../../../../components/header/header'
+import { INavigation } from 'rn-navigation'
+import { toJS } from 'mobx'
+import * as R from 'ramda'
+import { g, isBlank, isNotBlank } from '../../../../utils/utils'
+import { TextImage, Loading } from '../common'
+import { Details, Empty } from './details'
+import styles from './details.styl'
+
+type IProps = {
+  navigation: INavigation
+  productionStore: {
+    detailLoading: boolean
+    templateLines: { [key: string]: ITemplateItem[] }
+  }
+}
+
+type IState = {}
+
+class Templates extends Component<IProps, IState> {
+  len(key: string) {
+    const { templateLines } = this.props.productionStore
+    if (isBlank(templateLines)) return 0
+    return R.compose(R.length, R.propOr([], key))(templateLines)
+  }
+
+  render() {
+    const { detailLoading, templateLines } = this.props.productionStore
+    let tabs: any[] = []
+    if (isNotBlank(templateLines)) {
+      tabs = [
+        { title: `耗材(${this.len('items')})`, key: 'items' },
+        { title: `螺钉盒(${this.len('nail_box')})`, key: 'nail_box' },
+        { title: `器械包(${this.len('item_package')})`, key: 'item_package' },
+        { title: `器械(${this.len('tool')})`, key: 'tool' },
+      ]
+    }
+
+    return (
+      <View style={g(styles, 'container', 'templates')}>
+        <Header
+          title="模板详情"
+          backCallback={() => {
+            this.props.navigation.goBack()
+          }}
+        />
+        {detailLoading ? (
+          <Loading color="#999" clzss={g(styles, 'templates-loading')} />
+        ) : isNotBlank(templateLines) ? (
+          <View style={g(styles, 'templates-content')}>
+            {/* <Tabs
+              tabs={tabs}
+              swipeable={Platform.OS === 'ios' ? false : true}
+              tabBarUnderlineStyle={g(styles, 'tabs-underline')}
+              tabBarTextStyle={g(styles, 'tabs-text')}
+              tabBarBackgroundColor="transparent"
+              tabBarActiveTextColor="#4c4c4c"
+              tabBarInactiveTextColor="#a3a3a3"
+              style={g(styles, 'tabs')}
+            >
+              {tabs.map(tab => {
+                return (
+                  <View key={tab.key} style={g(styles, 'tabs-content')}>
+                    <Details items={templateLines[tab.key]} />
+                  </View>
+                )
+              })}
+            </Tabs> */}
+          </View>
+        ) : (
+          <Empty />
+        )}
+      </View>
+    )
+  }
+}
+
+const Tab = ({ tab }) => {
+  return (
+    <View style={g(styles, 'tabs-tab')}>
+      <Text>1</Text>
+    </View>
+  )
+}
+
+export default inject('productionStore')(observer(Templates))

src/pages/order/productions/index.styl

@@ -30,46 +30,6 @@ colors = {
     &__active
       border-bottom-color primary_color
 
-.text-image
-  &__icon
-    width iconWidth
-    height iconWidth
-
-    &-big
-      width iconWidthBig
-      height iconWidthBig
-
-  &__text-icon
-    width iconWidth
-    height iconWidth
-    borderRadius 22px
-    justify-content center
-    align-items center
-    borderWidth 2px
-
-    &-big
-      width iconWidthBig
-      height iconWidthBig
-      borderRadius 29px
-
-    &-text
-      font-size 14px
-      font-family font_family_semibold
-      padding 3px
-      text-align center
-      line-height 18px
-
-      &-big
-        font-size 18px
-        line-height 22px
-
-for i in 1...50
-  .text-icon-{i}
-    borderColor hsl(i * 50, 50%, 50%)
-
-  .text-icon-{i}__text
-    color hsl(i * 50, 50%, 50%)
-
 .body
   width 100%
   flex 1
@@ -158,9 +118,17 @@ for i in 1...50
     border-bottom-color rgba(99, 99, 99, 0.1)
     align-items center
 
+    &__right
+      margin-right 10px
+      width 16px
+      height @width
+
     &__img
       margin-right 10px
 
+    &__info
+      flex 1
+
     &__field
       &-text
         font-size third_text_size
@@ -178,3 +146,76 @@ for i in 1...50
 .loading
   justify-content center
   align-items center
+
+// 字符图片
+.text-image
+  &__icon
+    width iconWidth
+    height iconWidth
+
+    &-big
+      width iconWidthBig
+      height iconWidthBig
+
+  &__text-icon
+    width iconWidth
+    height iconWidth
+    borderRadius 22px
+    justify-content center
+    align-items center
+    borderWidth 2px
+
+    &-big
+      width iconWidthBig
+      height iconWidthBig
+      borderRadius 29px
+
+    &-text
+      font-size 14px
+      font-family font_family_semibold
+      padding 3px
+      text-align center
+      line-height 18px
+
+      &-big
+        font-size 18px
+        line-height 22px
+
+for i in 1...50
+  .text-icon-{i}
+    borderColor hsl(i * 50, 50%, 50%)
+
+  .text-icon-{i}__text
+    color hsl(i * 50, 50%, 50%)
+
+.operation
+  @extend .row
+  height 30px
+  width 80px
+  justify-content flex-end
+  margin-right 20px
+
+  &-num
+    width 32px
+    background-color rgba(247, 247, 247, 1)
+    line-height 20px
+    padding 5px 0
+    text-align center
+
+.plus
+  @extend .middle
+  @extend .center
+  width 24px
+  border-width 1px
+  border-color rgba(230, 230, 230, 1)
+
+  &__text
+    color rgba(153, 153, 153, 100)
+    font-size 14px
+
+  &-active
+    background-color rgba(0, 126, 255, 1)
+    border-color rgba(0, 126, 255, 1)
+
+    &__text
+      color title_text_color

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-08-03 23:45:15
+ * @LastEditTime: 2021-08-11 12:13:06
  * @LastEditors: peii
  * @Vision: 1.0
  * @Description: 自助下单选择产品页面
@@ -20,6 +20,7 @@ import Category from './category'
 import Production from './production'
 import { g, getFormItem, isBlank, isNotBlank, show, translateSysprofile } from '../../../utils/utils'
 import styles from './index.styl'
+import slashScreen from 'react-native-splash-screen'
 
 type IProps = {
   store: {
@@ -45,6 +46,7 @@ class Productions extends Component<IProps, IState> {
   }
 
   componentDidMount() {
+    slashScreen.hide()
     // TODO: 开发时加上延时，不然没token
     this.props.store.setNavigation(this.props.navigation)
     setTimeout(() => {
@@ -87,7 +89,7 @@ class Productions extends Component<IProps, IState> {
           <Category />
 
           {/* 产品块 */}
-          <Production />
+          <Production navigation={this.props.navigation} />
         </View>
       </View>
     )

src/pages/order/productions/production.tsx

@@ -2,7 +2,7 @@
  * @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/production.tsx
  * @Author: peii
  * @Date: 2021-07-16 15:36:02
- * @LastEditTime: 2021-08-05 17:54:48
+ * @LastEditTime: 2021-08-11 11:23:44
  * @LastEditors: peii
  * @Vision: 1.0
  * @Description: 产品列表
@@ -10,13 +10,15 @@
 
 // @ts-nocheck
 import React, { Component } from 'react'
-import { View, Text, FlatList, Image } from 'react-native'
+import { View, Text, FlatList, Image, TouchableOpacity } from 'react-native'
 import { inject, observer } from 'mobx-react'
-import { ICategory } from 'bonehouse'
+import { ICategory, ITemplateHeader, ITemplateItem, IPackageHeader } from 'bonehouse'
+import { INavigation } from 'rn-navigation'
 import { toJS } from 'mobx'
 import * as R from 'ramda'
-import { g, isBlank, isNotBlank, show } from '../../../utils/utils'
-import { TextImage, Loading } from './common'
+import { g, isBlank, isNotBlank } from '../../../utils/utils'
+import { DefaultCategory } from '../../../enums'
+import { TextImage, Loading, CollectOperation } from './common'
 import styles from './index.styl'
 
 type IField = {
@@ -32,9 +34,18 @@ type IProps = {
     productions: any[]
     imgFields: { sourceField: string; textField: string }
     loading: boolean
-    getProductions: Function
     activeCatetory: ICategory
+    selectedLines: any[]
+    groupSelectedLines: any
+    templateLines?: { [key: string]: ITemplateItem[] }
+    packageLines?: { [key: string]: any[] }
+    getProductions: () => any[]
+    setSelectedLines: (lines: any[]) => void
+    setActiveSublineId: (lineId: string) => void
+    getSurgeryTemplateLines: (templateName: string) => void
+    getPackageDetails: (item: IPackageHeader) => void
   }
+  navigation: INavigation
 }
 
 type IState = {}
@@ -44,18 +55,120 @@ class Production extends Component<IProps, IState> {
     refreshing: false,
   }
 
+  constructor(props: IProps) {
+    super(props)
+    this.setQuantityHandler = this.setQuantityHandler.bind(this)
+    this.navigateToTemplateDetail = this.navigateToTemplateDetail.bind(this)
+  }
+
   async onPullDownRefresh() {
     this.setState({ refreshing: true })
     await this.props.productionStore.getProductions(false)
     this.setState({ refreshing: false })
   }
 
+  /**
+   * @description: 设置选择数量
+   * @param {*} item
+   * @param {*} num
+   * @return {*}
+   */
+  setQuantityHandler(item, num) {
+    // 模板类型，跳转到模板详情
+    if (item._categoryCode === DefaultCategory.SURGERY_TEMPLATE) {
+      return this.navigateToTemplateDetail(item)
+    }
+
+    let selectedLines = this.props.productionStore.selectedLines
+    const line = R.find(R.propEq('_key', item._key))(selectedLines)
+
+    if (isBlank(line)) {
+      selectedLines = R.compose(R.append(R.__, selectedLines), R.assoc('_quantity', Number(num)), R.clone)(item)
+    } else {
+      if (num === 0) {
+        selectedLines = R.compose(
+          R.remove(R.__, 1, selectedLines),
+          R.findIndex(R.propEq('_key', item._key)),
+        )(selectedLines)
+      } else {
+        line._quantity = num
+      }
+    }
+    this.props.productionStore.setSelectedLines(selectedLines)
+  }
+
+  /**
+   * @description: 单项产品点击
+   * @param {*} item
+   * @return {*}
+   */
+  itemPressHandler(item: ITemplateHeader | IPackageHeader) {
+    switch (item._categoryCode) {
+      // 模板
+      case DefaultCategory.SURGERY_TEMPLATE:
+        this.navigateToTemplateDetail(item)
+        break
+      // 钉盒、器械包
+      case DefaultCategory.NAIL_BOX:
+      case DefaultCategory.EQUIP_BOX:
+        this.navigateToPackageDetail(item)
+        break
+      default:
+        console.log('其他类型物料：', item._categoryCode)
+        break
+    }
+  }
+
+  /**
+   * @description: 跳转到模板详情页
+   * @param {*}
+   * @return {*}
+   */
+  navigateToTemplateDetail(item: ITemplateHeader) {
+    this.props.productionStore.setActiveSublineId(item.templateNumber)
+    if (isBlank(this.props.productionStore.templateLines)) {
+      this.props.productionStore.getSurgeryTemplateLines(item.templateNumber)
+    }
+    this.props.navigation.navigate('TemplateDetail', { item })
+  }
+
+  /**
+   * @description: 跳转到套包详情
+   * @param {*} item
+   * @return {*}
+   */
+  navigateToPackageDetail(item: IPackageHeader) {
+    this.props.productionStore.setActiveSublineId(item.serialNumber)
+    if (isBlank(this.props.productionStore.packageLines)) {
+      this.props.productionStore.getPackageDetails(item)
+    }
+    this.props.navigation.navigate('PackageDetail', { item })
+  }
+
+  /**
+   * @description: 获取当前产品项的已选数量
+   * @param {*} item
+   * @return {*}
+   */
+  getQuantity(item) {
+    const groupLines = this.props.productionStore.groupSelectedLines
+    const lines = groupLines[`${item._supplierCode}_${item._categoryCode}_${item._sublineId}`]
+    if (isBlank(lines)) return ''
+    const line = R.find(R.propEq('_key', item._key))(lines)
+    return (isNotBlank(line) && line._quantity) || ''
+  }
+
   renderItem({ item, index }) {
     const productionFields = this.props.productionStore.productionFields
     const imgFields = this.props.productionStore.imgFields
+    const quantity = this.getQuantity(item)
 
     return (
-      <View style={g(styles, 'pro-item')}>
+      <TouchableOpacity
+        style={g(styles, 'pro-item')}
+        activeOpacity={0.8}
+        onPress={this.itemPressHandler.bind(this, item)}
+      >
         <View style={g(styles, 'pro-item__img')}>
           <TextImage
             big={true}
@@ -94,7 +207,20 @@ class Production extends Component<IProps, IState> {
             )
           })}
         </View>
-      </View>
+
+        {/* 小类的时候右箭头，其他的时候操作组件 */}
+        {item._type !== 'SUB_CATEGORY' ? (
+          <CollectOperation
+            num={quantity}
+            pressHandler={(quantity: number) => this.setQuantityHandler(item, quantity)}
+            item={item}
+            getQuantity={this.getQuantity.bind(this)}
+            max={isNotBlank(item.serialNumber) ? 1 : null}
+          />
+        ) : (
+          <Image source={require('../../../assets/images/arr_rig.png')} style={g(styles, 'pro-item__right')} />
+        )}
+      </TouchableOpacity>
     )
   }
 
@@ -115,7 +241,7 @@ class Production extends Component<IProps, IState> {
             style={g(styles, 'pro-list')}
             data={productions}
             renderItem={this.renderItem.bind(this)}
-            keyExtractor={item => item.serialNumber || item.itemCode || item.templateNumber || item.categoryCode}
+            keyExtractor={item => item._key}
             ListEmptyComponent={Empty}
             refreshing={refreshing}
             onRefresh={this.onPullDownRefresh.bind(this)}

src/router.tsx

@@ -19,6 +19,8 @@ import ConsumeFee from './pages/consume/fee'
 import QuickOrder from './pages/order/quick'
 import SelfOrder from './pages/order/self'
 import Productions from './pages/order/productions/index'
+import TemplateDetail from './pages/order/productions/details/templates'
+import PackageDetail from './pages/order/productions/details/package'
 import Success from './pages/success/success'
 
 function createNavigator() {
@@ -114,6 +116,8 @@ function createNavigator() {
       QuickOrder: { screen: QuickOrder },
       SelfOrder: { screen: SelfOrder },
       Productions: { screen: Productions },
+      TemplateDetail: { screen: TemplateDetail },
+      PackageDetail: { screen: PackageDetail },
       Success: { screen: Success },
     },
     { initialRouteName: 'Productions', ...options },

src/services/service.ts

@@ -129,6 +129,15 @@ export default class Service {
   }
 
   /**
+   * @description: 请求手术模板行
+   * @param {object} data
+   * @return {*}
+   */
+  getSurgeryTemplateLines(data: { templateNumber: string }) {
+    return request({ url: `${ctx}/surgery/template_line/search`, data })
+  }
+
+  /**
    * @description: 请求借货仓库
    * @param {any} data
    * @return {*}
@@ -174,6 +183,15 @@ export default class Service {
   }
 
   /**
+   * @description: 请求容器具体信息
+   * @param {any} data
+   * @return {*}
+   */  
+  getPackageDetails(data: any) {
+    return request({ url: `${ctx}/inventory/item_package_detail/search`, data})
+  }
+
+  /**
    * @description: 请求零散工具
    * @param {object} data
    * @return {*}

types/global.ts

@@ -11,6 +11,32 @@
 /// <reference types="react" />
 /// <reference types="react-native" />
 
+declare module 'rn-navigation' {
+  export type INavigation = {
+    actions: { [key: string]: any }
+    addListener: (eventName: string, eventHandler: () => void) => void
+    dangerouslyGetParent: () => void
+    dismiss: () => void
+    dispatch: (action: any) => void
+    emit: (eventName: string, payload: any) => void
+    getChildNavigation: (grandChildKey: string) => any
+    getParam: (paramName: string, defaultValue?: any) => any
+    getScreenProps: () => any
+    goBack: () => void
+    isFirstRouteInParent: () => void
+    isFocused: () => boolean
+    navigate: () => void
+    pop: () => void
+    popToTop: () => void
+    push: () => void
+    replace: () => void
+    reset: () => void
+    router: any
+    setParams: () => void
+    state: { [key: string]: any }
+  }
+}
+
 declare module 'bonehouse' {
   export type EnumType = { [s: string]: any }
 
@@ -216,4 +242,93 @@ declare module 'bonehouse' {
     categoryImage?: string
     details?: ICategory[]
   }
+
+  export type ITemplateHeader = {
+    doctorName: string
+    manufacturerId: string
+    orgCode: string
+    orgName: string
+    surgeryType: string
+    surgeryTypeName: string
+    templateDesc: string
+    templateName: string
+    templateNumber: string
+    templatePic: string
+    _categoryCode: string
+    _key: string
+    _supplierCode: string
+  }
+
+  export type ITemplateItem = {
+    categoryCode: string
+    categoryName: string
+    generalName: string
+    imageUrl: string
+    itemCode: string
+    itemName: string
+    manufacturerProductCode: string
+    photos: string[]
+    quantity: number
+    specification: string
+    templateNumber: string
+  }
+
+  export type IPackageHeader = {
+    categoryManufacturerId: string
+    clinicalCategory: string
+    countryOfOrigin: string
+    createBy: string
+    defaultVendorId: string
+    filingCertificateNumber: string
+    generalName: string
+    id: string
+    imageUrl: string
+    industryCategory: string
+    initialsPinyin: string
+    invCode: string
+    invId: string
+    inventoryPlanMethod: string
+    itemBrand: string
+    itemBusinessScope: string
+    itemCode: string
+    itemId: string
+    itemName: string
+    locatorMgmtMethod: string
+    lotControl: string
+    manufacturerId: string
+    manufacturerProductCode: string
+    medicalDeviceCatalogue: string
+    nameUsedBefore: string
+    photos: string[]
+    primaryUnit: string
+    productLineCategory: string
+    purchaseReturnableFlag: string
+    purchaseableFlag: string
+    regCertImageUrl: string
+    regNumber: string
+    requiredInspection: string
+    saleReturnableFlag: string
+    saleableFlag: string
+    serialControl: string
+    serialId: string
+    serialNumber: string
+    sourceType: string
+    specification: string
+    status: string
+    sterilizationFlag: string
+    storableFlag: string
+    taxClassification: string
+    unitCode: string
+    updateBy: string
+    updateTime: number
+    vatInTaxRate: number
+    vatOutTaxRate: number
+    startDate: number
+    quantity: number
+    purchasePrice: number
+    createTime: number
+    _categoryCode: string
+    _key: string
+    _supplierCode: string
+  }
 }

yarn.lock

@@ -2,28 +2,28 @@
 # yarn lockfile v1
 
 
-"@ant-design/icons-react-native@^2.2.1":
-  version "2.2.1"
-  resolved "https://registry.npm.taobao.org/@ant-design/icons-react-native/download/@ant-design/icons-react-native-2.2.1.tgz#0d21226fefa90471129dba864efb6c437627fb37"
-  integrity sha1-DSEib++pBHESnbqGTvtsQ3Yn+zc=
+"@ant-design/icons-react-native@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@ant-design/icons-react-native/-/icons-react-native-1.0.2.tgz#28648eacb808a1fae0ad59d691bbb472a6ffc26e"
+  integrity sha512-cpTHdeGdxS+kp59rrtHZw6guXJQyDKzvLxGUf2qXeTlua5nKLG1kVoSMtW5tIPep21RcL6gVdwQl5+/mUMk9/w==
 
-"@ant-design/react-native@^4.1.0":
-  version "4.1.0"
-  resolved "https://registry.npm.taobao.org/@ant-design/react-native/download/@ant-design/react-native-4.1.0.tgz#9acc65552c19db5183d9731d50e8ffc1ba6b3608"
-  integrity sha1-msxlVSwZ21GD2XMdUOj/wbprNgg=
+"@ant-design/react-native@3.1.15":
+  version "3.1.15"
+  resolved "https://registry.yarnpkg.com/@ant-design/react-native/-/react-native-3.1.15.tgz#3720ac06670d22af934130efd85fb81b0ad4d0df"
+  integrity sha512-Sj02TfQ+Mu3VAtqkPdXcZU2zULkewf7m4h+ERsMrQjzRMJrifEugjKyrmZ1uLr4gRMltZnogeYjPwt5leyICLg==
   dependencies:
-    "@ant-design/icons-react-native" "^2.2.1"
+    "@ant-design/icons-react-native" "^1.0.2"
     "@bang88/react-native-drawer-layout" "^2.0.3"
-    "@bang88/react-native-ultimate-listview" "^3.3.4"
+    "@bang88/react-native-ultimate-listview" "^3.3.0"
     array-tree-filter "~2.1.0"
     babel-runtime "^6.x"
-    deepmerge "^4.2.2"
+    deepmerge "^3.0.0"
     normalize-css-color "^1.0.2"
-    react-native-collapsible "^1.5.2"
+    react-native-collapsible "^1.4.0"
     react-native-modal-popover "^0.0.12"
+    react-native-safe-area-view "^0.11.0"
     react-native-swipeout "^2.3.6"
-    shallowequal "^1.1.0"
-    utility-types "^3.10.0"
+    utility-types "^2.1.0"
 
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.12.13":
   version "7.12.13"
@@ -807,10 +807,10 @@
   resolved "https://registry.npm.taobao.org/@bang88/react-native-drawer-layout/download/@bang88/react-native-drawer-layout-2.0.3.tgz#a93abd5a9c6d1fc4c0924a9f21c2cd7d1deea88d"
   integrity sha1-qTq9WpxtH8TAkkqfIcLNfR3uqI0=
 
-"@bang88/react-native-ultimate-listview@^3.3.4":
+"@bang88/react-native-ultimate-listview@^3.3.0":
   version "3.3.4"
-  resolved "https://registry.npm.taobao.org/@bang88/react-native-ultimate-listview/download/@bang88/react-native-ultimate-listview-3.3.4.tgz#128828e64a7c1be1fd295ee25b5b07f323789d5d"
-  integrity sha1-Eogo5kp8G+H9KV7iW1sH8yN4nV0=
+  resolved "https://registry.yarnpkg.com/@bang88/react-native-ultimate-listview/-/react-native-ultimate-listview-3.3.4.tgz#128828e64a7c1be1fd295ee25b5b07f323789d5d"
+  integrity sha512-IyaAOxp+GvIzOrJUMCd2cAT2uilfDpijMIlYDNINBT6AQ2NfCcgFzdMMKawJITE9Yb8mxEicsJNL3OvzXbxPDw==
 
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
@@ -1033,6 +1033,11 @@
     xcode "^2.0.0"
     xmldoc "^0.4.0"
 
+"@react-native-community/viewpager@^5.0.11":
+  version "5.0.11"
+  resolved "https://registry.yarnpkg.com/@react-native-community/viewpager/-/viewpager-5.0.11.tgz#dbeb2d1b2452607926407c99e4de59c7db9e3019"
+  integrity sha512-eboJwbDQjP1qJP3LFzVspgh88IGNF07S2qpU296j+4kL0inVuL+HXs81SuczMGtJmDZ4u19RNEBVq79of/h+jQ==
+
 "@react-navigation/core@~3.4.1":
   version "3.4.2"
   resolved "https://registry.npm.taobao.org/@react-navigation/core/download/@react-navigation/core-3.4.2.tgz#bec563e94fde40fbab3730cdc97f22afbb2a1498"
@@ -2176,7 +2181,7 @@ cosmiconfig@^5.0.0, cosmiconfig@^5.0.5:
     js-yaml "^3.13.1"
     parse-json "^4.0.0"
 
-create-react-class@^15.6.0, create-react-class@^15.6.2, create-react-class@^15.6.3:
+create-react-class@^15.6.0, create-react-class@^15.6.3:
   version "15.7.0"
   resolved "https://registry.npm.taobao.org/create-react-class/download/create-react-class-15.7.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcreate-react-class%2Fdownload%2Fcreate-react-class-15.7.0.tgz#7499d7ca2e69bb51d13faf59bd04f0c65a1d6c1e"
   integrity sha1-dJnXyi5pu1HRP69ZvQTwxlodbB4=
@@ -2354,10 +2359,10 @@ deep-is@~0.1.3:
   resolved "https://registry.npm.taobao.org/deep-is/download/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
-deepmerge@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.npm.taobao.org/deepmerge/download/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
-  integrity sha1-RNLqNnm49NT/ujPwPYZfwee/SVU=
+deepmerge@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-3.3.0.tgz#d3c47fd6f3a93d517b14426b0628a17b0125f5f7"
+  integrity sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==
 
 define-properties@^1.1.3:
   version "1.1.3"
@@ -5652,7 +5657,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.npm.taobao.org/prop-types/download/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha1-UsQedbjIfnK52TYOAga5ncv/psU=
@@ -5826,12 +5831,10 @@ react-native-code-push@7.0.0:
     semver "^7.3.2"
     xcode "3.0.1"
 
-react-native-collapsible@^1.5.2:
-  version "1.5.3"
-  resolved "https://registry.npm.taobao.org/react-native-collapsible/download/react-native-collapsible-1.5.3.tgz#d6bc7274ae8f40f7688cca23ededa263e6c81c63"
-  integrity sha1-1rxydK6PQPdojMoj7e2iY+bIHGM=
-  dependencies:
-    prop-types "^15.6.2"
+react-native-collapsible@^1.4.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/react-native-collapsible/-/react-native-collapsible-1.6.0.tgz#ca261ffff16914f872059bb0972e3a78c4b37f9c"
+  integrity sha512-beZjdgbT9Y/Pg591Xy5XkKG20HffJiVad4n9bfcUF/f783A+tvOVXnqvbS58Lkaym93mi4jcDPMuW9Vc1t6rqg==
 
 react-native-date-picker@2.7.9:
   version "2.7.9"
@@ -5885,6 +5888,11 @@ react-native-modal-popover@^0.0.12:
     lodash.debounce "^4.0.8"
     prop-types "^15.6.2"
 
+react-native-pager-view@^5.4.0:
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-5.4.0.tgz#8e30a391a68da26e59f4ae724341b9208924b2ee"
+  integrity sha512-pYy3I8p5s6cPaymT1GibuDRHmicY3JdHHZyTH+Fra1S0wupaJhoZy33f2prrMJqQfk9kaqwCsb3pVmj4GuJTjA==
+
 react-native-postcss-transformer@^1.2.4:
   version "1.2.4"
   resolved "https://registry.npm.taobao.org/react-native-postcss-transformer/download/react-native-postcss-transformer-1.2.4.tgz#3e1c9f1c0e36764a76516c5fd584e7f10c994014"
@@ -5910,6 +5918,13 @@ react-native-root-toast@3.1.1:
     prop-types "^15.5.10"
     react-native-root-siblings "^3.0.0"
 
+react-native-safe-area-view@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.11.0.tgz#4f3dda43c2bace37965e7c6aef5fc83d4f19d174"
+  integrity sha512-N3nElaahu1Me2ltnfc9acpgt1znm6pi8DSadKy79kvdzKwvVIzw0IXueA/Hjr51eCW1BsfNw7D1SgBT9U6qEkA==
+  dependencies:
+    hoist-non-react-statics "^2.3.1"
+
 react-native-safe-area-view@^0.14.1:
   version "0.14.9"
   resolved "https://registry.npm.taobao.org/react-native-safe-area-view/download/react-native-safe-area-view-0.14.9.tgz#90ee8383037010d9a5055a97cf97e4c1da1f0c3d"
@@ -5924,15 +5939,6 @@ react-native-safe-area-view@^0.14.1:
   dependencies:
     debounce "^1.2.0"
 
-react-native-scrollable-tab-view@0.9.0:
-  version "0.9.0"
-  resolved "https://registry.npm.taobao.org/react-native-scrollable-tab-view/download/react-native-scrollable-tab-view-0.9.0.tgz#cf8c09018f1e1c88bb26db6a003c90de275a1c6f"
-  integrity sha1-z4wJAY8eHIi7JttqADyQ3idaHG8=
-  dependencies:
-    create-react-class "^15.6.2"
-    prop-types "^15.6.0"
-    react-timer-mixin "^0.13.3"
-
 react-native-sound@0.11.0:
   version "0.11.0"
   resolved "https://registry.npm.taobao.org/react-native-sound/download/react-native-sound-0.11.0.tgz#ad60b55ba8c6dc89917f381ad3713f2738de530f"
@@ -6091,11 +6097,6 @@ react-test-renderer@16.8.3:
     react-is "^16.8.3"
     scheduler "^0.13.3"
 
-react-timer-mixin@^0.13.3:
-  version "0.13.4"
-  resolved "https://registry.npm.taobao.org/react-timer-mixin/download/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
-  integrity sha1-daAMPJTBOr4ptD1jtMZaiPyCZNM=
-
 react-transform-hmr@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npm.taobao.org/react-transform-hmr/download/react-transform-hmr-1.0.4.tgz#e1a40bd0aaefc72e8dfd7a7cda09af85066397bb"
@@ -6644,11 +6645,6 @@ setprototypeof@1.1.1:
   resolved "https://registry.npm.taobao.org/setprototypeof/download/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
   integrity sha1-fpWsskqpL1iF4KvvW6ExMw1K5oM=
 
-shallowequal@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npm.taobao.org/shallowequal/download/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
-  integrity sha1-GI1SHelbkIdAT9TctosT3wrk5/g=
-
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npm.taobao.org/shebang-command/download/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -7401,10 +7397,10 @@ util.promisify@^1.0.0:
     has-symbols "^1.0.1"
     object.getownpropertydescriptors "^2.1.1"
 
-utility-types@^3.10.0:
-  version "3.10.0"
-  resolved "https://registry.npm.taobao.org/utility-types/download/utility-types-3.10.0.tgz#ea4148f9a741015f05ed74fd615e1d20e6bed82b"
-  integrity sha1-6kFI+adBAV8F7XT9YV4dIOa+2Cs=
+utility-types@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/utility-types/-/utility-types-2.1.0.tgz#0c78fc9f7eb424d14302222b4ddd13fdb17f44ab"
+  integrity sha512-/nP2gqavggo6l38rtQI/CdeV+2fmBGXVvHgj9kV2MAnms3TIi77Mz9BtapPFI0+GZQCqqom0vACQ+VlTTaCovw==
 
 utils-merge@1.0.1:
   version "1.0.1"