@cloudbase/weda-ui 3.4.2 → 3.4.4

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

@@ -0,0 +1,178 @@
+import React, { useState, useEffect } from 'react';
+import { Drawer, Button, Form, Icon } from 'tea-component';
+import { HighlightTextarea, UserSelectModel } from '../../components';
+import { useControlContext } from './provider';
+import './ApprovalDrawer.css';
+const ExtraDOM = (props) => {
+    const { 
+    // fileList,
+    approveInfo, onChange, 
+    // appCode,
+    type, operationName, statusFlag, setStatusFlag, statusMessage, setStatusMessage, opinionUserMap, setOpinionUserMap, setHighlightPositionMap, } = props;
+    const approveInfoLabel = type === 'handle' ? `${operationName}意见` : '审批意见';
+    return (React.createElement(Form.Item, { label: approveInfoLabel, required: type === 'reject', status: statusFlag, message: statusMessage },
+        React.createElement(HighlightTextarea, { value: approveInfo, placeholder: `请输入您的${approveInfoLabel},可@通知他人`, opinionUserMap: opinionUserMap, setOpinionUserMap: setOpinionUserMap, setHighlightPositionMap: setHighlightPositionMap, onChange: (value) => {
+                onChange('approveInfo', value);
+                setStatusFlag('');
+                setStatusMessage(null);
+                if (type === 'reject' && !value.trim()) {
+                    setStatusFlag('error');
+                    setStatusMessage(`请输入${approveInfoLabel}`);
+                }
+                if (value.length > 500) {
+                    setStatusFlag('error');
+                    setStatusMessage(`${approveInfoLabel}长度不可超过500，请检查`);
+                }
+            } })));
+};
+const ApprovePerson = (props) => {
+    const { label, approvers, show, onChange } = props;
+    const removeItem = (index) => {
+        const approversAvatar = approvers.filter((item, idx) => idx !== index);
+        onChange(approversAvatar);
+    };
+    return (React.createElement(Form.Item, { label: label, className: "btn-wrapper__black person-btn__wrapper" },
+        React.createElement(Button, { onClick: show },
+            React.createElement("span", { style: { fontSize: '16px', lineHeight: '16px' } }, "+"),
+            " ",
+            '人员'),
+        approvers.length > 0
+            ? approvers.map(({ text }, index) => (React.createElement("div", { className: "person-item", key: `person-${index}` },
+                React.createElement("span", null, text),
+                React.createElement(Icon, { type: "dismiss", onClick: () => removeItem(index) }))))
+            : null));
+};
+export const ApprovalDrawer = (props) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { pageInfo, flowDetail } = props;
+    const { handleType, approveDrawerVisible, submitLoading, onTriggerFlowEvent, onApproveDrawerVisibleChange, } = useControlContext();
+    const { startAppCode: appCode, currentNodeName: nodeName, operationName, currentApproverName, } = flowDetail || {};
+    const { buttons, showCarbonCopy } = pageInfo || {};
+    const [fileList, setFileList] = useState((_a = props.fileList) !== null && _a !== void 0 ? _a : []);
+    const [approveInfo, setApproveInfo] = useState((_b = props.approveInfo) !== null && _b !== void 0 ? _b : '');
+    const [opinionUserMap, setOpinionUserMap] = useState({});
+    const [highlightPositionMap, setHighlightPositionMap] = useState({});
+    const [approvers, setApprovers] = useState((_c = props.approvers) !== null && _c !== void 0 ? _c : []);
+    const [modalVisible, setModalVisible] = useState(false);
+    const [statusFlag, setStatusFlag] = useState('');
+    const [statusMessage, setStatusMessage] = useState(null);
+    const showModal = () => setModalVisible(true);
+    const hideModal = () => setModalVisible(false);
+    const stateMap = {
+        fileList: {
+            default: [],
+            fn: setFileList,
+        },
+        // addTag: {
+        //   default: false,
+        //   fn: setTagStatus,
+        // },
+        approveInfo: {
+            default: '',
+            fn: setApproveInfo,
+        },
+        approvers: {
+            default: [],
+            fn: setApprovers,
+        },
+        statusFlag: {
+            default: '',
+            fn: setStatusFlag,
+        },
+        statusMessage: {
+            default: null,
+            fn: setStatusMessage,
+        },
+    };
+    const approvalType = {
+        agree: {
+            title: `${(buttons === null || buttons === void 0 ? void 0 : buttons[1]) || '同意'}`,
+            dom: true,
+            personLabel: '抄送',
+        },
+        reject: {
+            title: `${(buttons === null || buttons === void 0 ? void 0 : buttons[2]) || '拒绝'}`,
+            dom: true,
+            personLabel: '抄送',
+        },
+        transfer: {
+            title: '转办',
+            dom: false,
+            personLabel: '转办',
+        },
+        handle: {
+            title: '处理',
+            dom: true,
+            personLabel: '处理',
+        },
+    };
+    useEffect(() => {
+        if (!approveDrawerVisible) {
+            Object.values(stateMap).forEach(({ default: defaultValue, fn }) => fn(defaultValue));
+        }
+        else {
+            // postUserInfo().then((res) => {
+            //   if (res?.data) {
+            //     setApprover(res?.data?.name);
+            //   }
+            // });
+        }
+    }, [approveDrawerVisible]);
+    const handleSubmit = () => {
+        var _a;
+        // const getIdReg = /^(\d+)&(?:user|group),(?:.+)$/;
+        if (submitLoading)
+            return;
+        const obj = {
+            operationComment: approveInfo,
+            opinionUserMap,
+            highlightPositionList: JSON.stringify(highlightPositionMap),
+            attachmentInfo: JSON.stringify(fileList),
+            ccUserIds: approvers.map((item) => item.value).join(','),
+            turnToUserId: (_a = approvers === null || approvers === void 0 ? void 0 : approvers[0]) === null || _a === void 0 ? void 0 : _a.value,
+        };
+        switch (handleType) {
+            case 'agree':
+                Reflect.deleteProperty(obj, 'turnToUserId');
+                break;
+            case 'reject':
+                Reflect.deleteProperty(obj, 'ccUserIds');
+                Reflect.deleteProperty(obj, 'turnToUserId');
+                break;
+            case 'transfer':
+                Reflect.deleteProperty(obj, 'ccUserIds');
+                break;
+        }
+        onTriggerFlowEvent(obj);
+    };
+    const onChange = (key, value) => {
+        stateMap[key].fn(value);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Drawer, { showMask: true, size: 'l', className: "approval-drawer drawer", outerClickClosable: false, visible: approveDrawerVisible, title: handleType === 'handle'
+                ? `${operationName}意见`
+                : `审批意见-${(_d = approvalType === null || approvalType === void 0 ? void 0 : approvalType[handleType]) === null || _d === void 0 ? void 0 : _d.title}`, onClose: onApproveDrawerVisibleChange, footer: React.createElement("div", { className: "btn-wrapper" },
+                React.createElement(Button, { className: "submit-btn", type: "primary", loading: submitLoading, onClick: () => {
+                        if (handleType === 'reject' && !approveInfo.trim()) {
+                            setStatusFlag('error');
+                            setStatusMessage('请输入审批意见');
+                            return;
+                        }
+                        if (approveInfo.length > 500) {
+                            setStatusFlag('error');
+                            setStatusMessage('审批意见长度不可超过500，请检查');
+                            return;
+                        }
+                        handleSubmit();
+                    } }, "\u63D0\u4EA4"),
+                React.createElement(Button, { onClick: onApproveDrawerVisibleChange }, "\u53D6\u6D88")) },
+            React.createElement(Form, { className: "approval-form__drawer" },
+                React.createElement(Form.Item, { label: '当前节点' },
+                    React.createElement("span", { className: "form-item__plain" }, nodeName)),
+                React.createElement(Form.Item, { label: handleType === 'handle' ? '处理人' : '审批人' },
+                    React.createElement("span", { className: "form-item__plain" }, currentApproverName || '--')),
+                ((_e = approvalType === null || approvalType === void 0 ? void 0 : approvalType[handleType]) === null || _e === void 0 ? void 0 : _e.dom) ? (React.createElement(ExtraDOM, { type: handleType, appCode: appCode, onChange: onChange, fileList: fileList, approveInfo: approveInfo, operationName: operationName, statusFlag: statusFlag, setStatusFlag: setStatusFlag, statusMessage: statusMessage, setStatusMessage: setStatusMessage, opinionUserMap: opinionUserMap, setOpinionUserMap: setOpinionUserMap, setHighlightPositionMap: setHighlightPositionMap })) : null,
+                handleType !== 'reject' &&
+                    (showCarbonCopy || handleType === 'transfer') ? (React.createElement(ApprovePerson, { approvers: approvers, label: (_f = approvalType === null || approvalType === void 0 ? void 0 : approvalType[handleType]) === null || _f === void 0 ? void 0 : _f.personLabel, show: showModal, onChange: (val) => onChange('approvers', val) })) : null)),
+        React.createElement(UserSelectModel, { visible: modalVisible, onChange: (val) => onChange('approvers', val), onClose: hideModal, value: approvers === null || approvers === void 0 ? void 0 : approvers.map((item) => item === null || item === void 0 ? void 0 : item.value) })));
+};

package/dist/web/components/flow/modules/control/ApprovalPopup.css

@@ -0,0 +1,115 @@
+.cp-vant-popup {
+  z-index: 998 !important;
+}
+.cp-vant-popup h3.popup-title {
+  padding: 20px 24px 12px;
+}
+.cp-vant-popup .rv-cell {
+  padding: 12px 24px;
+}
+.cp-vant-popup .rv-field + .rv-field {
+  margin-top: 12px;
+}
+.cp-vant-popup .rv-field__control {
+  color: #000;
+}
+.cp-vant-popup .rv-cell:not(:last-child)::after {
+  left: 24px;
+  right: 24px;
+  border-bottom: 1px solid #dcdee6;
+}
+.cp-vant-popup .apa-height-xl.wedatea2td-btn.success-btn {
+  padding: 0;
+  height: 40px;
+  line-height: 40px;
+  min-width: 152px;
+  position: absolute;
+  bottom: 30px;
+  left: 20px;
+  right: 20px;
+  width: calc(100% - 48px);
+}
+.cp-vant-popup .popup-content-wrapper {
+  height: calc(100% - 90px);
+  overflow: auto;
+}
+.cp-vant-popup h3.popup-title {
+  padding: 20px;
+  padding-bottom: 10px;
+  font-size: 14px;
+}
+.cp-vant-popup .rv-cell {
+  padding-left: 20px;
+}
+.cp-vant-popup .upload-cell_wrapper .pant-cell__title {
+  display: flex;
+  justify-content: space-between;
+}
+.cp-vant-popup .label-execute__btn .rv-cell__value .rv-field__control-wrapper {
+  margin-right: 12px;
+  justify-content: flex-end;
+  color: #2473f2;
+}
+.cp-vant-popup
+  .label-execute__btn
+  .rv-cell__value
+  .rv-field__control-wrapper
+  .rv-field__children {
+  justify-content: flex-end;
+}
+.cp-vant-popup .label-execute__btn .btn-show-modal {
+  display: flex;
+  align-items: center;
+}
+.cp-vant-popup .label-execute__btn .apa-icon {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-position: inherit;
+  font-size: 0;
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU4ICg4NDY2MykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+55S75p2/PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IueUu+advyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IuWbvuaghy/mt7vliqAiPgogICAgICAgICAgICA8ZyBpZD0i57yW57uEIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik04LDIuNSBDOC4yNzYxNDIzNywyLjUgOC41LDIuNzIzODU3NjMgOC41LDMgTDguNSw3LjUgTDEzLDcuNSBDMTMuMjc2MTQyNCw3LjUgMTMuNSw3LjcyMzg1NzYzIDEzLjUsOCBDMTMuNSw4LjI3NjE0MjM3IDEzLjI3NjE0MjQsOC41IDEzLDguNSBMOC41LDguNSBMOC41LDEzIEM4LjUsMTMuMjc2MTQyNCA4LjI3NjE0MjM3LDEzLjUgOCwxMy41IEM3LjcyMzg1NzYzLDEzLjUgNy41LDEzLjI3NjE0MjQgNy41LDEzIEw3LjUsOC41IEwzLDguNSBDMi43MjM4NTc2Myw4LjUgMi41LDguMjc2MTQyMzcgMi41LDggQzIuNSw3LjcyMzg1NzYzIDIuNzIzODU3NjMsNy41IDMsNy41IEw3LjUsNy41IEw3LjUsMyBDNy41LDIuNzIzODU3NjMgNy43MjM4NTc2MywyLjUgOCwyLjUgWiIgaWQ9IuW9oueKtue7k+WQiCIgZmlsbD0iIzI0NzNGMiI+PC9wYXRoPgogICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48L3JlY3Q+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==);
+}
+.pant-popup .success-btn {
+  position: absolute;
+  bottom: 30px;
+  left: 20px;
+  right: 20px;
+  width: calc(100% - 48px);
+}
+.highlightTextarea-cell_wrapper .rv-cell__title {
+  width: 100%;
+}
+.highlightTextarea-cell_wrapper
+  .highlightTextarea-mobile__wrapper
+  .highlight-textarea {
+  border: none;
+  color: #000;
+  margin-top: 5px;
+}
+.highlightTextarea-cell_wrapper .highlightTextarea-mobile__wrapper .extra-dom {
+  position: absolute;
+  right: 40px;
+  top: 14px;
+  color: #006eff;
+  cursor: pointer;
+}
+.highlightTextarea-cell_wrapper .rv-cell__value {
+  display: none;
+}
+.rv-popup .person-item {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  background: rgba(220, 222, 230, 0.4);
+  padding: 4px 8px;
+  line-height: 20px;
+  margin: 0 24px;
+}
+.rv-popup .person-item .tea-icon {
+  margin-top: 4px;
+}
+.rv-popup .person-item + .person-item {
+  margin-top: 4px;
+}

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

@@ -0,0 +1,241 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Icon, Button } from 'tea-component';
+import { Popup, Field } from 'react-vant';
+import { HighlightTextarea } from '../../components';
+import { useControlContext } from './provider';
+import { ACTION_TYPE } from './constants';
+import './ApprovalPopup.css';
+const ExtraDOM = (props) => {
+    const { type, statusMessage, setStatusMessage, operationName, opinionUserMap, setOpinionUserMap, setHighlightPositionMap, prevFn, onUserSelectModelVisibleChange, onUserSelectModalInfoChange, safeJsonParse, userSelectModelVisible, setApproveComment, } = props;
+    const [approveInfo, setApproveInfo] = useState('');
+    useEffect(() => {
+        if (!userSelectModelVisible) {
+            const popupData = sessionStorage.getItem('FlowActionsMobile');
+            if (popupData) {
+                const { approveInfo: localApproveInfo } = safeJsonParse(popupData);
+                setApproveInfo(localApproveInfo);
+            }
+        }
+    }, [userSelectModelVisible]);
+    const toSelectPerson = () => {
+        prevFn === null || prevFn === void 0 ? void 0 : prevFn(approveInfo);
+        onUserSelectModelVisibleChange();
+        onUserSelectModalInfoChange({
+            approveField: 'highLightApprovers',
+            mode: 'multiple',
+        });
+    };
+    const approveInfoLabel = type === 'handle' ? `${operationName}意见` : '审批意见';
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Field, { className: "highlightTextarea-cell_wrapper", label: React.createElement("div", { className: "highlightTextarea-mobile__wrapper" },
+                React.createElement("span", { className: "label" },
+                    type === 'reject' && React.createElement("span", { style: { color: '#ee0a24' } }, "*"),
+                    approveInfoLabel),
+                React.createElement("span", { onClick: toSelectPerson, className: "extra-dom" }, "@\u67D0\u4EBA"),
+                React.createElement(HighlightTextarea, { value: approveInfo || '', size: "mobile", placeholder: `请输入您的${approveInfoLabel},可@通知他人`, opinionUserMap: opinionUserMap, setOpinionUserMap: setOpinionUserMap, setHighlightPositionMap: setHighlightPositionMap, onChange: (value) => {
+                        setApproveComment(value);
+                        setApproveInfo(value);
+                        setStatusMessage(null);
+                        if (type === 'reject' && !value.trim()) {
+                            setStatusMessage(`请输入${approveInfoLabel}`);
+                        }
+                        if (value.length > 500) {
+                            setStatusMessage(`${approveInfoLabel}长度不可超过500，请检查`);
+                        }
+                    } }),
+                statusMessage && (React.createElement("div", { className: "pant-field__error-message" }, statusMessage))), placeholder: "" })));
+};
+const ApprovePerson = (props) => {
+    const { label, onChange, approvers, prevFn, type, approveField = 'approvers', onUserSelectModelVisibleChange, onUserSelectModalInfoChange, safeJsonParse, } = props;
+    const getUserMap = () => {
+        var _a;
+        return (_a = safeJsonParse(sessionStorage.getItem('approvers'))) === null || _a === void 0 ? void 0 : _a.reduce((p, c) => {
+            // eslint-disable-next-line no-param-reassign
+            p[c === null || c === void 0 ? void 0 : c.UserId] = c === null || c === void 0 ? void 0 : c.Name;
+            return p;
+        }, {});
+    };
+    const toSelectPerson = () => {
+        prevFn === null || prevFn === void 0 ? void 0 : prevFn();
+        onUserSelectModelVisibleChange();
+        onUserSelectModalInfoChange({
+            approveField,
+            mode: [ACTION_TYPE.AGREE, ACTION_TYPE.TRANSFER].includes(type)
+                ? 'multiple'
+                : 'single',
+        });
+    };
+    const removeItem = (index) => {
+        const approversAvatar = approvers.filter((item, idx) => idx !== index);
+        onChange(approversAvatar);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Field, { label: React.createElement(React.Fragment, null,
+                React.createElement("span", { className: "label" }, label)), className: "label-execute__btn", name: "approvers", placeholder: "" },
+            React.createElement("span", { className: "btn-show-modal", onClick: toSelectPerson },
+                React.createElement("i", { className: "apa-icon apa-icon-plus-blue" }),
+                "\u4EBA\u5458")),
+        (approvers === null || approvers === void 0 ? void 0 : approvers.length) > 0
+            ? approvers === null || approvers === void 0 ? void 0 : approvers.map((item, index) => {
+                var _a;
+                return (React.createElement("div", { className: "person-item", key: `person-item_${index}` },
+                    React.createElement("span", null, ((_a = getUserMap()) === null || _a === void 0 ? void 0 : _a[item]) || item),
+                    React.createElement(Icon, { type: "dismiss", onClick: () => removeItem(index) })));
+            })
+            : null));
+};
+export const ApprovalPopup = (props) => {
+    var _a, _b, _c;
+    const { pageInfo, flowDetail, safeJsonParse } = props;
+    const { handleType, approveDrawerVisible, submitLoading, approver, approvers, fileList, opinionUserMap, highlightPositionMap, userSelectModelVisible, setFileList, setApprovers, setApprover, setOpinionUserMap, setHighlightPositionMap, onApproveDrawerVisibleChange, onUserSelectModelVisibleChange, onUserSelectModalInfoChange, onTriggerFlowEvent, } = useControlContext();
+    const { startAppCode: appCode, currentNodeName: nodeName, operationName, currentApproverName, } = flowDetail || {};
+    const { buttons, showCarbonCopy } = pageInfo || {};
+    const [statusMessage, setStatusMessage] = useState('');
+    const approveInfoRef = useRef('');
+    const stateMap = {
+        fileList: {
+            default: [],
+            fn: setFileList,
+        },
+        approvers: {
+            default: [],
+            fn: setApprovers,
+        },
+        approver: {
+            default: '',
+            fn: setApprover,
+        },
+        statusMessage: {
+            default: '',
+            fn: setStatusMessage,
+        },
+    };
+    const approvalType = {
+        agree: {
+            title: `${(buttons === null || buttons === void 0 ? void 0 : buttons[1]) || '同意'}`,
+            dom: true,
+            personLabel: '抄送',
+        },
+        reject: {
+            title: `${(buttons === null || buttons === void 0 ? void 0 : buttons[2]) || '拒绝'}`,
+            dom: true,
+            personLabel: '抄送',
+        },
+        transfer: {
+            title: '转办',
+            dom: false,
+            personLabel: '转办',
+        },
+        handle: {
+            title: '处理',
+            dom: true,
+            personLabel: '抄送',
+        },
+    };
+    useEffect(() => {
+        if (!approveDrawerVisible) {
+            // resetValue?.();
+            Object.values(stateMap).forEach(({ default: defaultValue, fn }) => fn(defaultValue));
+        }
+        else if (!approver) {
+            if (!props.approver) {
+                // postUserInfo().then((res) => {
+                //   if (res?.data) {
+                //     setApprover(res?.data?.name);
+                //   }
+                // });
+            }
+            else {
+                Object.entries(stateMap).forEach(([key, value]) => value.fn(props[key]));
+            }
+        }
+    }, [approveDrawerVisible]);
+    useEffect(() => {
+        setApprovers(props.approvers);
+    }, [props.approvers]);
+    useEffect(() => {
+        setFileList(props.fileList);
+    }, [props.fileList]);
+    useEffect(() => {
+        var _a;
+        setOpinionUserMap((_a = props.opinionUserMap) !== null && _a !== void 0 ? _a : {});
+    }, [props.opinionUserMap]);
+    useEffect(() => {
+        var _a;
+        setHighlightPositionMap((_a = props.highlightPositionMap) !== null && _a !== void 0 ? _a : {});
+    }, [props.highlightPositionMap]);
+    const onChange = (key, value) => {
+        stateMap[key].fn(value);
+    };
+    const handleSubmit = () => {
+        var _a;
+        const obj = {
+            operationComment: approveInfoRef.current || '',
+            opinionUserMap,
+            highlightPositionList: JSON.stringify(highlightPositionMap),
+            attachmentInfo: JSON.stringify(fileList),
+            ccUserIds: approvers === null || approvers === void 0 ? void 0 : approvers.map((item) => item.value).join(','),
+            turnToUserId: (_a = approvers === null || approvers === void 0 ? void 0 : approvers[0]) === null || _a === void 0 ? void 0 : _a.value,
+        };
+        switch (handleType) {
+            case 'agree':
+                Reflect.deleteProperty(obj, 'turnToUserId');
+                break;
+            case 'reject':
+                Reflect.deleteProperty(obj, 'ccUserIds');
+                Reflect.deleteProperty(obj, 'turnToUserId');
+                break;
+            case 'transfer':
+                Reflect.deleteProperty(obj, 'ccUserIds');
+                break;
+        }
+        onTriggerFlowEvent(obj);
+    };
+    const dynamiticHeight = handleType === 'transfer' ? '500px' : '540px';
+    const saveTemp = (approveInfo) => {
+        approveInfoRef.current = approveInfo;
+        const temp = {
+            fileList,
+            approveInfo,
+            opinionUserMap,
+            highlightPositionMap,
+            approvers,
+            handleType,
+            approveDrawerVisible,
+            appCode,
+            // addApprovers,
+            // tagType,
+            // addTag,
+            nodeName,
+            approver,
+        };
+        sessionStorage.setItem('FlowActionsMobile', JSON.stringify(temp));
+    };
+    const setApproveComment = (value) => {
+        approveInfoRef.current = value;
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Popup, { visible: approveDrawerVisible, position: "bottom", style: { height: dynamiticHeight }, onClose: onApproveDrawerVisibleChange, closeable: true, className: "cp-vant-popup", overlayStyle: { zIndex: 998 } },
+            React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "popup-content-wrapper" },
+                    React.createElement("h3", { className: "popup-title" }, handleType === 'handle'
+                        ? `${operationName}意见`
+                        : `审批意见 - ${(_a = approvalType === null || approvalType === void 0 ? void 0 : approvalType[handleType]) === null || _a === void 0 ? void 0 : _a.title}`),
+                    React.createElement(Field, { value: nodeName, label: "\u5F53\u524D\u8282\u70B9", readOnly: true }),
+                    React.createElement(Field, { value: currentApproverName || '-', label: handleType === 'handle' ? '处理人' : '审批人', readOnly: true }),
+                    ((_b = approvalType === null || approvalType === void 0 ? void 0 : approvalType[handleType]) === null || _b === void 0 ? void 0 : _b.dom) && approveDrawerVisible ? (React.createElement(ExtraDOM, { type: handleType, appCode: appCode, onChange: onChange, fileList: fileList, operationName: operationName, statusMessage: statusMessage, setStatusMessage: setStatusMessage, opinionUserMap: opinionUserMap, setOpinionUserMap: setOpinionUserMap, setHighlightPositionMap: setHighlightPositionMap, prevFn: saveTemp, onUserSelectModelVisibleChange: onUserSelectModelVisibleChange, onUserSelectModalInfoChange: onUserSelectModalInfoChange, safeJsonParse: safeJsonParse, userSelectModelVisible: userSelectModelVisible, setApproveComment: setApproveComment })) : null,
+                    handleType !== 'reject' &&
+                        (showCarbonCopy || handleType === 'transfer') ? (React.createElement(ApprovePerson, { type: handleType, prevFn: saveTemp, approvers: approvers, label: (_c = approvalType === null || approvalType === void 0 ? void 0 : approvalType[handleType]) === null || _c === void 0 ? void 0 : _c.personLabel, onChange: (val) => onChange('approvers', val), onUserSelectModelVisibleChange: onUserSelectModelVisibleChange, onUserSelectModalInfoChange: onUserSelectModalInfoChange, safeJsonParse: safeJsonParse })) : null),
+                React.createElement(Button, { className: "success-btn apa-height-xl", type: "primary", loading: submitLoading, onClick: () => {
+                        var _a;
+                        if (handleType === 'reject' && !approveInfoRef.current.trim()) {
+                            setStatusMessage('请输入审批意见');
+                            return;
+                        }
+                        if (((_a = approveInfoRef.current) === null || _a === void 0 ? void 0 : _a.length) > 500) {
+                            setStatusMessage('审批意见长度不可超过500，请检查');
+                            return;
+                        }
+                        handleSubmit();
+                    } }, "\u63D0\u4EA4")))));
+};

package/dist/web/components/flow/modules/control/Control.css

@@ -0,0 +1,29 @@
+.page-process__progress__app-page {
+  height: auto;
+}
+.mf-progress-footer__app-page {
+  left: 233px;
+}
+.page-process__progress .mf-progress-footer {
+  overflow-x: auto;
+  background: #fff;
+  text-align: center;
+  padding: 20px;
+}
+.page-process__progress .mf-progress-footer .mf-progress-footer__btn-line {
+  position: relative;
+  margin-left: 24px;
+}
+.page-process__progress
+  .mf-progress-footer
+  .mf-progress-footer__btn-line:before {
+  border-left: 1px solid rgba(0, 0, 0, 0.25);
+  height: 30px;
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: -13px;
+}
+.mf-progress-footer__btn-group {
+  display: inline-flex;
+}

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Button, Modal, Form, Select } from 'tea-component';
+import classNames from '../../../../utils/classnames';
+import { UserSelectModel } from '../../components';
+import { useControlContext } from './provider';
+import { ACTION_TYPE } from './constants';
+import { ApprovalDrawer } from './ApprovalDrawer';
+import { FlowTaskInfoModal } from './FlowTaskInfoModal';
+import './Control.css';
+export const FlowControl = (props) => {
+    const { commonFlowData, flowLocalProps, ide } = props;
+    const { flowDetail, pageInfo } = commonFlowData;
+    const { isWedaIde, currentPageType } = flowLocalProps;
+    const { 
+    // ControlModel
+    userModalVisible, submitApplyLoading, ccUserModelVisible, ccUsers, ifSubmitAndCc, hasGoBack, setCcUsers, setCcUserModelVisible, onControlChick, setUserModalVisible, onUserModalVisibleChange, onAddCounterSign, onBackFlowCenter, 
+    // RevokeModel
+    showRevokeModal, showBackModal, backNodeList, backNode, setShowRevokeModal, doneRevokeFn, doneBackFn, setShowBackModal, getNodeList, setBackNode, } = useControlContext();
+    const onClickGoBack = async () => {
+        await getNodeList();
+        setShowBackModal(true);
+    };
+    const footerClassNames = classNames('mf-progress-footer', {
+        'mf-progress-footer__app-page': !isWedaIde,
+    });
+    const containerClassNames = classNames('page-process__progress', {
+        'page-process__progress__app-page': !isWedaIde,
+    });
+    const renderButtonGroup = () => {
+        var _a, _b;
+        if (hasGoBack)
+            return null;
+        if (['CREATE', 'DONE'].includes(currentPageType) && (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showRevoke)) {
+            return (React.createElement("div", { className: footerClassNames },
+                React.createElement(Button, { type: "weak", onClick: () => setShowRevokeModal(true) }, "\u64A4\u9500")));
+        }
+        if (['DRAFT', 'CREATEFLOW', 'TODO'].includes(currentPageType) &&
+            (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.show)) {
+            if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showSubmitApp) {
+                return (React.createElement("div", { className: footerClassNames },
+                    React.createElement(ButtonLayout, { gap: 10 },
+                        ifSubmitAndCc ? (React.createElement(Button, { type: "link", onClick: () => setCcUserModelVisible(true) },
+                            "+\u6284\u9001\u4EBA(",
+                            ccUsers.length || 0,
+                            ")")) : null,
+                        React.createElement(Button, { type: "primary", loading: submitApplyLoading, onClick: (e) => onControlChick(ACTION_TYPE.SUBMIT, e) }, ((_a = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.buttons) === null || _a === void 0 ? void 0 : _a[3]) || '提交申请'),
+                        (flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.canDelete) && (React.createElement(React.Fragment, null,
+                            React.createElement(Button, { type: "weak", onClick: (e) => onControlChick(ACTION_TYPE.SAVE_DRAFT, e) }, "\u4FDD\u5B58\u8349\u7A3F"),
+                            React.createElement(Button, { type: "weak", onClick: onBackFlowCenter }, "\u53D6\u6D88"))))));
+            }
+            return (React.createElement("div", { className: footerClassNames },
+                React.createElement(ButtonLayout, null,
+                    (flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.userTaskType) === 2 ? (React.createElement(Button, { type: "primary", onClick: (e) => onControlChick(ACTION_TYPE.HANDLE, e) }, flowDetail === null || flowDetail === void 0 ? void 0 : flowDetail.operationName)) : (React.createElement(ButtonLayout, { gap: 10 },
+                        React.createElement(Button, { type: "primary", onClick: (e) => onControlChick(ACTION_TYPE.AGREE, e) }, (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.buttons) ? pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.buttons[1] : '同意'),
+                        React.createElement(Button, { type: "weak", onClick: (e) => onControlChick(ACTION_TYPE.REJECT, e) }, (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.buttons) ? pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.buttons[2] : '拒绝'))),
+                    (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showTurnToPerson) ? (React.createElement(Button, { type: "weak", className: "mf-progress-footer__btn-line", onClick: (e) => onControlChick(ACTION_TYPE.TRANSFER, e) }, "\u8F6C\u529E")) : null,
+                    (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showRollBack) && (React.createElement(Button, { type: "weak", className: "mf-progress-footer__btn-line", onClick: onClickGoBack }, "\u56DE\u9000")),
+                    (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.showAddAssignee) && (React.createElement(Button, { type: "weak", className: "mf-progress-footer__btn-line", onClick: onUserModalVisibleChange }, "\u52A0\u7B7E")))));
+        }
+        if (['DRAFT', 'CREATEFLOW'].includes(currentPageType)) {
+            return (React.createElement("div", { className: footerClassNames },
+                React.createElement(Button, { type: "primary", loading: submitApplyLoading, onClick: (e) => onControlChick(ACTION_TYPE.SUBMIT, e) }, ((_b = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.buttons) === null || _b === void 0 ? void 0 : _b[3]) || '提交申请'),
+                React.createElement(Button, { type: "weak", onClick: (e) => onControlChick(ACTION_TYPE.SAVE_DRAFT, e) }, "\u4FDD\u5B58\u8349\u7A3F"),
+                React.createElement(Button, { type: "weak", onClick: onBackFlowCenter }, "\u53D6\u6D88")));
+        }
+        return null;
+    };
+    return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    React.createElement("div", { ...ide },
+        React.createElement("div", { className: containerClassNames },
+            renderButtonGroup(),
+            React.createElement(Modal, { visible: showBackModal, caption: '流程回退', onClose: () => setShowBackModal(false) },
+                React.createElement(Modal.Body, null,
+                    React.createElement(Form, null,
+                        React.createElement(Form.Item, { label: '选择回退节点' },
+                            React.createElement(Select, { size: "full", appearance: "button", matchButtonWidth: true, options: backNodeList, value: backNode, onChange: (value) => setBackNode(value) })))),
+                React.createElement(Modal.Footer, null,
+                    React.createElement(Button, { type: "primary", disabled: (backNodeList === null || backNodeList === void 0 ? void 0 : backNodeList.length) === 0, onClick: () => doneBackFn() }, "\u786E\u5B9A"),
+                    React.createElement(Button, { type: "weak", onClick: () => setShowBackModal(false) }, "\u53D6\u6D88"))),
+            React.createElement(Modal, { visible: showRevokeModal, caption: '撤销流程提醒', onClose: () => setShowRevokeModal(false) },
+                React.createElement(Modal.Body, null, '流程正在进行中，确认撤销此流程？'),
+                React.createElement(Modal.Footer, null,
+                    React.createElement(Button, { type: "primary", onClick: doneRevokeFn }, "\u786E\u5B9A"),
+                    React.createElement(Button, { type: "weak", onClick: () => setShowRevokeModal(false) }, "\u53D6\u6D88"))),
+            React.createElement(UserSelectModel, { visible: userModalVisible, onChange: (val) => val.length && onAddCounterSign(val), onClose: () => setUserModalVisible(false) }),
+            React.createElement(UserSelectModel, { value: ccUsers, visible: ccUserModelVisible, onChange: (val) => val.length && setCcUsers(val), onClose: () => setCcUserModelVisible(false) }),
+            React.createElement(FlowTaskInfoModal, null),
+            React.createElement(ApprovalDrawer, { pageInfo: pageInfo, flowDetail: flowDetail }))));
+};
+export const ButtonLayout = ({ children, gap }) => {
+    return (React.createElement("div", { className: "mf-progress-footer__btn-group", style: { gap: gap || 0 } }, children));
+};