关于antd:使用ProComponents和Antd的一些笔记

antd是咱们罕用的一款react框架（等于没说,哈哈）

什么是ProComponents?

对于一个应用这个组件开发了半年之久的菜鸟来说,什么是ProComponents,
就是antd的增强集成版本,集成度很高，用起来很不便(对于我这个菜鸟来说 容易踩坑),无论是elementUi vant antd…,组件应用状况大抵相似,抽个工夫记录一下,也增深一下印象，当前再遇到新的组件也好得心应手不是。

ProFormDigit

这段代码，为什么要在ProFormDigit套上form.item呢?
那是因为ProFormDigit有一个bug,
因为如果我间接点提交，就会跳过ProFormDigit对于输出的内容的限度,包含（数字，位数，最大值，最小值）都会没来得及校验，提交下来~~

<Form.Item
        style={{width:'300px'}}
          name="percent"
          rules={[
            {
              required: true,
              message: '请输出调整比例',
            },
            {
              pattern:/^([1-9][0-9]{0,1}|100)$/,
              message:'请输出1到100之间的整数',
            },
          ]}
          >
            <ProFormDigit
              fieldProps={{ precision: 0 }}
              label=""
              width={150}
              placeholder="请输出调整比例"
              min={0}
              max={100}
            />
          </Form.Item>

这个组件是酱紫的~

工夫组件ProFormDateRangePicker

个别应用

import {
  ProFormDateRangePicker,
} from '@ant-design/pro-form'



<ProFormDateRangePicker width="md" name={['contract', 'createTime']} label="合同失效工夫" />

在useColumns中应用

const columns = defineProTableColumn<MaintenanceListVo>([
 {
      title: '投诉工夫',
      dataIndex: 'createTime',
      key: 'createTime',
      hideInSearch: true,
    },
 {
      title:'',
      dataIndex: 'createTime',
      key: 'createTime',
      valueType: 'dateRange',
      hideInTable: true,
      fieldProps: {
        placeholder: ['投诉工夫','投诉工夫'],
      },
      search: {
      transform: (value) => {
        return {
          startTime: value[0],
          endTime: value[1],
        };
      },
    },
    },
      ]);


      /** 解决表格列 */
export function useColumns() {
  return { columns };
}

ProFormSelect 抉择框

<ProFormSelect
        width={364}
        rules={[
          {
            required: true,
            message: '请抉择要转让的员工',
          },
        ]}
        placeholder="请抉择人员"
        fieldProps={{
          onChange: (e) => {
            setData(staffList.find((item) => item.employeeId == e));
          },
        }}
        help={currentStore?.storeType === 'community' && '转让后你就不是该小区的负责人，请慎用！'}
        name="employeeId"
        options={staffList.map((item) => ({
          label: item.employeeName,
          value: item.employeeId,
        }))}
        label="转让到"
      />