GtDigManageWeb/src/pages/ContractManager/index.tsx

import React, { useState } from 'react';
import { Button, DatePicker, Input, Select, Space, Table } from 'antd';
import styles from './index.less';
import { ColumnsType } from 'antd/es/table';
interface DataType {
  key: React.ReactNode;
  name: string;
  age: number;
  address: string;
  children?: DataType[];
}

const ConteactManager = () => {
  const [searchData, setSearchData] = useState({});
  console.log(searchData);

  const columns: ColumnsType<DataType> = [
    {
      title: '合同编号',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '合同生效时间',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '合同名称',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '甲方',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '丙方',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '所属部门/子公司',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '项目名称',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '合同总价（万元）',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '经办人',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '状态',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '操作',
      dataIndex: 'address',
      align: 'center',
      render: () => {
        return (
          <Space>
            <a>详情</a>
            <a>预览</a>
            <a>下载</a>
            <a>增补</a>
            <a>作废</a>
          </Space>
        );
      },
    },
  ];
  const data: DataType[] = [
    {
      key: 1,
      name: 'John Brown sr.',
      age: 60,
      address: 'New York ',
      children: [
        {
          key: 11,
          name: 'John Brown',
          age: 42,
          address: 'New York No. 2 Lake Park',
        },
        {
          key: 12,
          name: 'John Brown jr.',
          age: 30,
          address: 'New York No. 3 Lake Park',
          children: [
            {
              key: 121,
              name: 'Jimmy Brown',
              age: 16,
              address: 'New York No. 3 Lake Park',
            },
          ],
        },
        {
          key: 13,
          name: 'Jim Green sr.',
          age: 72,
          address: 'London No. 1 Lake Park',
          children: [
            {
              key: 131,
              name: 'Jim Green',
              age: 42,
              address: 'London No. 2 Lake Park',
              children: [
                {
                  key: 1311,
                  name: 'Jim Green jr.',
                  age: 25,
                  address: 'London No. 3 Lake Park',
                },
                {
                  key: 1312,
                  name: 'Jimmy Green sr.',
                  age: 18,
                  address: 'London No. 4 Lake Park',
                },
              ],
            },
          ],
        },
      ],
    },
    {
      key: 2,
      name: 'Joe Black',
      age: 32,
      address: 'Sydney No',
    },
  ];

  const handleChange = () => {};
  const handleSearch = () => {};
  const handleExport = () => {};
  return (
    <div className={styles.main}>
      <div className={styles.searchContent}>
        <div className={styles.itemFlex}>
          <div>合同生效日期：</div>
          <DatePicker onChange={handleChange} />
        </div>
        <div className={styles.itemFlex}>
          <div>项目名称：</div>
          <Select
            style={{ width: 200 }}
            placeholder="请选择"
            onChange={handleChange}
            options={[
              { value: 'jack', label: 'Jack' },
              { value: 'lucy', label: 'Lucy' },
              { value: 'Yiminghe', label: 'yiminghe' },
              { value: 'disabled', label: 'Disabled', disabled: true },
            ]}
          />
        </div>
        <div className={styles.itemFlex}>
          <div>状态：</div>
          <Select
            style={{ width: 150 }}
            placeholder="请选择"
            onChange={handleChange}
            options={[
              { value: 0, label: '已归档' },
              { value: 1, label: '归档审核中' },
              { value: 2, label: '作废审核中' },
              { value: 3, label: '已作废' },
              { value: 4, label: '归档拒绝' },
              { value: 5, label: '作废拒绝' },
            ]}
          />
        </div>
        <Input
          className={styles.inputSty}
          placeholder="请输入合同名称/编号"
          onChange={handleChange}
        />
        <Button
          type="primary"
          className={styles.searchBtnSty}
          onClick={handleSearch}
        >
          查询
        </Button>
        <Button type="primary" onClick={() => {}}>
          新增
        </Button>
        <Button
          type="primary"
          className={styles.exportBtnSty}
          onClick={handleExport}
        >
          导出
        </Button>
      </div>
      <Table columns={columns} dataSource={data} />
    </div>
  );
};
export default ConteactManager;