Skip to content

M
merchant-manage-ui
Commit 6bd5a22d authored by guang.wu's avatar guang.wu
Browse files
Options

fix: 添加 proForm 高级表单示例

parent 8ab34711
Show whitespace changes
Inline Side-by-side
Showing with 362 additions and 62 deletions
src/pages/businessCustomer/components/SchemaForm/bll.js → src/example/proForm/ModalForm/bll.js
View file @ 6bd5a22d
......@@ -5,20 +5,20 @@ import React from 'react';
import { Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import moment from 'moment';
import { apiEnterprisePickSelf } from '../../service';
import { mealSections } from '../../staticData/index';
import { apiEnterprisePickSelf } from './service';
import { mealSections } from './staticData';
// 获取自提点列表
export const getPickSelf = async (setPickSelfList, setVisible) => {
export const getPickSelf = async () => {
const res = await apiEnterprisePickSelf({});
if (res && res.data && res.data.records) {
const data = res.data.records;
const json = {};
data.forEach(item => {
json[item.id] = item.pickselfName;
});
setPickSelfList(json);
setVisible(true);
return data.map(item => ({
label: item.pickselfName,
value: item.id,
}));
}
return [];
};
// 风险提示
......@@ -95,7 +95,7 @@ const transformMealLimit = mealLimit => {
/**
* 3. 数据模型转换-接口获取数据转换为表单数据
*/
export const transformToFormData = data => {
export const transformVOToFormData = data => {
const {
hideImage,
hidePrice,
......@@ -130,15 +130,13 @@ export const transformToFormData = data => {
formData.mealTimePeriod = mealTimePeriodArr;
formData.mealLimit = mealLimitMap;
formData.mealTimePeriodMap = mealTimePeriodMap;
console.log('formData :>> ', formData);
return formData;
};
/*
* 5. 表单数据转换-表单数据转换为接口数据
*/
export const transformToApiParams = async (res, selectedMealTypes, meals) => {
console.log('res :>> ', res);
export const transformFormDataToDTO = async (res, selectedMealTypes, selectedMealSections) => {
const params = {
hideImage: 0, // 隐藏图片：默认0 不隐藏 必传
hidePrice: 0, // 隐藏价格：默认0 不隐藏 必传
......@@ -155,7 +153,7 @@ export const transformToApiParams = async (res, selectedMealTypes, meals) => {
const arr = [];
res.mealTimePeriod &&
res.mealTimePeriod.forEach(item => {
if (item && meals[item.mealPeriodType]) {
if (item && selectedMealSections[item.mealPeriodType]) {
const obj = { ...item };
obj.beginTime = moment(obj.time[0]).format('HH:mm');
obj.endTime = moment(obj.time[1]).format('HH:mm');
......@@ -181,13 +179,11 @@ export const transformToApiParams = async (res, selectedMealTypes, meals) => {
* mealPeriodType 餐段类型：（1早餐，2午餐，4晚餐）
* mealType 餐品类型：（1外卖 2 自助餐 4到店）
*/
console.log('res.mealLimit :>> ', res.mealLimit);
console.log('selectedMealTypes :>> ', selectedMealTypes);
const limits = [];
res.mealLimit &&
Object.keys(res.mealLimit).forEach(item => {
const mealPeriodType = item.replace('limit', '');
if (meals[mealPeriodType]) {
if (selectedMealSections[mealPeriodType]) {
const json = {
mealPeriodType,
limit: [],
......@@ -204,6 +200,5 @@ export const transformToApiParams = async (res, selectedMealTypes, meals) => {
}
});
params.mealLimit = limits;
console.log(params, '.....');
return params;
};
src/example/proForm/ModalForm/components/MealCheckbox.jsx 0 → 100644
View file @ 6bd5a22d
import React from 'react';
import { Checkbox } from 'antd';
import { mealSections } from '../staticData';
const MealCheckbox = props => {
const onChange = e => {
props.onChange(props.field);
props.changeType(e);
};
return (
<Checkbox
onChange={onChange}
checked={props.meals[props.field]}
id={props.field}
label={mealSections[props.field]}
>
{mealSections[props.field]}
</Checkbox>
);
};
export default MealCheckbox;
src/pages/businessCustomer/components/SchemaForm/MealFormListLimit.jsx → src/example/proForm/ModalForm/components/MealFormListLimit.jsx
View file @ 6bd5a22d
import React from 'react';
import { Form, Row, Col } from 'antd';
import { mealType, mealSections } from '../../staticData/index';
import MealLimit from '../MealLimit';
import { mealType, mealSections } from '../staticData';
import MealLimit from './MealLimit';
/**
* 渲染 企业单笔消费限额 二维表单项目
......
src/example/proForm/ModalForm/components/MealLimit.jsx 0 → 100644
View file @ 6bd5a22d
import React from 'react';
import { Form, InputNumber } from 'antd';
import { validateRequired, isCheckPriceTwoDecimal } from '@/utils/validator';
const MealLimit = props => (
<Form.Item
label={`${props.label}限额`}
name={props.name}
value={props.value}
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
rules={[
{ validator: validateRequired, message: `请输入${props.label}限额` },
{ validator: isCheckPriceTwoDecimal, message: '请输入正确的价格' },
]}
>
<InputNumber addonAfter="元" max={999.99} />
</Form.Item>
);
export default MealLimit;
src/example/proForm/ModalForm/components/MealSection.jsx 0 → 100644
View file @ 6bd5a22d
import React from 'react';
import { Form, Row, Col, TimePicker } from 'antd';
import { mealSections } from '../staticData';
import MealCheckbox from './MealCheckbox';
const MealSection = props => (
<Form.List name="mealTimePeriod">
{fields => (
<>
{Object.keys(mealSections).map((field, i) => (
<Row key={field} align="baseline">
<Col span={4}>
<Form.Item label="" name={[i, 'mealPeriodType']}>
<MealCheckbox
changeType={e => props.onChangeSection(e, props)}
meals={props.meals}
field={field}
/>
</Form.Item>
</Col>
<Col span={18}>
<Form.Item
name={[i, 'time']}
rules={
props.meals[field]
? [
{ type: 'array', required: true, message: '请选择!' },
{ validator: props.validateMeals, message: '时间段不能交叉！' },
]
: []
}
>
<TimePicker.RangePicker format="HH:mm" minuteStep={30} />
</Form.Item>
</Col>
</Row>
))}
</>
)}
</Form.List>
);
export default MealSection;
src/pages/businessCustomer/components/SchemaForm/CustomerBase.jsx → src/example/proForm/ModalForm/index.jsx
View file @ 6bd5a22d
import React, { useEffect, useRef, useState } from 'react';
import { notification } from 'antd';
import { BetaSchemaForm } from '@ant-design/pro-components';
import { layout } from '../../staticData/index';
import { apiEnterpriseInfo, apiNewEnterprise, apiEditEnterprise } from '../../service';
import { getBaseFormItem } from './staticData';
import { getPickSelf, checkConfirm, transformToApiParams, transformToFormData } from './bll';
import { layout, getBaseFormItem } from './staticData';
import { checkConfirm, transformVOToFormData, transformFormDataToDTO } from './bll';
import { apiEnterpriseInfo, apiNewEnterprise, apiEditEnterprise } from './service';
// 企业客户信息
const CustomerInfo = props => {
const [meals, setMeals] = useState([]); // 选中的餐段
const [selectedMealSections, setSelectedMealSections] = useState([]); // 选中的餐段
const [selectedMealTypes, setSelectedMealTypes] = useState([]); // 选中的餐品类型
const [pickSelfList, setPickSelfList] = useState({}); // 自提点列表
const [visible, setVisible] = useState(false);
const [pageLoading, setPageLoading] = useState(false); // 页面加载状态
const refForm = useRef();
/**
......@@ -23,7 +21,7 @@ const CustomerInfo = props => {
props.onClose(!!isRefresh);
}
setSelectedMealTypes([]);
setMeals({});
setSelectedMealSections({});
refForm.current.setFieldsValue({
mealLimit: [],
});
......@@ -39,9 +37,10 @@ const CustomerInfo = props => {
* 6. 表单提交
*/
const submitForm = async () => {
// 校验表单 并 转换成接口需要的数据
const formData = refForm.current.validateFields();
const data = await transformToApiParams(formData, selectedMealTypes, meals);
// 校验表单
const formData = await refForm.current.validateFields();
// 转换成接口需要的数据
const data = await transformFormDataToDTO(formData, selectedMealTypes, selectedMealSections);
let api = apiNewEnterprise;
// 如果有客户ID 则为编辑
if (props.id) {
......@@ -56,27 +55,31 @@ const CustomerInfo = props => {
}
};
// 改变餐品类型 (选自助餐必选外卖)
const onChangeMealType = async ms => {
/**
* 改变餐品类型 (选自助餐必选外卖，取消外卖必须取消自助餐)
* @param {array} mt 选中的餐品类型 ['1', '2']
* types: { 1: '外卖', 2: '自助餐', 4: '到店' }
*/
const onChangeMealType = async mt => {
try {
// 编辑时，取消餐段需提示用户确认风险
if (props.id && ms.length < selectedMealTypes.length) {
if (props.id && mt.length < selectedMealTypes.length) {
await checkConfirm();
}
// 取消外卖，必须取消自助餐
if (selectedMealTypes.includes('1') && !ms.includes('1')) {
ms = ms.filter(item => item !== '2');
if (selectedMealTypes.includes('1') && !mt.includes('1')) {
mt = mt.filter(item => item !== '2');
}
// 选择自助餐，必须选择外卖
if (!selectedMealTypes.includes('1') && ms.includes('2')) {
ms.push('1');
if (!selectedMealTypes.includes('1') && mt.includes('2')) {
mt.push('1');
}
// 注意 须先set 再from.setFieldsValue 防止丢失数据
setSelectedMealTypes(mt);
refForm.current.setFieldsValue({
mealType: ms,
mealType: mt,
});
setSelectedMealTypes(ms);
} catch {
refForm.current.setFieldsValue({
mealType: selectedMealTypes,
......@@ -86,11 +89,11 @@ const CustomerInfo = props => {
/**
* 改变餐段
* @param {object} e 事件对象
* meals: { 1: '早餐', 2: '午餐', 3: '晚餐' }
* selectedMealSections: { 1: '早餐', 2: '午餐', 4: '晚餐' }
*/
const onChangeMealSection = e => {
const { id, checked, label } = e?.target || {};
const values = Object.assign({}, meals);
const values = Object.assign({}, selectedMealSections);
// 选中则添加到选中餐段中，否则删除
if (checked) {
values[id] = label;
......@@ -98,7 +101,7 @@ const CustomerInfo = props => {
delete values[id];
}
// 设置选中餐段
setMeals(values);
setSelectedMealSections(values);
// 餐段都没选 则设置为空数组
if (Object.keys(values).length === 0) {
refForm.current.setFieldsValue({
......@@ -109,14 +112,21 @@ const CustomerInfo = props => {
refForm.current.validateFields(['mealTimePeriod']);
};
// 获取表单信息
/**
* 获取表单信息
* 把接口数据转换成表单需要的数据格式
*/
const getInfo = async () => {
setPageLoading(true);
const res = await apiEnterpriseInfo(props.id);
setPageLoading(false);
if (res && res.data) {
// 转换成表单需要的数据
const formData = transformToFormData(res.data);
const formData = transformVOToFormData(res.data);
// 选中的餐品类型
setSelectedMealTypes(formData.mealType);
setMeals(formData.mealTimePeriodMap);
// 选中的餐段
setSelectedMealSections(formData.mealTimePeriodMap);
refForm.current.setFieldsValue(formData);
}
};
......@@ -126,13 +136,7 @@ const CustomerInfo = props => {
// 如果有客户ID 则为编辑 需获取表单信息
if (props.id) {
getInfo();
} else {
// 新增的时候才获取自提点列表
getPickSelf(setPickSelfList, setVisible);
}
setVisible(true);
} else {
setVisible(false);
}
}, [props.visible]);
......@@ -140,8 +144,7 @@ const CustomerInfo = props => {
onChangeMealType,
onChangeMealSection,
id: props.id,
pickSelfList,
meals,
selectedMealSections,
selectedMealTypes,
form: refForm.current,
});
......@@ -150,21 +153,17 @@ const CustomerInfo = props => {
<BetaSchemaForm
layoutType="ModalForm"
title="企业客户信息"
open={visible}
open={props.visible}
width="900px"
modalProps={{
maskClosable: false,
destroyOnClose: true,
confirmLoading: pageLoading,
}}
formRef={refForm}
onOpenChange={onOpenChange}
layout="horizontal"
{...layout}
steps={[
{
title: '企业客户信息',
},
]}
onFinish={submitForm}
columns={formItem}
/>
......
src/example/proForm/ModalForm/service.js 0 → 100644
View file @ 6bd5a22d
import request from '@/utils/request';
import config from '@/../config/env.config';
const { roleApi, apiPrefix } = config;
/**
* 获取企业客户详细
* http://yapi.quantgroups.com/project/389/interface/api/65339
*/
export async function apiEnterpriseInfo(id) {
return request.get(`${apiPrefix}/enterprise/info?id=${id}`, {
prefix: roleApi,
});
}
/**
* 添加企业客户
* http://yapi.quantgroups.com/project/389/interface/api/65329
*/
export async function apiNewEnterprise(data) {
return request.post(`${apiPrefix}/enterprise/save`, {
data,
prefix: roleApi,
});
}
/**
* 编辑企业客户
* http://yapi.quantgroups.com/project/389/interface/api/65334
*/
export async function apiEditEnterprise(data) {
return request.post(`${apiPrefix}/enterprise/update`, {
data,
prefix: roleApi,
});
}
/**
* 查询自提点列表
* http://yapi.quantgroups.com/project/389/interface/api/65494
*/
export async function apiEnterprisePickSelf() {
return request.get(`${apiPrefix}/selfPickUpLocation/list`, {
prefix: roleApi,
});
}
src/pages/businessCustomer/components/SchemaForm/staticData.js → src/example/proForm/ModalForm/staticData.js
View file @ 6bd5a22d
import React from 'react';
import { Input, InputNumber, Select, Checkbox, Radio } from 'antd';
import { jsonToArray } from '@/utils/utils';
import moment from 'moment';
import MealSection from '../MealSection';
import { mealType, boolOptions, hideOptions } from '../../staticData/index';
import MealFormListLimit from './MealFormListLimit';
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;
import MealSection from './components/MealSection';
import MealFormListLimit from './components/MealFormListLimit';
import { getPickSelf } from './bll';
const hideEnums = { hidePrice: '隐藏商品价格', hideImage: '隐藏商品图片' };
const weekEnums = { 1: '是', 0: '否' };
const weekMap = new Map([[1, '是'], [0, '否']]);
export const layout = {
labelCol: { span: 4 },
wrapperCol: { span: 18 },
};
// 餐品类型
export const mealType = {
1: '外卖',
2: '自助餐',
4: '到店',
};
// 餐段
export const mealSections = {
1: '早餐',
2: '午餐',
4: '晚餐',
};
// 校验时间
const checkTime = (arr, current) => {
......@@ -23,17 +36,17 @@ const checkTime = (arr, current) => {
return valid;
};
// 验证餐段
const validateMeals = (form, meals) => {
const validateMeals = (form, selectedMealSections) => {
const { mealTimePeriod = [] } = form.getFieldValue();
const arr = [];
let validTime = false;
mealTimePeriod.forEach(item => {
if (item && meals[item.mealPeriodType]) {
if (item && selectedMealSections[item.mealPeriodType]) {
const obj = { ...item };
if (obj.time?.length === 2) {
obj.beginTime = moment(obj.time[0]).format('HH:mm');
obj.endTime = moment(obj.time[1]).format('HH:mm');
if (checkTime(arr, obj.beginTime, meals[item.mealPeriodType])) {
if (checkTime(arr, obj.beginTime, selectedMealSections[item.mealPeriodType])) {
validTime = true;
}
arr.push(obj);
......@@ -47,103 +60,14 @@ const validateMeals = (form, meals) => {
return Promise.resolve();
};
export const getFormItem = options => {
const { id, pickSelfList, onChangeMealType, onChangeMealSection, meals, form } = options;
return [
{
type: 'Form.Item',
label: '企业名称',
name: 'name',
wrapperCol: { span: 20 },
rules: [{ required: true, message: '请输入企业名称' }],
component: <Input placeholder="请输入企业名称" />,
},
{
type: 'Form.Item',
disabled: id,
label: '企业取餐点',
wrapperCol: { span: 20 },
name: 'pickSelfIds',
rules: [{ required: true, message: '请选择企业取餐点' }],
component: (
<Select
options={pickSelfList}
mode="multiple"
showSearch
filterOption={(v, option) =>
(option?.label ?? '').toLowerCase().includes(v.toLowerCase())
}
/>
),
},
{
type: 'Form.Item',
label: '企业截止时间',
wrapperCol: { span: 20 },
name: 'endOrderTime',
rules: [{ required: true, message: '请输入企业截止时间' }],
component: <InputNumber min={0} max={600} addonAfter="分钟" />,
extra: <span>企业员工下单的截至时间，仅支持正整数，单位为分钟。</span>,
},
{
type: 'Form.Item',
label: '餐品类型',
wrapperCol: { span: 20 },
name: 'mealType',
rules: [{ required: true, message: '请选择餐品类型' }],
component: <CheckboxGroup options={jsonToArray(mealType)} onChange={onChangeMealType} />,
},
{
type: 'Form.Item',
label: '餐段配置',
wrapperCol: { span: 12 },
name: 'mealTimePeriod',
rules: [{ required: true, message: '请选择餐段配置' }],
component: (
<MealSection
meals={meals}
validateMeals={() => validateMeals(form, meals)}
onChange={onChangeMealSection}
/>
),
},
{
name: 'Divider',
type: 'Divider',
component: '企业单笔消费限额',
},
{
name: 'Form.List',
type: 'Form.List',
component: '',
},
{
type: 'Form.Item',
label: '商品隐藏信息',
wrapperCol: { span: 20 },
name: 'hideInfo',
component: <CheckboxGroup options={hideOptions} />,
},
{
type: 'Form.Item',
label: '是否周预览',
wrapperCol: { span: 20 },
name: 'weekPreview',
rules: [{ required: true, message: '请选择是否周预览' }],
component: <RadioGroup options={boolOptions} />,
},
];
};
// 获取 schemaForm 的 columns
export const getBaseFormItem = options => {
const {
id,
pickSelfList,
selectedMealTypes,
onChangeMealType,
selectedMealSections,
onChangeMealSection,
meals,
form,
} = options;
......@@ -160,10 +84,10 @@ export const getBaseFormItem = options => {
title: '企业取餐点',
dataIndex: 'pickSelfIds',
valueType: 'select',
valueEnum: pickSelfList,
fieldProps: {
mode: 'multiple',
},
request: getPickSelf,
formItemProps: {
rules: [{ required: true, message: '请选择企业取餐点' }],
},
......@@ -204,8 +128,8 @@ export const getBaseFormItem = options => {
},
renderFormItem: () => (
<MealSection
meals={meals}
validateMeals={() => validateMeals(form, meals)}
meals={selectedMealSections}
validateMeals={() => validateMeals(form, selectedMealSections)}
onChangeSection={onChangeMealSection}
/>
),
......@@ -229,7 +153,7 @@ export const getBaseFormItem = options => {
labelCol: { span: 0 },
wrapperCol: { span: 24 },
},
renderFormItem: () => MealFormListLimit(meals, selectedMealTypes),
renderFormItem: () => MealFormListLimit(selectedMealSections, selectedMealTypes),
},
{
title: '商品隐藏信息',
......@@ -240,10 +164,12 @@ export const getBaseFormItem = options => {
{
title: '是否周预览',
dataIndex: 'weekPreview',
formItemProps: {
rules: [{ required: true, message: '请选择是否周预览' }],
},
valueType: 'radio',
valueEnum: weekEnums,
convertValue: v => `${v}`,
valueEnum: weekMap,
// convertValue: v => `${v}`, // 从接口获取的数据做简单转换
},
];
return baseColumn;
......
src/pages/businessCustomer/index.jsx
View file @ 6bd5a22d
......@@ -5,7 +5,7 @@ import { PlusOutlined } from '@ant-design/icons';
import { customerColumn } from './staticData/index';
// import CustomerInfo from './components/CustomerInfoCopy';
// import CustomerInfo from './components/CustomerInfo';
import CustomerInfo from './components/SchemaForm/CustomerBase';
import CustomerInfo from '@/example/proForm/ModalForm/index';
import utilStyle from '@/utils/utils.less';
import { stringOrObjectTrim } from '@/utils/utils';
import { apiEnterpriseList } from './service';
......
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