@lingxiteam/ebe-utils 0.5.0 → 0.5.2

package/lib/public/src/components/pcfactory/src/Upload/Upload.tsx

@@ -0,0 +1,740 @@
+import { InboxOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Button, message, Modal, Radio, Upload } from 'antd';
+import type { UploadProps } from 'antd/lib/upload';
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import DownloadProgress from '../StdUpload/DownloadProgress';
+import { FormFields, getFieldsProps } from '../utils';
+import { createRandomStr, getAfterString } from '../utils/common';
+import { useLocale } from '../utils/hooks/useLocale';
+import renderReadOnly from '../utils/renderReadOnly';
+
+const { Dragger } = Upload;
+
+const UPLOAD_WRAPPER_CLASSNAME = 'ued-upload-wrap';
+
+interface FormUploadProps {
+  onChange: (list?: any) => void;
+  onFinishUpload?: (file: any) => void;
+  onListenDownloading?: (file: File) => void;
+  onFileNameClick?: (file: any) => void;
+  draggable?: boolean;
+  acceptExtension?: UploadProps['accept'];
+  value?: any;
+  disabled?: boolean;
+  readOnly?: boolean;
+  precheckService?: any;
+  numberLimit?: number;
+  downloadable?: boolean;
+  fileNameEncode?: boolean;
+  isWatermark?: boolean;
+  optionalFile?: boolean;
+  // accept?: any;
+  action?: string;
+  getSimpleFileList?: any;
+  singleFileMode?: boolean;
+  uploadTimeout?: number;
+  appId: string;
+  pageId: string;
+  showUploadList?: any;
+  columns?: any;
+  acceptType?: any;
+  getEngineApis?: any;
+}
+
+const FormUpload: React.FC<FormUploadProps> = forwardRef((props, ref) => {
+  const {
+    onChange,
+    onFinishUpload,
+    onListenDownloading,
+    onFileNameClick,
+    children,
+    draggable,
+    // accept,
+    acceptExtension,
+    getSimpleFileList,
+    value,
+    disabled,
+    readOnly,
+    singleFileMode,
+    precheckService,
+    numberLimit = 0,
+    downloadable = true,
+    fileNameEncode = false,
+    isWatermark = false,
+    optionalFile = false,
+    appId,
+    uploadTimeout = 30000,
+    columns,
+    acceptType,
+    getEngineApis,
+    ...restProps
+  } = props;
+
+  const engineApis = getEngineApis?.() || {};
+  const { getLocale } = useLocale(engineApis);
+
+  const { api = '' } = columns || {};
+  const [action, setAction] = useState<any>(api);
+  useEffect(() => {
+    if (api) {
+      setAction(api);
+    } else {
+      (async () => {
+        setAction(engineApis?.service?.uploadSingleFile);
+      })();
+    }
+  }, [api]);
+
+  const defaultShowUploadList = {
+    showRemoveIcon: true,
+    showDownloadIcon: downloadable,
+  };
+
+  const [fileList, setFileList] = useState<any[]>([]);
+  const [showUploadList, setShowUploadList] = useState<any>(
+    props.showUploadList === false ? false : defaultShowUploadList,
+  ); // showUploadList 默认为null
+  const [forbidden] = useState(null);
+  const [storeArr, setStoreArr] = useState<any[]>([]);
+  const [optionalVisible, setOptionalVisible] = useState<boolean>(false);
+  const [okLoading, setOkLoading] = useState<boolean>(false);
+  const [downloadWay, setdDownloadWay] = useState<string>('1');
+  const [curFile, setCurFile] = useState<any>();
+  const [downloadProVisible, setDownloadProVisible] = useState<any>({});
+  const progressRef = useRef<any>({});
+  const handleRemoveCallback = useRef<any>();
+
+  const handleRemove = async (file: { uid: any }, isRefresh?: any) => {
+    if (singleFileMode || isRefresh) {
+      const restFileList = fileList.filter((f) => f.uid !== file.uid);
+      setFileList(restFileList);
+      if (singleFileMode) {
+        restFileList.length === 0 ? onChange(null) : onChange(restFileList);
+      }
+    }
+  };
+  handleRemoveCallback.current = handleRemove;
+
+  const previewFile = async (fileId: any) => {
+    if (typeof engineApis?.BannerModal?.open === 'function') {
+      let fileIndex: number = 0;
+      const fileData = fileList?.map((f, i) => {
+        const { response } = f;
+        const { resultObject } = response || {};
+        if (resultObject?.fileId === fileId) {
+          fileIndex = i;
+        }
+        return {
+          appId,
+          fileId: resultObject?.fileId,
+          pageId: props.pageId,
+          downloadClick: handleDownload,
+          showDownLoad: !!showUploadList?.showDownloadIcon,
+          showDelete: !!showUploadList?.showRemoveIcon,
+          deleteClick: (f: any) => {
+            // 避免因闭包问题导致上传列表删除被旧fileList数据覆盖
+            if (typeof handleRemoveCallback?.current === 'function') {
+              handleRemoveCallback?.current(f, true);
+            }
+          },
+          file: {
+            ...f,
+            ...resultObject,
+          },
+        };
+      });
+      engineApis.BannerModal.open({
+        fileIndex,
+        fileList: fileData,
+      });
+    } else if (typeof engineApis?.previewFile === 'function') {
+      try {
+        engineApis.previewFile({ fileId });
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  };
+
+  // 文件名为全路径时，拆分出实际文件名
+  const handleFileName = (_fileName: string) =>
+    _fileName ? _fileName.split('\\').pop() : _fileName;
+
+  useEffect(() => {
+    if (
+      value &&
+      value !== '[]' &&
+      value !== '[null]' &&
+      value !== '[{}]' &&
+      value !== undefined
+    ) {
+      try {
+        let fileName = null;
+        if (
+          singleFileMode &&
+          value &&
+          Number(value).toString() !== 'NaN' &&
+          !storeArr.includes(`${value}`)
+        ) {
+          engineApis?.service
+            ?.qryDownloadFileInfo({ fileId: value })
+            .then((res: any) => {
+              setStoreArr([...storeArr, `${value}`]);
+              fileName = res?.fileName;
+              const singleList = [
+                {
+                  response: {
+                    resultObject: {
+                      fileId: value,
+                      fileName,
+                    },
+                  },
+                  uid: value,
+                  name: handleFileName(fileName),
+                  status: value ? 'done' : 'stop',
+                  url: engineApis?.service?.getAppFileUrlById(value),
+                },
+              ];
+              downloadable
+                ? setFileList(singleList)
+                : setFileList(
+                    singleList.map((f) => {
+                      const { response, uid, name, status } = f;
+                      return {
+                        response,
+                        uid,
+                        name,
+                        status,
+                      };
+                    }),
+                  );
+            });
+        } else {
+          let list = [];
+          // value 绑定的内容，是个数组的情况，数据兼容
+          if (Array.isArray(value)) {
+            list = [...value];
+          } else {
+            list = JSON.parse(value);
+          }
+          if (list && Array.isArray(list) && list.length > 0 && list[0]) {
+            let isDone = true;
+            const newFileList = list.map((li) => {
+              if (!li) {
+                isDone = false;
+                return false;
+              }
+              return {
+                response: {
+                  resultObject: {
+                    fileId: li?.fileId,
+                    fileName: handleFileName(li?.fileName),
+                  },
+                },
+                uid: li?.fileId,
+                name: handleFileName(li?.fileName),
+                status: li?.fileId ? 'done' : 'stop',
+                url: engineApis?.service?.getAppFileUrlById(li?.fileId),
+              };
+            });
+            if (isDone) {
+              downloadable
+                ? setFileList(newFileList)
+                : setFileList(
+                    newFileList.map((f: any) => {
+                      const { response, uid, name, status } = f;
+                      return {
+                        response,
+                        uid,
+                        name,
+                        status,
+                      };
+                    }),
+                  );
+            }
+          }
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }, [value]);
+
+  useEffect(() => {
+    const { length } = fileList;
+    if (numberLimit > 0 && length >= numberLimit) {
+      fileList.length = numberLimit;
+    }
+    const simpleFileList = JSON.stringify(
+      (fileList || []).map((f: any) => {
+        if (f.response) {
+          return {
+            fileId: f.response?.resultObject?.fileId,
+            fileName: f.response?.resultObject?.fileName,
+          };
+        }
+        return undefined;
+      }),
+    );
+    if (getSimpleFileList) {
+      getSimpleFileList(simpleFileList);
+    }
+    if (singleFileMode) {
+      if (Array.isArray(fileList) && fileList.length > 0) {
+        if (
+          fileList[0].response &&
+          fileList[0].response.resultMsg === 'success'
+        ) {
+          const { resultObject } = fileList[0].response;
+          const { fileId } = resultObject;
+          // onChange(parseInt(fileId, 10));
+          onChange(fileId);
+        }
+      }
+    } else {
+      onChange(simpleFileList);
+    }
+  }, [fileList]);
+
+  const handleOnChange = (e: any) => {
+    try {
+      const files = e.fileList.map((f: any, index: number) => {
+        if (f.response) {
+          const { resultObject, resultCode } = f.response;
+          const fileId = resultObject?.fileId || -index;
+          const { status } = f;
+          if (onFinishUpload) {
+            onFinishUpload(resultObject);
+          }
+          return {
+            ...f,
+            ...resultObject,
+            name: handleFileName(f.name),
+            status: +resultCode === -1 ? 'error' : status,
+            url: engineApis?.service?.getAppFileUrlById(fileId),
+          };
+        }
+        return f;
+      });
+      downloadable
+        ? setFileList(files)
+        : setFileList(
+            files.map((f: any) => {
+              const { response, uid, name, status } = f;
+              return {
+                response,
+                uid,
+                name,
+                status,
+              };
+            }),
+          );
+
+      if (files[0] && files[0].status !== 'uploading') {
+        const { resultCode, resultMsg } = files[0].response || {};
+        if (+resultCode === -1 && resultMsg) {
+          message.error(resultMsg);
+        }
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handlePreview = async (file: any) => {
+    const { fileId, uid } = file;
+    previewFile(fileId || uid);
+    if (onFileNameClick) {
+      onFileNameClick(file);
+    }
+  };
+
+  const getDownloadName = (suffix: any, file: any) => {
+    const suf = suffix || getAfterString(file.name, '.') || '';
+    return fileNameEncode
+      ? `${createRandomStr(20).toUpperCase()}.${suf}`
+      : file.name.replace(/\.\w+$/, `.${suf}`);
+  };
+
+  // 支持图片、pdf直接下载
+  const downloadFile = async (file: any) => {
+    if (onListenDownloading) {
+      const res = await onListenDownloading(file);
+      if (String(res) === 'false') {
+        return;
+      }
+    }
+    let downUrl = file.url;
+    try {
+      // 如果有field 优先通过field拼接
+      if (file.fileId) {
+        const addWaterMark =
+          isWatermark && (!optionalFile || downloadWay === '2');
+        downUrl = engineApis?.service?.getAppFileUrlById({
+          addWaterMark,
+          fileId: file.fileId,
+        });
+      }
+    } catch (error) {
+      console.error(error);
+    }
+    if (window.XMLHttpRequest) {
+      setDownloadProVisible({ ...downloadProVisible, [file.fileId]: true });
+      const xhr = new XMLHttpRequest(); // ActiveXObject只存在于IE7及以下，无需兼容
+      xhr.timeout = uploadTimeout; // 设置超时时间（秒）
+      xhr.open('GET', downUrl, true);
+      xhr.responseType = 'blob'; // 设置接受类型
+      xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头参数
+      // xhr.setRequestHeader('X-B-TARGET-ID', props.pageId);
+      // xhr.setRequestHeader('X-B-AUTH', '1');
+      // xhr.setRequestHeader('APP-ID', appId);
+      xhr.onload = () => {
+        const data = xhr.response; // 获取响应体数据
+        // @ts-ignore
+        const suffix = getAfterString(
+          xhr.getResponseHeader('Content-Disposition'),
+          '.',
+        );
+        const a = document.createElement('a');
+        document.body.appendChild(a);
+        a.href = window.URL.createObjectURL(data); // 获取blob地址
+        a.download = getDownloadName(suffix, file);
+        a.click();
+        document.body.removeChild(a);
+        setDownloadProVisible({ ...downloadProVisible, [file.fileId]: false });
+      };
+      // 下载进度条
+      xhr.onprogress = (event: any) => {
+        if (event.lengthComputable) {
+          progressRef.current?.[file.fileId]?.setPercent(
+            Math.round((event.loaded * 100) / event.total),
+          );
+        }
+      };
+      xhr.ontimeout = () => {
+        setDownloadProVisible({ ...downloadProVisible, [file.fileId]: false });
+        xhr.abort(); // 取消请求
+      };
+      xhr.send();
+      xhr.onerror = () => {
+        setDownloadProVisible({ ...downloadProVisible, [file.fileId]: false });
+      };
+    }
+  };
+
+  const handleDownload = async (file: any) => {
+    if (downloadProVisible[file.fileId]) {
+      message.warn(getLocale?.('Upload.download'));
+      return;
+    }
+    if (isWatermark && optionalFile) {
+      // 支持选择源文件下载or加水印下载
+      setCurFile(file);
+      setOptionalVisible(true);
+    } else {
+      downloadFile(file);
+    }
+  };
+
+  const onDownloadWayCancel = () => {
+    setdDownloadWay('1');
+    setOptionalVisible(false);
+  };
+
+  const onDownloadWayOk = () => {
+    setOkLoading(true);
+    try {
+      downloadFile(curFile);
+    } finally {
+      onDownloadWayCancel();
+      setOkLoading(false);
+    }
+  };
+
+  const handleBeforeUpload = async (file: any, _fileList: any) => {
+    if (precheckService) {
+      const res = await fetch(action, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          'APP-ID': appId,
+          'X-B-AUTH': '1',
+          'X-B-TARGET-ID': props.pageId,
+        },
+      }).then((response) => response.json());
+      if (res.resultCode === '-1' || res.resultCode === -1) {
+        setShowUploadList(false);
+        return false;
+      }
+    }
+    if (!action) {
+      message.warn(getLocale?.('Upload.actionStrict'));
+      return false;
+    }
+    if (numberLimit) {
+      const { length } = fileList;
+      if (length >= numberLimit) {
+        message.warn(
+          getLocale?.('Upload.fileLimit', {
+            num: singleFileMode ? 1 : numberLimit,
+          }),
+        );
+        return false;
+      }
+      if (singleFileMode && length > 0) {
+        message.warn(getLocale?.('Upload.singleStrict'));
+        return false;
+      }
+    }
+    return true;
+  };
+  const accept = acceptType?.join(',') || '';
+  const commonConfig: any = {
+    disabled: forbidden || disabled || readOnly,
+    action,
+    accept: acceptExtension || accept,
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    beforeUpload: (file: any, fileList: any) =>
+      handleBeforeUpload(file, fileList),
+    fileList,
+    onRemove: (file: { uid: any }) => handleRemove(file),
+    onChange: (e: any) => handleOnChange(e),
+    showUploadList: {
+      ...showUploadList,
+      downloadIcon: (file: any) => {
+        if (downloadProVisible[file.fileId]) {
+          return (
+            <DownloadProgress
+              ref={(r: any) => {
+                progressRef.current[file.fileId] = r;
+              }}
+            />
+          );
+        }
+        return null;
+      },
+    },
+    onPreview: (file: any) => handlePreview(file),
+    onDownload: (file: any) => handleDownload(file),
+    headers: {
+      'X-B-TARGET-ID': props.pageId,
+      'X-B-AUTH': 1,
+      'APP-ID': appId,
+    },
+    withCredentials: true,
+  };
+
+  if (readOnly && fileList.length <= 0) {
+    return renderReadOnly('--');
+  }
+
+  return (
+    <>
+      {draggable ? (
+        <Dragger {...restProps} {...commonConfig}>
+          <p className="ant-upload-drag-icon">
+            <InboxOutlined rev="" />
+          </p>
+          <p className="ant-upload-text">
+            {getLocale?.('Upload.uploadPlaceholder')}
+          </p>
+        </Dragger>
+      ) : (
+        <div
+          className={
+            disabled || readOnly ? `${UPLOAD_WRAPPER_CLASSNAME}-hidden` : ''
+          }
+        >
+          <Upload {...restProps} {...commonConfig}>
+            {children}
+          </Upload>
+        </div>
+      )}
+      <Modal
+        title={getLocale?.('Upload.downloadType')}
+        visible={optionalVisible}
+        width={420}
+        onCancel={onDownloadWayCancel}
+        footer={
+          <Button type="primary" onClick={onDownloadWayOk} loading={okLoading}>
+            {getLocale?.('Upload.downloadText')}
+          </Button>
+        }
+      >
+        <Radio.Group
+          onChange={(e) => setdDownloadWay(e.target.value)}
+          value={downloadWay}
+        >
+          <Radio value="1">{getLocale?.('Upload.origin')}</Radio>
+          <Radio value="2">{getLocale?.('Upload.waterMark')}</Radio>
+        </Radio.Group>
+      </Modal>
+    </>
+  );
+});
+
+export interface MyUploadProps {
+  value?: any;
+  visible?: boolean;
+  onChange?: (e: any) => void;
+  onValueRelease?: (value: any) => void;
+  getCompPropMapState?: (id: string, type: string) => any;
+  compId?: string;
+  name?: string;
+  fieldName: string;
+  hidden?: boolean;
+  regexp?: any;
+  message?: any;
+  label?: any;
+  labelCol?: any;
+  wrapperCol?: any;
+  uploadText?: any;
+  selfSpan?: number;
+  colSpan?: number;
+  style?: React.CSSProperties;
+  fileName?: string;
+  action?: string;
+  multiple?: boolean;
+  listType?: string;
+  singleFileMode?: boolean;
+  showWrapperContainer: boolean;
+  wrapperContainer: any;
+  colon?: boolean;
+  isFormChild?: boolean | undefined;
+  uploadProps: any; // 懒加载入参
+  formFieldsRef: any; // 懒加载入参
+  disabled: boolean; // 懒加载入参
+  readOnly: boolean; // 懒加载入参
+  required: boolean; // 懒加载入参
+}
+
+const MyUpload = LingxiForwardRef<any, MyUploadProps>((props, ref) => {
+  const {
+    value,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    visible = true,
+    onChange,
+    onValueRelease,
+    getCompPropMapState,
+    compId,
+    name,
+    fieldName,
+    regexp,
+    label,
+    labelCol,
+    wrapperCol,
+    uploadText,
+    hidden,
+    selfSpan,
+    colSpan,
+    fileName,
+    action,
+    multiple,
+    listType,
+    showWrapperContainer,
+    wrapperContainer: WrapperContainer,
+    isFormChild,
+    uploadProps,
+    formFieldsRef,
+    disabled,
+    readOnly,
+    required,
+    ...restProps
+  } = props;
+  // const customStyle = restProps.style || {};
+  // const {
+  //   margin: customMargin,
+  //   display: customDisplay,
+  //   visibility: customVisibility,
+  // } = customStyle;
+  const engineApis = props?.getEngineApis?.() || {};
+  const { getLocale } = useLocale(engineApis);
+
+  // const [uploadProps, setUploadProps] = useState<MyUploadProps['uploadProps']>();
+
+  // const { formFieldsRef, disabled, readOnly, required } = useCommonImperativeHandle(ref, props, {
+  //   setUploadProps: (_props: any) => {
+  //     setUploadProps(_props);
+  //   }
+  // });
+
+  const extraProps = useMemo(() => {
+    const { method, ...data } = uploadProps || {};
+    const extra: any = {
+      name: fileName,
+      method,
+      data,
+    };
+    if (action) {
+      extra.action = action;
+    }
+    return extra;
+  }, [fileName, uploadProps, action]);
+
+  const finalRules = useMemo(() => {
+    const rules = [{ required, message: getLocale?.('notEmpty', { name }) }];
+    return rules;
+  }, [required]);
+
+  return (
+    <FormFields
+      {...getFieldsProps(props)}
+      ref={formFieldsRef}
+      disabled={disabled}
+      required={required}
+      readOnly={readOnly}
+      rules={finalRules}
+      ignoreReadOnlyFlag
+      handleFormValue={(val) => {
+        if (val !== undefined) {
+          return props?.singleFileMode ? val : val || [];
+        }
+        return undefined;
+      }}
+    >
+      <FormUpload
+        {...restProps}
+        {...extraProps}
+        value={value}
+        appId={props.$$componentItem.appId}
+        pageId={props.$$componentItem.pageId}
+        getSimpleFileList={(v: string) => {
+          // if (props.singleFileMode) {
+          //   if (v) {
+          //     const arr = JSON.parse(v) || [];
+          //     if (arr.length > 0 && arr[0]) {
+          //       // eslint-disable-next-line radix
+          //       if (form?.setFieldsValue) {
+          //         // form.setFieldsValue({ [fieldName]: parseInt(arr[0].fileId, 10) });
+          //         form.setFieldsValue({ [fieldName]: arr[0].fileId });
+          //       }
+          //     }
+          //   }
+          // } else if (form?.setFieldsValue) {
+          //   form.setFieldsValue({ [fieldName]: v });
+          // }
+        }}
+        onChange={(e) => {
+          if (onChange) {
+            onChange(e);
+          }
+        }}
+      >
+        {listType === 'picture-card' ? (
+          <div>
+            <PlusOutlined rev="" />
+            <div>{uploadText}</div>
+          </div>
+        ) : (
+          <Button>
+            <UploadOutlined rev="" />
+            {uploadText}
+          </Button>
+        )}
+      </FormUpload>
+    </FormFields>
+  );
+});
+
+export default MyUpload;