ci4sManagement-cloud/react-ui/src/pages/DevelopmentEnvironment/List/index.tsx

/*
 * @Author: 赵伟
 * @Date: 2024-04-16 13:58:08
 * @Description: 开发环境列表
 */
import CommonTableCell from '@/components/CommonTableCell';
import DateTableCell from '@/components/DateTableCell';
import KFIcon from '@/components/KFIcon';
import { DevEditorStatus } from '@/enums';
import { useCacheState } from '@/hooks/pageCacheState';
import {
  deleteEditorReq,
  getEditorListReq,
  startEditorReq,
  stopEditorReq,
} from '@/services/developmentEnvironment';
import themes from '@/styles/theme.less';
import { to } from '@/utils/promise';
import { editorUrl, setSessionStorageItem } from '@/utils/sessionStorage';
import { modalConfirm } from '@/utils/ui';
import { useNavigate } from '@umijs/max';
import {
  App,
  Button,
  ConfigProvider,
  Table,
  type TablePaginationConfig,
  type TableProps,
} from 'antd';
import classNames from 'classnames';
import { useEffect, useState } from 'react';
import EditorStatusCell from '../components/EditorStatusCell';
import styles from './index.less';

export type EditorData = {
  id: number;
  name: string;
  status: string;
  computing_resource: string;
  update_by: string;
  create_time: string;
  url: string;
};

function EditorList() {
  const navigate = useNavigate();
  const [cacheState, setCacheState] = useCacheState();
  const { message } = App.useApp();
  const [tableData, setTableData] = useState<EditorData[]>([]);
  const [total, setTotal] = useState(0);
  const [pagination, setPagination] = useState<TablePaginationConfig>(
    cacheState?.pagination ?? {
      current: 1,
      pageSize: 10,
    },
  );

  useEffect(() => {
    getEditorList();
  }, [pagination]);

  // 获取编辑器列表
  const getEditorList = async () => {
    const params: Record<string, any> = {
      page: pagination.current! - 1,
      size: pagination.pageSize,
    };
    const [res] = await to(getEditorListReq(params));
    if (res && res.data) {
      const { content = [], totalElements = 0 } = res.data;
      setTableData(content);
      setTotal(totalElements);
    }
  };

  // 删除编辑器
  const deleteEditor = async (id: number) => {
    const [res] = await to(deleteEditorReq(id));
    if (res) {
      message.success('删除成功');
      // 如果是一页的唯一数据，删除时，请求第一页的数据
      // 否则直接刷新这一页的数据
      // 避免回到第一页
      if (tableData.length > 1) {
        setPagination((prev) => ({
          ...prev,
          current: 1,
        }));
      } else {
        getEditorList();
      }
    }
  };

  // 启动编辑器
  const startEditor = async (id: number) => {
    const [res] = await to(startEditorReq(id));
    if (res) {
      message.success('操作成功');
      getEditorList();
    }
  };

  // 停止编辑器
  const stopEditor = async (id: number) => {
    const [res] = await to(stopEditorReq(id));
    if (res) {
      message.success('操作成功');
      getEditorList();
    }
  };

  // 处理删除
  const handleEditorDelete = (record: EditorData) => {
    modalConfirm({
      title: '删除后，该编辑器将不可恢复',
      content: '是否确认删除?',
      onOk: () => {
        deleteEditor(record.id);
      },
    });
  };

  // 创建编辑器
  const createEditor = () => {
    navigate(`/developmentEnvironment/create`);
    setCacheState({
      pagination,
    });
  };

  // 跳转编辑器页面
  const gotoEditorPage = (e: React.MouseEvent, record: EditorData) => {
    e.stopPropagation();
    setSessionStorageItem(editorUrl, record.url);
    navigate(`/developmentEnvironment/editor`);
    setCacheState({
      pagination,
    });
  };

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

  const columns: TableProps<EditorData>['columns'] = [
    {
      title: '编辑器名称',
      dataIndex: 'name',
      key: 'name',
      width: '30%',
      render: (text, record) =>
        record.url ? (
          <a onClick={(e) => gotoEditorPage(e, record)}>{text}</a>
        ) : (
          <span>{text ?? '--'}</span>
        ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: '10%',
      render: EditorStatusCell,
    },
    {
      title: '资源',
      dataIndex: 'computing_resource',
      key: 'computing_resource',
      width: '20%',
      render: CommonTableCell(),
    },
    {
      title: '创建者',
      dataIndex: 'update_by',
      key: 'update_by',
      width: '20%',
      render: CommonTableCell(),
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      key: 'create_time',
      width: '20%',
      render: DateTableCell,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 300,
      key: 'operation',
      render: (_: any, record: EditorData) => (
        <div>
          {record.status === DevEditorStatus.Pending ||
          record.status === DevEditorStatus.Running ? (
            <Button
              type="link"
              size="small"
              key="stop"
              icon={<KFIcon type="icon-tingzhi" />}
              onClick={() => stopEditor(record.id)}
            >
              停止
            </Button>
          ) : (
            <Button
              type="link"
              size="small"
              key="debug"
              icon={<KFIcon type="icon-tiaoshi" />}
              onClick={() => startEditor(record.id)}
            >
              再次调试
            </Button>
          )}
          <ConfigProvider
            theme={{
              token: {
                colorLink: themes['warningColor'],
              },
            }}
          >
            <Button
              type="link"
              size="small"
              key="remove"
              icon={<KFIcon type="icon-shanchu" />}
              onClick={() => handleEditorDelete(record)}
            >
              删除
            </Button>
          </ConfigProvider>
        </div>
      ),
    },
  ];

  return (
    <div className={styles['develop-env']}>
      <div className={styles['develop-env__header']}>
        <Button
          style={{ marginLeft: '20px' }}
          type="default"
          onClick={createEditor}
          icon={<KFIcon type="icon-xinjian2" />}
        >
          创建编辑器
        </Button>
        <Button
          style={{ marginLeft: '20px' }}
          type="default"
          onClick={getEditorList}
          icon={<KFIcon type="icon-shuaxin" />}
        >
          刷新
        </Button>
      </div>
      <div className={classNames('vertical-scroll-table', styles['develop-env__table'])}>
        <Table
          dataSource={tableData}
          columns={columns}
          scroll={{ y: 'calc(100% - 55px)' }}
          pagination={{
            ...pagination,
            total: total,
            showSizeChanger: true,
            showQuickJumper: true,
          }}
          onChange={handleTableChange}
          rowKey="id"
        />
      </div>
    </div>
  );
}

export default EditorList;