ci4sManagement-cloud/react-ui/src/pages/System/Approval/index.tsx

/*
 * @Author: 赵伟
 * @Date: 2024-04-16 13:58:08
 * @Description: 审核列表
 */

import { ApprovalStatus, approvalStatusOptions } from '@/enums';
import { useCacheState } from '@/hooks/useCacheState';
import { getApprovalListReq } from '@/services/message';
import { openAntdModal } from '@/utils/modal';
import { to } from '@/utils/promise';
import tableCellRender, { TableCellValueType } from '@/utils/table';
import { useNavigate } from '@umijs/max';
import {
  Button,
  Divider,
  Select,
  Table,
  Typography,
  type TablePaginationConfig,
  type TableProps,
} from 'antd';
import classNames from 'classnames';
import { useCallback, useEffect, useState } from 'react';
import ApprovalModal from './components/ApprovalModal';
import StatusCell from './components/StatusCell';
import styles from './index.less';

export interface ApprovalData {
  id: number;
  status: number;
  result: null;
  content: string;
  applicant_id: number;
  applicant_name: null;
  applicant_time: Date;
  approver_id: number;
  approver_time: Date;
  title: string;
  type: ApprovalType;
  url: string;
}

export enum ApprovalType {
  Dataset = 'DATASET',
  Model = 'MODEL',
  IMAGE = 'IMAGE',
  CODE = 'CODE',
  SERVICE = 'SERVICE',
  SKILL = 'SKILL',
}

const approvalTypeOptions = [
  { label: '数据集', value: ApprovalType.Dataset },
  { label: '模型', value: ApprovalType.Model },
  { label: '镜像', value: ApprovalType.IMAGE },
  { label: '代码配置', value: ApprovalType.CODE },
  { label: '应用', value: ApprovalType.SERVICE },
  { label: 'Skill', value: ApprovalType.SKILL },
];

const statusOptions = [{ label: '全部', value: '' }, ...approvalStatusOptions];

function ApprovalList() {
  const [tableData, setTableData] = useState<ApprovalData[]>([]);
  const [total, setTotal] = useState(0);
  const [cacheState, setCacheState] = useCacheState();
  const [status, setStatus] = useState(cacheState?.status ?? '');
  const [pagination, setPagination] = useState<TablePaginationConfig>(
    cacheState?.pagination ?? {
      current: 1,
      pageSize: 10,
    },
  );
  const navigate = useNavigate();

  // 获取审核列表
  const getApprovalList = useCallback(async () => {
    const params: Record<string, any> = {
      pageNum: pagination.current,
      pageSize: pagination.pageSize,
      status: status,
    };
    const [res] = await to(getApprovalListReq(params));
    if (res) {
      const { rows = [], total = 0 } = res;
      setTableData(rows);
      setTotal(total);
    }
  }, [pagination, status]);

  useEffect(() => {
    getApprovalList();
  }, [getApprovalList]);

  // 审核
  const approval = (record: ApprovalData) => {
    const { close } = openAntdModal(ApprovalModal, {
      record: record,
      onOk: () => {
        close();
        getApprovalList();
      },
    });
  };

  // 分页切换
  const handleTableChange: TableProps<ApprovalData>['onChange'] = (
    pagination,
    _filters,
    _sorter,
    { action },
  ) => {
    if (action === 'paginate') {
      setPagination(pagination);
    }
  };

  const columns: TableProps<ApprovalData>['columns'] = [
    {
      title: '内容',
      dataIndex: 'title',
      key: 'title',
      render: (title) => (
        <Typography.Text
          style={{ width: '100%' }}
          ellipsis={{ tooltip: title.replace(/<\/?b>/g, '') }}
        >
          <span dangerouslySetInnerHTML={{ __html: title }}></span>
        </Typography.Text>
      ),
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      width: 150,
      render: tableCellRender(true, TableCellValueType.Enum, {
        options: approvalTypeOptions,
      }),
    },
    {
      title: '申请者',
      dataIndex: 'applicant_name',
      key: 'applicant_name',
      width: 180,
      render: tableCellRender(true),
    },
    {
      title: '申请时间',
      dataIndex: 'applicant_time',
      key: 'applicant_time',
      width: 180,
      render: tableCellRender(true, TableCellValueType.Date),
    },
    {
      title: '审核意见',
      dataIndex: 'result',
      key: 'result',
      width: 200,
      render: tableCellRender(true),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: StatusCell,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 150,
      key: 'operation',
      render: (_: any, record: ApprovalData) => (
        <div className="table-operation-column">
          {record.type !== ApprovalType.CODE && (
            <Button
              type="link"
              size="small"
              key="view"
              onClick={() => {
                if (record.url) {
                  setCacheState({
                    status,
                    pagination,
                  });
                  navigate(record.url);
                }
              }}
            >
              查看
            </Button>
          )}
          {record.type !== ApprovalType.CODE && record.status === ApprovalStatus.Pending && (
            <Divider type="vertical" className="table-operation-divider" />
          )}
          {record.status === ApprovalStatus.Pending ? (
            <Button type="link" size="small" key="audit" onClick={() => approval(record)}>
              审核
            </Button>
          ) : null}
        </div>
      ),
    },
  ];

  return (
    <div className={styles['approval-list']}>
      <div className={styles['approval-list__content']}>
        <div>
          <span>状态：</span>
          <Select
            style={{ width: 100 }}
            placeholder="请选择"
            onChange={(value) => setStatus(value ?? '')}
            options={statusOptions}
            value={status}
            allowClear
          ></Select>
        </div>
        <div className={classNames('vertical-scroll-table', styles['approval-list__table'])}>
          <Table
            dataSource={tableData}
            columns={columns}
            scroll={{ y: 'calc(100% - 55px)' }}
            pagination={{
              ...pagination,
              total: total,
              showSizeChanger: true,
              showQuickJumper: true,
              showTotal: () => `共${total}条`,
            }}
            onChange={handleTableChange}
            rowKey="id"
          />
        </div>
      </div>
    </div>
  );
}

export default ApprovalList;