Open codedart2018 opened 1 month ago
提问前先看看:
https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md
<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 就会报页面崩溃,且无错误信息
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;
包裹在
DrawerForm 组件里的
提问前先看看:
https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md
🐛 bug 描述
📷 复现步骤
直接来源数据
如果我用 Form.Item来套就没有问题
同样的数据,如果用
ProFormDateRangePicker
就会报页面崩溃,且无错误信息🏞 期望结果
期望正常
💻 复现代码
完整代码
© 版本信息
🚑 其他信息