antdPro封装了很多高级组件，很大程度的节约了开发时间

在这记录一下，初次使用，常用的一些属性

   <ModalForm
      title="编辑使用记录"
      open={visible}
      onFinish={onSave}
      onOpenChange={onOpenChange}
      initialValues={updateRecord}
      width={'40%'}
      modalProps={{
        destroyOnClose: true,
    }}
    >
<ProForm.Group>
       <ProFormDatePicker name="date" label="使用日期：" rules={[{required: true, message: '请选择使用日期'}]}/>
       <ProFormText width="md" name="workContent" label="教学(测试)工作内容：" rules={[{required: true, message: '请填写教学(测试)工作内容'}]}/>
       </ProForm.Group>
       <ProForm.Group>
       <ProFormText width="md" name="taskSource" label="任务来源：" rules={[{required: true, message: '请填写任务来源'}]}/>
       <ProFormTimePicker.RangePicker name="time" label="动用时间：" rules={[{required: true, message: '请选择动用时间'}]}/>
       </ProForm.Group>
 </ModalForm>

 <ModalForm>:弹窗表单，initialValues={updateRecord}数据回显，

  modalProps={{destroyOnClose: true,}}再次点击会清空表单

<ProFormSelect
       width="md"
                name="usageType"
                label="使用类型"
                placeholder="请选择使用类型"
                options={[
                    {label: '教学', value: 'TEACH'},
                    {label: '科研 ', value: 'RESEARCH'},
                ]}
                rules={[{required: true, message: '请选择使用类型'}]}
            />
            <ProFormDependency name={['usageType']} >
                {({usageType}) => (
                    <>
                        {usageType === 'TEACH' ? (
                          <>
                          <ProFormText width="md" name="gradStudentsUsage" label="研究生" />
                          <ProFormText width="md" name="undergradStudentsUsage" label="本科生" />
                          <ProFormText width="md" name="juniorStudentsUsage" label="专科" />
                          <ProFormText width="md" name="graduationProjectUsage" label="毕业设计" />
                          </>
                        ) : (
                          <>
                          <ProFormText width="md" name="groupUsage" label="本机组" />
                          <ProFormText width="md" name="insideGroupUsage" label="机组外(校内)" />
                          <ProFormText width="md" name="outSideGroupUsage" label="机组外(校外)" />
                          </>
                        )}
                    </>
                )}
            </ProFormDependency>

选择器和输入框联动，根据选择器的name决定下面显示那个input

<ProTable>高级表格，自带搜索功能，按钮

<ProTable actionRef={usageTableRef} columns={columns} request={getUsageRecordList} bordered
      toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setModalVisit(true)
          }}
        >
          {' '}
          添加使用记录
        </Button>,
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            handleExportExcel(columns,excel,'设备使用记录')
          }}
        >

表格的数据源

request={getUsageRecordList}
  const getUsageRecordList = async(params: any)=>{
      params.deviceId = selectedDevice?.id
      const res=await deviceUsageService.getDeviceUsageList(params);
}

表头，  hidden: true,隐藏某一项

const columns= [
  {
    title: '日期',
    dataIndex: 'date',
    key: 'date',
    valueType: 'date',
  },
  {
    title: '教学(测试)工作内容',
    dataIndex: 'workContent',
    key: 'workContent',
    search:false
  },
  {
    title: '任务来源',
    dataIndex: 'taskSource',
    key: 'taskSource',
  },
]

<ProTable
    // 无标题栏的proTable
    toolBarRender={false}
    // 去除搜索框
    search={false}
    // 主键标识
    rowKey="id"
    // 边框
    bordered
    // 表头
    columns={columns}
/>