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

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

   <ModalFormtitle="编辑使用记录"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,}}再次点击会清空表单

<ProFormSelectwidth="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} borderedtoolBarRender={() => [<Buttontype="primary"key="primary"onClick={() => {setModalVisit(true)}}>{' '}添加使用记录</Button>,<Buttontype="primary"key="primary"onClick={() => {handleExportExcel(columns,excel,'设备使用记录')}}>

表格的数据源

request={getUsageRecordList}const getUsageRecordList = async(params: any)=>{params.deviceId = selectedDevice?.idconst 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// 无标题栏的proTabletoolBarRender={false}// 去除搜索框search={false}// 主键标识rowKey="id"// 边框bordered// 表头columns={columns}
/>