@coding-flow/flow-design 0.0.1

package/dist/components/design-editor/node-components/node-order/index.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Field } from "@flowgram.ai/fixed-layout-editor";
+import { Form, Input } from "antd";
+const NodeOrder = ()=>{
+    const [form] = Form.useForm();
+    return /*#__PURE__*/ jsx(Form, {
+        form: form,
+        style: {
+            width: '100%'
+        },
+        layout: "vertical",
+        children: /*#__PURE__*/ jsx(Form.Item, {
+            label: "优先级",
+            name: "order",
+            tooltip: "数字越小优先级越高",
+            children: /*#__PURE__*/ jsx(Field, {
+                name: "order",
+                render: ({ field: { value, onChange } })=>/*#__PURE__*/ jsx(Input, {
+                        type: "number",
+                        value: value,
+                        placeholder: "请输入优先级",
+                        onChange: (event)=>{
+                            onChange(event.target.value);
+                        }
+                    })
+            })
+        })
+    });
+};
+export { NodeOrder };

package/dist/components/design-editor/node-components/panel/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { FlowNodeJSON } from "../../typings";
+import { FormRenderProps } from "@flowgram.ai/fixed-layout-editor";
+interface NodePanelProps {
+    children?: React.ReactNode;
+    data: FormRenderProps<FlowNodeJSON['data']>;
+}
+export declare const NodePanel: React.FC<NodePanelProps>;
+export declare const $NodePanel: React.FC<NodePanelProps>;
+export {};

package/dist/components/design-editor/node-components/panel/index.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { Flex, theme } from "antd";
+import { CloseCircleOutlined } from "@ant-design/icons";
+import { NodeFormContext } from "../../context/index.js";
+import { useClientContext } from "@flowgram.ai/fixed-layout-editor";
+import { useIsSidebar } from "../../hooks/index.js";
+import { useNodeRenderContext } from "../../hooks/use-node-render-context.js";
+const NodePanel = (props)=>/*#__PURE__*/ jsx(NodeFormContext.Provider, {
+        value: props.data,
+        children: /*#__PURE__*/ jsx($NodePanel, {
+            ...props
+        })
+    });
+const $NodePanel = (props)=>{
+    const [isHovered, setIsHovered] = useState(false);
+    const { node, deleteNode } = useNodeRenderContext();
+    const clientContext = useClientContext();
+    const registry = node.getNodeRegistry();
+    const isSidebar = useIsSidebar();
+    const ctx = useClientContext();
+    const { playground } = ctx;
+    const { token } = theme.useToken();
+    const canDeleteNode = playground.config.readonlyOrDisabled;
+    const deleteButtonStyle = {
+        right: -10,
+        top: -12,
+        cursor: "pointer",
+        opacity: isHovered ? 1 : 0,
+        visibility: isHovered ? "visible" : "hidden",
+        transition: "opacity 0.2s ease, visibility 0.2s ease",
+        zIndex: 10,
+        position: "absolute"
+    };
+    const deleteDisabled = useMemo(()=>{
+        const { canDelete, meta } = registry;
+        if ('function' == typeof canDelete) return !canDelete(clientContext, node);
+        return meta?.deleteDisable ?? false;
+    }, [
+        registry,
+        clientContext,
+        node
+    ]);
+    const handleDelete = useCallback((e)=>{
+        e.stopPropagation();
+        deleteNode();
+    }, [
+        deleteNode
+    ]);
+    if (isSidebar || canDeleteNode) return /*#__PURE__*/ jsx("div", {
+        style: {
+            width: '100%',
+            padding: 3
+        },
+        children: /*#__PURE__*/ jsx(Flex, {
+            vertical: true,
+            justify: "center",
+            align: "center",
+            children: props.children
+        })
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        style: {
+            width: '100%',
+            padding: 3
+        },
+        onMouseEnter: ()=>setIsHovered(true),
+        onMouseLeave: ()=>setIsHovered(false),
+        children: [
+            !deleteDisabled && /*#__PURE__*/ jsx("div", {
+                style: deleteButtonStyle,
+                children: /*#__PURE__*/ jsx(CloseCircleOutlined, {
+                    style: {
+                        color: token.colorPrimary,
+                        transition: "transform 0.2s ease",
+                        transform: isHovered ? "scale(1.1)" : "scale(1)"
+                    },
+                    onClick: handleDelete
+                })
+            }),
+            /*#__PURE__*/ jsx(Flex, {
+                vertical: true,
+                justify: "center",
+                align: "center",
+                children: props.children
+            })
+        ]
+    });
+};
+export { $NodePanel, NodePanel };

package/dist/components/design-editor/node-components/promission/index.d.ts

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

package/dist/components/design-editor/node-components/promission/index.js

@@ -0,0 +1,108 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Switch, Tabs } from "antd";
+import { Table } from "@coding-flow/flow-pc-ui";
+import { PromissionPresenter } from "./presenter.js";
+import { useDesignContext } from "../../../design-panel/hooks/use-design-context.js";
+const FormPromissionTable = (props)=>{
+    const code = props.code;
+    const promissionManager = props.presenter;
+    const datasource = promissionManager.getDatasource(code);
+    const columns = [
+        {
+            title: 'id',
+            dataIndex: 'id',
+            key: 'id',
+            hidden: true
+        },
+        {
+            title: '名称',
+            dataIndex: 'fieldName',
+            key: 'fieldName'
+        },
+        {
+            title: '编码',
+            dataIndex: 'fieldCode',
+            key: 'fieldCode'
+        },
+        {
+            title: '可编辑',
+            dataIndex: 'editable',
+            key: 'editable',
+            render: (_, record)=>/*#__PURE__*/ jsx(Switch, {
+                    size: "small",
+                    checked: 'WRITE' === record.type,
+                    onChange: (value)=>{
+                        promissionManager.changeEditable(code, record.fieldCode, value);
+                    }
+                })
+        },
+        {
+            title: '只读',
+            dataIndex: 'readable',
+            key: 'readable',
+            render: (_, record)=>/*#__PURE__*/ jsx(Switch, {
+                    size: "small",
+                    checked: 'READ' === record.type,
+                    onChange: (value)=>{
+                        promissionManager.changeReadable(code, record.fieldCode, value);
+                    }
+                })
+        },
+        {
+            title: '隐藏',
+            dataIndex: 'hidden',
+            key: 'hidden',
+            render: (_, record)=>/*#__PURE__*/ jsx(Switch, {
+                    size: "small",
+                    checked: 'HIDDEN' === record.type,
+                    onChange: (value)=>{
+                        promissionManager.changeHidden(code, record.fieldCode, value);
+                    }
+                })
+        }
+    ];
+    return /*#__PURE__*/ jsx(Table, {
+        title: ()=>`表单：${props.title || '未选择表单'}`,
+        rowKey: "id",
+        columns: columns,
+        dataSource: datasource,
+        style: {
+            width: "100%"
+        },
+        pagination: false
+    });
+};
+const PromissionTable = (props)=>{
+    const { state } = useDesignContext();
+    const form = state.workflow.form;
+    const presenter = new PromissionPresenter(form, props.value, props.onChange);
+    presenter.initFormPromission();
+    const formList = form.subForms || [];
+    const items = formList.map((item)=>({
+            key: item.name,
+            label: `子表单：${item.name}`,
+            children: /*#__PURE__*/ jsx(FormPromissionTable, {
+                title: item.name,
+                code: item.code,
+                presenter: presenter
+            })
+        }));
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(FormPromissionTable, {
+                title: form?.name || '主表单',
+                code: form?.code || '',
+                presenter: presenter
+            }),
+            items && items.length > 0 && /*#__PURE__*/ jsx(Tabs, {
+                items: items,
+                style: {
+                    width: "100%"
+                },
+                centered: true
+            })
+        ]
+    });
+};
+export { PromissionTable };

package/dist/components/design-editor/node-components/promission/presenter.d.ts

@@ -0,0 +1,24 @@
+import { FlowForm } from "@coding-flow/flow-types";
+import { FieldPermission } from "@coding-flow/flow-types";
+export declare class PromissionPresenter {
+    private data;
+    private readonly onChange;
+    private readonly form;
+    private readonly formList;
+    constructor(form: FlowForm, data: FieldPermission[], onChange: (data: FieldPermission[]) => void);
+    private getFormFields;
+    getDatasource(code: string): {
+        id: string;
+        fieldName: string;
+        fieldCode: string;
+        formCode: string;
+        type: string;
+    }[];
+    private getFieldName;
+    private convertFieldsToColumns;
+    initFormPromission(): void;
+    private changeFieldValue;
+    changeHidden(formCode: string, fieldCode: string, value: boolean): void;
+    changeReadable(formCode: string, fieldCode: string, value: boolean): void;
+    changeEditable(formCode: string, fieldCode: string, value: boolean): void;
+}

package/dist/components/design-editor/node-components/promission/presenter.js

@@ -0,0 +1,91 @@
+class PromissionPresenter {
+    data;
+    onChange;
+    form;
+    formList;
+    constructor(form, data, onChange){
+        this.form = form;
+        this.onChange = onChange;
+        this.data = data;
+        this.formList = [
+            form,
+            ...form.subForms || []
+        ];
+    }
+    getFormFields(code) {
+        for (const form of this.formList)if (code === form.code) return form.fields;
+        return [];
+    }
+    getDatasource(code) {
+        return this.convertFieldsToColumns(code);
+    }
+    getFieldName(formCode, fieldCode) {
+        for (const form of this.formList)if (form.code == formCode) {
+            const fields = form.fields || [];
+            for (const field of fields)if (field.code == fieldCode) return field.name;
+        }
+        return null;
+    }
+    convertFieldsToColumns(code) {
+        const currentColumns = this.data.filter((item)=>item.formCode === code) || [];
+        return this.getFormFields(code).map((field)=>({
+                id: field.id,
+                fieldName: field.name,
+                fieldCode: field.code,
+                formCode: code,
+                type: 'WRITE'
+            })).map((field)=>{
+            const currentColumnType = currentColumns.find((column)=>column.fieldCode === field.fieldCode);
+            if (currentColumnType) return {
+                ...field,
+                type: currentColumnType.type
+            };
+            return field;
+        });
+    }
+    initFormPromission() {
+        if (this.data && this.data.length > 0) return;
+        const form = this.form;
+        let data = [];
+        const mainList = form.fields.map((field)=>({
+                id: field.id,
+                fieldName: field.name,
+                fieldCode: field.code,
+                formCode: form.code,
+                type: 'WRITE'
+            }));
+        data.push(...mainList);
+        if (form.subForms) for (const subForm of form.subForms || []){
+            const list = subForm.fields.map((field)=>({
+                    id: field.id,
+                    formCode: subForm.code,
+                    fieldName: field.name,
+                    fieldCode: field.code,
+                    type: 'WRITE'
+                }));
+            data.push(...list);
+        }
+        this.onChange(data);
+        this.data = data;
+    }
+    changeFieldValue(code, fieldCode, value) {
+        let newData = [];
+        for (const item of this.data)if (item['formCode'] === code && item['fieldCode'] === fieldCode) newData.push({
+            ...item,
+            type: value
+        });
+        else newData.push(item);
+        this.onChange(newData);
+        this.data = newData;
+    }
+    changeHidden(formCode, fieldCode, value) {
+        if (value) this.changeFieldValue(formCode, fieldCode, 'HIDDEN');
+    }
+    changeReadable(formCode, fieldCode, value) {
+        if (value) this.changeFieldValue(formCode, fieldCode, 'READ');
+    }
+    changeEditable(formCode, fieldCode, value) {
+        if (value) this.changeFieldValue(formCode, fieldCode, 'WRITE');
+    }
+}
+export { PromissionPresenter };

package/dist/components/design-editor/node-components/strategy/advice.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+/**
+ * 节点审批意见策略
+ * @constructor
+ */
+export declare const AdviceStrategy: React.FC;

package/dist/components/design-editor/node-components/strategy/advice.js

@@ -0,0 +1,49 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Form, Switch } from "antd";
+import { Field } from "@flowgram.ai/fixed-layout-editor";
+const AdviceStrategy = ()=>{
+    const [form] = Form.useForm();
+    return /*#__PURE__*/ jsxs(Form, {
+        form: form,
+        style: {
+            width: '100%'
+        },
+        layout: "vertical",
+        children: [
+            /*#__PURE__*/ jsx(Form.Item, {
+                label: "审批意见是否必填",
+                name: [
+                    "AdviceStrategy",
+                    "adviceRequired"
+                ],
+                children: /*#__PURE__*/ jsx(Field, {
+                    name: "AdviceStrategy.adviceRequired",
+                    render: ({ field: { value, onChange } })=>/*#__PURE__*/ jsx(Fragment, {
+                            children: /*#__PURE__*/ jsx(Switch, {
+                                value: value,
+                                onChange: onChange
+                            })
+                        })
+                })
+            }),
+            /*#__PURE__*/ jsx(Form.Item, {
+                label: "审批签名是否必填",
+                name: [
+                    "AdviceStrategy",
+                    "signRequired"
+                ],
+                children: /*#__PURE__*/ jsx(Field, {
+                    name: "AdviceStrategy.signRequired",
+                    render: ({ field: { value, onChange } })=>/*#__PURE__*/ jsx(Fragment, {
+                            children: /*#__PURE__*/ jsx(Switch, {
+                                value: value,
+                                onChange: onChange
+                            })
+                        })
+                })
+            })
+        ]
+    });
+};
+export { AdviceStrategy };

package/dist/components/design-editor/node-components/strategy/deplay.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+/**
+ * 延迟策略配置
+ * @constructor
+ */
+export declare const DelayStrategy: React.FC;

package/dist/components/design-editor/node-components/strategy/deplay.js

@@ -0,0 +1,66 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Form, Input, Select } from "antd";
+import { Field } from "@flowgram.ai/fixed-layout-editor";
+const DelayStrategy = ()=>{
+    const [form] = Form.useForm();
+    return /*#__PURE__*/ jsxs(Form, {
+        form: form,
+        style: {
+            width: '100%'
+        },
+        layout: "vertical",
+        children: [
+            /*#__PURE__*/ jsx(Form.Item, {
+                label: "延迟时间类型",
+                name: [
+                    "DelayStrategy",
+                    "type"
+                ],
+                children: /*#__PURE__*/ jsx(Field, {
+                    name: "DelayStrategy.type",
+                    render: ({ field: { value, onChange } })=>/*#__PURE__*/ jsx(Select, {
+                            value: value,
+                            onChange: onChange,
+                            options: [
+                                {
+                                    label: '秒',
+                                    value: 'SECOND'
+                                },
+                                {
+                                    label: '分',
+                                    value: 'MINUTE'
+                                },
+                                {
+                                    label: '时',
+                                    value: 'HOUR'
+                                },
+                                {
+                                    label: '天',
+                                    value: 'DAY'
+                                }
+                            ]
+                        })
+                })
+            }),
+            /*#__PURE__*/ jsx(Form.Item, {
+                label: "延迟时间",
+                name: [
+                    "DelayStrategy",
+                    "time"
+                ],
+                children: /*#__PURE__*/ jsx(Field, {
+                    name: "DelayStrategy.time",
+                    render: ({ field: { value, onChange } })=>/*#__PURE__*/ jsx(Fragment, {
+                            children: /*#__PURE__*/ jsx(Input, {
+                                value: value,
+                                onChange: onChange,
+                                type: "number"
+                            })
+                        })
+                })
+            })
+        ]
+    });
+};
+export { DelayStrategy };

package/dist/components/design-editor/node-components/strategy/error-trigger.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+/**
+ * 错误触发策略配置(没有匹配到人时)
+ * @constructor
+ */
+export declare const ErrorTriggerStrategy: React.FC;

package/dist/components/design-editor/node-components/strategy/error-trigger.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { Button, Form, Space } from "antd";
+import { Field } from "@flowgram.ai/fixed-layout-editor";
+import { GroovyScriptPreview } from "../../../../script-components/components/groovy-script-preview.js";
+import { EditOutlined } from "@ant-design/icons";
+import { ErrorTriggerConfigModal } from "../../../../script-components/modal/error-trigger-config-modal.js";
+const ErrorTriggerStrategy = ()=>{
+    const [form] = Form.useForm();
+    const [visible, setVisible] = react.useState(false);
+    return /*#__PURE__*/ jsx(Form, {
+        form: form,
+        style: {
+            width: '100%'
+        },
+        layout: "vertical",
+        children: /*#__PURE__*/ jsx(Form.Item, {
+            label: "异常配置",
+            name: [
+                "ErrorTriggerStrategy",
+                "script"
+            ],
+            tooltip: "在没有匹配到操作人时触发的脚本配置",
+            children: /*#__PURE__*/ jsx(Field, {
+                name: "ErrorTriggerStrategy.script",
+                render: ({ field: { value, onChange } })=>/*#__PURE__*/ jsxs(Space.Compact, {
+                        style: {
+                            width: '100%'
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx(GroovyScriptPreview, {
+                                script: value
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                icon: /*#__PURE__*/ jsx(EditOutlined, {}),
+                                onClick: ()=>{
+                                    setVisible(true);
+                                },
+                                style: {
+                                    borderRadius: '0 6px 6px 0'
+                                },
+                                children: "编辑"
+                            }),
+                            /*#__PURE__*/ jsx(ErrorTriggerConfigModal, {
+                                open: visible,
+                                onCancel: ()=>{
+                                    setVisible(false);
+                                },
+                                onConfirm: (value)=>{
+                                    onChange(value);
+                                },
+                                script: value
+                            })
+                        ]
+                    })
+            })
+        })
+    });
+};
+export { ErrorTriggerStrategy };

package/dist/components/design-editor/node-components/strategy/multi-operator-audit.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+/**
+ * 多人审批策略配置
+ * @constructor
+ */
+export declare const MultiOperatorAuditStrategy: React.FC;

package/dist/components/design-editor/node-components/strategy/multi-operator-audit.js

@@ -0,0 +1,70 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { Form, Input, Select } from "antd";
+import { Field } from "@flowgram.ai/fixed-layout-editor";
+const MultiOperatorAuditStrategy = ()=>{
+    const [form] = Form.useForm();
+    const [percentVisible, setPercentVisible] = react.useState(false);
+    return /*#__PURE__*/ jsxs(Form, {
+        form: form,
+        style: {
+            width: '100%'
+        },
+        layout: "vertical",
+        children: [
+            /*#__PURE__*/ jsx(Form.Item, {
+                label: "多人审批策略",
+                name: [
+                    "MultiOperatorAuditStrategy",
+                    "type"
+                ],
+                children: /*#__PURE__*/ jsx(Field, {
+                    name: "MultiOperatorAuditStrategy.type",
+                    render: ({ field: { value, onChange } })=>{
+                        setPercentVisible('MERGE' === value);
+                        return /*#__PURE__*/ jsx(Select, {
+                            value: value,
+                            onChange: onChange,
+                            options: [
+                                {
+                                    label: '循序提交',
+                                    value: 'SEQUENCE'
+                                },
+                                {
+                                    label: '合并审核',
+                                    value: 'MERGE'
+                                },
+                                {
+                                    label: '任意审核',
+                                    value: 'ANY'
+                                },
+                                {
+                                    label: '任意一人',
+                                    value: 'RANDOM_ONE'
+                                }
+                            ]
+                        });
+                    }
+                })
+            }),
+            percentVisible && /*#__PURE__*/ jsx(Form.Item, {
+                label: "会签通过百分比",
+                name: [
+                    "MultiOperatorAuditStrategy",
+                    "percent"
+                ],
+                children: /*#__PURE__*/ jsx(Field, {
+                    name: "MultiOperatorAuditStrategy.percent",
+                    render: ({ field: { value, onChange } })=>/*#__PURE__*/ jsx(Fragment, {
+                            children: /*#__PURE__*/ jsx(Input, {
+                                value: value,
+                                onChange: onChange,
+                                type: "number"
+                            })
+                        })
+                })
+            })
+        ]
+    });
+};
+export { MultiOperatorAuditStrategy };

package/dist/components/design-editor/node-components/strategy/node-title.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * 节点标题策略配置
+ */
+export declare const NodeTitleStrategy: React.FC;