Commit 4a599ed7 by peii

自助下单

parent e6f90090
......@@ -35,7 +35,7 @@
&-label
@extend .text
color primary_text_color
width 100px
width 120px
&-input
flex-direction row
......@@ -70,6 +70,32 @@
flex 1
width 100%
&-radio
flex 1
@extend .row
justify-content flex-end
&__item
@extend .row
align-items center
padding-left 20px
&-box
margin-right 8px
width 20px
height @width
border-color #ccc
border-width 1px
border-radius 10px
&-image
width 18px
height @width
&-text
@extend .text
color second_text_color
.red
color #f00
......
......@@ -19,7 +19,8 @@ import Input from './input'
import DatePicker from './date'
import ImageForm from './image'
import Audio from './audio'
import { g, isBlank, show, debounce } from '../../utils/utils'
import Radio from './radio'
import { g, isBlank, debounce } from '../../utils/utils'
import styles from './index.styl'
import { ActivityIndicator } from '@ant-design/react-native'
......@@ -34,6 +35,7 @@ const formComponents = {
[FieldType.DATE]: DatePicker,
[FieldType.IMAGE]: ImageForm,
[FieldType.VOICE]: Audio,
[FieldType.RADIO]: Radio
}
export default class Form extends Component<IProps> {
......
/*
* @FilePath: /BoneHouse_Business_APP/src/components/form/radio.tsx
* @Author: peii
* @Date: 2021-06-06 16:24:05
* @Vision: 1.0
* @Description: Radio组件
*
*/
// @ts-nocheck
import React, { Component } from 'react'
import { View, Text, Image, TouchableOpacity } from 'react-native'
import { IFormField, IOption } from 'bonehouse'
import { g } from '../../utils/utils'
import { Title } from './common'
import styles from './index.styl'
type IProps = {
item: IFormField
data: any
value: any
}
export default class RadioButton extends Component<IProps> {
shouldComponentUpdate(nextProps: IProps): boolean {
if (nextProps.value !== this.props.value) {
return true
}
return false
}
render() {
const { item, value, onChange } = this.props
return (
<View style={g(styles, 'form-item')}>
<Title item={item} />
<View style={g(styles, 'form-radio')}>
{item.options &&
item.options.map(option => {
return (
<TouchableOpacity
style={g(styles, 'form-radio__item')}
key={option.value}
activeOpacity={0.8}
onPress={() => {
if (value === option.value) return
onChange(item.field, option.value)
}}
>
<View style={g(styles, 'form-radio__item-box')}>
{value === option.value && (
<Image
style={g(styles, 'form-radio__item-image')}
source={require('../../assets/images/ic_checked_blue.png')}
></Image>
)}
</View>
<Text style={g(styles, 'form-radio__item-text')}>{option.label}</Text>
</TouchableOpacity>
)
})}
</View>
</View>
)
}
}
......@@ -5,15 +5,14 @@
* @Vision: 1.0
* @Description: 选择器组件
*
* @Revision:
*
*/
// @ts-nocheck
import React, { Component } from 'react'
import { View, Text, Image, TouchableOpacity } from 'react-native'
import { IFormField, IOption } from 'bonehouse'
import * as R from 'ramda'
import { isBlank, show, isRequired, isNotBlank, g } from '../../utils/utils'
import { FieldType } from '../../enums'
import { SelectMode } from '../../enums'
import { Title } from './common'
import { SelectModal } from './select-modal'
import styles from './index.styl'
......@@ -105,6 +104,11 @@ export default class Select extends Component<IProps> {
}
}
}
// 跳转到其他页面的选择
if (item.selectMode === SelectMode.PAGE) {
return item.customHandler && item.customHandler(item.field)
}
if (!item.loading && isBlank(item.options)) return show(`没有可选择的${item.label}`)
this.setState({ visible: true }, () => {
......@@ -156,9 +160,7 @@ export default class Select extends Component<IProps> {
<View style={g(styles, 'form-input')}>
{/* 值 */}
{isBlank(value) ? (
<Text style={g(styles, 'form-input__placeholder')}>
{item.placeholder || '请选择'}
</Text>
<Text style={g(styles, 'form-input__placeholder')}>{item.placeholder || '请选择'}</Text>
) : (
<Text numberOfLines={2} style={g(styles, 'form-input__text')}>
{val && val.label}
......@@ -167,10 +169,7 @@ export default class Select extends Component<IProps> {
{/* 箭头 */}
{item.arrow !== false && (
<Image
source={require('../../assets/images/arr_rig.png')}
style={g(styles, 'form-input__arrow')}
/>
<Image source={require('../../assets/images/arr_rig.png')} style={g(styles, 'form-input__arrow')} />
)}
</View>
</TouchableOpacity>
......
......@@ -26,3 +26,8 @@ export enum FieldType {
VOICE,
CUSTOM,
}
export enum SelectMode {
PAGE,
MODAL,
}
/*
* @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
* @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 { IOrganization, IFormField } from 'bonehouse'
import * as R from 'ramda'
import Form from '../../../components/form'
import { FieldType, SelectMode } from '../../../enums'
import Header from '../../../components/header/header'
import { g, getFormItem, isBlank, isNotBlank, show, translateSysprofile } from '../../../utils/utils'
import styles from './index.styl'
type IProps = {}
type IState = {}
class Productions extends Component<IProps, IState> {
render() {
const { navigation } = this.props
return (
<View style={g(styles, 'container')}>
<Header title="选择产品" backCallback={() => navigation.goBack()} />
</View>
)
}
}
export default inject('orgStore')(observer(Productions))
......@@ -161,7 +161,7 @@ class QuickOrder extends Component<IProps> {
options: [],
placeholder: '请选择',
rules: [{ required: true, message: '请选择手术模板' }],
refrence: ['sellerCode', 'orgCode', 'customerCode', 'surgeryType'],
refrence: ['sellerCode', 'orgCode', 'customerCode'],
},
{
field: 'surgeryDate',
......@@ -416,6 +416,10 @@ class QuickOrder extends Component<IProps> {
const item = getFormItem(formItems, 'billToSiteCode')
item.options = billToSites
this.setState({ formItems })
if (isNotBlank(customerCode)) {
this.getSurgeryTemplates()
}
}
/**
......
@import '../../assets/styles/base.styl'
@import '../../assets/styles/variable.styl'
\ No newline at end of file
......@@ -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 00:06:26
* @LastEditTime: 2021-07-14 18:07:32
* @LastEditors: peii
* @Vision: 1.0
* @Description: 自助下单
......@@ -12,24 +12,516 @@
import React, { Component } from 'react'
import { View, Text, ScrollView } from 'react-native'
import { inject, observer } from 'mobx-react'
import { IOrganization, ISurgeryCollectHeader, IFee } from 'bonehouse'
import { IOrganization, IFormField } from 'bonehouse'
import * as R from 'ramda'
import Form from '../../components/form'
import { FieldType } from '../../enums'
import { FieldType, SelectMode } from '../../enums'
import Header from '../../components/header/header'
import { g, getFormItem, isBlank, isNotBlank, show, translateSysprofile } from '../../utils/utils'
import styles from './self.styl'
type IProps = {}
type IProps = {
sysStore: {
sysProfiles: {
// APP下单是否显示部门权限
OBS_MOBILE_DEPARTMENT_DISPLAY: string
// APP下单是否显示业务经理权限
OBS_MOBILE_BM_DISPLAY: string
// APP下单是否显示跟台员权限
OBS_MOBILE_SUR_FOLLOWER_DISPLAY: string
// APP下单是否显示送货员权限
OBS_MOBILE_DELIVERYMAN_DISPLAY: string
}
sysValueSets: {
SUR_ORDER_TYPE: []
}
}
type IState = {}
userStore: {
userName: string
personName: string
}
orgStore: {
organizations: IOrganization[]
orgs: Function
getCustomers: Function
customers: Function
billToSites: Function
shipToSites: Function
doctors: Function
getDepartmentsBySellerAndOrg: Function
departments: Function
followers: Function
businessManagers: Function
delivermen: Function
}
orderStore: {
templates: Function
getTemplates: Function
invs: Function
getInventories: Function
submit: Function
}
}
type IState = {
data: { [key: string]: any[] }
formItems: IFormField[]
}
class SelfOrder extends Component<IProps, IState> {
constructor(props) {
super(props)
this.setData = this.setData.bind(this)
this.submitHandler = this.submitHandler.bind(this)
}
state = {
data: {},
formItems: [],
data: {
sellerCode: this.props.userStore.userName,
},
formItems: [
{
field: 'sellerCode',
label: '销售员',
type: FieldType.SELECT,
options: [
{
label: this.props.userStore.personName,
value: this.props.userStore.userName,
},
],
placeholder: '请选择',
rules: [{ required: true, message: '请选择销售员' }],
disabled: true,
},
{
field: 'orgCode',
label: '组织',
type: FieldType.SELECT,
options: this.props.orgStore.orgs(),
placeholder: '请选择',
rules: [{ required: true, message: '请选择组织' }],
callback: this.setOrgCallback.bind(this),
},
{
field: 'customerCode',
label: '客户',
type: FieldType.SELECT,
options: [],
placeholder: '请选择',
rules: [{ required: true, message: '请选择客户' }],
refrence: ['orgCode'],
callback: this.setCustomerCallback.bind(this),
},
{
field: 'billToSiteCode',
label: '收单地点',
type: FieldType.SELECT,
options: [],
placeholder: '请选择',
rules: [{ required: true, message: '请选择收单地点' }],
refrence: ['orgCode', 'customerCode'],
callback: this.setBillToSitesCallback.bind(this),
},
{
field: 'shipToSiteCode',
label: '收货地点',
type: FieldType.SELECT,
options: [],
placeholder: '请选择',
rules: [{ required: true, message: '请选择收货地点' }],
refrence: ['orgCode', 'customerCode', 'billToSiteCode'],
callback: this.setShipToSiteCallback.bind(this),
},
{
field: 'doctorName',
label: '主治医生',
type: FieldType.SELECT,
options: [],
placeholder: '请选择',
refrence: ['orgCode', 'customerCode', 'billToSiteCode', 'shipToSiteCode'],
},
{
field: 'surgeryDate',
label: '手术时间',
type: FieldType.DATE,
dateMode: 'datetime',
placeholder: '请选择',
rules: [{ required: true, message: '请选择手术时间' }],
},
{
field: 'orderTypeCode',
label: '订单类型',
type: FieldType.SELECT,
placeholder: '请选择',
rules: [{ required: true, message: '请选择订单类型' }],
options: R.compose(
R.map(
R.applySpec({
label: R.prop('valueName'),
value: R.prop('valueCode'),
}),
),
R.pathOr([], ['sysStore', 'sysValueSets', 'SUR_ORDER_TYPE']),
)(this.props),
},
{
field: 'products',
label: '选择产品',
type: FieldType.SELECT,
selectMode: SelectMode.PAGE,
placeholder: '请选择',
rules: [{ required: true, message: '请选择产品' }],
refrence: ['orgCode'],
customHandler: this.selectProductsBeforeHandler.bind(this),
},
{
field: 'collectSrcInvCode',
label: '借货仓库',
type: FieldType.SELECT,
placeholder: '请选择',
options: [],
refrence: ['orgCode', 'sellerCode', 'customerCode', 'billToSiteCode', 'shipToSiteCode'],
},
{
field: 'takeCertFlag',
label: '需要携带合格证',
type: FieldType.RADIO,
options: [
{
label: '是',
value: 'Y',
},
{
label: '否',
value: 'N',
},
],
},
{
field: 'replaceItemFlag',
label: '同意替换器械包',
type: FieldType.RADIO,
options: [
{
label: '是',
value: 'Y',
},
{
label: '否',
value: 'N',
},
],
},
{
field: 'surgeryDesc',
label: '备注',
type: FieldType.TEXT,
placeholder: '请输入备注',
multiline: true,
},
{
field: 'voiceUrl',
label: '录音',
type: FieldType.VOICE,
placeholder: '还有什么要安排的,可录音备注哟!',
},
],
}
componentDidMount() {
this.setOptionsFormItems()
}
/**
* @description: 设置配置性的表单字段(部门,业务经理,跟台员,送货员)
*/
setOptionsFormItems() {
const { sysProfiles } = this.props.sysStore
let { formItems } = this.state
// 部门(00)第一位显示、第二位必需
let dep = translateSysprofile(sysProfiles.OBS_MOBILE_DEPARTMENT_DISPLAY)
if (dep.show) {
formItems = R.insert(
2,
{
field: 'departmentCode',
label: '部门',
type: FieldType.SELECT,
placeholder: '请选择',
options: [],
rules: [{ required: dep.required, message: '请选择客户' }],
refrence: ['orgCode'],
callback: this.setDepartmentCallback.bind(this),
},
formItems,
)
}
// 业务经理(00)第一位显示、第二位必需
let businessManager = translateSysprofile(sysProfiles.OBS_MOBILE_DEPARTMENT_DISPLAY)
if (businessManager.show) {
formItems = R.insert(
3,
{
field: 'businessManagerCode',
label: '业务经理',
type: FieldType.SELECT,
placeholder: '请选择',
options: [],
rules: [{ required: businessManager.required, message: '请选择业务经理' }],
refrence: ['orgCode', 'departmentCode'],
},
formItems,
)
}
// 跟台员(00)第一位显示、第二位必需
let follower = translateSysprofile(sysProfiles.OBS_MOBILE_SUR_FOLLOWER_DISPLAY)
if (follower.show) {
formItems = R.insert(
4,
{
field: 'surgeryFollowerCode',
label: '跟台员',
type: FieldType.SELECT,
placeholder: '请选择',
options: [],
rules: [{ required: follower.required, message: '请选择跟台员' }],
refrence: ['orgCode', 'departmentCode'],
},
formItems,
)
}
// 送货员(00)第一位显示、第二位必需
let deliver = translateSysprofile(sysProfiles.OBS_MOBILE_DELIVERYMAN_DISPLAY)
if (deliver.show) {
formItems = R.insert(
5,
{
field: 'deliverymanCode',
label: '送货员',
type: FieldType.SELECT,
placeholder: '请选择',
options: [],
rules: [{ required: follower.required, message: '请选择送货员' }],
refrence: ['orgCode', 'departmentCode'],
},
formItems,
)
}
this.setState({ formItems })
}
/**
* @description: 设置修改值
* @param {*} key
* @param {*} vlaue
* @return {*}
*/
setData(key: string, value: any) {
return new Promise<any>((resolve, reject) => {
const { data, formItems } = this.state
data[key] = value
this.setState({ data }, () => {
const item = getFormItem(formItems, key)
item && item.callback && item.callback()
resolve()
})
})
}
/**
* @description: 组织选择完回调
* @param {*}
* @return {*}
*/
async setOrgCallback() {
const sysProfiles = this.props.sysStore.sysProfiles
const { show } = translateSysprofile(sysProfiles.OBS_MOBILE_DEPARTMENT_DISPLAY)
// 设置完组织获取部门和客户
if (show) {
this.getDepartments.call(this)
}
this.getCustomers.call(this)
}
/**
* @description: 获取部门列表
* @param {*}
* @return {*}
*/
async getDepartments() {
const { data, formItems } = this.state
const { orgCode, sellerCode } = data
let departments = this.props.orgStore.departments(sellerCode, orgCode)
const item = getFormItem(formItems, 'departmentCode')
if (isBlank(departments)) {
item.loading = true
await this.props.orgStore.getDepartmentsBySellerAndOrg(sellerCode, orgCode)
item.loading = false
departments = this.props.orgStore.departments(sellerCode, orgCode)
}
item.options = departments
this.setState({ formItems })
}
/**
* @description: 设置部门后回调
* @param {*}
* @return {*}
*/
async setDepartmentCallback() {
const { data, formItems } = this.state
const { orgCode, sellerCode, departmentCode } = data
// 设置业务经理
const bmItem = getFormItem(formItems, 'businessManagerCode')
if (isNotBlank(bmItem)) {
bmItem.options = this.props.orgStore.businessManagers(sellerCode, orgCode, departmentCode)
}
// 设置跟台员
const followerItem = getFormItem(formItems, 'surgeryFollowerCode')
if (isNotBlank(followerItem)) {
followerItem.options = this.props.orgStore.followers(sellerCode, orgCode, departmentCode)
}
// 设置送货员
const item = getFormItem(formItems, 'deliverymanCode')
if (isNotBlank(item)) {
item.options = this.props.orgStore.delivermen(sellerCode, orgCode, departmentCode)
}
this.setState({ formItems })
}
/**
* @description: 获取客户列表
* @param {*}
* @return {*}
*/
async getCustomers() {
const { data, formItems } = this.state
const { orgCode, sellerCode } = data
let customers = this.props.orgStore.customers(sellerCode, orgCode)
const item = getFormItem(formItems, 'customerCode')
if (isBlank(customers)) {
item.loading = true
await this.props.orgStore.getCustomers(sellerCode, orgCode)
item.loading = false
customers = this.props.orgStore.customers(sellerCode, orgCode)
}
item.options = customers
this.setState({ formItems })
}
/**
* @description: 客户选择完回调
* @param {*}
* @return {*}
*/
setCustomerCallback() {
const { formItems, data } = this.state
const { sellerCode, orgCode, customerCode } = data
const billToSites = this.props.orgStore.billToSites(sellerCode, orgCode, customerCode)
const item = getFormItem(formItems, 'billToSiteCode')
item.options = billToSites
this.setState({ formItems })
}
/**
* @description: 收单地点选择完回调
* @param {*}
* @return {*}
*/
setBillToSitesCallback() {
const { formItems, data } = this.state
const { sellerCode, orgCode, customerCode, billToSiteCode } = data
const shipToSites = this.props.orgStore.shipToSites(sellerCode, orgCode, customerCode, billToSiteCode)
const item = getFormItem(formItems, 'shipToSiteCode')
item.options = shipToSites
this.setState({ formItems })
}
/**
* @description: 收货地点选择完回调
* @param {*}
* @return {*}
*/
setShipToSiteCallback() {
const { formItems, data } = this.state
const { sellerCode, orgCode, customerCode, billToSiteCode, shipToSiteCode } = data
const doctors = this.props.orgStore.doctors(sellerCode, orgCode, customerCode, billToSiteCode)
const item = getFormItem(formItems, 'doctorName')
item.options = doctors
this.setState({ formItems })
// 借货仓库依赖收货地址
if (isNotBlank(shipToSiteCode)) {
this.getInventories()
}
}
/**
* @description: 获取借货仓库
* @param {*}
* @return {*}
*/
async getInventories() {
const { formItems, data } = this.state
const { orgCode, customerCode, billToSiteCode, shipToSiteCode } = data
const item = getFormItem(formItems, 'collectSrcInvCode')
let invs = this.props.orderStore.invs(orgCode, customerCode, billToSiteCode, shipToSiteCode)
if (isBlank(invs)) {
item.loading = true
await this.props.orderStore.getInventories(orgCode, customerCode, billToSiteCode, shipToSiteCode)
item.loading = false
}
invs = this.props.orderStore.invs(orgCode, customerCode, billToSiteCode, shipToSiteCode)
item.options = R.map(
R.applySpec({
value: R.prop('sourceInvCode'),
label: R.prop('sourceInvName'),
}),
)(invs)
this.setState({ formItems })
}
/**
* @description: 产品选择点击回调
* @param {*}
* @return {*}
*/
selectProductsBeforeHandler() {
const { data } = this.state
this.props.navigation.navigate('Productions', {
orgCode: data.orgCode,
callback: productions => {
console.log(productions)
},
})
}
/**
* @description:
* @param {*}
* @return {*}
*/
submitHandler() {}
render() {
const { formItems, data } = this.state
const { navigation } = this.props
......@@ -43,9 +535,18 @@ class SelfOrder extends Component<IProps, IState> {
navigation.goBack()
}}
/>
{/* form表单 */}
<Form
fields={formItems}
data={data}
onChange={this.setData}
ref={ref => (this.formRef = ref)}
submitHandler={this.submitHandler}
/>
</View>
)
}
}
export default inject('store')(observer(SelfOrder))
export default inject('sysStore', 'userStore', 'orgStore', 'orderStore')(observer(SelfOrder))
......@@ -18,6 +18,7 @@ import Consumables from './pages/consume/consumables'
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 Success from './pages/success/success'
function createNavigator() {
......@@ -112,6 +113,7 @@ function createNavigator() {
ConsumeFee: { screen: ConsumeFee },
QuickOrder: { screen: QuickOrder },
SelfOrder: { screen: SelfOrder },
Productions: { screen: Productions },
Success: { screen: Success },
},
{ initialRouteName: 'Main', ...options },
......
......@@ -47,6 +47,7 @@ declare module 'bonehouse' {
field: string
label: string
type: EnumType
selectMode?: EnumType
dateMode: 'date' | 'datetime'
options?: IOption[]
loading?: boolean
......
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