@coding-flow/flow-design 0.0.1

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

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { Form, Select } from "antd";
+import react from "react";
+import { FormTypeContext } from "@coding-flow/flow-types";
+const FormTypeItem = (props)=>{
+    const { form } = props;
+    const options = react.useMemo(()=>FormTypeContext.getInstance().getOptions(), []);
+    const labelCol = {
+        style: {
+            width: 100
+        }
+    };
+    const handleOnChange = (value)=>{
+        const type = FormTypeContext.getInstance().getType(value);
+        if (type) form.setFieldValue('dataType', type.dataType);
+    };
+    return /*#__PURE__*/ jsx(Form.Item, {
+        name: "type",
+        label: "字段类型",
+        labelCol: labelCol,
+        rules: [
+            {
+                required: true,
+                message: '字段类型不能为空'
+            }
+        ],
+        children: /*#__PURE__*/ jsx(Select, {
+            placeholder: "请选择字段类型",
+            options: options,
+            onChange: handleOnChange
+        })
+    });
+};
+export { FormTypeItem };

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

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

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

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Panel } from "@coding-flow/flow-pc-ui";
+import { Empty, Tabs } from "antd";
+import { useDesignContext } from "../../hooks/use-design-context.js";
+import { FormTable } from "./table.js";
+const TabForm = ()=>{
+    const { state } = useDesignContext();
+    const mainCode = state.workflow.form.code;
+    const mainName = state.workflow.form.name;
+    const subForms = state.workflow.form.subForms || [];
+    const items = subForms.map((item)=>{
+        const title = `子表:${item.name}`;
+        return {
+            key: item.code,
+            label: title,
+            children: /*#__PURE__*/ jsx(FormTable, {
+                name: title,
+                code: item.code,
+                mainForm: false
+            })
+        };
+    });
+    if (!mainCode) return /*#__PURE__*/ jsx(Empty, {
+        description: "请先在基本信息中添加表单的定义配置."
+    });
+    return /*#__PURE__*/ jsxs(Panel, {
+        children: [
+            /*#__PURE__*/ jsx(FormTable, {
+                name: `主表:${mainName}`,
+                code: mainCode,
+                mainForm: true
+            }),
+            /*#__PURE__*/ jsx(Tabs, {
+                style: {
+                    marginTop: 20
+                },
+                items: items
+            })
+        ]
+    });
+};
+export { TabForm };

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { FormInstance } from "antd";
+interface FormFieldModalProps {
+    open: boolean;
+    onClose: () => void;
+    onFinish?: (values: any) => void;
+    form: FormInstance;
+}
+export declare const FormFieldModal: React.FC<FormFieldModalProps>;
+export {};

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

@@ -0,0 +1,156 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Col, Form, Input, Modal, Row, Switch } from "antd";
+import { FieldAttributeForm } from "./attrubute.js";
+import { FormTypeItem } from "./form-type.js";
+const FormFieldModal = (props)=>{
+    const form = props.form;
+    const labelCol = {
+        style: {
+            width: 100
+        }
+    };
+    return /*#__PURE__*/ jsx(Modal, {
+        open: props.open,
+        title: "编辑字段",
+        width: "60%",
+        onCancel: props.onClose,
+        onOk: ()=>{
+            form.submit();
+        },
+        children: /*#__PURE__*/ jsxs(Form, {
+            form: form,
+            title: "编辑字段",
+            layout: "vertical",
+            onFinish: (values)=>{
+                delete values.enable;
+                props.onFinish?.(values);
+                props.onClose?.();
+            },
+            children: [
+                /*#__PURE__*/ jsx(Form.Item, {
+                    name: "id",
+                    hidden: true,
+                    children: /*#__PURE__*/ jsx(Input, {})
+                }),
+                /*#__PURE__*/ jsx(Form.Item, {
+                    name: "dataType",
+                    hidden: true,
+                    children: /*#__PURE__*/ jsx(Input, {})
+                }),
+                /*#__PURE__*/ jsxs(Row, {
+                    gutter: [
+                        8,
+                        8
+                    ],
+                    children: [
+                        /*#__PURE__*/ jsx(Col, {
+                            span: 12,
+                            children: /*#__PURE__*/ jsx(Form.Item, {
+                                name: "name",
+                                label: "字段名称",
+                                labelCol: labelCol,
+                                rules: [
+                                    {
+                                        required: true,
+                                        message: '字段名称不能为空'
+                                    }
+                                ],
+                                children: /*#__PURE__*/ jsx(Input, {
+                                    placeholder: "请输入字段名称"
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Col, {
+                            span: 12,
+                            children: /*#__PURE__*/ jsx(Form.Item, {
+                                name: "code",
+                                label: "字段编码",
+                                labelCol: labelCol,
+                                rules: [
+                                    {
+                                        required: true,
+                                        message: '字段编码不能为空'
+                                    }
+                                ],
+                                children: /*#__PURE__*/ jsx(Input, {
+                                    placeholder: "请输入字段编码"
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Col, {
+                            span: 12,
+                            children: /*#__PURE__*/ jsx(FormTypeItem, {
+                                form: form
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Col, {
+                            span: 6,
+                            children: /*#__PURE__*/ jsx(Form.Item, {
+                                name: "required",
+                                label: "是否必填",
+                                labelCol: labelCol,
+                                children: /*#__PURE__*/ jsx(Switch, {})
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Col, {
+                            span: 6,
+                            children: /*#__PURE__*/ jsx(Form.Item, {
+                                name: "hidden",
+                                label: "是否隐藏",
+                                labelCol: labelCol,
+                                children: /*#__PURE__*/ jsx(Switch, {})
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Col, {
+                            span: 12,
+                            children: /*#__PURE__*/ jsx(Form.Item, {
+                                name: "placeholder",
+                                label: "输入提示信息",
+                                labelCol: labelCol,
+                                children: /*#__PURE__*/ jsx(Input, {
+                                    placeholder: "请输入输入提示信息"
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Col, {
+                            span: 12,
+                            children: /*#__PURE__*/ jsx(Form.Item, {
+                                name: "defaultValue",
+                                label: "默认值",
+                                labelCol: labelCol,
+                                children: /*#__PURE__*/ jsx(Input, {
+                                    placeholder: "请输入默认值"
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Col, {
+                            span: 12,
+                            children: /*#__PURE__*/ jsx(Form.Item, {
+                                name: "tooltip",
+                                label: "提示信息",
+                                labelCol: labelCol,
+                                children: /*#__PURE__*/ jsx(Input, {
+                                    placeholder: "请输入提示信息"
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Col, {
+                            span: 12,
+                            children: /*#__PURE__*/ jsx(Form.Item, {
+                                name: "help",
+                                label: "帮助提示",
+                                labelCol: labelCol,
+                                children: /*#__PURE__*/ jsx(Input, {
+                                    placeholder: "请输入帮助提示"
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(FieldAttributeForm, {})
+                    ]
+                })
+            ]
+        })
+    });
+};
+export { FormFieldModal };

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

@@ -0,0 +1,9 @@
+import { FormInstance } from "antd";
+interface SubFormModalProps {
+    open: boolean;
+    onClose: () => void;
+    onFinish?: (values: any) => void;
+    form: FormInstance;
+}
+export declare const SubFormModal: (props: SubFormModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Form, Input, Modal } from "antd";
+const SubFormModal = (props)=>{
+    const form = props.form;
+    return /*#__PURE__*/ jsx(Modal, {
+        title: "添加子表",
+        width: "60%",
+        open: props.open,
+        onCancel: props.onClose,
+        onOk: ()=>{
+            form.submit();
+        },
+        children: /*#__PURE__*/ jsxs(Form, {
+            form: form,
+            layout: "vertical",
+            onFinish: (values)=>{
+                props.onFinish?.(values);
+                props.onClose();
+            },
+            children: [
+                /*#__PURE__*/ jsx(Form.Item, {
+                    name: "name",
+                    label: "子表名称",
+                    rules: [
+                        {
+                            required: true,
+                            message: '子表名称不能为空'
+                        }
+                    ],
+                    children: /*#__PURE__*/ jsx(Input, {
+                        placeholder: "添加子表名称"
+                    })
+                }),
+                /*#__PURE__*/ jsx(Form.Item, {
+                    name: "code",
+                    label: "子表编码",
+                    rules: [
+                        {
+                            required: true,
+                            message: '子表编码不能为空'
+                        }
+                    ],
+                    children: /*#__PURE__*/ jsx(Input, {
+                        placeholder: "添加子表编码"
+                    })
+                })
+            ]
+        })
+    });
+};
+export { SubFormModal };

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

@@ -0,0 +1,8 @@
+import React from "react";
+interface FormTableProps {
+    name: string;
+    code: string;
+    mainForm: boolean;
+}
+export declare const FormTable: React.FC<FormTableProps>;
+export {};

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

@@ -0,0 +1,168 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Table } from "@coding-flow/flow-pc-ui";
+import { Button, Flex, Form, Popconfirm, Space } from "antd";
+import { FormTypeContext, dataTypeOptions } from "@coding-flow/flow-types";
+import { useDesignContext } from "../../hooks/use-design-context.js";
+import { WorkflowFormManager } from "../../manager/form.js";
+import { DeleteOutlined, FolderAddOutlined, PlusOutlined } from "@ant-design/icons";
+import { FormFieldModal } from "./model.js";
+import { SubFormModal } from "./sub-form.js";
+const FormTable = (props)=>{
+    const name = props.name;
+    const { state, context } = useDesignContext();
+    const workflowFormManager = new WorkflowFormManager(state.workflow.form);
+    const presenter = context.getPresenter();
+    const [fieldForm] = Form.useForm();
+    const [editable, setEditable] = useState(false);
+    const [subForm] = Form.useForm();
+    const [subFormVisible, setSubFormVisible] = useState(false);
+    const columns = [
+        {
+            dataIndex: 'id',
+            title: 'id',
+            hidden: true
+        },
+        {
+            dataIndex: 'name',
+            title: '字段名称'
+        },
+        {
+            dataIndex: 'code',
+            title: '字段编码'
+        },
+        {
+            dataIndex: 'type',
+            title: '字段类型',
+            render: (value, record)=>{
+                const type = FormTypeContext.getInstance().getType(value);
+                if (type) return type.name;
+                return value;
+            }
+        },
+        {
+            dataIndex: 'dataType',
+            title: '数据类型',
+            render: (value, record)=>{
+                let label = '';
+                for (const option of dataTypeOptions)if (option.value == value) label = option.label;
+                return label;
+            }
+        },
+        {
+            dataIndex: 'required',
+            title: '是否为空',
+            render: (value)=>value ? '必填' : '非必填'
+        },
+        {
+            dataIndex: 'hidden',
+            title: '是否隐藏',
+            render: (value)=>value ? '隐藏' : '展示'
+        },
+        {
+            dataIndex: 'placeholder',
+            title: '输入提示'
+        },
+        {
+            dataIndex: 'attributes',
+            title: '属性数量',
+            render: (value)=>value ? value.length : 0
+        },
+        {
+            dataIndex: 'option',
+            title: '操作',
+            render: (_, record)=>/*#__PURE__*/ jsxs(Space, {
+                    children: [
+                        /*#__PURE__*/ jsx("a", {
+                            onClick: ()=>{
+                                fieldForm.resetFields();
+                                fieldForm.setFieldsValue(record);
+                                setEditable(true);
+                            },
+                            children: "编辑"
+                        }),
+                        /*#__PURE__*/ jsx(Popconfirm, {
+                            title: "确认要删除该字段吗？",
+                            onConfirm: ()=>{
+                                presenter.removeWorkflowFormField(props.code, record.code);
+                            },
+                            children: /*#__PURE__*/ jsx("a", {
+                                children: "删除"
+                            })
+                        })
+                    ]
+                })
+        }
+    ];
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Table, {
+                columns: columns,
+                rowKey: "id",
+                dataSource: workflowFormManager.getFormFields(props.code),
+                title: ()=>/*#__PURE__*/ jsxs(Flex, {
+                        justify: 'space-between',
+                        align: 'center',
+                        children: [
+                            /*#__PURE__*/ jsx(Space, {
+                                children: name
+                            }),
+                            /*#__PURE__*/ jsxs(Space, {
+                                children: [
+                                    props.mainForm && /*#__PURE__*/ jsx(Button, {
+                                        icon: /*#__PURE__*/ jsx(FolderAddOutlined, {}),
+                                        onClick: ()=>{
+                                            subForm.resetFields();
+                                            setSubFormVisible(true);
+                                        },
+                                        children: "添加子表"
+                                    }),
+                                    !props.mainForm && /*#__PURE__*/ jsx(Popconfirm, {
+                                        title: "确认要删除子表吗？",
+                                        onConfirm: ()=>{
+                                            presenter.removeWorkflowSubForm(props.code);
+                                        },
+                                        children: /*#__PURE__*/ jsx(Button, {
+                                            icon: /*#__PURE__*/ jsx(DeleteOutlined, {}),
+                                            danger: true,
+                                            children: "删除子表"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Button, {
+                                        icon: /*#__PURE__*/ jsx(PlusOutlined, {}),
+                                        onClick: ()=>{
+                                            fieldForm.resetFields();
+                                            setEditable(true);
+                                        },
+                                        children: "添加字段"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+            }),
+            /*#__PURE__*/ jsx(SubFormModal, {
+                form: subForm,
+                open: subFormVisible,
+                onFinish: (values)=>{
+                    presenter.addWorkflowSubForm(values);
+                },
+                onClose: ()=>{
+                    setSubFormVisible(false);
+                }
+            }),
+            /*#__PURE__*/ jsx(FormFieldModal, {
+                open: editable,
+                form: fieldForm,
+                onClose: ()=>{
+                    setEditable(false);
+                },
+                onFinish: (values)=>{
+                    presenter.updateWorkflowFormField(props.code, values);
+                    setEditable(false);
+                }
+            })
+        ]
+    });
+};
+export { FormTable };

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

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

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

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { CardForm, Panel } from "@coding-flow/flow-pc-ui";
+import { InterferePanel } from "../panels/workflow/interfere.js";
+import { UrgePanel } from "../panels/workflow/urge.js";
+import { useDesignContext } from "../hooks/use-design-context.js";
+import { WorkflowStrategyManager } from "../manager/strategy.js";
+const TabSetting = ()=>{
+    const [form] = CardForm.useForm();
+    const { state, context } = useDesignContext();
+    const formActionContext = context.getPresenter().getFormActionContext();
+    const workflowStrategyManager = new WorkflowStrategyManager();
+    const resetFieldsValue = ()=>{
+        const formData = workflowStrategyManager.toRender(state.workflow.strategies);
+        form.setFieldsValue(formData);
+    };
+    react.useEffect(()=>{
+        resetFieldsValue();
+    }, [
+        state.workflow.strategies
+    ]);
+    react.useEffect(()=>{
+        form.resetFields();
+        resetFieldsValue();
+        formActionContext.addAction({
+            save: ()=>workflowStrategyManager.toData(form.getFieldsValue()),
+            key: ()=>'setting',
+            validate: ()=>new Promise((resolve, reject)=>{
+                    form.validateFields().then((values)=>{
+                        resolve(workflowStrategyManager.toData(values));
+                    }).catch(reject);
+                })
+        });
+        return ()=>{
+            formActionContext.removeAction('setting');
+        };
+    }, []);
+    return /*#__PURE__*/ jsxs(Panel, {
+        children: [
+            /*#__PURE__*/ jsx(InterferePanel, {
+                form: form
+            }),
+            /*#__PURE__*/ jsx(UrgePanel, {
+                form: form
+            })
+        ]
+    });
+};
+export { TabSetting };

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

@@ -0,0 +1,42 @@
+import { FlowForm, NodeType, FlowAction } from "@coding-flow/flow-types";
+export type TabPanelType = 'base' | 'form' | 'flow' | 'setting';
+export declare const LayoutHeaderHeight = 50;
+export interface DesignPanelProps {
+    id?: string;
+    open: boolean;
+    onClose?: () => void;
+}
+export interface Workflow {
+    id: string;
+    title: string;
+    code: string;
+    form: FlowForm;
+    operatorCreateScript: string;
+    strategies?: any[];
+    nodes?: FlowNode[];
+}
+export interface FlowNode {
+    id: string;
+    name: string;
+    type: NodeType;
+    order: number;
+    actions: FlowAction[];
+    strategies: any[];
+    blocks?: FlowNode[];
+    script?: string;
+    view?: string;
+    display?: boolean;
+}
+export interface State {
+    view: {
+        tabPanel: TabPanelType;
+    };
+    workflow: Workflow;
+}
+export declare const initStateData: State;
+export interface DesignPanelApi {
+    create(): Promise<Workflow>;
+    load(id: string): Promise<Workflow>;
+    save(body: any): Promise<void>;
+    createNode(type: string): Promise<FlowNode>;
+}

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

@@ -0,0 +1,19 @@
+const LayoutHeaderHeight = 50;
+const initStateData = {
+    view: {
+        tabPanel: 'base'
+    },
+    workflow: {
+        id: '',
+        title: '',
+        code: '',
+        operatorCreateScript: '',
+        form: {
+            code: '',
+            name: '',
+            fields: [],
+            subForms: []
+        }
+    }
+};
+export { LayoutHeaderHeight, initStateData };

package/dist/components/groovy-code/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface GroovyCodeEditorProps {
+    value?: string;
+    readonly?: boolean;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    theme?: 'dark' | 'light';
+    options?: {
+        fontSize?: number;
+        minHeight?: number;
+        maxHeight?: number;
+    };
+}
+export declare const GroovyCodeEditor: React.FC<GroovyCodeEditorProps>;
+export {};