ci4sManagement-cloud/react-ui/src/pages/Dataset/personalData.jsx

import { getAccessToken } from '@/access';
import clock from '@/assets/img/clock.png';
import creatByImg from '@/assets/img/creatBy.png';
import deleteIcon from '@/assets/img/delete-icon.png';
import KFIcon from '@/components/KFIcon';
import {
  addDatesetAndVesion,
  deleteDataset,
  getAssetIcon,
  getDatasetList,
} from '@/services/dataset/index.js';
import { getDictSelectOption } from '@/services/system/dict';
import { modalConfirm } from '@/utils/ui';
import { UploadOutlined } from '@ant-design/icons';
import { Button, Form, Input, Modal, Pagination, Radio, Select, Upload } from 'antd';
import moment from 'moment';
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';

import './index.less';
import Styles from './index.less';
const { Search } = Input;
const leftdataList = [1, 2, 3];

const PublicData = (React.FC = () => {
  const props = {
    action: '/api/mmp/dataset/upload',
    // headers: {
    // 'X-Requested-With': null
    // },
    headers: {
      Authorization: getAccessToken(),
      'X-Requested-With': null,
    },
    onChange({ file, fileList }) {
      if (file.status !== 'uploading') {
        console.log(file, fileList);
        form.setFieldsValue({
          dataset_version_vos: fileList.map((item) => {
            const data = item.response.data[0];
            return {
              file_name: data.fileName,
              file_size: data.fileSize,
              url: data.url,
            };
          }),
        });
      }
    },
    defaultFileList: [],
  };
  const [queryFlow, setQueryFlow] = useState({
    page: 0,
    size: 20,
    name: null,
    available_range: 0,
  });
  const [iconParams, setIconParams] = useState({
    name: null,
    page: 0,
    size: 10000,
  });
  const [activeType, setActiveType] = useState(null);
  const [activeTag, setActiveTag] = useState(null);
  const [datasetTypeList, setDatasetTypeList] = useState([]);
  const [datasetDirectionList, setDatasetDirectionList] = useState([]);
  const navgite = useNavigate();
  const [clusterOptions, setClusterOptions] = useState([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [datasetList, setDatasetList] = useState([]);
  const [total, setTotal] = useState(0);
  const [form] = Form.useForm();
  const [dialogTitle, setDialogTitle] = useState('新建数据');
  const [uuid, setUuid] = useState(Date.now());
  const getDatasetlist = (queryFlow) => {
    getDatasetList(queryFlow).then((ret) => {
      console.log(ret);
      if (ret.code == 200) {
        setDatasetList(ret.data.content);
        setTotal(ret.data.totalElements);
      }
    });
  };

  const showModal = () => {
    form.resetFields();
    setDialogTitle('新建数据集');
    setUuid(Date.now());
    setIsModalOpen(true);
  };
  const getAssetIconList = (params) => {
    getAssetIcon(params).then((ret) => {
      console.log(ret);
      if (ret.code == 200 && ret.data.content && ret.data.content.length > 0) {
        setDatasetTypeList(ret.data.content.filter((item) => item.category_id == 1));
        setDatasetDirectionList(ret.data.content.filter((item) => item.category_id == 2));
      } else {
        setDatasetTypeList([]);
        setDatasetDirectionList([]);
      }
    });
  };
  const onSearch = (values) => {
    console.log(values);
    getAssetIconList({ ...iconParams, name: values });
  };
  const nameSearch = (values) => {
    console.log(values);
    getDatasetlist({ ...queryFlow, name: values });
  };
  const handleOk = () => {
    console.log(1111);
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const chooseDatasetType = (val, item) => {
    console.log(val, item);
    if (item.path == queryFlow.data_type) {
      setActiveType('');
      setQueryFlow({ ...queryFlow, data_type: null });
      getDatasetlist({ ...queryFlow, data_type: null });
    } else {
      setActiveType(item.path);
      setQueryFlow({ ...queryFlow, data_type: item.path });
      getDatasetlist({ ...queryFlow, data_type: item.path });
    }
    // setQueryFlow({...queryFlow,data_type:item.path},()=>{
    //   getDatasetlist()
    // })
  };
  const chooseDatasetTag = (val, item) => {
    console.log(val, item);
    if (item.path == queryFlow.data_tag) {
      setActiveTag('');
      setQueryFlow({ ...queryFlow, data_tag: null });
      getDatasetlist({ ...queryFlow, data_tag: null });
    } else {
      setActiveTag(item.path);
      setQueryFlow({ ...queryFlow, data_tag: item.path });
      getDatasetlist({ ...queryFlow, data_tag: item.path });
    }
    // setQueryFlow({...queryFlow,data_type:item.path},()=>{
    //   getDatasetlist()
    // })
  };
  const onFinish = (values) => {
    addDatesetAndVesion(values).then((ret) => {
      console.log(ret);
      setIsModalOpen(false);
      getDatasetlist(queryFlow);
    });
  };
  const routeToIntro = (e, record) => {
    e.stopPropagation();
    console.log(record);
    navgite({ pathname: `/dataset/datasetIntro/${record.id}` });
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const onPageChange = (pageNum, pageSize) => {
    console.log(pageNum, pageSize);
    setQueryFlow({ ...queryFlow, page: pageNum - 1, size: pageSize });
    getDatasetlist({ ...queryFlow, page: pageNum - 1, size: pageSize });
  };
  useEffect(() => {
    getDictSelectOption('available_cluster').then((data) => {
      setClusterOptions(data);
    });
    getAssetIconList(iconParams);
    getDatasetlist(queryFlow);
    return () => {};
  }, []);
  return (
    <>
      <div className={Styles.datasetCneterBox}>
        <div className={Styles.datasetCneterLeftBox}>
          <div className={Styles.leftContentBox}>
            <Search
              placeholder="搜索"
              allowClear
              onSearch={onSearch}
              style={{
                width: 300,
                marginBottom: '15px',
              }}
            />
            <div className={Styles.itemTitle}>分类</div>
            <div className={Styles.itemBox}>
              {datasetTypeList && datasetTypeList.length > 0
                ? datasetTypeList.map((item) => {
                    return (
                      <div>
                        <div
                          className={[
                            Styles.messageBox,
                            item.path === activeType ? Styles.active : null,
                          ].join(' ')}
                          onClick={(e) => {
                            chooseDatasetType(e, item);
                          }}
                        >
                          <img
                            className={Styles.ptIcon}
                            style={{ width: '22px' }}
                            src={`/assets/images/dataset/${item.path}.png`}
                            alt=""
                          />
                          <img
                            className={Styles.hoverIcon}
                            style={{ width: '22px' }}
                            src={`/assets/images/dataset/${item.path}-hover.png`}
                            alt=""
                          />
                          <span className={Styles.messageText}>{item.name}</span>
                        </div>
                      </div>
                    );
                  })
                : ''}
            </div>
            <div className={Styles.itemTitle}>研究方向/应用领域</div>
            <div className={Styles.itemBox}>
              {datasetDirectionList && datasetDirectionList.length > 0
                ? datasetDirectionList.map((item) => {
                    return (
                      <div>
                        <div
                          className={[
                            Styles.messageBox,
                            item.path === activeTag ? Styles.active : null,
                          ].join(' ')}
                          onClick={(e) => {
                            chooseDatasetTag(e, item);
                          }}
                        >
                          <img
                            className={Styles.ptIcon}
                            style={{ width: '22px' }}
                            src={`/assets/images/dataset/${item.path}.png`}
                            alt=""
                          />
                          <img
                            className={Styles.hoverIcon}
                            style={{ width: '22px' }}
                            src={`/assets/images/dataset/${item.path}-hover.png`}
                            alt=""
                          />
                          <span className={Styles.messageText}>{item.name}</span>
                        </div>
                      </div>
                    );
                  })
                : ''}
            </div>
          </div>
        </div>
        <div className={Styles.datasetCneterRightBox}>
          <div className={Styles.dataSource}>
            <span>数据总数：{total}个</span>
            <div>
              <Search
                placeholder="按数据名称筛选"
                allowClear
                onSearch={nameSearch}
                style={{
                  width: 300,
                }}
              />
              <Button
                type="default"
                style={{ marginLeft: '20px' }}
                onClick={showModal}
                icon={<KFIcon type="icon-xinjian2" />}
              >
                新建数据集
              </Button>
            </div>
          </div>
          <div className={Styles.dataContent}>
            {datasetList && datasetList.length > 0
              ? datasetList.map((item) => {
                  return (
                    <div className={Styles.dataItem} onClick={(e) => routeToIntro(e, item)}>
                      <span className={Styles.itemText}>{item.name}</span>
                      <img
                        onClick={(e) => {
                          e.stopPropagation();
                          modalConfirm({
                            title: '确定删除该条数据集实例吗？',
                            onOk: () => {
                              deleteDataset(item.id).then((ret) => {
                                if (ret.code === 200) {
                                  message.success('删除成功');
                                  getModelLists(queryFlow);
                                } else {
                                  message.error(ret.msg);
                                }
                              });
                            },
                          });
                        }}
                        className={Styles.dropdown}
                        style={{ width: '17px', marginRight: '6px' }}
                        src={deleteIcon}
                        alt=""
                      />
                      <div className={Styles.itemDescripition}>{item.description}</div>

                      <div className={Styles.itemTime}>
                        <img
                          style={{ width: '17px', marginRight: '6px' }}
                          src={creatByImg}
                          alt=""
                        />
                        <span>{item.create_by}</span>
                      </div>
                      <div className={Styles.itemIcon}>
                        <img style={{ width: '12px', marginRight: '5px' }} src={clock} alt="" />
                        <span>最近更新: {moment(item.update_time).format('YYYY-MM-DD')}</span>
                      </div>
                    </div>
                  );
                })
              : ''}
            {/* <Select.Option value="demo">Demo</Select.Option> */}
          </div>
          <Pagination
            total={total}
            showSizeChanger
            defaultPageSize={20}
            pageSizeOptions={[20, 40, 60, 80, 100]}
            showQuickJumper
            onChange={onPageChange}
          />
        </div>
      </div>
      <Modal
        title={
          <div style={{ display: 'flex', alignItems: 'center', fontWeight: 500 }}>
            <img
              style={{ width: '20px', marginRight: '10px' }}
              src={`/assets/images/pipeline-edit-icon.png`}
              alt=""
            />
            {dialogTitle}
          </div>
        }
        open={isModalOpen}
        className={Styles.modal}
        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"
            required
            rules={[
              {
                required: true,
                message: '请输入数据名称e!',
              },
            ]}
          >
            <Input placeholder="请输入数据名称" showCount maxLength={64} />
          </Form.Item>
          <Form.Item
            label="数据集版本"
            name="version"
            rules={[
              {
                required: true,
                message: '请输入数据集版本!',
              },
            ]}
          >
            <Input placeholder="请输入数据集版本" showCount maxLength={64} />
          </Form.Item>
          <Form.Item
            label="数据集分类"
            name="data_type"
            rules={
              [
                //   {
                //     required: true,
                //     message: 'Please input your username!',
                //   },
              ]
            }
          >
            <Select
              allowClear
              placeholder="请选择数据集分类"
              options={datasetTypeList.map((item) => {
                return { value: item.id, label: item.name };
              })}
            />
          </Form.Item>
          <Form.Item
            label="研究方向/应用领域"
            name="data_tag"
            rules={
              [
                //   {
                //     required: true,
                //     message: 'Please input your username!',
                //   },
              ]
            }
          >
            <Select
              allowClear
              placeholder="请选择研究方向/应用领域"
              options={datasetDirectionList.map((item) => {
                return { value: item.id, label: item.name };
              })}
            />
          </Form.Item>
          <Form.Item label="集群版本" name="available_cluster">
            <Select allowClear placeholder="请选择集群版本" options={clusterOptions} />
          </Form.Item>
          <Form.Item
            label="数据简介"
            name="description"
            rules={
              [
                //   {
                //     required: true,
                //     message: 'Please input your username!',
                //   },
              ]
            }
          >
            <Input placeholder="请输入数据简介" showCount maxLength={256} />
          </Form.Item>
          <Form.Item label="选择流水线" name="range">
            <Radio.Group>
              <Radio value="0">仅自己可见</Radio>
              <Radio value="1">工作空间可见</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="数据文件" name="dataset_version_vos">
            <Upload {...props} data={{ uuid: uuid }} accept=".zip,.tgz">
              <Button
                style={{
                  fontSize: '14px',
                  border: '1px solid',
                  borderColor: '#1664ff',
                  background: '#fff',
                }}
                icon={<UploadOutlined style={{ color: '#1664ff', fontSize: '14px' }} />}
              >
                上传文件
              </Button>
            </Upload>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
});
export default PublicData;