@cloudbase/weda-ui 3.4.4 → 3.4.6

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;
+}

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Drawer, Button, Form } from 'tea-component';
+import { FlowPopup, FlowUserSelect } from '../../../components';
+import { FlowField } from '../field';
+import { FlowComment } from '../comment';
+import { useDrawerFormModel } from './view-model';
+const FormComponents = {
+    FlowComment,
+    FlowUserSelect,
+};
+export * from './types';
+/** 抽屉表单 */
+export const DrawerForm = (props) => {
+    const drawerFormModel = useDrawerFormModel(props.formInfo, props.submit);
+    const commonProps = {
+        formInfo: props.formInfo,
+        drawerFormModel,
+        submitLoading: props.submitLoading,
+        visible: props.visible,
+        onClose: props.onClose,
+    };
+    if (props.isH5) {
+        return React.createElement(DrawerFormH5View, { ...commonProps });
+    }
+    return React.createElement(DrawerFormPCView, { ...commonProps });
+};
+DrawerForm.displayName = 'DrawerForm';
+/** 抽屉表单PC视图 */
+function DrawerFormPCView(props) {
+    const { drawerFormModel, formInfo, visible, onClose } = props;
+    return (React.createElement(Drawer, { showMask: true, destroyOnClose: true, size: "l", outerClickClosable: false, visible: visible, onClose: onClose, title: formInfo.formTitle, className: "weda-flow-approval-drawer", footer: React.createElement(React.Fragment, null,
+            React.createElement(Button, { type: "primary", onClick: drawerFormModel.onSubmitForm, loading: props.submitLoading }, "\u63D0\u4EA4"),
+            React.createElement(Button, { onClick: onClose }, "\u53D6\u6D88")) },
+        React.createElement(Form, null, formInfo.formItems.map((formItem) => {
+            var _a, _b;
+            if (formItem.hidden)
+                return;
+            if (formItem.readonly) {
+                return (React.createElement(Form.Item, { key: formItem.field, label: formItem.label },
+                    React.createElement(Form.Text, null, formItem.content)));
+            }
+            const Component = FormComponents[formItem.component];
+            return (React.createElement(Form.Item, { label: formItem.label, key: formItem.field, required: formItem.required, showStatusIcon: false, message: ((_a = drawerFormModel.errorMap) === null || _a === void 0 ? void 0 : _a[formItem.field]) ||
+                    formItem.help ||
+                    '', status: ((_b = drawerFormModel.errorMap) === null || _b === void 0 ? void 0 : _b[formItem.field]) ? 'error' : 'success' },
+                React.createElement(Component, { ...formItem.props, onChange: (value) => drawerFormModel.onFormItemChange(value, formItem) })));
+        }))));
+}
+/** 抽屉表单H5视图 */
+function DrawerFormH5View(props) {
+    const { drawerFormModel, formInfo, visible, onClose } = props;
+    return (React.createElement(FlowPopup, { destroyOnClose: true, closeable: true, position: "bottom", className: "weda-flow-approval-drawer-mobile", overlayStyle: { zIndex: 998 }, height: 550, visible: visible, onClose: onClose, title: formInfo.formTitle },
+        formInfo.formItems.map((formItem, index) => {
+            var _a, _b;
+            if (formItem.hidden)
+                return;
+            if (formItem.readonly) {
+                return (React.createElement(FlowField, { key: formItem.field, content: formItem.content, label: formItem.label, bordered: index !== formInfo.formItems.length - 1 }));
+            }
+            const Component = FormComponents[formItem.component];
+            return (React.createElement(FlowField, { key: formItem.field, label: formItem.label, required: formItem.required, errorMessage: ((_a = drawerFormModel.errorMap) === null || _a === void 0 ? void 0 : _a[formItem.field]) || '', bordered: index !== formInfo.formItems.length - 1, layout: ((_b = formItem === null || formItem === void 0 ? void 0 : formItem.extra) === null || _b === void 0 ? void 0 : _b.isH5Vertical) ? 'vertical' : 'horizontal', content: React.createElement(Component, { ...formItem.props, onChange: (value) => drawerFormModel.onFormItemChange(value, formItem) }) }));
+        }),
+        React.createElement(Button, { type: "primary", onClick: drawerFormModel.onSubmitForm, className: "submit", loading: props.submitLoading }, "\u63D0\u4EA4")));
+}

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

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

package/dist/web/components/flow/modules/operations/controls-items/approval-drawer/drawer-form/view-model.js

@@ -0,0 +1,83 @@
+import { useEffect, useState, useRef } from 'react';
+/** 审批表单model */
+export function useDrawerFormModel(formInfo, submit) {
+    const [visible, setVisible] = useState(false);
+    const onOpenDrawer = () => setVisible(true);
+    const onCloseDrawer = () => {
+        resetFormStatus();
+        setVisible(false);
+    };
+    /** 错误信息Map */
+    const [errorMap, setErrorMap] = useState({});
+    /** 存储表单值的对象 */
+    const formValueRef = useRef({});
+    useEffect(() => {
+        var _a;
+        // 初始化默认值
+        visible &&
+            ((_a = formInfo === null || formInfo === void 0 ? void 0 : formInfo.formItems) === null || _a === void 0 ? void 0 : _a.forEach((formItem) => {
+                var _a;
+                if (formItem.readonly)
+                    return;
+                formValueRef.current[formItem.field] =
+                    (_a = formItem === null || formItem === void 0 ? void 0 : formItem.defaultValue) !== null && _a !== void 0 ? _a : undefined;
+            }));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visible]);
+    /** 提交表单值 */
+    const onSubmitForm = () => {
+        const { errorMap, hasError } = validateFormValues();
+        setErrorMap(errorMap);
+        if (hasError)
+            return;
+        submit === null || submit === void 0 ? void 0 : submit({
+            ...formValueRef.current,
+            ...(formInfo.submitDefaultValues || {}),
+        });
+    };
+    /** 表单项值变更 */
+    const onFormItemChange = (value, formItem) => {
+        const { field, transform, validate } = formItem;
+        const itemValue = { [field]: transform ? transform === null || transform === void 0 ? void 0 : transform(value) : value };
+        formValueRef.current = {
+            ...formValueRef.current,
+            ...itemValue,
+        };
+        setErrorMap({
+            ...errorMap,
+            [field]: (validate === null || validate === void 0 ? void 0 : validate(value)) || undefined,
+        });
+    };
+    /** 验证表单所有值 */
+    const validateFormValues = () => {
+        let newErrorMap = {};
+        let hasError = false;
+        formInfo.formItems.forEach((config) => {
+            var _a, _b;
+            if (config.readonly)
+                return;
+            const currentFieldValue = (_a = formValueRef.current) === null || _a === void 0 ? void 0 : _a[config.field];
+            const checkResult = (_b = config.validate) === null || _b === void 0 ? void 0 : _b.call(config, currentFieldValue);
+            newErrorMap = {
+                ...errorMap,
+                [config.field]: checkResult || '',
+            };
+            hasError = !!checkResult;
+        });
+        return { errorMap: newErrorMap, hasError };
+    };
+    /** 重置表单状态 */
+    const resetFormStatus = () => {
+        setErrorMap({});
+        formValueRef.current = {};
+    };
+    return {
+        visible,
+        errorMap,
+        onOpenDrawer,
+        onCloseDrawer,
+        resetFormStatus,
+        onSubmitForm,
+        onFormItemChange,
+    };
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from '../../../../../../../utils/classnames';
+import './style.css';
+export function FlowField(props) {
+    const { label = '', content = '', required = false, errorMessage = '', className = '', layout = 'horizontal', bordered = true, } = props;
+    const outerClassNames = classNames('weda-flow-field', className, {
+        ['bordered']: bordered,
+        ['vertical']: layout === 'vertical',
+        ['horizontal']: layout === 'horizontal',
+    });
+    return (React.createElement("div", { className: outerClassNames },
+        React.createElement("div", { className: `weda-flow-field-label ${required ? 'required' : ''}` }, label),
+        React.createElement("div", { className: "weda-flow-field-content" },
+            content,
+            errorMessage ? (React.createElement("div", { className: "weda-flow-field-error" }, errorMessage)) : null)));
+}

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

@@ -0,0 +1,56 @@
+.weda-flow-field {
+  padding: 12px 24px;
+  position: relative;
+  display: flex;
+}
+
+.weda-flow-field.bordered::after {
+  content: '';
+  border-bottom: 1px solid #dcdee6;
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 16px;
+  bottom: 0;
+  left: 16px;
+  border-bottom: 1px solid #dcdee6;
+  transform: scaleY(0.5);
+}
+
+.weda-flow-field.vertical {
+  flex-direction: column;
+}
+
+.weda-flow-field.horizontal {
+  align-items: flex-start;
+}
+
+.weda-flow-field-label {
+  text-align: left;
+  word-wrap: break-word;
+  width: 6em;
+  color: #646566;
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.weda-flow-field-label.required::before {
+  position: absolute;
+  left: -7px;
+  color: #f44336;
+  font-size: 14px;
+  content: '*';
+}
+
+.weda-flow-field-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.weda-flow-field-error {
+  color: #f44336;
+  font-size: 12px;
+}

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

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { message } from 'tea-component';
+import { FlowButton } from '../../components';
+import { DrawerForm } from './drawer-form';
+import './style.css';
+/**
+ * 审批类型弹窗 可用于同意、拒绝、处理、转办 这几个操作
+ */
+export function ApprovalDrawer(props) {
+    const { isH5 } = props.flowFrameCommonProps.flowLocalProps;
+    const [submitLoading, setSubmitLoading] = useState(false);
+    const [visible, setVisible] = useState(false);
+    const onOpenDrawerForm = () => setVisible(true);
+    const onCloseDrawerForm = () => setVisible(false);
+    const onDrawerFormSubmit = (formValues) => {
+        let values = {};
+        Object.keys(formValues).forEach((key) => {
+            if (key === 'comment') {
+                values = {
+                    ...values,
+                    ...formValues.comment,
+                };
+            }
+            else {
+                values[key] = formValues[key];
+            }
+        });
+        props.flowControlModel.completeTask({
+            actionKey: props.actionKey,
+            afterAction: props.afterAction,
+            buttonAction: props.buttonAction,
+            data: values,
+            setLoadingState(state) {
+                setSubmitLoading(state);
+            },
+            successCallback() {
+                onCloseDrawerForm();
+                message.success({
+                    content: `${props.label}成功`,
+                });
+            },
+        });
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FlowButton, { ...props.buttonProps, buttonIcon: props.buttonIcon, id: props.id, onClick: onOpenDrawerForm }, props.label),
+        React.createElement(DrawerForm, { visible: visible, formInfo: props.approvalFormInfo, submit: onDrawerFormSubmit, isH5: isH5, submitLoading: submitLoading, onClose: onCloseDrawerForm })));
+}

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

@@ -0,0 +1,60 @@
+.weda-flow-approval-drawer.wedatea2td-drawer {
+  width: 500px !important;
+  top: 0 !important;
+  background-color: #fff;
+}
+
+.weda-flow-approval-drawer .wedatea2td-form {
+  display: block;
+}
+
+.weda-flow-approval-drawer .wedatea2td-form .wedatea2td-form__controls {
+  font-size: 12px;
+}
+.weda-flow-approval-drawer .wedatea2td-form .wedatea2td-form__label label {
+  color: #666;
+}
+
+.weda-flow-approval-drawer .wedatea2td-drawer__footer {
+  flex: 0 0 76px;
+  padding: 20px;
+  display: flex;
+  gap: 10px;
+}
+
+.weda-flow-approval-drawer .wedatea2td-drawer__footer button {
+  height: 36px;
+  width: 106px;
+}
+.weda-flow-approval-user-select .wedatea2td-form__label {
+  display: none;
+}
+.weda-flow-approval-user-select .wedatea2td-form__controls {
+  padding-top: 0;
+}
+.weda-flow-approval-user-select .wedatea2td-dropdown__header {
+  width: 100% !important;
+}
+
+/* 以下为移动视图样式 */
+
+.weda-flow-approval-drawer-mobile {
+  z-index: 998 !important;
+}
+
+.weda-flow-approval-drawer-mobile .weda-flow-field {
+  margin-top: 12px;
+}
+.weda-flow-approval-drawer-mobile .weda-ui-user-select-input {
+  padding: 0;
+}
+
+.weda-flow-approval-drawer-mobile .submit {
+  position: absolute;
+  bottom: 30px;
+  height: 40px;
+  line-height: 40px;
+  width: 80%;
+  left: 50%;
+  transform: translateX(-50%);
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { getPageQuery } from '../../../../../utils/getPageQuery';
+import { FlowButton } from '../components';
+/**
+ * 取消申请
+ */
+export function CancelApplyBtn(props) {
+    return (React.createElement(FlowButton, { ...props.buttonProps, buttonIcon: props.buttonIcon, id: props.id, onClick: navigateToFlowCenter }, props.label));
+}
+/** 返回流程中心 */
+function navigateToFlowCenter() {
+    const { origin, pathname } = location;
+    const { envType } = getPageQuery();
+    window.location.href = `${origin}${pathname}#/flowCenter?envType=${envType}`;
+}

package/dist/web/components/flow/modules/operations/controls-items/check-list-popup/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Button } from 'tea-component';
+import { FlowPopup } from '../../components';
+import './style.css';
+/** 单双选弹窗(Popup)容器 */
+export function FlowCheckListPopup(props) {
+    const { confirmButtonProps, confirmButtonText = '确认', ...restProps } = props;
+    return (React.createElement(FlowPopup, { position: "bottom", closeable: true, className: "weda-flow-checklist-popup", closeContentPosition: "top-left", closeContent: "\u53D6\u6D88", ...restProps },
+        React.createElement("div", { className: "weda-flow-checklist-body" }, props.children || null),
+        React.createElement(Button, { type: "link", className: "weda-flow-checklist-confirm", ...confirmButtonProps }, confirmButtonText)));
+}