@cloudbase/weda-ui 3.4.5 → 3.4.7

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

package/dist/web/components/flow/modules/operations/controls-items/check-list-popup/style.css

@@ -0,0 +1,26 @@
+.weda-flow-checklist-popup {
+  display: flex;
+  flex-direction: column;
+}
+.weda-flow-checklist-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 16px;
+}
+.weda-flow-checklist-body .wedatea2td-form-check-group {
+  display: block;
+}
+.weda-flow-checklist-body .wedatea2td-form-check {
+  border-bottom: 0.5px solid #e7e7e7;
+  padding: 12px 0;
+  position: relative;
+  display: flex;
+  margin: 0 !important;
+}
+
+.weda-flow-checklist-confirm {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  font-size: 14px;
+}

package/dist/web/components/flow/modules/operations/controls-items/flow-task-info-modal.js

@@ -0,0 +1,98 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { Modal, SelectMultiple, Button, Form, Checkbox } from 'tea-component';
+import { FlowCheckListPopup } from './check-list-popup';
+/**
+ * 选择下一节点审批人弹窗
+ */
+export const FlowTaskInfoModal = (props) => {
+    const { isH5, visible, flowTaskInfoList, selectedTaskIds, setSelectedTaskIds, onSubmitTaskIds, } = useFlowTaskInfoModel(props);
+    const options = flowTaskInfoList.map((item) => ({
+        text: item === null || item === void 0 ? void 0 : item.assigneeName,
+        value: item === null || item === void 0 ? void 0 : item.waitFlowTaskId,
+    }));
+    const renderModal = () => {
+        return (React.createElement(Modal, { visible: visible, caption: props.label, onClose: () => onSubmitTaskIds(), size: "auto" },
+            React.createElement(Modal.Body, null,
+                React.createElement(Form, { style: { marginBottom: '5px' } },
+                    React.createElement(Form.Item, { label: "\u9009\u62E9\u5904\u7406\u4EBA" },
+                        React.createElement(SelectMultiple, { searchable: true, matchButtonWidth: true, appearance: "button", size: "full", style: { width: 300 }, staging: false, options: options, value: selectedTaskIds, onChange: (value) => setSelectedTaskIds(value) })))),
+            React.createElement(Modal.Footer, null,
+                React.createElement(Button, { type: "primary", onClick: () => onSubmitTaskIds(false), disabled: !selectedTaskIds.length }, "\u786E\u5B9A"),
+                React.createElement(Button, { type: "weak", onClick: () => onSubmitTaskIds() }, "\u53D6\u6D88"))));
+    };
+    const renderPopup = () => {
+        return (React.createElement(FlowCheckListPopup, { visible: visible, onClose: () => onSubmitTaskIds(), title: props.label, overlayStyle: { zIndex: 998 }, height: 550, confirmButtonProps: {
+                disabled: !selectedTaskIds.length,
+                onClick: () => onSubmitTaskIds(false),
+            } },
+            React.createElement(Checkbox.Group, { value: selectedTaskIds, onChange: (value) => setSelectedTaskIds(value), layout: "column" }, options.map((option) => (React.createElement(Checkbox, { name: option.value, key: option.value }, option.text))))));
+    };
+    return React.createElement(React.Fragment, null,
+        " ",
+        isH5 ? renderPopup() : renderModal());
+};
+/** 下一节点审批人model */
+function useFlowTaskInfoModel(params) {
+    const { flowRequest, isH5 } = params.flowFrameCommonProps.flowLocalProps;
+    const { onAfterFinishFlowAction } = params.flowControlModel;
+    /** 弹框是否可见 */
+    const [visible, setVisible] = useState(false);
+    /** 审批人列表 */
+    const [flowTaskInfoList, setFlowTaskInfoList] = useState([]);
+    /** 已选任务数组 */
+    const [selectedTaskIds, setSelectedTaskIds] = useState([]);
+    const timer = useRef(null);
+    useEffect(() => {
+        return () => {
+            cleanTiming();
+        };
+    }, []);
+    useEffect(() => {
+        if (params.flowControlModel.triggerFlowTaskInfo) {
+            const { toBeSubmittedFlowTaskInfo } = params.flowControlModel.triggerFlowTaskInfo || {};
+            setVisible(true);
+            setFlowTaskInfoList(toBeSubmittedFlowTaskInfo || []);
+            timingSubmit();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [params.flowControlModel.triggerFlowTaskInfo]);
+    const cleanTiming = () => {
+        clearTimeout(timer.current);
+    };
+    /** 审批人列表提交 */
+    const submitFlowTaskList = async (flowTaskIds) => {
+        const result = await flowRequest({
+            action: 'SubmitFlowTaskList',
+            data: { flowTaskIds },
+        });
+        if (result === null || result === void 0 ? void 0 : result.status) {
+            setVisible(false);
+            setSelectedTaskIds([]);
+            cleanTiming();
+            // 执行完成后自定义动作
+            onAfterFinishFlowAction(params.actionKey, params.afterAction);
+        }
+    };
+    /** 定时提交 */
+    const timingSubmit = () => {
+        // eslint-disable-next-line rulesdir/no-timer
+        timer.current = setTimeout(() => {
+            submitFlowTaskList();
+        }, 600000);
+    };
+    /** 提交按钮动作 */
+    const onSubmitTaskIds = (isCancel = true) => {
+        const taskIds = isCancel
+            ? flowTaskInfoList.map((i) => i === null || i === void 0 ? void 0 : i.waitFlowTaskId)
+            : selectedTaskIds;
+        submitFlowTaskList(taskIds);
+    };
+    return {
+        isH5,
+        selectedTaskIds,
+        visible,
+        flowTaskInfoList,
+        setSelectedTaskIds,
+        onSubmitTaskIds,
+    };
+}

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

@@ -0,0 +1,18 @@
+import { AddAssigneeBtn } from './add-assignee-btn';
+import { ApplyCcBtn } from './apply-cc-btn';
+import { ApprovalDrawer } from './approval-drawer';
+import { CancelApplyBtn } from './cancel-apply-btn';
+import { FlowTaskInfoModal } from './flow-task-info-modal';
+import { InitiationBtn } from './initiation-btn';
+import { RevokeModal } from './revoke-modal';
+import { RollbackModal } from './roll-back-modal';
+export const CONTROL_COMPONENT = {
+    AddAssigneeBtn,
+    ApplyCcBtn,
+    ApprovalDrawer,
+    CancelApplyBtn,
+    FlowTaskInfoModal,
+    InitiationBtn,
+    RevokeModal,
+    RollbackModal,
+};

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { message } from 'tea-component';
+import { FlowButton } from '../components';
+/**
+ * 发起阶段按钮、可用于保存草稿和提交申请两个操作
+ */
+export function InitiationBtn(props) {
+    const { flowControlModel } = props;
+    const onClick = () => {
+        var _a;
+        const ccUserIds = (_a = flowControlModel.applyCcUser) === null || _a === void 0 ? void 0 : _a.join();
+        flowControlModel.completeTask({
+            actionKey: props.actionKey,
+            buttonAction: props.buttonAction,
+            afterAction: props.afterAction,
+            data: { ccUserIds },
+            successCallback: () => {
+                message.success({
+                    content: `${props.label}成功`,
+                });
+            },
+        });
+    };
+    return (React.createElement(FlowButton, { ...props.buttonProps, buttonIcon: props.buttonIcon, id: props.id, onClick: onClick }, props.label));
+}

package/dist/web/components/flow/modules/operations/controls-items/revoke-modal/index.js

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { Button, Modal, message } from 'tea-component';
+import { FlowPopup, FlowButton } from '../../components';
+import './style.css';
+export function RevokeModal(props) {
+    const { flowFrameCommonProps, flowControlModel } = props;
+    const { flowRequest, isH5, currentPageType } = flowFrameCommonProps.flowLocalProps;
+    const { flowDetail } = flowFrameCommonProps.commonFlowData;
+    const { onAfterFinishFlowAction } = flowControlModel;
+    const [visible, setVisible] = useState(false);
+    const onOpen = () => setVisible(true);
+    const onClose = () => setVisible(false);
+    /** 撤销请求 */
+    const revoke = async () => {
+        const result = await flowRequest({
+            action: 'Revoke',
+            data: {
+                flowCode: flowDetail.flowCode,
+                appVersion: flowDetail.flowVersion,
+                instanceId: flowDetail.instanceId,
+                revokeType: currentPageType === 'CREATE' ? 2 : 1,
+                taskId: currentPageType === 'DONE' ? flowDetail.taskId : undefined,
+            },
+        });
+        if (result) {
+            message.success({
+                content: `${props.label}成功`,
+            });
+            onAfterFinishFlowAction(props.actionKey, props.afterAction);
+        }
+    };
+    const renderModal = () => {
+        return (React.createElement(Modal, { visible: visible, caption: "\u64A4\u9500\u6D41\u7A0B\u63D0\u9192", onClose: onClose },
+            React.createElement(Modal.Body, null, "\u6D41\u7A0B\u6B63\u5728\u8FDB\u884C\u4E2D\uFF0C\u786E\u8BA4\u64A4\u9500\u6B64\u6D41\u7A0B\uFF1F"),
+            React.createElement(Modal.Footer, null,
+                React.createElement(Button, { type: "primary", onClick: revoke }, "\u786E\u5B9A"),
+                React.createElement(Button, { type: "weak", onClick: onClose }, "\u53D6\u6D88"))));
+    };
+    const renderPopup = () => {
+        return (React.createElement(FlowPopup, { visible: visible, onClose: onClose, title: "\u64A4\u9500\u6D41\u7A0B\u63D0\u9192", overlayStyle: { zIndex: 998 }, width: "80%", className: "weda-flow-revoke-popup" },
+            React.createElement("div", { className: "weda-flow-revoke-tip" },
+                React.createElement("div", { className: "weda-flow-revoke-content" }, "\u6D41\u7A0B\u6B63\u5728\u8FDB\u884C\u4E2D\uFF0C\u786E\u8BA4\u64A4\u9500\u6B64\u6D41\u7A0B\uFF1F"),
+                React.createElement("div", { className: "weda-flow-revoke-confirm" },
+                    React.createElement(Button, { type: "text", onClick: onClose }, "\u53D6\u6D88"),
+                    React.createElement(Button, { type: "link", onClick: revoke }, "\u786E\u8BA4")))));
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FlowButton, { ...props.buttonProps, buttonIcon: props.buttonIcon, id: props.id, onClick: onOpen }, props.label),
+        isH5 ? renderPopup() : renderModal()));
+}

package/dist/web/components/flow/modules/operations/controls-items/revoke-modal/style.css

@@ -0,0 +1,28 @@
+.weda-flow-revoke-popup {
+  border-radius: 4px;
+  width: 80%;
+}
+.weda-flow-revoke-content {
+  color: #0009;
+  font-size: 16px;
+  line-height: 24px;
+  max-height: 288px;
+  overflow: auto;
+  padding: 0 24px;
+  text-align: center;
+}
+
+.weda-flow-revoke-confirm {
+  display: flex;
+  border-top: 1px solid #eee;
+  margin-top: 32px;
+}
+
+.weda-flow-revoke-confirm button {
+  width: 50%;
+  height: 56px;
+}
+
+.weda-flow-revoke-confirm button:first-child {
+  border-right: 1px solid #eee;
+}