【procomponents】根据表单查询表格数据的两种写法

第一种：表单QueryFilter+表格ProTable

<QueryFilter
  formRef={formRef}
  initialValues={{
    mediaCategoryId: opts.mediaOpts?.[0]?.mediaCategoryId ?? '',
    dateRange: [moment(), moment()]
  }}
  optionRender={(_searchConfig, _formProps, dom) => [
    ...dom.reverse(),
    <Button 
      key="export" 
      loading={exportLoading}
    >
      导出
    </Button>,
  ]}
  // 点击查询调用getList
  onFinish={() => {
    actionRef.current?.reload();
  }}  
  // 点击重置将表单恢复为initialValues数据，调用getList
  onReset={() => {
    actionRef.current?.reloadAndRest();
  }}
>
  <ProFormSelect
    name="id"
    label="种类"
    rules={[
      { required: true, message: '请选择种类！' }
    ]}
    fieldProps={{
      options: opts.mediaOpts,
      fieldNames: { label: 'name', value: 'id' },
      allowClear: false,
    }}
  />
  <ProFormDateRangePicker 
    name="dateRange" 
    label="日期" 
    fieldProps={{
      allowClear: false,
    }}
  />
</QueryFilter>
<ProTable
   actionRef={actionRef}
   search={false}
   toolBarRender={false}
   scroll={{ 
     // x: 'max-content',
     y: 'calc(100% - 50px)'
   }}
   columns={columns}
   pagination={{
     pageSizeOptions: ['15', '20', '50', '100'],
     pageSize: pagination.pageSize,
     current: pagination.pageNum,
     showSizeChanger: true,
     showQuickJumper: true,
     showTotal: (total, range) => `共 ${total} 条`,
     hideOnSinglePage: false,
     onChange: (pageNum, pageSize) => {
       setPagination(prev => ({ ...prev, pageNum, pageSize }));
     }
   }}
   request={async(params) => {
     setLoading(true);
     if(firstRender.current) {
       await getOpts();
       firstRender.current = false;
     }
     const { id, dateRange } = formRef.current?.getFieldsValue();
     return getList({
       id,
       startTime: dateRange?.[0] ? moment(dateRange[0]).format('YYYY-MM-DD') : undefined,
       endTime: dateRange?.[1] ? moment(dateRange[1]).format('YYYY-MM-DD') : undefined,
       pageSize: params?.pageSize ?? 15,
       pageNum: params?.current ?? 1
     }).then((res: any) => {
       if(res.code === 200) {
         return { data: res?.rows || [], total: res?.total || 0, success: true };
       }else {
         return { data: [{}], total: 0, success: false };
       }
     }).catch(() => {
       return { data: [{}], total: 0, success: false };
     }).finally(() => {
       setLoading(false);
     }); 
   }}
 />

第二种：待更新