ci4sManagement-cloud/react-ui/src/pages/Model/modelIntro.jsx

import { getAccessToken } from '@/access';
import KFIcon from '@/components/KFIcon';
import KFModal from '@/components/KFModal';
import {
  addModelsVersionDetail,
  deleteModelVersion,
  getModelById,
  getModelVersionIdList,
  getModelVersionsById,
} from '@/services/dataset/index.js';
import { downLoadZip } from '@/utils/downloadfile';
import { modalConfirm } from '@/utils/ui';
import { UploadOutlined } from '@ant-design/icons';
import { useParams, useSearchParams } from '@umijs/max';
import { Button, Form, Input, Select, Table, Tabs, Upload, message } from 'antd';
import moment from 'moment';
import { useEffect, useRef, useState } from 'react';
import Styles from './index.less';
const { Search } = Input;
const { TabPane } = Tabs;

const Dataset = () => {
  const props = {
    action: '/api/mmp/models/upload',
    // headers: {
    // 'X-Requested-With': null
    // },
    headers: {
      Authorization: getAccessToken(),
      'X-Requested-With': null,
    },
    onChange({ file, fileList }) {
      if (file.status !== 'uploading') {
        console.log(file, fileList);
        setFormList(
          fileList.map((item) => {
            return {
              ...form.getFieldsValue(),
              models_id: locationParams.id,
              file_name: item.response.code === 200 ? item.response.data[0].fileName : null,
              file_size: item.response.code === 200 ? item.response.data[0].fileSize : null,
              url: item.response.code === 200 ? item.response.data[0].url : null,
            };
          }),
        );
      }
    },
    defaultFileList: [],
  };
  const [form] = Form.useForm();
  const [formList, setFormList] = useState([]);
  const [dialogTitle, setDialogTitle] = useState('新建版本');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [datasetDetailObj, setDatasetDetailObj] = useState({});
  const [version, setVersion] = useState(null);
  const [versionList, setVersionList] = useState([]);
  const locationParams = useParams(); //新版本获取路由参数接口
  const [searchParams] = useSearchParams();
  console.log(locationParams);
  const [wordList, setWordList] = useState([]);
  const [uuid, setUuid] = useState(Date.now());
  const isPublic = searchParams.get('isPublic') === 'true';
  const getModelByDetail = () => {
    getModelById(locationParams.id).then((ret) => {
      console.log(ret);
      setDatasetDetailObj(ret.data);
    });
  };
  const getModelVersionsList = () => {
    getModelVersionsById(locationParams.id).then((ret) => {
      console.log(ret);
      if (ret && ret.data && ret.data.length > 0) {
        setVersionList(
          ret.data.map((item) => {
            return {
              label: item,
              value: item,
            };
          }),
        );
        setVersion(ret.data[0]);
        getModelVersions({ version: ret.data[0], models_id: locationParams.id });
      } else {
        setVersion(null);
        setWordList([]);
      }
    });
  };
  useEffect(() => {
    getModelByDetail();
    getModelVersionsList();
    return () => {};
  }, []);
  const showModal = () => {
    form.resetFields();
    form.setFieldsValue({ name: datasetDetailObj.name });

    setDialogTitle('创建新版本');
    setUuid(Date.now());
    setIsModalOpen(true);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const deleteDataset = () => {
    modalConfirm({
      title: '删除后，该版本将不可恢复',
      content: '是否确认删除?',
      okText: '确认',
      cancelText: '取消',

      onOk: () => {
        deleteModelVersion({ models_id: locationParams.id, version }).then((ret) => {
          getModelVersionsList();
          message.success('删除成功');
        });
      },
    });
  };
  const onFinish = () => {
    addModelsVersionDetail(formList).then((ret) => {
      getModelVersionsList();
      setIsModalOpen(false);
      message.success('创建成功');
    });
  };
  const getModelVersions = (params) => {
    getModelVersionIdList(params).then((ret) => {
      setWordList(ret?.data?.content ?? []);
    });
  };
  const handleExport = async () => {
    const hide = message.loading('正在下载');
    hide();
    downLoadZip(`/api/mmp/models/downloadAllFiles`, { models_id: locationParams.id, version });
  };
  const downloadAlone = (e, record) => {
    console.log(record);
    const hide = message.loading('正在下载');
    hide();
    downLoadZip(`/api/mmp/models/download_model/${record.id}`);
  };
  const handleChange = (value) => {
    console.log(value);
    if (value) {
      getModelVersions({ version: value, models_id: locationParams.id });
      setVersion(value);
    } else {
      setVersion('');
    }
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 80,
      render(text, record, index) {
        return <span>{(pageOption.current.page - 1) * 10 + index + 1}</span>;
      },
      // render: (text, record, index) =>  `${((curPage-1)*10)+(index+1)}`,
    },
    {
      title: '文件名称',
      dataIndex: 'file_name',
      key: 'file_name',
      render: (text, record) => <a onClick={(e) => downloadAlone(e, record)}>{text}</a>,
    },
    {
      title: '版本号',
      dataIndex: 'version',
      key: 'version',
    },
    {
      title: '文件大小',
      dataIndex: 'file_size',
      key: 'file_size',
    },
    {
      title: '更新时间',
      dataIndex: 'update_time',
      key: 'update_time',
      render: (text) => <span>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</span>,
    },
    {
      title: '操作',
      dataIndex: 'option',
      width: '100px',
      key: 'option',
      render: (_, record) => [
        <Button
          type="link"
          size="small"
          key="download"
          icon={<KFIcon type="icon-xiazai" />}
          onClick={(e) => downloadAlone(e, record)}
        >
          下载
        </Button>,
      ],
    },
  ];
  const pageOption = useRef({ page: 1, size: 10 });

  // 当前页面切换
  const paginationChange = async (current, size) => {
    console.log('page', current, size);
    pageOption.current = {
      page: current,
      size: size,
    };
    // getList()
  };
  return (
    <div className={Styles.datasetBox}>
      <div className={Styles.datasetIntroTopBox}>
        <span style={{ color: '#1d1d20', fontSize: '20px' }}>{datasetDetailObj.name}</span>
        <div className={Styles.smallTagBox}>
          <div className={Styles.tagItem}>模型 id：{datasetDetailObj.id}</div>
          <div className={Styles.tagItem}>{datasetDetailObj.model_type_name || '...'}</div>
          <div className={Styles.tagItem}>{datasetDetailObj.model_tag_name || '...'}</div>
        </div>
      </div>
      <div className={Styles.datasetIntroCneterBox}>
        <Tabs defaultActiveKey="1">
          <TabPane tab="模型简介" key="1">
            <div className={Styles.datasetIntroTitle}>简介</div>
            <div className={Styles.datasetIntroText}>{datasetDetailObj.description}</div>
          </TabPane>
          <TabPane tab="模型文件/版本" key="2">
            <div className={Styles.dataListBox}>
              <div>模型列表</div>
              <div className={Styles.dataButtonList}>
                <div
                  style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
                >
                  <span style={{ marginRight: '10px' }}>版本号：</span>
                  <Select
                    placeholder="请选择版本号"
                    style={{
                      width: 160,
                    }}
                    value={version}
                    allowClear
                    onChange={handleChange}
                    options={versionList}
                  />
                  <Button
                    type="default"
                    className={Styles.plusButton}
                    onClick={showModal}
                    icon={<KFIcon type="icon-xinjian2" />}
                  >
                    创建新版本
                  </Button>
                </div>
                <div
                  style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
                >
                  {!isPublic && (
                    <Button
                      type="default"
                      className={Styles.plusButton}
                      style={{ margin: '0 20px 0 0' }}
                      onClick={deleteDataset}
                      icon={<KFIcon type="icon-shanchu" />}
                    >
                      删除
                    </Button>
                  )}

                  <Button
                    type="default"
                    className={Styles.plusButton}
                    disabled={!version}
                    style={{ margin: '0 20px 0 0' }}
                    onClick={handleExport}
                    icon={<KFIcon type="icon-xiazai" />}
                  >
                    下载
                  </Button>
                </div>
              </div>
              <div style={{ marginBottom: '10px', fontSize: '14px' }}>
                {wordList.length > 0 && wordList[0].description
                  ? '版本描述：' + wordList[0].description
                  : null}
              </div>
              <Table columns={columns} dataSource={wordList} pagination={false} rowKey="id" />
            </div>
          </TabPane>
        </Tabs>
      </div>
      <KFModal
        title={dialogTitle}
        image={require('@/assets/img/create-experiment.png')}
        width={825}
        open={isModalOpen}
        okButtonProps={{
          htmlType: 'submit',
          form: 'form',
        }}
        onCancel={handleCancel}
      >
        <Form
          name="form"
          form={form}
          layout="vertical"
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="模型名称"
            name="name"
            rules={[
              {
                required: true,
                message: '请输入模型名称',
              },
            ]}
          >
            <Input disabled placeholder="请输入模型名称" />
          </Form.Item>
          <Form.Item
            label="模型版本"
            name="version"
            rules={[
              {
                required: true,
                message: '请输入模型版本',
              },
            ]}
          >
            <Input placeholder="请输入模型版本" maxLength={64} showCount allowClear />
          </Form.Item>
          <Form.Item
            label="版本描述"
            name="description"
            rules={[
              {
                required: true,
                message: '请输入版本描述',
              },
            ]}
          >
            <Input.TextArea
              placeholder="请输入版本描述"
              autoSize={{ minRows: 2, maxRows: 6 }}
              maxLength={256}
              showCount
              allowClear
            />
          </Form.Item>
          <Form.Item
            label="模型文件"
            name="dataset_version_vos"
            rules={[
              {
                required: true,
                message: '请上传模型文件',
              },
            ]}
          >
            <Upload {...props} data={{ uuid: uuid }}>
              <Button
                style={{
                  fontSize: '14px',
                  border: '1px solid',
                  borderColor: '#1664ff',
                  background: '#fff',
                }}
                icon={<UploadOutlined style={{ color: '#1664ff' }} />}
              >
                上传文件
              </Button>
            </Upload>
          </Form.Item>
        </Form>
      </KFModal>
    </div>
  );
};
export default Dataset;