@cloudbase/weda-ui 3.5.2-mp → 3.5.3

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

@@ -0,0 +1,185 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { 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 (_jsxs(_Fragment, { children: [_jsxs("div", { className: `weda-flow-comment ${bordered ? 'bordered' : ''}`, onKeyUp: keyboardModel.onKeyUp, children: [_jsx(HighlightWithinTextarea, { value: commentValue, onChange: onCommentChange, highlight: highlightPositions, placeholder: placeholder, ref: textAreaRef, onFocus: () => rangeModel.getRange(!isH5), onBlur: () => rangeModel.getRange(!isH5) }), _jsx(FlowUserSelect, { visible: userModalVisible, multiple: true, onChange: onUserChange, onClose: () => setUserModalVisible(false), defaultValue: [], isH5: props.isH5 })] }), isH5 ? (_jsx(Button, { type: "link", onClick: onPressAtSingle, style: props.atButtonStyle, children: "@\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.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { IFlowApprovalFormDrawerProps } from './types';
+export * from './types';
+/** 抽屉表单 */
+export declare const DrawerForm: {
+    (props: IFlowApprovalFormDrawerProps): JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,58 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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,
+};
+// eslint-disable-next-line rulesdir/no-export-all
+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 _jsx(DrawerFormH5View, { ...commonProps });
+    }
+    return _jsx(DrawerFormPCView, { ...commonProps });
+};
+DrawerForm.displayName = 'DrawerForm';
+/** 抽屉表单PC视图 */
+function DrawerFormPCView(props) {
+    const { drawerFormModel, formInfo, visible, onClose } = props;
+    return (_jsx(Drawer, { showMask: true, destroyOnClose: true, size: "l", outerClickClosable: false, visible: visible, onClose: onClose, title: formInfo.formTitle, className: "weda-flow-approval-drawer", footer: _jsxs(_Fragment, { children: [_jsx(Button, { type: "primary", onClick: drawerFormModel.onSubmitForm, loading: props.submitLoading, children: "\u63D0\u4EA4" }), _jsx(Button, { onClick: onClose, children: "\u53D6\u6D88" })] }), children: _jsx(Form, { children: formInfo.formItems.map((formItem) => {
+                var _a, _b;
+                if (formItem.hidden)
+                    return;
+                if (formItem.readonly) {
+                    return (_jsx(Form.Item, { label: formItem.label, children: _jsx(Form.Text, { children: formItem.content }) }, formItem.field));
+                }
+                const Component = FormComponents[formItem.component];
+                return (_jsx(Form.Item, { label: formItem.label, 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', children: _jsx(Component, { ...formItem.props, onChange: (value) => drawerFormModel.onFormItemChange(value, formItem) }) }, formItem.field));
+            }) }) }));
+}
+/** 抽屉表单H5视图 */
+function DrawerFormH5View(props) {
+    const { drawerFormModel, formInfo, visible, onClose } = props;
+    return (_jsxs(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, children: [formInfo.formItems.map((formItem, index) => {
+                var _a, _b;
+                if (formItem.hidden)
+                    return;
+                if (formItem.readonly) {
+                    return (_jsx(FlowField, { content: formItem.content, label: formItem.label, bordered: index !== formInfo.formItems.length - 1 }, formItem.field));
+                }
+                const Component = FormComponents[formItem.component];
+                return (_jsx(FlowField, { 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: _jsx(Component, { ...formItem.props, onChange: (value) => drawerFormModel.onFormItemChange(value, formItem) }) }, formItem.field));
+            }), _jsx(Button, { type: "primary", onClick: drawerFormModel.onSubmitForm, className: "submit", loading: props.submitLoading, children: "\u63D0\u4EA4" })] }));
+}

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

@@ -0,0 +1,47 @@
+/** 审批表单抽屉属性 */
+export interface IFlowApprovalFormDrawerProps {
+    isH5?: boolean;
+    formInfo: IFlowApprovalFormInfo;
+    submit: (values: unknown) => void;
+    submitLoading: boolean;
+    visible: boolean;
+    onClose: () => void;
+}
+/** 审批表单属性 */
+export interface IFlowApprovalFormInfo {
+    /** 表单标题 */
+    formTitle?: string;
+    /** 表单项 */
+    formItems?: IFlowApprovalFormItem[];
+    /** 提交默认值， 用于提交一些固定值*/
+    submitDefaultValues?: Record<string, unknown>;
+}
+/** 审批表单项属性 */
+export interface IFlowApprovalFormItem {
+    /** 表单项标题 */
+    label?: string;
+    /** 字段名称 */
+    field?: string;
+    /** 必填样式 */
+    required?: boolean;
+    /** 提示信息 */
+    help?: string;
+    /** 是否只读 */
+    readonly?: boolean;
+    /** 只读状态下显示的内容 */
+    content?: string;
+    /** 隐藏表单项 */
+    hidden?: boolean;
+    /** 默认值 */
+    defaultValue?: unknown;
+    /** 组件名称 */
+    component?: string;
+    /** 组件属性 */
+    props?: Record<string, unknown>;
+    /** 校验规则 */
+    validate?: (value: unknown) => string | void;
+    /** 转换输出的值 */
+    transform?: (value: unknown) => unknown;
+    /** 其他信息 */
+    extra?: Record<string, unknown>;
+}

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.d.ts

@@ -0,0 +1,12 @@
+import { IFlowApprovalFormItem, IFlowApprovalFormInfo, IFlowApprovalFormDrawerProps } from './types';
+export type IDrawerFormModel = ReturnType<typeof useDrawerFormModel>;
+/** 审批表单model */
+export declare function useDrawerFormModel(formInfo: IFlowApprovalFormInfo, submit: IFlowApprovalFormDrawerProps['submit']): {
+    visible: boolean;
+    errorMap: Record<string, string>;
+    onOpenDrawer: () => void;
+    onCloseDrawer: () => void;
+    resetFormStatus: () => void;
+    onSubmitForm: () => void;
+    onFormItemChange: (value: any, formItem: IFlowApprovalFormItem) => void;
+};

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.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './style.css';
+export interface IFlowFieldProps {
+    label?: string;
+    labelClass?: string;
+    labelStyle?: React.CSSProperties;
+    content?: string | React.ReactNode;
+    required?: boolean;
+    errorMessage?: string;
+    className?: string;
+    layout?: 'vertical' | 'horizontal';
+    bordered?: boolean;
+}
+export declare function FlowField(props: IFlowFieldProps): JSX.Element;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs("div", { className: outerClassNames, children: [_jsx("div", { className: `weda-flow-field-label ${required ? 'required' : ''}`, children: label }), _jsxs("div", { className: "weda-flow-field-content", children: [content, errorMessage ? (_jsx("div", { className: "weda-flow-field-error", children: 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.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IFlowControlItemProps } from '../types';
+import './style.css';
+/**
+ * 审批类型弹窗 可用于同意、拒绝、处理、转办 这几个操作
+ */
+export declare function ApprovalDrawer(props: IFlowControlItemProps): JSX.Element;

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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.flowModulesProps;
+    const [submitLoading, setSubmitLoading] = useState(false);
+    const [visible, setVisible] = useState(false);
+    const onOpenDrawerForm = async () => {
+        const result = await props.flowControlModel.getApprovalFormData();
+        // 获取表单数据成功之后再显示审批抽屉
+        if (result) {
+            setVisible(true);
+        }
+    };
+    const onCloseDrawerForm = () => {
+        props.flowControlModel.clearFormData();
+        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 (_jsxs(_Fragment, { children: [_jsx(FlowButton, { ...props.buttonProps, buttonIcon: props.buttonIcon, id: props.id, onClick: onOpenDrawerForm, children: props.label }), _jsx(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,61 @@
+.weda-flow-approval-drawer.wedatea2td-drawer {
+  width: 500px !important;
+  top: 0 !important;
+  background-color: #fff;
+  z-index: 1001 !important;
+}
+
+.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.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { IFlowControlItemProps } from './types';
+/**
+ * 取消申请
+ */
+export declare function CancelApplyBtn(props: IFlowControlItemProps): JSX.Element;