@coding-flow/flow-pc-approval 0.0.1

package/dist/components/flow-approval/components/flow-time-node.js

@@ -0,0 +1,145 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckCircleFilled, ClockCircleOutlined, SyncOutlined } from "@ant-design/icons";
+import { Tag, Typography } from "antd";
+import "react";
+import dayjs from "dayjs";
+const { Text } = Typography;
+const getStatusConfig = (status)=>{
+    switch(status){
+        case 'completed':
+            return {
+                color: 'success',
+                label: '已审批',
+                icon: /*#__PURE__*/ jsx(CheckCircleFilled, {
+                    style: {
+                        color: '#52c41a',
+                        fontSize: 16
+                    }
+                })
+            };
+        case 'current':
+            return {
+                color: 'processing',
+                label: '待审批',
+                icon: /*#__PURE__*/ jsx(SyncOutlined, {
+                    spin: true,
+                    style: {
+                        color: '#1890ff',
+                        fontSize: 16
+                    }
+                })
+            };
+        case 'pending':
+            return {
+                color: 'default',
+                label: '未执行',
+                icon: /*#__PURE__*/ jsx(ClockCircleOutlined, {
+                    style: {
+                        color: '#d9d9d9',
+                        fontSize: 16
+                    }
+                })
+            };
+    }
+};
+const getNodeStatus = (node)=>{
+    if (-1 === node.state) return 'completed';
+    if (0 === node.state) return 'current';
+    return 'pending';
+};
+const FlowOperatorItem = (props)=>{
+    const operator = props.operator;
+    const state = props.state;
+    if (-1 === state) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(Text, {
+                type: "secondary",
+                style: {
+                    fontSize: 12
+                },
+                children: [
+                    "审批人: ",
+                    operator.flowOperator.name
+                ]
+            }),
+            operator.approveTime > 0 && /*#__PURE__*/ jsxs(Text, {
+                type: "secondary",
+                style: {
+                    fontSize: 12
+                },
+                children: [
+                    dayjs(operator.approveTime).format('YYYY-MM-DD HH:mm:ss'),
+                    "  ",
+                    operator.actionName
+                ]
+            }),
+            operator.advice && /*#__PURE__*/ jsx("div", {
+                style: {
+                    padding: 8,
+                    backgroundColor: '#fafafa',
+                    borderRadius: 4,
+                    marginTop: 4
+                },
+                children: /*#__PURE__*/ jsx(Text, {
+                    type: "secondary",
+                    style: {
+                        fontSize: 12
+                    },
+                    children: operator.advice
+                })
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsxs(Text, {
+        type: "secondary",
+        style: {
+            fontSize: 12
+        },
+        children: [
+            "待审批人: ",
+            operator.flowOperator.name
+        ]
+    });
+};
+const FlowTimeNode = (props)=>{
+    const node = props.node;
+    const operators = node.operators || [];
+    return /*#__PURE__*/ jsxs("div", {
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 4,
+            width: '100%'
+        },
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8
+                },
+                children: [
+                    /*#__PURE__*/ jsx(Text, {
+                        strong: true,
+                        style: {
+                            fontSize: 14
+                        },
+                        children: node.nodeName
+                    }),
+                    /*#__PURE__*/ jsx(Tag, {
+                        color: getStatusConfig(getNodeStatus(node)).color,
+                        style: {
+                            margin: 0
+                        },
+                        children: getStatusConfig(getNodeStatus(node)).label
+                    })
+                ]
+            }),
+            operators.map((operator)=>/*#__PURE__*/ jsx(FlowOperatorItem, {
+                    operator: operator,
+                    state: node.state
+                }))
+        ]
+    });
+};
+export { FlowTimeNode, getNodeStatus, getStatusConfig };

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

@@ -0,0 +1,6 @@
+import React from "react";
+interface FormViewComponentProps {
+    onValuesChange?: (values: any) => void;
+}
+export declare const FormViewComponent: React.FC<FormViewComponentProps>;
+export {};

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

@@ -0,0 +1,68 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import react from "react";
+import { useApprovalContext } from "@coding-flow/flow-approval-presenter";
+import { ViewBindPlugin } from "@coding-flow/flow-core";
+import { Form } from "antd";
+import { FlowFormView } from "@coding-flow/flow-pc-form";
+const FormViewComponent = (props)=>{
+    const { state, context } = useApprovalContext();
+    const review = state.review || false;
+    const ViewComponent = ViewBindPlugin.getInstance().get(state.flow?.view || 'default') || FlowFormView;
+    const flowForm = state.flow?.form;
+    const fieldPermissions = state.flow?.fieldPermissions || [];
+    const mergeable = state.flow?.mergeable || false;
+    const todos = state.flow?.todos || [];
+    const formList = todos.length > 0 ? todos.map((item)=>({
+            form: Form.useForm()[0],
+            data: item
+        })) : [
+        {
+            form: Form.useForm()[0],
+            data: void 0
+        }
+    ];
+    react.useEffect(()=>{
+        formList.forEach((item)=>{
+            const formInstance = item.form;
+            const formRecord = item.data?.data;
+            context.getPresenter().getFormActionContext().addAction({
+                save: ()=>formInstance.getFieldsValue(),
+                key: ()=>'view-form',
+                validate: ()=>new Promise((resolve, reject)=>{
+                        formInstance.validateFields().then(resolve).catch(reject);
+                    })
+            });
+            formInstance.resetFields();
+            formInstance.setFieldsValue({
+                ...formRecord,
+                recordId: item.data?.recordId
+            });
+        });
+    }, []);
+    const handleMergeRecordIdsSelected = (recordIds)=>{
+        context.getPresenter().getFlowActionPresenter().setSubmitRecordIds(recordIds);
+    };
+    if (ViewComponent && flowForm) {
+        if (mergeable) return /*#__PURE__*/ jsx(ViewComponent, {
+            mergeable: mergeable,
+            fieldPermissions: fieldPermissions,
+            review: review,
+            meta: flowForm,
+            formList: formList,
+            onValuesChange: props.onValuesChange,
+            onMergeRecordIdsSelected: handleMergeRecordIdsSelected
+        });
+        return /*#__PURE__*/ jsx(Fragment, {
+            children: formList.map((item, index)=>/*#__PURE__*/ jsx(ViewComponent, {
+                    data: item.data,
+                    mergeable: mergeable,
+                    fieldPermissions: fieldPermissions,
+                    review: review,
+                    meta: flowForm,
+                    form: item.form,
+                    onValuesChange: props.onValuesChange
+                }, index))
+        });
+    }
+};
+export { FormViewComponent };

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

@@ -0,0 +1,14 @@
+import React from "react";
+interface ApprovalPanelProps {
+    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 {};

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

@@ -0,0 +1,37 @@
+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
+        })
+    });
+};
+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 };

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

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

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

@@ -0,0 +1,150 @@
+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;
+const Body = ()=>{
+    const [collapsed, setCollapsed] = useState(false);
+    const flowNodeHistoryAction = react.useRef(null);
+    const handleValuesChange = (values)=>{
+        flowNodeHistoryAction.current?.refresh();
+    };
+    return /*#__PURE__*/ jsxs(Layout, {
+        style: {
+            padding: `${ApprovalContentPaddingV}px ${ApprovalContentPaddingH}px`,
+            backgroundColor: '#f5f5f5',
+            width: '100%',
+            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__*/ 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 { Body };

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

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

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

@@ -0,0 +1,74 @@
+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 { 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;
+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;
+    };
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            width: "100%",
+            height: ApprovalLayoutHeight,
+            borderBottom: '1px solid #f0f0f0',
+            backgroundColor: '#fff'
+        },
+        children: /*#__PURE__*/ jsxs(Flex, {
+            align: "center",
+            justify: "space-between",
+            style: {
+                margin: '0 24px',
+                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: "关闭"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+export { Header };

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { ApprovalLayoutProps } from "@coding-flow/flow-approval-presenter";
+export declare const ApprovalLayout: React.FC<ApprovalLayoutProps>;

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

@@ -0,0 +1,32 @@
+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 { Header } from "./header.js";
+import { Body } from "./body.js";
+const ApprovalLayoutScope = (props)=>{
+    const { context } = createApprovalContext(props);
+    return /*#__PURE__*/ jsx(ApprovalContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/ jsxs("div", {
+            style: {
+                width: '100%',
+                height: '100vh',
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'hidden'
+            },
+            children: [
+                /*#__PURE__*/ jsx(Header, {}),
+                /*#__PURE__*/ jsx(Body, {})
+            ]
+        })
+    });
+};
+const ApprovalLayout = (props)=>/*#__PURE__*/ jsx(Provider, {
+        store: approvalStore,
+        children: /*#__PURE__*/ jsx(ApprovalLayoutScope, {
+            ...props
+        })
+    });
+export { ApprovalLayout };

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

@@ -0,0 +1,5 @@
+export declare const ApprovalLayoutHeight = 64;
+export declare const ApprovalContentPaddingV = 24;
+export declare const ApprovalContentPaddingH = 24;
+export declare const ApprovalSidebarWidth = 250;
+export declare const ApprovalSidebarCollapsedWidth = 48;

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

@@ -0,0 +1,6 @@
+const ApprovalLayoutHeight = 64;
+const ApprovalContentPaddingV = 24;
+const ApprovalContentPaddingH = 24;
+const ApprovalSidebarWidth = 250;
+const ApprovalSidebarCollapsedWidth = 48;
+export { ApprovalContentPaddingH, ApprovalContentPaddingV, ApprovalLayoutHeight, ApprovalSidebarCollapsedWidth, ApprovalSidebarWidth };

package/dist/components/flow-mock/components/todo.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface MockTodoPageProps {
+    onCleanMock: () => void;
+}
+export declare const MockTodoPage: React.FC<MockTodoPageProps>;
+export {};