@coding-flow/flow-design 0.0.1

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

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Input, Switch } from "antd";
+import { CardForm } from "@coding-flow/flow-pc-ui";
+const UrgePanel = (props)=>/*#__PURE__*/ jsxs(CardForm, {
+        form: props.form,
+        title: "催办策略",
+        children: [
+            /*#__PURE__*/ jsx(CardForm.Item, {
+                name: [
+                    "strategies",
+                    "UrgeStrategy",
+                    "enable"
+                ],
+                label: "开启",
+                tooltip: "开启催办允许用户点击催办当前审批人",
+                children: /*#__PURE__*/ jsx(Switch, {})
+            }),
+            /*#__PURE__*/ jsx(CardForm.Item, {
+                name: [
+                    "strategies",
+                    "UrgeStrategy",
+                    "interval"
+                ],
+                label: "催办间隔时间",
+                tooltip: "每次点击催办的间隔时间，该参数尽在启用时才生效",
+                children: /*#__PURE__*/ jsx(Input, {
+                    addonAfter: "单位:秒"
+                })
+            })
+        ]
+    });
+export { UrgePanel };

package/dist/components/design-panel/presenters/convertor/index.d.ts

@@ -0,0 +1,7 @@
+import { Workflow } from "../../types";
+export declare class WorkflowConvertor {
+    private readonly workflow;
+    constructor(workflow: Workflow);
+    toApi(): Workflow;
+    toRender(): Workflow;
+}

package/dist/components/design-panel/presenters/convertor/index.js

@@ -0,0 +1,13 @@
+class WorkflowConvertor {
+    workflow;
+    constructor(workflow){
+        this.workflow = workflow;
+    }
+    toApi() {
+        return this.workflow;
+    }
+    toRender() {
+        return this.workflow;
+    }
+}
+export { WorkflowConvertor };

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

@@ -0,0 +1,32 @@
+import { DesignPanelApi, State, TabPanelType } from "../types";
+import { Dispatch } from "@coding-flow/flow-core";
+import { FormActionContext } from "@coding-flow/flow-types";
+import { NodeManger } from "../manager/node";
+export declare class Presenter {
+    private state;
+    private readonly dispatch;
+    private readonly api;
+    private readonly formActionContext;
+    constructor(state: State, dispatch: Dispatch<State>, api: DesignPanelApi);
+    getFormActionContext(): FormActionContext;
+    /**
+     * 手动同步节点数据
+     * @param nodes
+     */
+    syncNodes(nodes: any[]): void;
+    syncState(state: State): void;
+    private mergeWorkflow;
+    updateViewPanelTab(tab: TabPanelType): void;
+    private updateWorkflowForm;
+    updateWorkflow(data: any): void;
+    removeWorkflowFormField(formCode: string, fieldCode: string): void;
+    removeWorkflowSubForm(code: string): void;
+    addWorkflowSubForm(values: any): void;
+    updateWorkflowFormField(code: string, values: any): void;
+    save(versionName?: string): Promise<void>;
+    getNodeManager(): NodeManger;
+    createNode(form: string, type: string): Promise<any>;
+    initState(): void;
+    loadDesign(id: string): void;
+    createDesign(): void;
+}

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

@@ -0,0 +1,153 @@
+import { initStateData } from "../types.js";
+import { FormActionContext } from "@coding-flow/flow-types";
+import { WorkflowFormManager } from "../manager/form.js";
+import { NodeConvertorManager, NodeManger } from "../manager/node.js";
+import { WorkflowConvertor } from "./convertor/index.js";
+class Presenter {
+    state;
+    dispatch;
+    api;
+    formActionContext;
+    constructor(state, dispatch, api){
+        this.api = api;
+        this.dispatch = dispatch;
+        this.state = state;
+        this.formActionContext = new FormActionContext();
+    }
+    getFormActionContext() {
+        return this.formActionContext;
+    }
+    syncNodes(nodes) {
+        const nodeConvertorManager = new NodeConvertorManager();
+        const data = nodeConvertorManager.toData(nodes);
+        this.state = {
+            ...this.state,
+            workflow: {
+                ...this.state.workflow,
+                nodes: data
+            }
+        };
+    }
+    syncState(state) {
+        this.state = state;
+    }
+    mergeWorkflow(prevWorkflow, currentWorkflow) {
+        const nodes = [];
+        if (currentWorkflow.nodes && currentWorkflow.nodes.length > 0) nodes.push(...currentWorkflow.nodes);
+        else if (prevWorkflow.nodes && prevWorkflow.nodes.length > 0) nodes.push(...prevWorkflow.nodes);
+        return {
+            ...prevWorkflow,
+            ...currentWorkflow,
+            form: {
+                ...prevWorkflow.form,
+                ...currentWorkflow.form
+            },
+            nodes: nodes
+        };
+    }
+    updateViewPanelTab(tab) {
+        const values = this.formActionContext.save();
+        this.dispatch((prevState)=>({
+                ...prevState,
+                view: {
+                    ...prevState.view,
+                    tabPanel: tab
+                },
+                workflow: this.mergeWorkflow(prevState.workflow, values)
+            }));
+    }
+    updateWorkflowForm(form) {
+        this.dispatch((prevState)=>({
+                ...prevState,
+                workflow: {
+                    ...prevState.workflow,
+                    form: {
+                        ...prevState.workflow.form,
+                        ...form
+                    }
+                }
+            }));
+    }
+    updateWorkflow(data) {
+        this.dispatch((prevState)=>({
+                ...prevState,
+                workflow: this.mergeWorkflow(prevState.workflow, data)
+            }));
+    }
+    removeWorkflowFormField(formCode, fieldCode) {
+        const workflowFormManager = new WorkflowFormManager(this.state.workflow.form);
+        const form = workflowFormManager.removeField(formCode, fieldCode);
+        this.updateWorkflowForm(form);
+    }
+    removeWorkflowSubForm(code) {
+        const workflowFormManager = new WorkflowFormManager(this.state.workflow.form);
+        const form = workflowFormManager.removeSubForm(code);
+        this.updateWorkflowForm(form);
+    }
+    addWorkflowSubForm(values) {
+        const workflowFormManager = new WorkflowFormManager(this.state.workflow.form);
+        const form = workflowFormManager.addSubForm(values);
+        this.updateWorkflowForm(form);
+    }
+    updateWorkflowFormField(code, values) {
+        const workflowFormManager = new WorkflowFormManager(this.state.workflow.form);
+        const form = workflowFormManager.updateFieldValue(code, values);
+        this.updateWorkflowForm(form);
+    }
+    async save(versionName) {
+        const values = this.formActionContext.save();
+        this.updateWorkflow(values);
+        const latest = {
+            ...this.state,
+            workflow: this.mergeWorkflow(this.state.workflow, values)
+        };
+        const convertor = new WorkflowConvertor(latest.workflow);
+        const apiData = convertor.toApi();
+        await this.api.save({
+            ...apiData,
+            versionName
+        });
+        console.log('save latest:', apiData);
+    }
+    getNodeManager() {
+        return new NodeManger(this.state.workflow.nodes || []);
+    }
+    async createNode(form, type) {
+        const flowNode = await this.api.createNode(type);
+        const nodeManager = new NodeConvertorManager();
+        const nodeManger = new NodeManger(this.state.workflow.nodes || []);
+        const currentNode = nodeManger.getNode(form);
+        const block = nodeManager.toItemRender(flowNode);
+        if (currentNode) {
+            if (currentNode.blocks) {
+                const order = currentNode.blocks.length + 1;
+                return {
+                    ...block,
+                    data: {
+                        ...block.data,
+                        order: order
+                    }
+                };
+            }
+        }
+        return block;
+    }
+    initState() {
+        this.dispatch(initStateData);
+    }
+    loadDesign(id) {
+        this.api.load(id).then((result)=>{
+            const convertor = new WorkflowConvertor(result);
+            const renderData = convertor.toRender();
+            this.updateWorkflow(renderData);
+        });
+    }
+    createDesign() {
+        this.api.create().then((result)=>{
+            const convertor = new WorkflowConvertor(result);
+            const renderData = convertor.toRender();
+            this.updateWorkflow(renderData);
+        });
+    }
+}
+export { Presenter };

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

@@ -0,0 +1,15 @@
+import { PayloadAction } from '@reduxjs/toolkit';
+import { State } from "./types";
+export type DesignStoreAction = {
+    updateState: (state: State, action: PayloadAction<Partial<State> | ((prev: State) => Partial<State>)>) => void;
+};
+export declare const designSlice: import("@reduxjs/toolkit").Slice<State, DesignStoreAction, "design", "design", {}>;
+export declare const updateState: import("@reduxjs/toolkit").ActionCreatorWithPayload<Partial<State> | ((prev: State) => Partial<State>), "design/updateState">;
+export declare const designStore: import("@reduxjs/toolkit").EnhancedStore<{
+    design: State;
+}, import("redux").UnknownAction, import("@reduxjs/toolkit").Tuple<[import("redux").StoreEnhancer<{
+    dispatch: import("redux-thunk").ThunkDispatch<{
+        design: State;
+    }, undefined, import("redux").UnknownAction>;
+}>, import("redux").StoreEnhancer]>>;
+export type DesignReduxState = ReturnType<typeof designStore.getState>;

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

@@ -0,0 +1,24 @@
+import { configureStore, createSlice } from "@reduxjs/toolkit";
+import { initStateData } from "./types.js";
+import { original } from "immer";
+const designSlice = createSlice({
+    name: 'design',
+    initialState: {
+        ...initStateData
+    },
+    reducers: {
+        updateState: (state, action)=>{
+            if ('function' == typeof action.payload) {
+                const currentState = original(state);
+                Object.assign(state, action.payload(currentState));
+            } else Object.assign(state, action.payload);
+        }
+    }
+});
+const { updateState } = designSlice.actions;
+const designStore = configureStore({
+    reducer: {
+        design: designSlice.reducer
+    }
+});
+export { designSlice, designStore, updateState };

package/dist/components/design-panel/tabs/base/index.d.ts

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

package/dist/components/design-panel/tabs/base/index.js

@@ -0,0 +1,134 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { Input } from "antd";
+import { CardForm, Panel } from "@coding-flow/flow-pc-ui";
+import { useDesignContext } from "../../hooks/use-design-context.js";
+import { FlowCreateOperatorEditor } from "./operator.js";
+const TabBase = ()=>{
+    const [baseForm] = CardForm.useForm();
+    const [operatorForm] = CardForm.useForm();
+    const { state, context } = useDesignContext();
+    const formActionContext = context.getPresenter().getFormActionContext();
+    react.useEffect(()=>{
+        baseForm.resetFields();
+        baseForm.setFieldsValue(state.workflow);
+        operatorForm.resetFields();
+        operatorForm.setFieldsValue(state.workflow);
+    }, []);
+    react.useEffect(()=>{
+        formActionContext.addAction({
+            save: ()=>baseForm.getFieldsValue(),
+            key: ()=>'base',
+            validate: ()=>new Promise((resolve, reject)=>{
+                    baseForm.validateFields().then((values)=>{
+                        resolve(values);
+                    }).catch(reject);
+                })
+        });
+        formActionContext.addAction({
+            save: ()=>operatorForm.getFieldsValue(),
+            key: ()=>'operator',
+            validate: ()=>new Promise((resolve, reject)=>{
+                    operatorForm.validateFields().then((values)=>{
+                        resolve(values);
+                    }).catch(reject);
+                })
+        });
+        return ()=>{
+            formActionContext.removeAction('base');
+            formActionContext.removeAction('operator');
+        };
+    }, []);
+    react.useEffect(()=>{
+        baseForm.setFieldsValue(state.workflow);
+        operatorForm.setFieldsValue(state.workflow);
+    }, [
+        state.workflow
+    ]);
+    return /*#__PURE__*/ jsxs(Panel, {
+        children: [
+            /*#__PURE__*/ jsxs(CardForm, {
+                form: baseForm,
+                title: "基本信息",
+                children: [
+                    /*#__PURE__*/ jsx(CardForm.Item, {
+                        name: "title",
+                        label: "流程标题",
+                        rules: [
+                            {
+                                required: true,
+                                message: '请输入流程标题'
+                            }
+                        ],
+                        children: /*#__PURE__*/ jsx(Input, {
+                            placeholder: "请输入流程标题"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(CardForm.Item, {
+                        name: "code",
+                        label: "流程编码",
+                        rules: [
+                            {
+                                required: true,
+                                message: '请输入流程编码'
+                            }
+                        ],
+                        children: /*#__PURE__*/ jsx(Input, {
+                            placeholder: "请输入流程编码"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(CardForm.Item, {
+                        name: [
+                            "form",
+                            "name"
+                        ],
+                        label: "表单名称",
+                        tooltip: "表单名称是主表的名称",
+                        rules: [
+                            {
+                                required: true,
+                                message: '请输入表单名称'
+                            }
+                        ],
+                        children: /*#__PURE__*/ jsx(Input, {
+                            placeholder: "请输入表单名称"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(CardForm.Item, {
+                        name: [
+                            "form",
+                            "code"
+                        ],
+                        label: "表单编码",
+                        tooltip: "表单编码是主表的编码",
+                        rules: [
+                            {
+                                required: true,
+                                message: '请输入表单编码'
+                            }
+                        ],
+                        children: /*#__PURE__*/ jsx(Input, {
+                            placeholder: "请输入表单编码"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(CardForm, {
+                form: operatorForm,
+                title: "发起配置",
+                children: /*#__PURE__*/ jsx(CardForm.Item, {
+                    name: "operatorCreateScript",
+                    label: "发起人范围",
+                    rules: [
+                        {
+                            required: true,
+                            message: '请输入发起人范围'
+                        }
+                    ],
+                    children: /*#__PURE__*/ jsx(FlowCreateOperatorEditor, {})
+                })
+            })
+        ]
+    });
+};
+export { TabBase };

package/dist/components/design-panel/tabs/base/operator.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface FlowCreateOperatorEditorProps {
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export declare const FlowCreateOperatorEditor: React.FC<FlowCreateOperatorEditorProps>;
+export {};

package/dist/components/design-panel/tabs/base/operator.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { Button, Space } from "antd";
+import { GroovyScriptPreview } from "../../../../script-components/components/groovy-script-preview.js";
+import { EditOutlined } from "@ant-design/icons";
+import { OperatorCreateConfigModal } from "../../../../script-components/modal/operator-create-config-modal.js";
+const FlowCreateOperatorEditor = (props)=>{
+    const script = props.value || '';
+    const [visible, setVisible] = react.useState(false);
+    return /*#__PURE__*/ jsxs(Space.Compact, {
+        style: {
+            width: '100%'
+        },
+        children: [
+            /*#__PURE__*/ jsx(GroovyScriptPreview, {
+                script: script
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                icon: /*#__PURE__*/ jsx(EditOutlined, {}),
+                onClick: ()=>{
+                    setVisible(true);
+                },
+                style: {
+                    borderRadius: '0 6px 6px 0'
+                },
+                children: "编辑"
+            }),
+            /*#__PURE__*/ jsx(OperatorCreateConfigModal, {
+                open: visible,
+                script: script,
+                onCancel: ()=>{
+                    setVisible(false);
+                },
+                onConfirm: (script)=>{
+                    props.onChange?.(script);
+                }
+            })
+        ]
+    });
+};
+export { FlowCreateOperatorEditor };

package/dist/components/design-panel/tabs/flow.d.ts

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

package/dist/components/design-panel/tabs/flow.js

@@ -0,0 +1,57 @@
+import { jsx } from "react/jsx-runtime";
+import react from "react";
+import { FlowEditor } from "../../design-editor/index.js";
+import { useDesignContext } from "../hooks/use-design-context.js";
+import { NodeConvertorManager } from "../manager/node.js";
+const TabFlow = ()=>{
+    const { state, context } = useDesignContext();
+    const formActionContext = context.getPresenter().getFormActionContext();
+    const actionRef = react.useRef(null);
+    const nodeManager = new NodeConvertorManager();
+    react.useEffect(()=>{
+        formActionContext.addAction({
+            save: ()=>{
+                const data = actionRef.current?.getData();
+                return {
+                    nodes: nodeManager.toData(data?.nodes || [])
+                };
+            },
+            key: ()=>'flow',
+            validate: ()=>new Promise((resolve, reject)=>{
+                    const data = actionRef.current?.getData();
+                    const values = {
+                        nodes: nodeManager.toData(data?.nodes || [])
+                    };
+                    resolve(values);
+                })
+        });
+        if (state.workflow.nodes) {
+            const nodes = nodeManager.toRender(state.workflow.nodes || []);
+            actionRef.current?.resetData({
+                nodes
+            });
+        }
+        return ()=>{
+            formActionContext.removeAction('flow');
+        };
+    }, []);
+    react.useEffect(()=>{
+        const nodes = nodeManager.toRender(state.workflow.nodes || []);
+        actionRef.current?.resetData({
+            nodes
+        });
+    }, [
+        state.workflow.nodes
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            height: 'calc(100vh - 100px)',
+            width: '100%',
+            position: 'relative'
+        },
+        children: /*#__PURE__*/ jsx(FlowEditor, {
+            actionRef: actionRef
+        })
+    });
+};
+export { TabFlow };

package/dist/components/design-panel/tabs/form/attrubute.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface FieldAttributeFormAction {
+    addAttribute: (key: string) => void;
+}
+interface FieldAttributeFormProps {
+    value?: any;
+    onChange?: (value: any) => void;
+    actionRef?: React.Ref<FieldAttributeFormAction | undefined>;
+}
+export declare const FieldAttributeValue: React.FC<FieldAttributeFormProps>;
+export declare const FieldAttributeForm: () => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/design-panel/tabs/form/attrubute.js

@@ -0,0 +1,122 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CloseCircleOutlined, PlusCircleOutlined } from "@ant-design/icons";
+import { Button, Col, Form, Input, Space } from "antd";
+import react from "react";
+import { IdUtils } from "../../../../utils/index.js";
+const FieldAttributeItem = (props)=>{
+    const attribute = props.value;
+    const handleChangeLabel = (label)=>{
+        props.onChange({
+            ...attribute,
+            label: label
+        });
+    };
+    const handleChangeValue = (value)=>{
+        props.onChange({
+            ...attribute,
+            value: value
+        });
+    };
+    return /*#__PURE__*/ jsxs(Space, {
+        style: {
+            margin: 5
+        },
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                children: "名称:"
+            }),
+            /*#__PURE__*/ jsx(Input, {
+                placeholder: "请输入附加属性名称",
+                value: attribute.label,
+                onChange: (event)=>{
+                    handleChangeLabel(event.target.value);
+                }
+            }),
+            /*#__PURE__*/ jsx("span", {
+                children: "值:"
+            }),
+            /*#__PURE__*/ jsx(Input, {
+                placeholder: "请输入附加属性值",
+                value: attribute.value,
+                onChange: (event)=>{
+                    handleChangeValue(event.target.value);
+                }
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                type: "link",
+                danger: true,
+                icon: /*#__PURE__*/ jsx(CloseCircleOutlined, {}),
+                onClick: ()=>{
+                    props.onDelete(attribute.key);
+                },
+                children: "移除"
+            })
+        ]
+    });
+};
+const FieldAttributeValue = (props)=>{
+    const [attributes, setAttributes] = react.useState([]);
+    react.useEffect(()=>{
+        setAttributes(props.value || []);
+    }, []);
+    react.useImperativeHandle(props.actionRef, ()=>({
+            addAttribute: (key)=>{
+                setAttributes((prevState)=>[
+                        ...prevState,
+                        {
+                            key: key
+                        }
+                    ]);
+            }
+        }), [
+        attributes
+    ]);
+    const handleDelete = (key)=>{
+        setAttributes((prevState)=>prevState.filter((item)=>item.key !== key));
+    };
+    const handleChange = (attribute)=>{
+        setAttributes((prevState)=>prevState.map((item)=>{
+                if (item.key === attribute.key) return attribute;
+                return item;
+            }));
+    };
+    react.useEffect(()=>{
+        props.onChange?.(attributes.filter((item)=>item.label || item.value));
+    }, [
+        attributes
+    ]);
+    return /*#__PURE__*/ jsx(Col, {
+        span: 24,
+        children: attributes.map((attribute, index)=>/*#__PURE__*/ jsx(FieldAttributeItem, {
+                value: attribute,
+                onChange: handleChange,
+                onDelete: handleDelete
+            }, index))
+    });
+};
+const FieldAttributeForm = ()=>{
+    const actionRef = react.useRef();
+    return /*#__PURE__*/ jsx(Form.Item, {
+        name: "attributes",
+        help: "附加属性，主要用于一些复杂的表单控制界面",
+        label: /*#__PURE__*/ jsxs(Space, {
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    children: "附加属性"
+                }),
+                /*#__PURE__*/ jsx(Button, {
+                    type: "link",
+                    icon: /*#__PURE__*/ jsx(PlusCircleOutlined, {}),
+                    onClick: ()=>{
+                        actionRef.current?.addAttribute(IdUtils.generateId());
+                    },
+                    children: "添加属性"
+                })
+            ]
+        }),
+        children: /*#__PURE__*/ jsx(FieldAttributeValue, {
+            actionRef: actionRef
+        })
+    });
+};
+export { FieldAttributeForm, FieldAttributeValue };

package/dist/components/design-panel/tabs/form/form-type.d.ts

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