@cloudbase/weda-ui 3.4.5 → 3.4.6

package/dist/web/components/flow/modules/operations/controls-items/roll-back-modal.js

@@ -0,0 +1,104 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Modal, Select, Form, Radio, message } from 'tea-component';
+import { FlowCheckListPopup } from './check-list-popup';
+/** 回退弹窗 */
+export function RollbackModal(props) {
+    const { visible, isH5, preElementList, selectedNodeId, setSelectedNodeId, onOpen, onClose, rollBack, } = useRollbackModel(props);
+    const renderModal = () => {
+        return (React.createElement(Modal, { visible: visible, caption: '流程回退', onClose: onClose },
+            React.createElement(Modal.Body, null,
+                React.createElement(Form, null,
+                    React.createElement(Form.Item, { label: '选择回退节点' },
+                        React.createElement(Select, { size: "full", appearance: "button", matchButtonWidth: true, options: preElementList, value: selectedNodeId, onChange: (value) => setSelectedNodeId(value), style: { width: 200 } })))),
+            React.createElement(Modal.Footer, null,
+                React.createElement(Button, { type: "primary", disabled: (preElementList === null || preElementList === void 0 ? void 0 : preElementList.length) === 0 || !selectedNodeId, onClick: rollBack }, "\u786E\u5B9A"),
+                React.createElement(Button, { type: "weak", onClick: onClose }, "\u53D6\u6D88"))));
+    };
+    const renderPopup = () => {
+        return (React.createElement(FlowCheckListPopup, { visible: visible, onClose: onClose, title: "\u8BF7\u9009\u62E9\u56DE\u9000\u8282\u70B9", overlayStyle: { zIndex: 998 }, height: 550, confirmButtonProps: {
+                onClick: rollBack,
+                disabled: (preElementList === null || preElementList === void 0 ? void 0 : preElementList.length) === 0 || !selectedNodeId,
+            } },
+            React.createElement(Radio.Group, { value: selectedNodeId, onChange: (value) => setSelectedNodeId(value), layout: "column" }, preElementList.map((ele) => (React.createElement(Radio, { name: ele.value, key: ele.value }, ele.text))))));
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { ...props.buttonProps, id: props.id, onClick: onOpen }, props.label),
+        isH5 ? renderPopup() : renderModal()));
+}
+/** 回退model */
+function useRollbackModel(params) {
+    const { flowFrameCommonProps, flowControlModel } = params;
+    const { flowRequest, isH5 } = flowFrameCommonProps.flowLocalProps;
+    const { flowDetail } = flowFrameCommonProps.commonFlowData;
+    const { onAfterFinishFlowAction } = flowControlModel;
+    const [visible, setVisible] = useState(false);
+    /** 可回退节点列表 */
+    const [preElementList, setPreElementList] = useState([]);
+    const [selectedNodeId, setSelectedNodeId] = useState('');
+    useEffect(() => {
+        visible && getPreElementList();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visible]);
+    const onOpen = () => setVisible(true);
+    const onClose = () => setVisible(false);
+    /** 获取回退节点列表 */
+    const getPreElementList = async () => {
+        const result = await flowRequest({
+            action: 'GetPreElementList',
+            data: {
+                flowCode: flowDetail.flowCode,
+                appVersion: flowDetail.flowVersion,
+                instanceId: flowDetail.instanceId,
+            },
+        });
+        if (result === null || result === void 0 ? void 0 : result.data) {
+            const options = [];
+            let lastNodeId = '';
+            result.data.forEach((item) => {
+                if (item.lastNode) {
+                    lastNodeId = item.elementId;
+                }
+                options.push({
+                    ...item,
+                    value: item.elementId,
+                    text: item.elementName,
+                });
+            });
+            setPreElementList(options);
+            setSelectedNodeId(lastNodeId);
+        }
+    };
+    /** 回退请求 */
+    const rollBack = async () => {
+        var _a;
+        const result = await flowRequest({
+            action: 'RollBack',
+            data: {
+                flowCode: flowDetail.flowCode,
+                appVersion: flowDetail.flowVersion,
+                instanceId: flowDetail.instanceId,
+                taskId: flowDetail.taskId,
+                nodeId: flowDetail.currentNodeId,
+                sourceType: 1,
+                targetNodeId: selectedNodeId,
+                targetActTaskId: (_a = preElementList.find((item) => item.value === selectedNodeId)) === null || _a === void 0 ? void 0 : _a.actTaskId,
+            },
+        }, { previewData: { Status: true } });
+        if (result) {
+            message.success({
+                content: `${params.label}成功`,
+            });
+            onAfterFinishFlowAction(params.actionKey, params.afterAction);
+        }
+    };
+    return {
+        isH5,
+        visible,
+        preElementList,
+        selectedNodeId,
+        setSelectedNodeId,
+        onOpen,
+        onClose,
+        rollBack,
+    };
+}

package/dist/web/components/flow/modules/operations/controls-items/types.js

@@ -0,0 +1 @@
+export {};

package/dist/web/components/flow/modules/operations/index.js

@@ -0,0 +1,2 @@
+import { ModelFlowControl } from './control';
+export default ModelFlowControl;

package/dist/web/components/flow/modules/operations/style.css

@@ -0,0 +1,20 @@
+.weda-flow-control {
+  height: auto;
+  overflow-x: auto;
+  background: #fff;
+  text-align: center;
+  padding: 20px;
+}
+.weda-flow-h5-control {
+  padding: 20px 0px;
+}
+.weda-flow-control-divider {
+  border-top: 0;
+  display: inline-block;
+  margin: 0 12px;
+  border-left: var(--wd-divider-size-border) solid
+    var(--wd-divider-color-border);
+  height: 1em;
+  vertical-align: middle;
+  width: 0;
+}

package/dist/web/components/flow/modules/operations/view-model.js

@@ -0,0 +1,137 @@
+import { useState } from 'react';
+import { PAGE_TYPE } from '../../constants';
+import { CommonFlowDataUtils, } from '../../frame';
+import { FLOW_CONTROL_ACTION_KEY, } from './config';
+/** 流程控制主model, 包含一些公共状态或方法 */
+export function useFlowControlModel(params) {
+    //#region model入参
+    const { commonFlowData, flowLocalProps, ide, reload, setFormType } = params;
+    const { flowDetail, pageInfo } = commonFlowData;
+    const { flowRequest, isWedaIde } = flowLocalProps;
+    const { events } = ide || {};
+    //#endregion
+    //#region hook
+    /** 提交申请时的抄送列表 */
+    const [applyCcUser, setApplyCcUser] = useState([]);
+    /** 流程是否已回退 */
+    const [hasGoBack, setHasGoBack] = useState(false);
+    /** 触发下一节点审批人操作 */
+    const [triggerFlowTaskInfo, setTriggerFlowTaskInfo] = useState(null);
+    //#endregion
+    //#region 流程操作请求
+    /** 提交申请、保存草稿、同意、拒绝、处理、转办  时 调用此请求 */
+    const completeTask = (value) => {
+        if (!value.buttonAction)
+            return;
+        getFormData(async (formDataMap) => {
+            var _a, _b, _c;
+            const params = {
+                buttonAction: value.buttonAction,
+                flowCode: flowDetail.flowCode,
+                instanceId: flowDetail.instanceId,
+                nodeId: flowDetail.currentNodeId,
+                taskId: flowDetail.taskId,
+                appVersion: flowDetail.flowVersion,
+                appCode: flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.startAppCode,
+                variableInfos: translateVariableInfos(formDataMap, pageInfo),
+                ...(value.data || {}),
+            };
+            (_a = value === null || value === void 0 ? void 0 : value.setLoadingState) === null || _a === void 0 ? void 0 : _a.call(value, true);
+            const result = await flowRequest({ action: 'CompleteTask', data: params }, { upperCaseIgnoreKeys: ['variableInfos'] });
+            (_b = value === null || value === void 0 ? void 0 : value.setLoadingState) === null || _b === void 0 ? void 0 : _b.call(value, false);
+            if (result) {
+                (_c = value === null || value === void 0 ? void 0 : value.successCallback) === null || _c === void 0 ? void 0 : _c.call(value);
+                if (result === null || result === void 0 ? void 0 : result.toBeSubmittedFlowTaskFlag) {
+                    setTriggerFlowTaskInfo(result);
+                }
+                else {
+                    // 执行完成后自定义动作
+                    onAfterFinishFlowAction(value.actionKey, value.afterAction);
+                }
+            }
+        });
+    };
+    //#endregion
+    //#region 辅助方法
+    /** 获取审批申请表单数据 */
+    const getFormData = (callback) => {
+        var _a;
+        if (isWedaIde) {
+            return;
+        }
+        (_a = events === null || events === void 0 ? void 0 : events.tap) === null || _a === void 0 ? void 0 : _a.call(events, {
+            onGetFormData: (formDataMap) => {
+                if (Object.values(formDataMap).some((item) => item === undefined)) {
+                    return;
+                }
+                callback === null || callback === void 0 ? void 0 : callback(formDataMap);
+            },
+        }, {
+            originEvent: null,
+        });
+    };
+    /** 完成流程动作后的事件 */
+    function onAfterFinishFlowAction(currentActionKey, afterAction) {
+        const customizeFinishAction = events === null || events === void 0 ? void 0 : events[afterAction];
+        if (customizeFinishAction) {
+            // 当前动作不是加签的话，需要切换URL参数
+            if (currentActionKey !== FLOW_CONTROL_ACTION_KEY.ADD_ASSIGNEE) {
+                // 默认切换页面类型为【我已处理】
+                let newPageType = PAGE_TYPE.DONE;
+                // 提交后需要切换页面类型为【我发起的】
+                if (currentActionKey === FLOW_CONTROL_ACTION_KEY.SUBMIT) {
+                    newPageType = PAGE_TYPE.CREATE;
+                }
+                // 保存草稿后切换页面类型为【草稿箱】
+                if (currentActionKey === FLOW_CONTROL_ACTION_KEY.SAVE_DRAFT) {
+                    newPageType = PAGE_TYPE.DRAFT;
+                }
+                CommonFlowDataUtils.updateUrlSearch({ pageType: newPageType });
+            }
+            // 操作类型不是回退的情况才reload数据 回退之后当前流程被销毁 故回退之后不刷新数据
+            if (currentActionKey === FLOW_CONTROL_ACTION_KEY.ROLL_BACK) {
+                setHasGoBack(true);
+                setFormType('read');
+            }
+            else {
+                // 重新加载数据
+                reload();
+            }
+            // 执行自定义事件
+            customizeFinishAction === null || customizeFinishAction === void 0 ? void 0 : customizeFinishAction();
+        }
+    }
+    //#endregion
+    return {
+        hasGoBack,
+        applyCcUser,
+        triggerFlowTaskInfo,
+        setApplyCcUser,
+        completeTask,
+        onAfterFinishFlowAction,
+    };
+}
+/** 涉及提交申请表单时，转换variableInfos */
+function translateVariableInfos(currentFormData, pageInfo) {
+    var _a;
+    const outEntityCodes = (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.outEntityCodes) || [];
+    const originObjectMap = ((_a = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.variableInfos) === null || _a === void 0 ? void 0 : _a.objectMap) || [];
+    return outEntityCodes === null || outEntityCodes === void 0 ? void 0 : outEntityCodes.map((item) => {
+        const originVariableInfo = originObjectMap === null || originObjectMap === void 0 ? void 0 : originObjectMap.find((info) => (info === null || info === void 0 ? void 0 : info.entityCode) === (item === null || item === void 0 ? void 0 : item.entityCode));
+        const { recordId, fieldValueMap } = originVariableInfo || {};
+        const currentFieldValueMap = ((currentFormData === null || currentFormData === void 0 ? void 0 : currentFormData[item === null || item === void 0 ? void 0 : item.entityCode]) ||
+            {});
+        const Value = Object.assign({
+            entityCode: item === null || item === void 0 ? void 0 : item.entityCode,
+            fieldValueMap: {
+                ...(fieldValueMap || {}),
+                ...currentFieldValueMap,
+            },
+        }, recordId ? { recordId } : {});
+        const variableInfo = {
+            Type: item === null || item === void 0 ? void 0 : item.type,
+            Value,
+        };
+        return variableInfo;
+    });
+}

package/dist/web/components/flow/services/ideData/instance.js

@@ -1,8 +1,8 @@
 export const instanceMockData = {
     InstanceId: '1540637032124833793',
-    Name: 'kong123提交的hongqi_var',
+    Name: '示例流程名称',
     Description: '',
-    StartedBy: 'kong123',
+    StartedBy: '示例流程发起人',
     CurrentApprover: '1538836331989536769',
     StartTime: 1656151467000,
     IsCompleted: false,

package/dist/web/components/flow/services/ideData/pageDetail.js

@@ -11,6 +11,7 @@ export const pageDetailMockData = {
     ShowTurnToPerson: true,
     ShowAddAssignee: true,
     ShowRollBack: true,
+    ShowRevoke: false,
     OutEntityCodes: [],
     Buttons: {
         1: '同意',

package/dist/web/components/form/uploader/index.css

@@ -54,6 +54,10 @@
   width: 100%;
   cursor: zoom-in;
 }
+._weda-fn-upload-result__item .weda-uploader-pc__image {
+  width: 100%;
+  object-fit: cover;
+}
 
 .weda-uploader-pc__input-box .wedatea2td-disabled {
   cursor: not-allowed;
@@ -123,3 +127,18 @@
   width: 6.85714em;
   height: 6.85714em;
 }
+.weda-ui .img-shape-ectangle {
+  border-radius: 0;
+}
+.weda-ui .img-shape-circular {
+  border-radius: 50%;
+}
+.weda-ui .img-shape-rounded-tectangle {
+  border-radius: 6px;
+}
+.img-shape-circular:before {
+  border-radius: 50%;
+}
+.img-shape-rounded-tectangle:before {
+  border-radius: 6px;
+}

package/dist/web/components/form/uploader/index.js

@@ -31,12 +31,30 @@ function UploaderPc(props) {
     });
 }
 export default function Uploader(props) {
+    const { showShape } = props;
+    const [imgTypeCls, setImgTypeCls] = React.useState(null);
+    React.useEffect(() => {
+        // let shapeClass;
+        switch (showShape) {
+            // 圆角矩形-roundedTectangle
+            case 'roundedTectangle':
+                setImgTypeCls('img-shape-rounded-tectangle');
+                break;
+            // 圆形-circular
+            case 'circular':
+                setImgTypeCls('img-shape-circular');
+                break;
+            default:
+                setImgTypeCls('img-shape-ectangle');
+                break;
+        }
+    }, [showShape]);
     const platform = usePlatform();
     if ((props === null || props === void 0 ? void 0 : props.showType) === 'pc') {
-        return React.createElement(UploaderPc, { ...props });
+        return React.createElement(UploaderPc, { imgTypeCls: imgTypeCls, ...props });
     }
     if ((props === null || props === void 0 ? void 0 : props.showType) === 'h5') {
-        return React.createElement(UploaderH5, { ...props });
+        return React.createElement(UploaderH5, { imgTypeCls: imgTypeCls, ...props });
     }
-    return platform === 'h5' ? (React.createElement(UploaderH5, { ...props })) : (React.createElement(UploaderPc, { ...props }));
+    return platform === 'h5' ? (React.createElement(UploaderH5, { imgTypeCls: imgTypeCls, ...props })) : (React.createElement(UploaderPc, { imgTypeCls: imgTypeCls, ...props }));
 }

package/dist/web/components/form/uploader/uploader.h5.js

@@ -7,11 +7,13 @@ import { useSyncValue } from '../../../utils/hooks/useSyncValue';
 import { randomStr } from '../../../utils/platform';
 import { IMAGE_TYPES, encodeConvert } from './uploader.pc';
 import { useTempUrl } from '../../../utils/hooks/use-cloud-id-temp-url';
+import { getParentForm } from '../../../utils/widget-api';
 const uploadPath = 'weda-uploader';
 /**
  * H5端
  */
-export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, acceptTypes, className, id, events, layout, defaultValue, single = false, disabled = false, requiredFlag = false, labelVisible = true, onChange, style, }) {
+export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, acceptTypes, className, id, events, layout, defaultValue, single = false, disabled = false, requiredFlag = false, labelVisible = true, onChange, style, imgTypeCls, $node, }) {
+    var _a;
     const cls = classNames({
         'weda-ui': true,
         'weui-cells': true,
@@ -23,6 +25,7 @@ export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, ac
     //上传进度
     const [progress, setProgress] = React.useState(0);
     const [inputValue, setInputValue] = useSyncValue(defaultValue, isObjectEqual);
+    const formType = ((_a = getParentForm($node)) === null || _a === void 0 ? void 0 : _a.formType) || 'create';
     const fileIdList = React.useMemo(() => {
         // 兼容h5默认值为空时情况
         if (inputValue === null) {
@@ -133,12 +136,13 @@ export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, ac
                 React.createElement(UploaderLabel, { layout: layout, label: label, labelVisible: labelVisible, currentCount: fileIdList.length, maxCount: finalMaxImgCount, requiredFlag: requiredFlag })),
             React.createElement("div", { className: "weui-uploader__bd" },
                 React.createElement("ul", { className: "weui-uploader__files", id: "uploaderFiles" },
-                    (fileIdList !== null && fileIdList !== void 0 ? fileIdList : []).map((f) => (React.createElement(SingleImage, { key: f, src: f, deleteBySrc: deleteFile, disabled: disabled }))),
-                    uploading && (React.createElement("li", { className: "weui-uploader__file weui-uploader__file_status" },
+                    (fileIdList !== null && fileIdList !== void 0 ? fileIdList : []).map((f) => (React.createElement(SingleImage, { key: f, src: f, deleteBySrc: deleteFile, disabled: disabled, imgTypeCls: imgTypeCls }))),
+                    fileIdList.length < 1 && formType === 'read' && React.createElement(React.Fragment, null, "\u2014"),
+                    uploading && (React.createElement("li", { className: `weui-uploader__file weui-uploader__file_status ${imgTypeCls}` },
                         React.createElement("div", { className: "weui-uploader__file-content" },
                             progress,
                             "%")))),
-                showAdd && (React.createElement("div", { className: "weui-uploader__input-box" }, !disabled && (React.createElement("input", { "data-testid": "uploaderh5_input", id: "uploaderInput", className: "weui-uploader__input", type: "file", accept: accepts.join(','), multiple: !single, onChange: (e) => {
+                showAdd && formType !== 'read' && (React.createElement("div", { className: `weui-uploader__input-box ${imgTypeCls}` }, !disabled && (React.createElement("input", { "data-testid": "uploaderh5_input", id: "uploaderInput", className: "weui-uploader__input", type: "file", accept: accepts.join(','), multiple: !single, onChange: (e) => {
                         const files = [...e.target.files];
                         if (!islegalType(files, accepts))
                             return;
@@ -158,7 +162,7 @@ export function ImageUploaderH5({ title: label, maxUploadCount, maxSize = 10, ac
                         files.forEach((f) => uploadToTcb(f));
                     } }))))))));
 }
-function SingleImage({ src, deleteBySrc }) {
+function SingleImage({ src, deleteBySrc, disabled, imgTypeCls, }) {
     const cls = classNames({
         'weui-uploader__file': true,
     });
@@ -170,12 +174,14 @@ function SingleImage({ src, deleteBySrc }) {
     const showGallery = () => {
         const gallery = weui.gallery(encodeURI(encodeSrc), {
             onDelete: function () {
-                deleteBySrc(src);
-                gallery.hide();
+                if (!disabled) {
+                    deleteBySrc(src);
+                    gallery.hide();
+                }
             },
         });
     };
-    return (React.createElement("li", { className: cls, style: imgStyle, onClick: showGallery, "data-testid": "uploaderh5_imgStyle" }, error || status ? (React.createElement("div", { className: "weui-uploader__file-content" }, error ? (React.createElement("i", { role: "img", "aria-label": "\u9519\u8BEF", className: "weui-icon-warn" })) : (React.createElement("i", { className: "weui-loading", style: { width: 30, height: 30 } })))) : (false)));
+    return (React.createElement("li", { className: `${cls} ${imgTypeCls}`, style: imgStyle, onClick: showGallery, "data-testid": "uploaderh5_imgStyle" }, error || status ? (React.createElement("div", { className: "weui-uploader__file-content" }, error ? (React.createElement("i", { role: "img", "aria-label": "\u9519\u8BEF", className: "weui-icon-warn" })) : (React.createElement("i", { className: `weui-loading ${imgTypeCls}`, style: { width: 30, height: 30 } })))) : (false)));
 }
 const UploaderLabel = ({ layout, label, currentCount, maxCount, requiredFlag, labelVisible, }) => {
     if (layout === 'horizontal') {

package/dist/web/components/form/uploader/uploader.pc.js

@@ -6,6 +6,7 @@ import { randomStr } from '../../../utils/platform';
 import isObjectEqual from '../../../utils/isObjectEqual';
 import { emptyObject } from '../../../utils/constant';
 import { useTempUrl } from '../../../utils/hooks/use-cloud-id-temp-url';
+import { getParentForm } from '../../../utils/widget-api';
 // 默认组件类前缀
 export const CLASS_PREFIX = 'weda-uploader-pc';
 // 默认图片类型
@@ -36,8 +37,9 @@ export function UploaderPC({ layout, className, id, style, title, tips, ...props
         React.createElement(UploaderPCInner, { ...props })));
 }
 export function UploaderPCInner(props) {
+    var _a;
     const { tips = '', btnTitle = '上传图片', maxUploadCount = 9, maxSize = 10, value: defaultValue, // 需要兼容 cloud:和https: 协议，需要兼容 字符串和字符串数组
-    acceptTypes = IMAGE_TYPES, uploadPath = 'weda-uploader', events = emptyObject, single = false, disabled = false, onChange, } = props;
+    acceptTypes = IMAGE_TYPES, uploadPath = 'weda-uploader', events = emptyObject, single = false, disabled = false, onChange, imgTypeCls, $node, } = props;
     // 上传中
     const [uploading, setUploading] = React.useState(false);
     //上传进度
@@ -45,6 +47,7 @@ export function UploaderPCInner(props) {
     // 文件列表
     const [fileIDList, setfileIDList] = React.useState([]);
     const fileRef = React.useRef([]);
+    const formType = ((_a = getParentForm($node)) === null || _a === void 0 ? void 0 : _a.formType) || 'create';
     React.useEffect(() => {
         let initialValue = []
             .concat(defaultValue)
@@ -166,30 +169,40 @@ export function UploaderPCInner(props) {
     maxSize && (extraProps['maxSize'] = maxSize * 1024 * 1024);
     return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
         React.createElement("div", { className: "_weda-fn-upload-result" },
-            fileIDList.map((d) => (React.createElement("div", { className: "_weda-fn-upload-result__item", key: d },
-                React.createElement(TcbImage, { fileID: d }),
-                React.createElement("div", { className: "_weda-fn-upload-result__op" },
+            fileIDList.map((d) => (React.createElement("div", { className: `_weda-fn-upload-result__item ${imgTypeCls}`, key: d },
+                React.createElement(TcbImage, { fileID: d, imgTypeCls: imgTypeCls }),
+                React.createElement("div", { className: `_weda-fn-upload-result__op ${imgTypeCls}` },
                     React.createElement(Button, { disabled: disabled, onClick: () => deleteHandle(d), className: `${CLASS_PREFIX}__btn` }, "\u5220\u9664"))))),
-            uploading && (React.createElement("div", { className: "_weda-fn-upload-result__item" },
+            uploading && (React.createElement("div", { className: `_weda-fn-upload-result__item ${imgTypeCls}` },
                 React.createElement("div", { className: "_weda-fn-upload-result__status", key: "_place_image" },
                     React.createElement(Icon, { type: "loading" }),
                     !!progress && (React.createElement("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset" },
                         "\u4E0A\u4F20",
                         progress,
                         "%..."))))),
-            React.createElement("div", { className: `${CLASS_PREFIX}__input-box` }, disabled ? (React.createElement("li", { className: "_weda-fn-upload-result__item wedatea2td-disabled" },
-                React.createElement("div", { className: "_weda-fn-upload-result__status" },
-                    React.createElement("i", { className: "wedatea2td-icon wedatea2td-icon-plus", role: "img", "aria-label": "plus" }),
-                    React.createElement("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset" }, btnTitle)))) : (((!single && fileIDList.length < maxUploadCount) ||
-                (single && fileIDList.length < 1 && !uploading)) && ( // single 模式时，当数组为空且不在上传文件过程中时显示
-            React.createElement(Upload, { ...extraProps, beforeUpload: beforeHandle },
-                React.createElement("li", { className: "_weda-fn-upload-result__item _weda-fn-upload-result__item--upload" },
+            React.createElement("div", { className: `${CLASS_PREFIX}__input-box` },
+                formType === 'read' && fileIDList.length < 1 && React.createElement("div", null, "\u2014"),
+                disabled && formType !== 'read' ? (React.createElement("li", { className: `_weda-fn-upload-result__item wedatea2td-disabled ${imgTypeCls}` },
                     React.createElement("div", { className: "_weda-fn-upload-result__status" },
                         React.createElement("i", { className: "wedatea2td-icon wedatea2td-icon-plus", role: "img", "aria-label": "plus" }),
-                        React.createElement("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset" }, btnTitle))))))))));
+                        React.createElement("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset" }, btnTitle)))) : (((!single && fileIDList.length < maxUploadCount) ||
+                    (single && fileIDList.length < 1 && !uploading)) &&
+                    formType !== 'read' && ( // single 模式时，当数组为空且不在上传文件过程中时显示
+                React.createElement(Upload, { ...extraProps, beforeUpload: beforeHandle },
+                    React.createElement("li", { 
+                        // className={"_weda-fn-upload-result__item _weda-fn-upload-result__item--upload" imgTypeCls}
+                        // className={classNames(
+                        //   `_weda-fn-upload-result__item _weda-fn-upload-result__item--upload`,
+                        //   imgTypeCls
+                        // )}
+                        className: `_weda-fn-upload-result__item _weda-fn-upload-result__item--upload ${imgTypeCls}` },
+                        imgTypeCls,
+                        React.createElement("div", { className: "_weda-fn-upload-result__status" },
+                            React.createElement("i", { className: "wedatea2td-icon wedatea2td-icon-plus", role: "img", "aria-label": "plus" }),
+                            React.createElement("span", { className: "wedatea2td-mt-1n wedatea2td-text-label wedatea2td-fz-reset" }, btnTitle))))))))));
 }
 export const TcbImage = (props) => {
-    const { fileID, isZoom, ...rest } = props;
+    const { fileID, isZoom, imgTypeCls, ...rest } = props;
     const [isError, setIsError] = React.useState(false);
     const { data: src, error: requestError } = useTempUrl(fileID);
     const encodeSrc = encodeConvert(src);
@@ -197,12 +210,12 @@ export const TcbImage = (props) => {
         return React.createElement(ErrorTip, null);
     }
     if (src) {
-        return isZoom ? (React.createElement(ImagePreview, { key: fileID, className: `${CLASS_PREFIX}__image`, ...rest, src: encodeURI(encodeSrc), previewSrc: encodeURI(encodeSrc), 
+        return isZoom ? (React.createElement(ImagePreview, { key: fileID, className: `${CLASS_PREFIX}__image ${imgTypeCls}`, ...rest, src: encodeURI(encodeSrc), previewSrc: encodeURI(encodeSrc), 
             /** @ts-expect-error tea imagepreview onError */
             onError: (e) => {
                 setIsError(true);
                 (props === null || props === void 0 ? void 0 : props.onError) && props.onError(e);
-            } })) : (React.createElement("img", { "data-testid": "uploaderpc_imgStyle", key: fileID, className: `${CLASS_PREFIX}__image`, ...rest, src: encodeURI(encodeSrc), onError: (e) => {
+            } })) : (React.createElement("img", { "data-testid": "uploaderpc_imgStyle", key: fileID, className: `${CLASS_PREFIX}__image ${imgTypeCls}`, ...rest, src: encodeURI(encodeSrc), onError: (e) => {
                 setIsError(true);
                 (props === null || props === void 0 ? void 0 : props.onError) && props.onError(e);
             } }));

package/dist/web/components/form/uploaderFile/index.css

@@ -345,8 +345,11 @@
 .weda-upload-file-mobile
   .weda-upload-file-mobile__item
   .weda-upload-file-mobile__file-status {
-  margin-left: 4px;
-  display: inline;
+  margin-left: 0.28571rem;
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .weda-upload-file-mobile

package/dist/web/components/form/uploaderFile/uploadFile.h5.js

@@ -8,6 +8,7 @@ import classNames from '../../../utils/classnames';
 import { renderDecorator } from '../renderDecorator';
 import { emptyArray, emptyObject } from '../../../utils/constant';
 import { useTempUrl } from '../../../utils/hooks/use-cloud-id-temp-url';
+import { getParentForm } from '../../../utils/widget-api';
 // 默认组件类前缀
 const CLASS_PREFIX = 'weda-upload-file-mobile';
 // 默认图片类型
@@ -36,7 +37,8 @@ export function UploadFileH5({
 layout, id = '', style = defaultStyle, labelVisible = true, label = '上传文件', requiredFlag = false, disabled = false, className = '', acceptTypes = emptyArray, 
 // 组件属性
 tips = '', btnTitle = '点击上传', maxUploadCount = 9, maxSize = 10, deleteVisible = true, downloadVisible = true, value = emptyArray, // 需要兼容 cloud:和https: 协议，需要兼容字符串和字符串数组
-events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true, onChange = null, isEdit = true, }) {
+events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true, onChange = null, isEdit = true, $node, }) {
+    var _a;
     const [fileIDList, setfileIDList] = React.useState(isInIde() ? [] : filterStrList([].concat(defaultValue, value))); // 上传成功文件ID列表，fileID[]
     const [fileList, setFileList] = React.useState([]); // 上传中的文件列表，file[]，file为原始文件 + uuid属性
     const [fileSizeObj, setFileSizeObj] = React.useState({}); // 管理上传文件大小 {uuid:size}
@@ -44,6 +46,7 @@ events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true,
     const prevDefaultRef = React.useRef([]);
     const fileRef = React.useRef(fileIDList);
     const maxSizeLimit = maxSize > 500 ? 500 : maxSize;
+    const formType = ((_a = getParentForm($node)) === null || _a === void 0 ? void 0 : _a.formType) || 'create';
     React.useMemo(() => {
         //有有效默认值时不刷新，解决初次渲染默认值不显示问题
         if (!isInIde() &&
@@ -169,8 +172,8 @@ events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true,
                     React.createElement("div", { className: `${CLASS_PREFIX}__bd` },
                         fileIDList && fileIDList.length > 0 && (React.createElement("div", { className: "weda-uploader-files_split" })),
                         React.createElement(List, null,
-                            fileIDList.map((d) => (React.createElement(List.Item, { key: d }, React.createElement(TcbFileEcho, { fileID: d, fileList: fileList, onChange: handleChange, disabled: disabled, deleteVisible: deleteVisible, downloadVisible: downloadVisible })))),
-                            fileList.map((item) => (React.createElement(List.Item, { key: item === null || item === void 0 ? void 0 : item._uuid }, React.createElement(TcbFileUpload, { disabled: disabled, file: item, downloadVisible: downloadVisible, deleteVisible: deleteVisible && !disabled })))))))))))({
+                            fileIDList.map((d) => (React.createElement(List.Item, { key: d }, React.createElement(TcbFileEcho, { fileID: d, fileList: fileList, onChange: handleChange, disabled: disabled, deleteVisible: deleteVisible, downloadVisible: downloadVisible, formType: formType })))),
+                            fileList.map((item) => (React.createElement(List.Item, { key: item === null || item === void 0 ? void 0 : item._uuid }, React.createElement(TcbFileUpload, { disabled: disabled, file: item, downloadVisible: downloadVisible, deleteVisible: deleteVisible && !disabled, formType: formType })))))))))))({
         id,
         className: cls,
         style,
@@ -183,7 +186,7 @@ events = emptyObject, defaultValue, uploadPath = 'weda-uploader', single = true,
 /**
  * 基于 FileID 文件回显组件
  */
-const TcbFileEcho = ({ fileID, disabled }) => {
+const TcbFileEcho = ({ fileID, disabled, formType }) => {
     const { fileSizeObj } = React.useContext(FileContext) || {};
     const { data: src, error } = useTempUrl(fileID);
     if (error) {
@@ -203,14 +206,14 @@ const TcbFileEcho = ({ fileID, disabled }) => {
     //上传文件列表展示
     return (React.createElement("div", { className: `${CLASS_PREFIX}__item` },
         React.createElement("div", { className: `${CLASS_PREFIX}__item-left` },
-            React.createElement(UploadFileStatus, { title: label, size: fileSizeObj[fileID] || '--' })),
+            React.createElement(UploadFileStatus, { title: label, size: fileSizeObj[fileID] || '-', formType: formType })),
         React.createElement("div", { className: `${CLASS_PREFIX}__btn-group` },
             React.createElement(UploadFileAction, { title: label, disabled: disabled, status: "UPLOAD_STATUS_SUCCESS", fileID: fileID, src: src }))));
 };
 /**
  * 基于 File 上传文件过程组件
  */
-const TcbFileUpload = ({ file, disabled }) => {
+const TcbFileUpload = ({ file, disabled, formType }) => {
     const { uploadPath, onChange, events } = React.useContext(FileContext) || {};
     const [percent, setPercent] = React.useState(0); // 上传进度
     const [status, setStatus] = React.useState('UPLOAD_STATUS_PENDING'); // 上传状态
@@ -251,7 +254,7 @@ const TcbFileUpload = ({ file, disabled }) => {
     };
     return (React.createElement("div", { className: `${CLASS_PREFIX}__item`, role: "TcbFileUpload" },
         React.createElement("div", { className: `${CLASS_PREFIX}__item-left` },
-            React.createElement(UploadFileStatus, { status: status, percent: percent, size: size, title: title, percentSize: (((file === null || file === void 0 ? void 0 : file.size) / 1024) * percent) / 100 })),
+            React.createElement(UploadFileStatus, { status: status, percent: percent, size: size, title: title, percentSize: (((file === null || file === void 0 ? void 0 : file.size) / 1024) * percent) / 100, formType: formType })),
         React.createElement("div", { className: `${CLASS_PREFIX}__btn-group` },
             React.createElement(UploadFileAction, { file: file, uuid: file === null || file === void 0 ? void 0 : file._uuid, status: status, onCancel: (uuid) => {
                     cancleRef.current = uuid;
@@ -261,7 +264,7 @@ const TcbFileUpload = ({ file, disabled }) => {
 /**
  * 上传文件状态组件
  */
-const UploadFileStatus = ({ status = 'UPLOAD_STATUS_SUCCESS', percent = 0, size, title = null, percentSize = 0, }) => {
+const UploadFileStatus = ({ status = 'UPLOAD_STATUS_SUCCESS', percent = 0, size, title = null, percentSize = 0, formType, }) => {
     var _a, _b;
     const { isEdit } = React.useContext(FileContext) || {};
     //上传中、待上传状态
@@ -273,11 +276,11 @@ const UploadFileStatus = ({ status = 'UPLOAD_STATUS_SUCCESS', percent = 0, size,
             React.createElement("div", null,
                 React.createElement(Progress, { percent: percent, theme: "default", strokeColor: '#0052D9', className: `${CLASS_PREFIX}__file-progress` })),
             React.createElement("div", { className: `${CLASS_PREFIX}__file-foot` },
-                React.createElement("div", null,
+                formType !== 'read' && (React.createElement("div", null,
                     React.createElement(Text, null,
                         Math.floor(percentSize),
                         "K/"),
-                    React.createElement(Text, null, size)),
+                    React.createElement(Text, null, size))),
                 React.createElement(Text, null, status === 'UPLOAD_STATUS_PENDING' ? '等待上传' : '上传中'))));
     }
     return (React.createElement(React.Fragment, null,
@@ -285,8 +288,8 @@ const UploadFileStatus = ({ status = 'UPLOAD_STATUS_SUCCESS', percent = 0, size,
             React.createElement(Tooltip, { title: title },
                 React.createElement(Text, { className: `${CLASS_PREFIX}__file-name` }, title))),
         isEdit && (React.createElement("div", { className: `${CLASS_PREFIX}__file-foot` },
-            React.createElement("div", null,
-                React.createElement(Text, null, size)),
+            formType !== 'read' && (React.createElement("div", null,
+                React.createElement(Text, null, size))),
             isEdit && (React.createElement("div", { className: `${CLASS_PREFIX}__file-status` },
                 React.createElement(Icon, { type: ((_a = statusMap[status]) === null || _a === void 0 ? void 0 : _a.icon) ||
                         statusMap['UPLOAD_STATUS_PENDING'].icon }),