Commit 57a4dedf authored by tjy's avatar tjy

对接完成仓库(新建、编辑),修改省市区联动问题

parent b874206d
......@@ -66,22 +66,28 @@ import { useValueLinkageEffect, FormPath, FormEffectHooks } from '@formily/antd'
* `
*/
export const useLinkEnumEffect = (childKey, transformFn?) => {
const { onFieldValueChange$ } = FormEffectHooks
useValueLinkageEffect({
type: 'value:linkage',
resolve: ({origin, target}, { setFieldState, getFieldState }) => {
resolve: ({ origin, target }, { setFieldState, getFieldState }) => {
getFieldState(origin, state => {
const { originData = [] } = state
setFieldState(target, targetState => {
const result = originData.find(v => v.id === state.value)[childKey] || []
targetState.value = ''
targetState.originData = result
targetState.props.enum = transformFn ? transformFn(result) : result
if (state.value != undefined) {
const result = originData.find(v => v.id === state.value)[childKey] || []
if (state.modified) {
targetState.value = undefined
}
targetState.originData = result
targetState.props.enum = transformFn ? transformFn(result) : result
}
})
})
},
reject: ({target}, { setFieldState, getFieldState }) => {
reject: ({ target }, { setFieldState, getFieldState }) => {
setFieldState(target, targetState => {
targetState.value = ''
targetState.value = undefined
targetState.props.enum = []
})
}
......
......@@ -270,6 +270,7 @@ export const getBillsDetailSchema = params => {
modalSchema = productionDetailSchema;
modalTitle = '选择生产通知单';
}
const relevanceInvoices =
params.relevance != 5
? {
......@@ -304,6 +305,7 @@ export const getBillsDetailSchema = params => {
},
}
: {};
const billsDetailSchema: ISchema = {
type: 'object',
properties: {
......
import React, { useState, useEffect, useRef } from 'react';
import { usePageStatus } from '@/hooks/usePageStatus';
import { history } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { SaveOutlined } from '@ant-design/icons';
import { createFormActions, FormEffectHooks } from '@formily/antd';
import { Button, Card } from 'antd';
import ReutrnEle from '@/components/ReturnEle';
import {
SchemaForm,
SchemaMarkupField as Field,
FormMegaLayout,
} from '@formily/antd';
import { Input, Select } from '@formily/antd-components';
import { PublicApi } from '@/services/api';
import { useLinkageUtils } from '@/utils/formEffectUtils';
import {useLinkEnumEffect} from '@/components/NiceForm/linkages/linkEnum'
const addSchemaAction = createFormActions();
const { onFormMount$ } = FormEffectHooks;
const AddWarehouse: React.FC<{}> = (props: any) => {
const ref = useRef({});
const { pageStatus, preview, id } = usePageStatus();
const [provinceList, setProvinceList] = useState([]);
const [cityList, setCityList] = useState([]);
const [areaList, setAreaList] = useState([]);
const [telCodeList, setTelCodeList] = useState<any>([]);
const [formValue, setFormValue] = useState<any>({});
useEffect(() => {
let formValues;
// 获取详情
if (pageStatus != 0) {
PublicApi.getWarehouseWarehouseDetails({
id: usePageStatus().id,
}).then(res => {
formValues = res.data;
setFormValue(res.data);
});
}
// 获取省市区
// PublicApi.getManageAreaAll().then(res => {
// let provinceOptions = [];
// for (let item of res.data) {
// provinceOptions.push({
// label: item.name,
// value: item.id,
// areaResponses: item.areaResponses,
// });
// }
// setProvinceList(provinceOptions);
// if (pageStatus != 0) {
// getSubAddressList('province', provinceOptions, formValues.provinceId);
// getSubAddressList('city', cityList, formValues.cityId);
// }
// });
// 获取手机code
PublicApi.getManageGetTelCode().then(res => {
setTelCodeList(res.data);
});
}, []);
const getAddressList = (type, id?) => {
let options = [];
if (type === 'province') {
provinceList.find(target => {
if (target.value === id) {
for (let item of target.areaResponses) {
options.push({ label: item.name, value: item.id });
}
setCityList(options);
}
});
} else {
cityList.find(target => {
if (target.value === id) {
for (let item of target.areaResponses) {
options.push({ label: item.name, value: item.id });
}
setAreaList(options);
}
});
}
};
const getSubAddressList = (type, list, id) => {
let options = [];
list.find(target => {
if (target.value === id) {
for (let item of target.areaResponses) {
options.push({ label: item.name, value: item.id });
}
if (type === 'province') return setCityList(options);
if (type === 'city') return setAreaList(options);
}
});
};
const handleSubmit = value => {
if (pageStatus === 0)
return PublicApi.postWarehouseWarehouseAdd({ ...value }).then(res => {
if (res.code === 1000) return history.goBack();
});
else
return PublicApi.postWarehouseWarehouseUpdate({
id: id,
...value,
}).then(res => {
if (res.code === 1000) return history.goBack();
});
};
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
title={
pageStatus === 0
? '新建仓库'
: pageStatus === 1
? '编辑仓库'
: '查看仓库'
}
extra={
preview != '1'
? [
<Button
key="1"
type="primary"
icon={<SaveOutlined />}
onClick={() => addSchemaAction.submit()}
>
保存
</Button>,
]
: []
}
>
<Card>
<SchemaForm
value={formValue}
editable={preview != '1'}
actions={addSchemaAction}
effects={($, { setFieldState }) => {
$('onFormMount').subscribe(state => {
PublicApi.getManageAreaAll().then(res => {
const { data } = res
setFieldState('provinceId', targetState => {
targetState.originData = data
targetState.props.enum = data.map(v => ({
label: v.name,
value: v.id
}))
})
})
});
useLinkEnumEffect('areaResponses', result => result.map(v => ({
label: v.name,
value: v.id
})))
// $('onFieldValueChange', 'provinceId').subscribe(state => {
// const origin = areaData.current.find(v => v.id === state.value)?.areaResponses
// console.log(origin)
// useLinkageUtils().enum('cityId', origin)
// })
}}
components={{ Input, Select, Textarea: Input.TextArea }}
onSubmit={value => handleSubmit(value)}
>
<FormMegaLayout labelCol={4} labelAlign="left" wrapperCol={12}>
<Field name="name" title="仓库名称" x-component="Input" required />
<FormMegaLayout label="仓库地址" wrapperCol={24} required>
<FormMegaLayout grid full autoRow columns={3}>
<Field
name="provinceId"
enum={provinceList}
x-component="Select"
x-component-props={{
placeholder: '- 省 -',
onChange: val => getAddressList('province', val),
}}
required
/>
<Field
name="cityId"
enum={cityList}
x-component="Select"
x-component-props={{
placeholder: '- 市 -',
onChange: val => getAddressList('city', val),
}}
required
/>
<Field
name="areaId"
enum={areaList}
x-component="Select"
x-component-props={{
placeholder: '- 县/区 -',
}}
required
/>
</FormMegaLayout>
<Field
name="address"
x-component="Textarea"
x-component-props={{
placeholder: '请输入详细地址(最长50个字符,25个汉字)',
rules: [{ message: '请输入详细地址' }],
}}
required
/>
</FormMegaLayout>
<Field name="principal" title="仓库负责人" x-component="Input" />
<FormMegaLayout label="联系电话" grid full wrapperCol={24}>
<Field
name="telCode"
enum={telCodeList}
x-component="Select"
x-component-props={{ placeholder: '请选择' }}
/>
<Field
x-mega-props={{ span: 3 }}
name="tel"
x-component="Input"
x-component-props={{
placeholder: '请输入你的手机号码',
maxLength: 11,
}}
/>
</FormMegaLayout>
</FormMegaLayout>
</SchemaForm>
</Card>
</PageHeaderWrapper>
);
};
export default AddWarehouse;
import React, { useState, useEffect, useRef } from 'react';
import { usePageStatus } from '@/hooks/usePageStatus';
import { history } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { SaveOutlined } from '@ant-design/icons';
import { createFormActions, FormEffectHooks } from '@formily/antd';
import { Button, Card } from 'antd';
import ReutrnEle from '@/components/ReturnEle';
import {
SchemaForm,
SchemaMarkupField as Field,
FormMegaLayout,
} from '@formily/antd';
import { Input, Select } from '@formily/antd-components';
import NiceForm from '@/components/NiceForm';
import { warehouseDetailSchema } from './schema';
import { useLinkEnumEffect } from '@/components/NiceForm/linkages/linkEnum';
import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect';
import { usePageStatus, PageStatus } from '@/hooks/usePageStatus';
import { useInitValue } from '@/formSchema/effects/useInitValue';
import { PublicApi } from '@/services/api';
const addSchemaAction = createFormActions();
const { onFormMount$ } = FormEffectHooks;
const AddWarehouse: React.FC<{}> = (props: any) => {
const ref = useRef({});
const { pageStatus, preview, id } = usePageStatus();
const [provinceList, setProvinceList] = useState([]);
const [cityList, setCityList] = useState([]);
const [areaList, setAreaList] = useState([]);
const [telCodeList, setTelCodeList] = useState<any>([]);
const [formValue, setFormValue] = useState<any>({});
useEffect(() => {
let formValues;
// 获取详情
if (pageStatus != 0) {
PublicApi.getWarehouseWarehouseDetails({
id: usePageStatus().id,
}).then(res => {
formValues = res.data;
setFormValue(res.data);
});
}
// 获取省市区
PublicApi.getManageAreaAll().then(res => {
let provinceOptions = [];
for (let item of res.data) {
provinceOptions.push({
label: item.name,
value: item.id,
areaResponses: item.areaResponses,
});
}
setProvinceList(provinceOptions);
if (pageStatus != 0) {
getSubAddressList('province', provinceOptions, formValues.provinceId);
getSubAddressList('city', cityList, formValues.cityId);
}
});
// 获取手机code
PublicApi.getManageGetTelCode().then(res => {
setTelCodeList(res.data);
});
}, []);
const getAddressList = (type, id?) => {
let options = [];
if (type === 'province') {
provinceList.find(target => {
if (target.value === id) {
for (let item of target.areaResponses) {
options.push({ label: item.name, value: item.id });
}
setCityList(options);
}
});
} else {
cityList.find(target => {
if (target.value === id) {
for (let item of target.areaResponses) {
options.push({ label: item.name, value: item.id });
}
setAreaList(options);
}
});
}
};
const initValue = useInitValue(PublicApi.getWarehouseWarehouseDetails);
const getSubAddressList = (type, list, id) => {
let options = [];
list.find(target => {
if (target.value === id) {
for (let item of target.areaResponses) {
options.push({ label: item.name, value: item.id });
}
if (type === 'province') return setCityList(options);
if (type === 'city') return setAreaList(options);
}
});
// 获取手机code
const fetchTelCode = async () => {
const { data } = await PublicApi.getManageGetTelCode();
return data;
};
const handleSubmit = value => {
......@@ -136,86 +65,35 @@ const AddWarehouse: React.FC<{}> = (props: any) => {
}
>
<Card>
<SchemaForm
value={formValue}
editable={preview != '1'}
actions={addSchemaAction}
<NiceForm
previewPlaceholder="loading..."
editable={pageStatus !== PageStatus.PREVIEW}
effects={($, { setFieldState }) => {
$('onFormMount').subscribe(state => {});
// $('onFieldValueChange', 'provinceId').subscribe(state => {
// const origin = areaData.current.find(v => v.id === state.value)?.areaResponses
// console.log(origin)
// useLinkageUtils().enum('cityId', origin)
// })
$('onFormMount').subscribe(state => {
PublicApi.getManageAreaAll().then(res => {
const { data } = res;
setFieldState('provinceId', targetState => {
targetState.originData = data;
targetState.props.enum = data.map(v => ({
label: v.name,
value: v.id,
}));
});
});
});
useLinkEnumEffect('areaResponses', result =>
result.map(v => ({
label: v.name,
value: v.id,
})),
);
useAsyncSelect('telCode', fetchTelCode);
}}
components={{ Input, Select, Textarea: Input.TextArea }}
onSubmit={value => handleSubmit(value)}
>
<FormMegaLayout labelCol={4} labelAlign="left" wrapperCol={12}>
<Field name="name" title="仓库名称" x-component="Input" required />
<FormMegaLayout label="仓库地址" wrapperCol={24} required>
<FormMegaLayout grid full autoRow columns={3}>
<Field
name="provinceId"
enum={provinceList}
x-component="Select"
x-component-props={{
placeholder: '- 省 -',
onChange: val => getAddressList('province', val),
}}
required
/>
<Field
name="cityId"
enum={cityList}
x-component="Select"
x-component-props={{
placeholder: '- 市 -',
onChange: val => getAddressList('city', val),
}}
required
/>
<Field
name="areaId"
enum={areaList}
x-component="Select"
x-component-props={{
placeholder: '- 县/区 -',
}}
required
/>
</FormMegaLayout>
<Field
name="address"
x-component="Textarea"
x-component-props={{
placeholder: '请输入详细地址(最长50个字符,25个汉字)',
rules: [{ message: '请输入详细地址' }],
}}
required
/>
</FormMegaLayout>
<Field name="principal" title="仓库负责人" x-component="Input" />
<FormMegaLayout label="联系电话" grid full wrapperCol={24}>
<Field
name="telCode"
enum={telCodeList}
x-component="Select"
x-component-props={{ placeholder: '请选择' }}
/>
<Field
x-mega-props={{ span: 3 }}
name="tel"
x-component="Input"
x-component-props={{
placeholder: '请输入你的手机号码',
maxLength: 11,
}}
/>
</FormMegaLayout>
</FormMegaLayout>
</SchemaForm>
initialValues={initValue}
onSubmit={handleSubmit}
actions={addSchemaAction}
schema={warehouseDetailSchema}
/>
</Card>
</PageHeaderWrapper>
);
......
import { ISchema } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
export const warehouseSchema: ISchema = {
type: 'object',
properties: {
megaLayout: {
type: 'object',
'x-component': 'mega-layout',
properties: {
search: {
type: 'string',
'x-component': 'Search',
'x-mega-props': {},
'x-component-props': {
placeholder: '搜索',
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'mega-layout',
visible: false,
'x-component-props': {
inline: true,
},
properties: {
invoicesNo: {
type: 'string',
'x-component-props': {
placeholder: '单据号',
},
},
invoicesAbstract: {
type: 'string',
'x-component-props': {
placeholder: '单据摘要',
},
},
memberName: {
type: 'string',
'x-component-props': {
placeholder: '会员名称',
},
},
orderNo: {
type: 'string',
'x-component-props': {
placeholder: '订单号',
},
},
invoicesType: {
type: 'string',
'x-component-props': {
placeholder: '请选择单据类型',
},
enum: [],
},
inventory: {
type: 'string',
'x-component-props': {
placeholder: '请选择对应仓库',
},
enum: [],
},
state: {
type: 'string',
'x-component-props': {
placeholder: '请选择单据状态',
},
enum: [],
},
time: {
type: 'string',
'x-component-props': {
placeholder: '请选择交易时间',
},
enum: [],
},
},
},
},
},
},
};
export const warehouseDetailSchema: ISchema = {
type: 'object',
properties: {
MEGA_LAYOUT: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
labelCol: 4,
wrapperCol: 12,
labelAlign: 'left',
},
properties: {
name: {
type: 'string',
title: '仓库名称',
'x-component-props': {
placeholder: '请输入',
},
required: true,
},
MEGA_LAYOUT1: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
label: '仓库名称',
wrapperCol: 24,
required: true,
},
properties: {
MEGA_LAYOUT1_1: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
grid: true,
full: true,
autoRow: true,
columns: 3,
},
properties: {
provinceId: {
type: 'string',
enum: [],
'x-component-props': {
placeholder: '- 省 -',
},
'x-linkages': [
{
type: 'value:linkage',
condition: '{{!!$value}}',
origin: 'provinceId',
target: 'cityId',
},
],
required: true,
},
cityId: {
type: 'string',
enum: [],
'x-component-props': {
placeholder: '- 市 -',
},
'x-linkages': [
{
type: 'value:linkage',
condition: '{{!!$value}}',
origin: 'cityId',
target: 'areaId',
},
],
required: true,
},
areaId: {
type: 'string',
enum: [],
'x-component-props': {
placeholder: '- 县 / 区 -',
},
required: true,
},
},
},
address: {
type: 'string',
'x-component': 'TextArea',
'x-component-props': {
placeholder: '请输入详细地址(最长50个字符,25个汉字)',
},
required: true,
},
},
},
principal: {
type: 'string',
title: '仓库负责人',
'x-component-props': {},
},
MEGA_LAYOUT2: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
label: '联系电话',
wrapperCol: 24,
},
properties: {
MEGA_LAYOUT2_1: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
grid: true,
full: true,
},
properties: {
telCode: {
type: 'string',
enum: [],
'x-component-props': {
placeholder: '',
},
},
tel: {
type: 'string',
'x-mega-props': { span: 3 },
'x-component-props': {
placeholder: '请输入你的手机号码',
maxLength: 11,
},
},
},
},
},
},
},
},
},
};
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 to comment