bm-admin-ui 1.0.64-alpha → 1.0.66-alpha

package/es/components/flow-designer/index.js

@@ -1,6 +1,74 @@
 import { withInstall } from 'bm-admin-ui/es/utils/with-install';
-import { defineComponent, ref, onMounted, openBlock, createElementBlock } from 'vue';
-import LogicFlow from '@logicflow/core';
+import { defineComponent, ref, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeStyle, withModifiers, toDisplayString, createBlock, withKeys, createVNode, createCommentVNode, createTextVNode, nextTick, normalizeClass, unref, withCtx, render, onMounted } from 'vue';
+import '@logicflow/core/dist/style/index.css';
+import '@logicflow/extension/lib/style/index.css';
+import LogicFlow, { HtmlNodeModel, HtmlNode, RectNodeModel, RectNode, PolylineEdgeModel, PolylineEdge } from '@logicflow/core';
+import { Menu, BpmnAdapter } from '@logicflow/extension';
+import { RightOutlined, CloseOutlined, ContactsFilled } from '@ant-design/icons-vue';
+import AInput from 'ant-design-vue/lib/input';
+import Tag from 'ant-design-vue/lib/tag';
+import { message } from 'ant-design-vue';
+import Modal from 'ant-design-vue/lib/modal';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+class EndCircleModel extends HtmlNodeModel {
+    initNodeData(data) {
+        super.initNodeData(data);
+        this.isHovered = false;
+    }
+    setAttributes() {
+        super.setAttributes();
+        this.isSelected = false;
+        this.isHovered = false;
+    }
+    getDefaultAnchor() {
+        const { width, height, x, y, id } = this;
+        return [
+            {
+                x,
+                y: y - height / 2,
+                id: `${id}_0`,
+            },
+        ];
+    }
+}
+class EndCircleView extends HtmlNode {
+    setHtml(roolEl) {
+        const html = `<div class="bm-flow-end-circle">结束</div>`;
+        roolEl.innerHTML = html;
+    }
+}
+var EndCircle = {
+    type: 'bmEndNode',
+    view: EndCircleView,
+    model: EndCircleModel,
+};
 
 var _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
@@ -10,23 +78,1228 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 
+const _sfc_main$2 = defineComponent({
+  components: { RightOutlined, CloseOutlined, AInput },
+  props: {
+    type: {
+      type: String,
+      default: "begin"
+    },
+    label: {
+      type: String,
+      default: "\u53D1\u8D77\u4EBA"
+    },
+    desc: {
+      type: String,
+      default: ""
+    },
+    contentClick: {
+      type: Function,
+      default: (e) => {
+      }
+    },
+    deleteClick: {
+      type: Function,
+      default: (e) => {
+      }
+    },
+    icon: {
+      type: Function || null,
+      default: null
+    },
+    style: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["update:label"],
+  setup(props, { emit }) {
+    const isEditLabel = ref(false);
+    const tempLabel = ref("");
+    tempLabel.value = "";
+    const methods = {
+      toEditLabel() {
+        tempLabel.value = props["label"];
+        isEditLabel.value = true;
+      },
+      updateLabel(_) {
+        nextTick(() => {
+          isEditLabel.value = false;
+        });
+        if (tempLabel.value)
+          emit("update:label", tempLabel.value);
+        else {
+          emit("update:label", props["label"]);
+        }
+      }
+    };
+    return {
+      isEditLabel,
+      tempLabel,
+      ...methods
+    };
+  }
+});
+const _hoisted_1$1 = { class: "bm-html-box" };
+const _hoisted_2$1 = { class: "default-box" };
+const _hoisted_3$1 = { class: "iconfont box-icon" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_AInput = resolveComponent("AInput");
+  const _component_CloseOutlined = resolveComponent("CloseOutlined");
+  const _component_RightOutlined = resolveComponent("RightOutlined");
+  return openBlock(), createElementBlock("div", _hoisted_1$1, [
+    createElementVNode("div", _hoisted_2$1, [
+      createElementVNode("div", {
+        class: "box-head",
+        style: normalizeStyle(_ctx.style)
+      }, [
+        !_ctx.isEditLabel ? (openBlock(), createElementBlock("p", {
+          key: 0,
+          onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.toEditLabel && _ctx.toEditLabel(...args), ["stop"]))
+        }, toDisplayString(_ctx.label), 1)) : (openBlock(), createBlock(_component_AInput, {
+          key: 1,
+          value: _ctx.tempLabel,
+          "onUpdate:value": _cache[1] || (_cache[1] = ($event) => _ctx.tempLabel = $event),
+          size: "small",
+          onBlur: _ctx.updateLabel,
+          onKeydown: withKeys(_ctx.updateLabel, ["enter"])
+        }, null, 8, ["value", "onBlur", "onKeydown"])),
+        _ctx.type !== "begin" ? (openBlock(), createElementBlock("i", {
+          key: 2,
+          class: "delete-icon",
+          onClick: _cache[2] || (_cache[2] = withModifiers(
+            () => {
+              _ctx.deleteClick();
+            },
+            ["stop"]
+          ))
+        }, [
+          createVNode(_component_CloseOutlined)
+        ])) : createCommentVNode("v-if", true)
+      ], 4),
+      createElementVNode("div", {
+        class: "box-body",
+        onClick: _cache[3] || (_cache[3] = withModifiers(
+          () => {
+            _ctx.contentClick();
+          },
+          ["stop"]
+        ))
+      }, [
+        createTextVNode(toDisplayString(_ctx.desc), 1),
+        createElementVNode("span", _hoisted_3$1, [
+          createVNode(_component_RightOutlined)
+        ])
+      ])
+    ])
+  ]);
+}
+var BmHtmlNode = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render], ["__file", "BmHtmlNode.vue"]]);
+
+const _hoisted_1 = { class: "bm-condition-node" };
+const _hoisted_2 = { class: "bm-condition-node-box" };
+const _hoisted_3 = { class: "condition-header" };
+const _hoisted_4 = { key: 0 };
+const _hoisted_5 = { class: "condition-desc" };
+const _hoisted_6 = { class: "desc" };
+const _hoisted_7 = { key: 0 };
 const __default__ = {
-  name: "BmFlowDesigner"
+  name: "BmConditionNode"
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...__default__,
+  props: {
+    isCustom: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: " "
+    },
+    priority: {
+      type: Number || String,
+      default: 1
+    },
+    desc: {
+      type: String,
+      default: " "
+    },
+    copyCallback: {
+      type: Function,
+      default: () => {
+        console.info("\u8BF7\u8BBE\u7F6E\u590D\u5236\u51FD\u6570");
+      }
+    },
+    deleteCallback: {
+      type: Function,
+      default: () => {
+        console.info("\u8BF7\u8BBE\u7F6E\u5220\u9664\u51FD\u6570");
+      }
+    }
+  },
   setup(__props) {
-    const container = ref();
-    let lf;
-    function init() {
-      lf = new LogicFlow({
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("span", {
+              class: normalizeClass(["condition-title", { custom: __props.isCustom }])
+            }, toDisplayString(__props.isCustom ? __props.title : "\u9ED8\u8BA4\u6761\u4EF6"), 3),
+            __props.isCustom ? (openBlock(), createElementBlock("span", _hoisted_4, [
+              createVNode(unref(Tag), null, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(`\u4F18\u5148\u7EA7${__props.priority}`), 1)
+                ]),
+                _: 1
+              })
+            ])) : createCommentVNode("v-if", true),
+            createElementVNode("span", {
+              class: normalizeClass(["opeator", { active: __props.isCustom }])
+            }, [
+              createCommentVNode(' <CopyOutlined\n            @click.stop="\n              () => {\n                copyCallback()\n              }\n            " />&nbsp;\u6682\u65F6\u5173\u95ED\u590D\u5236\u8282\u70B9 '),
+              createVNode(unref(CloseOutlined), {
+                onClick: _cache[0] || (_cache[0] = () => {
+                  __props.deleteCallback();
+                })
+              })
+            ], 2)
+          ]),
+          createElementVNode("div", _hoisted_5, [
+            createElementVNode("span", _hoisted_6, toDisplayString(__props.desc), 1),
+            __props.isCustom ? (openBlock(), createElementBlock("span", _hoisted_7, [
+              createVNode(unref(RightOutlined))
+            ])) : createCommentVNode("v-if", true)
+          ])
+        ])
+      ]);
+    };
+  }
+});
+var BmConditionNode = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "BmConditionNode.vue"]]);
+
+const BM_NODE_CONFIG = {
+    WIDTH: 250,
+    HEIGHT: 110,
+    DEFAULTBG: '#9393a3',
+    DEFAULTCOLOR: '#fff',
+    LINELENGTH: 100,
+    ADDNODEOFFSET: 100,
+    ENDRADIUS: 16,
+    HALFNODEHEIGHT: 55,
+    NEXTOFFSET_Y: 210,
+    OFFSETDISTANCE: 210,
+    PLUSRADIUS: 15,
+    ACWIDTH: 90,
+    ACHEIGHT: 32,
+    CONDIWIDTH: 250,
+    CONDIHEIGHT: 100,
+    CONDIOFFSET: 60 + 250 / 2,
+    PLUSOFFSET: 55 + 50,
+    CONDITIONNAME: 'condition',
+    PLUSCONDINAME: 'bmAddCondiNode',
+    ENDNODENAME: 'bmEndNode',
+    ACOFFSETDISTANCE: 210 - (100 - 32),
+    CONDITIONPADDING: 60,
+    DELETEDEFAULTOFFSET: 32 + 100 + 200,
+};
+
+class FlowItemModel extends HtmlNodeModel {
+    setAttributes() {
+        this.text.editable = false;
+        this.width = BM_NODE_CONFIG.WIDTH;
+        this.height = BM_NODE_CONFIG.HEIGHT;
+        this.isSelected = false;
+        this.isHitable = false;
+    }
+    getDefaultAnchor() {
+        const { width, height, x, y, id, properties } = this;
+        return [
+            {
+                x: properties['horizontal'] ? x - width / 2 : x,
+                y: properties['horizontal'] ? y : y + height / 2,
+                id: `${id}_0`,
+            },
+            {
+                x: properties['horizontal'] ? x + width / 2 : x,
+                y: properties['horizontal'] ? y : y - height / 2,
+                id: `${id}_1`,
+            },
+        ];
+    }
+}
+class FlowItemNode extends HtmlNode {
+    constructor() {
+        super(...arguments);
+        this.vueNode = null;
+    }
+    setHtml(rootEl) {
+        const { properties, id } = this.props.model;
+        const { eventCenter } = this.props.graphModel;
+        if (!properties.type)
+            throw new Error('节点type未传递');
+        if (properties.type === 'condition') {
+            if (!this.vueNode) {
+                let desc = this.props.model.properties.desc;
+                if (!desc) {
+                    desc = properties.isCustom ? '条件字段' : '默认条件，无需设置';
+                }
+                const node = createVNode(BmConditionNode, {
+                    isCustom: properties.isCustom,
+                    title: this.props.model.properties.title ||
+                        properties.priority.title ||
+                        '默认条件',
+                    priority: this.props.model.properties.priority ||
+                        properties.priority ||
+                        99,
+                    desc,
+                    nodeClick: () => {
+                        eventCenter.emit('content:click', this.props.model);
+                    },
+                    copyCallback: () => {
+                        eventCenter.emit('flownode:copynode', this.props.model);
+                    },
+                    deleteCallback: () => {
+                        eventCenter.emit('condition:delete', this.props.model);
+                    },
+                }, []);
+                this.vueNode = render(node, rootEl);
+            }
+        }
+        else {
+            if (!properties.label) {
+                properties.label = '未命名';
+            }
+            if (!properties.desc) {
+                properties.desc = '未指定数据';
+            }
+            if (!this.vueNode) {
+                const node = createVNode(BmHtmlNode, {
+                    type: properties.type,
+                    label: this.props.model.properties.label,
+                    desc: this.props.model.properties.desc,
+                    icon: properties.icon || null,
+                    style: properties.style || {
+                        backgroundColor: BM_NODE_CONFIG.DEFAULTBG,
+                        color: BM_NODE_CONFIG.DEFAULTCOLOR,
+                    },
+                    'onUpdate:label': (value) => {
+                        this.props.model.properties.label = value;
+                    },
+                    contentClick: () => {
+                        const { eventCenter } = this.props.graphModel;
+                        eventCenter.emit('content:click', this.props.model);
+                    },
+                    deleteClick: () => {
+                        eventCenter.emit('flownode:delete', { id });
+                    },
+                }, []);
+                this.vueNode = render(node, rootEl);
+            }
+        }
+    }
+}
+const bmFlowItem = {
+    type: 'bmFlowNode',
+    view: FlowItemNode,
+    model: FlowItemModel,
+};
+var BmFlowHtmlNode = bmFlowItem;
+
+const ACTYPE = 'addCondi';
+class AddFlowNodeModel extends RectNodeModel {
+    constructor() {
+        super(...arguments);
+        this.__flowChildren = [];
+        this.__ACChildren = [];
+        this.FLOWTYPE = {
+            auditing: {
+                type: 'auditing',
+                label: '审批人',
+                desc: '指定人员',
+                style: {
+                    backgroundColor: '#ff9019',
+                    color: '#ffffff',
+                },
+                nodeWidth: 250,
+                nodeHeight: 110,
+                icon: ContactsFilled,
+            },
+            deal: {
+                type: 'deal',
+                label: '办理人',
+                desc: '指定人员',
+                style: {
+                    backgroundColor: '#e64c2e',
+                    color: '#ffffff',
+                },
+                nodeWidth: 250,
+                nodeHeight: 110,
+            },
+            addflow: {
+                type: 'addCondi',
+                nodeHeight: 32,
+                nodeWidth: 90,
+            },
+        };
+    }
+    updateChild(node) {
+        this.__flowChildren.push(node.id);
+        if (node.type === ACTYPE)
+            this.__ACChildren.push(node.id);
+    }
+    addConditionItem(node) {
+        const [nextNode] = this.graphModel.getNodeOutgoingNode(node.id);
+        if (nextNode.type === 'addCondi') {
+            message.warning('已添加条件分支');
+            return;
+        }
+        const { eventCenter } = this.graphModel;
+        eventCenter.emit('node:add-condi', { node });
+        return;
+    }
+    setAttributes() {
+        const addMenu = [
+            {
+                className: 'lf-menu-lock custom-menu',
+                text: '审批人',
+                icon: true,
+                callback: (node) => {
+                    const { eventCenter } = this.graphModel;
+                    eventCenter.emit('node:add-item', {
+                        nodetype: 'bmFlowNode',
+                        node,
+                        data: this.FLOWTYPE['auditing'],
+                    });
+                },
+            },
+            {
+                className: 'lf-menu-lock custom-menu',
+                text: '办理人',
+                icon: true,
+                callback: (node) => {
+                    const { eventCenter } = this.graphModel;
+                    eventCenter.emit('node:add-item', {
+                        nodetype: 'bmFlowNode',
+                        node,
+                        data: this.FLOWTYPE['deal'],
+                    });
+                },
+            },
+            {
+                className: 'lf-menu-lock custom-menu',
+                text: '条件分支',
+                icon: true,
+                callback: (node) => {
+                    this.addConditionItem(node);
+                },
+            },
+        ];
+        this.menu = addMenu;
+    }
+    initNodeData(data) {
+        data.text = {
+            value: '+',
+            x: data.x,
+            y: data.y,
+        };
+        const { properties } = data;
+        const { nodeWidth, nodeHeight } = properties;
+        this.width = nodeWidth;
+        this.height = nodeHeight;
+        this.radius = 50;
+        super.initNodeData(data);
+    }
+    getTextStyle() {
+        const style = super.getTextStyle();
+        style.color = '#fff';
+        style.fontSize = 26;
+        return style;
+    }
+    getNodeStyle() {
+        const style = super.getNodeStyle();
+        style.stroke = '';
+        style.fill = '#2F4EED';
+        return style;
+    }
+}
+class AddFlowNode extends RectNode {
+}
+var AddFlowNode$1 = {
+    type: 'bmAddNode',
+    view: AddFlowNode,
+    model: AddFlowNodeModel,
+};
+
+class AddCondition extends RectNode {
+}
+class AddConditionModel extends RectNodeModel {
+    constructor() {
+        super(...arguments);
+        this.__branchs = [];
+        this.__branchLengths = new Map();
+        this.__outNode = null;
+    }
+    initNodeData(data) {
+        if (!data.text || typeof data.text === 'string') {
+            data.text = {
+                value: data.text || '添加条件',
+                x: data.x,
+                y: data.y,
+            };
+        }
+        this.width = BM_NODE_CONFIG.ACWIDTH;
+        this.height = BM_NODE_CONFIG.ACHEIGHT;
+        this.radius = 16;
+        super.initNodeData(data);
+    }
+    getNodeStyle() {
+        const style = super.getNodeStyle();
+        style.stroke = '#D9D9D9';
+        style.strokeWidth = 1;
+        return style;
+    }
+    getTextStyle() {
+        const style = super.getTextStyle();
+        style.fontSize = 14;
+        style.color = '#2F4EED';
+        return style;
+    }
+}
+var AddCondi = {
+    type: 'bmAddCondiNode',
+    view: AddCondition,
+    model: AddConditionModel,
+};
+
+class BmPolyLineModel extends PolylineEdgeModel {
+    constructor() {
+        super(...arguments);
+        this.FLOWTYPE = {
+            auditing: {
+                type: 'auditing',
+                label: '审批人',
+                desc: '指定人员',
+                style: {
+                    backgroundColor: '#ff9019',
+                    color: '#ffffff',
+                },
+                nodeWidth: 250,
+                nodeHeight: 110,
+            },
+            deal: {
+                type: 'deal',
+                label: '办理人',
+                desc: '指定人员',
+                style: {
+                    backgroundColor: '#e64c2e',
+                    color: '#ffffff',
+                },
+                nodeWidth: 250,
+                nodeHeight: 110,
+            },
+            addflow: {
+                type: 'addCondi',
+                nodeHeight: 32,
+                nodeWidth: 90,
+            },
+        };
+    }
+    addConditionItem(model) {
+        const nextNode = this.graphModel.getNodeModelById(model.targetNodeId);
+        if (nextNode.type === 'addCondi') {
+            message.warning('已添加条件分支');
+            return;
+        }
+        const { eventCenter } = this.graphModel;
+        eventCenter.emit('node:add-condi', { model });
+        return;
+    }
+    initEdgeData(data) {
+        super.initEdgeData(data);
+        this.isSelected = false;
+        this.isHovered = false;
+        const model = this.graphModel.getNodeModelById(this.sourceNodeId);
+        this.isHitable = model.type !== BM_NODE_CONFIG.PLUSCONDINAME;
+    }
+    getEdgeStyle() {
+        const style = super.getEdgeStyle();
+        return style;
+    }
+    setAttributes() {
+        const addMenu = [
+            {
+                className: 'custom-menu-icon-1',
+                text: '审批人',
+                icon: true,
+                callback: (model) => {
+                    const { eventCenter } = this.graphModel;
+                    eventCenter.emit('node:add-item', {
+                        nodetype: 'bmFlowNode',
+                        model,
+                        data: this.FLOWTYPE['auditing'],
+                    });
+                },
+            },
+            {
+                className: 'custom-menu-icon-2',
+                text: '办理人',
+                icon: true,
+                callback: (model) => {
+                    const { eventCenter } = this.graphModel;
+                    eventCenter.emit('node:add-item', {
+                        nodetype: 'bmFlowNode',
+                        model,
+                        data: this.FLOWTYPE['deal'],
+                    });
+                },
+            },
+            {
+                className: 'custom-menu-icon-3',
+                text: '条件分支',
+                icon: true,
+                callback: (model) => {
+                    this.addConditionItem(model);
+                },
+            },
+        ];
+        this.menu = addMenu;
+    }
+}
+class BmPolyLine extends PolylineEdge {
+}
+var BmPolyLine$1 = {
+    type: 'bmpolyline',
+    view: BmPolyLine,
+    model: BmPolyLineModel,
+};
+
+const idGeneratorFunc = (function () {
+    let id = 0;
+    return function () {
+        return `bm${(Math.random().toString(36) + Number(`${Date.now()}${++id}`).toString(36)).slice(2)}`;
+    };
+})();
+function initBasicFlow(_a) {
+    var { container } = _a, config = __rest(_a, ["container"]);
+    const lf = new LogicFlow(Object.assign({ container, background: {
+            backgroundColor: '#f8f8f8',
+        }, grid: {
+            size: 10,
+            visible: false,
+            type: 'mesh',
+            config: {
+                color: '#fff',
+                thickness: 10,
+            },
+        }, partial: false, stopScrollGraph: false, adjustEdge: false, edgeSelectedOutline: false, adjustEdgeStartAndEnd: false, nodeSelectedOutline: false, textEdit: false, snapline: true, hoverOutline: false, plugins: [Menu, BpmnAdapter], isSilentMode: true, idGenerator: idGeneratorFunc, edgeGenerator: idGeneratorFunc }, config));
+    lf.batchRegister([
+        EndCircle,
+        AddFlowNode$1,
+        AddCondi,
+        BmPolyLine$1,
+        BmFlowHtmlNode,
+    ]);
+    lf.extension.menu.setMenuConfig({
+        nodeMenu: false,
+        graphMenu: [],
+    });
+    lf.setTheme({
+        polyline: {
+            strokeWidth: 2,
+            stroke: '#D9D9D9',
+        },
+        arrow: {
+            offset: 0,
+            verticalLength: 0,
+        },
+        edgeText: {
+            textWidth: 50,
+            fontSize: 23,
+            color: '#fff',
+            background: {
+                fill: '#2F4EED',
+            },
+        },
+        rect: {
+            fill: '#FFFFFF',
+            stroke: '#000000',
+            strokeWidth: 2,
+        },
+    });
+    lf.render();
+    return lf;
+}
+function is(val, type) {
+    return toString.call(val) === `[object ${type}]`;
+}
+function isString(val) {
+    return is(val, 'String');
+}
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "flow-designer",
+  props: {
+    lineLength: {
+      type: Number,
+      default: 100
+    }
+  },
+  emits: ["nodeCallback", "loadFinish"],
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const container = ref(null);
+    let lf = null;
+    let graphModel = null;
+    let eventCenter;
+    function getFlowRawData() {
+      const json = lf.getGraphRawData();
+      const xml = lf.getGraphData();
+      return { json, xml };
+    }
+    function loadFlowData(json) {
+      lf.renderRawData(json);
+      lf.graphModel.nodes.forEach((item) => {
+        if (item.properties.type === "begin")
+          state.startId = item.id;
+        if (item.type === BM_NODE_CONFIG.ENDNODENAME)
+          state.endId = item.id;
+      });
+      emit("loadFinish", lf.graphModel.nodes);
+    }
+    const state = {
+      startId: "",
+      endId: ""
+    };
+    const flowMethods = {
+      addFlowNodeByEdge(edge, type, data) {
+        const { id, sourceNodeId, targetNodeId } = edge;
+        const outNode = graphModel.getNodeModelById(targetNodeId);
+        const inputNode = graphModel.getNodeModelById(sourceNodeId);
+        graphModel.deleteEdgeById(id);
+        const newNode = flowMethods.addNodeFunc(type, inputNode.x, 0, data);
+        flowMethods.addEdgeFunc(sourceNodeId, newNode.id, "+");
+        flowMethods.addEdgeFunc(newNode.id, outNode.id, "+");
+        flowMethods.rezoomConditionFlowsFunc();
+        return newNode;
+      },
+      createCondiFlowsByEdge(edge) {
+        const { id, sourceNodeId, targetNodeId } = edge;
+        const outNode = graphModel.getNodeModelById(targetNodeId);
+        const inputNode = graphModel.getNodeModelById(sourceNodeId);
+        if (outNode && outNode.type === BM_NODE_CONFIG.PLUSCONDINAME) {
+          message.error("\u540E\u7F6E\u8282\u70B9\u5DF2\u662F\u6761\u4EF6\u8282\u70B9");
+          return;
+        }
+        if (inputNode.properties && inputNode.properties.type && inputNode.properties.type === BM_NODE_CONFIG.CONDITIONNAME) {
+          message.error("\u524D\u7F6E\u8282\u70B9\u5DF2\u4E3A\u6761\u4EF6\u8282\u70B9");
+          return;
+        }
+        graphModel.deleteEdgeById(id);
+        const addCondi = flowMethods.addNodeFunc("bmAddCondiNode", inputNode.x, 0);
+        flowMethods.addEdgeFunc(sourceNodeId, addCondi.id, "+");
+        flowMethods.addCondiFlowFunc(
+          addCondi,
+          "bmFlowNode",
+          {
+            type: "condition",
+            isCustom: false,
+            priority: 99
+          },
+          0,
+          graphModel.getNodeModelById(state.endId)
+        );
+        flowMethods.addCondiFlowFunc(
+          addCondi,
+          "bmFlowNode",
+          {
+            type: "condition",
+            isCustom: true,
+            title: `\u6761\u4EF61`,
+            desc: "\u6761\u4EF6\u5B57\u6BB5",
+            priority: 1
+          },
+          0,
+          outNode
+        );
+        addCondi.properties.outId = outNode.id;
+        flowMethods.rezoomConditionFlowsFunc(addCondi);
+      },
+      deleteFlowNode(id) {
+        const [preNode] = graphModel.getNodeIncomingNode(id);
+        const [nextNode] = graphModel.getNodeOutgoingNode(id);
+        if (nextNode.type === BM_NODE_CONFIG.PLUSCONDINAME && preNode?.properties?.type === "condition") {
+          let queue = [nextNode.id];
+          let deleteIds = [nextNode.id];
+          while (queue.length) {
+            let id2 = queue.shift();
+            let node = graphModel.getNodeModelById(String(id2));
+            if (["auditing", "deal"].includes(String(node?.properties?.type))) {
+              message.error("\u8BF7\u5148\u5220\u9664\u5F53\u524D\u8282\u70B9\u4E0B\u7684\u6761\u4EF6\u8282\u70B9");
+              return;
+            }
+            let outgoings = graphModel.getNodeOutgoingNode(id2);
+            let ids = outgoings.map((n) => n.id);
+            deleteIds.push(...ids);
+            queue.push(...ids);
+          }
+          deleteIds.forEach((id2) => id2 !== state.endId && graphModel.deleteNode(id2));
+          graphModel.deleteNode(id);
+          flowMethods.addEdgeFunc(preNode.id, state.endId, "+");
+          flowMethods.rezoomConditionFlowsFunc();
+          return;
+        }
+        graphModel.deleteNode(id);
+        flowMethods.addEdgeFunc(preNode.id, nextNode.id, "+");
+        flowMethods.rezoomConditionFlowsFunc();
+      },
+      addNewCondiFlowFunc(node, nodeProperties = {}) {
+        const branchs = graphModel.getNodeOutgoingEdge(node.id).length;
+        const condition = flowMethods.addCondiFlowFunc(
+          graphModel.getNodeModelById(node.id),
+          "bmFlowNode",
+          {
+            ...nodeProperties,
+            type: "condition",
+            isCustom: true,
+            title: `\u6761\u4EF6${branchs}`,
+            desc: "\u6761\u4EF6\u5B57\u6BB5",
+            priority: branchs
+          },
+          0,
+          graphModel.getNodeModelById(state.endId)
+        );
+        flowMethods.rezoomConditionFlowsFunc();
+        return condition;
+      },
+      rezoomConditionFlowsFunc() {
+        const queue = [];
+        queue.push(state.startId);
+        const nodeMap = { [state.startId]: 1 };
+        const deltaMap = {
+          [state.startId]: { x: 0, y: 0 }
+        };
+        while (queue.length) {
+          const id = queue.shift();
+          const node = graphModel.getNodeModelById(id);
+          if (node?.properties?.type === "begin") {
+            const [outgoing] = graphModel.getNodeOutgoingNode(id);
+            queue.push(outgoing.id);
+            continue;
+          }
+          if (node.type === BM_NODE_CONFIG.ENDNODENAME) {
+            deltaMap[id] = { x: 0, y: 0 };
+            continue;
+          }
+          const incomings2 = graphModel.getNodeIncomingNode(id);
+          const incoming = incomings2[0];
+          let weight = nodeMap[incoming.id] || nodeMap[id];
+          if (node.type === BM_NODE_CONFIG.PLUSCONDINAME) {
+            const conditions = graphModel.getNodeOutgoingNode(id);
+            const length = conditions.length;
+            conditions.sort((a, b) => {
+              if (+a.properties.priority === 99)
+                return false;
+              if (+b.properties.priority === 99)
+                return true;
+              return a.properties.priority - b.properties.priority;
+            });
+            delete nodeMap[incoming.id];
+            for (const key in nodeMap) {
+              if (nodeMap[key] > weight)
+                nodeMap[key] = nodeMap[key] + length - 1;
+            }
+            conditions.forEach((item) => {
+              nodeMap[item.id] = function(w) {
+                return w;
+              }(weight);
+              weight++;
+            });
+            queue.push(...conditions.map((item) => item.id));
+            deltaMap[id] = {
+              x: 0,
+              y: incoming.y + deltaMap[incoming.id]?.y + incoming.height / 2 + node.height / 2 + BM_NODE_CONFIG.LINELENGTH - node.y
+            };
+          } else {
+            const [outgoing] = graphModel.getNodeOutgoingNode(id);
+            delete nodeMap[incoming.id];
+            nodeMap[node.id] = weight;
+            deltaMap[id] = {
+              x: 0,
+              y: incoming.y + deltaMap[incoming.id]?.y + incoming.height / 2 + node.height / 2 + BM_NODE_CONFIG.LINELENGTH - node.y
+            };
+            queue.push(outgoing.id);
+          }
+        }
+        queue.push(state.endId);
+        while (queue.length) {
+          const id = queue.shift();
+          const node = graphModel.getNodeModelById(id);
+          if (node?.properties?.type === "begin") {
+            continue;
+          }
+          const incomings2 = graphModel.getNodeIncomingNode(id);
+          if (node.type === BM_NODE_CONFIG.ENDNODENAME) {
+            const mid = Math.ceil(incomings2.length / 2);
+            const double = incomings2.length % 2 === 0;
+            incomings2.forEach((n) => {
+              const weight = nodeMap[n.id];
+              if (deltaMap[n.id]) {
+                if (double) {
+                  deltaMap[n.id]["x"] = ((incomings2.length + 1) / 2 - weight) * 2 * BM_NODE_CONFIG.CONDIOFFSET - n.x;
+                } else {
+                  deltaMap[n.id]["x"] = (mid - weight) * 2 * BM_NODE_CONFIG.CONDIOFFSET - n.x;
+                }
+              } else {
+                deltaMap[n.id] = {
+                  x: (mid - weight) * BM_NODE_CONFIG.CONDIOFFSET,
+                  y: node.y
+                };
+              }
+            });
+            queue.push(...incomings2.map((n) => n?.id));
+            continue;
+          }
+          const incoming = incomings2[0];
+          if (node.type === BM_NODE_CONFIG.PLUSCONDINAME) {
+            const outgoings = graphModel.getNodeOutgoingNode(id);
+            const weight = nodeMap[id];
+            for (const key in nodeMap) {
+              if (nodeMap[key] > weight) {
+                nodeMap[key] = nodeMap[key] - outgoings.length;
+              }
+            }
+            let left = Number.MAX_SAFE_INTEGER;
+            let right = Number.MIN_SAFE_INTEGER;
+            outgoings.forEach((n) => {
+              left = Math.min(left, n.x + deltaMap[n.id]?.x);
+              right = Math.max(right, n.x + deltaMap[n.id]?.x);
+            });
+            if (incoming?.properties.type === "begin") {
+              deltaMap[node.id].x = node.x - incoming.y;
+            } else {
+              deltaMap[id].x = left + (right - left) / 2 - node.x;
+            }
+            queue.push(incoming.id);
+            delete nodeMap[id];
+            nodeMap[incoming.id] = weight;
+          } else {
+            const [outgoing] = graphModel.getNodeOutgoingNode(id);
+            const [incoming2] = graphModel.getNodeIncomingNode(id);
+            if (outgoing?.type !== BM_NODE_CONFIG.ENDNODENAME) {
+              deltaMap[id].x = deltaMap[outgoing.id].x + outgoing.x - node.x;
+              nodeMap[id] = nodeMap[outgoing.id];
+              delete nodeMap[outgoing.id];
+              queue.push(incoming2.id);
+            } else {
+              nodeMap[incoming2.id] = nodeMap[incoming2.id] ? Math.min(nodeMap[incoming2.id], nodeMap[id]) : nodeMap[id];
+              deltaMap[incoming2.id].x = node.x + deltaMap[id].x;
+              queue.push(incoming2.id);
+              delete nodeMap[id];
+            }
+          }
+        }
+        const incomings = graphModel.getNodeIncomingNode(
+          state.endId
+        );
+        const end = graphModel.getNodeModelById(state.endId);
+        let max = Number.MIN_SAFE_INTEGER;
+        incomings.forEach((n) => {
+          max = Math.max(
+            max,
+            n.y + deltaMap[n.id]?.y + n.height / 2 + end.height / 2 + BM_NODE_CONFIG.LINELENGTH
+          );
+        });
+        deltaMap[state.endId]["y"] = max - end.y;
+        for (const id in deltaMap) {
+          const { x, y } = deltaMap[id];
+          graphModel.moveNode(id, x, y);
+        }
+        flowMethods.checkEdgePoints(state.startId);
+      },
+      addCondiFlowFunc(node, nodetype, data, offsetMain = 0, outNode = null) {
+        const { id, x, y } = node;
+        const newNode = flowMethods.addNodeFunc(
+          nodetype,
+          x + offsetMain,
+          y + BM_NODE_CONFIG.LINELENGTH + node.height,
+          data
+        );
+        flowMethods.addEdgeFunc(id, newNode.id, void 0);
+        if (outNode) {
+          const node2 = outNode;
+          const shouldDistance = newNode.height + BM_NODE_CONFIG.LINELENGTH + newNode.y;
+          if (shouldDistance > outNode.y)
+            graphModel.moveNodes(
+              [node2.id, ...flowMethods.nodeIdsBFC(node2.id)],
+              0,
+              shouldDistance - node2.y
+            );
+          flowMethods.addEdgeFunc(newNode.id, node2.id, "+");
+        }
+        return newNode;
+      },
+      deleteConditionFlowFunc(node) {
+        const [addCondi] = graphModel.getNodeIncomingNode(node.id);
+        let queue = [node.id];
+        let deleteIds = [node.id];
+        const priority = node?.properties?.priority;
+        while (queue.length) {
+          let id = queue.shift();
+          if (id === state.endId) {
+            continue;
+          }
+          let outgoings2 = graphModel.getNodeOutgoingNode(id);
+          let ids = outgoings2.map((n) => n.id);
+          deleteIds.push(...ids);
+          console.log(deleteIds, ids, outgoings2);
+          queue.push(...ids);
+        }
+        deleteIds.forEach((id) => id !== state.endId && graphModel.deleteNode(id));
+        let outgoings = graphModel.getNodeOutgoingNode(addCondi.id);
+        if (outgoings.length <= 1) {
+          let [pre] = graphModel.getNodeIncomingNode(addCondi.id);
+          outgoings.some((n) => {
+            if (!n?.properties?.isCustom) {
+              let [next] = graphModel.getNodeOutgoingNode(n.id);
+              flowMethods.addEdgeFunc(pre.id, next.id, "+");
+              graphModel.deleteNode(addCondi.id);
+              graphModel.deleteNode(n.id);
+              return true;
+            }
+          });
+        } else {
+          outgoings.forEach((node2) => {
+            if (node2?.properties?.isCustom && +node2?.properties?.priority > +priority) {
+              node2.properties.priority = node2.properties.priority - 1;
+            }
+          });
+        }
+        flowMethods.rezoomConditionFlowsFunc();
+      },
+      addNodeFunc(type, x = 0, y = 0, properties = {}, ...args) {
+        return graphModel.addNode({ type, x, y, properties, ...args });
+      },
+      addEdgeFunc(sourceNodeId, targetNodeId, text, pointsList = [], type, properties) {
+        const params = {
+          sourceNodeId,
+          targetNodeId,
+          type: type || "bmpolyline",
+          pointsList,
+          properties
+        };
+        if (text && isString(text)) {
+          const sourceNode = graphModel.getNodeModelById(sourceNodeId);
+          params["text"] = { value: text, x: sourceNode.x, y: sourceNode.y + 85 };
+        }
+        return graphModel.addEdge({
+          ...params
+        });
+      },
+      nodeIdsBFC(id, out = [], end = "") {
+        if (!id || id === "")
+          return [];
+        const ids = /* @__PURE__ */ new Set();
+        const queue = [id];
+        while (queue.length) {
+          const id2 = queue.shift();
+          const nodes = graphModel.getNodeOutgoingNode(id2);
+          for (const node of nodes) {
+            if (!ids.has(node.id) && node.id !== end) {
+              queue.unshift(node.id);
+              ids.add(node.id);
+            }
+          }
+        }
+        out.forEach((item) => ids.has(item) && ids.delete(item));
+        return Array.from(ids);
+      },
+      checkEdgePoints(startId) {
+        flowMethods.resetEdgePoint(startId, true);
+        flowMethods.resetEdgePoint(startId, false);
+        const nodes = graphModel.getNodeOutgoingNode(startId);
+        if (nodes && nodes.length) {
+          nodes.forEach((node) => {
+            flowMethods.checkEdgePoints(node.id);
+          });
+        }
+      },
+      resetEdgePoint(nodeId, isIncoming = false) {
+        const edges = isIncoming ? graphModel.getNodeIncomingEdge(nodeId) : graphModel.getNodeOutgoingEdge(nodeId);
+        edges.forEach((edge) => {
+          const targetNode = graphModel.getNodeModelById(edge.targetNodeId);
+          const pointsList = flowMethods.getEdgesPoints(
+            graphModel.getNodeModelById(edge.sourceNodeId),
+            targetNode,
+            isIncoming ? "ed" : "bd"
+          );
+          if (pointsList.length) {
+            flowMethods.addEdgeFunc(
+              edge.sourceNodeId,
+              edge.targetNodeId,
+              targetNode?.properties?.type === BM_NODE_CONFIG.CONDITIONNAME ? void 0 : "+",
+              pointsList
+            );
+            graphModel.deleteEdgeById(edge.id);
+          }
+        });
+      },
+      getEdgesPoints(sourceNode, targetNode, direction = "") {
+        let list = [];
+        if (sourceNode.x === targetNode.x || sourceNode.y === targetNode.y)
+          return [
+            { x: sourceNode.x, y: sourceNode.y + sourceNode.height / 2 },
+            { x: targetNode.x, y: targetNode.y - targetNode.height / 2 }
+          ];
+        switch (direction) {
+          case "bd":
+            list = [
+              { x: sourceNode.x + sourceNode.width / 2, y: sourceNode.y },
+              { x: targetNode.x, y: sourceNode.y },
+              { x: targetNode.x, y: targetNode.y - targetNode.height / 2 }
+            ];
+            break;
+          case "ed":
+            list = [
+              { x: sourceNode.x, y: sourceNode.y + sourceNode.height / 2 },
+              {
+                x: sourceNode.x,
+                y: targetNode.y - (targetNode.height + props.lineLength) / 2
+              },
+              {
+                x: targetNode.x,
+                y: targetNode.y - (targetNode.height + props.lineLength) / 2
+              },
+              { x: targetNode.x, y: targetNode.y - targetNode.height / 2 }
+            ];
+            break;
+        }
+        return list;
+      }
+    };
+    function initFlowInstance() {
+      const parent = document.querySelector(
+        ".bm-flow-designer-container"
+      )?.parentElement;
+      const { clientWidth, clientHeight } = parent;
+      const width = clientWidth;
+      const height = clientHeight;
+      const config = {
         container: container.value,
-        grid: true
+        width,
+        height
+      };
+      lf = initBasicFlow(config);
+      graphModel = lf.graphModel;
+      eventCenter = graphModel.eventCenter;
+    }
+    function initFlowEvent() {
+      eventCenter.on("flownode:delete", ({ id }) => {
+        Modal.confirm({
+          content: "\u662F\u5426\u786E\u5B9A\u5220\u9664\u8282\u70B9\uFF1F",
+          cancelText: "\u53D6\u6D88",
+          okText: "\u5220\u9664",
+          centered: true,
+          onOk: () => {
+            flowMethods.deleteFlowNode(id);
+          }
+        });
+      });
+      eventCenter.on("condition:delete", (data) => {
+        Modal.confirm({
+          content: "\u5220\u9664\u6761\u4EF6\u540E\uFF0C\u8BE5\u6761\u4EF6\u4E0B\u6240\u6709\u76F8\u5173\u7684\u8282\u70B9\u8BBE\u7F6E\u5C06\u4E00\u5E76\u60C5\u51B5\uFF0C\u662F\u5426\u786E\u8BA4\u5220\u9664\uFF1F",
+          cancelText: "\u53D6\u6D88",
+          okText: "\u5220\u9664",
+          centered: true,
+          onOk: () => {
+            flowMethods.deleteConditionFlowFunc(data);
+          }
+        });
+      });
+      eventCenter.on("flownode:copynode", (data) => {
+        flowMethods.copyConditionLine(data);
+      });
+      eventCenter.on("flownode:info", () => {
+        console.log("\u8282\u70B9\u4FE1\u606F\u56DE\u8C03");
+      });
+      eventCenter.on("edge:click", ({ data, e, position }) => {
+        eventCenter.emit("edge:contextmenu", { data, e, position });
+      });
+      eventCenter.on("node:click", ({ data }) => {
+        const { type } = data;
+        if (type === "bmAddCondiNode") {
+          flowMethods.addNewCondiFlowFunc(data);
+        }
+      });
+      eventCenter.on("node:add-condi", ({ model }) => {
+        flowMethods.createCondiFlowsByEdge(model);
+      });
+      eventCenter.on("node:add-item", ({ model, nodetype, data }) => {
+        flowMethods.addFlowNodeByEdge(model, nodetype, data);
+      });
+      eventCenter.on("content:click", (model) => {
+        let branchs = void 0;
+        if (model.properties?.type === BM_NODE_CONFIG.CONDITIONNAME) {
+          let [parent] = graphModel.getNodeIncomingNode(model.id);
+          branchs = graphModel.getNodeOutgoingEdge(parent.id).length - 1;
+        }
+        emit("nodeCallback", {
+          id: model.id,
+          properties: model.properties,
+          branchs
+        });
+      });
+      eventCenter.on("edge:add", () => {
+      });
+    }
+    function focusOnZoom(y = void 0) {
+      y = y || BM_NODE_CONFIG.HALFNODEHEIGHT + BM_NODE_CONFIG.LINELENGTH + BM_NODE_CONFIG.ENDRADIUS;
+      lf.focusOn({
+        coordinate: {
+          x: 0,
+          y
+        }
+      });
+    }
+    function initFlowNodes() {
+      const start = flowMethods.addNodeFunc("bmFlowNode", 0, 0, {
+        label: "\u53D1\u8D77\u4EBA",
+        desc: "\u6587\u6848\u63CF\u8FF0",
+        type: "begin"
+      });
+      const end = flowMethods.addNodeFunc(
+        "bmEndNode",
+        0,
+        BM_NODE_CONFIG.HALFNODEHEIGHT + BM_NODE_CONFIG.LINELENGTH + BM_NODE_CONFIG.ENDRADIUS * 2
+      );
+      flowMethods.addEdgeFunc(start.id, end.id, "+");
+      focusOnZoom();
+      state.endId = end.id;
+      state.startId = start.id;
+      emit("loadFinish", lf.graphModel.nodes);
+    }
+    function changePriority(id, priority) {
+      let node = graphModel.getNodeModelById(id);
+      let [parent] = graphModel.getNodeIncomingNode(id);
+      let children = graphModel.getNodeOutgoingNode(parent.id);
+      children.some((item) => {
+        if (+item.properties.priority === +priority) {
+          item.properties.priority = +node.properties.priority || 1;
+          node.properties.priority = +priority;
+          return true;
+        }
       });
-      lf.render();
     }
     onMounted(() => {
-      init();
+      initFlowInstance();
+      initFlowEvent();
+    });
+    expose({
+      loadFlowData,
+      getFlowRawData,
+      initFlowNodes,
+      focusOnZoom,
+      changePriority
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {