@hzab/form-render 1.4.0 → 1.5.0-beta

package/src/components/Upload/uploader-input.jsx

@@ -3,7 +3,8 @@ import { Button, Modal, message } from "antd";
 
 import ItemList from "./components/ItemList";
 
-import { handleMaxCount, handleInputFileList } from "./common/utils";
+import { handleMaxCount } from "./common/utils";
+import { handleInputFileList, handleOutputFileList } from "./common/handleIOFileList";
 import { handleOssUpload } from "./common/ossUpload";
 
 import "./uploader.less";
@@ -16,6 +17,26 @@ function Uploader(props) {
     multiple,
     // 模式字符串: all | select | image | video 或 数组 select | image | video 组合：如：['select', 'image']
     mode = "select",
+    /** 上传模式
+     * 阿里云 oss: oss
+     * 内部定制私有化部署: offline
+     * 自定义: custom
+     * 文件: file
+     */
+    uploadMode: _uploadMode = "oss",
+    /**
+     * 数据格式配置
+     */
+    fileListConf = {
+      /** 列表数据模式 "array" | "jsonStr" | "splitStr" */
+      listMode: "array",
+      /** 字符串列表数据模式下的分隔符 */
+      split: ", ",
+      /** 子项数据模式 "object" | "file" | "url" | "jsonStr" */
+      itemMode: "url",
+      /** 预览配置参数 */
+      previewConfig: {},
+    },
     onChange,
     accept,
     disabled,
@@ -26,7 +47,7 @@ function Uploader(props) {
     maxSize,
     maxCount = 1,
     // 是否使用 oss 上传文件
-    isOssUpload,
+    isOssUpload = true,
     // 是否使用字符串结果
     isStrRes,
     // maxCount === 1 时，结果是否自动去除数组嵌套
@@ -34,7 +55,22 @@ function Uploader(props) {
     ossUrl,
     ossOpt,
     onCountExceed,
+    isFileJson,
+    isFileObj,
   } = props;
+
+  // 参数归一化，兼容老参数
+  const uploadMode = isOssUpload === true ? "oss" : _uploadMode;
+  if (isStrRes === true && isFileObj === false) {
+    fileListConf.itemMode = "url";
+  }
+  if (isFileJson === true) {
+    fileListConf.listMode = "jsonStr";
+  }
+  if (isFileObj === true) {
+    fileListConf.itemMode = "object";
+  }
+
   const [loading, setLoading] = useState(false);
   const [fileList, setFileList] = useState(handleInputFileList(value, maxCount));
   useEffect(() => {
@@ -59,7 +95,7 @@ function Uploader(props) {
       return it;
     });
     // 处理 oss 逻辑
-    if (isOssUpload) {
+    if (uploadMode === "oss") {
       setLoading(true);
       files = await handleOssUpload(files, {
         axios: props.axios,
@@ -81,17 +117,17 @@ function Uploader(props) {
     }
     _files = handleMaxCount(files, maxCount);
     setFileList(_files);
-    if (isOssUpload && isStrRes) {
-      _files = _files?.map((file) => {
-        return file.url || file.ossUrl;
-      });
-    }
-    if (!_files || _files.length <= 0) {
-      _files = undefined;
-    } else if (isResRemoveArr && maxCount === 1) {
+
+    // 处理出参格式
+    _files = handleOutputFileList(_files, {
+      ...fileListConf,
+    });
+
+    if (isResRemoveArr && maxCount === 1) {
       // maxCount 为1的时候返回结果去除数组
       _files = _files[0];
     }
+
     onChange && onChange(_files);
   }
 
@@ -126,7 +162,7 @@ function Uploader(props) {
       <input {...inputProps} ref={uploaderRef}></input>
       <ItemList
         fileList={fileList}
-        baseUrl={isOssUpload ? baseUrl : ""}
+        baseUrl={uploadMode === "oss" ? baseUrl : ""}
         disabled={disabled}
         readOnly={readOnly}
         onItemDel={onItemDel}

package/src/components/Upload/uploader.jsx

@@ -8,113 +8,122 @@ import {
 } from "@ant-design/icons";
 import { Button, Upload as AUpload, message } from "antd";
 import React, { useEffect, useState } from "react";
-import { nanoid } from "nanoid";
 
-import { handleInputFileList, getFileName, getFileType, mergePreviewConfig } from "./common/utils";
-import LUploadOss from "./common/ossUpload";
+import { handleInputFileList, handleOutputFileList } from "./common/handleIOFileList";
 
 import PreviewModal, { hasPreviewRender, hasPreviewMedium } from "./components/PreviewModal";
+import { getOssUploadRequest, getOfflineUploadRequest } from "./common/customRequest";
 
 import "./uploader.less";
 
+const defaultFileListConf = {
+  /** 列表数据模式 "array" | "jsonStr" | "splitStr" */
+  listMode: "array",
+  /** 字符串列表数据模式下的分隔符 */
+  split: ", ",
+  /** 子项数据模式 "object" | "file" | "url" | "jsonStr" */
+  itemMode: "url",
+};
+
 export function Uploader({ onChange, ...props }) {
   const {
+    /** 上传模式
+     * 阿里云 oss: oss
+     * 内部定制私有化部署: offline
+     * 自定义: custom
+     * 文件: file
+     */
+    uploadMode: _uploadMode = "oss",
     name = "file",
     multiple = false,
     // 媒体类型限制，当url地址不带类型后缀时传入，一个组件最好只传一种媒体类型，例如image/*，若混传，例如video/*,image/*这种，在预览时只会预览第一种。
     accept,
     value,
-    btnText = "上传",
+    btnText = props.textContent || "上传",
     maxCount = Infinity,
     // 文件大小限制
     maxSize,
     listType = "text",
     disabled = false,
     readOnly = false,
-    ossUrl = "/api/v1/user/oss/getWebOssConfig",
+    ossServerUrl = "/api/v1/user/oss/getWebOssConfig",
     // 是否使用 oss 上传文件
     isOssUpload = true,
     // 是否使用字符串结果
     isStrRes,
     // maxCount === 1 时，结果是否自动去除数组嵌套
     isResRemoveArr = true,
-    ossOpt,
+    /** 预览配置参数 */
+    previewConfig = {},
     onCountExceed,
     templateUrl,
     beforeUploadCheck,
     templateDownloadText = "模板下载",
     isFileObj = false,
     isFileJson = false,
-    UploadOss,
-    previewConfig,
   } = props;
 
+  /**
+   * 数据格式配置
+   */
+  const fileListConf = { ...defaultFileListConf, ...props.fileListConf };
+
+  // 参数归一化，兼容老参数
+  const uploadMode = isOssUpload === true ? "oss" : _uploadMode;
+  if (isStrRes === true && isFileObj === false) {
+    fileListConf.itemMode = "url";
+  }
+  if (isFileJson === true) {
+    fileListConf.listMode = "jsonStr";
+  }
+  if (isFileObj === true) {
+    fileListConf.itemMode = "object";
+  }
+
   const [fileList, setFileList] = useState([]);
   const [previewFile, setPreviewFile] = useState();
   const [checking, setChecking] = useState(false);
 
-  const handleChange = async ({ fileList }) => {
+  /**
+   * Upload onChange 函数，上传中、完成、失败都会调用这个函数。
+   * @param {*} param0
+   * @returns
+   */
+  const handleChange = async ({ fileList, file, event }) => {
     setFileList(fileList);
-    let _files = [...fileList];
-    // 处理提交结果为字符串的情况
-    if (isOssUpload || isStrRes) {
-      for (let i = 0; i < _files.length; i++) {
-        let _file = _files[i];
-        if (_file?.originFileObj) {
-          _file = _file?.originFileObj;
-        }
-        // 从文件对象中获取 url，ossPromise 为上传中的文件，兼容 file 为字符串的情况
+    // 上传中不进行处理，结局 ossPromise 不存在的问题
+    if (file.status !== "done") {
+      return;
+    }
 
-        if (isFileObj) {
-          let { ossUrl, url, uid, name, type } = (await _file.ossPromise) || _file;
-          _files[i] = { ossUrl, url: isOssUpload ? mergePreviewConfig(ossUrl, previewConfig) : url, uid, name, type };
-        } else {
-          let str = (await _file.ossPromise) || _file.url || _file.ossUrl || _file;
-          _files[i] = str;
-        }
+    let _files = [...fileList];
+    // 取出异步 url
+    for (let i = 0; i < _files.length; i++) {
+      let _file = _files[i]?.originFileObj || _files[i];
+      if (!_file.url) {
+        _file.url = (await _file.ossPromise) || _file.ossUrl || typeof _file === "string" ? _file : "";
+        _files[i].url = _file.url;
       }
     }
-    // 处理空数据情况
-    if (!_files || _files.length <= 0) {
-      _files = undefined;
-    } else if (isResRemoveArr && maxCount === 1) {
+
+    // 处理出参格式
+    _files = handleOutputFileList(_files, {
+      ...fileListConf,
+    });
+
+    if (isResRemoveArr && maxCount === 1 && Array.isArray(_files)) {
       // maxCount 为 1 的时候返回结果去除数组
       _files = _files[0];
     }
-    onChange && onChange?.(isFileJson ? JSON.stringify(_files) : _files);
+
+    onChange && onChange?.(_files);
   };
 
   useEffect(() => {
     if (!value) {
       return;
     }
-
-    let _list = [];
-    try {
-      _list = JSON.parse(value);
-    } catch (e) {
-      _list = value;
-    }
-
-    if (typeof _list === "string") {
-      _list = value.split(",");
-    }
-
-    if (Array.isArray(_list)) {
-      _list = _list.map((res) => {
-        if (typeof res === "string") {
-          return {
-            name: getFileName(res),
-            status: "done",
-            uid: `rc-upload-${Date.now()}-${nanoid()}`,
-            url: res,
-            type: getFileType(res),
-          };
-        }
-        return res;
-      });
-    }
-    setFileList(handleInputFileList(_list, maxCount, isFileObj, isOssUpload, previewConfig));
+    setFileList(handleInputFileList(value, { ...fileListConf, maxCount, previewConfig }));
   }, [value]);
 
   const onRemove = (file) => {
@@ -122,6 +131,20 @@ export function Uploader({ onChange, ...props }) {
     onChange && onChange(files);
   };
 
+  // 自定义请求逻辑
+  let customRequest = props.customRequest;
+  if (uploadMode === "oss") {
+    customRequest = getOssUploadRequest({
+      ...props,
+      ossServerUrl: ossServerUrl || props.ossUrl,
+    });
+  } else if (uploadMode === "offline") {
+    customRequest = getOfflineUploadRequest({
+      ...props,
+      ossServerUrl: ossServerUrl || props.ossUrl,
+    });
+  }
+
   const _uploadProps = {
     iconRender: (e) => {
       if (e?.type == "application/pdf") {
@@ -189,36 +212,18 @@ export function Uploader({ onChange, ...props }) {
       }
       setChecking(false);
     },
-    ...(isOssUpload ? {
-      customRequest: ({ action, data, file, filename, headers, method, onSuccess, onProgress, onError }) => {
-        const _UploadOss = UploadOss || LUploadOss;
-        const ossUpload = new _UploadOss({
-          serverUrl: ossUrl,
-          ...ossOpt,
-        });
-        file.ossPromise = ossUpload
-          .upload(file, {
-            params: {
-              isPublic: 1,
-              ...(props.params || {}),
-            },
-          })
-          .then((res) => {
-            file.url = res?.data?.data?.fileUrl ?? res?.data?.fileUrl ?? res?.fileUrl;
-            file.ossUrl = file.url;
-            onSuccess(file);
-            return isFileObj ? file : file.ossUrl;
-          })
-          .catch(onError);
-      }
-    } : {}),
+    customRequest,
     onPreview(file) {
+      // TODO: 逻辑合并到数据处理中
       const isShowPreview = hasPreviewRender(file) || hasPreviewMedium(props.accept);
+      const fileUrl = file.previewUrl;
       if (isShowPreview) {
-        setPreviewFile({ ...file, url: isOssUpload ? mergePreviewConfig(file?.ossUrl || file?.url, previewConfig) : file.url });
+        setPreviewFile({
+          ...file,
+          url: fileUrl,
+        });
       } else {
-        const imgUrl = isOssUpload ? mergePreviewConfig(file?.ossUrl || file?.url, previewConfig) : file.url
-        window.open(imgUrl);
+        window.open(fileUrl);
       }
     },
     ...(props || {}),

package/src/components/index.tsx

@@ -1,5 +1,8 @@
 import Text from "./Text";
 
+export * from "./ArrayBase";
+export * from "./ArrayTable";
+export * from "./ArrayCards";
 export * from "./Upload";
 
 export * from "./UserSelect";

package/src/index.tsx

@@ -26,8 +26,6 @@ import {
   FormLayout,
   FormTab,
   FormCollapse,
-  ArrayTable,
-  ArrayCards,
 } from "c-formily-antd";
 import { Card, Slider, Rate } from "antd";
 
@@ -63,11 +61,18 @@ const antdComponents = {
   FormLayout,
   FormTab,
   FormCollapse,
-  ArrayTable,
-  ArrayCards,
 };
 
+/** schema scope 解决父级无 schema Scope 导致 scope 对象刷新的问题 */
+let _schemaScope = { _$tempData: {} };
+
 const FormRender = forwardRef((props: any, parentRef) => {
+  if (props.schemaScope) {
+    _schemaScope = props.schemaScope;
+  }
+  if (!props.schemaScope?._$tempData) {
+    _schemaScope._$tempData = {};
+  }
   const SchemaField = useCallback(
     createSchemaField({
       components: {
@@ -76,8 +81,6 @@ const FormRender = forwardRef((props: any, parentRef) => {
         FormLayout,
         FormTab,
         FormCollapse,
-        ArrayTable,
-        ArrayCards,
         FormItem,
         DatePicker,
         Checkbox,
@@ -102,7 +105,7 @@ const FormRender = forwardRef((props: any, parentRef) => {
         ...customComponents,
         ...props.components,
       },
-      scope: { ...props.schemaScope },
+      scope: _schemaScope,
     }),
     [],
   );
@@ -150,7 +153,7 @@ const FormRender = forwardRef((props: any, parentRef) => {
 
   const schema = useMemo(() => {
     return bindOnChange(props.schema, {
-      schemaScope: props.schemaScope,
+      schemaScope: _schemaScope,
       onChange: props.onChange,
       formRender,
     });