@cloudbase/weda-ui 3.4.5 → 3.4.7

package/dist/web/components/flow/modules/operations/config/approval-form-config.js

@@ -0,0 +1,140 @@
+/** 审批类型操作的表单配置(同意、拒绝、处理、转办) */
+export function getApprovalFormConfig(flowProps) {
+    var _a, _b;
+    const { flowDetail, pageInfo } = (flowProps === null || flowProps === void 0 ? void 0 : flowProps.commonFlowData) || {};
+    const { isH5 } = (flowProps === null || flowProps === void 0 ? void 0 : flowProps.flowLocalProps) || {};
+    const actionTypeName = (flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.userTaskType) === 2 ? '处理' : '审批';
+    /** 当前节点名称 只读表单项配置 */
+    const currentNodeNameConfig = {
+        label: '当前节点',
+        content: flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.currentNodeName,
+        readonly: true,
+        field: 'currentNodeName',
+    };
+    /** 当前审批/处理人 只读表单项配置 */
+    const currentApproverNameConfig = {
+        label: `${actionTypeName}人`,
+        content: (flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.currentApproverName) || '-',
+        readonly: true,
+        field: 'currentApproverName',
+    };
+    /** 审批/处理意见 表单项配置 */
+    const commentConfig = {
+        label: `${actionTypeName}意见`,
+        field: 'comment',
+        help: '输入@唤起成员选择框',
+        component: 'FlowComment',
+        defaultValue: {
+            operationComment: '',
+            opinionUserMap: {},
+            highlightPositionList: '{}',
+        },
+        props: {
+            isH5,
+            bordered: !isH5,
+            atButtonStyle: {
+                position: 'absolute',
+                top: 12,
+                right: 24,
+            },
+        },
+        extra: {
+            isH5Vertical: true,
+        },
+        validate: (comment) => {
+            var _a;
+            if (((_a = comment === null || comment === void 0 ? void 0 : comment.operationComment) === null || _a === void 0 ? void 0 : _a.length) > 500)
+                return '输入长度不可超过500，请检查';
+            return '';
+        },
+    };
+    /** 抄送/转办 表单项配置 */
+    const userSelectConfig = {
+        label: '抄送',
+        field: 'ccUserIds',
+        hidden: !(pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showCarbonCopy),
+        component: 'FlowUserSelect',
+        props: {
+            label: '抄送',
+            showOriginEntry: true,
+            multiple: true,
+            className: 'weda-flow-approval-user-select',
+            isH5,
+        },
+        defaultValue: '',
+        transform({ userIds }) {
+            return (userIds || []).join();
+        },
+    };
+    /** 表单配置 */
+    return {
+        agree: {
+            formTitle: `审批意见 - ${((_a = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.buttons) === null || _a === void 0 ? void 0 : _a[1]) || '同意'}`,
+            formItems: [
+                currentNodeNameConfig,
+                currentApproverNameConfig,
+                commentConfig,
+                userSelectConfig,
+            ],
+        },
+        reject: {
+            formTitle: `审批意见 - ${((_b = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.buttons) === null || _b === void 0 ? void 0 : _b[2]) || '拒绝'}`,
+            formItems: [
+                currentNodeNameConfig,
+                currentApproverNameConfig,
+                {
+                    ...commentConfig,
+                    required: true,
+                    validate: (comment) => {
+                        var _a, _b;
+                        if (!((_a = comment === null || comment === void 0 ? void 0 : comment.operationComment) === null || _a === void 0 ? void 0 : _a.trim()))
+                            return '请输入审批意见';
+                        if (((_b = comment === null || comment === void 0 ? void 0 : comment.operationComment) === null || _b === void 0 ? void 0 : _b.length) > 500)
+                            return '输入长度不可超过500，请检查';
+                        return '';
+                    },
+                },
+            ],
+        },
+        handle: {
+            formTitle: `${(flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.operationName) || '处理'}意见`,
+            formItems: [
+                currentNodeNameConfig,
+                currentApproverNameConfig,
+                commentConfig,
+                userSelectConfig,
+            ],
+        },
+        turn_to_person: {
+            formTitle: '审批意见 - 转办',
+            formItems: [
+                currentNodeNameConfig,
+                currentApproverNameConfig,
+                {
+                    ...userSelectConfig,
+                    label: '转办',
+                    field: 'turnToUserId',
+                    props: {
+                        ...userSelectConfig.props,
+                        label: '转办',
+                        multiple: false,
+                    },
+                    required: true,
+                    transform({ userIds }) {
+                        return userIds;
+                    },
+                    validate(turnToUserId) {
+                        if (!turnToUserId)
+                            return '请选择转办人员';
+                        return '';
+                    },
+                },
+            ],
+            submitDefaultValues: {
+                operationComment: '',
+                opinionUserMap: {},
+                highlightPositionList: '{}',
+            },
+        },
+    };
+}

package/dist/web/components/flow/modules/operations/config/control-config.js

@@ -0,0 +1,218 @@
+import { getApprovalFormConfig } from './approval-form-config';
+/** 流程操作配置 */
+export function getControlConfig(flowProps) {
+    var _a, _b, _c;
+    const { commonFlowData, flowLocalProps } = flowProps || {};
+    const { flowDetail, pageInfo } = commonFlowData || {};
+    const { currentPageType, isH5 } = flowLocalProps || {};
+    const approvalFormConfig = getApprovalFormConfig(flowProps);
+    const config = [
+        {
+            actionKey: FLOW_CONTROL_ACTION_KEY.ROLL_BACK,
+            component: 'RollbackModal',
+            props: {
+                label: '回退',
+                afterAction: 'afterGoBack',
+                buttonProps: { type: isH5 ? 'link' : 'weak' },
+            },
+            visible: currentPageType === 'TODO' &&
+                !(pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showSubmitApp) &&
+                (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showRollBack),
+        },
+        {
+            actionKey: FLOW_CONTROL_ACTION_KEY.ADD_ASSIGNEE,
+            component: 'AddAssigneeBtn',
+            props: {
+                label: '加签',
+                afterAction: 'afterAddAssignee',
+                buttonProps: { type: isH5 ? 'link' : 'weak' },
+            },
+            visible: currentPageType === 'TODO' &&
+                !(pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showSubmitApp) &&
+                (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showAddAssignee),
+        },
+        {
+            actionKey: FLOW_CONTROL_ACTION_KEY.TURN_TO_PERSON,
+            component: 'ApprovalDrawer',
+            props: {
+                label: '转办',
+                buttonAction: 4,
+                afterAction: 'afterTransfer',
+                approvalFormInfo: approvalFormConfig.turn_to_person,
+                buttonProps: { type: isH5 ? 'link' : 'weak' },
+            },
+            visible: currentPageType === 'TODO' &&
+                !(pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showSubmitApp) &&
+                (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showTurnToPerson),
+        },
+        {
+            actionKey: FLOW_CONTROL_ACTION_KEY.REJECT,
+            component: 'ApprovalDrawer',
+            props: {
+                label: ((_a = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.buttons) === null || _a === void 0 ? void 0 : _a[2]) || '拒绝',
+                buttonAction: 3,
+                afterAction: 'afterReject',
+                approvalFormInfo: approvalFormConfig.reject,
+                buttonProps: {
+                    type: isH5 ? 'link' : 'error',
+                    style: isH5 ? { color: '#E34D59' } : {},
+                },
+                buttonIcon: isH5 ? 'close-circle' : '',
+            },
+            visible: currentPageType === 'TODO' &&
+                !(pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showSubmitApp) &&
+                (flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.userTaskType) !== 2,
+        },
+        {
+            actionKey: FLOW_CONTROL_ACTION_KEY.AGREE,
+            component: 'ApprovalDrawer',
+            props: {
+                label: ((_b = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.buttons) === null || _b === void 0 ? void 0 : _b[1]) || '同意',
+                buttonAction: 2,
+                afterAction: 'afterAgree',
+                approvalFormInfo: approvalFormConfig.agree,
+                buttonProps: {
+                    type: isH5 ? 'link' : 'primary',
+                    style: isH5 ? { color: '#00A870' } : {},
+                },
+                buttonIcon: isH5 ? 'check-circle' : '',
+            },
+            hideDivider: true,
+            visible: currentPageType === 'TODO' &&
+                !(pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showSubmitApp) &&
+                (flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.userTaskType) !== 2,
+        },
+        {
+            actionKey: FLOW_CONTROL_ACTION_KEY.HANDLE,
+            component: 'ApprovalDrawer',
+            props: {
+                label: (flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.operationName) || '处理',
+                buttonAction: 2,
+                afterAction: 'afterHandle',
+                approvalFormInfo: approvalFormConfig.handle,
+                buttonProps: {
+                    type: isH5 ? 'link' : 'primary',
+                    style: isH5 ? { color: '#00A870' } : {},
+                },
+                buttonIcon: isH5 ? 'edit-1' : '',
+            },
+            hideDivider: true,
+            visible: currentPageType === 'TODO' &&
+                !(pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showSubmitApp) &&
+                (flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.userTaskType) === 2,
+        },
+        {
+            actionKey: FLOW_CONTROL_ACTION_KEY.REVOKE,
+            component: 'RevokeModal',
+            props: {
+                label: '撤销',
+                afterAction: 'afterRevoke',
+                buttonProps: {
+                    type: isH5 ? 'link' : 'error',
+                    style: isH5 ? { color: '#E34D59' } : {},
+                },
+                buttonIcon: isH5 ? 'minus-circle' : '',
+            },
+            hideDivider: true,
+            visible: ['CREATE', 'DONE'].includes(currentPageType) && (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showRevoke),
+        },
+        {
+            actionKey: FLOW_CONTROL_ACTION_KEY.CC,
+            component: 'ApplyCcBtn',
+            props: {
+                label: '抄送',
+                buttonProps: { type: isH5 ? 'link' : 'weak' },
+            },
+            visible: ['DRAFT', 'CREATEFLOW', 'TODO'].includes(currentPageType) &&
+                (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.show) &&
+                (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showSubmitApp) &&
+                (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showCarbonCopy),
+        },
+        {
+            actionKey: FLOW_CONTROL_ACTION_KEY.SAVE_DRAFT,
+            component: 'InitiationBtn',
+            props: {
+                label: '保存草稿',
+                buttonAction: 17,
+                afterAction: 'afterSavedDraft',
+                buttonProps: { type: isH5 ? 'link' : 'weak' },
+            },
+            visible: ['DRAFT', 'CREATEFLOW'].includes(currentPageType) &&
+                (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.show) &&
+                (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showSubmitApp) &&
+                (flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.canDelete),
+        },
+        {
+            actionKey: FLOW_CONTROL_ACTION_KEY.CANCEL_SUBMIT,
+            component: 'CancelApplyBtn',
+            props: {
+                label: '取消',
+                buttonProps: {
+                    type: isH5 ? 'link' : 'error',
+                    style: isH5 ? { color: '#E34D59' } : {},
+                },
+                buttonIcon: isH5 ? 'close-circle' : '',
+            },
+            visible: ['DRAFT', 'CREATEFLOW'].includes(currentPageType) &&
+                (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.show) &&
+                (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showSubmitApp) &&
+                (flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.canDelete),
+        },
+        {
+            actionKey: FLOW_CONTROL_ACTION_KEY.SUBMIT,
+            component: 'InitiationBtn',
+            props: {
+                label: ((_c = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.buttons) === null || _c === void 0 ? void 0 : _c[3]) || '提交申请',
+                buttonAction: 1,
+                afterAction: 'afterSubmit',
+                buttonIcon: isH5 ? 'upload' : '',
+                buttonProps: {
+                    type: isH5 ? 'link' : 'primary',
+                    style: isH5 ? { color: '#00A870' } : {},
+                },
+            },
+            hideDivider: true,
+            visible: ['DRAFT', 'CREATEFLOW', 'TODO'].includes(currentPageType) &&
+                (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.show) &&
+                (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showSubmitApp),
+        },
+        {
+            actionKey: FLOW_CONTROL_ACTION_KEY.NEXT_APPROVER,
+            component: 'FlowTaskInfoModal',
+            props: {
+                label: '选择下一节点处理人',
+                afterAction: 'afterSelectNextApprover',
+            },
+            visible: currentPageType === 'TODO',
+            hideDivider: true,
+        },
+    ];
+    config.forEach((config) => {
+        // 统一设置id和流程公共属性
+        config.props = {
+            ...config.props,
+            id: setConfigElementId(config.actionKey),
+            flowFrameCommonProps: flowProps,
+        };
+    });
+    return config;
+}
+/** 流程操作标识常量 */
+export const FLOW_CONTROL_ACTION_KEY = {
+    AGREE: 'agree',
+    REJECT: 'reject',
+    HANDLE: 'handle',
+    TURN_TO_PERSON: 'turn_to_person',
+    ROLL_BACK: 'roll_back',
+    ADD_ASSIGNEE: 'add_assignee',
+    REVOKE: 'revoke',
+    SUBMIT: 'submit',
+    CC: 'cc',
+    SAVE_DRAFT: 'save_draft',
+    CANCEL_SUBMIT: 'cancel_submit',
+    NEXT_APPROVER: 'next_approver',
+};
+/** 设置流程控制配置按钮Id */
+function setConfigElementId(configKey) {
+    return `weda_flow_${configKey}_btn`;
+}

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

@@ -0,0 +1,2 @@
+export * from './control-config';
+export * from './types';

package/dist/web/components/flow/modules/operations/config/types.js

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

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button } from 'tea-component';
+import { WdDivider } from '../../../wd-divider';
+import { createModuleFrame } from '../../frame';
+import { getControlConfig } from './config';
+import { useFlowControlModel } from './view-model';
+import { CONTROL_COMPONENT } from './controls-items';
+import './style.css';
+/** 流程控制组件 */
+const FlowControl = (props) => {
+    const controlModel = useFlowControlModel(props);
+    const configs = getControlConfig(props);
+    /** 已回退之后不显示任何操作按钮 */
+    if (controlModel.hasGoBack)
+        return null;
+    return (React.createElement("div", { className: `weda-flow-control ${props.flowLocalProps.isH5 ? 'weda-flow-h5-control' : ''}` }, configs.map((config) => {
+        const { component, props, visible, actionKey } = config;
+        const Component = CONTROL_COMPONENT[component] || Button;
+        if (!visible)
+            return null;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Component, { ...props, key: config.actionKey, actionKey: actionKey, flowControlModel: controlModel }),
+            !(config === null || config === void 0 ? void 0 : config.hideDivider) && (React.createElement(WdDivider, { type: "solid", className: "weda-flow-control-divider" }))));
+    })));
+};
+export const ModelFlowControl = createModuleFrame(FlowControl, 'flow-control');

package/dist/web/components/flow/modules/operations/controls-items/add-assignee-btn.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { message } from 'tea-component';
+import { FlowUserSelectBtn } from '../components';
+/**
+ * 提交申请抄送按钮
+ */
+export function AddAssigneeBtn(props) {
+    const { flowControlModel, flowFrameCommonProps } = props;
+    const { flowRequest } = flowFrameCommonProps.flowLocalProps;
+    const { flowDetail } = flowFrameCommonProps.commonFlowData;
+    const onUserChange = (user) => {
+        addCounterSignAssignee(user.userIds);
+    };
+    /** 加签请求 */
+    const addCounterSignAssignee = async (assigneeIds) => {
+        const result = await flowRequest({
+            action: 'AddCounterSignAssignee',
+            data: {
+                instanceId: flowDetail.instanceId,
+                nodeId: flowDetail.currentNodeId,
+                taskId: flowDetail.taskId,
+                assigneeIds,
+            },
+        });
+        if (result === null || result === void 0 ? void 0 : result.status) {
+            message.success({
+                content: `${props.label}成功`,
+            });
+            flowControlModel.onAfterFinishFlowAction(props.actionKey, props.afterAction);
+        }
+    };
+    return (React.createElement(FlowUserSelectBtn, { buttonProps: { ...props.buttonProps, id: props.id }, buttonText: props.label, onChange: onUserChange, isH5: props.flowFrameCommonProps.flowLocalProps.isH5, multiple: true }));
+}

package/dist/web/components/flow/modules/operations/controls-items/apply-cc-btn.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FlowUserSelectBtn } from '../components';
+/**
+ * 提交申请抄送按钮
+ */
+export function ApplyCcBtn(props) {
+    var _a, _b;
+    const onUserChange = (user) => {
+        props.flowControlModel.setApplyCcUser(user.userIds);
+    };
+    return (React.createElement(FlowUserSelectBtn, { buttonProps: { ...props.buttonProps, id: props.id }, buttonText: `${props.label}(${(_b = (_a = props.flowControlModel.applyCcUser) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0})`, onChange: onUserChange, isH5: props.flowFrameCommonProps.flowLocalProps.isH5, multiple: true }));
+}

package/dist/web/components/flow/modules/operations/controls-items/approval-drawer/comment/index.js

@@ -0,0 +1,188 @@
+import React, { useState, useRef } from 'react';
+// eslint-disable-next-line import/no-named-as-default
+import HighlightWithinTextarea from 'react-highlight-within-textarea';
+import { Button } from 'tea-component';
+import { FlowUserSelect } from '../../../components';
+import './style.css';
+export function FlowComment(props) {
+    const { placeholder = '请输入评论，可@通知他人', isH5 = false, bordered = true, } = props;
+    const [commentValue, setCommentValue] = useState('');
+    /** 高亮位置数组 */
+    const [highlightPositions, setHighlightPositions] = useState([]);
+    /** 用户弹窗是否显示 */
+    const [userModalVisible, setUserModalVisible] = useState(false);
+    /** 存储同事用户的对象 */
+    const opinionUserMapRef = useRef({});
+    /** 输入框实例对象 */
+    const textAreaRef = useRef();
+    /** 记录上一次的评论内容状态，用于统计 @ 符号  useKeyboardEventModel - countAtSignal*/
+    const prevCommentValue = useRef('');
+    const rangeModel = useRangeModel();
+    const keyboardModel = useKeyboardEventModel({
+        commentValue,
+        isH5,
+        atEvent: onPressAtSingle,
+    });
+    /** @ 按键事件 */
+    function onPressAtSingle() {
+        setUserModalVisible(true);
+        rangeModel.getRange(isH5);
+    }
+    /** 评论内容变更 */
+    const onCommentChange = (value) => {
+        rangeModel.getRange(!isH5);
+        // 防止因setHighlightPositions导致onChange重复执行
+        if (value === prevCommentValue.current && value !== '')
+            return;
+        prevCommentValue.current = value;
+        setCommentValue(value);
+        handleCommentValueChange(value);
+    };
+    /** 用户选择变更 */
+    const onUserChange = ({ users }) => {
+        let value = isH5 ? '@' : '';
+        users.forEach((user, index) => {
+            const name = `@${user.userName}`;
+            value = `${value + user.userName} `;
+            if (index < users.length - 1) {
+                value = `${value}@`;
+            }
+            if (!opinionUserMapRef.current[user.userId]) {
+                opinionUserMapRef.current[user.userId] = name;
+            }
+        });
+        const insertResult = rangeModel.insertValue(value);
+        const newValue = textAreaRef.current.editor.innerText;
+        setCommentValue(insertResult ? newValue : value);
+        handleCommentValueChange(insertResult ? newValue : value);
+    };
+    /** 处理评论内容变更 */
+    const handleCommentValueChange = (comment) => {
+        var _a, _b;
+        if (!comment) {
+            const values = {
+                operationComment: '',
+                opinionUserMap: {},
+                highlightPositionList: '{}',
+            };
+            opinionUserMapRef.current = {};
+            (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, values);
+            setHighlightPositions([]);
+            return;
+        }
+        const { res: highlightPositions, obj: highlightPositionObj } = checkHighlight(comment, opinionUserMapRef.current);
+        const opinionUserMap = checkOpinionUserMap(opinionUserMapRef.current, comment);
+        const newValues = {
+            operationComment: comment,
+            opinionUserMap: opinionUserMap,
+            highlightPositionList: JSON.stringify(highlightPositionObj),
+        };
+        (_b = props === null || props === void 0 ? void 0 : props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, newValues);
+        setHighlightPositions(highlightPositions);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: `weda-flow-comment ${bordered ? 'bordered' : ''}`, onKeyUp: keyboardModel.onKeyUp },
+            React.createElement(HighlightWithinTextarea, { value: commentValue, onChange: onCommentChange, highlight: highlightPositions, placeholder: placeholder, ref: textAreaRef, onFocus: () => rangeModel.getRange(!isH5), onBlur: () => rangeModel.getRange(!isH5) }),
+            React.createElement(FlowUserSelect, { visible: userModalVisible, multiple: true, onChange: onUserChange, onClose: () => setUserModalVisible(false), defaultValue: [], isH5: props.isH5 })),
+        isH5 ? (React.createElement(Button, { type: "link", onClick: onPressAtSingle, style: props.atButtonStyle }, "@\u67D0\u4EBA")) : null));
+}
+/** 处理评论框光标hook */
+function useRangeModel() {
+    const range = useRef();
+    const getRange = (stop = false) => {
+        var _a;
+        if (stop)
+            return;
+        // 获取光标位置
+        const selection = window.getSelection();
+        if ((selection === null || selection === void 0 ? void 0 : selection.rangeCount) === 0)
+            return;
+        const currentRange = (selection === null || selection === void 0 ? void 0 : selection.rangeCount) !== 0 ? (_a = selection === null || selection === void 0 ? void 0 : selection.getRangeAt) === null || _a === void 0 ? void 0 : _a.call(selection, 0) : null;
+        range.current = currentRange;
+    };
+    const insertValue = (addValue) => {
+        var _a, _b;
+        if (range.current) {
+            (_b = (_a = range.current) === null || _a === void 0 ? void 0 : _a.insertNode) === null || _b === void 0 ? void 0 : _b.call(_a, document.createTextNode(addValue));
+            return true;
+        }
+        return false;
+    };
+    return {
+        getRange,
+        insertValue,
+    };
+}
+/** 处理评论框键盘事件hook */
+function useKeyboardEventModel({ commentValue, isH5, atEvent, }) {
+    const prevCommentValueRef = useRef(commentValue);
+    /** 统计'@'符号个数 */
+    const countAtSignal = (currentValue) => {
+        let count1 = 0;
+        let count2 = 0;
+        for (const v of currentValue) {
+            if (v === '@') {
+                count1 += 1;
+            }
+        }
+        for (const v of prevCommentValueRef.current) {
+            if (v === '@') {
+                count2 += 1;
+            }
+        }
+        return count1 === count2;
+    };
+    /** 评论框KeyUp事件 */
+    const onKeyUp = (e) => {
+        if (!isH5 && e.shiftKey && (e.key === '@' || e.keyCode === 50)) {
+            atEvent === null || atEvent === void 0 ? void 0 : atEvent();
+            return;
+        }
+        // 判断当下value值是否存在2
+        if (!isH5 && e.keyCode === 50 && !countAtSignal(commentValue)) {
+            atEvent === null || atEvent === void 0 ? void 0 : atEvent();
+        }
+        prevCommentValueRef.current = commentValue;
+    };
+    return {
+        onKeyUp,
+    };
+}
+/** 检查高亮位置数据 */
+function checkHighlight(text, opinionUserMap) {
+    const highlightList = Object.values(opinionUserMap);
+    const len = highlightList.length;
+    let v = text;
+    let res = [];
+    // 回显时使用，必须顺序排列
+    let obj = {};
+    for (let i = 0; i < len; i++) {
+        const indexof = v.indexOf(highlightList[i]);
+        const itemLen = highlightList[i].length;
+        if (indexof !== -1) {
+            const endIndex = indexof + itemLen;
+            res.push([indexof, endIndex]);
+            obj[indexof] = endIndex;
+            const fillText = new Array(itemLen).fill(' ').join(''); // 空格填充
+            v = v.substring(0, indexof) + fillText + v.substring(endIndex);
+        }
+    }
+    if (res.length > 0 && v.includes('@')) {
+        // 继续检查剩下文本，是否存在重复@
+        const { res: arr, obj: objCopy } = checkHighlight(v, opinionUserMap);
+        res = res.concat(arr);
+        obj = { ...obj, ...objCopy };
+    }
+    return { res, obj };
+}
+/** 检查通知用户Map */
+function checkOpinionUserMap(currentOpinionUserMap, commentValue) {
+    const newOpinionUserMap = {};
+    // value每次change后需要再次检查opinionUserMap
+    for (const [id, name] of Object.entries(currentOpinionUserMap)) {
+        if (commentValue.indexOf(name) !== -1) {
+            newOpinionUserMap[id] = name;
+        }
+    }
+    return newOpinionUserMap;
+}

package/dist/web/components/flow/modules/operations/controls-items/approval-drawer/comment/style.css

@@ -0,0 +1,51 @@
+.weda-flow-comment {
+  position: relative;
+  height: 100px;
+  text-align: left;
+  overflow: auto;
+  display: inline-block;
+  width: 100%;
+  border-radius: 3px;
+}
+
+.weda-flow-comment.bordered {
+  border: 1px solid #dcdee6;
+}
+
+.weda-flow-comment .DraftEditor-root {
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+  height: 100%;
+}
+.weda-flow-comment .public-DraftEditorPlaceholder-root {
+  position: absolute;
+  z-index: 0;
+  margin: 5px;
+  color: #999999;
+  font-size: 12px;
+  left: 5px;
+  width: 90%;
+  pointer-events: none;
+}
+
+.weda-flow-comment .DraftEditor-root .DraftEditor-editorContainer {
+  padding: 5px;
+  height: 100%;
+}
+.weda-flow-comment
+  .DraftEditor-root
+  .DraftEditor-editorContainer
+  .public-DraftEditor-content {
+  height: 100%;
+}
+.weda-flow-comment .DraftEditor-root .DraftEditor-editorContainer mark {
+  color: #888888;
+  background: transparent;
+}
+.weda-flow-comment .highlight-textarea-placeholder {
+  position: absolute;
+  z-index: 0;
+  margin: 5px;
+  color: #999999;
+}