pro-components
pro-components copied to clipboard
🐛[BUG]ProFormDateRangePicker传入参数值导致页面崩溃,且无报错信息
提问前先看看:
https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md
🐛 bug 描述
📷 复现步骤
<ProFormDateRangePicker
name="contract_date"
label="合同期限"
rules={[
{
required: true,
message: '请选择合同期限',
},
]}
transform={(v) => {
if (v) {
const s = dayjs(v[0]).unix();
const e = dayjs(v[1]).unix();
return [s, e];
}
return {
contract_date: [],
};
}}
/>
直接来源数据
const contract_date = [dayjs('2015-06-06', 'YYYY-MM-DD'), dayjs('2024-10-10', 'YYYY-MM-DD')]
如果我用 Form.Item来套就没有问题
<Form.Item label="合同期限" name="contract_date">
<DatePicker.RangePicker />
</Form.Item>
同样的数据,如果用 ProFormDateRangePicker 就会报页面崩溃,且无错误信息
🏞 期望结果
期望正常
💻 复现代码
完整代码
import React, { FC } from 'react';
import {
ProFormCascader,
ProFormDateRangePicker,
ProFormRadio,
ProFormText,
ProFormTextArea,
DrawerForm,
ProFormDigit,
} from '@ant-design/pro-components';
import { fourToNineteenLW } from '@/constants';
import { InsuranceContractDrawerFormProps, InsuranceContractCurrentRow } from '../types';
import { queryInsuranceCompanyCascader } from '@/pages/system/cooperation/insurance_company/service';
import { queryDepartmentCascader } from '@/pages/system/user/department/service';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);
const InsuranceContractDrawerForm: FC<InsuranceContractDrawerFormProps> = (props) => {
const { open, current, onDone, onSubmit } = props;
return (
<DrawerForm<InsuranceContractCurrentRow>
open={open}
title={current?.id ? '编辑合同' : '添加合同'}
scrollToFirstError
width={800}
layout="horizontal"
request={async () => {
return Promise.resolve({
...current,
});
}}
drawerProps={{
destroyOnClose: true,
onClose: onDone,
}}
onFinish={async (values) => {
onSubmit(values);
}}
{...fourToNineteenLW}
>
<ProFormDigit name="id" hidden />
<ProFormText
label="合同名称"
rules={[
{
required: true,
message: '合同名称不能为空',
},
]}
placeholder="请填写合同名称"
name="title"
/>
<ProFormText
label="合同编号"
rules={[
{
required: true,
message: '合同编号号不能为空',
},
]}
placeholder="请填写合同编号"
name="code"
/>
<ProFormRadio.Group
name="contract_type"
label="合同类型"
options={[
{
label: '保险公司类',
value: 1,
},
{
label: '其他类',
value: 2,
},
]}
rules={[
{
required: true,
message: '请选择合同类型',
},
]}
/>
<ProFormRadio.Group
name="protocol_type"
label="协议类型"
options={[
{
label: '主协议',
value: 1,
},
{
label: '补充协议',
value: 2,
},
]}
rules={[
{
required: true,
message: '请选择协议类型',
},
]}
/>
<ProFormCascader
name="party_a_id"
label="签约甲方"
request={async () => {
const res = await queryInsuranceCompanyCascader();
if (res.code === 0) {
return res.data.list || [];
}
return [];
}}
fieldProps={{
showSearch: true,
}}
/>
<ProFormCascader
name="party_b_id"
label="签约乙方"
request={async () => {
const res = await queryDepartmentCascader();
if (res.code === 0) {
return res.data.list || [];
}
return [];
}}
fieldProps={{
showSearch: true,
}}
/>
<ProFormDateRangePicker
name="contract_date"
label="合同期限"
rules={[
{
required: true,
message: '请选择合同期限',
},
]}
transform={(v) => {
if (v) {
const s = dayjs(v[0]).unix();
const e = dayjs(v[1]).unix();
return [s, e];
}
return {
contract_date: [],
};
}}
/>
{/*<Form.Item label="合同期限" name="contract_date">*/}
{/* <DatePicker.RangePicker />*/}
{/*</Form.Item>*/}
<ProFormTextArea label="合同备注" placeholder="请填写合同备注" name="remark" />
</DrawerForm>
);
};
export default InsuranceContractDrawerForm;
© 版本信息
- ProComponents 版本: [e.g. 2.7.0]
- umi 版本
- 浏览器环境
- 开发环境 [e.g. mac OS]
🚑 其他信息
包裹在
DrawerForm 组件里的