@coding-flow/flow-pc-approval 0.0.12 → 0.0.15

package/dist/components/flow-approval/components/action/add-audit.js

@@ -4,6 +4,8 @@ import { Form, Modal, message } from "antd";
 import { useApprovalContext } from "@coding-flow/flow-approval-presenter";
 import { AddAuditView } from "../../../../plugins/view/add-audit-view.js";
 import { CustomStyleButton } from "../custom-style-button.js";
+import { ViewBindPlugin } from "@coding-flow/flow-core";
+import { APPROVAL_ACTION_ADD_AUDIT_KEY } from "../../index.js";
 const AddAuditAction = (props)=>{
     const action = props.action;
     const { context } = useApprovalContext();
@@ -26,6 +28,10 @@ const AddAuditAction = (props)=>{
             }
         });
     };
+    const ActionView = ViewBindPlugin.getInstance().get(APPROVAL_ACTION_ADD_AUDIT_KEY);
+    if (ActionView) return /*#__PURE__*/ jsx(ActionView, {
+        ...props
+    });
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(CustomStyleButton, {

package/dist/components/flow-approval/components/action/close.d.ts

@@ -0,0 +1 @@
+export declare const CloseAction: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/flow-approval/components/action/close.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { useApprovalContext } from "@coding-flow/flow-approval-presenter";
+import { Button } from "antd";
+import "react";
+import { APPROVAL_ACTION_CLOSE_KEY } from "../../index.js";
+import { ViewBindPlugin } from "@coding-flow/flow-core";
+const CloseAction = ()=>{
+    const { context } = useApprovalContext();
+    const ActionView = ViewBindPlugin.getInstance().get(APPROVAL_ACTION_CLOSE_KEY);
+    if (ActionView) return /*#__PURE__*/ jsx(ActionView, {});
+    return /*#__PURE__*/ jsx(Button, {
+        onClick: ()=>{
+            context.close();
+        },
+        children: "关闭"
+    });
+};
+export { CloseAction };

package/dist/components/flow-approval/components/action/custom.js

@@ -2,9 +2,10 @@ import { jsx } from "react/jsx-runtime";
 import "react";
 import { message } from "antd";
 import { useApprovalContext } from "@coding-flow/flow-approval-presenter";
-import { GroovyScriptConvertorUtil } from "@coding-flow/flow-core";
+import { GroovyScriptConvertorUtil, ViewBindPlugin } from "@coding-flow/flow-core";
 import { ActionFactory } from "./factory.js";
 import { CustomStyleButton } from "../custom-style-button.js";
+import { APPROVAL_ACTION_CUSTOM_KEY } from "../../index.js";
 const CustomAction = (props)=>{
     const action = props.action;
     const { context } = useApprovalContext();
@@ -12,6 +13,10 @@ const CustomAction = (props)=>{
     const script = action.script || '';
     const returnData = GroovyScriptConvertorUtil.getReturnScript(script);
     const triggerType = returnData.replaceAll('\'', '');
+    const ActionView = ViewBindPlugin.getInstance().get(APPROVAL_ACTION_CUSTOM_KEY);
+    if (ActionView) return /*#__PURE__*/ jsx(ActionView, {
+        ...props
+    });
     const FlowActionComponent = ActionFactory.getInstance().getFlowActionComponent({
         ...props.action,
         type: triggerType

package/dist/components/flow-approval/components/action/delegate.js

@@ -4,6 +4,8 @@ import { Form, Modal, message } from "antd";
 import { useApprovalContext } from "@coding-flow/flow-approval-presenter";
 import { DelegateView } from "../../../../plugins/view/delegate-view.js";
 import { CustomStyleButton } from "../custom-style-button.js";
+import { APPROVAL_ACTION_DELEGATE_KEY } from "../../index.js";
+import { ViewBindPlugin } from "@coding-flow/flow-core";
 const DelegateAction = (props)=>{
     const action = props.action;
     const { context } = useApprovalContext();
@@ -26,6 +28,10 @@ const DelegateAction = (props)=>{
             }
         });
     };
+    const ActionView = ViewBindPlugin.getInstance().get(APPROVAL_ACTION_DELEGATE_KEY);
+    if (ActionView) return /*#__PURE__*/ jsx(ActionView, {
+        ...props
+    });
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(CustomStyleButton, {

package/dist/components/flow-approval/components/action/pass.js

@@ -5,6 +5,8 @@ import { useApprovalContext } from "@coding-flow/flow-approval-presenter";
 import { SignKeyView } from "../../../../plugins/view/sign-key-view.js";
 import { CustomStyleButton } from "../custom-style-button.js";
 import { ManualView } from "../../../../plugins/view/manual-view.js";
+import { APPROVAL_ACTION_PASS_KEY } from "../../index.js";
+import { ViewBindPlugin } from "@coding-flow/flow-core";
 const { TextArea } = Input;
 const PassAction = (props)=>{
     const action = props.action;
@@ -44,6 +46,10 @@ const PassAction = (props)=>{
             message: '请输入审批意见'
         }
     ] : [];
+    const ActionView = ViewBindPlugin.getInstance().get(APPROVAL_ACTION_PASS_KEY);
+    if (ActionView) return /*#__PURE__*/ jsx(ActionView, {
+        ...props
+    });
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(CustomStyleButton, {

package/dist/components/flow-approval/components/action/reject.js

@@ -3,6 +3,8 @@ import react from "react";
 import { Form, Input, Modal, message } from "antd";
 import { useApprovalContext } from "@coding-flow/flow-approval-presenter";
 import { CustomStyleButton } from "../custom-style-button.js";
+import { APPROVAL_ACTION_REJECT_KEY } from "../../index.js";
+import { ViewBindPlugin } from "@coding-flow/flow-core";
 const { TextArea } = Input;
 const RejectAction = (props)=>{
     const action = props.action;
@@ -25,6 +27,10 @@ const RejectAction = (props)=>{
             message: '请输入审批意见'
         }
     ] : [];
+    const ActionView = ViewBindPlugin.getInstance().get(APPROVAL_ACTION_REJECT_KEY);
+    if (ActionView) return /*#__PURE__*/ jsx(ActionView, {
+        ...props
+    });
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(CustomStyleButton, {

package/dist/components/flow-approval/components/action/return.js

@@ -4,6 +4,8 @@ import { Form, Modal, message } from "antd";
 import { useApprovalContext } from "@coding-flow/flow-approval-presenter";
 import { ReturnView } from "../../../../plugins/view/return-view.js";
 import { CustomStyleButton } from "../custom-style-button.js";
+import { APPROVAL_ACTION_RETURN_KEY } from "../../index.js";
+import { ViewBindPlugin } from "@coding-flow/flow-core";
 const ReturnAction = (props)=>{
     const action = props.action;
     const { context } = useApprovalContext();
@@ -26,6 +28,10 @@ const ReturnAction = (props)=>{
             }
         });
     };
+    const ActionView = ViewBindPlugin.getInstance().get(APPROVAL_ACTION_RETURN_KEY);
+    if (ActionView) return /*#__PURE__*/ jsx(ActionView, {
+        ...props
+    });
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(CustomStyleButton, {

package/dist/components/flow-approval/components/action/revoke.js

@@ -2,10 +2,14 @@ import { Fragment, jsx } from "react/jsx-runtime";
 import "react";
 import { Button, Popconfirm, message } from "antd";
 import { useApprovalContext } from "@coding-flow/flow-approval-presenter";
+import { APPROVAL_ACTION_REVOKE_KEY } from "../../index.js";
+import { ViewBindPlugin } from "@coding-flow/flow-core";
 const RevokeAction = ()=>{
     const { state, context } = useApprovalContext();
     const presenter = context.getPresenter().getFlowActionPresenter();
     const revoke = state.flow?.revoke || false;
+    const ActionView = ViewBindPlugin.getInstance().get(APPROVAL_ACTION_REVOKE_KEY);
+    if (ActionView) return /*#__PURE__*/ jsx(ActionView, {});
     return /*#__PURE__*/ jsx(Fragment, {
         children: revoke && /*#__PURE__*/ jsx(Popconfirm, {
             title: "确认要撤销审批吗？",

package/dist/components/flow-approval/components/action/save.js

@@ -3,10 +3,16 @@ import "react";
 import { message } from "antd";
 import { useApprovalContext } from "@coding-flow/flow-approval-presenter";
 import { CustomStyleButton } from "../custom-style-button.js";
+import { APPROVAL_ACTION_SAVE_KEY } from "../../index.js";
+import { ViewBindPlugin } from "@coding-flow/flow-core";
 const SaveAction = (props)=>{
     const action = props.action;
     const { context } = useApprovalContext();
     const actionPresenter = context.getPresenter().getFlowActionPresenter();
+    const ActionView = ViewBindPlugin.getInstance().get(APPROVAL_ACTION_SAVE_KEY);
+    if (ActionView) return /*#__PURE__*/ jsx(ActionView, {
+        ...props
+    });
     return /*#__PURE__*/ jsx(CustomStyleButton, {
         display: props.action.display,
         onClick: ()=>{

package/dist/components/flow-approval/components/action/transfer.js

@@ -4,6 +4,8 @@ import { Form, Modal, message } from "antd";
 import { useApprovalContext } from "@coding-flow/flow-approval-presenter";
 import { TransferView } from "../../../../plugins/view/transfer-view.js";
 import { CustomStyleButton } from "../custom-style-button.js";
+import { APPROVAL_ACTION_TRANSFER_KEY } from "../../index.js";
+import { ViewBindPlugin } from "@coding-flow/flow-core";
 const TransferAction = (props)=>{
     const action = props.action;
     const { context } = useApprovalContext();
@@ -26,6 +28,10 @@ const TransferAction = (props)=>{
             }
         });
     };
+    const ActionView = ViewBindPlugin.getInstance().get(APPROVAL_ACTION_TRANSFER_KEY);
+    if (ActionView) return /*#__PURE__*/ jsx(ActionView, {
+        ...props
+    });
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(CustomStyleButton, {

package/dist/components/flow-approval/components/action/urge.js

@@ -2,10 +2,14 @@ import { Fragment, jsx } from "react/jsx-runtime";
 import "react";
 import { Button, Popconfirm, message } from "antd";
 import { useApprovalContext } from "@coding-flow/flow-approval-presenter";
+import { APPROVAL_ACTION_URGE_KEY } from "../../index.js";
+import { ViewBindPlugin } from "@coding-flow/flow-core";
 const UrgeAction = ()=>{
     const { state, context } = useApprovalContext();
     const presenter = context.getPresenter().getFlowActionPresenter();
     const urge = state.flow?.urge || false;
+    const ActionView = ViewBindPlugin.getInstance().get(APPROVAL_ACTION_URGE_KEY);
+    if (ActionView) return /*#__PURE__*/ jsx(ActionView, {});
     return /*#__PURE__*/ jsx(Fragment, {
         children: urge && /*#__PURE__*/ jsx(Popconfirm, {
             title: "确认要催办审批用户吗？",

package/dist/components/flow-approval/components/flow-approval-actions.d.ts

@@ -0,0 +1 @@
+export declare const FlowApprovalActions: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/flow-approval/components/flow-approval-actions.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useApprovalContext } from "@coding-flow/flow-approval-presenter";
+import "react";
+import { Space, message } from "antd";
+import { ObjectUtils } from "@coding-flow/flow-core";
+import { ActionFactory } from "./action/factory.js";
+import { UrgeAction } from "./action/urge.js";
+import { RevokeAction } from "./action/revoke.js";
+import { CloseAction } from "./action/close.js";
+const FlowApprovalActions = ()=>{
+    const { state, context } = useApprovalContext();
+    const actions = state.flow?.actions || [];
+    const review = state?.review || false;
+    const handlerClickCheck = (id)=>{
+        if (state.flow?.mergeable) {
+            const presenter = context.getPresenter().getFlowActionPresenter();
+            const selectRecordIds = presenter.getSubmitRecordIds();
+            const currentFormData = presenter.getCurrentFormData();
+            if (ObjectUtils.isEmptyObject(currentFormData) && 0 == selectRecordIds.length) {
+                message.error('请先选择审批流程.');
+                return false;
+            }
+        }
+        return true;
+    };
+    return /*#__PURE__*/ jsxs(Space, {
+        size: 8,
+        children: [
+            !review && actions.map((action)=>{
+                const FlowActionComponent = ActionFactory.getInstance().getFlowActionComponent(action);
+                if (FlowActionComponent) return /*#__PURE__*/ jsx(FlowActionComponent, {
+                    action: action,
+                    onClickCheck: (actionId)=>handlerClickCheck(actionId)
+                });
+            }),
+            /*#__PURE__*/ jsx(UrgeAction, {}),
+            /*#__PURE__*/ jsx(RevokeAction, {}),
+            /*#__PURE__*/ jsx(CloseAction, {})
+        ]
+    });
+};
+export { FlowApprovalActions };

package/dist/components/flow-approval/components/flow-approval-content.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FlowNodeHistoryAction } from "./flow-node-history";
+interface FlowApprovalContentProps {
+    flowNodeHistoryAction: React.RefObject<FlowNodeHistoryAction>;
+}
+export declare const FlowApprovalContent: React.FC<FlowApprovalContentProps>;
+export {};

package/dist/components/flow-approval/components/flow-approval-content.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { FormViewComponent } from "./form-view-component.js";
+import { Card, Layout } from "antd";
+const { Content } = Layout;
+const FlowApprovalContent = (props)=>{
+    const flowNodeHistoryAction = props.flowNodeHistoryAction;
+    const handleValuesChange = (values)=>{
+        flowNodeHistoryAction.current?.refresh();
+    };
+    return /*#__PURE__*/ jsx(Content, {
+        style: {
+            overflow: 'auto',
+            width: '100%'
+        },
+        children: /*#__PURE__*/ jsx(Card, {
+            style: {
+                height: '100%',
+                borderRadius: 8
+            },
+            styles: {
+                body: {
+                    padding: 24
+                }
+            },
+            children: /*#__PURE__*/ jsx(FormViewComponent, {
+                onValuesChange: handleValuesChange
+            })
+        })
+    });
+};
+export { FlowApprovalContent };

package/dist/components/flow-approval/components/flow-approval-sider.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FlowNodeHistoryAction } from "./flow-node-history";
+interface FlowApprovalSiderProps {
+    flowNodeHistoryAction: React.RefObject<FlowNodeHistoryAction>;
+}
+export declare const FlowApprovalSider: React.FC<FlowApprovalSiderProps>;
+export {};

package/dist/components/flow-approval/components/flow-approval-sider.js

@@ -0,0 +1,116 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { FlowNodeHistory } from "./flow-node-history.js";
+import { ApprovalSidebarCollapsedWidth, ApprovalSidebarWidth } from "../typings/index.js";
+import { Button, Flex, Layout, Typography } from "antd";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
+const { Sider } = Layout;
+const { Title } = Typography;
+const FlowApprovalSider = (props)=>{
+    const [collapsed, setCollapsed] = useState(false);
+    const flowNodeHistoryAction = props.flowNodeHistoryAction;
+    return /*#__PURE__*/ jsxs(Sider, {
+        width: ApprovalSidebarWidth,
+        collapsedWidth: ApprovalSidebarCollapsedWidth,
+        collapsible: true,
+        collapsed: collapsed,
+        onCollapse: setCollapsed,
+        trigger: null,
+        style: {
+            marginLeft: "8px",
+            backgroundColor: '#fff',
+            borderRadius: 8,
+            overflow: 'hidden'
+        },
+        children: [
+            !collapsed && /*#__PURE__*/ jsxs(Flex, {
+                vertical: true,
+                style: {
+                    height: '100%'
+                },
+                children: [
+                    /*#__PURE__*/ jsxs(Flex, {
+                        justify: "space-between",
+                        align: "center",
+                        style: {
+                            padding: '16px 24px',
+                            borderBottom: '1px solid #f0f0f0',
+                            backgroundColor: '#fafafa'
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx(Title, {
+                                level: 5,
+                                style: {
+                                    margin: 0,
+                                    fontSize: 15
+                                },
+                                children: "流程记录"
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                type: "text",
+                                size: "small",
+                                icon: /*#__PURE__*/ jsx(LeftOutlined, {
+                                    style: {
+                                        fontSize: 12
+                                    }
+                                }),
+                                onClick: ()=>setCollapsed(true),
+                                style: {
+                                    color: '#8c8c8c'
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        style: {
+                            padding: 16,
+                            flex: 1,
+                            overflow: 'auto'
+                        },
+                        children: /*#__PURE__*/ jsx(FlowNodeHistory, {
+                            actionRef: flowNodeHistoryAction
+                        })
+                    })
+                ]
+            }),
+            collapsed && /*#__PURE__*/ jsxs(Flex, {
+                vertical: true,
+                align: "center",
+                justify: "center",
+                gap: 16,
+                style: {
+                    height: '100%',
+                    padding: '12px 8px',
+                    backgroundColor: '#fafafa'
+                },
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        type: "text",
+                        size: "small",
+                        icon: /*#__PURE__*/ jsx(RightOutlined, {
+                            style: {
+                                fontSize: 12
+                            }
+                        }),
+                        onClick: ()=>setCollapsed(false),
+                        style: {
+                            color: '#8c8c8c'
+                        }
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        style: {
+                            writingMode: 'vertical-rl',
+                            textOrientation: 'mixed',
+                            letterSpacing: 4,
+                            fontSize: 14,
+                            fontWeight: 500,
+                            color: '#595959'
+                        },
+                        children: "流程记录"
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { FlowApprovalSider };

package/dist/components/flow-approval/components/flow-approval-title.d.ts

@@ -0,0 +1 @@
+export declare const FlowApprovalTitle: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/flow-approval/components/flow-approval-title.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Typography } from "antd";
+import { useApprovalContext } from "@coding-flow/flow-approval-presenter";
+const { Title } = Typography;
+const FlowApprovalTitle = ()=>{
+    const { state } = useApprovalContext();
+    return /*#__PURE__*/ jsx(Title, {
+        level: 4,
+        style: {
+            fontSize: 16,
+            fontWeight: 500
+        },
+        children: state.flow?.title || '审批详情'
+    });
+};
+export { FlowApprovalTitle };

package/dist/components/flow-approval/index.d.ts

@@ -1,16 +1,5 @@
-import React from "react";
-interface ApprovalPanelProps {
-    /** 初始化数据 **/
-    initData?: any;
-    workflowCode?: string;
-    recordId?: string;
-    onClose?: () => void;
-    review?: boolean;
-}
-export declare const ApprovalPanel: React.FC<ApprovalPanelProps>;
-interface ApprovalPanelDrawerProps extends ApprovalPanelProps {
-    open: boolean;
-    onClose: () => void;
-}
-export declare const ApprovalPanelDrawer: React.FC<ApprovalPanelDrawerProps>;
-export {};
+export * from "./view";
+export * from "./typings/plugin-type";
+export * from "./components/action/factory";
+export * from "./components/action/type";
+export * from "./components/flow-approval-actions";

package/dist/components/flow-approval/index.js

@@ -1,38 +1,5 @@
-import { jsx } from "react/jsx-runtime";
-import react from "react";
-import { Drawer } from "@coding-flow/flow-pc-ui";
-import { detail } from "../../api/record.js";
-import { ApprovalLayout } from "./layout/index.js";
-import { useMockContext } from "@coding-flow/flow-approval-presenter";
-const ApprovalPanel = (props)=>{
-    const [content, dispatch] = react.useState(void 0);
-    const mockKey = useMockContext();
-    react.useEffect(()=>{
-        const id = props.recordId || props.workflowCode || '';
-        detail(id, mockKey).then((res)=>{
-            if (res.success) dispatch(res.data);
-        });
-    }, []);
-    return /*#__PURE__*/ jsx("div", {
-        children: content && /*#__PURE__*/ jsx(ApprovalLayout, {
-            content: content,
-            onClose: props.onClose,
-            review: props.review,
-            initData: props.initData
-        })
-    });
-};
-const ApprovalPanelDrawer = (props)=>/*#__PURE__*/ jsx(Drawer, {
-        open: props.open,
-        onClose: props.onClose,
-        styles: {
-            body: {
-                padding: 0,
-                margin: 0
-            }
-        },
-        children: /*#__PURE__*/ jsx(ApprovalPanel, {
-            ...props
-        })
-    });
-export { ApprovalPanel, ApprovalPanelDrawer };
+export * from "./view.js";
+export * from "./typings/plugin-type.js";
+export * from "./components/action/factory.js";
+export * from "./components/action/type.js";
+export * from "./components/flow-approval-actions.js";

package/dist/components/flow-approval/layout/body.js

@@ -1,18 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import react, { useState } from "react";
-import { FormViewComponent } from "../components/form-view-component.js";
-import { FlowNodeHistory } from "../components/flow-node-history.js";
-import { ApprovalContentPaddingH, ApprovalContentPaddingV, ApprovalLayoutHeight, ApprovalSidebarCollapsedWidth, ApprovalSidebarWidth } from "../typings/index.js";
-import { Button, Card, Flex, Layout, Typography } from "antd";
-import { LeftOutlined, RightOutlined } from "@ant-design/icons";
-const { Sider, Content } = Layout;
-const { Title } = Typography;
+import react from "react";
+import { ApprovalContentPaddingH, ApprovalContentPaddingV, ApprovalLayoutHeight } from "../typings/index.js";
+import { Layout } from "antd";
+import { FlowApprovalContent } from "../components/flow-approval-content.js";
+import { FlowApprovalSider } from "../components/flow-approval-sider.js";
+import { APPROVAL_BODY_VIEW_KEY } from "../index.js";
+import { ViewBindPlugin } from "@coding-flow/flow-core";
 const Body = ()=>{
-    const [collapsed, setCollapsed] = useState(false);
     const flowNodeHistoryAction = react.useRef(null);
-    const handleValuesChange = (values)=>{
-        flowNodeHistoryAction.current?.refresh();
-    };
+    const BodyView = ViewBindPlugin.getInstance().get(APPROVAL_BODY_VIEW_KEY);
+    if (BodyView) return /*#__PURE__*/ jsx(BodyView, {});
     return /*#__PURE__*/ jsxs(Layout, {
         style: {
             padding: `${ApprovalContentPaddingV}px ${ApprovalContentPaddingH}px`,
@@ -21,128 +18,11 @@ const Body = ()=>{
             height: `calc(100vh - ${ApprovalLayoutHeight}px)`
         },
         children: [
-            /*#__PURE__*/ jsx(Content, {
-                style: {
-                    overflow: 'auto',
-                    width: '100%'
-                },
-                children: /*#__PURE__*/ jsx(Card, {
-                    style: {
-                        height: '100%',
-                        borderRadius: 8
-                    },
-                    styles: {
-                        body: {
-                            padding: 24
-                        }
-                    },
-                    children: /*#__PURE__*/ jsx(FormViewComponent, {
-                        onValuesChange: handleValuesChange
-                    })
-                })
+            /*#__PURE__*/ jsx(FlowApprovalContent, {
+                flowNodeHistoryAction: flowNodeHistoryAction
             }),
-            /*#__PURE__*/ jsxs(Sider, {
-                width: ApprovalSidebarWidth,
-                collapsedWidth: ApprovalSidebarCollapsedWidth,
-                collapsible: true,
-                collapsed: collapsed,
-                onCollapse: setCollapsed,
-                trigger: null,
-                style: {
-                    marginLeft: "8px",
-                    backgroundColor: '#fff',
-                    borderRadius: 8,
-                    overflow: 'hidden'
-                },
-                children: [
-                    !collapsed && /*#__PURE__*/ jsxs(Flex, {
-                        vertical: true,
-                        style: {
-                            height: '100%'
-                        },
-                        children: [
-                            /*#__PURE__*/ jsxs(Flex, {
-                                justify: "space-between",
-                                align: "center",
-                                style: {
-                                    padding: '16px 24px',
-                                    borderBottom: '1px solid #f0f0f0',
-                                    backgroundColor: '#fafafa'
-                                },
-                                children: [
-                                    /*#__PURE__*/ jsx(Title, {
-                                        level: 5,
-                                        style: {
-                                            margin: 0,
-                                            fontSize: 15
-                                        },
-                                        children: "流程记录"
-                                    }),
-                                    /*#__PURE__*/ jsx(Button, {
-                                        type: "text",
-                                        size: "small",
-                                        icon: /*#__PURE__*/ jsx(LeftOutlined, {
-                                            style: {
-                                                fontSize: 12
-                                            }
-                                        }),
-                                        onClick: ()=>setCollapsed(true),
-                                        style: {
-                                            color: '#8c8c8c'
-                                        }
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsx("div", {
-                                style: {
-                                    padding: 16,
-                                    flex: 1,
-                                    overflow: 'auto'
-                                },
-                                children: /*#__PURE__*/ jsx(FlowNodeHistory, {
-                                    actionRef: flowNodeHistoryAction
-                                })
-                            })
-                        ]
-                    }),
-                    collapsed && /*#__PURE__*/ jsxs(Flex, {
-                        vertical: true,
-                        align: "center",
-                        justify: "center",
-                        gap: 16,
-                        style: {
-                            height: '100%',
-                            padding: '12px 8px',
-                            backgroundColor: '#fafafa'
-                        },
-                        children: [
-                            /*#__PURE__*/ jsx(Button, {
-                                type: "text",
-                                size: "small",
-                                icon: /*#__PURE__*/ jsx(RightOutlined, {
-                                    style: {
-                                        fontSize: 12
-                                    }
-                                }),
-                                onClick: ()=>setCollapsed(false),
-                                style: {
-                                    color: '#8c8c8c'
-                                }
-                            }),
-                            /*#__PURE__*/ jsx("div", {
-                                style: {
-                                    writingMode: 'vertical-rl',
-                                    textOrientation: 'mixed',
-                                    letterSpacing: 4,
-                                    fontSize: 14,
-                                    fontWeight: 500,
-                                    color: '#595959'
-                                },
-                                children: "流程记录"
-                            })
-                        ]
-                    })
-                ]
+            /*#__PURE__*/ jsx(FlowApprovalSider, {
+                flowNodeHistoryAction: flowNodeHistoryAction
             })
         ]
     });

package/dist/components/flow-approval/layout/footer.d.ts

@@ -0,0 +1 @@
+export declare const Footer: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/flow-approval/layout/footer.js

@@ -0,0 +1,10 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import "react";
+import { APPROVAL_FOOTER_VIEW_KEY } from "../index.js";
+import { ViewBindPlugin } from "@coding-flow/flow-core";
+const Footer = ()=>{
+    const HeaderView = ViewBindPlugin.getInstance().get(APPROVAL_FOOTER_VIEW_KEY);
+    if (HeaderView) return /*#__PURE__*/ jsx(HeaderView, {});
+    return /*#__PURE__*/ jsx(Fragment, {});
+};
+export { Footer };

package/dist/components/flow-approval/layout/header.js

@@ -1,29 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { useApprovalContext } from "@coding-flow/flow-approval-presenter";
-import { Button, Flex, Space, Typography, message } from "antd";
+import { Flex } from "antd";
 import { ApprovalLayoutHeight } from "../typings/index.js";
-import { ActionFactory } from "../components/action/factory.js";
-import { UrgeAction } from "../components/action/urge.js";
-import { RevokeAction } from "../components/action/revoke.js";
-import { ObjectUtils } from "@coding-flow/flow-core";
-const { Title } = Typography;
+import { FlowApprovalActions } from "../components/flow-approval-actions.js";
+import { FlowApprovalTitle } from "../components/flow-approval-title.js";
+import { ViewBindPlugin } from "@coding-flow/flow-core";
+import { APPROVAL_HEADER_VIEW_KEY } from "../index.js";
 const Header = ()=>{
-    const { state, context } = useApprovalContext();
-    const actions = state.flow?.actions || [];
-    const review = state?.review || false;
-    const handlerClickCheck = (id)=>{
-        if (state.flow?.mergeable) {
-            const presenter = context.getPresenter().getFlowActionPresenter();
-            const selectRecordIds = presenter.getSubmitRecordIds();
-            const currentFormData = presenter.getCurrentFormData();
-            if (ObjectUtils.isEmptyObject(currentFormData) && 0 == selectRecordIds.length) {
-                message.error('请先选择审批流程.');
-                return false;
-            }
-        }
-        return true;
-    };
+    const HeaderView = ViewBindPlugin.getInstance().get(APPROVAL_HEADER_VIEW_KEY);
+    if (HeaderView) return /*#__PURE__*/ jsx(HeaderView, {});
     return /*#__PURE__*/ jsx("div", {
         style: {
             width: "100%",
@@ -39,34 +24,8 @@ const Header = ()=>{
                 height: '100%'
             },
             children: [
-                /*#__PURE__*/ jsx(Title, {
-                    level: 4,
-                    style: {
-                        fontSize: 16,
-                        fontWeight: 500
-                    },
-                    children: state.flow?.title || '审批详情'
-                }),
-                /*#__PURE__*/ jsxs(Space, {
-                    size: 8,
-                    children: [
-                        !review && actions.map((action)=>{
-                            const FlowActionComponent = ActionFactory.getInstance().getFlowActionComponent(action);
-                            if (FlowActionComponent) return /*#__PURE__*/ jsx(FlowActionComponent, {
-                                action: action,
-                                onClickCheck: (actionId)=>handlerClickCheck(actionId)
-                            });
-                        }),
-                        /*#__PURE__*/ jsx(UrgeAction, {}),
-                        /*#__PURE__*/ jsx(RevokeAction, {}),
-                        /*#__PURE__*/ jsx(Button, {
-                            onClick: ()=>{
-                                context.close();
-                            },
-                            children: "关闭"
-                        })
-                    ]
-                })
+                /*#__PURE__*/ jsx(FlowApprovalTitle, {}),
+                /*#__PURE__*/ jsx(FlowApprovalActions, {})
             ]
         })
     });

package/dist/components/flow-approval/layout/index.js

@@ -1,15 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { Provider } from "react-redux";
 import { ApprovalContext, approvalStore, createApprovalContext } from "@coding-flow/flow-approval-presenter";
+import { Provider } from "react-redux";
 import { Header } from "./header.js";
 import { Body } from "./body.js";
 import { FlowApprovalApiImpl } from "../model/index.js";
+import { Footer } from "./footer.js";
 const ApprovalLayoutScope = (props)=>{
     const { context } = createApprovalContext(props, new FlowApprovalApiImpl());
     return /*#__PURE__*/ jsx(ApprovalContext.Provider, {
         value: context,
         children: /*#__PURE__*/ jsxs("div", {
+            className: props.className,
             style: {
                 width: '100%',
                 height: '100vh',
@@ -19,7 +21,8 @@ const ApprovalLayoutScope = (props)=>{
             },
             children: [
                 /*#__PURE__*/ jsx(Header, {}),
-                /*#__PURE__*/ jsx(Body, {})
+                /*#__PURE__*/ jsx(Body, {}),
+                /*#__PURE__*/ jsx(Footer, {})
             ]
         })
     });

package/dist/components/flow-approval/typings/plugin-type.d.ts

@@ -0,0 +1,14 @@
+export declare const APPROVAL_HEADER_VIEW_KEY = "APPROVAL_HEADER_VIEW_KEY";
+export declare const APPROVAL_BODY_VIEW_KEY = "APPROVAL_BODY_VIEW_KEY";
+export declare const APPROVAL_FOOTER_VIEW_KEY = "APPROVAL_FOOTER_VIEW_KEY";
+export declare const APPROVAL_ACTION_ADD_AUDIT_KEY = "APPROVAL_ACTION_ADD_AUDIT_KEY";
+export declare const APPROVAL_ACTION_CLOSE_KEY = "APPROVAL_ACTION_CLOSE_KEY";
+export declare const APPROVAL_ACTION_CUSTOM_KEY = "APPROVAL_ACTION_CUSTOM_KEY";
+export declare const APPROVAL_ACTION_DELEGATE_KEY = "APPROVAL_ACTION_DELEGATE_KEY";
+export declare const APPROVAL_ACTION_PASS_KEY = "APPROVAL_ACTION_PASS_KEY";
+export declare const APPROVAL_ACTION_REJECT_KEY = "APPROVAL_ACTION_REJECT_KEY";
+export declare const APPROVAL_ACTION_RETURN_KEY = "APPROVAL_ACTION_RETURN_KEY";
+export declare const APPROVAL_ACTION_REVOKE_KEY = "APPROVAL_ACTION_REVOKE_KEY";
+export declare const APPROVAL_ACTION_SAVE_KEY = "APPROVAL_ACTION_SAVE_KEY";
+export declare const APPROVAL_ACTION_TRANSFER_KEY = "APPROVAL_ACTION_TRANSFER_KEY";
+export declare const APPROVAL_ACTION_URGE_KEY = "APPROVAL_ACTION_URGE_KEY";

package/dist/components/flow-approval/typings/plugin-type.js

@@ -0,0 +1,15 @@
+const APPROVAL_HEADER_VIEW_KEY = 'APPROVAL_HEADER_VIEW_KEY';
+const APPROVAL_BODY_VIEW_KEY = 'APPROVAL_BODY_VIEW_KEY';
+const APPROVAL_FOOTER_VIEW_KEY = 'APPROVAL_FOOTER_VIEW_KEY';
+const APPROVAL_ACTION_ADD_AUDIT_KEY = 'APPROVAL_ACTION_ADD_AUDIT_KEY';
+const APPROVAL_ACTION_CLOSE_KEY = 'APPROVAL_ACTION_CLOSE_KEY';
+const APPROVAL_ACTION_CUSTOM_KEY = 'APPROVAL_ACTION_CUSTOM_KEY';
+const APPROVAL_ACTION_DELEGATE_KEY = 'APPROVAL_ACTION_DELEGATE_KEY';
+const APPROVAL_ACTION_PASS_KEY = 'APPROVAL_ACTION_PASS_KEY';
+const APPROVAL_ACTION_REJECT_KEY = 'APPROVAL_ACTION_REJECT_KEY';
+const APPROVAL_ACTION_RETURN_KEY = 'APPROVAL_ACTION_RETURN_KEY';
+const APPROVAL_ACTION_REVOKE_KEY = 'APPROVAL_ACTION_REVOKE_KEY';
+const APPROVAL_ACTION_SAVE_KEY = 'APPROVAL_ACTION_SAVE_KEY';
+const APPROVAL_ACTION_TRANSFER_KEY = 'APPROVAL_ACTION_TRANSFER_KEY';
+const APPROVAL_ACTION_URGE_KEY = 'APPROVAL_ACTION_URGE_KEY';
+export { APPROVAL_ACTION_ADD_AUDIT_KEY, APPROVAL_ACTION_CLOSE_KEY, APPROVAL_ACTION_CUSTOM_KEY, APPROVAL_ACTION_DELEGATE_KEY, APPROVAL_ACTION_PASS_KEY, APPROVAL_ACTION_REJECT_KEY, APPROVAL_ACTION_RETURN_KEY, APPROVAL_ACTION_REVOKE_KEY, APPROVAL_ACTION_SAVE_KEY, APPROVAL_ACTION_TRANSFER_KEY, APPROVAL_ACTION_URGE_KEY, APPROVAL_BODY_VIEW_KEY, APPROVAL_FOOTER_VIEW_KEY, APPROVAL_HEADER_VIEW_KEY };

package/dist/components/flow-approval/view.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ApprovalPanelProps } from "@coding-flow/flow-approval-presenter";
+export declare const ApprovalPanel: React.FC<ApprovalPanelProps>;
+interface ApprovalPanelDrawerProps extends ApprovalPanelProps {
+    open: boolean;
+    onClose: () => void;
+    drawerClassName?: string;
+}
+export declare const ApprovalPanelDrawer: React.FC<ApprovalPanelDrawerProps>;
+export {};

package/dist/components/flow-approval/view.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import react from "react";
+import { Drawer } from "@coding-flow/flow-pc-ui";
+import { detail } from "../../api/record.js";
+import { ApprovalLayout } from "./layout/index.js";
+import { useMockContext } from "@coding-flow/flow-approval-presenter";
+const ApprovalPanel = (props)=>{
+    const [content, dispatch] = react.useState(void 0);
+    const mockKey = useMockContext();
+    react.useEffect(()=>{
+        const id = props.recordId || props.workflowCode || '';
+        detail(id, mockKey).then((res)=>{
+            if (res.success) dispatch(res.data);
+        });
+    }, []);
+    return /*#__PURE__*/ jsx("div", {
+        children: content && /*#__PURE__*/ jsx(ApprovalLayout, {
+            className: props.className,
+            content: content,
+            onClose: props.onClose,
+            review: props.review,
+            initData: props.initData
+        })
+    });
+};
+const ApprovalPanelDrawer = (props)=>/*#__PURE__*/ jsx(Drawer, {
+        className: props.drawerClassName,
+        open: props.open,
+        onClose: props.onClose,
+        styles: {
+            body: {
+                padding: 0,
+                margin: 0
+            }
+        },
+        children: /*#__PURE__*/ jsx(ApprovalPanel, {
+            ...props
+        })
+    });
+export { ApprovalPanel, ApprovalPanelDrawer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coding-flow/flow-pc-approval",
-  "version": "0.0.12",
+  "version": "0.0.15",
   "description": "flow-engine pc form approval components",
   "type": "module",
   "keywords": [
@@ -33,21 +33,21 @@
   },
   "dependencies": {
     "@ant-design/icons": "~6.1.0",
-    "@coding-form/form-engine": "^0.0.14",
+    "@coding-form/form-engine": "^0.0.15",
     "@reduxjs/toolkit": "^2.11.2",
     "antd": "^6.2.1",
     "dayjs": "^1.11.19",
     "immer": "^11.1.3",
     "react-redux": "^9.2.0",
-    "@coding-flow/flow-approval-presenter": "0.0.12",
-    "@coding-flow/flow-icons": "0.0.12",
-    "@coding-flow/flow-core": "0.0.12",
-    "@coding-flow/flow-types": "0.0.12",
-    "@coding-flow/flow-pc-ui": "0.0.12",
-    "@coding-flow/flow-pc-form": "0.0.12"
+    "@coding-flow/flow-core": "0.0.15",
+    "@coding-flow/flow-types": "0.0.15",
+    "@coding-flow/flow-icons": "0.0.15",
+    "@coding-flow/flow-approval-presenter": "0.0.15",
+    "@coding-flow/flow-pc-ui": "0.0.15",
+    "@coding-flow/flow-pc-form": "0.0.15"
   },
   "devDependencies": {
-    "@coding-flow/flow-types": "0.0.12"
+    "@coding-flow/flow-types": "0.0.15"
   },
   "scripts": {
     "build": "rslib build",