@lingxiteam/ebe-utils 0.5.10 → 0.6.1

package/lib/pcpublic/src/components/pcfactory/src/utils/AnalysisCustomDataModal/AnalysisCustomDataModal.tsx

@@ -0,0 +1,568 @@
+import { Button, Card, Upload, Spin, Progress, message, Modal } from 'antd';
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import IconFont from '../../IconFont';
+import { UploadProps } from 'antd/es/upload/interface';
+import { useLocale } from '../hooks/useLocale';
+
+const { Dragger } = Upload;
+
+export interface AnalysisCustomDataModalProps {
+    appId: string;
+    pageId: string;
+    getEngineApis: () => any;
+    forwardRef: any;
+    [key: string]: any;
+}
+
+
+export type OpenParamType = {
+  templateDataObject?: any;
+  onSuccess:(result: any[]) => {close: boolean, status: 'success' | 'fail', message?: string};
+  onFail?: (err: any, message?: string) => void;
+}
+
+export interface AnalysisCustomDataModalHooks {
+  open: (data: OpenParamType) => void;
+}
+
+const prefixCls = 'ued-analysisCustomDataModal';
+
+enum Status {
+    done = 'done',
+    init = 'init',
+    fail = 'fail'
+}
+
+const initInfo = {
+  success: [],
+  fail: [],
+  status: Status.init, // 上传状态,
+  msg: '',
+  // 异步导入的数据
+  fileId: undefined,
+  firstFailMsg: '',
+  successCount: 0,
+  failCount: 0,
+  isAsyncImport: false,
+};
+
+const AnalysisCustomDataModal = React.forwardRef<AnalysisCustomDataModalHooks, AnalysisCustomDataModalProps>((props) => {
+  const {
+    appId,
+    pageId,
+    getEngineApis,
+    forwardRef,
+  } = props;
+
+  const { service: api, saveBlobFile } = getEngineApis?.();
+
+  const { getLocale } = useLocale(getEngineApis?.() || {}) as any;
+  
+  const [visible, setVisible] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const paramsRef = useRef<OpenParamType | undefined>(undefined);
+  const params = paramsRef.current;
+
+  const [uploading, setUploading] = useState<boolean>(false);
+  const [fileList, setFileList] = useState<any[]>([]);
+  const uploadAbortController = useRef<any>();
+  // 上传进度和文件解析进度
+  const [progress, setProgress] = useState<{ upload: number, parse: number }>({
+    upload: 0,
+    parse: 0,
+  });
+  const timeRef = useRef<any>();
+    
+  // 导入的成功和失败列
+  const [importInfo, setImportInfo] = useState<any>(initInfo);
+  const importList = useRef<any>([]);
+    
+  const RESULT_INFO = {
+    warn: {
+      title: getLocale('ExpBusiObjModal.partImportFailTitle', '部分数据导入失败'),
+      icon: 'lcdp-icon-Warning',
+    },
+    success: {
+      title: getLocale('ExpBusiObjModal.importSuccessTitle', '导入成功'),
+      icon: 'lcdp-icon-Success',
+      tips: getLocale('ExpBusiObjModal.importSuccessMsg', '数据导入成功，请选择前往列表查看'),
+    },
+    error: {
+      title: getLocale('ExpBusiObjModal.importFailTitle', '导入失败'),
+      icon: 'lcdp-icon-Error',
+      tips: getLocale('ExpBusiObjModal.importFailMsg', '数据导入失败，请核对以下信息后，再重新提交。'),
+    },
+  };
+      
+      type RESULT_INFO_TYPE = keyof typeof RESULT_INFO;
+   
+    
+      const { successLen, failLen, firstFailMsg } = useMemo(() => {
+        const { isAsyncImport, fail, success, failCount, successCount } = importInfo || {};
+        return {
+          ...importInfo,
+          successLen: isAsyncImport ? successCount : success?.length,
+          failLen: isAsyncImport ? failCount : fail?.length,
+        };
+      }, [importInfo]);
+    
+      // 需要展示上传进度步骤和结果页的（自定义导入业务对象和导入业务对象数据动作）
+      const hasUploadProcess = true;
+    
+      const uploadDisabled = useMemo(
+        () =>
+          loading ||
+          uploading,
+        [loading, uploading]
+      );
+    
+      const open = (options: any) => {
+        setVisible(true);
+        paramsRef.current = options;
+      };
+    
+      const close = () => {
+        setVisible(false);
+        setFileList([]);
+        setImportInfo(initInfo);
+        // 关闭弹窗的时候如果请求还未结束则停止请求
+        if (uploadAbortController.current && typeof uploadAbortController.current?.abort === 'function') {
+          // 终止请求
+          uploadAbortController.current.abort();
+        }
+      };
+    
+      // TODO: 待确认
+      const uploadAction = useMemo(() => {
+        return api.parseSubFormInsts();
+      }, []);
+    
+      const baseUploadProps: UploadProps = {
+        name: 'impFile',
+        action: uploadAction,
+        // @ts-ignore
+        withCredentials: true,
+        // @ts-ignore
+        disabled: uploadDisabled,
+        // @ts-ignore
+        // @ts-ignore
+        accept: '.xls,.xlsx,.csv,.png',
+        listType: 'picture',
+        // @ts-ignore
+        headers: {
+          // @ts-ignore
+          'APP-ID': appId,
+          // @ts-ignore
+          'X-B-TARGET-ID': pageId,
+          // @ts-ignore
+          'X-B-AUTH': 1,
+        },
+        // @ts-ignore
+        maxCount: 1,
+        // @ts-ignore
+        data: {},
+      };
+    
+      /**
+     * @param responseParams 响应失败上下文参数
+     */
+      const handleFail = (responseParams: any) => {
+        // 状态码非200的情况
+        const { message } = responseParams || {};
+        const { success, fail, isAsyncImport } = responseParams?.resultObject || {};
+        const resultMsg = responseParams?.resultMsg || message;
+        if (typeof params?.onFail === 'function') {
+          params.onFail(isAsyncImport ? undefined : fail || responseParams?.resultObject, resultMsg);
+        }
+        setImportInfo({ ...responseParams?.resultObject, msg: resultMsg || getLocale('ExpBusiObjModal.uploadFail', '文件上传失败，请重试！'), status: Status.fail, fail, success });
+      };
+    
+      /**
+       *
+       * @param responseParams 响应成功上下文参数
+       * @param triggerCallback 是否触发回调和关闭弹窗
+       */
+      const handleSuccess = (responseParams: any) => {
+        const { success, fail } = responseParams?.resultObject || {};
+        const { close: closeFlag, status, message } = params?.onSuccess(responseParams?.resultObject) || {};
+        setImportInfo({
+          ...responseParams?.resultObject,
+          status: status === 'success' ? Status.done : Status.fail,
+          msg: message || responseParams?.resultMsg,
+          success: success || responseParams?.resultObject || [],
+          fail,
+        });
+        if (closeFlag) {
+          setTimeout(() => {
+            close();
+          }, 500);
+        }
+      };
+    
+      // 模拟数据处理进度条
+      const mockParseProgress = () => {
+        let percent = 0;
+        let resolve;
+        const update = () => {
+          if (timeRef?.current) {
+            window.clearTimeout(timeRef?.current);
+            timeRef.current = null;
+          }
+          timeRef.current = setTimeout(() => {
+            percent = +(percent + Math.max((100 - percent) / 5, 0.01)).toFixed(2);
+            setProgress((pre: any) => ({ ...pre, parse: percent }));
+            if (percent < 100) {
+              update();
+            }
+          }, 200);
+        };
+        new Promise((res, rej) => {
+          resolve = res;
+          update();
+        }).then((p) => {
+          if (timeRef?.current) {
+            window.clearTimeout(timeRef?.current);
+            timeRef.current = null;
+          }
+          setProgress((pre: any) => ({ ...pre, parse: p }));
+        });
+        return resolve;
+      };
+
+      // 自定义上传方法，若没传response参数，则手动发起上传请求
+      const handleCustomUpload = async (res?: any, list?: any) => {
+        const _fileList = fileList?.length > 0 ? fileList : list;
+        if (!_fileList?.length) {
+          message.warn(getLocale('ExpBusiObjModal.noFile', '无上传文件，请先选择文件'));
+          return;
+        }
+        let response = res;
+        if (!response) {
+          try {
+            setUploading(true);
+            const xhrPromise = new Promise((resolve, reject) => {
+              const xhr = new XMLHttpRequest();
+              const formData = new FormData();
+              const file = _fileList[0];
+              formData.append(baseUploadProps.name || 'file', file);
+              
+              const query = new Blob([JSON.stringify({ pickRows: params?.templateDataObject || [] })], {
+                type: 'application/json',
+              });
+
+              formData.append('query', query);
+
+              importList.current = [];
+              xhr.open('post', baseUploadProps.action as string);
+              Object.keys(baseUploadProps.headers || {}).forEach(c => {
+                xhr.setRequestHeader(c, (baseUploadProps.headers || {})[c]);
+              });
+              // 添加自定义头部(在info.js写入)
+              const { lxRequestHeaders } = window as any;
+              if (lxRequestHeaders) {
+                Object.keys(lxRequestHeaders).forEach((header) => {
+                  xhr.setRequestHeader(header, lxRequestHeaders[header]); // 设置请求头参数
+                });
+              }
+              xhr.withCredentials = true;
+              // 后端解析结束触发回调，终止进度
+              let finishFn: any;
+              xhr.upload.onprogress = ({ loaded }) => {
+                setProgress(pre => ({
+                  ...pre,
+                  upload: +((loaded / file.size) * 100).toFixed(2),
+                }));
+                if (loaded >= file.size) {
+                  finishFn = mockParseProgress();
+                }
+              };
+              xhr.onload = async () => {
+                response = JSON.parse(xhr.responseText || xhr.response);
+                if (typeof finishFn === 'function') {
+                  finishFn(100);
+                }
+                resolve(response);
+                uploadAbortController.current = null;
+              };
+              xhr.ontimeout = () => {
+                xhr.abort();
+                reject();
+                if (typeof finishFn === 'function') {
+                  finishFn(0);
+                }
+                uploadAbortController.current = null;
+              };
+              uploadAbortController.current = {
+                abort: () => {
+                  reject();
+                  xhr.abort();
+                  if (typeof finishFn === 'function') {
+                    finishFn(0);
+                  }
+                },
+              };
+              xhr.send(formData);
+            });
+            await xhrPromise;
+          } finally {
+            // 重置进度条
+            setUploading(false);
+            setProgress({ upload: 0, parse: 0 });
+          }
+        }
+        const { resultCode } = response || {};
+        if (resultCode === '0') {
+          handleSuccess(response);
+        } else if (resultCode && resultCode !== '0') {
+          handleFail(response);
+        }
+      };
+    
+      const uploadProps: UploadProps = {
+        ...baseUploadProps,
+        // @ts-ignore
+        onChange: async (info) => {
+          if (!info.file.status) {
+            return;
+          }
+          setFileList(info.fileList);
+          if (!['uploading', 'removed'].includes(info.file.status) && !loading) {
+            setLoading(true);
+          }
+          if (info.file.status === 'done') {
+            setLoading(false);
+            const { response } = info.file;
+            await handleCustomUpload(response);
+          } else if (info.file.status === 'error') {
+            setLoading(false);
+            message.error(getLocale('ExpBusiObjModal.uploadFail', `${info.file.name} 文件上传失败，请重试！`, { name: info.file.name }));
+          } else if (info.file.status === 'removed') {
+            setLoading(false);
+          }
+        },
+        beforeUpload: (file, list) => {
+          if (!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel', 'text/csv', 'image/png'].includes(file.type)) {
+            message.warn(getLocale('ExpBusiObjModal.validTable', '请上传合法的表格'));
+            return Promise.reject();
+          }
+          if (visible) {
+            // 自定义导入业务对象数据/导入业务对象数据
+            setFileList(list);
+            return false;
+          }
+          return undefined;
+        },
+      };
+
+      const renderResultIcon = (type: RESULT_INFO_TYPE, info?: any) => {
+        const resultInfo = {
+          ...(RESULT_INFO[type] || {}),
+          ...info,
+        };
+        return (
+          <div className="result">
+            <p className="iconbox">
+              <IconFont
+                className="icon"
+                width={60}
+                height={60}
+                iconClass={resultInfo.icon}
+              />
+            </p>
+            <p className="title">
+              {resultInfo.title}
+            </p>
+            <p className="tips">{resultInfo.tips}</p>
+          </div>
+        );
+      };
+
+
+      /** 自定义导入业务对象数据、导入业务对象数据动作
+       * 全部校验通过
+       * - 展示成功，触发成功回调
+       * 部分校验不通过
+       * - 开启部分导入
+       *   - 存在成功
+       *    - 展示部分失败，触发成功回调传入成功列表，允许下载失败原因
+       * - 非部分导入
+       *   - 展示失败，触发失败回调，允许下载失败原因
+       * 全部校验不通过
+       * - resultcode不为0或者接口非200
+       *   - 展示失败，触发失败回调，不下载失败原因
+       * - 接口200
+       *   - 展示失败，触发失败回调，允许下载失败原因
+       */
+      const renderImportResult = () => {
+        if (uploading && fileList[0]) {
+          // 上传中，展示进度
+          return (
+            <Spin spinning={progress.upload >= 100 || true} tip={getLocale('ExpBusiObjModal.dataDealing', '数据处理中...')}>
+              <div className="progress">
+                <div className="progress-item">
+                  {getLocale('fileUpload', '文件上传')}
+                  <Progress percent={progress.upload || 0} />
+                </div>
+              </div>
+            </Spin>
+          );
+        }
+        if (importInfo?.status === Status.fail && !failLen) {
+          // 上传失败
+          return (
+            <>
+              {renderResultIcon('error')}
+              <div className="result-sub">
+                <span className="title-icon">
+                  <IconFont
+                    className="icon"
+                    width={16}
+                    height={16}
+                    iconClass="lcdp-icon-News"
+                  />
+                </span>
+                {importInfo?.msg}
+              </div>
+            </>
+          );
+        }
+        if ([Status.done, Status.fail].includes(importInfo?.status) && failLen) {
+          const successLength = successLen || 0;
+          const failLength = failLen || 0;
+          return (
+            <>
+              {/* 全部校验失败 */}
+              {failLength && successLength === 0 && renderResultIcon('error')}
+              {firstFailMsg && <div className="result-firstFailMsg">{firstFailMsg}...</div>}
+            </>
+          );
+        }
+        if (importInfo?.status === Status.done) {
+          // 导入成功
+          return renderResultIcon('success');
+        }
+        return (
+          <Card
+            title=""
+            size="small"
+            style={{
+              width: '100%',
+            }}
+            className={`${prefixCls}-customCard`}
+            bordered={false}
+          >
+            <div className="title">{getLocale('fileUpload', '文件上传')}</div>
+            <Dragger
+              {...uploadProps}
+              fileList={fileList}
+              style={{ opacity: uploadDisabled ? 0.3 : 1 }}
+            >
+              <p className="ant-upload-drag-icon">
+                <IconFont
+                  className={`${prefixCls}-icon`}
+                  width={48}
+                  height={48}
+                  iconClass="lcdp-icon-cloud-upload"
+                />
+              </p>
+              <p className={`${prefixCls}-text`}>
+                {getLocale('ExpBusiObjModal.dragView', '点击选择文件或拖动文件到此区域进行上传')}
+              </p>
+              <p className={`${prefixCls}-hint`}>{getLocale('ExpBusiObjModal.onlySingleUpload', '仅支持单个文件上传')}</p>
+            </Dragger>
+          </Card>
+        );
+      };
+    
+      const renderCardExtra = () => {
+        return (
+          <Button
+            onClick={
+              async () => {
+                const res = await api.getSubFormWorkBookTemplate({ pickRows: params?.templateDataObject || [] });
+                saveBlobFile({ data: res, fileName: '数据模板.xlsx' });
+              }
+            }
+            type="link"
+            className={`${prefixCls}-downloadTempBtn`}
+          >
+            { getLocale('ExpBusiObjModal.downloadTpl', '下载导入模版') }
+          </Button>
+        );
+      };
+    
+      useImperativeHandle(forwardRef, () => ({
+        open,
+        close,
+      }));
+
+      useEffect(() => {
+        return () => {
+          if (timeRef?.current) {
+            clearTimeout(timeRef?.current);
+          }
+        };
+      }, []);
+    
+    
+      return (
+        <Modal
+          className={`${prefixCls}-customModal`}
+          title={(
+            <>
+              <span className="title">{getLocale('ExpSQLServiceModal.importData', '导入数据')}</span>
+              {renderCardExtra()}
+            </>
+          )}
+          open={visible}
+          destroyOnClose
+          onCancel={close}
+          footer={
+            <>
+              <Button
+                type="default"
+                onClick={() => {
+                  if (uploading) {
+                    if (uploadAbortController.current && typeof uploadAbortController.current?.abort === 'function') {
+                      // 终止请求
+                      uploadAbortController.current.abort();
+                    }
+                  } else {
+                    close();
+                  }
+                }}
+              >
+                {uploading ? getLocale('cancelUpload', '取消上传') : getLocale('close', '关闭')}
+              </Button>
+              {/* 自定义导入业务对象数据、导入业务对象数据 */}
+              {hasUploadProcess && !uploading && !(importInfo?.status === Status.done && (failLen || 0) === 0) && (
+                <Button
+                  type="primary"
+                  onClick={() => {
+                    setProgress({
+                      upload: 0,
+                      parse: 0,
+                    });
+                    if (importInfo?.status === Status.fail || (failLen || 0) > 0) {
+                      setImportInfo(initInfo);
+                    } else {
+                      handleCustomUpload();
+                    }
+                  }}
+                >
+                  {importInfo?.status === Status.fail || (failLen || 0) > 0 ? getLocale('reupload', '重新上传') : getLocale('upload', '上传')}
+                </Button>
+              )}
+            </>
+          }
+          width={588}
+        >
+          <div>
+            {renderImportResult()}
+          </div>
+        </Modal>
+      );
+});
+
+export default AnalysisCustomDataModal;

package/lib/pcpublic/src/components/pcfactory/src/utils/AnalysisCustomDataModal/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../LoaderHelper';
+
+const FormListLoader = Loadable<any, React.ComponentType<any>>({
+  loader: () => import(/* webpackChunkName: "pcfactory-AnalysisCustomDataModal" */ './AnalysisCustomDataModal'),
+  loading: LoadingComponennt,
+});
+
+export type { AnalysisCustomDataModalProps, AnalysisCustomDataModalHooks } from './AnalysisCustomDataModal';
+
+export default FormListLoader;