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

package/src/views/Bpmn.vue

@@ -0,0 +1,1713 @@
+<template>
+  <div class="container">
+    <!-- 导航 -->
+    <div class="report-header">
+      <div class="report-title">
+        <i class="report-back el-icon-arrow-left" @click="backPage"></i>
+        <span class="report-name">
+          <span>{{processInfo.NAME}}</span>
+        </span>
+      </div>
+      <div class="report-operate">
+        <el-button v-if="isLogicFlow" size="default" :loading="testLoading" @click="openTest"><i class="el-icon-cpu"></i> 测试</el-button>
+        <el-button size="default" @click="processSetting"><i class="el-icon-setting"></i> 流程设置</el-button>
+        <el-button size="default" type="primary" @click="submit(false)">保存</el-button>
+        <el-button size="default" type="primary" @click="submit(true)">保存并发布</el-button>
+      </div>
+    </div>
+    <div class="containers" ref="content">
+      <div class="left-tools" ref="leftTools">
+        <div class="tools-search-con">
+          <el-input v-model="leftNodesSearchText" @change="searchLeftNodes" clearable placeholder="请输入" suffix-icon="el-icon-search"></el-input>
+        </div>
+        <div v-for="group in leftNodeArr" :key="group.code">
+          <div class="group-name">{{group.name}}</div>
+          <div @click="handleNodeClick($event,node)" class="left-tools-item" v-for="(node,index) in group.children" :key="index">
+            <div class="left-tools-icon" :style="{background:group.groupColor}"><i :class="node.className"></i></div>
+            <div>{{node.name}}</div>
+          </div>
+        </div>
+      </div>
+      <div class="node-tools" ref="nodeTools">
+        <el-popover
+          title=""
+          width="400"
+          ref="popover"
+          trigger="manual"
+          placement="right-start"
+          v-model:visible="popoverVisiable"
+          >
+          <div class="node-tools-content">
+            <div class="tools-search-con">
+              <el-input v-model="nodeToolsSearchTexr" @change="searchNodesTools" clearable placeholder="请输入" suffix-icon="el-icon-search"></el-input>
+            </div>
+            <div v-for="group in nodeToolsArr" :key="group.code">
+              <div class="group-name">{{group.name}}</div>
+              <div class="group-children">
+                <div @click="addNode(node)" class="node-tools-item left-tools-item" v-for="(node,index) in group.children" :key="index">
+                  <div class="left-tools-icon" :style="{background:group.groupColor}"><i :class="node.className"></i></div>
+                  <div>{{node.name}}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-popover>
+        <el-popover
+          title=""
+          width="100"
+          ref="popoverset"
+          trigger="manual"
+          placement="right-start"
+          v-model:visible="setPopoverVisiable"
+          >
+          <div class="set-type-content">
+            <div @click="editNodeTypeHandler(node)" class="left-tools-item" v-for="(node,index) in editNodeTypeArr" :key="index">
+              <div class="left-tools-icon" ><i :class="node.icon"></i></div>
+              <div>{{node.name}}</div>
+            </div>
+          </div>
+        </el-popover>
+        <div class="node-tools-add-icon" v-popover:popoverset v-if="nodeElement&&nodeElement.type.includes('Gateway')" @click="clickShowsetPopover"><i class="el-icon-s-tools"></i></div>
+        <div class="node-tools-add-icon" v-popover:popover v-if="nodeElement&&nodeElement.type !== 'bpmn:SequenceFlow'" @click="clickShowPopover"><i class="el-icon-circle-plus"></i></div>
+        <div class="node-tools-add-icon" @click="connectNode" v-if="nodeElement&&nodeElement.type !== 'bpmn:SequenceFlow'"><i class="epx-icon-lianjie1"></i></div>
+        <div class="node-tools-delete-icon" @click="deleteNode" v-if="nodeElement&&nodeElement.type !== 'bpmn:StartEvent'"><i class="el-icon-delete-solid"></i></div>
+      </div>
+      <div class="palette-fold" @click="platteFoldHandler" ref="platteFold"><i :class="{'el-icon-s-unfold':isFold,'el-icon-s-fold':!isFold}"></i></div>
+      <div class="canvas" ref="canvas"></div>
+      <!-- <el-drawer
+        :visible.sync="drawer"
+        :with-header="false"
+        size="500px"
+        > -->
+        <div id="properties-panel">
+          <epx-properties-view v-if="bpmnModeler" class="epx-properties-panel"  ref="propertiesPanel" :modeler="bpmnModeler" :businessMetaId="$query.businessMetaId" :businessMeta="businessMeta" :treeFieldStore="treeFieldStore"
+            :nodeArr="nodeArr"
+            :statusCodeKey="statusCodeKey" :processInfo="processInfo" @update:processInfo="(v) => (processInfo = { ...processInfo, ...v })"
+            :processExtendInfo="processExtendInfo" @closePanel="closePanel" @update:processExtendInfo="(v) => (processExtendInfo = { ...processExtendInfo, ...v })"
+            ></epx-properties-view>
+        </div>
+      <!-- </el-drawer> -->
+    </div>
+    <!-- <div v-html="svg"></div> -->
+    <el-dialog class="dialog__only__content" v-model="dialogVisible" :width="pageMetaId === 'FM_RIGHT' ? '50%' : '70%'">
+      <epx-page v-if="dialogVisible" :class="pageMetaId === 'FM_RIGHT' ? 'tree_find' : 'find'" :flag="pageMetaId === 'FM_RIGHT' ? 'v_tree_find' : 'v_find'" :fieldConfig="{ codeKey: pageMetaId }"
+        :metaId="pageMetaId" :component="
+          pageMetaId === 'FM_RIGHT' ? 'entity-tree-find' : 'entity-find'
+        " :change="changeSelect" />
+    </el-dialog>
+    <!-- 逻辑编排测试 -->
+    <epx-bpmn-test-dialog
+      v-model:visible="testVisible"
+      :process-info="processInfo"
+      :in-param-data="testInParamData"
+      :business-meta="businessMeta"
+      :business-meta-id="$query.businessMetaId"
+      :business-meta-name="businessMetaName"
+      :tree-field-store="treeFieldStore"
+    ></epx-bpmn-test-dialog>
+  </div>
+</template>
+
+<script>
+// 引入相关的依赖
+import { markRaw } from 'vue'
+import { SWITCH_MENU_SHOW, ADD_LIST, ADD_META } from '@epxing/core/src/store/actions'
+
+// 「谁最后一个把菜单藏起来，谁才有资格还原」——模块级所有权令牌。
+//
+// 为什么需要它：菜单显隐是**全局**状态，而「卸载」不等于「用户离开了本页」。多标签场景下
+// 关掉一个后台标签、或标签数超过 MOUNTED_TAB_MAX 被 LRU 淘汰内容，都会走 beforeUnmount；
+// 那时若无条件还原，会把用户当前正在看的那个页面的菜单一起弹出来。
+//
+// ⚠️ 上一版用的判据是「本页此刻在 DOM 里可见」（$el.getClientRects().length > 0），
+// 那个判据**在正常的「点返回」路径上永远为假**，还原因此成了死代码——用户实测：
+// 系统配置中心 → 进流程 → 返回，左侧菜单再也不出来。原因见 RouterView.destoryPage 的注释：
+// 被关掉的那一页要等这次渲染刷完、**被 KeepAlive deactivate 进缓存**之后才真卸载，
+// 而 deactivate 会把它的 DOM 移进 KeepAlive 的游离存储容器 —— 游离元素没有任何 client rect。
+// 于是「后台标签」和「用户刚离开的当前页」在这个判据下长得一模一样，分不开。
+//
+// 所有权令牌不依赖 DOM/布局，两种情形天然分得开：后台标签被淘汰时令牌早已易主，直接放弃还原。
+let menuOwner = null
+// 第一个隐藏者进来**之前**的菜单显隐。只在无人持有时采集：否则第二个流程页会采到
+// 已被前一个改成的 false，等它离开时又把 false 还原回去，菜单依旧不出来。
+let menuShowBeforeHide = true
+
+export default {
+  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: require('../components/custom-bpmn/img/xunhuanstart.png'),
+              typeId: '11',
+              handler: 'createTask'
+            },
+            {
+              group: 'model',
+              className: 'epx-icon-jieshu',
+              createType: 'bpmn:InclusiveGateway',
+              type: 'bpmn:InclusiveGateway',
+              name: '循环结束',
+              img: require('../components/custom-bpmn/img/xunhuanend.png'),
+              typeId: '12',
+              handler: 'createTask'
+            },
+            {
+              group: 'model',
+              className: 'epx-icon-jieshu',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '循环中断',
+              img: require('../components/custom-bpmn/img/xunhuanend.png'),
+              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: require('../components/custom-bpmn/img/xinzeng.png'),
+              typeId: '14',
+              handler: 'createTask'
+            },
+            {
+              group: 'ai',
+              className: 'el-icon-s-opportunity',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '对象识别',
+              img: require('../components/custom-bpmn/img/xinzeng.png'),
+              typeId: '32',
+              handler: 'createTask'
+            },
+            {
+              group: 'ai',
+              className: 'el-icon-s-management',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '知识库检索',
+              img: require('../components/custom-bpmn/img/xinzeng.png'),
+              typeId: '15',
+              handler: 'createTask'
+            },
+            // 外部接口
+            {
+              group: 'ai',
+              className: 'el-icon-chat-line-round',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '对话输出',
+              img: require('../components/custom-bpmn/img/fasong.png'),
+              typeId: '16',
+              handler: 'createTask'
+            },
+            // 条件生成
+            {
+              group: 'ai',
+              className: 'el-icon-document-checked',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '条件生成',
+              img: require('../components/custom-bpmn/img/chaxun.png'),
+              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: require('../components/custom-bpmn/img/jiagong.png'),
+              typeId: '17',
+              docId: 'C07980E630414E92A9C70DD4B1A056E5',
+              handler: 'createTask'
+            },
+            {
+              group: 'definetask',
+              className: 'el-icon-search',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '单条查询',
+              img: require('../components/custom-bpmn/img/chaxun.png'),
+              typeId: '19',
+              docId: 'C07980E630414E92A9C70DD4B1A056E5',
+              handler: 'createTask'
+            },
+            {
+              group: 'definetask',
+              className: 'el-icon-search',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '多条查询',
+              img: require('../components/custom-bpmn/img/chaxun.png'),
+              typeId: '20',
+              docId: '9E22963612764220B1721DDD0E034443',
+              handler: 'createTask'
+            },
+            {
+              group: 'definetask',
+              className: 'el-icon-plus',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '新增记录',
+              img: require('../components/custom-bpmn/img/xinzeng.png'),
+              typeId: '1',
+              docId: 'DCD5924EE5F34D5DBDC393B5D9289CA8',
+              handler: 'createTask'
+            },
+            {
+              group: 'definetask',
+              className: 'el-icon-refresh',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '编辑记录',
+              img: require('../components/custom-bpmn/img/gengxin.png'),
+              typeId: '3',
+              docId: '9AB882C8E9C5489FBF151460620925AE',
+              handler: 'createTask'
+            },
+            {
+              group: 'definetask',
+              className: 'el-icon-document-copy',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '数据复制',
+              img: require('../components/custom-bpmn/img/ywgz.png'),
+              typeId: '21',
+              docId: '44EAE3CF6FA74AB395E8531C5CD80268',
+              handler: 'createTask'
+            },
+            {
+              group: 'definetask',
+              className: 'el-icon-delete-solid',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '数据删除',
+              img: require('../components/custom-bpmn/img/shanchu.png'),
+              typeId: '2',
+              docId: 'B4FB747C452542A88D36531B67DB2BF9',
+              handler: 'createTask'
+            },
+            {
+              group: 'definetask',
+              className: 'el-icon-upload',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '数据同步',
+              img: require('../components/custom-bpmn/img/tongbu.png'),
+              typeId: '4',
+              docId: '5666183BE58F435391582CC5C8345929',
+              handler: 'createTask'
+            },
+            {
+              group: 'definetask',
+              className: 'el-icon-upload',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '数据转换',
+              img: require('../components/custom-bpmn/img/tongbu.png'),
+              typeId: '24',
+              docId: 'CF50E039192F46E3BA47774C952F1F4C',
+              handler: 'createTask'
+            },
+            {
+              group: 'definetask',
+              className: 'el-icon-document-copy',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '批量操作',
+              img: require('../components/custom-bpmn/img/ywgz.png'),
+              typeId: '25',
+              docId: 'AE8DCB6156094CE387BC32DCB3674C0E',
+              handler: 'createTask'
+            },
+            {
+              group: 'definetask',
+              className: 'el-icon-search',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '数据统计',
+              img: require('../components/custom-bpmn/img/chaxun.png'),
+              typeId: '27',
+              handler: 'createTask'
+            },
+            {
+              group: 'definetask',
+              className: 'el-icon-refresh',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '对象转换',
+              img: require('../components/custom-bpmn/img/gengxin.png'),
+              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: require('../components/custom-bpmn/img/ywgz.png'),
+              typeId: '10',
+              docId: 'AFA250D6C4814FF5B7E6C82227A3BAA6',
+              handler: 'createTask'
+            },
+            {
+              group: 'handlertask',
+              className: 'epx-icon-pingtaijiekou',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '外部接口',
+              img: require('../components/custom-bpmn/img/jiekou.png'),
+              typeId: '23',
+              docId: '097C269014BD45A8A2A9E28143C40E68',
+              handler: 'createTask'
+            },
+            {
+              group: 'handlertask',
+              className: 'el-icon-s-order',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '调用业务规则',
+              img: require('../components/custom-bpmn/img/ywgz.png'),
+              typeId: '9',
+              docId: 'CE540E8864D24FD0AC9A281F5B02F1CE',
+              handler: 'createTask'
+            },
+            {
+              group: 'handlertask',
+              className: 'el-icon-s-order',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '流程审批',
+              img: require('../components/custom-bpmn/img/ywgz.png'),
+              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: require('../components/custom-bpmn/img/fasong.png'),
+              typeId: '7',
+              docId: '6D3FFC1563004FD5B5EF8364032C9970',
+              handler: 'createTask'
+            },
+            {
+              group: 'other',
+              className: 'epx-icon-tongzhi',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '消息队列',
+              img: require('../components/custom-bpmn/img/fasong.png'),
+              typeId: '13',
+              docId: '3B97708EAD444FA1ADD0FEF3E58BCF5A',
+              handler: 'createTask'
+            },
+            {
+              group: 'other',
+              className: 'el-icon-chat-line-round',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '参数输出',
+              img: require('../components/custom-bpmn/img/fasong.png'),
+              typeId: '18',
+              docId: '9ECDD2D622B24C43965D4C712E8C96BF',
+              handler: 'createTask'
+            },
+            {
+              group: 'definetask',
+              className: 'el-icon-document-copy',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '登录',
+              img: require('../components/custom-bpmn/img/ywgz.png'),
+              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: require('../components/custom-bpmn/img/chaxun.png'),
+              typeId: '6',
+              handler: 'createTask'
+            },
+            {
+              group: 'jrjd',
+              className: 'el-icon-s-tools',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '数据加工',
+              img: require('../components/custom-bpmn/img/jiagong.png'),
+              typeId: '5',
+              handler: 'createTask'
+            },
+            {
+              group: 'handlertask',
+              className: 'epx-icon-pingtaijiekou',
+              createType: 'bpmn:ManualTask',
+              type: 'bpmn:ManualTask',
+              name: '调用接口',
+              img: require('../components/custom-bpmn/img/jiekou.png'),
+              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(item => item.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(item => item.name.includes(v))
+          arr.push(obj)
+        })
+        this.nodeToolsArr = arr.filter(item => item.children.length > 0)
+      } else {
+        this.nodeToolsArr = [...this.nodeArr]
+      }
+    },
+    createNewDiagram (bpmnXmlStr) {
+      // 将字符串转换成图显示出来。T35 bpmn-js 6→18：importXML 的回调形态在 v8 移除，只回 Promise。
+      // （原回调里还有个笔误 this.$messgae + 普通 function 丢 this —— 报错分支其实从没弹过消息）
+      this.bpmnModeler.importXML(bpmnXmlStr).catch(err => {
+        console.error(err)
+        this.$message.error(String(err && err.message ? err.message : err))
+      })
+    },
+    initSvg () {
+      const _this = this
+      // 获取a标签dom节点
+      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) {
+      // 把xml转换为URI，下载要用到的
+      // const encodedData = encodeURIComponent(data)
+      this.xmlStr = data
+      // if (data) {
+      //   link.className = 'active'
+      //   link.href = 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData
+      //   link.download = name
+      // }
+    },
+    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, customModule }) {
+      // 获取到属性ref为“content”的dom节点
+      this.container = this.$refs.content
+      // 获取到属性ref为“canvas”的dom节点
+      const canvas = this.$refs.canvas
+      var customTranslateModule = {
+        translate: ['value', customTranslate]
+      }
+      // 建模，官方文档这里讲的很详细
+      // markRaw：Vue3 深度 reactive 会连同 elementRegistry 的图元一起包 Proxy，
+      // 图元的 labels 等只读不可配置属性触发 Proxy 不变量 TypeError（Vue2 defineProperty 会静默跳过）
+      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 () {
+      // 获取属性面板的 DOM 元素
+      const propertiesPanel = document.getElementById('properties-panel')
+      // 隐藏属性面板
+      propertiesPanel.style.display = 'none'
+    },
+    addEventListeners () {
+      // 获取属性面板的 DOM 元素
+      const propertiesPanel = document.getElementById('properties-panel')
+
+      // T35：原此处有 #js-properties-panel 的点击监听 —— 那是 fork 属性面板的 DOM id，
+      // 本文件模板从来没有该元素（panelElem 恒 null，监听从未绑上）。随 fork 摘除一并删。
+      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
+        // propertiesPanel.style.display = 'block'
+        const { element: currentElement } = this
+        if (!currentElement) {
+          return
+        }
+        // update panel, if currently selected element changed
+        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]) {
+                // this.updateProperties({ [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', (event) => {
+        const element = event.element
+        const { type } = element
+        // bpmn:SequenceFlow 连线
+        // if (type === 'bpmn:StartEvent' || type === 'bpmn:SequenceFlow') {
+        if (type !== 'bpmn:Process' && type !== 'label' && !this.popoverVisiable) {
+          // clearTimeout(this.hoverTimeout)
+
+          // this.hoverTimeout = setTimeout(() => {
+          const elementPosition = canvas.getAbsoluteBBox(element)
+          // 显示 Context Pad
+          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', (event) => {
+        const element = event.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.click', (event) => {
+      // })
+      this.bpmnModeler.on('canvas.viewbox.changed', (event) => {
+        this.hiddenNodeTools()
+      })
+      // this.bpmnModeler.on('shape.move.end', (event) => {
+      //   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.$nextTick(() => {
+      //   this.popoverVisiable = true
+      // })
+      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') {
+          // 获取 connectTool 模块
+          const connectTool = this.bpmnModeler.get('connect')
+          // 激活连线工具
+          connectTool.start(event, element) // sourceElement 是连线的起点元素
+        } 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)
+
+          // if (createNode.type === 'bpmn:ServiceTask') {
+          //   businessObject.$attrs['camunda:beanName'] = 'BEAN'
+          // }
+        } 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
+      // 获取 connectTool 模块
+      const connectTool = this.bpmnModeler.get('connect')
+      // 激活连线工具
+      connectTool.start(event, element)
+      this.hiddenNodeTools()
+    },
+    deleteNode () {
+      // 获取 modeling 模块
+      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 => {
+          // 获取到xml文件初始化bpmn
+          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) {
+      // 提交xml文件
+      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 (event, node) {
+      this[node.handler](event, node)
+    },
+    createTask (event, node) {
+      // const createNode = this.jiedina[type]
+      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)
+        // if (createNode.type === 'bpmn:ServiceTask') {
+        //   businessObject.$attrs['camunda:beanName'] = 'BEAN'
+        // }
+      } 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(event, taskShape)
+    },
+    createTopTask (event, node) {
+      const { type } = node
+      // 获取所需模块
+      const handTool = this.bpmnModeler.get(type)
+      if (type === 'handTool') {
+        // // 激活抓手工具
+        handTool.activateHand(event)
+      } else if (type === 'lassoTool' || type === 'spaceTool') {
+        // 激活套索工具
+        handTool.activateSelection(event)
+      } else {
+        // connectTool.start(event, sourceElement); // sourceElement 是连线的起点元素
+        // 激活连线工具
+        handTool.start(event)
+        // 切换到连线工具
+      }
+
+      // const toolManager = this.bpmnModeler.get('toolManager')
+      // toolManager.activateTool('connect')
+
+      // 使用 toolManager 切换工具
+      // toolManager._active('hand') // 切换到抓手工具
+      // toolManager.activateTool('lasso') // 切换到套索工具
+    },
+    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
+      // const canvas = this.$refs.canvas
+      // const djsPalette = canvas.children[0].children[1].children[4]
+      // djsPalette.style.left = this.isFold ? '-120px' : '10px'
+    },
+    adjustPalette () {
+      // 调整左侧工具栏排版。
+      // ⚠️ 历史遗留：本平台的样式里 .djs-palette.open { display:none } —— **原生 palette 是隐藏的**，
+      // 添加节点走自研「节点工具箱」（.node-tools）。本函数在给隐藏元素排版，无可见效果；
+      // 保留是防某些配置态显示原生 palette（改动已适配 diagram-js 15 的 DOM）。
+      try {
+        // 获取 bpmn 设计器实例
+        const canvas = this.$refs.canvas
+        // T35 bpmn-js 6→18：djs 容器的 DOM 层级变了，硬编码下标走位（children[0][1][4]）
+        // 必然取错节点（原代码靠外层 try/catch 静默兜底）。改按类名取。
+        // diagram-js 15 的 palette 空间不足会自动收起为 toggle —— 强制展开（服务 API）。
+        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]
+        }
+        // diagram-js 15：.djs-palette 的第一个子元素是 toggle 按钮，条目在 .djs-palette-entries
+        const palette = djsPalette.querySelector('.djs-palette-entries') || djsPalette.children[0]
+        const allGroups = palette.children
+        // allGroups[0].style.display = 'none'
+        // 修改控件样式
+        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 () {
+    // 取得菜单所有权：只有最后一个隐藏者有资格在卸载时还原（见文件顶部 menuOwner 注释）。
+    // 隐藏前的值只在无人持有时采集，避免第二个流程页采到已被改成的 false。
+    if (!menuOwner) menuShowBeforeHide = this.$store.state.config.showMenu !== false
+    menuOwner = this
+    this.$store.commit(SWITCH_MENU_SHOW, false)
+    this.getProcessInfo()
+    this.getBusinessMeta()
+  },
+  mounted () {
+    require.ensure([], () => {
+      const BpmnViewer = require('bpmn-js').default
+      const BpmnModeler = require('bpmn-js/lib/Modeler').default
+      const camundaModdleDescriptor = require('camunda-bpmn-moddle/resources/camunda')
+      const customTranslate = require('@/assets/customTranslate/customTranslate').default
+      const customModule = require('@epxing/business/src/components/custom-bpmn/palette').default
+      require('bpmn-js/dist/assets/diagram-js.css')
+      require('bpmn-js/dist/assets/bpmn-font/css/bpmn.css')
+      require('bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css')
+      require('bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css')
+      // T35：epx-bpmn-js-properties-panel（公司 fork 的旧版属性面板）整体摘除 —— 其 panel 配置
+      // 早已注释（parent 从未挂载），真属性 UI 是自研 epx-properties-view；fork 只是白载。
+      // bpmn-js 11+ 需要 bpmn-js.css（弹出菜单/基础元素样式）。
+      require('bpmn-js/dist/assets/bpmn-js.css')
+      // 初始化bpmn
+      this.initBpmn({ BpmnViewer, BpmnModeler, camundaModdleDescriptor, customTranslate, customModule })
+      // 添加bpmn监听事件
+      this.addEventListeners()
+      this.initSvg()
+      this.adjustPalette()
+      this.getProcess()
+    }, () => {
+      this.$message.error('插件初始化失败，请重新打开页面')
+    }, 'bpmn')
+  },
+  beforeUnmount () {
+    // 两道判据同时满足才还原：
+    //   ① 菜单所有权还在我手上：后台标签被 LRU 淘汰、或另一个流程页已接管时，令牌早已易主，
+    //      直接放弃（否则会把用户当前正在看的那个页面的菜单弹出来）。
+    //      ⚠️ 别改回「本页在 DOM 里可见」那种判据 —— 见文件顶部注释：keep-alive 先 deactivate
+    //      再真卸载，DOM 那时已经游离，正常返回路径上它永远为假，还原会变成死代码。
+    //   ② 全局值仍是隐藏态：否则说明别的页面已经把菜单打开了，不该覆盖它。
+    if (menuOwner !== this) return
+    menuOwner = null
+    if (this.$store.state.config.showMenu === false) {
+      this.$store.commit(SWITCH_MENU_SHOW, menuShowBeforeHide)
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.container {
+  display: flex;
+  height: 100%;
+  position: relative;
+  flex-direction: column;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.report-header {
+  position: relative;
+  height: 56px;
+  background: var(--epx-bg-card);
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--epx-border);
+  // margin-bottom: 10px;
+}
+.report-title {
+  display: flex;
+}
+.report-back {
+  font-size: var(--epx-font-size-xl);
+  cursor: pointer;
+  position: relative;
+  top: 1px;
+}
+.report-name {
+  color: var(--epx-text);
+  font-size: var(--epx-font-size-l);
+  margin: 0 12px 0 6px;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  i {
+    font-size: 18px;
+    color: #444;
+    cursor: pointer;
+    margin-left: 8px;
+  }
+}
+.report-operate {
+  display: flex;
+}
+.palette-fold{
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  cursor: pointer;
+  @include bg_color_primary;
+  color: #fff;
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  // left: 220px;
+  left: 0;
+  font-size: var(--epx-font-size-xl);
+}
+.left-tools{
+  box-sizing: border-box;
+  background: var(--epx-bg-card);
+  box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.15);
+  width: 220px;
+  height: 100%;
+  padding: 16px;
+  overflow: auto;
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  // left: 0;
+  left: -220px;
+}
+.tools-search-con{
+  margin-bottom: 10px;
+}
+.group-name{
+  font-size: var(--epx-font-size-l);
+  color: var(--epx-text-secondary);
+  margin-bottom: 10px;
+}
+.left-tools-item{
+  display: flex;
+  align-items: center;
+  font-size: var(--epx-font-size-l);
+  color: #444444;
+  margin-bottom: 10px;
+  cursor: pointer;
+}
+.left-tools-item:hover{
+  @include font_color_primary;
+}
+.node-tools-content{
+  height: 580px;
+  background: var(--epx-bg-card);
+  overflow: auto;
+}
+.group-children{
+  display: flex;
+  flex-wrap: wrap;
+}
+.node-tools-item{
+  width: 50%;
+}
+.left-tools-group-name{
+  font-size: var(--epx-font-size-l);
+  color: var(--epx-text-secondary);
+}
+.left-tools-icon{
+  width: 30px;
+  height: 30px;
+  background: #3698FF;
+  border-radius: var(--epx-radius-base);
+  margin-right: 8px;
+  text-align: center;
+  line-height: 30px;
+  color: #fff;
+  font-size: var(--epx-font-size-l);
+}
+.node-tools{
+  position: absolute;
+  display: none;
+  z-index: 2;
+  background: var(--epx-bg-card);
+  padding: 4px;
+  box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.15);
+  border-radius: var(--epx-radius-base);
+  i{
+    cursor: pointer;
+  }
+}
+.node-tools-add-icon{
+  color: #0076EF;
+  font-size: 24px;
+}
+.node-tools-delete-icon{
+  color: #FF2222;
+  font-size: 24px;
+}
+#properties-panel{
+  display: none;
+}
+</style>
+<style lang="scss">
+/*左边工具栏以及编辑节点的样式*/
+// .djs-palette .entry:before{
+//   @include bg_color_primary;
+//   color: #fff;
+//   padding: 6px;
+//   width: 30px;
+//   height: 30px;
+//   box-sizing: border-box;
+//   font-size: var(--epx-font-size-l);
+// }
+/* 隐藏 contextPad */
+.djs-context-pad {
+    display: none !important;
+}
+.djs-palette.open {
+  display: none;
+}
+.bpmn-icon-data-store {
+  display: none;
+}
+.bpmn-icon-space-tool {
+  display: none;
+}
+.bpmn-icon-subprocess-expanded {
+  display: none;
+}
+.bpmn-icon-group {
+  display: none;
+}
+.bpmn-icon-participant {
+  display: none;
+}
+.bpmn-icon-intermediate-event-none {
+  display: none;
+}
+.bpmn-icon-data-object {
+  display: none;
+}
+// .epx-icon-lc-xinzengjilu:before{
+//   line-height: 1em;
+// }
+[class^="epx-icon-lc-"]:before, [class*=" epx-icon-lc-"]:before{
+  line-height: 1em;
+}
+.djs-palette.two-column.open {
+  width: 47px;
+}
+.djs-container{
+   background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+")
+      repeat !important;
+}
+.containers {
+  position: relative;
+  background-color: var(--epx-bg-card);
+  flex: 1;
+  // width: 100%;
+  // height: 100%;
+  overflow: hidden;
+}
+.canvas {
+  width: 100%;
+  height: 100%;
+}
+.panel {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 300px;
+  height: 100%;
+  overflow-y: scroll;
+}
+.buttons {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 20px;
+  & > li {
+    display: inline-block;
+    margin: 5px;
+    & > a {
+      color: var(--epx-text-secondary);
+      background: #eee;
+      cursor: not-allowed;
+      padding: 8px;
+      border: 1px solid #ccc;
+      &.active {
+        color: var(--epx-text);
+        background: var(--epx-bg-card);
+        cursor: pointer;
+      }
+    }
+  }
+}
+.epx-properties-panel{
+  // display: none;
+}
+.bjs-powered-by {
+  display: none;
+}
+
+.dialog__only__content {
+  .el-dialog__header {
+    display: none;
+  }
+  .el-dialog__body {
+    padding: 0;
+  }
+}
+.camunda-object-name {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+div.find {
+  max-height: 600px;
+  overflow-y: auto;
+}
+div.tree_find {
+  min-height: 400px;
+  padding: 24px;
+}
+
+@media screen and (min-width: 992px) {
+  div.find {
+
+      :deep(.list) {
+        width: 800px;
+      }
+      :deep(.search-container) {
+        margin-bottom: 0;
+      }
+      :deep(.table-container) {
+        padding: 0 16px 16px;
+      }
+
+  }
+}
+</style>