@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/dist/src/views/Bpmn.vue.js

@@ -0,0 +1,1196 @@
+import "bpmn-js/dist/assets/diagram-js.css";
+import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
+import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
+import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
+import "bpmn-js/dist/assets/bpmn-js.css";
+import __cjsReq0 from "../components/custom-bpmn/img/xunhuanstart.png.js";
+import __cjsReq1 from "../components/custom-bpmn/img/xunhuanend.png.js";
+import __cjsReq2 from "../components/custom-bpmn/img/xinzeng.png.js";
+import __cjsReq3 from "../components/custom-bpmn/img/fasong.png.js";
+import __cjsReq4 from "../components/custom-bpmn/img/chaxun.png.js";
+import __cjsReq5 from "../components/custom-bpmn/img/jiagong.png.js";
+import __cjsReq6 from "../components/custom-bpmn/img/gengxin.png.js";
+import __cjsReq7 from "../components/custom-bpmn/img/ywgz.png.js";
+import __cjsReq8 from "../components/custom-bpmn/img/shanchu.png.js";
+import __cjsReq9 from "../components/custom-bpmn/img/tongbu.png.js";
+import __cjsReq10 from "../components/custom-bpmn/img/jiekou.png.js";
+import __cjsReq11 from "bpmn-js";
+import __cjsReq12 from "bpmn-js/lib/Modeler";
+import __cjsReq1$1 from "camunda-bpmn-moddle/resources/camunda";
+import customTranslate from "../assets/customTranslate/customTranslate.js";
+import __cjsReq15 from "../components/custom-bpmn/palette.js";
+import { markRaw } from "vue";
+import { SWITCH_MENU_SHOW, ADD_META, ADD_LIST } from "@epxing/core/src/store/actions";
+const __compatRequireEnsure = (_deps, cb) => Promise.resolve().then(() => cb && cb());
+let menuOwner = null;
+let menuShowBeforeHide = true;
+const _sfc_main = {
+  name: "epx-bpmn",
+  style: {
+    margin: "0"
+  },
+  data() {
+    return {
+      // bpmn建模器
+      bpmnModeler: null,
+      container: null,
+      canvas: null,
+      xmlStr: null,
+      processName: "",
+      dialogVisible: false,
+      svg: null,
+      bpmnData: [],
+      processInfo: {},
+      processExtendInfo: {},
+      statusCodeKey: "",
+      businessMeta: [],
+      treeFieldStore: [],
+      isFold: true,
+      nodeArr: [{
+        name: "流程节点",
+        code: "model",
+        groupColor: "#FFA300",
+        children: [{
+          group: "model",
+          className: "epx-icon-wangguan",
+          createType: "bpmn:ExclusiveGateway",
+          type: "bpmn:ExclusiveGateway",
+          name: "网关",
+          handler: "createTask"
+        }, {
+          group: "model",
+          className: "el-icon-video-play",
+          createType: "bpmn:InclusiveGateway",
+          type: "bpmn:InclusiveGateway",
+          name: "循环开始",
+          img: __cjsReq0,
+          typeId: "11",
+          handler: "createTask"
+        }, {
+          group: "model",
+          className: "epx-icon-jieshu",
+          createType: "bpmn:InclusiveGateway",
+          type: "bpmn:InclusiveGateway",
+          name: "循环结束",
+          img: __cjsReq1,
+          typeId: "12",
+          handler: "createTask"
+        }, {
+          group: "model",
+          className: "epx-icon-jieshu",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "循环中断",
+          img: __cjsReq1,
+          typeId: "29",
+          handler: "createTask"
+        }, {
+          group: "model",
+          className: "epx-icon-yonghurenwu",
+          createType: "bpmn:UserTask",
+          type: "bpmn:UserTask",
+          name: "用户任务",
+          handler: "createTask"
+        }, {
+          group: "model",
+          className: "epx-icon-jieshu",
+          createType: "bpmn:EndEvent",
+          type: "bpmn:EndEvent",
+          name: "结束",
+          handler: "createTask"
+        }]
+      }, {
+        name: "大模型能力",
+        code: "ai",
+        groupColor: "#00B389",
+        children: [
+          {
+            group: "ai",
+            className: "el-icon-s-opportunity",
+            createType: "bpmn:ManualTask",
+            type: "bpmn:ManualTask",
+            name: "大模型访问",
+            img: __cjsReq2,
+            typeId: "14",
+            handler: "createTask"
+          },
+          {
+            group: "ai",
+            className: "el-icon-s-opportunity",
+            createType: "bpmn:ManualTask",
+            type: "bpmn:ManualTask",
+            name: "对象识别",
+            img: __cjsReq2,
+            typeId: "32",
+            handler: "createTask"
+          },
+          {
+            group: "ai",
+            className: "el-icon-s-management",
+            createType: "bpmn:ManualTask",
+            type: "bpmn:ManualTask",
+            name: "知识库检索",
+            img: __cjsReq2,
+            typeId: "15",
+            handler: "createTask"
+          },
+          // 外部接口
+          {
+            group: "ai",
+            className: "el-icon-chat-line-round",
+            createType: "bpmn:ManualTask",
+            type: "bpmn:ManualTask",
+            name: "对话输出",
+            img: __cjsReq3,
+            typeId: "16",
+            handler: "createTask"
+          },
+          // 条件生成
+          {
+            group: "ai",
+            className: "el-icon-document-checked",
+            createType: "bpmn:ManualTask",
+            type: "bpmn:ManualTask",
+            name: "条件生成",
+            img: __cjsReq4,
+            typeId: "31",
+            handler: "createTask"
+          }
+        ]
+      }, {
+        name: "数据操作",
+        code: "definetask",
+        groupColor: "#00B389",
+        children: [{
+          group: "definetask",
+          className: "el-icon-s-tools",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "参数加工",
+          img: __cjsReq5,
+          typeId: "17",
+          docId: "C07980E630414E92A9C70DD4B1A056E5",
+          handler: "createTask"
+        }, {
+          group: "definetask",
+          className: "el-icon-search",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "单条查询",
+          img: __cjsReq4,
+          typeId: "19",
+          docId: "C07980E630414E92A9C70DD4B1A056E5",
+          handler: "createTask"
+        }, {
+          group: "definetask",
+          className: "el-icon-search",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "多条查询",
+          img: __cjsReq4,
+          typeId: "20",
+          docId: "9E22963612764220B1721DDD0E034443",
+          handler: "createTask"
+        }, {
+          group: "definetask",
+          className: "el-icon-plus",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "新增记录",
+          img: __cjsReq2,
+          typeId: "1",
+          docId: "DCD5924EE5F34D5DBDC393B5D9289CA8",
+          handler: "createTask"
+        }, {
+          group: "definetask",
+          className: "el-icon-refresh",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "编辑记录",
+          img: __cjsReq6,
+          typeId: "3",
+          docId: "9AB882C8E9C5489FBF151460620925AE",
+          handler: "createTask"
+        }, {
+          group: "definetask",
+          className: "el-icon-document-copy",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "数据复制",
+          img: __cjsReq7,
+          typeId: "21",
+          docId: "44EAE3CF6FA74AB395E8531C5CD80268",
+          handler: "createTask"
+        }, {
+          group: "definetask",
+          className: "el-icon-delete-solid",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "数据删除",
+          img: __cjsReq8,
+          typeId: "2",
+          docId: "B4FB747C452542A88D36531B67DB2BF9",
+          handler: "createTask"
+        }, {
+          group: "definetask",
+          className: "el-icon-upload",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "数据同步",
+          img: __cjsReq9,
+          typeId: "4",
+          docId: "5666183BE58F435391582CC5C8345929",
+          handler: "createTask"
+        }, {
+          group: "definetask",
+          className: "el-icon-upload",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "数据转换",
+          img: __cjsReq9,
+          typeId: "24",
+          docId: "CF50E039192F46E3BA47774C952F1F4C",
+          handler: "createTask"
+        }, {
+          group: "definetask",
+          className: "el-icon-document-copy",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "批量操作",
+          img: __cjsReq7,
+          typeId: "25",
+          docId: "AE8DCB6156094CE387BC32DCB3674C0E",
+          handler: "createTask"
+        }, {
+          group: "definetask",
+          className: "el-icon-search",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "数据统计",
+          img: __cjsReq4,
+          typeId: "27",
+          handler: "createTask"
+        }, {
+          group: "definetask",
+          className: "el-icon-refresh",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "对象转换",
+          img: __cjsReq6,
+          typeId: "28",
+          handler: "createTask"
+        }]
+      }, {
+        name: "审批流程",
+        code: "handlertask",
+        groupColor: "#00B389",
+        children: [{
+          group: "handlertask",
+          className: "el-icon-s-promotion",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "发起流程",
+          img: __cjsReq7,
+          typeId: "10",
+          docId: "AFA250D6C4814FF5B7E6C82227A3BAA6",
+          handler: "createTask"
+        }, {
+          group: "handlertask",
+          className: "epx-icon-pingtaijiekou",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "外部接口",
+          img: __cjsReq10,
+          typeId: "23",
+          docId: "097C269014BD45A8A2A9E28143C40E68",
+          handler: "createTask"
+        }, {
+          group: "handlertask",
+          className: "el-icon-s-order",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "调用业务规则",
+          img: __cjsReq7,
+          typeId: "9",
+          docId: "CE540E8864D24FD0AC9A281F5B02F1CE",
+          handler: "createTask"
+        }, {
+          group: "handlertask",
+          className: "el-icon-s-order",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "流程审批",
+          img: __cjsReq7,
+          typeId: "22",
+          docId: "D5E1A7B3271C4AAFA9C18EAE504F8C0A",
+          handler: "createTask"
+        }]
+      }, {
+        name: "其他节点",
+        code: "other",
+        groupColor: "#00B389",
+        children: [{
+          group: "other",
+          className: "el-icon-s-comment",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "消息发送",
+          img: __cjsReq3,
+          typeId: "7",
+          docId: "6D3FFC1563004FD5B5EF8364032C9970",
+          handler: "createTask"
+        }, {
+          group: "other",
+          className: "epx-icon-tongzhi",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "消息队列",
+          img: __cjsReq3,
+          typeId: "13",
+          docId: "3B97708EAD444FA1ADD0FEF3E58BCF5A",
+          handler: "createTask"
+        }, {
+          group: "other",
+          className: "el-icon-chat-line-round",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "参数输出",
+          img: __cjsReq3,
+          typeId: "18",
+          docId: "9ECDD2D622B24C43965D4C712E8C96BF",
+          handler: "createTask"
+        }, {
+          group: "definetask",
+          className: "el-icon-document-copy",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "登录",
+          img: __cjsReq7,
+          typeId: "26",
+          docId: "DBA580EA3F73464A9C808185C206819D",
+          handler: "createTask"
+        }]
+      }, {
+        name: "兼容节点(不推荐再使用)",
+        code: "jrjd",
+        groupColor: "#00B389",
+        children: [{
+          group: "jrjd",
+          className: "el-icon-search",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "数据查询",
+          img: __cjsReq4,
+          typeId: "6",
+          handler: "createTask"
+        }, {
+          group: "jrjd",
+          className: "el-icon-s-tools",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "数据加工",
+          img: __cjsReq5,
+          typeId: "5",
+          handler: "createTask"
+        }, {
+          group: "handlertask",
+          className: "epx-icon-pingtaijiekou",
+          createType: "bpmn:ManualTask",
+          type: "bpmn:ManualTask",
+          name: "调用接口",
+          img: __cjsReq10,
+          typeId: "8",
+          handler: "createTask"
+        }]
+      }],
+      leftNodeArr: [],
+      nodeToolsArr: [],
+      hoverTimeout: null,
+      nodeElement: null,
+      popoverVisiable: false,
+      setPopoverVisiable: false,
+      leftNodesSearchText: "",
+      nodeToolsSearchTexr: "",
+      editNodeType: {
+        Gateway: [{
+          name: "互斥网关",
+          type: "bpmn:ExclusiveGateway",
+          icon: "el-icon-orange"
+        }, {
+          name: "并行网关",
+          type: "bpmn:ParallelGateway",
+          icon: "el-icon-orange"
+        }, {
+          name: "包容网关",
+          type: "bpmn:InclusiveGateway",
+          icon: "el-icon-orange"
+        }, {
+          name: "事件网关",
+          type: "bpmn:EventBasedGateway",
+          icon: "el-icon-orange"
+        }, {
+          name: "复杂网关",
+          type: "bpmn:ComplexGateway",
+          icon: "el-icon-orange"
+        }]
+        // BoundaryEvent: [
+        //   {
+        //     name: '定时边界事件',
+        //     type: 'bpmn:TimerEventDefinition',
+        //     icon: 'el-icon-orange'
+        //   },
+        //   {
+        //     name: '定时中间捕获',
+        //     type: 'bpmn:IntermediateThrowEvent',
+        //     icon: 'el-icon-orange'
+        //   }
+        // ]
+      },
+      editNodeTypeArr: [],
+      drawer: false,
+      // 逻辑编排测试弹窗
+      testVisible: false,
+      testInParamData: [],
+      // 打开测试前保存流程的 loading
+      testLoading: false
+    };
+  },
+  components: {},
+  computed: {
+    // 是否逻辑编排类型（CATEGORY === '2'）；普通流程类型不显示测试按钮
+    isLogicFlow() {
+      return this.processInfo.CATEGORY === "2";
+    },
+    businessMetaName() {
+      const {
+        businessMetaId
+      } = this.$query;
+      const meta = this.metas && this.metas[businessMetaId];
+      return meta && meta.name || this.processInfo && this.processInfo["ENTITY#"] || "";
+    },
+    pageMetaId() {
+      if (this.dialogVisible === "camunda:assigneePage") {
+        return "FM_PAGE_CONFIG";
+      } else if (this.dialogVisible === "camunda:candidateGroups") {
+        return "FM_ROLE";
+      } else if (this.dialogVisible === "camunda:taskRight") {
+        return "FM_RIGHT";
+      } else {
+        return "FM_USER";
+      }
+    }
+  },
+  methods: {
+    searchLeftNodes(v) {
+      if (v) {
+        const arr = [];
+        this.nodeArr.forEach((item) => {
+          const obj = {
+            ...item
+          };
+          obj.children = item.children.filter((item2) => item2.name.includes(v));
+          arr.push(obj);
+        });
+        this.leftNodeArr = arr.filter((item) => item.children.length > 0);
+      } else {
+        this.leftNodeArr = [...this.nodeArr];
+      }
+    },
+    searchNodesTools(v) {
+      if (v) {
+        const arr = [];
+        this.nodeArr.forEach((item) => {
+          const obj = {
+            ...item
+          };
+          obj.children = item.children.filter((item2) => item2.name.includes(v));
+          arr.push(obj);
+        });
+        this.nodeToolsArr = arr.filter((item) => item.children.length > 0);
+      } else {
+        this.nodeToolsArr = [...this.nodeArr];
+      }
+    },
+    createNewDiagram(bpmnXmlStr) {
+      this.bpmnModeler.importXML(bpmnXmlStr).catch((err) => {
+        console.error(err);
+        this.$message.error(String(err && err.message ? err.message : err));
+      });
+    },
+    initSvg() {
+      const _this = this;
+      const downloadLink = this.$refs.saveDiagram;
+      const downloadSvgLink = this.$refs.saveSvg;
+      this.bpmnModeler.on("commandStack.changed", function() {
+        _this.saveSVG(function(err, svg) {
+          _this.svg = svg;
+          _this.setEncoded(downloadSvgLink, "diagram.svg", err ? null : svg);
+        });
+        _this.saveDiagram(function(err, xml) {
+          _this.setEncoded(downloadLink, "diagram.bpmn", err ? null : xml);
+        });
+      });
+    },
+    // 下载为SVG格式。T35：v8 起 saveSVG 只回 Promise<{svg}> —— 包装内部转接，
+    // 对外保持 done(err, svg) 回调公共面（调用方零改动）。
+    saveSVG(done) {
+      this.bpmnModeler.saveSVG().then(({
+        svg
+      }) => done(null, svg)).catch((err) => done(err));
+    },
+    // 下载 XML。T35：v8 起 saveXML 只回 Promise<{xml}>，同上转接。
+    saveDiagram(done) {
+      this.bpmnModeler.saveXML({
+        format: true
+      }).then(({
+        xml
+      }) => done(null, xml)).catch((err) => done(err));
+    },
+    // 当图发生改变的时候会调用这个函数，这个data就是图的xml
+    setEncoded(link, name, data) {
+      this.xmlStr = data;
+    },
+    changeSelect(v) {
+      this.updateProperties({
+        [this.dialogVisible]: v.id,
+        [this.dialogVisible + "-name"]: v.name
+      });
+      document.getElementsByName(this.dialogVisible + "-name")[0].value = v.name;
+      this.dialogVisible = false;
+    },
+    /**
+     * 更新元素属性
+     * @param { Object } 要更新的属性, 例如 { name: '' }
+     */
+    updateProperties(properties) {
+      const {
+        element
+      } = this;
+      const modeling = this.bpmnModeler.get("modeling");
+      modeling.updateProperties(element, properties);
+    },
+    initBpmn({
+      BpmnViewer,
+      BpmnModeler,
+      camundaModdleDescriptor,
+      customTranslate: customTranslate2,
+      customModule
+    }) {
+      this.container = this.$refs.content;
+      const canvas = this.$refs.canvas;
+      var customTranslateModule = {
+        translate: ["value", customTranslate2]
+      };
+      this.bpmnModeler = markRaw(new BpmnModeler({
+        container: canvas,
+        // 添加控制板
+        // propertiesPanel: {
+        //   parent: '#properties-panel'
+        // },
+        additionalModules: [customTranslateModule, customModule],
+        moddleExtensions: {
+          camunda: camundaModdleDescriptor
+        }
+      }));
+    },
+    // 打开逻辑编排测试弹窗：先保存最新流程，再从 Process 元素读取已定义的全局参数（camunda:inParam）
+    async openTest() {
+      if (!this.bpmnModeler) {
+        this.$message.error("流程尚未初始化完成，请稍后再试");
+        return;
+      }
+      this.testLoading = true;
+      try {
+        await this.saveTestModel();
+      } catch (err) {
+        this.$message.error(err && err.message || "保存流程失败，请重试");
+        return;
+      } finally {
+        this.testLoading = false;
+      }
+      this.testInParamData = this.buildTestInParam();
+      this.testVisible = true;
+    },
+    // 构建测试全局参数：流程已定义参数 + （存在大模型访问节点时）默认补充「用户输入」query 参数
+    buildTestInParam() {
+      const inParam = this.getProcessInParam();
+      if (this.hasAiModelNode() && !inParam.some((item) => item.id === "query")) {
+        inParam.unshift({
+          id: "query",
+          name: "用户输入",
+          type: "1"
+        });
+      }
+      return inParam;
+    },
+    // 流程中是否存在「大模型访问」节点（camunda:formTypeId === '14'）
+    hasAiModelNode() {
+      try {
+        const elementRegistry = this.bpmnModeler.get("elementRegistry");
+        return elementRegistry.filter((el) => {
+          const bo = el.businessObject;
+          return bo && bo.$attrs && bo.$attrs["camunda:formTypeId"] === "14";
+        }).length > 0;
+      } catch (e) {
+        return false;
+      }
+    },
+    // 保存最新流程模型（流程信息 + 流程图 XML），返回 Promise
+    saveTestModel() {
+      this.saveProcessInfo();
+      return new Promise((resolve, reject) => {
+        this.saveDiagram((err, xml) => {
+          if (err) {
+            reject(err);
+            return;
+          }
+          this.xmlStr = xml;
+          this.$http.save({
+            action: "updateModel",
+            entityId: this.$metaId,
+            modelId: this.$query.id,
+            xml
+          }).then(resolve).catch(reject);
+        });
+      });
+    },
+    getProcessElement() {
+      const elementRegistry = this.bpmnModeler.get("elementRegistry");
+      let element = this.processInfo.KEY ? elementRegistry.get(this.processInfo.KEY) : null;
+      if (!element) {
+        element = elementRegistry.filter((item) => item.type === "bpmn:Process")[0];
+      }
+      return element;
+    },
+    getProcessInParam() {
+      try {
+        const element = this.getProcessElement();
+        const $attrs = element && element.businessObject && element.businessObject.$attrs || {};
+        const inParamStr = $attrs["camunda:inParam"];
+        return inParamStr ? JSON.parse(inParamStr) : [];
+      } catch (e) {
+        console.error(e);
+        return [];
+      }
+    },
+    processSetting() {
+      const propertiesPanel = document.getElementById("properties-panel");
+      if (this.processInfo.KEY) {
+        propertiesPanel.style.display = "block";
+        const elementRegistry = this.bpmnModeler.get("elementRegistry");
+        const processElement = elementRegistry.get(this.processInfo.KEY);
+        const selection = this.bpmnModeler.get("selection");
+        selection.select(processElement);
+      }
+    },
+    closePanel() {
+      const propertiesPanel = document.getElementById("properties-panel");
+      propertiesPanel.style.display = "none";
+    },
+    addEventListeners() {
+      const propertiesPanel = document.getElementById("properties-panel");
+      this.bpmnModeler.on("selection.changed", (e) => {
+        this.selectedElements = e.newSelection;
+        this.element = e.newSelection[0];
+        if (this.element) {
+          const {
+            $attrs = {}
+          } = this.element.businessObject || {};
+          for (const key in $attrs) {
+            const timer = setTimeout(() => {
+              if (document.getElementsByName(key)[0]) {
+                document.getElementsByName(key)[0].value = $attrs[key];
+              }
+              clearTimeout(timer);
+            }, 100);
+          }
+        }
+      });
+      this.bpmnModeler.on("element.changed", (e) => {
+        const {
+          element
+        } = e;
+        const {
+          element: currentElement
+        } = this;
+        if (!currentElement) {
+          return;
+        }
+        if (element.id === currentElement.id) {
+          this.element = element;
+          const {
+            $attrs = {}
+          } = this.element.businessObject;
+          const arr = ["candidateUsers", "assignee", "candidateGroups", "camunda:taskRight", "camunda:assigneePage"];
+          arr.forEach((key) => {
+            if (!this.element.businessObject[key] && !$attrs[key]) {
+              const nameKey = key.includes("camunda:") ? key + "-name" : "camunda:" + key + "-name";
+              if (this.element.businessObject.$attrs[nameKey]) ;
+            }
+          });
+          for (const key in this.element.businessObject.$attrs) {
+            const timer = setTimeout(() => {
+              if (document.getElementsByName(key)[0]) {
+                document.getElementsByName(key)[0].value = $attrs[key];
+              }
+              clearTimeout(timer);
+            }, 100);
+          }
+        }
+      });
+      const canvas = this.bpmnModeler.get("canvas");
+      const nodeTools = this.$refs.nodeTools;
+      this.bpmnModeler.on("element.hover", (event2) => {
+        const element = event2.element;
+        const {
+          type
+        } = element;
+        if (type !== "bpmn:Process" && type !== "label" && !this.popoverVisiable) {
+          const elementPosition = canvas.getAbsoluteBBox(element);
+          const padPosition = {
+            x: elementPosition.x + elementPosition.width + 5,
+            y: elementPosition.y
+          };
+          if (type === "bpmn:SequenceFlow") {
+            padPosition.x = elementPosition.x + elementPosition.width / 2;
+            padPosition.y = elementPosition.y + 10;
+          }
+          nodeTools.style.display = "block";
+          nodeTools.style.left = padPosition.x + "px";
+          nodeTools.style.top = padPosition.y + "px";
+          this.nodeElement = markRaw(element);
+        }
+      });
+      this.bpmnModeler.on("element.click", (event2) => {
+        const element = event2.element;
+        const {
+          type
+        } = element;
+        this.nodeElement = markRaw(element);
+        if (type === "bpmn:Process") {
+          propertiesPanel.style.display = "none";
+          this.hiddenNodeTools();
+          this.popoverVisiable = false;
+          this.setPopoverVisiable = false;
+        } else {
+          propertiesPanel.style.display = "block";
+        }
+      });
+      this.bpmnModeler.on("canvas.viewbox.changed", (event2) => {
+        this.hiddenNodeTools();
+      });
+    },
+    hiddenNodeTools() {
+      this.nodeElement = null;
+      const nodeTools = this.$refs.nodeTools;
+      nodeTools.style.display = "none";
+    },
+    editNodeTypeHandler(node) {
+      const element = this.nodeElement;
+      const bpmnReplace = this.bpmnModeler.get("bpmnReplace");
+      bpmnReplace.replaceElement(element, {
+        type: node.type
+      });
+      this.setPopoverVisiable = false;
+      this.hiddenNodeTools();
+    },
+    clickShowsetPopover(e) {
+      const {
+        type
+      } = this.nodeElement;
+      let arr = [];
+      if (type.includes("Gateway")) {
+        arr = this.editNodeType.Gateway;
+      }
+      this.editNodeTypeArr = arr.filter((item) => item.type !== type);
+      this.setPopoverVisiable = false;
+      this.$refs.popoverset.doDestroy(true);
+      this.$nextTick(() => {
+        this.$refs.popoverset.referenceElm = e.target;
+        this.setPopoverVisiable = true;
+      });
+    },
+    clickShowPopover(e) {
+      this.popoverVisiable = false;
+      this.$refs.popover.doDestroy(true);
+      this.$nextTick(() => {
+        this.$refs.popover.referenceElm = e.target;
+        this.popoverVisiable = true;
+      });
+    },
+    addNode(node) {
+      const canvas = this.bpmnModeler.get("canvas");
+      const elementFactory = this.bpmnModeler.get("elementFactory");
+      const modeling = this.bpmnModeler.get("modeling");
+      const moddle = this.bpmnModeler.get("moddle");
+      const element = this.nodeElement;
+      if (node.group === "tools") {
+        if (node.type === "globalConnect") {
+          const connectTool = this.bpmnModeler.get("connect");
+          connectTool.start(event, element);
+        } else {
+          this.createTopTask(null, node);
+        }
+      } else {
+        const createNode = node;
+        const createObj = {
+          type: createNode.type
+        };
+        const bpmnFactory = this.bpmnModeler.get("bpmnFactory");
+        const businessObject = bpmnFactory.create(createNode.createType);
+        if (createNode.createType === "bpmn:UserTask") {
+          const loopCharacteristicsObject = moddle.create("bpmn:MultiInstanceLoopCharacteristics");
+          businessObject.loopCharacteristics = loopCharacteristicsObject;
+          businessObject.$attrs["camunda:spStyle"] = "1";
+          const spOperate = ["agree", "return", "disagree"];
+          businessObject.$attrs["camunda:spOperate"] = JSON.stringify(spOperate);
+        } else {
+          createObj.typeId = createNode.typeId;
+          businessObject.name = createNode.name;
+          businessObject.className = createNode.className || "";
+          businessObject.img = createNode.img;
+          businessObject.$attrs["camunda:formTypeId"] = createNode.typeId;
+        }
+        const x = element.x + element.width + 150;
+        let y = element.y;
+        const length = element.outgoing.length;
+        if (length > 0) {
+          const lastEle = element.outgoing[length - 1].target;
+          y = lastEle.y + 100;
+        }
+        const taskShape = elementFactory.createShape({
+          ...createObj,
+          x,
+          y,
+          businessObject
+        });
+        modeling.createShape(taskShape, {
+          x,
+          y: y + 40
+        }, canvas.getRootElement());
+        const sequenceFlow = elementFactory.createConnection({
+          type: "bpmn:SequenceFlow",
+          source: element,
+          target: taskShape
+          // waypoints: [ // 连线的路径点
+          //   { x: element.x + element.width, y: element.y + element.height / 2 },
+          //   { x: taskShape.x, y: taskShape.y + taskShape.height / 2 }
+          // ]
+        });
+        modeling.createConnection(element, taskShape, sequenceFlow, canvas.getRootElement());
+      }
+      this.popoverVisiable = false;
+      this.hiddenNodeTools();
+    },
+    connectNode() {
+      const element = this.nodeElement;
+      const connectTool = this.bpmnModeler.get("connect");
+      connectTool.start(event, element);
+      this.hiddenNodeTools();
+    },
+    deleteNode() {
+      const modeling = this.bpmnModeler.get("modeling");
+      modeling.removeElements([this.nodeElement]);
+      this.nodeElement = null;
+      const nodeTools = this.$refs.nodeTools;
+      nodeTools.style.display = "none";
+    },
+    getProcessInfo() {
+      this.$http.get({
+        entityId: this.$metaId,
+        id: this.$query.id
+      }).then((data) => {
+        if (data && data.data) {
+          const {
+            META_INFO
+          } = data.data;
+          this.processInfo = {
+            ...data.data
+          };
+          if (this.processInfo.CATEGORY === "2") {
+            this.nodeArr = this.nodeArr.map((item) => {
+              if (item.code === "model" && item.children) {
+                item.children = item.children.filter((child) => child.type !== "bpmn:UserTask");
+              }
+              return item;
+            });
+          } else {
+            this.nodeArr = this.nodeArr.filter((item) => item.code === "model");
+          }
+          this.leftNodeArr = [...this.nodeArr];
+          this.nodeToolsArr = [...this.nodeArr];
+          if (META_INFO) {
+            this.processExtendInfo = JSON.parse(META_INFO);
+          }
+          if (this.processInfo.ENTITY) {
+            this.$store.dispatch({
+              type: ADD_META,
+              metaId: this.processInfo.ENTITY
+            }).then((meta) => {
+              if (this.processInfo.STATE_CODE) {
+                this.$store.dispatch({
+                  type: ADD_LIST,
+                  key: this.processInfo.STATE_CODE,
+                  dataType: "list"
+                });
+                this.statusCodeKey = this.processInfo.STATE_CODE;
+              } else {
+                const attributes = meta.getAttributes();
+                const attribute = Object.values(attributes).find((item) => item.id === this.processInfo.STATUS_FIELD) || {};
+                this.statusCodeKey = attribute.codeKey;
+                if (this.statusCodeKey) {
+                  this.$store.dispatch({
+                    type: ADD_LIST,
+                    key: attribute.codeKey,
+                    dataType: "list"
+                  });
+                }
+              }
+            });
+          }
+        }
+      });
+    },
+    saveProcessInfo() {
+      const params = {};
+      for (const key in this.processInfo) {
+        if (!key.includes("#")) {
+          params[`bean.${key}`] = this.processInfo[key] || "";
+        }
+      }
+      const metaInfo = {};
+      for (const key in this.processExtendInfo) {
+        if (!key.includes("#") || key === "auditorFields#") {
+          metaInfo[key] = this.processExtendInfo[key] || "";
+        }
+      }
+      params["bean.META_INFO"] = JSON.stringify(metaInfo);
+      this.$http.update({
+        entityId: this.$metaId,
+        ...params
+      });
+    },
+    getProcess() {
+      this.$http.$request({
+        action: "getModelEditorXml",
+        entityId: this.$metaId,
+        modelId: this.$query.id
+      }).then((data) => {
+        this.xmlStr = data.xml;
+        this.createNewDiagram(data.xml);
+      }).catch(() => {
+        this.createNewDiagram(`<?xml version="1.0" encoding="UTF-8"?>
+            <bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="Definitions_17fimrd" targetNamespace="http://bpmn.io/schema/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="7.3.0">
+              <bpmn:process id="Process_0ln6l2x" isExecutable="true">
+                <bpmn:startEvent id="StartEvent_019dxqo" />
+              </bpmn:process>
+              <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+                <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_0ln6l2x">
+                  <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_019dxqo">
+                    <dc:Bounds x="156" y="81" width="36" height="36" />
+                  </bpmndi:BPMNShape>
+                </bpmndi:BPMNPlane>
+              </bpmndi:BPMNDiagram>
+            </bpmn:definitions>
+            `);
+        this.$message.error("初始化失败");
+      });
+    },
+    publishProcess() {
+      return this.$http.save({
+        action: "publish",
+        entityId: this.$metaId,
+        id: this.processInfo.ID
+      }).catch((err) => {
+        this.$message.error(err.message);
+      });
+    },
+    submit(publish) {
+      this.saveProcessInfo();
+      this.$http.save({
+        action: "updateModel",
+        entityId: this.$metaId,
+        modelId: this.$query.id,
+        xml: this.xmlStr
+      }).then(async () => {
+        if (publish) await this.publishProcess();
+        this.$message.success(publish ? "保存并发布成功" : "保存成功");
+        this.backPage({
+          reload: true
+        });
+      }).catch((err) => {
+        this.$message.error(err.message);
+      });
+    },
+    async getBusinessMeta() {
+      const {
+        businessMetaId
+      } = this.$query;
+      this.$store.dispatch({
+        type: "ADD_META_VIEW_FIELDS",
+        metaId: businessMetaId
+      }).then((data) => {
+        this.treeFieldStore = data;
+      });
+      let busmeta = null;
+      if (this.metas[businessMetaId]) {
+        busmeta = this.metas[businessMetaId];
+      } else {
+        await this.$store.dispatch({
+          type: "ADD_META",
+          metaId: businessMetaId
+        }).then((meta) => {
+          busmeta = meta;
+        });
+      }
+      this.$FieldFactory.createFields({
+        meta: busmeta,
+        metaId: businessMetaId
+      }).then((data) => {
+        this.businessMeta = [...data];
+      });
+    },
+    handleNodeClick(event2, node) {
+      this[node.handler](event2, node);
+    },
+    createTask(event2, node) {
+      const createNode = node;
+      const createObj = {
+        type: createNode.type
+      };
+      const elementFactory = this.bpmnModeler.get("elementFactory");
+      const bpmnFactory = this.bpmnModeler.get("bpmnFactory");
+      const moddle = this.bpmnModeler.get("moddle");
+      const businessObject = bpmnFactory.create(createNode.createType);
+      const create = this.bpmnModeler.get("create");
+      if (createNode.createType === "bpmn:UserTask") {
+        const loopCharacteristicsObject = moddle.create("bpmn:MultiInstanceLoopCharacteristics");
+        businessObject.loopCharacteristics = loopCharacteristicsObject;
+        businessObject.$attrs["camunda:spStyle"] = "1";
+        const spOperate = ["agree", "return", "disagree"];
+        businessObject.$attrs["camunda:spOperate"] = JSON.stringify(spOperate);
+      } else {
+        createObj.typeId = createNode.typeId;
+        businessObject.name = createNode.name;
+        businessObject.className = createNode.className || "";
+        businessObject.img = createNode.img;
+        businessObject.$attrs["camunda:formTypeId"] = createNode.typeId;
+      }
+      const taskShape = elementFactory.createShape({
+        ...createObj,
+        businessObject
+      });
+      create.start(event2, taskShape);
+    },
+    createTopTask(event2, node) {
+      const {
+        type
+      } = node;
+      const handTool = this.bpmnModeler.get(type);
+      if (type === "handTool") {
+        handTool.activateHand(event2);
+      } else if (type === "lassoTool" || type === "spaceTool") {
+        handTool.activateSelection(event2);
+      } else {
+        handTool.start(event2);
+      }
+    },
+    platteFoldHandler() {
+      this.popoverVisiable = false;
+      this.setPopoverVisiable = false;
+      this.hiddenNodeTools();
+      this.isFold = !this.isFold;
+      const iconEle = this.$refs.platteFold;
+      iconEle.style.left = this.isFold ? 0 : "220px";
+      const leftTools = this.$refs.leftTools;
+      leftTools.style.left = this.isFold ? "-220px" : 0;
+    },
+    adjustPalette() {
+      try {
+        const canvas = this.$refs.canvas;
+        const paletteService = this.bpmnModeler.get("palette");
+        if (paletteService && !paletteService.isOpen()) paletteService.open();
+        const djsPalette = canvas.querySelector(".djs-palette");
+        const djsPalStyle = {
+          width: "120px",
+          padding: "5px 5px 20px",
+          background: "#fafafa",
+          left: "-120px",
+          borderRadius: "2px",
+          position: "absolute",
+          top: "20px",
+          // bottom: '20px',
+          overflow: "auto",
+          maxHeight: "calc(100% - 40px)"
+        };
+        for (var key in djsPalStyle) {
+          djsPalette.style[key] = djsPalStyle[key];
+        }
+        const palette = djsPalette.querySelector(".djs-palette-entries") || djsPalette.children[0];
+        const allGroups = palette.children;
+        for (var gKey in allGroups) {
+          const group = allGroups[gKey];
+          for (var cKey in group.children) {
+            const control = group.children[cKey];
+            if (control.className && (control.className === "entry bpmn-icon-data-store" || control.className === "entry bpmn-icon-subprocess-expanded" || control.className === "entry bpmn-icon-group" || control.className === "entry bpmn-icon-participant" || control.className === "entry bpmn-icon-data-object")) {
+              continue;
+            }
+            const controlStyle = {
+              display: "flex",
+              justifyContent: "flex-start",
+              alignItems: "center",
+              width: "100%",
+              paddingTop: "5px",
+              paddingBottom: "5px"
+            };
+            if (control.className && control.dataset && control.className.indexOf("entry") !== -1) {
+              control.innerHTML = `<div style='font-size: 10px;margin-left:8px'><p style='line-height: 10px;padding-top:5px'>${control.title}</p></div>`;
+              for (var csKey in controlStyle) {
+                control.style[csKey] = controlStyle[csKey];
+              }
+            }
+          }
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    }
+  },
+  created() {
+    if (!menuOwner) menuShowBeforeHide = this.$store.state.config.showMenu !== false;
+    menuOwner = this;
+    this.$store.commit(SWITCH_MENU_SHOW, false);
+    this.getProcessInfo();
+    this.getBusinessMeta();
+  },
+  mounted() {
+    __compatRequireEnsure([], () => {
+      const BpmnViewer = __cjsReq11;
+      const BpmnModeler = __cjsReq12;
+      const camundaModdleDescriptor = __cjsReq1$1;
+      const customTranslate$1 = customTranslate;
+      const customModule = __cjsReq15;
+      this.initBpmn({
+        BpmnViewer,
+        BpmnModeler,
+        camundaModdleDescriptor,
+        customTranslate: customTranslate$1,
+        customModule
+      });
+      this.addEventListeners();
+      this.initSvg();
+      this.adjustPalette();
+      this.getProcess();
+    });
+  },
+  beforeUnmount() {
+    if (menuOwner !== this) return;
+    menuOwner = null;
+    if (this.$store.state.config.showMenu === false) {
+      this.$store.commit(SWITCH_MENU_SHOW, menuShowBeforeHide);
+    }
+  }
+};
+export {
+  _sfc_main as default
+};