ci4sManagement-cloud/react-ui/src/pages/Mirror/list.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 { CommonTabKeys } from '@/enums';
import { deleteMirrorReq, getMirrorListReq } from '@/services/mirror';
import themes from '@/styles/theme.less';
import { to } from '@/utils/promise';
import { modalConfirm } from '@/utils/ui';
import { useNavigate, useSearchParams } from '@umijs/max';
import {
  Button,
  ConfigProvider,
  Input,
  Table,
  Tabs,
  message,
  type TablePaginationConfig,
  type TableProps,
  type TabsProps,
} from 'antd';
import { type SearchProps } from 'antd/es/input';
import classNames from 'classnames';
import { useEffect, useState } from 'react';
import styles from './list.less';

const mirrorTabItems = [
  {
    key: CommonTabKeys.Public,
    label: '公共镜像',
    icon: <KFIcon type="icon-gonggongjingxiang" />,
  },
  {
    key: CommonTabKeys.Private,
    label: '个人镜像',
    icon: <KFIcon type="icon-zidingyijingxiang" />,
  },
];

export type MirrorData = {
  id: number;
  name: string;
  description: string;
  create_time: string;
};

function MirrorList() {
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  const isPrivate = searchParams.get('isPublic') === 'false';
  const [activeTab, setActiveTab] = useState<string>(
    isPrivate ? CommonTabKeys.Private : CommonTabKeys.Public,
  );
  const [searchText, setSearchText] = useState('');
  const [tableData, setTableData] = useState<MirrorData[]>([]);
  const [total, setTotal] = useState(0);
  const [pagination, setPagination] = useState<TablePaginationConfig>({
    showSizeChanger: true,
    showQuickJumper: true,
    current: 1,
    pageSize: 10,
  });

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

  // 切换 Tab，重置数据
  const hanleTabChange: TabsProps['onChange'] = (value) => {
    setSearchText('');
    setPagination({
      showSizeChanger: true,
      showQuickJumper: true,
      current: 1,
      pageSize: 10,
    });
    setTotal(0);
    setTableData([]);
    setActiveTab(value);
    setSearchParams([['isPublic', value === CommonTabKeys.Public ? 'true' : 'false']], {
      replace: true,
    });
  };
  // 获取镜像列表
  const getMirrorList = async (params?: Record<string, any>) => {
    const reqParams = {
      page: pagination.current! - 1,
      size: pagination.pageSize,
      name: searchText,
      image_type: activeTab === CommonTabKeys.Public ? 1 : 0,
      ...params,
    };
    const [res] = await to(getMirrorListReq(reqParams));
    if (res && res.data) {
      const { content = [], totalElements = 0 } = res.data;
      setTableData(content);
      setTotal(totalElements);
    }
  };

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

  // 搜索
  const onSearch: SearchProps['onSearch'] = (value) => {
    // 带参数是为了点清除时，searchText 更新不及时的问题
    getMirrorList({
      name: value,
    });
  };

  // 查看详情
  const toDetail = (record: MirrorData) => {
    console.log('record', record);
    navigate(`/dataset/mirror/${record.id}?isPublic=${activeTab === CommonTabKeys.Public}`, {
      state: {
        isPublic: activeTab === CommonTabKeys.Public,
      },
    });
  };

  // 处理删除
  const handleMirrorDelete = (record: MirrorData) => {
    modalConfirm({
      title: '删除后，该镜像将不可恢复',
      content: '是否确认删除?',
      onOk: () => {
        deleteMirror(record.id);
      },
    });
  };

  // 创建镜像
  const createMirror = () => {
    navigate(`/dataset/mirror/create`);
  };

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

  const columns: TableProps<MirrorData>['columns'] = [
    {
      title: '镜像名称',
      dataIndex: 'name',
      key: 'name',
      width: '30%',
      render: CommonTableCell,
    },
    {
      title: '版本数据',
      dataIndex: 'version_count',
      key: 'version_count',
      width: 100,
      render: CommonTableCell,
    },
    {
      title: '镜像描述',
      dataIndex: 'description',
      key: 'description',
      render: CommonTableCell,
      ellipsis: true,
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      key: 'create_time',
      width: 200,
      render: DateTableCell,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: activeTab === CommonTabKeys.Private ? 200 : 150,
      key: 'operation',
      render: (_: any, record: MirrorData) => (
        <div>
          <Button
            type="link"
            size="small"
            key="info"
            icon={<KFIcon type="icon-chakanxiangqing" />}
            onClick={() => toDetail(record)}
          >
            查看详情
          </Button>
          {activeTab === CommonTabKeys.Private && (
            <ConfigProvider
              theme={{
                token: {
                  colorLink: themes['warningColor'],
                },
              }}
            >
              <Button
                type="link"
                size="small"
                key="remove"
                icon={<KFIcon type="icon-shanchu" />}
                onClick={() => handleMirrorDelete(record)}
              >
                删除
              </Button>
            </ConfigProvider>
          )}
        </div>
      ),
    },
  ];

  return (
    <div className={styles['mirror-list']}>
      <div className={styles['mirror-list__tabs-container']}>
        <Tabs
          activeKey={activeTab}
          items={mirrorTabItems}
          onChange={hanleTabChange}
          className={styles['model-tabs']}
        />
      </div>
      <div className={styles['mirror-list__content']}>
        <div className={styles['mirror-list__content__filter']}>
          <Input.Search
            placeholder="按数据集名称筛选"
            allowClear
            onSearch={onSearch}
            onChange={(e) => setSearchText(e.target.value)}
            style={{ width: 300 }}
            value={searchText}
          />
          {activeTab === CommonTabKeys.Private && (
            <Button
              style={{ marginLeft: '20px' }}
              type="default"
              onClick={createMirror}
              icon={<KFIcon type="icon-xinjian2" />}
            >
              制作镜像
            </Button>
          )}
          <Button
            style={{ marginRight: 0, marginLeft: 'auto' }}
            type="default"
            onClick={getMirrorList}
            icon={<KFIcon type="icon-shuaxin" />}
          >
            刷新
          </Button>
        </div>
        <div className={classNames('vertical-scroll-table', styles['mirror-list__content__table'])}>
          <Table
            dataSource={tableData}
            columns={columns}
            scroll={{ y: 'calc(100% - 55px)' }}
            pagination={{ ...pagination, total: total }}
            onChange={handleTableChange}
            rowKey="id"
          />
        </div>
      </div>
    </div>
  );
}

export default MirrorList;