ant-design / ant-design/pro-components
🐛[BUG]DrawerForm,ModalForm,如果绑定上form会导致数据回显问题,且挺严重!
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
### 🐛 bug 描述
DrawerForm,ModalForm,如果绑定上form会导致数据回显问题,且挺严重!尝试过关闭窗口form.resetFileds,以及通过open控制form都无法解决此问题!form如果去掉则没有问题,但这个不能取消掉,因为还要做额外的处理
### 📷 复现步骤
使用 DrawerForm,或ModalForm 绑上form={form}就会出现!
### 🏞 期望结果
期望绑定form={form}也能正常显示数据!
### 💻 复现代码
```
表格编辑提交数据
{
let billDate: string[] = [];
if (row.bill_start_date > 0) {
billDate.push(dayjs.unix(row.bill_start_date).format('YYYY-MM-DD'));
}
if (row.bill_end_date > 0) {
billDate.push(dayjs.unix(row.bill_end_date).format('YYYY-MM-DD'));
}
setCurrentRow({
id: row.id,
department_group_id: row.department_group_id,
region_id: row.region_id,
insurer_id: row.insurer_id,
classification_id: row.classification_id,
status: row.status,
bill_date: billDate.length === 2 ? billDate : undefined,
detail_list: row.detail_list || [],
});
setOpen(true);
}}
>
编辑
```
## 表单
```
import React, { FC } from 'react';
import { ProFormDateRangePicker, ProFormRadio, ProFormTreeSelect } from '@ant-design/pro-components';
import { fourToTwentyLW } from '@/constants';
import { Form } from 'antd';
import CusDrawerForm from '@/components/CusDrawerForm';
import { queryDepartmentGroupSelect } from '@/pages/system/policy_rules/department_group/service';
import { queryRegionTree } from '@/pages/system/setting/region/service';
import { queryInsuranceCompanyTree } from '@/pages/system/cooperation/insurance_company/service';
import { queryInsuranceTypeTree } from '@/pages/system/setting/insurance_type/service';
import Ratios from './Ratios';
export type RuleDetailList = {
commission_ratio: number;
id: number;
received_commission_ratio: number;
remark: string;
};
export type RuleCurrentRow = {
id?: number;
department_group_id?: number;
region_id?: number;
insurer_id?: number;
classification_id?: number[];
bill_date?: string[];
status?: number;
detail_list?: RuleDetailList[];
};
export type RuleDrawerFormProps = {
title: string;
open: boolean;
current: RuleCurrentRow | undefined;
onDone: () => void;
onSubmit: (values: RuleCurrentRow) => void;
};
const RuleDrawerForm: FC = (props) => {
const { title, open, current, onDone, onSubmit } = props;
const [form] = Form.useForm();
const ratioAdd = () => {
const val = form.getFieldValue('detail_list') || [];
val.push({
id: 0,
received_commission_ratio: undefined,
commission_ratio: undefined,
remark: '',
remarks: '',
});
form.setFieldValue('detail_list', val);
};
const ratioDelete = (index: number) => {
const val = form.getFieldValue('detail_list');
if (Array.isArray(val) && val.length > 0) {
val.splice(index, 1);
form.setFieldValue('detail_list', val);
form.validateFields(['detail_list']);
}
};
return (
// form={form} //如果去掉则没有问题,但这个不能取消掉,因为还要做额外的处理
title={current?.id ? `编辑${title}规则` : `添加${title}规则`}
open={open}
width={800}
currentRow={current}
onSubmit={onSubmit}
onClose={onDone}
{...fourToTwentyLW}
>
{open && (
<>
{
const res = await queryDepartmentGroupSelect();
if (res.code === 0) {
return res.data.list || [];
}
return [];
}}
rules={[{ required: true, message: '请选择组合部门' }]}
/>
{
const res = await queryRegionTree();
if (res.code === 0) {
return res.data.tree || [];
}
return [];
}}
rules={[{ required: true, message: '请选择区域' }]}
/>
{
const res = await queryInsuranceCompanyTree();
if (res.code === 0) {
return res.data.tree || [];
}
return [];
}}
rules={[{ required: true, message: '请选择保险公司' }]}
/>
{
const res = await queryInsuranceTypeTree();
if (res.code === 0) {
return res.data.tree || [];
}
return [];
}}
rules={[{ required: true, message: '请选择险种' }]}
/>
)}
);
};
## Ratios组件
```
import React from 'react';
import Link from 'antd/es/typography/Link';
import { Form, Input, InputNumber } from 'antd';
import '@/style/cus-table.less';
type RatiosProps = {
name: string;
onAdd?: () => void;
onDelete?: (index: number) => void;
};
const Ratios = (props: RatiosProps) => {
const { name, onAdd, onDelete } = props;
return (
{(fields) => {
if (fields.length === 0) {
return (
);
}
return fields.map((field) => {
return (
);
});
}}
ID
佣金应收比例(%)
佣金应付比例(%)
备注
新增
暂无数据
onDelete?.(field.key)}>
删除
);
};
export default Ratios;
```
export default RuleDrawerForm;
```
## 视频录屏情况
https://github.com/ant-design/pro-components/assets/12706830/226cc922-51ed-4274-a887-ee44e1517d28
https://github.com/ant-design/pro-components/assets/12706830/455bd6f4-c3ba-463d-a6a0-e0ddeb775268
## 取消掉form情况
https://github.com/ant-design/pro-components/assets/12706830/4a86f82d-7e47-4c5d-bf90-2e928e1b072e
```
通过
{({ getFieldValue }) => {
去拿数据打印出来,明显看到是上一次的数据,非本次提交过来的数据。
```
## 相关有人提的bug
[https://github.com/ant-design/pro-components/issues/7925](url)
@Gzbox 你有解决掉这个情况吗?
### © 版本信息
- ProComponents 版本: [e.g. 2.7.1]
- umi 版本 4.1.10
- 浏览器环境 chrome
- 开发环境 [e.g. mac OS]
### 🚑 其他信息
Contributor guide
Research direction
Start by reproducing the issue with the supplied RuleDrawerForm example, including form={form}, and compare it with the version where that prop is removed. Read the CusDrawerForm integration and the related issue #7925 first. Done means DrawerForm and ModalForm display the current submitted record rather than values from the previous record when a bound form is used.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 28/100