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

import clock from '@/assets/img/clock.png';
import creatByImg from '@/assets/img/creatBy.png';
import deleteIcon from '@/assets/img/delete-icon.png';
import { deleteDataset, getAssetIcon, getDatasetList } from '@/services/dataset/index.js';
import { modalConfirm } from '@/utils/ui';
import { Form, Input, Pagination } from 'antd';
import moment from 'moment';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Styles from './index.less';
const { Search } = Input;
const leftdataList = [1, 2, 3];

const PublicData = () => {
  const [queryFlow, setQueryFlow] = useState({
    page: 0,
    size: 10,
    name: null,
    available_range: 1,
  });
  const [iconParams, setIconParams] = useState({
    name: null,
    page: 0,
    size: 10000,
  });
  const navgite = useNavigate();
  const [datasetTypeList, setDatasetTypeList] = useState([]);
  const [datasetDirectionList, setDatasetDirectionList] = useState([]);
  const [activeType, setActiveType] = useState(null);
  const [activeTag, setActiveTag] = useState(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [datasetList, setDatasetList] = useState([]);
  const [total, setTotal] = useState(0);
  const [form] = Form.useForm();
  const [dialogTitle, setDialogTitle] = useState('新建数据');
  const getDatasetlist = (queryFlow) => {
    getDatasetList(queryFlow).then((ret) => {
      console.log(ret);
      if (ret.code == 200) {
        setDatasetList(ret.data.content);
        setTotal(ret.data.totalElements);
      }
    });
  };
  const onSearch = (values) => {
    console.log(values);
    getAssetIconList({ ...iconParams, name: values });
  };
  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 nameSearch = (values) => {
    console.log(values);
    getDatasetlist({ ...queryFlow, name: values });
  };
  const showModal = () => {
    form.resetFields();
    setDialogTitle('新建数据集');
    setIsModalOpen(true);
  };
  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 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(() => {
    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,
                }}
              />
            </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>
    </>
  );
};
export default PublicData;