import-data.tsx 2.58 KB
import React, { useEffect } from 'react';
import { Button } from 'antd';
import { importData, fileTask } from '@/pages/app-view/list/service';

interface ImportDataProps {
  changeNext: any;
  appCode: string;
  funCode: string;
  viewCode: string;
  taskId: string;
  current: number;
  setImportData: any;
  importSuccess: any;
}

const ImportData: React.FC<ImportDataProps> = (props) => {
  const {
    changeNext = () => {},
    taskId,
    appCode,
    funCode,
    viewCode,
    current,
    setImportData,
    importSuccess = () => {},
  } = props;
  const exportData = (taskId: string) => {
    // taskType: UPLOAD || EXPORT
    fileTask(taskId)
      .then((res) => {
        if (res.status === 'PROCESSING') {
          setTimeout(() => {
            exportData(taskId);
          }, 6000);
        } else if (res.status === 'SUCCESS') {
          if (res.finalMsg) {
            res.finalMsg = JSON.parse(res.finalMsg);
          }
          setImportData(res);
          setTimeout(() => {
            changeNext(3);
            importSuccess();
          }, 500);
        }
      })
      .catch(() => {});
  };
  const getCheckData = () => {
    importData(appCode, funCode, viewCode, taskId)
      .then((res: any) => {
        if (!res) {
          return;
        }
        if (res.status === 'PROCESSING') {
          setTimeout(() => {
            exportData(res.taskId);
          }, 3000);
          return;
        } else if (res.status === 'SUCCESS') {
          if (res.finalMsg) {
            res.finalMsg = JSON.parse(res.finalMsg);
          }
          setImportData(res);
          setTimeout(() => {
            changeNext(3);
            importSuccess();
          }, 500);
        }
      })
      .catch(() => {});
  };
  useEffect(() => {
    if (!taskId || current !== 2) {
      return;
    }
    getCheckData();
  }, [current]);

  return (
    <>
      <div className={'qx-import-check'}>
        <div className={'qx-import-check-data'}>
          <img src={require('./img/loading.png')} alt={'导入中'} />
          <div className={'qx-import-check-loading check-describe'}>
            <div>正在对数据进行导入,请等待</div>
            <div className={'dot'}>
              <div className={'dot-item dot1'} />
              <div className={'dot-item dot2'} />
              <div className={'dot-item dot3'} />
            </div>
          </div>
        </div>
      </div>
      <div className={'qx-import-button'}>
        <Button type="primary" disabled onClick={() => changeNext(3)}>
          下一步
        </Button>
      </div>
    </>
  );
};

export default ImportData;