fe_service_ebtp_frontend/src/pages/Archive/ProjectArchive/index.tsx

import React, { useState } from 'react';
import {  Divider, Switch, Tag } from 'antd';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import { EditOutlined, PlusOutlined } from '@ant-design/icons';
import CreateDocument from './components/CreateDocument';

export interface Status {
  color: string;
  text: string;
}

const statusMap = {
  0: {
    color: '',
    text: '未归档',
  },
  1: {
    color: 'green',
    text: '已归档',
  },
};

export interface TableListItem {
  key: number;
  name: string;
  containers: number;
  creator: string;
  status: Status;
  createdAt: number;
}
const tableListDataSource: TableListItem[] = [];

const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];

for (let i = 0; i < 5; i += 1) {
  tableListDataSource.push({
    key: i,
    name: 'AppName',
    containers: Math.floor(Math.random() * 20),
    creator: creators[Math.floor(Math.random() * creators.length)],
    status: statusMap[Math.floor(Math.random() * 10) % 5],
    createdAt: Date.now() - Math.floor(Math.random() * 100000),
  });
}

const onChange = (value: any) => {
  console.log(value)
}

const expandedRowRender = () => {
  const data = [];
  for (let i = 0; i < 3; i += 1) {
    data.push({
      key: i,
      id: i+1,
      to: "项目建档",
      upgradeNum: 'Upgraded: 56',
      name: 'This is production name',
      is: "有",
      ispaper: 1,
      state:statusMap[ i == 0 || i == 1 ? 0 : 1 ]
    });
  }
  return (
    <ProTable
      columns={[
        { title: '序号', dataIndex: 'id', key: 'id' },
        { title: '归档目录', dataIndex: 'to', key: 'to' },

        { title: '文档类型', dataIndex: 'upgradeNum', key: 'upgradeNum' },
        { title: '文档名称', dataIndex: 'name', key: 'name' },
        { title: '有无电子档', dataIndex: 'is', key: 'is' },
        { title: '有无纸质', dataIndex: 'ispaper', key: 'ispaper',render:(_,record)  => <Switch checkedChildren="有" unCheckedChildren="无" onChange={onChange}/> },
        { title: '状态', dataIndex: 'state', key: 'state', render: (_, record) => <Tag color={record.state.color}>{record.state.text}</Tag>,},
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          valueType: 'option',
          render: () => [<a key="Pause">移除</a>, <a key="Stop">编辑</a>, <a key="total">详情</a>],
        },
      ]}
      headerTitle={false}
      search={false}
      options={false}
      dataSource={data}
    //   pagination={false}
    />
  );
};

const ProjectArchive: React.FC<{}> = () => {
    //新增档案文件弹出参数
    const [addDocument, setAddDocument] = useState<boolean>(false)

    const columns: ProColumns<TableListItem>[] = [
      {
        title: '业务编号',
        dataIndex: 'name',
        key: 'name',
        width: 120,
        render: (_) => <a>{_}</a>,
      },
      {
        title: '标段名称',
        dataIndex: 'containers',
        key: 'containers',
        width: 120,
      },
      {
        title: '操作',
        key: 'option',
        valueType: 'option',
        width: 164,
        render: (_,record) => [
            <a key="1" onClick={() => setAddDocument(true)}><PlusOutlined />新增</a>,
            <a key="2"><EditOutlined />归档</a>
        ]
      },
    ];

    return (
      <>
        <ProTable<TableListItem>
          columns={columns}
          request={(params, sorter, filter) => {
            // 表单搜索项会从 params 传入，传递给后端接口。
            console.log(params, sorter, filter);
            return Promise.resolve({
              data: tableListDataSource,
              success: true,
            });
          }}
          rowKey="key"
          pagination={{
            showQuickJumper: true,
          }}
          expandable={{ expandedRowRender }}
          search={false}
          dateFormatter="string"
          options={false}
        />
        <CreateDocument title="新增档案文件" onCancel={() => setAddDocument(false)} modalVisible={addDocument} />
      </>
      );
}
export default ProjectArchive