Skip to content

zhangzhonghua / BoneHouse_Business_APP

Go to a project
Commit 54d0411d by peii
Options

部分产品

parent c0ba2b65
Inline Side-by-side
Showing with 424 additions and 49 deletions
src/pages/order/productions/category.tsx
......@@ -2,7 +2,7 @@
* @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
* @LastEditTime: 2021-07-16 17:46:00
* @LastEditors: peii
* @Vision: 1.0
* @Description: 产品分类
......@@ -21,16 +21,39 @@ import styles from './index.styl'
type IProps = {
productionStore: {
categories: ICategory[]
activeCatetory: ICategory
setActiveCategory: (category: ICategory) => {}
}
}
class Category extends Component<IProps> {
constructor(props) {
super(props)
}
/**
* @description: 分类点击操作
* @param {ICategory} category
* @return {*}
*/
categoryClickHandler(category: ICategory) {
if (
R.compose(
R.equals(category.categoryCode),
R.propOr('', 'categoryCode'),
)(this.props.productionStore.activeCatetory)
) {
return
}
this.props.productionStore.setActiveCategory(category)
}
render() {
const categories = this.props.productionStore.categories
const { categories, activeCatetory } = this.props.productionStore
return (
<View style={g(styles, 'category')}>
<ScrollView style={g(styles, 'category-scroll')}>
<ScrollView style={g(styles, 'category-scroll')} showsVerticalScrollIndicator={false}>
{categories &&
categories.map(category => {
const icon = isNotBlank(category.categoryIcon)
......@@ -38,11 +61,32 @@ class Category extends Component<IProps> {
: isNotBlank(category.categoryImage)
? { uri: category.categoryImage }
: ''
const active = R.compose(R.equals(category.categoryCode), R.propOr('', 'categoryCode'))(activeCatetory)
return (
<TouchableOpacity style={g(styles, 'category-item')} key={category.categoryCode}>
<TouchableOpacity
style={g(styles, {
'category-item': true,
'category-item__no-icon': isBlank(icon),
'category-item__active': active,
})}
key={category.categoryCode}
onPress={() => {
this.categoryClickHandler(category)
}}
activeOpacity={1}
>
{isNotBlank(icon) && <Image source={icon} style={g(styles, 'category-item__icon')} />}
<Text>{category.categoryName}</Text>
<Text
numberOfLines={3}
style={g(styles, {
'category-item__text': true,
'category-item__text-no-icon': isBlank(icon),
'category-item__text__active': active,
})}
>
{category.categoryName}
</Text>
</TouchableOpacity>
)
})}
......
src/pages/order/productions/common.tsx 0 → 100644
/*
* @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/common.tsx
* @Author: peii
* @Date: 2021-07-16 17:04:20
* @LastEditTime: 2021-07-16 17:53:15
* @LastEditors: peii
* @Vision: 1.0
* @Description: 一些产品的通用组件
*/
// @ts-nocheck
import React, { Component } from 'react'
import { View, Text, Image } from 'react-native'
import { ISupplier } from 'bonehouse'
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'
const store = container.get(TYPES.Store)
type ITextImageProps = {
size: string
image?: string
text?: string
colorNumber: string
}
/**
* @description: 文字图片
* @return {*}
*/
export function TextImage({ size, image, text, colorNumber }: ITextImageProps) {
const numClass = isNotBlank(colorNumber) ? `text-icon-${colorNumber}` : ''
const style = isNotBlank(size) ? { width: size, height: size } : {}
text = R.take(4, text)
return (
<View style="text-image">
{isBlank(image) ? (
<View style={[g(styles, 'text-image__text-icon', numClass), style]}>
<Text style={g(styles, 'text-image__text-icon-text', `${numClass}__text`)}>{text}</Text>
</View>
) : (
<Image
source={{ uri: store.host + IMAGE_PREFIX + image }}
style={[g(styles, 'text-image__icon'), style]}
resizeMode="contain"
/>
)}
</View>
)
}
src/pages/order/productions/index.styl
......@@ -13,19 +13,23 @@ colors = {
width 100%
height 64px
padding 0px 20px
padding-left 10px
background-color foundation_color
margin-bottom 5px
&-item
width iconWidth
width: iconWidth + 20px
height: iconWidth + 20px
margin-right 20px
padding-top 10px
padding 10px
justify-content center
align-items center
border-bottom-width 2px
border-bottom-color transparent
&__active
border-bottom-width 2px
border-bottom-color primary_color
.text-image
&__icon
width iconWidth
height iconWidth
......@@ -39,14 +43,14 @@ colors = {
borderWidth 2px
&-text
font-size 16px
font-size 14px
font-family font_family_semibold
for i in 1 .. 50
.text-icon-{i}
borderColor hsl(i * 50, 50%, 50%)
.text-icon__text-{i}
.text-icon-{i}__text
color hsl(i * 30, 50%, 50%)
.category
......@@ -55,5 +59,34 @@ for i in 1 .. 50
&-item
height 60px
justify-content center
padding 0 10px
\ No newline at end of file
padding-left 5px
border-bottom-width 1px
border-bottom-color rgba(0, 0, 0, 0.1)
@extend .row
@extend .center
&__no-icon
padding-left 15px
padding-right 10px
&__active
background-color foundation_color
&__icon
width 12px
height @width
margin-right 2px
&__text
font-size third_text_size
padding-right 5px
color second_text_color
font-family font_family_semibold
font-weight 400
&-no-icon
text-align center
&__active
color first_text_color
font-weight 700
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-15 17:03:56
* @LastEditTime: 2021-07-16 16:39:13
* @LastEditors: peii
* @Vision: 1.0
* @Description: 自助下单选择产品页面
......@@ -21,11 +21,16 @@ import { g, getFormItem, isBlank, isNotBlank, show, translateSysprofile } from '
import styles from './index.styl'
type IProps = {
store: {
setNavigation: (any) => void
}
productionStore: {
getSuppliers: (orgCode: string) => {}
setOrgCode: (orgCode: string) => {}
getSuppliers: (orgCode: string) => void
setOrgCode: (orgCode: string) => void
suppliers: ISupplier[]
getCategory: (manufacturerCode: string) => {}
setActiveSupplier: ISupplier
getCategory: (manufacturerCode: string) => void
setActiveSupplier: (supplier: ISupplier) => void
}
}
......@@ -39,7 +44,11 @@ class Productions extends Component<IProps, IState> {
}
componentDidMount() {
// TODO: 开发时加上延时，不然没token
this.props.store.setNavigation(this.props.navigation)
setTimeout(() => {
this.initDatas()
}, 0)
}
/**
......@@ -47,11 +56,18 @@ class Productions extends Component<IProps, IState> {
* @param {*}
* @return {*}
*/
async initDatas() {
const orgCode = this.props.navigation.getParam('orgCode')
initDatas() {
// const orgCode = this.props.navigation.getParam('orgCode')
const orgCode = 'A01'
const { suppliers, activeSupplier } = this.props.productionStore
this.props.productionStore.setOrgCode(orgCode)
if (isBlank(suppliers)) {
// 供应商信息
this.props.productionStore.getSuppliers(orgCode)
} else if (isBlank(activeSupplier)) {
this.props.productionStore.setActiveSupplier(R.head(suppliers))
}
}
render() {
......@@ -62,14 +78,14 @@ class Productions extends Component<IProps, IState> {
{/* 页面头 */}
<Header title="选择产品" backCallback={() => navigation.goBack()} />
{/* 供应商 */}
{/* 头部供应商 */}
<Supplier />
{/* 产品分类 */}
{/* 左侧产品分类 */}
<Category />
</View>
)
}
}
export default inject('orgStore', 'orderStore', 'productionStore')(observer(Productions))
export default inject('store', 'orgStore', 'orderStore', 'productionStore')(observer(Productions))
src/pages/order/productions/production.tsx 0 → 100644
/*
* @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
* @LastEditors: peii
* @Vision: 1.0
* @Description: 右侧产品列表
*/
// @ts-nocheck
import React, { Component } from 'react'
import { View, Text, ScrollView } 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 IProps = {
productionStore: {
}
}
type IState = {}
class Production extends Component<IProps, IState> {
render() {
return <View style={g(styles, 'pro')}>
</View>
}
}
export default inject('productionStore')(observer(Production))
src/pages/order/productions/supplier.tsx
......@@ -2,7 +2,7 @@
* @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
* @LastEditTime: 2021-07-16 17:44:43
* @LastEditors: peii
* @Vision: 1.0
* @Description: 供应商列表
......@@ -12,10 +12,11 @@
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 { 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 { g, isBlank, isNotBlank } from '../../../utils/utils'
import { TextImage } from './common'
import styles from './index.styl'
type IProps = {
......@@ -24,8 +25,10 @@ type IProps = {
}
productionStore: {
suppliers: ISupplier[]
setActiveSupplier: (supplier: ISupplier) => {}
setActiveSupplier: (supplier: ISupplier) => void
activeSupplier: ISupplier
categories: ICategory[]
getCategory: (supplierCode: string) => void
}
}
......@@ -49,7 +52,20 @@ class Supplier extends Component<IProps> {
}
}
supplierClickHandler(supplier) {
/**
* @description: 供应商点击处理
* @param {*} supplier
* @return {*}
*/
supplierClickHandler(supplier: ISupplier) {
if (
R.compose(
R.equals(supplier.supplierCode),
R.propOr('', 'supplierCode'),
)(this.props.productionStore.activeSupplier)
) {
return
}
this.props.productionStore.setActiveSupplier(supplier)
}
......@@ -72,24 +88,12 @@ class Supplier extends Component<IProps> {
)(activeSupplier),
})}
key={supplier.supplierCode}
touchableOpacity={0.8}
activeOpacity={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"
/>
)}
<TextImage size={42} colorNumber={index + 1} image={icon} text={supplier.supplierShortName} />
</TouchableOpacity>
)
})}
......
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-15 10:26:50
* @LastEditTime: 2021-07-16 16:59:48
* @LastEditors: peii
* @Vision: 1.0
* @Description: 自助下单
......@@ -62,6 +62,10 @@ type IProps = {
getInventories: Function
submit: Function
}
productionStore: {
resetCategory: () => void
resetSupplier: () => void
}
}
type IState = {
......@@ -236,6 +240,11 @@ class SelfOrder extends Component<IProps, IState> {
this.setOptionsFormItems()
}
componentWillUnmount() {
this.props.productionStore.resetSupplier()
this.props.productionStore.resetCategory()
}
/**
* @description: 设置配置性的表单字段(部门，业务经理，跟台员，送货员)
*/
......@@ -551,4 +560,4 @@ class SelfOrder extends Component<IProps, IState> {
}
}
export default inject('sysStore', 'userStore', 'orgStore', 'orderStore')(observer(SelfOrder))
export default inject('sysStore', 'userStore', 'orgStore', 'orderStore', 'productionStore')(observer(SelfOrder))
src/services/service.ts
......@@ -8,6 +8,7 @@
*/
import { request } from './request'
import { injectable } from 'inversify'
import { IPackageType } from 'bonehouse'
const ctx = '/api/latest'
......@@ -155,11 +156,38 @@ export default class Service {
}
/**
* @description:
* @description: 请求产品分类
* @param {object} data
* @return {*}
*/
getProductionCategories(data: { manufacturerCode: string }) {
return request({ url: `${ctx}/order/item/search`, data })
}
/**
* @description: 请求容器（工具包或钉盒）
* @param {any} data
* @return {*}
*/
getItemPackage(data: { manufacturerCode: string; categoryCode: IPackageType }) {
return request({ url: `${ctx}/inventory/item_package_header/search`, data })
}
/**
* @description: 请求零散工具
* @param {object} data
* @return {*}
*/
getTools(data: { manufacturerCode: string }) {
return request({ url: `${ctx}/order/tool/search`, data })
}
/**
* @description: 请求产品耗材
* @param {any} data
* @return {*}
*/
getItemDetail(data: { categoryCode: string; manufacturerCode: string; orgCode: string }) {
return request({ url: `${ctx}/order/item_detail/search`, data })
}
}
src/stores/production.ts
......@@ -2,13 +2,13 @@
* @FilePath: /BoneHouse_Business_APP/src/stores/production.ts
* @Author: peii
* @Date: 2021-07-15 10:49:02
* @LastEditTime: 2021-07-15 18:02:56
* @LastEditTime: 2021-07-16 18:12:13
* @LastEditors: peii
* @Vision: 1.0
* @Description: 产品store
* @ts-nocheck
*/
// @ts-nocheck
import { observable, action, runInAction, toJS, flow, computed, ObservableMap } from 'mobx'
import { persist } from 'mobx-persist'
import { injectable, inject } from 'inversify'
......@@ -46,6 +46,27 @@ export default class Production {
},
]
showFields = {
// 手术模板显示
SURGERY_TEMPLATE: [
{ field: 'templateName', label: '', type: 'title' },
{ field: 'customerName', label: '客户', style: 'production-item__text-big' },
{ field: 'doctorName', label: '手术医生' },
{ field: 'surgeryTypeName', label: '手术类型' },
{ field: 'templateDesc', label: '模板说明', style: 'production-item__text-small' },
],
package: [
{ field: 'templateName', label: '', type: 'title' },
{ field: 'customerName', label: '客户', style: 'production-item__text-big' },
{ field: 'doctorName', label: '手术医生' },
{ field: 'surgeryTypeName', label: '手术类型' },
],
}
imageFields = {
}
@observable orgCode: string = ''
@observable activeSupplier!: ISupplier
@observable activeCatetory!: ICategory
......@@ -58,6 +79,10 @@ export default class Production {
@observable
_categories: ObservableMap<string, ICategory[]> = new ObservableMap()
@persist('map')
@observable
_productions: ObservableMap<string, any[]> = new ObservableMap()
@computed
get suppliers() {
return isNotBlank(this.orgCode) ? this._suppliers.get(this.orgCode) : []
......@@ -72,6 +97,11 @@ export default class Production {
}
}
@computed
get productions() {
return []
}
@action
setOrgCode(orgCode: string) {
this.orgCode = orgCode
......@@ -80,6 +110,39 @@ export default class Production {
@action
setActiveSupplier(supplier: ISupplier) {
this.activeSupplier = supplier
// 选择完供应商后，看当前有没有产品类别，没有就请求，有且没有已选择的类别，选第一个
if (isBlank(this.categories)) {
this.getCategory(supplier.supplierCode)
} else if (
isBlank(this.activeCatetory) ||
R.compose(
R.complement(R.includes)(this.activeCatetory.categoryCode),
R.pluck('categoryCode'),
)(this.defaultCategories)
) {
this.setActiveCategory(R.head(this.categories as any) as any)
}
}
@action
setActiveCategory(category: ICategory) {
this.activeCatetory = category
if (isBlank(this.productions)) {
this.getProductions()
}
}
@action
resetSupplier() {
this._suppliers = new ObservableMap()
this.activeSupplier = null
}
@action
resetCategory() {
this._categories = new ObservableMap()
this.activeCatetory = null
}
/**
......@@ -102,7 +165,6 @@ export default class Production {
if (isNotBlank(suppliers)) {
this.setActiveSupplier(R.head(suppliers as any) as any)
this.getCategory(this.activeSupplier.supplierCode)
}
})
......@@ -121,5 +183,92 @@ export default class Production {
const categories = R.concat(R.clone(this.defaultCategories), res.data.item)
this._categories.set(manufacturerCode, categories)
this.setActiveCategory(R.head(categories))
})
/**
* @description: 请求产品总入口方法
* @param {*}
* @return {*}
*/
getProductions() {
if (isBlank(this.orgCode) || isBlank(this.activeSupplier)) return
switch (this.activeCatetory.categoryCode) {
// 手术模板
case 'SURGERY_TEMPLATE':
this.getSurgeryTemplates()
break
// 手术模板
case '1301':
case '1302':
this.getPackages()
break
// 零散器械
case 'SCATTERED_EQUIPMENT':
this.getTools()
break
// 骨科耗材
default:
this.getItemDetail()
break
}
}
/**
* @description: 请求手术模板
* @param {*} function
* @return {*}
*/
getSurgeryTemplates = flow(function* (this: Production) {
const params = {
orgCode: this.orgCode,
manufacturerCode: this.activeSupplier.supplierCode,
}
const res = yield this.service.getSurgeryTemplates(params)
console.log(res)
})
/**
* @description: 请求工具包
* @return {*}
*/
getPackages = flow(function* (this: Production) {
const params = {
manufacturerCode: this.activeSupplier.supplierCode,
categoryCode: this.activeCatetory.categoryCode,
}
const res = yield this.service.getItemPackage(params)
console.log(res)
})
/**
* @description: 零散工具
* @return {*}
*/
getTools = flow(function* (this: Production) {
const params = {
manufacturerCode: this.activeSupplier.supplierCode,
}
const res = yield this.service.getTools(params)
console.log(res)
})
/**
* @description: 耗材
* @return {*}
*/
getItemDetail = flow(function* (this: Production) {
const params = {
orgCode: this.orgCode,
manufacturerCode: this.activeSupplier.supplierCode,
categoryCode: this.activeCatetory.categoryCode,
}
const res = yield this.service.getItemDetail(params)
console.log(res)
})
}
types/global.ts
......@@ -14,6 +14,8 @@
declare module 'bonehouse' {
export type EnumType = { [s: string]: any }
export type IPackageType = '1301' | '1302'
export type IDepartment = {
departmentCode: string
departmentName: string
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment