@coding-flow/flow-pc-approval 0.0.1

package/dist/components/flow-mock/components/todo.js

@@ -0,0 +1,205 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { done, list, notify, todo } from "../../../api/record.js";
+import { WorkflowSelectModal } from "../../workflow-select-modal/index.js";
+import { Table } from "@coding-flow/flow-pc-ui";
+import { Button, Space, Tabs } from "antd";
+import dayjs from "dayjs";
+import { ApprovalPanelDrawer } from "../../flow-approval/index.js";
+import { FlowTitle } from "../../flow-title/index.js";
+import { useMockContext } from "@coding-flow/flow-approval-presenter";
+const MockTodoPage = (props)=>{
+    const actionAll = react.useRef(null);
+    const actionTodo = react.useRef(null);
+    const actionDone = react.useRef(null);
+    const actionNotify = react.useRef(null);
+    const [selectVisible, setSelectVisible] = react.useState(false);
+    const [approvalVisible, setApprovalVisible] = react.useState(false);
+    const [reviewVisible, setReviewVisible] = react.useState(false);
+    const [workflowCode, setWorkflowCode] = react.useState('');
+    const [currentRecordId, setCurrentRecordId] = react.useState('');
+    const [currentTab, setCurrentTab] = react.useState('todo');
+    const mockKey = useMockContext();
+    const columns = [
+        {
+            dataIndex: 'recordId',
+            title: '编号'
+        },
+        {
+            dataIndex: 'processId',
+            title: '流程编码'
+        },
+        {
+            dataIndex: 'title',
+            title: '流程名称',
+            render: (value)=>/*#__PURE__*/ jsx(FlowTitle, {
+                    title: value
+                })
+        },
+        {
+            dataIndex: 'readTime',
+            title: '读取状态',
+            render: (value)=>value ? '已读' : '未读'
+        },
+        {
+            dataIndex: 'nodeName',
+            title: '节点名称'
+        },
+        {
+            dataIndex: 'createTime',
+            title: '创建时间',
+            render: (text)=>dayjs(text).format('YYYY-MM-DD HH:mm:ss')
+        },
+        {
+            dataIndex: 'currentOperatorId',
+            title: '审批人',
+            hidden: true
+        },
+        {
+            dataIndex: 'currentOperatorName',
+            title: '审批人'
+        },
+        {
+            dataIndex: 'recordState',
+            title: '状态',
+            render: (text)=>text ? '已办' : '待办'
+        },
+        {
+            dataIndex: 'option',
+            title: '操作',
+            render: (_, record)=>{
+                if ('todo' === currentTab) return /*#__PURE__*/ jsx(Space, {
+                    children: /*#__PURE__*/ jsx("a", {
+                        onClick: ()=>{
+                            setCurrentRecordId(record.recordId);
+                            setReviewVisible(false);
+                            setApprovalVisible(true);
+                        },
+                        children: "办理"
+                    })
+                });
+                return /*#__PURE__*/ jsx(Space, {
+                    children: /*#__PURE__*/ jsx("a", {
+                        onClick: ()=>{
+                            setCurrentRecordId(record.recordId);
+                            setReviewVisible(true);
+                            setApprovalVisible(true);
+                        },
+                        children: "详情"
+                    })
+                });
+            }
+        }
+    ];
+    const items = [
+        {
+            key: 'todo',
+            label: '我的待办',
+            children: /*#__PURE__*/ jsx(Table, {
+                rowKey: "id",
+                actionType: actionTodo,
+                columns: columns,
+                request: (request)=>todo(request, mockKey)
+            })
+        },
+        {
+            key: 'done',
+            label: '我的已办',
+            children: /*#__PURE__*/ jsx(Table, {
+                rowKey: "id",
+                actionType: actionDone,
+                columns: columns,
+                request: (request)=>done(request, mockKey)
+            })
+        },
+        {
+            key: 'notify',
+            label: '我的抄送',
+            children: /*#__PURE__*/ jsx(Table, {
+                rowKey: "id",
+                actionType: actionNotify,
+                columns: columns,
+                request: (request)=>notify(request, mockKey)
+            })
+        },
+        {
+            key: 'all',
+            label: '全部流程',
+            children: /*#__PURE__*/ jsx(Table, {
+                rowKey: "id",
+                actionType: actionAll,
+                columns: columns,
+                request: (request)=>list(request, mockKey)
+            })
+        }
+    ];
+    const reloadCurrentTab = ()=>{
+        if ('all' === currentTab) actionAll.current?.reload();
+        if ('done' === currentTab) actionDone.current?.reload();
+        if ('todo' === currentTab) actionTodo.current?.reload();
+        if ('notify' === currentTab) actionNotify.current?.reload();
+    };
+    react.useEffect(()=>{
+        reloadCurrentTab();
+    }, [
+        currentTab
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsx(Tabs, {
+                items: items,
+                centered: true,
+                defaultActiveKey: currentTab,
+                onChange: (currentKey)=>{
+                    setCurrentTab(currentKey);
+                },
+                tabBarExtraContent: {
+                    left: /*#__PURE__*/ jsx("h3", {
+                        children: "模拟流程测试"
+                    }),
+                    right: /*#__PURE__*/ jsxs(Space, {
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                type: 'primary',
+                                onClick: ()=>{
+                                    setCurrentRecordId('');
+                                    setReviewVisible(false);
+                                    setSelectVisible(true);
+                                },
+                                children: "发起流程"
+                            }, "create"),
+                            /*#__PURE__*/ jsx(Button, {
+                                onClick: ()=>{
+                                    props.onCleanMock();
+                                },
+                                children: "关闭模拟"
+                            }, "clean")
+                        ]
+                    })
+                }
+            }),
+            /*#__PURE__*/ jsx(WorkflowSelectModal, {
+                open: selectVisible,
+                onSelect: (code)=>{
+                    setWorkflowCode(code);
+                    setSelectVisible(false);
+                    setApprovalVisible(true);
+                },
+                onClose: ()=>{
+                    setSelectVisible(false);
+                }
+            }),
+            /*#__PURE__*/ jsx(ApprovalPanelDrawer, {
+                workflowCode: workflowCode,
+                open: approvalVisible,
+                recordId: currentRecordId,
+                review: reviewVisible,
+                onClose: ()=>{
+                    setApprovalVisible(false);
+                    reloadCurrentTab();
+                }
+            })
+        ]
+    });
+};
+export { MockTodoPage };

package/dist/components/flow-mock/hooks/use-mock-presenter.d.ts

@@ -0,0 +1,5 @@
+import { FlowMockPresenter } from "../presenter";
+export declare const useMockPresenter: () => {
+    state: string;
+    presenter: FlowMockPresenter;
+};

package/dist/components/flow-mock/hooks/use-mock-presenter.js

@@ -0,0 +1,24 @@
+import react from "react";
+import { FlowMockPresenter } from "../presenter.js";
+import { FlowMockApiImpl } from "../model.js";
+const useMockPresenter = ()=>{
+    const ref = react.useRef(void 0);
+    const [state, setState] = react.useState('');
+    if (!ref.current) {
+        ref.current = new FlowMockPresenter(state, setState, new FlowMockApiImpl());
+        ref.current.initState();
+    }
+    react.useEffect(()=>{
+        if (ref.current && state) ref.current.syncState(state);
+    }, [
+        state
+    ]);
+    react.useEffect(()=>()=>{
+            if (state) ref.current?.cleanMock();
+        }, []);
+    return {
+        state: state,
+        presenter: ref.current
+    };
+};
+export { useMockPresenter };

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

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

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

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { useMockPresenter } from "./hooks/use-mock-presenter.js";
+import { FlowMockContext } from "@coding-flow/flow-approval-presenter";
+import { MockTodoPage } from "./components/todo.js";
+const FlowMock = ()=>{
+    const { state, presenter } = useMockPresenter();
+    if (state) return /*#__PURE__*/ jsx(FlowMockContext.Provider, {
+        value: state,
+        children: /*#__PURE__*/ jsx(MockTodoPage, {
+            onCleanMock: ()=>{
+                presenter.cleanMock();
+                window.close();
+            }
+        })
+    });
+};
+export { FlowMock };

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

@@ -0,0 +1,5 @@
+import { FlowMockApi } from "./types";
+export declare class FlowMockApiImpl implements FlowMockApi {
+    mock: () => Promise<any>;
+    clear: (mockKey: string) => Promise<void>;
+}

package/dist/components/flow-mock/model.js

@@ -0,0 +1,11 @@
+import { cleanMock, mock } from "../../api/workflow.js";
+class FlowMockApiImpl {
+    mock = async ()=>{
+        const result = await mock();
+        if (result.success) return result.data;
+    };
+    clear = async (mockKey)=>{
+        await cleanMock(mockKey);
+    };
+}
+export { FlowMockApiImpl };

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

@@ -0,0 +1,11 @@
+import { FlowMockApi } from "./types";
+import { Dispatch } from "@coding-flow/flow-core";
+export declare class FlowMockPresenter {
+    private state;
+    private readonly dispatch;
+    private readonly api;
+    constructor(state: string, dispatch: Dispatch<string>, api: FlowMockApi);
+    syncState(state: string): void;
+    initState(): void;
+    cleanMock(): void;
+}

package/dist/components/flow-mock/presenter.js

@@ -0,0 +1,28 @@
+class FlowMockPresenter {
+    state;
+    dispatch;
+    api;
+    constructor(state, dispatch, api){
+        this.state = state;
+        this.api = api;
+        this.dispatch = dispatch;
+    }
+    syncState(state) {
+        this.state = state;
+        console.log('syncState', state);
+    }
+    initState() {
+        this.api.mock().then((mock)=>{
+            if (mock) {
+                console.log('mock initState', mock);
+                this.dispatch(mock);
+            }
+        });
+    }
+    cleanMock() {
+        this.api.clear(this.state).then(()=>{
+            this.dispatch('');
+        });
+    }
+}
+export { FlowMockPresenter };

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

@@ -0,0 +1,4 @@
+export interface FlowMockApi {
+    mock(): Promise<string>;
+    clear(mockKey: string): Promise<void>;
+}

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

@@ -0,0 +1,6 @@
+import React from "react";
+interface FlowTitleProps {
+    title: string;
+}
+export declare const FlowTitle: React.FC<FlowTitleProps>;
+export {};

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

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const FlowTitle = (props)=>/*#__PURE__*/ jsx("div", {
+        dangerouslySetInnerHTML: {
+            __html: props.title
+        }
+    });
+export { FlowTitle };

package/dist/components/workflow-select-modal/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface WorkflowSelectModalProps {
+    open: boolean;
+    onClose: () => void;
+    onSelect?: (code: string) => void;
+}
+export declare const WorkflowSelectModal: React.FC<WorkflowSelectModalProps>;
+export {};

package/dist/components/workflow-select-modal/index.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import react from "react";
+import { options } from "../../api/workflow.js";
+import { Button, Modal, Space } from "antd";
+const WorkflowSelectModal = (props)=>{
+    const [option, setOption] = react.useState([]);
+    react.useEffect(()=>{
+        options().then((res)=>{
+            if (res.success) setOption(res.data.list);
+        });
+    }, []);
+    return /*#__PURE__*/ jsx(Modal, {
+        open: props.open,
+        onCancel: props.onClose,
+        title: "请选择发起流程",
+        width: "45%",
+        footer: false,
+        children: /*#__PURE__*/ jsx(Space, {
+            style: {
+                marginTop: "10px"
+            },
+            children: option.map((item, index)=>/*#__PURE__*/ jsx(Button, {
+                    type: 'primary',
+                    onClick: ()=>{
+                        props.onSelect?.(item.value);
+                    },
+                    children: item.label
+                }, index))
+        })
+    });
+};
+export { WorkflowSelectModal };

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components/flow-approval';
+export * from './components/flow-title';
+export * from './components/workflow-select-modal';
+export * from './components/flow-mock';

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from "./components/flow-approval/index.js";
+export * from "./components/flow-title/index.js";
+export * from "./components/workflow-select-modal/index.js";
+export * from "./components/flow-mock/index.js";

package/dist/plugins/view/add-audit-view.d.ts

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

package/dist/plugins/view/add-audit-view.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { AddAuditViewPluginKey, useApprovalContext } from "@coding-flow/flow-approval-presenter";
+import { ViewBindPlugin } from "@coding-flow/flow-core";
+import { Select } from "antd";
+const AddAuditView = (props)=>{
+    const AddAuditViewComponent = ViewBindPlugin.getInstance().get(AddAuditViewPluginKey);
+    const { state } = useApprovalContext();
+    const createOperator = state.flow?.createOperator;
+    const options = createOperator ? [
+        {
+            label: createOperator.name,
+            value: createOperator.id
+        }
+    ] : [];
+    if (AddAuditViewComponent) return /*#__PURE__*/ jsx(AddAuditViewComponent, {
+        ...props
+    });
+    const handleChange = (value)=>{
+        props.onChange?.(value);
+    };
+    return /*#__PURE__*/ jsx(Select, {
+        placeholder: "请选择加签人员",
+        mode: "multiple",
+        value: props.value,
+        onChange: (value, option)=>{
+            handleChange(value);
+        },
+        options: options
+    });
+};
+export { AddAuditView };

package/dist/plugins/view/delegate-view.d.ts

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

package/dist/plugins/view/delegate-view.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { DelegateViewPluginKey, useApprovalContext } from "@coding-flow/flow-approval-presenter";
+import { ViewBindPlugin } from "@coding-flow/flow-core";
+import { Select } from "antd";
+const DelegateView = (props)=>{
+    const DelegateViewComponent = ViewBindPlugin.getInstance().get(DelegateViewPluginKey);
+    const { state } = useApprovalContext();
+    const createOperator = state.flow?.createOperator;
+    const options = createOperator ? [
+        {
+            label: createOperator.name,
+            value: createOperator.id
+        }
+    ] : [];
+    if (DelegateViewComponent) return /*#__PURE__*/ jsx(DelegateViewComponent, {
+        ...props
+    });
+    const handleChange = (value)=>{
+        props.onChange?.(value);
+    };
+    return /*#__PURE__*/ jsx(Select, {
+        placeholder: "请选择委托人员",
+        mode: "multiple",
+        value: props.value,
+        onChange: (value, option)=>{
+            handleChange(value);
+        },
+        options: options
+    });
+};
+export { DelegateView };

package/dist/plugins/view/return-view.d.ts

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

package/dist/plugins/view/return-view.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import react from "react";
+import { ReturnViewPluginKey, useApprovalContext } from "@coding-flow/flow-approval-presenter";
+import { ViewBindPlugin } from "@coding-flow/flow-core";
+import { Select } from "antd";
+const ReturnView = (props)=>{
+    const ReturnViewComponent = ViewBindPlugin.getInstance().get(ReturnViewPluginKey);
+    const { state } = useApprovalContext();
+    const nodeOptions = react.useMemo(()=>{
+        const nodes = state.flow?.nodes || [];
+        const currentId = state.flow?.nodeId || '';
+        const options = [];
+        for (const node of nodes){
+            if (currentId === node.id) break;
+            if (node.display) options.push({
+                label: node.name,
+                value: node.id
+            });
+        }
+        return options;
+    }, [
+        state.flow?.nodes
+    ]);
+    if (ReturnViewComponent) return /*#__PURE__*/ jsx(ReturnViewComponent, {
+        ...props
+    });
+    const handleChange = (value)=>{
+        props.onChange?.(value);
+    };
+    return /*#__PURE__*/ jsx(Select, {
+        placeholder: "请选择退回节点",
+        value: props.value,
+        onChange: (value, option)=>{
+            handleChange(value);
+        },
+        options: nodeOptions
+    });
+};
+export { ReturnView };

package/dist/plugins/view/sign-key-view.d.ts

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

package/dist/plugins/view/sign-key-view.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { SignKeyViewPluginKey } from "@coding-flow/flow-approval-presenter";
+import { ViewBindPlugin } from "@coding-flow/flow-core";
+import { Input } from "antd";
+const { TextArea } = Input;
+const SignKeyView = (props)=>{
+    const SignKeyViewComponent = ViewBindPlugin.getInstance().get(SignKeyViewPluginKey);
+    if (SignKeyViewComponent) return /*#__PURE__*/ jsx(SignKeyViewComponent, {
+        ...props
+    });
+    return /*#__PURE__*/ jsx(TextArea, {
+        value: props.value,
+        placeholder: "请输入审批签名",
+        onChange: (event)=>{
+            const value = event.target.value;
+            props.onChange?.(value);
+        }
+    });
+};
+export { SignKeyView };

package/dist/plugins/view/transfer-view.d.ts

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

package/dist/plugins/view/transfer-view.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { TransferViewPluginKey, useApprovalContext } from "@coding-flow/flow-approval-presenter";
+import { ViewBindPlugin } from "@coding-flow/flow-core";
+import { Select } from "antd";
+const TransferView = (props)=>{
+    const TransferViewComponent = ViewBindPlugin.getInstance().get(TransferViewPluginKey);
+    const { state } = useApprovalContext();
+    const createOperator = state.flow?.createOperator;
+    const options = createOperator ? [
+        {
+            label: createOperator.name,
+            value: createOperator.id
+        }
+    ] : [];
+    if (TransferViewComponent) return /*#__PURE__*/ jsx(TransferViewComponent, {
+        ...props
+    });
+    const handleChange = (value)=>{
+        props.onChange?.(value);
+    };
+    return /*#__PURE__*/ jsx(Select, {
+        placeholder: "请选择转办人员",
+        mode: "multiple",
+        value: props.value,
+        onChange: (value, option)=>{
+            handleChange(value);
+        },
+        options: options
+    });
+};
+export { TransferView };

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@coding-flow/flow-pc-approval",
+  "version": "0.0.1",
+  "description": "flow-engine pc form approval components",
+  "type": "module",
+  "keywords": [
+    "coding-flow",
+    "flow-engine"
+  ],
+  "homepage": "https://github.com/codingapi/flow-frontend",
+  "bugs": {
+    "url": "https://github.com/codingapi/flow-frontend/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/codingapi/flow-frontend.git"
+  },
+  "license": "Apache-2.0",
+  "author": "1024lorne@gmail.com",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@ant-design/icons": "~6.1.0",
+    "@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-core": "0.0.1",
+    "@coding-flow/flow-types": "0.0.1",
+    "@coding-flow/flow-icons": "0.0.1",
+    "@coding-flow/flow-approval-presenter": "0.0.1",
+    "@coding-flow/flow-pc-ui": "0.0.1",
+    "@coding-flow/flow-pc-form": "0.0.1"
+  },
+  "devDependencies": {
+    "@coding-flow/flow-types": "0.0.1"
+  },
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch",
+    "test": "rstest",
+    "push": "pnpm run build && pnpm publish --access public"
+  }
+}