ci4sManagement-cloud/react-ui/src/pages/Dataset/components/ResourceVersion/index.tsx

import KFIcon from '@/components/KFIcon';
import {
  ResourceData,
  ResourceFileData,
  ResourceType,
  resourceConfig,
} from '@/pages/Dataset/config';
import { downLoadZip } from '@/utils/downloadfile';
import tableCellRender, { TableCellValueType } from '@/utils/table';
import { Button, Flex, Table, TableProps } from 'antd';
import styles from './index.less';

type ResourceVersionProps = {
  resourceType: ResourceType;
  info: ResourceData;
};
function ResourceVersion({ resourceType, info }: ResourceVersionProps) {
  const config = resourceConfig[resourceType];
  const filePropKey = config.filePropKey as keyof ResourceData;
  const fileList = (info[filePropKey] ?? []) as ResourceFileData[];
  fileList.forEach((item) => (item.update_time = info.update_time));

  // 全部导出
  const handleExport = async () => {
    const url = config.downloadAllAction;
    downLoadZip(url, {
      name: info.name,
      id: info.id,
      version: info.version,
      identifier: info.identifier,
    });
  };

  // 单个导出
  const downloadAlone = async (record: ResourceFileData) => {
    const url = config.downloadSingleAction;
    downLoadZip(url, { url: record.url });
  };

  const columns: TableProps<ResourceFileData>['columns'] = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 80,
      render: tableCellRender(false, TableCellValueType.Index),
    },
    {
      title: '文件名称',
      dataIndex: 'file_name',
      key: 'file_name',
      render: tableCellRender(false, TableCellValueType.Link, {
        onClick: downloadAlone,
      }),
    },
    {
      title: '文件大小',
      dataIndex: 'file_size',
      key: 'file_size',
      render: tableCellRender(),
    },
    {
      title: '更新时间',
      dataIndex: 'update_time',
      key: 'update_time',
      render: tableCellRender(false, TableCellValueType.Date),
    },
    {
      title: '操作',
      dataIndex: 'option',
      width: 160,
      key: 'option',
      render: (_: any, record: ResourceFileData) => [
        <Button
          type="link"
          size="small"
          key="download"
          icon={<KFIcon type="icon-xiazai" />}
          onClick={() => downloadAlone(record)}
        >
          下载
        </Button>,
      ],
    },
  ];

  return (
    <div className={styles['resource-version']}>
      <Flex justify="space-between" align="center" style={{ marginBottom: '20px' }}>
        <Flex align="center">
          <Button
            type="default"
            disabled={fileList.length === 0}
            onClick={handleExport}
            icon={<KFIcon type="icon-xiazai" />}
          >
            下载
          </Button>
        </Flex>
      </Flex>
      <Table columns={columns} dataSource={fileList} pagination={false} rowKey="url" />
    </div>
  );
}

export default ResourceVersion;