前端 高级条件检索 +ant-d pro

import type { Key } from 'react';
import { useState, useEffect } from 'react';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getMaintainList } from '@/services/preservation/archivesPackage';
import { Button, message, Space, Form, Upload, Image, Col, Row, Select } from 'antd';
import React from 'react';
const { Option } = Select;
import ProForm, {
  ModalForm,
  ProFormSelect,
  ProFormText,
  ProFormDateRangePicker,
} from '@ant-design/pro-form';

import ProCard from '@ant-design/pro-card';

const Maintenance = () => {
  let [commonTitle, setcommonTitle] = useState('');
  let [isModalVisible, setIsModalVisible] = useState(false);
  let [editId, setEditId] = useState(undefined);

  //等后端数据
  type MaintenanceItem = {};

  const columns: ProColumns<MaintenanceItem>[] = []
   
  const optionsItems = [
    {
      key: '等于',
      value: '0',
      label: '等于',
    },
    {
      value: '1',
      label: '包含',
      key: '包含',
    },
    {
      value: '2',
      label: '选择区间',
      key: '选择区间',
    },
    {
      value: '3',
      label: '大于',
      key: '大于',
    },
    {
      value: '4',
      label: '小于',
      key: '小于',
    },
  ];

  //options 0等于 1包含  2选择区间  3大于 4小于
  const FormsearchItem = [
    {
      title: '档号',
      options: [0, 1],
      type: 'input',
    },
    {
      title: '入库时间',
      options: [2],
      type: 'time',
    },
    {
      title: '入库方式',
      options: [0],
      type: 'select',
    },
    {
      title: '来源渠道',
      options: [0],
      type: 'select',
    },
    {
      title: '单位名称',
      options: [0],
      type: 'select',
    },
    {
      title: '保管期限',
      options: [0, 1, 3, 4],
      type: 'input',
    },
    {
      title: '备份信息',
      options: [0, 1, 3, 4],
      type: 'input',
    },
  ];

 
 
 
          <ProCard>
            {FormsearchItem?.map((item: { title: string; options: number[]; type: string }) => {
              let valueOptions: any = [];
              item.options?.map((item) => {
                return valueOptions.push(optionsItems[item]);
              });

              let content: any;
              switch (item.type) {
                case 'input':
                  content = (
                    <Col span={12}>
                      <ProFormText
                        name=""
                        label=""
                        // placeholder={'请输入' + item.title}
                      />
                    </Col>
                  );
                  break;
                case 'select':
                  content = (
                    <Col span={12}>
                      <ProFormSelect
                        options={[]}
                        name=""
                        label=""
                        // initialValue={0}
                        // placeholder={'请选择' + item.title}
                      />
                    </Col>
                  );
                  break;
                case 'time':
                  content = (
                    <Col span={12}>
                      <ProFormDateRangePicker name={['contract', 'createTime']} />
                    </Col>
                  );
                  break;
              }
              return (
                <Row justify="space-around">
                  <Col span={11}>
                    <ProFormSelect
                      options={valueOptions}
                      name={item.title}
                      label={item.title}
                      initialValue={item.options[0].toString()}
                    />
                  </Col>

                  {content}
                </Row>
              );
            })}
          </ProCard>