ant-design / pro-components

🏆 Use Ant Design like a Pro!
https://pro-components.antdigital.dev
MIT License
4.02k stars 1.28k forks source link

🐛[BUG]ProFormDateRangePicker传入参数值导致页面崩溃,且无报错信息 #8263

Open codedart2018 opened 1 month ago

codedart2018 commented 1 month ago

提问前先看看:

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🐛 bug 描述

image

📷 复现步骤

         <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;

© 版本信息

🚑 其他信息

codedart2018 commented 1 month ago

包裹在

DrawerForm 组件里的