@coding-flow/flow-design 0.0.1

package/dist/components/design-panel/layout/header.js

@@ -0,0 +1,158 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { Button, Form, Input, Popover, Space, Tabs, message } from "antd";
+import { LayoutHeaderHeight } from "../types.js";
+import { useDesignContext } from "../hooks/use-design-context.js";
+import { CloseOutlined, DownloadOutlined, SaveOutlined } from "@ant-design/icons";
+import { EventBus } from "@coding-flow/flow-core";
+import { exportWorkflow } from "../../../api/workflow.js";
+const Left = ()=>/*#__PURE__*/ jsx("div", {
+        style: {
+            width: 150
+        },
+        children: "流程设计面板"
+    });
+const SaveAsButton = ()=>{
+    const [visible, setVisible] = react.useState(false);
+    const [form] = Form.useForm();
+    const { context } = useDesignContext();
+    react.useEffect(()=>{
+        if (!visible) form.resetFields();
+    }, [
+        visible
+    ]);
+    return /*#__PURE__*/ jsx(Popover, {
+        placement: "bottom",
+        trigger: "click",
+        open: visible,
+        content: ()=>/*#__PURE__*/ jsxs("div", {
+                children: [
+                    /*#__PURE__*/ jsx(Form, {
+                        layout: "vertical",
+                        form: form,
+                        onFinish: (values)=>{
+                            context.save(values.name).then(()=>{
+                                setVisible(false);
+                                message.success('版本已保存');
+                                EventBus.getInstance().emit('VersionChangeEvent');
+                            });
+                        },
+                        children: /*#__PURE__*/ jsx(Form.Item, {
+                            name: "name",
+                            label: "版本名称",
+                            required: true,
+                            rules: [
+                                {
+                                    required: true,
+                                    message: '请输入版本名称'
+                                }
+                            ],
+                            children: /*#__PURE__*/ jsx(Input, {
+                                placeholder: "请输入版本名称"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(Space, {
+                        style: {
+                            marginTop: 8
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                onClick: ()=>{
+                                    form.submit();
+                                },
+                                type: "primary",
+                                children: "确定"
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                onClick: ()=>{
+                                    setVisible(false);
+                                },
+                                children: "取消"
+                            })
+                        ]
+                    })
+                ]
+            }),
+        children: /*#__PURE__*/ jsx(Button, {
+            icon: /*#__PURE__*/ jsx(SaveOutlined, {}),
+            onClick: ()=>{
+                setVisible(true);
+            },
+            children: "版本另存"
+        })
+    });
+};
+const Right = ()=>{
+    const { state, context } = useDesignContext();
+    return /*#__PURE__*/ jsxs(Space, {
+        style: {
+            marginRight: 20
+        },
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                icon: /*#__PURE__*/ jsx(SaveOutlined, {}),
+                type: "primary",
+                onClick: ()=>{
+                    context.save().then(()=>{
+                        message.success("流程已经保存.");
+                    });
+                },
+                children: "保存"
+            }),
+            /*#__PURE__*/ jsx(SaveAsButton, {}),
+            /*#__PURE__*/ jsx(Button, {
+                icon: /*#__PURE__*/ jsx(DownloadOutlined, {}),
+                onClick: ()=>{
+                    exportWorkflow(state.workflow.id);
+                },
+                children: "导出"
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                icon: /*#__PURE__*/ jsx(CloseOutlined, {}),
+                onClick: ()=>{
+                    context.close();
+                },
+                children: "关闭"
+            })
+        ]
+    });
+};
+const Header = ()=>{
+    const { state, context } = useDesignContext();
+    return /*#__PURE__*/ jsx(Tabs, {
+        style: {
+            width: "100%",
+            height: LayoutHeaderHeight
+        },
+        destroyOnHidden: true,
+        centered: true,
+        items: [
+            {
+                key: 'base',
+                label: '基本信息'
+            },
+            {
+                key: 'form',
+                label: '表单设计'
+            },
+            {
+                key: 'flow',
+                label: '流程设计'
+            },
+            {
+                key: 'setting',
+                label: '更多参数'
+            }
+        ],
+        defaultActiveKey: state.view.tabPanel,
+        onChange: (key)=>{
+            context.getPresenter().updateViewPanelTab(key);
+        },
+        tabBarExtraContent: {
+            left: /*#__PURE__*/ jsx(Left, {}),
+            right: /*#__PURE__*/ jsx(Right, {})
+        }
+    });
+};
+export { Header };

package/dist/components/design-panel/layout/index.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { DesignPanelProps } from "../types";
+export declare const DesignPanelLayout: React.FC<DesignPanelProps>;

package/dist/components/design-panel/layout/index.js

@@ -0,0 +1,29 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Provider } from "react-redux";
+import { DesignPanelContext } from "../context/index.js";
+import { createDesignContext } from "../hooks/use-design-context.js";
+import { designStore } from "../store.js";
+import { Header } from "./header.js";
+import { Footer } from "./footer.js";
+import { Body } from "./body.js";
+const DesignPanelLayoutScope = (props)=>{
+    const { context } = createDesignContext(props);
+    return /*#__PURE__*/ jsxs(DesignPanelContext.Provider, {
+        value: context,
+        children: [
+            /*#__PURE__*/ jsx(Header, {}),
+            /*#__PURE__*/ jsx(Body, {}),
+            /*#__PURE__*/ jsx(Footer, {})
+        ]
+    });
+};
+const DesignPanelLayout = (props)=>/*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx(Provider, {
+            store: designStore,
+            children: /*#__PURE__*/ jsx(DesignPanelLayoutScope, {
+                ...props
+            })
+        })
+    });
+export { DesignPanelLayout };

package/dist/components/design-panel/manager/form.d.ts

@@ -0,0 +1,27 @@
+import { FlowForm, FormField } from "@coding-flow/flow-types";
+export declare class WorkflowFormManager {
+    private readonly form;
+    private readonly formList;
+    constructor(form: FlowForm);
+    private loadFormList;
+    getFormFields(code: string): FormField[];
+    removeSubForm(code: string): {
+        subForms: FlowForm[];
+        name: string;
+        code: string;
+        fields: FormField[];
+    };
+    addSubForm(values: any): {
+        subForms: FlowForm[];
+        name: string;
+        code: string;
+        fields: FormField[];
+    };
+    updateFieldValue(code: string, values: any): FlowForm;
+    removeField(formCode: string, fieldCode: string): {
+        fields: FormField[];
+        name: string;
+        code: string;
+        subForms: FlowForm[];
+    };
+}

package/dist/components/design-panel/manager/form.js

@@ -0,0 +1,89 @@
+class WorkflowFormManager {
+    form;
+    formList;
+    constructor(form){
+        this.form = form;
+        this.formList = [];
+        this.loadFormList();
+    }
+    loadFormList() {
+        this.formList.push(this.form);
+        if (this.form.subForms && this.form.subForms.length > 0) for (const subForm of this.form.subForms)this.formList.push(subForm);
+    }
+    getFormFields(code) {
+        let result = [];
+        for (const subForm of this.formList)if (subForm.code == code) result = subForm.fields || [];
+        return result;
+    }
+    removeSubForm(code) {
+        const currentSubForms = this.form.subForms || [];
+        const subForms = currentSubForms.filter((subForm)=>subForm.code !== code);
+        return {
+            ...this.form,
+            subForms: subForms
+        };
+    }
+    addSubForm(values) {
+        const subForms = [
+            ...this.form.subForms || []
+        ];
+        subForms.push(values);
+        return {
+            ...this.form,
+            subForms: subForms
+        };
+    }
+    updateFieldValue(code, values) {
+        const currentFields = this.getFormFields(code);
+        const currentFieldId = values['id'];
+        const list = [];
+        let exist = false;
+        for (const field of currentFields)if (field.id === currentFieldId) {
+            list.push(values);
+            exist = true;
+        } else list.push(field);
+        if (!exist) list.push({
+            ...values,
+            id: crypto.randomUUID()
+        });
+        const mainCode = this.form.code;
+        if (code === mainCode) return {
+            ...this.form,
+            fields: list
+        };
+        return {
+            ...this.form,
+            subForms: this.form.subForms.map((item)=>{
+                if (item.code === code) return {
+                    ...item,
+                    fields: list
+                };
+                return item;
+            })
+        };
+    }
+    removeField(formCode, fieldCode) {
+        const currentFields = this.getFormFields(formCode) || [];
+        const fields = [
+            ...currentFields
+        ];
+        const list = fields.filter((file)=>file.code !== fieldCode);
+        const mainCode = this.form.code;
+        if (formCode == mainCode) return {
+            ...this.form,
+            fields: list
+        };
+        return {
+            ...this.form,
+            fields: list,
+            subForms: this.form.subForms.map((item)=>{
+                if (item.code === formCode) return {
+                    ...item,
+                    fields: list
+                };
+                return item;
+            })
+        };
+    }
+}
+export { WorkflowFormManager };

package/dist/components/design-panel/manager/node.d.ts

@@ -0,0 +1,71 @@
+import { FlowNode } from "../types";
+/**
+ *  节点数据转换服务
+ */
+export declare class NodeConvertorManager {
+    static readonly STRATEGY_SUFFIX = "Strategy";
+    static readonly STRATEGY_KEY = "strategyType";
+    toRender(nodes: FlowNode[]): any[];
+    toItemRender(node: FlowNode): any;
+    toData(nodes: any[]): any[];
+    toDataItem(node: any): any;
+    private toStrategyRender;
+    private toStrategyData;
+}
+interface MappingData {
+    node: string;
+    [key: string]: any;
+}
+export declare class NodeManger {
+    private readonly nodes;
+    private readonly nodeList;
+    constructor(nodes: FlowNode[]);
+    private fetchNodes;
+    /**
+     * 获取可以退回的节点
+     * @param nodeId
+     */
+    getBackNodes(nodeId: string): FlowNode[];
+    getSize(): number;
+    getNodeByType(type: string): FlowNode | null;
+    /**
+     * 获取节点
+     * @param id 节点id
+     */
+    getNode(id: string): FlowNode | null;
+}
+/**
+ *  节点关系分析管理，分析所有的节点，可回退的节点等信息
+ */
+export declare class NodeRouterManager {
+    private readonly nodes;
+    private readonly nodeList;
+    private readonly displayNodeTypes;
+    constructor(nodes: FlowNode[]);
+    private initDisplayNodeTypes;
+    private initNodeList;
+    private isDisplayNode;
+    private fetchNodes;
+    size(): number;
+    /**
+     * 查看全部的可选节点
+     */
+    getNodes(): {
+        label: string;
+        value: string;
+    }[];
+    /**
+     *  获取可退回的节点
+     *  @param nodeId
+     */
+    getBackNodes(nodeId: string): {
+        label: string;
+        value: string;
+    }[];
+    /**
+     * 处理默认数据
+     * @param data
+     */
+    mapping(data: MappingData): MappingData;
+}
+export {};

package/dist/components/design-panel/manager/node.js

@@ -0,0 +1,174 @@
+class NodeConvertorManager {
+    static STRATEGY_SUFFIX = 'Strategy';
+    static STRATEGY_KEY = 'strategyType';
+    toRender(nodes) {
+        return nodes.map((node)=>this.toItemRender(node));
+    }
+    toItemRender(node) {
+        const blocks = node?.blocks || [];
+        return {
+            id: node.id,
+            type: node.type,
+            data: {
+                title: node.name,
+                order: node.order,
+                actions: node.actions,
+                script: node.script,
+                view: node.view,
+                display: node.display,
+                ...this.toStrategyRender(node)
+            },
+            blocks: blocks.map((item)=>this.toItemRender(item))
+        };
+    }
+    toData(nodes) {
+        return nodes.map((node)=>this.toDataItem(node));
+    }
+    toDataItem(node) {
+        const data = node.data;
+        const blocks = node?.blocks || [];
+        return {
+            id: node.id,
+            type: node.type,
+            name: data?.title,
+            order: data?.order ? data?.order + '' : '0',
+            view: data?.view,
+            actions: data?.actions || [],
+            strategies: this.toStrategyData(data),
+            script: data?.script,
+            display: data?.display,
+            blocks: blocks.map((item)=>this.toDataItem(item))
+        };
+    }
+    toStrategyRender(node) {
+        const strategies = node.strategies || [];
+        const strategyMap = {};
+        for(let i = 0; i < strategies.length; i++){
+            const strategy = strategies[i];
+            const key = strategy[NodeConvertorManager.STRATEGY_KEY];
+            strategyMap[key] = {
+                ...strategy
+            };
+        }
+        return strategyMap;
+    }
+    toStrategyData(node) {
+        const keys = Object.keys(node);
+        const strategies = [];
+        for (const key of keys)if (key.endsWith(NodeConvertorManager.STRATEGY_SUFFIX)) {
+            const strategy = node[key];
+            strategies.push({
+                [NodeConvertorManager.STRATEGY_KEY]: key,
+                ...strategy
+            });
+        }
+        return strategies;
+    }
+}
+class NodeManger {
+    nodes;
+    nodeList;
+    constructor(nodes){
+        this.nodes = nodes;
+        this.nodeList = [];
+        this.fetchNodes(this.nodes);
+    }
+    fetchNodes(nodes) {
+        for (const node of nodes){
+            this.nodeList.push(node);
+            const blocks = node.blocks || [];
+            if (node.blocks && node.blocks.length > 0) this.fetchNodes(blocks);
+        }
+    }
+    getBackNodes(nodeId) {
+        const list = [];
+        for (const node of this.nodeList){
+            if (node.id === nodeId) break;
+            if (node.display) list.push(node);
+        }
+        return list;
+    }
+    getSize() {
+        return this.nodes.length;
+    }
+    getNodeByType(type) {
+        for (const node of this.nodeList)if (node.type === type) return node;
+        return null;
+    }
+    getNode(id) {
+        for (const node of this.nodeList)if (node.id === id) return node;
+        return null;
+    }
+}
+class NodeRouterManager {
+    nodes;
+    nodeList;
+    displayNodeTypes;
+    constructor(nodes){
+        this.nodes = nodes;
+        this.displayNodeTypes = [];
+        this.nodeList = [];
+        this.initDisplayNodeTypes();
+        this.initNodeList();
+    }
+    initDisplayNodeTypes() {
+        this.displayNodeTypes.push('APPROVAL');
+        this.displayNodeTypes.push('DELAY');
+        this.displayNodeTypes.push('END');
+        this.displayNodeTypes.push('HANDLE');
+        this.displayNodeTypes.push('NOTIFY');
+        this.displayNodeTypes.push('ROUTER');
+        this.displayNodeTypes.push('START');
+        this.displayNodeTypes.push('SUB_PROCESS');
+        this.displayNodeTypes.push('TRIGGER');
+    }
+    initNodeList() {
+        this.fetchNodes(this.nodes);
+    }
+    isDisplayNode(node) {
+        const nodeType = node.type;
+        return this.displayNodeTypes.includes(nodeType);
+    }
+    fetchNodes(nodes) {
+        for (const node of nodes){
+            if (this.isDisplayNode(node)) this.nodeList.push(node);
+            const blocks = node.blocks || [];
+            if (node.blocks && node.blocks.length > 0) this.fetchNodes(blocks);
+        }
+    }
+    size() {
+        return this.nodes.length;
+    }
+    getNodes() {
+        return this.nodeList.map((node)=>({
+                label: node.name,
+                value: node.id
+            }));
+    }
+    getBackNodes(nodeId) {
+        const list = [];
+        let matchCurrent = false;
+        for (const node of this.nodeList){
+            if (!matchCurrent) list.push(node);
+            if (node.id === nodeId) matchCurrent = true;
+        }
+        return list.map((node)=>({
+                label: node.name,
+                value: node.id
+            }));
+    }
+    mapping(data) {
+        const nodeId = data.node;
+        let matchNode = null;
+        for (const node of this.nodeList){
+            if (matchNode) break;
+            if (node.type === nodeId) matchNode = node;
+        }
+        if (matchNode) return {
+            ...data,
+            node: matchNode.id
+        };
+        return data;
+    }
+}
+export { NodeConvertorManager, NodeManger, NodeRouterManager };

package/dist/components/design-panel/manager/strategy.d.ts

@@ -0,0 +1,8 @@
+export declare class WorkflowStrategyManager {
+    static TYPE_KEY: string;
+    constructor();
+    toRender(strategies: any[]): any;
+    toData(values: any): {
+        strategies: any[];
+    } | null;
+}

package/dist/components/design-panel/manager/strategy.js

@@ -0,0 +1,34 @@
+import { ObjectUtils } from "@coding-flow/flow-core";
+class WorkflowStrategyManager {
+    static TYPE_KEY = 'strategyType';
+    toRender(strategies) {
+        let value = {};
+        for(const key in strategies){
+            const currentValue = strategies[key];
+            value = Object.assign(value, {
+                [currentValue[WorkflowStrategyManager.TYPE_KEY]]: {
+                    ...currentValue
+                }
+            });
+        }
+        value = {
+            strategies: value
+        };
+        return value;
+    }
+    toData(values) {
+        if (ObjectUtils.isEmptyObject(values)) return null;
+        const strategies = [];
+        for(const key in values.strategies){
+            const item = values.strategies[key];
+            strategies.push({
+                [WorkflowStrategyManager.TYPE_KEY]: key,
+                ...item
+            });
+        }
+        return {
+            strategies: strategies
+        };
+    }
+}
+export { WorkflowStrategyManager };

package/dist/components/design-panel/model.d.ts

@@ -0,0 +1,7 @@
+import { DesignPanelApi, FlowNode, Workflow } from "./types";
+export declare class DesignPanelApiImpl implements DesignPanelApi {
+    create(): Promise<Workflow>;
+    load(id: string): Promise<Workflow>;
+    save(body: any): Promise<void>;
+    createNode(type: string): Promise<FlowNode>;
+}

package/dist/components/design-panel/model.js

@@ -0,0 +1,19 @@
+import { create, createNode, load, save } from "../../api/workflow.js";
+class DesignPanelApiImpl {
+    async create() {
+        const result = await create();
+        return result.data;
+    }
+    async load(id) {
+        const result = await load(id);
+        return result.data;
+    }
+    async save(body) {
+        await save(body);
+    }
+    async createNode(type) {
+        const data = await createNode(type);
+        return data.data;
+    }
+}
+export { DesignPanelApiImpl };

package/dist/components/design-panel/panels/workflow/interfere.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FormInstance } from "antd";
+interface InterferePanelProps {
+    form: FormInstance;
+}
+export declare const InterferePanel: React.FC<InterferePanelProps>;
+export {};

package/dist/components/design-panel/panels/workflow/interfere.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Switch } from "antd";
+import { CardForm } from "@coding-flow/flow-pc-ui";
+const InterferePanel = (props)=>/*#__PURE__*/ jsx(CardForm, {
+        form: props.form,
+        title: "干预配置",
+        children: /*#__PURE__*/ jsx(CardForm.Item, {
+            name: [
+                "strategies",
+                "InterfereStrategy",
+                "enable"
+            ],
+            label: "开启",
+            tooltip: "开启干预时可允许流程管理员协助用户操作流程。",
+            children: /*#__PURE__*/ jsx(Switch, {})
+        })
+    });
+export { InterferePanel };

package/dist/components/design-panel/panels/workflow/urge.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FormInstance } from "antd";
+interface UrgePanelProps {
+    form: FormInstance;
+}
+export declare const UrgePanel: React.FC<UrgePanelProps>;
+export {};