axwen-test31 2.0.0

package/src/views/market/market-event-edit-pro/g6-config/plugins/MenuToolBar.js

@@ -0,0 +1,1858 @@
+import { addClass, hasClass, removeClass,getEventPath } from '@/utils/dom';
+import { createCindGroup } from '@/api/market'
+import { deepClone } from '@/utils/index';
+import { getMenuNameByKey, tryToFitview, clearChannelStageAndExecStat, validContentChannel } from '@/views/market/market-event-edit-pro/util';
+import createDOM from "@antv/util/lib/dom/create-dom";
+import modifyCSS from "@antv/util/lib/dom/modify-css";
+import isString from "@antv/util/lib/type/is-string";
+import insertCss from "insert-css";
+import Base from "./Base";
+import redo from './imgs/redo.svg';
+import { getImg } from './util';
+import rightClickAllSelect from "./imgs/rightClick-allSelect.svg";
+import rightClickCopy from "./imgs/rightClick-copy.svg";
+import rightClickDel from "./imgs/rightClick-del.svg";
+import rightClickGroup from "./imgs/rightClick-group.svg";
+import rightClickPaste from "./imgs/rightClick-paste.svg";
+import rightClickStop from "./imgs/rightClick-stop.svg";
+import rightClickEnable from "./imgs/rightClick-enable.svg";
+import rightClickSwitch from "./imgs/rightClick-switch.svg";
+import more from "./imgs/more.svg";
+import undo from './imgs/undo.svg';
+import {paste} from '../behavior/paste'
+import { expandSplitBranch } from '../common'
+import bus from '@/bus'
+insertCss(`
+  .g6-component-menu-toolbar {
+    position: absolute;
+    left: 300px;
+    top: 200px;
+    width: 150px;
+    display:none;
+    flex-direction: column;
+    list-style-type: none;
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 1px solid #e2e2e2;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #545454;
+    margin: 0;
+  }
+  .hide-g6-component-menu-toolbar {
+    display: none
+  }
+  .g6-component-menu-toolbar.show{
+    display: block;
+  }
+  .g6-component-menu-toolbar > .menu-switch-btn .item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22.5px;
+    height: 20px;
+    margin-right: 10px;
+    border-radius: 4px;
+  }
+  .g6-component-menu-toolbar > li,
+  .g6-component-menu-toolbar > div,
+  .g6-component-menu-toolbar > .menu-switch-btn > ul > .cld-list > li
+  {
+    width: 100%;
+    height:32px;
+    display: flex;
+    padding:6px 10px;
+    justify-content: space-between;
+    cursor: pointer;
+  }
+  .g6-component-menu-toolbar .menu-switch-btn .switch {
+    display: flex;
+  }
+  .g6-component-menu-toolbar .menu-switch-btn .switch .left {
+    display: flex;
+    justify-content:space-between;
+    width: 138px;
+    font-size:12px;
+  }
+  .g6-component-menu-toolbar .menu-switch-btn .switch .right {
+    background-color: #ffffff;
+    margin-top: -6px;
+    margin-left: 2px;
+    height: 150px;
+    overflow: auto;
+    border-radius: 4px;
+  }
+  .g6-component-menu-toolbar .menu-switch-btn .switch .right .menu {
+    display: flex;
+    width: 120px;
+    height: 20px;
+    border-radius: 4px;
+    margin-right: 8px;
+  }
+  
+  .g6-component-menu-toolbar > li,
+  .g6-component-menu-toolbar > .menu-switch-btn > ul > .cld-list > li
+  {
+    align-items: center;
+  }
+  .g6-component-menu-toolbar li.show {
+    display: flex;
+  }
+  .g6-component-menu-toolbar li.hide {
+    display: none;
+  }
+  .g6-component-menu-toolbar li.disabled {
+    color: #333;
+    opacity: .4;
+    cursor: not-allowed;
+    background:#f6f6f6;
+  }
+  .g6-component-menu-toolbar li:hover {
+    background:#f6f6f6;
+  }
+  .g6-component-menu-toolbar li .left-wrapper,
+  .g6-component-menu-toolbar menu-switch-btn .left-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .g6-component-menu-toolbar li .left-wrapper img {
+    margin-right: 10px
+  }
+  .g6-component-menu-toolbar menu-switch-btn  {
+    height: 40px
+  }
+  .g6-component-menu-toolbar menu-switch-btn .left-wrapper img {
+    margin-right: 10px
+  }
+  .g6-component-menu-toolbar li .left-wrapper i {
+    margin-right: 10px !important;
+  }
+
+`);
+
+export default class MenuToolBar extends Base {
+  getDefaultCfgs() {
+    return {
+      name: 'menuToolBar',
+      canDo:true,
+      ctrlDown:false,
+      data: {
+        nodes: [],
+        edges: [],
+        models: []
+      },
+      triggerKeydown:false,
+      handleClick: (code) => {
+        this.handleMenuClick(code);
+      },
+      handleShow: (e, type) => {
+        this.show(e, type)
+      },
+      handleClose: () => {
+        this.hide()
+      },
+      handleCopy: (code) => {
+        this.handleMenuClick(code);
+      },
+      // 指定菜单内容，function(e) {...}
+      getContent: () => {
+        const parentCmp = this.get('switch-cmp-list')
+        const smallHotDeployFlag = this.get('small-hot-deploy-flag')
+        return `
+          <ul class='g6-component-menu-toolbar'>
+            ${(parentCmp && parentCmp.length && parentCmp[0].children && parentCmp[0].children.length && smallHotDeployFlag)
+              ? `<div class="menu-switch-btn">
+                  <ul class="switch">
+                    <div class="left">
+                      <div>
+                        <img src='${rightClickSwitch}' title="切换组件" width="14" height="14" style="margin-right:4px;" />
+                        切换组件
+                      </div>
+                      <div style="margin-right: 10px;">
+                        <img src='${more}' title='更多' alt='更多' width="14" height="14">
+                      </div>
+                    </div>
+                    <ul class="cld-list show right" code='${parentCmp[0].key}'>
+                      ${parentCmp[0].children.map(c => `<li style="padding-right:4px;" code="${c.key}">
+                      <div class="menu">
+                        <div class="item item-${{custGroup:'sky',reorgGroup:'lightblue',channelGroup1:'orange',timerEventGroup:'green',resGroup:'orangered'}[parentCmp[0].key]}">
+                          <img width="14px" height="14px" src='${getImg(parentCmp[0].key, c.icon)}' />
+                        </div>
+                        <span style="width:100px;" class="ellipsis">${c.label}</span>
+                      </div>
+                      </li>`).join('')}
+                    </ul>
+                  </ul>
+              </div>`
+              : ''
+            }
+            <li code='enable' class="node">
+              <div class="left-wrapper">
+                <img src='${rightClickEnable}' title='启用' alt='启用' width="14" height="14">
+                启用
+              </div>
+              <div class="right-wrapper">
+              </div>
+            </li>
+            <li code='stop' class="node">
+              <div class="left-wrapper">
+              <img src='${rightClickStop}' title='停用' alt='停用' width="14" height="14">
+                停用
+              </div>
+              <div class="right-wrapper">
+              </div>
+            </li>
+            <li code='undo' class="disabled node">
+                <div class="left-wrapper">
+                  <img src='${undo}' title='撤销' alt='撤销' width="14" height="14">
+                  撤销
+                </div>
+                <div class="right-wrapper">
+                  Ctrl + Z
+                </div>
+              </li>
+              <li code='redo' class="disabled node">
+                <div class="left-wrapper">
+                  <img src='${redo}' title='重做' alt='重做' width="14" height="14">
+                  重做
+                </div>
+                <div class="right-wrapper">
+                  Ctrl + Y
+                </div>
+              </li>
+              <li code='copy' class="node">
+                <div class="left-wrapper">
+                  <img src='${rightClickCopy}' title='复制' alt='复制' width="14" height="14">
+                  复制
+                </div>
+                <div class="right-wrapper">
+                  Ctrl + C
+                </div>
+              </li>
+              <li code='paste' class="node canvas">
+                <div class="left-wrapper">
+                  <img src='${rightClickPaste}' title='粘贴' alt='粘贴' width="14" height="14">
+                  粘贴
+                </div>
+                <div class="right-wrapper">
+                  Ctrl + V
+                </div>
+              </li>
+              <li code='del' class="node">
+                <div class="left-wrapper">
+                  <img src='${rightClickDel}' title='删除' alt='删除' width="14" height="14">
+                  删除
+                </div>
+                <div class="right-wrapper">
+                  Delete
+                </div>
+              </li>
+              <li code='allSelect' class="canvas">
+                <div class="left-wrapper">
+                  <img src='${rightClickAllSelect}' title='全选' alt='全选' width="14" height="14">
+                  全选
+                </div>
+                <div class="right-wrapper">
+                  Ctrl + A
+                </div>
+              </li>
+              <li code='group' class="edge">
+                <div class="left-wrapper">
+                  <img src='${rightClickGroup}' title='实时群组' alt='实时群组' width="14" height="14">
+                  创建流转客群
+                </div>
+                <div class="right-wrapper"></div>
+              </li>
+            </ul>
+          `;
+      },
+    };
+  }
+  getEvents(){
+    return {
+      'canvas:click': 'onClose',
+      'node:contextmenu': 'onNodeContextMenu',
+      'edge:contextmenu': 'onEdgeContextMenu',
+      'canvas:contextmenu': 'onCanvasContextMenu',
+      'stackchange': '_handleStackChange',
+      'keydown': '_handleKeydown',
+      'keyup': '_handleKeyup'
+    }
+  }
+  onClose () {
+    this.hide()
+  }
+
+  onNodeContextMenu (e) {
+    const graph = this.get('graph');
+    const node = e.item
+    this.set('graph-e', node)
+    const model = node.get('model')
+    let filterKey = ['start', 'end']
+    if (filterKey.includes(model.menuKey || model.id)){
+      return
+    }
+    // 组件切换
+    let { menuTree, menuData} = deepClone(graph.get('nodeMenuTree'))
+    let nodeKey = model.channelGroup || model.uniqueKey || model.menuKey
+    let parentKey = menuData.menuMap[nodeKey] ? menuData.menuMap[nodeKey]?.parentKey : (model.menuKey === 'channel' ? 'channelGroup1' : '')
+    let switchData = []
+    for (let i = 0; i < menuTree.length; i++) {
+      if (parentKey && menuTree[i].key !== 'reorgGroup' && menuTree[i].key === parentKey) {
+        let childrenData = menuTree[i].children.filter((node) => node.key !== nodeKey)
+        switchData.push({
+          ...menuTree[i],
+          children: childrenData
+        })
+      }
+    }
+    this.set('switch-cmp-list', switchData)
+
+    const vm = graph.get('vm')
+    let query = vm.$route.query
+    if (query.mode === 'pause_update' && typeof(query.smallHotDeployFlag) === 'string' ? query.smallHotDeployFlag === 'true' : query.smallHotDeployFlag) {
+      this.set('small-hot-deploy-flag', false)
+    } else {
+      this.set('small-hot-deploy-flag', true)
+    }
+    this.initContextDom()
+
+    const selectNodes = graph.findAllByState('node', 'active')
+    if (selectNodes.length > 0) {
+      if (!(selectNodes.some(snode => {
+        const snodeModel = snode.getModel()
+        return snodeModel.menuKey === model.menuKey
+      }))) {
+        selectNodes.forEach(n => {
+          graph.setItemState(n, 'active', false)
+        })
+        graph.setItemState(node, 'active', true)
+      }
+    } else {
+      graph.setItemState(node, 'active', true)
+    }
+    const position = graph.getCanvasByPoint(e.x, e.y)
+    this.show(position, 'node')
+  }
+
+  onCanvasContextMenu (e) {
+    const vm = graph.get('vm')
+    let query = vm.$route.query
+    if (query.mode === 'pause_update' && typeof(query.smallHotDeployFlag) === 'string' ? query.smallHotDeployFlag === 'true' : query.smallHotDeployFlag) {
+      this.set('small-hot-deploy-flag', false)
+    } else {
+      this.set('small-hot-deploy-flag', true)
+    }
+
+    this.set('switch-cmp-list', null)
+    this.set('graph-e', null)
+    this.initContextDom()
+    
+    const graph = this.get('graph');
+    const selectNodes = graph.findAllByState('node', 'active')
+    selectNodes.forEach(node => {
+      graph.setItemState(node, 'active', false)
+    })
+    // const position = graph.getCanvasByPoint(e.x, e.y)
+    const position = {
+      x: e.canvasX,
+      y: e.canvasY
+    }
+    this.show(position, 'canvas')
+  }
+
+  onEdgeContextMenu (e) {
+    this.set('switch-cmp-list', null)
+    this.set('graph-e', null)
+    this.initContextDom()
+    
+    const graph = this.get('graph');
+    const position = graph.getCanvasByPoint(e.x, e.y)
+    this.show(position, 'edge')
+  }
+
+  init() {
+    const graph = this.get("graph");
+    const getContent = this.get("getContent");
+    const toolBar = getContent(graph);
+    let toolBarDOM = toolBar;
+    if (isString(toolBar)) {
+      toolBarDOM = createDOM(toolBar);
+    }
+
+    const className = this.get("className");
+    toolBarDOM.setAttribute("class", className || "g6-component-menu-toolbar");
+
+    let container = this.get("container");
+    if (!container) {
+      container = this.get("graph").get("container");
+    }
+
+    container.appendChild(toolBarDOM);
+    this.set("toolBar", toolBarDOM);
+
+
+    toolBarDOM.addEventListener("click", (evt) => {
+      const  path = getEventPath(evt)
+      const current = path.filter((p) => p.nodeName === "LI");
+      if (current.length === 0) {
+        return;
+      }
+
+      const code = current[0].getAttribute("code");
+      const disabled = hasClass(current[0],'disabled')
+
+      if (!code || disabled) {
+        return;
+      }
+
+      const handleClick = this.get("handleClick");
+      if (handleClick) {
+        handleClick(code);
+      }
+    });
+
+  }
+
+  initContextDom() {
+    // 获取所有节点
+    const graph = this.get("graph")
+    const getContent = this.get("getContent")
+    const toolBar = getContent(graph)
+    let toolBarDOM = toolBar
+    if (isString(toolBar)) {
+      toolBarDOM = createDOM(toolBar)
+    }
+
+    const className = this.get("className")
+    toolBarDOM.setAttribute('class', className || 'g6-component-menu-toolbar')
+
+    let container = this.get("container")
+    if (!container) {
+      container = this.get("graph").get("container")
+    }
+
+    const originContainer = container.querySelector('.g6-component-menu-toolbar')
+    if (originContainer) {
+      container.replaceChild(toolBarDOM, originContainer)
+    } else {
+      container.appendChild(toolBarDOM)
+    }
+
+    this.set("toolBar", toolBarDOM)
+
+    toolBarDOM.addEventListener("click", (evt) => {
+      const  path = getEventPath(evt)
+      const current = path.filter((p) => p.nodeName === "LI")
+      if (current.length === 0) {
+        return
+      }
+
+      const code = current[0].getAttribute("code")
+      const disabled = hasClass(current[0], 'disabled')
+
+      if (!code || disabled) {
+        return
+      }
+
+      const handleClick = this.get("handleClick")
+      if (handleClick) {
+        handleClick(code)
+      }
+    })
+
+  }
+
+  handleMenuClick (code) {
+    const graph = this.get("graph")
+    graph.set('inCanvas', true)
+    switch (code) {
+      case 'enable':
+        this.enable()
+        break;
+      case 'stop':
+        this.stop()
+        break;
+      case 'undo':
+        this.undo(true)
+        break
+      case 'redo':
+        this.redo(true)
+        break
+      case 'copy':
+        this.copy()
+        break;
+      case 'paste':
+        this.paste()
+        break;
+      case 'del':
+        this.del()
+        break;
+      case 'allSelect':
+        this.allSelect()
+        break;
+      case 'group':
+        this.addGroup()
+        break;
+      default:
+        // 切换组件
+        this.switchCmp(code)
+        break
+    }
+    this.hide()
+  }
+
+
+  _handleStackChange(e){
+
+      const toolBarDOM = this.get('toolBar')
+      const undoDom = toolBarDOM.querySelector('li[code="undo"]');
+      const redoDom = toolBarDOM.querySelector('li[code="redo"]');
+      if (!undoDom  || !redoDom) {
+        return;
+      }
+      const { undoStack, redoStack } = e;
+      const graph = this.get("graph");
+      const undoStackLen = undoStack.length;
+      const redoStackLen = redoStack.length;
+
+      // undo 不可用
+      if (undoStackLen === 0) {
+        addClass(undoDom,'disabled')
+      } else {
+        removeClass(undoDom,'disabled')
+      }
+
+      // redo 不可用
+      if (redoStackLen === 0) {
+        addClass(redoDom,'disabled')
+      } else {
+        removeClass(redoDom,'disabled')
+      }
+  }
+  _handleKeyup(e){
+    const {key} = e
+    const CTRL_KEY ='Control'
+    this.canDo = true
+    if(CTRL_KEY === key){
+      this.ctrlKey = false
+    }
+  }
+  _handleKeydown(e){
+    const {key} = e
+    const CTRL_KEY = 'Control'
+    const UNDO_LOWER_KEY = 'z'
+    const UNDO_UPPER_KEY = 'Z'
+    const REDO_LOWER_KEY = 'y'
+    const REDO_UPPER_KEY = 'Y'
+    if(CTRL_KEY === key){
+      this.ctrlKey = true
+      this.canDo = true
+    }else{
+      if(this.canDo && this.ctrlKey && ([REDO_LOWER_KEY, UNDO_UPPER_KEY, UNDO_LOWER_KEY, REDO_UPPER_KEY].includes(key)) ){
+        switch(key){
+          case UNDO_LOWER_KEY:
+          case UNDO_UPPER_KEY:
+            this.undo()
+            e.preventDefault()
+            break;
+          case REDO_LOWER_KEY:
+          case REDO_UPPER_KEY:
+            this.redo();
+            e.preventDefault()
+            break;
+          default:
+        }
+      }
+      this.canDo = false
+    }
+  }
+
+  async show (position, type) {
+    const graph = this.get("graph");
+    const vm = graph.get('vm')
+    let query = vm.$route.query
+     // 手动触发点击画布关闭侧边栏
+    vm.handleCanvasClick()
+    const toolBarDOM = this.get("toolBar");
+    const { x, y } = position
+    this.set('posXy', graph.getPointByCanvas(x, y))
+    const allOperateDom = toolBarDOM.querySelectorAll('li')
+    let codeMap = {
+      node:['switch','enable','stop','copy','paste','del'],
+      canvas:['paste','allSelect'],
+      edge:['group']
+    }
+    let useableCode = codeMap[type]
+    const alwaysShowCode = ['redo','undo']
+    const data = graph.get('shearPlate') || {};
+    const isPasteDataEmpty = Object.values(data).every(item=>item.length === 0)
+    const selectedNodes = graph.findAllByState('node', 'active')
+    const config = graph.get('config')
+    let isShowGroup = true
+    if (type === 'edge') {
+      this.hoverEdges = graph.findAllByState('edge', 'hover') || []
+      let item = this.hoverEdges[0]
+      let sourceModel = item.getSource().getModel()
+      let targetModel =item.getTarget().getModel()
+      if (
+        item
+        && ['update', 'pause_update'].includes(query.mode)
+        && sourceModel.id.length === 32
+        && targetModel.id.length === 32
+        && !(typeof(query.isLoop) === 'string' ? query.isLoop === 'true' : query.isLoop)
+        && config.ISHIDDEN_CIRCUL_CUSTOMER ? !JSON.parse(config.ISHIDDEN_EVENT_BTNS_XIUGAI) : true
+      ) {
+        let checkParams = {
+          actId: query.id,
+          nodeFrom: sourceModel.id,
+          nodeTo: targetModel.id,
+          type: 'check',
+        }
+        let res = await checkRealGroup(checkParams)
+        if (sourceModel.type === 'point'
+          || sourceModel.id.includes('node')
+          || targetModel.id.includes('node')
+          || res.data === 'false'
+        ) {
+          isShowGroup = false
+        }
+      } else {
+        isShowGroup = false
+      }
+      if (!isShowGroup || !['update', 'pause_update'].includes(query.mode)) {
+        this.hoverEdges = []
+        this.hide()
+        return
+      }
+    } else {
+      this.hoverEdges = []
+    }
+    let hasBranch = false
+    let hasResp = false
+    let enableBranch = false // 启用、禁用单独处理，只处理右键点击组件
+    let isHotDel = false // 热部署-继承发布-是否隐藏删除按钮
+    let isEnableNode = false
+    if (selectedNodes.every((i)=>{
+      const model = i.getModel()
+      return model.menuKey&&model.menuKey.includes('Branch')
+    })) {
+      hasBranch = true
+    }
+    if (selectedNodes.every((i) => {
+      const model = i.getModel()
+      return model.menuKey && ["evtRespFlowBranch"].includes(model.menuKey)
+        || ['randomFlowBranch', 'custFlowBranch', 'labelFlowBranch'].includes(model.menuKey || model.id) && model.form.hiddenDelete
+    })) {
+      hasResp = true
+    }
+    if (selectedNodes.some((i) => {
+      const model = i.getModel()
+      return query?.hotDeployType == 1 && model?.hotDeployDeleteStatus === '1'
+    })) {
+      isHotDel = true
+    }
+    let enableNodes = this.get('graph-e') ? [this.get('graph-e')] : null
+    // 组件展示启用按钮还是展示停用按钮
+    if (enableNodes && enableNodes.every((i)=>{
+      const model = i.getModel()
+      return model.label&&model.hotDeployExecuteStatus === '1'
+    })) {
+      isEnableNode = true
+    }
+    if (enableNodes && enableNodes.every((i) => {
+      const model = i.getModel()
+      return model.menuKey && ["evtRespFlowBranch"].includes(model.menuKey)
+        || ['randomFlowBranch'].includes(model.menuKey || model.id) && model.form.hiddenDelete
+        || query.mode !== 'pause_update'
+    })) {
+      enableBranch = true
+    }
+    let isShowUndoRedo = false
+    if (type === 'edge') {
+      isShowUndoRedo = true
+    }
+    if (query.mode === 'pause_update' && typeof(query.smallHotDeployFlag) === 'string' ? query.smallHotDeployFlag === 'true' : query.smallHotDeployFlag) {
+      useableCode = useableCode.filter((i) => !['switch','enable','stop'].includes(i))
+      this.set('small-hot-deploy-flag', false)
+    } else {
+      this.set('small-hot-deploy-flag', true)
+    }
+    allOperateDom.forEach(item=>{
+      const code = item.getAttribute('code')
+      if (['switch', 'enable', 'stop', 'copy', 'paste', 'del', 'allSelect', 'group', 'redo','undo'].includes(code)) {
+        if(!alwaysShowCode.includes(code) && !useableCode.includes(code)
+          || (code === 'paste' && isPasteDataEmpty)
+          || (code === 'copy' && hasBranch)
+          || (code === 'enable' && (enableBranch || !isEnableNode))
+          || (code === 'stop' && (enableBranch || isEnableNode))
+          || (code === 'del' && (hasResp || isHotDel))
+          || (code === 'redo' && isShowUndoRedo)
+          || (code === 'undo' && isShowUndoRedo)
+        ){
+          // 隐藏  
+          removeClass(item,'show')
+          addClass(item,'hide')
+        }else{
+          // 展示
+          removeClass(item,'hide')
+          addClass(item,'show')
+        }
+      } else {
+        // 切换组件 do nothing
+      }
+    })
+    addClass(toolBarDOM,'show')
+    if (position) {
+      modifyCSS(toolBarDOM, {
+        top: `${y}px`,
+        left: `${x}px`,
+      });
+    }
+
+    this._handleStackChange(graph)
+    // graph.refresh()
+  }
+
+  hide () {
+    const toolBarDOM = this.get("toolBar");
+    removeClass(toolBarDOM,'show')
+  }
+  // 切换组件
+  switchCmp(menuKey) {
+    const graph = this.get('graph')
+    const vm = graph.get('vm')
+    const targetNode = this.get('graph-e') || graph.findAllByState('node', 'active')[0]
+    // const targetNode = this.get('targetNode')
+    // const beforeNodes = targetNode.getInEdges().map(e => e.getSource())
+    // const afterNodes = targetNode.getOutEdges().map(e => e.getTarget())
+    const { x: clientX, y: clientY } = graph.getClientByPoint(targetNode._cfg.model.x, targetNode._cfg.model.y)
+    
+    // 更新节点
+    const menu = vm.getMenuByKey(menuKey)
+    let nodeForm = vm.$parent.getDefaultFormValue(menu.key)
+    const keyMap={
+      channelGroup1: 'channel'
+    }
+    if(keyMap[menu.parentKey]) {
+      nodeForm.actReachChannelId = menu.componentChannel
+      nodeForm.actReachPassageId=menu.componentPassage
+      nodeForm.businessType = menu.businessType
+      nodeForm.reachChannelType = menu.channelType
+    }
+
+    // 检查连接节点线的规则
+    let targetModel = targetNode.getModel()
+    if (targetModel.menuKey === 'content') {
+      let isSwitch = true // 切换组件为内容需要断开后续渠道连线
+      vm.checkNodeEdge(targetNode, targetModel.form, isSwitch)
+    } else if (targetModel.menuKey === 'channel') {
+      vm.checkChannelNodeEdge(targetNode, menu.key)
+    } else if (targetModel.menuKey === 'waitEvent') {
+      targetNode.getInEdges().forEach(edge => {
+        let sourceNode = edge.getSource().getModel()
+        if (sourceNode?.menuKey === 'start') {
+          graph.removeItem(edge)
+        }
+      })
+    }
+    const newModel = {
+      ...menu,
+      uniqueKey: menu.key,
+      menuKey: keyMap[menu.parentKey] || menu.key,
+      form: nodeForm,
+      id: targetModel.id,
+      nodeNumber: targetModel.nodeNumber,
+      hotDeployExecuteStatus: targetModel.hotDeployExecuteStatus,
+      hotDeployDeleteStatus: targetModel.hotDeployDeleteStatus
+    }
+    // 切换渠道组件需要重置channelGroup
+    if (targetModel.channelGroup) {
+      targetModel.channelGroup = menu.key
+    }
+    // 重置表单
+    targetNode._cfg.model.form = {}
+    graph.updateItem(targetNode, newModel)
+
+    if (['content', 'equity', 'act'].includes(newModel.menuKey)) {
+      targetNode.getOutEdges().forEach(edge => {
+        let sourceModel = edge.getTarget().getModel()
+        let valid = validContentChannel(sourceModel, newModel)
+        if (valid) {
+          graph.removeItem(edge)
+        }
+      })
+    } else if (['channel'].includes(targetModel.menuKey)) {
+      targetNode.getInEdges().forEach(edge => {
+        let targetModel = edge.getSource().getModel()
+        let valid = validContentChannel(newModel, targetModel)
+        if (valid) {
+          graph.removeItem(edge)
+        }
+      })
+    }
+
+    // 渠道后置按渠道分流组件的分流方式及子分流组件的响应结果清空
+    if (menu.parentKey === 'channelGroup1') {
+      const afterNodes = targetNode.getOutEdges().map(e => e.getTarget())
+      if ( afterNodes.length === 0 ) return
+      afterNodes.forEach(node => {
+        const nodeModel = node.getModel()
+        if (nodeModel.menuKey === "chnlRespFlow") {
+          nodeModel.form.stage = ''
+          const childNodes = node.getOutEdges().map(e => e.getTarget())
+          if (childNodes.length === 0) return
+          childNodes.forEach(cNode => {
+            const cNodeModel = cNode.getModel()
+            cNodeModel.form.execStat = ''
+            cNodeModel.form.stage = ''
+            cNodeModel.form.channelSplitName = ''
+          })
+        }
+      })
+    }
+    
+    
+    // const originData = graph.save()
+    // // 分流组件需要删除它的分支
+    // if (menuKey.endsWith('Flow')) {
+    //   function removeNodeAndEdge (target) {
+    //     if (target._cfg.model.menuKey.endsWith('Branch') || target._cfg.model.menuKey.endsWith('Resp') || target._cfg.model.menuKey === 'end') {
+    //       const nextTargets = target.getOutEdges().map(e => e.getTarget())
+    //       // 删除target  inEdges
+    //       const inEdges = target.getInEdges()
+    //       if (inEdges.length) {
+    //         graph.removeItem(target.getInEdges()[0])
+    //       }
+    //       // 删除target outEdge
+    //       target.getOutEdges().forEach(e => graph.removeItem(e))
+    //       // 删除target自己
+    //       graph.removeItem(target)
+    //       // 继续递归
+    //       nextTargets.forEach(removeNodeAndEdge)
+    //     }
+    //   }
+    //   targetNode.getOutEdges().map(e => e.getTarget()).forEach(removeNodeAndEdge)
+    // }
+    // 删除节点本身和它的连线
+    // ([...targetNode.getEdges()]).forEach(e => {
+    //   graph.removeItem(e)
+    // })
+    // let model = targetNode.getModel()
+    // const nodeForm = {
+    //   id: model.id,
+    //   nodeNumber: model.nodeNumber,
+    //   hotDeployExecuteStatus: model.hotDeployExecuteStatus,
+    //   hotDeployDeleteStatus: model.hotDeployDeleteStatus
+    // }
+    // graph.removeItem(targetNode)
+
+    // vm.handleDrop({ dataTransfer: { getData: () => menuKey }, clientX, clientY, nodeForm })
+
+    
+
+    // 手动触发面板更新
+    graph.emit('canvas-click')
+  }
+  copy(){
+    // const data = this.get("data");
+    const graph = this.get('graph');
+    let data ={
+      nodes: [],
+      edges: [],
+      models: []
+    }
+      let activeNodes2 = graph.findAllByState('node', 'active')
+      if (activeNodes2.length === 0) return
+      activeNodes2.forEach(function (node) {
+          const model = node.getModel()
+          const inEdges = node.getInEdges()
+          let filterKey = ['start', 'end']
+          if (!filterKey.includes(model.menuKey || model.id)) {
+            if ((model.menuKey || model.id).indexOf('Branch') === -1) {
+              data.nodes.push(node)
+              data.models.push(model)
+              if (inEdges.length > 0) {
+                inEdges.forEach(edge => {
+                  data.edges.push(edge)
+                })
+              }
+            }
+          }
+      });
+      // 修改-复制渠道组件menuKey被修改问题
+      if(['sms', 'ebankApp', 'appPush', 'teleSalesPlat', 'intligCall', 'manager'].includes(data.models[0]?.channelGroup) || ['sms', 'ebankApp', 'appPush', 'teleSalesPlat', 'intligCall', 'manager'].includes(data.models[0]?.uniqueKey)){
+        data.models[0].menuKey = data.models[0].channelGroup || data.models[0].uniqueKey
+        data.nodes[0]._cfg.model.menuKey = data.models[0].channelGroup || data.models[0].uniqueKey
+      }
+      graph.set('shearPlate', data)
+      // e.preventDefault()
+  }
+  paste(){
+    const posXy = this.get("posXy")
+    paste({
+      graph:this.get("graph"),
+      posXy:this.get("posXy")
+    })
+    const graph = this.get('graph');
+    const shearPlate = graph.get('shearPlate')
+    const shearPlateStack = graph.get('shearPlateStack')
+    // let newShearPlate = {
+    //   nodes: [],
+    //   edges: [],
+    //   models: []
+    // }
+    // if (!shearPlate || shearPlate.nodes.length === 0) return
+    //     const posXy = this.get("posXy");
+    //     const oriMostLeftX = Math.min.apply(Math, shearPlate.models.map(model => model.x))  //被复制最左侧组件x坐标
+    //     const oriMostTopY = Math.min.apply(Math, shearPlate.models.map(model => model.y))   //被复制最顶侧组件Y坐标
+    //     const oriMostLeftNode = shearPlate.models.find(model => model.x === oriMostLeftX)   //被复制最左侧组件节点
+    //     const oriMostTopNode = shearPlate.models.find(model => model.y === oriMostTopY)     //被复制最顶侧组件节点
+    //     const originPoint = {
+    //       x: (oriMostLeftNode.x + oriMostTopNode.x) / 2,      //最左侧 最顶部组件交叉点坐标
+    //       y: (oriMostLeftNode.y + oriMostTopNode.y) / 2
+    //     }
+    //     console.log(originPoint,'鼠标-originPoint');
+    //     const now = Date.now()
+    //     try {
+    //       shearPlate?.nodes.forEach((node,index)=>{
+    //         if (!node || node.destroyed) return
+    //         const nodeModel = node.getModel()
+    //         const style = node.getOriginStyle()
+    //         let nodeForm = deepClone(nodeModel.form)
+    //         if (nodeModel === null) {
+    //           throw Error()
+    //         }
+    //         const id = nodeModel.id + now
+    //         const otherId = nodeModel.id + now + index + 1
+    //         const replaceStr = nodeModel.label.replace(/[0-9]/g, '')
+    //         let nodeKey = nodeModel.menuKey || nodeModel.uniqueKey
+    //         let text = getMenuNameByKey(nodeKey)
+    //         if (graph._cfg.canvasNodeCntCtrl[nodeKey]) {
+    //             graph._cfg.canvasNodeCntCtrl[nodeKey] = graph._cfg.canvasNodeCntCtrl[nodeKey] + 1
+    //         } else {
+    //             graph._cfg.canvasNodeCntCtrl[nodeKey] = 1
+    //         }
+    //         const offsetX = nodeModel.x - originPoint.x         //组件到交叉点坐标的偏移量
+    //         const offsetY = nodeModel.y - originPoint.y
+    //         let newForm = {}
+    //         if ((['cst', 'activeCst']).includes(nodeModel.menuKey)) {
+    //           newForm = {
+    //             id,
+    //             nodeId: id,
+    //             name: `${text}${graph._cfg.canvasNodeCntCtrl[nodeKey]}`
+    //           }
+    //         } else {
+    //           newForm = {
+    //             ...nodeForm,
+    //             id,
+    //             nodeId: id,
+    //             name: `${text}${graph._cfg.canvasNodeCntCtrl[nodeKey]}`
+    //           }
+    //         }
+    //         const newNode = graph.addItem('node', {
+    //           id,
+    //           menuKey: nodeModel.menuKey,
+    //           uniqueKey: nodeModel.menuKey,
+    //           label: `${text}${graph._cfg.canvasNodeCntCtrl[nodeKey]}`,
+    //           cstonly: nodeModel.cstonly,
+    //           isTestMode: nodeModel.isTestMode,
+    //           form: newForm,
+    //           // x: posXy ? Math.floor(nodeModel.x + offsetX):Math.floor(nodeModel.x + 70),
+    //           // y: posXy ? Math.floor(nodeModel.y + offsetY):Math.floor(nodeModel.y + 70)
+    //           x: posXy ? Math.floor(posXy.x + offsetX) : Math.floor(nodeModel.x + style.width / 2),
+    //           y: posXy ? Math.floor(posXy.y + offsetY) : Math.floor(nodeModel.y + style.height / 2),
+    //         });
+    //         graph.collectOperatedItems('node',{
+    //             ...newNode.getModel()
+    //         })
+    //         let isFlowType = ['chnlRespFlow', 'custFlow', 'labelFlow', 'randomFlow', 'evtRespFlow'].includes(nodeModel.menuKey)
+    //         if (isFlowType) {
+    //           let branchNode = []
+    //           // 获取分流节点后分支并提取其form信息
+    //           node._cfg.edges.length && node._cfg.edges.forEach(e => {
+    //             if (e._cfg.model.source === node._cfg.id) {
+    //               branchNode.push(e._cfg.model.targetNode._cfg.model.form)
+    //             }
+    //           })
+    //           this.drawFlowBranch(newNode, now, branchNode)
+    //         }
+    //         graph.setItemState(node, 'active', false)
+    //         graph.setItemState(newNode, 'active', true)
+    //         newShearPlate.nodes.push(newNode)
+    //         newShearPlate.models.push(newNode.getModel())
+    //       })
+    //         shearPlate?.edges.forEach(edge => {
+    //           if (!edge || edge.destroyed) return
+    //           const source = edge.getSource()
+    //           const sourceModel = source.getModel()
+    //           const target = edge.getTarget()
+    //           const targetModel = target.getModel()
+    //           let sourceIsCopy = false
+    //           let targetIsCopy = false
+    //           let filterKey = ['start', 'end']
+    //           if (!(filterKey.includes(sourceModel.menuKey || sourceModel.id))) {
+    //               if (sourceModel.menuKey.includes('Branch')) {
+    //                 const sourceInEdges = source.getInEdges()
+    //                 sourceInEdges.forEach(sInEdge => {
+    //                     const source2 = sInEdge.getSource()
+    //                     const source2Model = source2.getModel()
+    //                     if (source2Model.menuKey.endsWith('Flow')) {
+    //                         if (shearPlate&&shearPlate.models.some(i => {
+    //                             return i.id === source2Model.id
+    //                         })) {
+    //                             sourceIsCopy = true
+    //                         }
+    //                     } else {
+    //                         const source2InEdges = source2.getInEdges()
+    //                         source2InEdges.forEach(s2InEdge => {
+    //                             const source1 = s2InEdge.getSource()
+    //                             const source1Model = source1.getModel()
+    //                             if (source1Model.menuKey.endsWith('Flow')) {
+    //                                 if (shearPlate&&shearPlate.models.some(i => {
+    //                                     return i.id === source1Model.id
+    //                                 })) {
+    //                                     sourceIsCopy = true
+    //                                 }
+    //                             }
+    //                         })
+    //                     }
+    //                 })
+    //               } else {
+    //                   if (shearPlate&&shearPlate.models.some(i => {
+    //                       return i.id === sourceModel.id
+    //                   })) {
+    //                       sourceIsCopy = true
+    //                   }
+    //               }
+    //           }
+    //           if (shearPlate&& shearPlate.models.some(i=>{
+    //               return i.id === targetModel.id
+    //           })) {
+    //               targetIsCopy = true
+    //           }
+    //           let addedEdge = null
+    //           if (sourceModel.menuKey === 'start' || sourceModel.id === 'start') {
+    //               addedEdge = graph.addItem('edge', {
+    //                   source: sourceModel.id,
+    //                   target: targetModel.id + now,
+    //                   sourceOffset: {
+    //                       x: 22,
+    //                       y: 0
+    //                   }
+    //               })
+    //           } else if ((sourceModel.menuKey || sourceModel.id).indexOf('Branch') != -1){
+    //               if ((sourceModel.menuKey || sourceModel.id).indexOf('Resp') != -1) {
+    //                   addedEdge = graph.addItem('edge', {
+    //                       source: sourceIsCopy ? sourceModel.id + now : sourceModel.id,
+    //                       target: targetIsCopy ? targetModel.id + now : targetModel.id,
+    //                       sourceOffset: { x: 48, y: 0 }
+    //                   })
+    //               } else {
+    //                   addedEdge = graph.addItem('edge', {
+    //                       source: sourceIsCopy ? sourceModel.id + now : sourceModel.id,
+    //                       target: targetIsCopy ? targetModel.id + now : targetModel.id,
+    //                       sourceOffset: { x: 80, y: 0 }
+    //                   })
+    //               }
+    //           } else {
+    //               addedEdge = graph.addItem('edge', {
+    //                   source: sourceIsCopy ? sourceModel.id + now : sourceModel.id,
+    //                   target: targetIsCopy ? targetModel.id + now : targetModel.id,
+    //               })
+    //           }
+    //           if(addedEdge){
+    //               graph.collectOperatedItems('edge',{
+    //                   ...addedEdge.getModel()
+    //               })
+    //               newShearPlate.edges.push(addedEdge)
+    //           }
+    //       })
+    //       graph.pushStack('paste', {
+    //         before: {},
+    //         after: graph.operatedItems
+    //       })
+    //       shearPlateStack.undoStack.unshift({
+    //         before: shearPlate,
+    //         after: newShearPlate
+    //       })
+    //       graph.set('shearPlate', newShearPlate)
+    //       graph.set('shearPlateStack', shearPlateStack)
+    //     }catch (e) {
+    //     }
+
+  }
+  // 删除
+  del(){
+    const graph = this.get('graph');
+    // let activeNodes = graph.findAllByState('node', 'active')
+    // if (activeNodes.length === 0){
+    //     return
+    // }
+    // const self = this
+    // let filterKey = ['start', 'end']
+    // let activeNodes2 = activeNodes.filter(node => {
+    //     const model = node.getModel()
+    //     if (!filterKey.includes(model.menuKey || model.id)) {
+    //         // if ((model.menuKey || model.id).indexOf('Branch') == -1) {
+    //         if (!(['randomFlowBranch'].includes(model.menuKey || model.id) && model.label === '其他')) {
+    //             return node
+    //         }
+    //     }
+    // })
+    // activeNodes2.forEach(function (node) {
+    //     if (!node || node.destroyed) return
+    //     const model = node.getModel()
+    //     switch (model.menuKey) {
+    //         // 分流节点删除，删除之后的所有分支节点
+    //         case 'chnlRespFlow':
+    //             self.removeChannelRelations(model,'flow')
+    //         case 'custFlow':
+    //         case 'labelFlow':
+    //         case 'randomFlow':
+    //             node.getOutEdges().forEach(edge => {
+    //                 const targetNode = edge.getTarget()
+    //                 if (!targetNode || targetNode.destroyed) return
+    //                 graph.collectOperatedItems('node',{
+    //                     ...targetNode.getModel()
+    //                 })
+    //                   graph.collectOperatedItems('edge',{
+    //                     ...edge.getModel()
+    //                 })
+    //                 graph.removeItem(targetNode)
+    //                 graph.removeItem(edge)
+    //             })
+    //             break
+    //         case 'evtRespFlow':
+    //             node.getOutEdges().forEach(edge => {
+    //                 const edgeTargetNode = edge.getTarget()
+    //                 if (!edgeTargetNode || edgeTargetNode.destroyed) return
+    //                 // 删除二级响应分支
+    //                 const outEdges = edgeTargetNode.getOutEdges()
+    //                 if (outEdges.length > 0) {
+    //                     outEdges.forEach(outEdge => {
+    //                         const outEdgeTargetNode = outEdge.getTarget()
+    //                         if (!outEdgeTargetNode || outEdgeTargetNode.destroyed) return
+    //                         graph.collectOperatedItems('node',{
+    //                             ...outEdgeTargetNode.getModel()
+    //                         })
+    //                         graph.collectOperatedItems('edge',{
+    //                             ...outEdge.getModel()
+    //                         })
+    //                         graph.removeItem(outEdgeTargetNode)
+    //                         graph.removeItem(outEdge)
+    //                     })
+    //                 }
+    //                 graph.collectOperatedItems('node',{
+    //                     ...edgeTargetNode.getModel()
+    //                 })
+    //                 graph.collectOperatedItems('edge',{
+    //                     ...edge.getModel()
+    //                 })
+    //                 graph.removeItem(edgeTargetNode)
+    //                 graph.removeItem(edge)
+    //             })
+    //             break
+    //         // 分流分支节点删除，通知原分流节点表格里面删掉对应行
+    //         case 'chnlRespFlowBranch':
+    //         case 'custFlowBranch':
+    //         case 'labelFlowBranch':
+    //         case 'randomFlowBranch':
+    //             graph.onFlowBranchNodeDelete(model.form.rowId, model.menuKey)
+    //             break
+    //         // 事件响应分流分支节删除，删除之后的所有响应分支节点，并通知原分流节点表格里面删掉对应行
+    //         case 'evtRespFlowBranch':
+    //             graph.onFlowBranchNodeDelete(model.form.rowId, model.menuKey)
+    //             node.getOutEdges().forEach(edge => {
+    //                 const edgeTargetNode = edge.getTarget()
+    //                 if (!edgeTargetNode || edgeTargetNode.destroyed) return
+    //                 graph.collectOperatedItems('node',{
+    //                     ...edgeTargetNode.getModel()
+    //                 })
+    //                 graph.collectOperatedItems('edge',{
+    //                     ...edge.getModel()
+    //                 })
+    //                 graph.removeItem(edgeTargetNode)
+    //                 graph.removeItem(edge)
+    //             })
+    //             break
+    //         case 'ebankApp':
+    //         case 'sms':
+    //         case 'appPush':
+    //         case 'intligCall':
+    //         case 'teleSalesPlat':
+    //             self.removeChannelRelations(node.getModel(),'channel')
+    //             break
+    //     }
+    //     [...node.getEdges()].forEach(edge => {
+    //         graph.collectOperatedItems('edge',{
+    //             ...edge.getModel()
+    //         })
+    //         graph.removeItem(edge)
+    //     })
+    //     graph.collectOperatedItems('node',{
+    //         ...node.getModel()
+    //     })
+    //     graph.removeItem(node)
+    // });
+    // graph.pushStack('delete',{
+    //     before:graph.operatedItems,
+    //     after:{}
+    // })
+    let activeNodes = graph.findAllByState('node', 'active')
+    if (activeNodes.length === 0){
+        return
+    }
+    const self = this
+    let filterKey = ['start', 'end']
+    let activeNodes2 = activeNodes.filter(node => {
+        const model = node.getModel()
+        if (!filterKey.includes(model.menuKey || model.id)) {
+            // if ((model.menuKey || model.id).indexOf('Branch') == -1) {
+            if ((!(['randomFlowBranch'].includes(model.menuKey || model.id) && model.label === '其他')) && (!['evtRespFlowBranch'].includes(model.menuKey || model.id) )) {
+                return node
+            }
+        }
+    })
+    activeNodes2.forEach(function (node) {
+        if (!node || node.destroyed) return
+        const model = node.getModel()
+        switch (model.menuKey) {
+            // 分流节点删除，删除之后的所有分支节点
+            case 'chnlRespFlow':
+            case 'custFlow':
+            case 'labelFlow':
+            case 'randomFlow':
+            case 'evtRespFlow':
+              //删除分流主组件之前先把折叠的分支展开再删除否则会影响删除、撤销、重做等操作
+              expandSplitBranch(node,graph)
+              node.getOutEdges().forEach(edge => {
+                  const targetNode = edge.getTarget()
+                  targetNode.getOutEdges().forEach(targetNodeOutEdge => { // 删除目标节点的外边
+                      graph.collectOperatedItems('edge',{
+                          ...targetNodeOutEdge.getModel()
+                      })
+                      graph.removeItem(targetNodeOutEdge)
+                  })
+                  graph.collectOperatedItems('node',{
+                      ...targetNode.getModel()
+                  })
+                    graph.collectOperatedItems('edge',{
+                      ...edge.getModel()
+                  })
+                  graph.removeItem(targetNode)
+                  graph.removeItem(edge)
+                })
+                break
+            // 分流分支节点删除，通知原分流节点表格里面删掉对应行
+            case 'chnlRespFlowBranch':
+            case 'custFlowBranch':
+            case 'labelFlowBranch':
+            case 'randomFlowBranch':
+                graph.onFlowBranchNodeDelete(model.form.rowId, model.menuKey)
+                break
+            // 事件响应分流分支节删除，删除之后的所有响应分支节点，并通知原分流节点表格里面删掉对应行
+            case 'evtRespFlowBranch':
+                // graph.onFlowBranchNodeDelete(model.form.rowId, model.menuKey)
+                node.getOutEdges().forEach(edge => {
+                    const edgeTargetNode = edge.getTarget()
+                    if (!edgeTargetNode || edgeTargetNode.destroyed) return
+                    graph.collectOperatedItems('node',{
+                        ...edgeTargetNode.getModel()
+                    })
+                    graph.collectOperatedItems('edge',{
+                        ...edge.getModel()
+                    })
+                    let filterKey = ['start', 'end']
+                    if(!filterKey.includes(edgeTargetNode.getModel().menuKey)) {
+                      graph.removeItem(edgeTargetNode)
+                      graph.removeItem(edge)
+                    }
+                })
+                break
+            case 'ebankApp':
+            case 'sms':
+            case 'appPush':
+            case 'intligCall':
+            case 'teleSalesPlat':
+            case 'manager':
+                self.removeChannelRelations(node.getModel(),'channel')
+                break
+            case 'channel':
+                clearChannelStageAndExecStat({type: 'node', item: node})
+                break
+            default:
+                break
+        }
+        [...node.getEdges()].forEach(edge => {
+            graph.collectOperatedItems('edge',{
+                ...edge.getModel()
+            })
+            graph.removeItem(edge)
+        })
+        graph.collectOperatedItems('node',{
+            ...node.getModel()
+        })
+        graph.removeItem(node)
+
+    });
+    graph.pushStack('delete',{
+        before:graph.operatedItems,
+        after:{}
+    })
+    // 手动触发面板事件
+    graph.emit('canvas:click')
+    // 删除渠道时，清空渠道分流方式
+    const a = '删除'
+    bus.$emit('delete', a)
+  }
+  // 移除渠道组件和渠道响应分流组件关联关系
+  removeChannelRelations(node,type) {
+      let channelRelations = window.app.$store.getters.getChannelRelations
+      if (channelRelations && channelRelations.length > 0) {
+          if (type === 'channel') {
+              channelRelations.forEach(e => {
+                  if (e.sourceId === node.id && e.sourceId === node.source) {
+                      e.sourceId = ''
+                      e.sourceType = ''
+                      e.branchIds = []
+                  }
+              })
+          }
+          if (type === 'flow') {
+              let repeatKey = -1
+              repeatKey = channelRelations.findIndex(e => e.targetId === node.id)
+              if (repeatKey >= 0) {
+                  channelRelations.splice(repeatKey,1)
+              }
+          }
+          window.app.$store.commit('UPDATE_CHANNEL_RELATIONS',channelRelations)
+      }
+  }
+  allSelect(){
+    const graph = this.get('graph');
+    graph.getNodes().forEach(function (node) {
+      graph.setItemState(node, 'active', true);
+    });
+  }
+  // 组件 - 启用
+  enable() {
+    const graph = this.get('graph');
+    let activeNodes = [this.get('graph-e')] || graph.findAllByState('node', 'active')
+    if (activeNodes.length === 0){
+      return
+    }
+    let filterKey = ['start', 'end']
+    activeNodes.forEach(node => {
+      let model = node.getModel()
+      node._cfg.model.hotDeployExecuteStatus = '0'
+      graph.updateItem(node, model)
+    })
+    let flowNode = activeNodes.filter(node => {
+      const model = node.getModel()
+      if (!filterKey.includes(model.menuKey || model.id)) {
+        if ((!(['randomFlowBranch'].includes(model.menuKey || model.id) && model.label === '其他')) && (!['evtRespFlowBranch'].includes(model.menuKey || model.id) )) {
+          return node
+        }
+      }
+    })
+    flowNode.forEach(function (node) {
+      if (!node || node.destroyed) return
+      const model = node.getModel()
+      switch (model.menuKey) {
+        // 分流节点启用、禁用，启用、禁用之后的所有分支节点
+        case 'chnlRespFlow':
+        case 'custFlow':
+        case 'labelFlow':
+        case 'randomFlow':
+        case 'evtRespFlow':
+          node.getOutEdges().forEach(edge => {
+            let targetNode = edge.getTarget()
+            let targetNodeModel = targetNode.getModel()
+            targetNodeModel.hotDeployExecuteStatus = '0'
+            graph.updateItem(targetNode, targetNodeModel)
+          })
+          break
+        default:
+          break
+      }
+    });
+  }
+  // 组件 - 停用
+  stop() {
+    const graph = this.get('graph');
+    let activeNodes = [this.get('graph-e')] || graph.findAllByState('node', 'active')
+    if (activeNodes.length === 0){
+      return
+    }
+    let filterKey = ['start', 'end']
+    activeNodes.forEach(node => {
+      let model = node.getModel()
+      node._cfg.model.hotDeployExecuteStatus = '1'
+      graph.updateItem(node, model)
+    })
+    let flowNode = activeNodes.filter(node => {
+      const model = node.getModel()
+      if (!filterKey.includes(model.menuKey || model.id)) {
+        if ((!(['randomFlowBranch'].includes(model.menuKey || model.id) && model.label === '其他')) && (!['evtRespFlowBranch'].includes(model.menuKey || model.id) )) {
+          return node
+        }
+      }
+    })
+    flowNode.forEach(function (node) {
+      if (!node || node.destroyed) return
+      const model = node.getModel()
+      switch (model.menuKey) {
+        // 分流节点删除，删除之后的所有分支节点
+        case 'chnlRespFlow':
+        case 'custFlow':
+        case 'labelFlow':
+        case 'randomFlow':
+        case 'evtRespFlow':
+          node.getOutEdges().forEach(edge => {
+            let targetNode = edge.getTarget()
+            let targetNodeModel = targetNode.getModel()
+            targetNodeModel.hotDeployExecuteStatus = '1'
+            graph.updateItem(targetNode, targetNodeModel)
+          })
+          break
+        case 'content':
+        case 'equity':
+        case 'act':
+          node.getOutEdges().forEach(edge => {
+            let targetNode = edge.getTarget()
+            let targetNodeModel = targetNode.getModel()
+            if (targetNodeModel.menuKey === 'channel') {
+              graph.removeItem(edge)
+            }
+          })
+          break
+        default:
+          break
+      }
+    });
+  }
+  // 撤销
+  /**
+   *
+   * @param {*是右键菜单点击操作+键盘操作} isMenuClick
+   * @returns
+   */
+  undo(isMenuClick){
+    const graph = this.get('graph');
+    // 右键菜单点击撤销无需考虑鼠标是否在画布内
+    if(!isMenuClick) {
+      if (!!graph.get('inCanvas') === false) return
+    }
+    const undoStack = graph.getUndoStack();
+    if (!undoStack || undoStack.length === 0) {
+      return;
+    }
+
+    const currentData = undoStack.pop();
+    
+    if (currentData) {
+      const { action } = currentData;
+      graph.pushStack(action, deepClone(currentData.data), 'redo',false);
+      let data = currentData.data.before;
+      if (action === 'add' || action === 'paste') {
+        data = currentData.data.after;
+      }
+      if (!data) return;
+      switch (action) {
+        case 'layout':
+          const {data: graphData,layout} = data
+          if (!layout) {
+            const layoutController = graph?.get('layoutController')
+            layoutController?.layoutType && layoutController.changeLayout(undefined)
+            graph.changeData(graphData)
+          } else {
+            graph.updateLayout(layout)
+          }
+          tryToFitview(graph, graph.get('fitViewPadding'))
+          break
+        case 'changedata':
+          graph.changeData(data, false);
+          break;
+        case 'update':
+          Object.keys(data).forEach((key) => {
+            const array = data[key];
+            if (!array) return;
+            array.forEach((model) => {
+              graph.updateItem(model.id, model, false);
+            });
+          });
+          break;
+        case 'delete': {
+          Object.keys(data).forEach((key) => {
+            const array = data[key];
+            if (!array) return;
+            array.forEach((model) => {
+              const {itemType,parentNodeId,id:currentId,label,form,menuKey} = model // 当前节点
+              if(parentNodeId){
+                const parentNode = graph.findById(parentNodeId)
+                const parentModel = parentNode ? parentNode.getModel() : data.nodes.find(item=>item.id === parentNodeId)
+                if(parentModel){
+                  // const fData = parentModel.form?.data || []
+                  // const positopnIndex = fData.findIndex(item=> item.id === currentId)
+                  // const hadRowId = fData.find(item => item.id === model.form.rowId)
+                  // if(positopnIndex === -1){
+                  //   if(!hadRowId){
+                  //     fData.push({
+                  //       id:model.form.rowId,
+                  //       name:label
+                  //     })
+                  //   }
+                  // }else{
+                  //   fData.splice(positopnIndex,1,{
+                  //     id:model.form.rowId,
+                  //     name:label
+                  //   })
+                  // }
+                  // positopnIndex === -1 ? fData.push({
+                  //   id:model.form.rowId,
+                  //   name:label
+                  // }) : fData.splice(positopnIndex,1,{
+                  //   id:model.form.rowId,
+                  //   name:label
+                  // })
+
+                  const fData = parentModel.form?.data || [] // 父节点中找到子元素合集
+                    if(form.rowId){ // 事件+客群分流分支中 rowId和id不同,需要单独处理
+                        const index = fData.findIndex(item=> item.id === form.rowId)
+                        index === -1 ? fData.push({
+                            id:form.rowId,
+                            name:label,
+                            order:form.order || ''
+                        }) : fData.splice(index,1,{
+                            id:form.rowId,
+                            name:label,
+                            order:form.order || '',
+                            isOther: (menuKey === 'randomFlowBranch' && form?.hiddenDelete) ? true : undefined
+                        })
+                    }else{
+                        const index = fData.findIndex(item=> item.id === currentId)
+                        index === -1 ? fData.push({
+                            id:currentId,
+                            name:label
+                        }) : fData.splice(index,1,{
+                            id:currentId,
+                            name:label
+                        })
+                    }
+                }
+              }
+              delete model.itemType;
+              graph.addItem(itemType, model, false);
+            });
+          });
+          // 手动触发面板更新
+          graph.emit('canvas:click')
+          break;
+        }
+        case 'add':
+          Object.keys(data).forEach((key) => {
+            const array = data[key];
+            if (!array) return;
+            array.forEach((model) => {
+              const {parentNodeId,id:currentId} = model
+              if(parentNodeId){
+                const parentNode = graph.findById(parentNodeId)
+                const parentModel = parentNode ? parentNode.getModel() : data.nodes.find(item=>item.id === parentNodeId)
+                if(parentModel){
+                  const fData = parentModel.form?.data || []
+                  const index = fData.findIndex(item=> item.id === currentId)
+                  index > -1 && fData.splice(index,1)
+                }
+              }
+              graph.removeItem(model.id, false);
+            });
+          });
+          // 手动触发更新对齐插件状态
+          graph.emit('afteritemstatechange', {state: 'active'})
+          // 手动触发面板更新
+          graph.emit('canvas:click')
+          break;
+        case 'paste':
+          Object.keys(data).forEach((key) => {
+            const array = data[key];
+            if (!array) return;
+            array.forEach((model) => {
+              const {parentNodeId,id:currentId} = model
+              if(parentNodeId){
+                const parentNode = graph.findById(parentNodeId)
+                const parentModel = parentNode ? parentNode.getModel() : data.nodes.find(item=>item.id === parentNodeId)
+                if(parentModel){
+                  const fData = parentModel.form?.data || []
+                  const index = fData.findIndex(item=> item.id === currentId)
+                  index > -1 && fData.splice(index,1)
+                }
+              }
+              graph.removeItem(model.id, false);
+            });
+          });
+          // 手动触发更新对齐插件状态
+          graph.emit('afteritemstatechange', {state: 'active'})
+          // 手动触发面板更新
+          graph.emit('canvas:click')
+          graph.emit('afterUndo', data)
+          break
+        default:
+      }
+    }
+  }
+  redo(val) {
+    const graph = this.get('graph');
+    if(!val){
+      if (!!graph.get('inCanvas') === false) return
+    }
+    const redoStack = graph.getRedoStack();
+
+    if (!redoStack || redoStack.length === 0) {
+      return;
+    }
+
+    const currentData = redoStack.pop();
+    if (currentData) {
+      const { action } = currentData;
+      let data = currentData.data.after;
+      graph.pushStack(action, deepClone(currentData.data),'undo',false);
+      if (action === 'delete') {
+        data = currentData.data.before;
+      }
+
+      if (!data) return;
+
+      switch (action) {
+        case 'layout':
+          const {data:graphData,layout} = data
+          if(!layout) {
+            const layoutController = graph?.get('layoutController')
+            layoutController?.layoutType && layoutController.changeLayout(undefined)
+            graph.changeData(graphData)
+          } else {
+            graph.updateLayout(layout)
+          }
+          tryToFitview(graph, graph.get('fitViewPadding'))
+          break
+        case 'changedata':
+          graph.changeData(data);
+          break;
+        case 'update':
+          Object.keys(data).forEach((key) => {
+            const array = data[key];
+            if (!array) return;
+            array.forEach((model) => {
+              graph.updateItem(model.id, model, false);
+            });
+          });
+          break;
+        case 'delete':
+          if (data.edges) {
+            data.edges.forEach((model) => {
+              graph.removeItem(model.id, false);
+            });
+          }
+          if (data.nodes) {
+            data.nodes.forEach((model) => {
+              const {parentNodeId,id:currentId} = model
+              if(parentNodeId){
+                const parentNode = graph.findById(parentNodeId)
+                const parentModel = parentNode ? parentNode.getModel() : data.nodes.find(item=>item.id === parentNodeId)
+                if(parentModel){
+                  const fData = parentModel.form?.data || []
+                  const index = fData.findIndex(item=>item.id === currentId)
+                  index > -1 && fData.splice(index,1)
+                }
+              }
+              graph.removeItem(model.id, false);
+            });
+          }
+          graph.emit('canvas:click')
+          break;
+        case 'add':
+          Object.keys(data).forEach((key) => {
+            const array = data[key];
+            if (!array) return;
+            array.forEach((model) => {
+              const {itemType,parentNodeId,id:currentId,label} = model
+              if(parentNodeId){
+                const parentNode = graph.findById(parentNodeId)
+                const parentModel = parentNode ? parentNode.getModel() : data.nodes.find(item=>item.id === parentNodeId)
+                if(parentModel){
+                  const fData = parentModel.form?.data || []
+                  const index = fData.findIndex(item=> item.id === currentId)
+                  index === -1 ? fData.push({
+                    id:currentId,
+                    name:label
+                  }) : fData.splice(index,1,{
+                    id:currentId,
+                    name:label
+                  })
+                }
+              }
+              delete model.itemType;
+              graph.addItem(itemType, model, false);
+            });
+          });
+          break;
+        case 'paste':
+            Object.keys(data).forEach((key) => {
+              const array = data[key];
+              if (!array) return;
+              array.forEach((model) => {
+                const {itemType,parentNodeId,form,id:currentId,label} = model
+                if(parentNodeId){
+                  const parentNode = graph.findById(parentNodeId)
+                  const parentModel = parentNode ? parentNode.getModel() : data.nodes.find(item=>item.id === parentNodeId)
+                  if(parentModel){
+                    const fData = parentModel.form?.data || []
+                    const index = fData.findIndex(item=>item.id === currentId)
+                    index === -1 ? fData.push({
+                      id: currentId,
+                      name: label
+                    }) : fData.splice(index,1,{
+                      id: currentId,
+                      name: label
+                    })
+                  }
+                }
+                delete model.itemType;
+                graph.addItem(itemType, model, false);
+              });
+            });
+            graph.emit('afterRedo', data)
+            break;
+        default:
+      }
+    }
+  }
+
+  addGroup() {
+    const graph = this.get('graph')
+    let edges = graph.findAllByState('edge', 'hover')
+    let hoverEdges = edges && edges.length ? edges : this.hoverEdges || []
+    bus.$emit('group', hoverEdges)
+  }
+
+  drawFlowBranch (node, now, branchs) {
+      const graph = this.get("graph");
+      let nodeModel = node.getModel()
+      // let id = 'node' + new Date().getTime()
+      // let id = nodeModel.id + 'o'
+      let form = nodeModel.form
+      let isEvtFlow = nodeModel.menuKey === 'evtRespFlow'
+      form.data.forEach((item, order) => {
+          if (item.name === '其他') {
+              order = -1
+          }
+          const branchForm = branchs.find(e => e.rowId === item.id)
+          const newBranchNode = graph.addItem('node', {
+              x: node.getBBox().x + 200,
+              y: isEvtFlow ? node.getBBox().y + (order - 1) * 100 : node.getBBox().y + (order - 1) * 50,
+              id: item.id + now,
+              menuKey: nodeModel.menuKey + 'Branch',
+              label: item.name,
+              cstonly: node._cfg.cstonly,
+              form: {
+                ...branchForm,
+                name: item.name,
+                rowId: item.id + now,
+                parentId: nodeModel.id
+              }
+          })
+          const oldNode = graph.findById(item.id)
+          graph.setItemState(oldNode, 'active', false)
+          graph.setItemState(newBranchNode, 'active', true)
+          graph.collectOperatedItems('node',{
+              ...newBranchNode.getModel()
+          })
+          // 分支与源分流添加一条线
+          const addedEdge = graph.addItem('edge', {
+              source: node._cfg.id,
+              target: item.id + now,
+              undeleteable: true,
+              sourceOffset: { x: 32, y: 0 },
+              targetOffset: { x: -80, y: 0 }
+          })
+          graph.collectOperatedItems('node',{
+              ...addedEdge.getModel()
+          })
+
+          let isEvtRespFlow = newBranchNode._cfg.model.menuKey === 'evtRespFlowBranch'
+          if (isEvtRespFlow) {
+              if (!oldNode) {
+                return
+              }
+              const outEdges = oldNode.getOutEdges()
+              outEdges.forEach(edge => {
+                const target = edge.getTarge()
+
+                this.drawEvtRespBranch(newBranchNode, target, now)
+              })
+              // this.drawEvtRespBranch(newBranchNode, 'Resp')
+              // setTimeout(() => {
+              //     // 防止非响应分支与响应分支id重复
+              //     this.drawEvtRespBranch(newBranchNode, 'NoResp')
+              // },100)
+          }
+          item.id = item.id + now
+      })
+  }
+
+  drawEvtRespBranch (node, target, now) {
+      const graph = this.get("graph");
+      let nodeModel = node.getModel()
+      const targetModel = node.getModel()
+      let id = targetModel.id + now
+      let isResp = targetModel.menuKey.indexOf('NoResp') === -1 ? true : false
+      // 向画布添加节点
+      const addedNode = graph.addItem('node', {
+          x: node.getBBox().x + 250,
+          y: isResp ? node.getBBox().y + -10 : node.getBBox().y + 50,
+          id,
+          menuKey: targetModel.menuKey,
+          // label: isResp ? '响应' : '未响应',
+          label: targetModel.label,
+          cstonly: this.cstonly,
+          form: {
+            ...targetModel.form,
+            rowId: id,
+            // name: isResp ? '响应' : '未响应',
+            parentId: nodeModel.id
+          }
+      })
+      graph.setItemState(target, 'active', false)
+      graph.setItemState(addedNode, 'active', true)
+      graph.collectOperatedItems('node',{
+          ...addedNode.getModel()
+      })
+      // 响应分支与源分支添加一条线
+      const addedEdge = graph.addItem('edge', {
+          source: node._cfg.id,
+          undeleteable: true,
+          target: id,
+          sourceOffset: { x: 80, y: 0 },
+          targetOffset: { x: -50, y: 0 }
+      })
+      graph.collectOperatedItems('edge',{
+          ...addedEdge.getModel()
+      })
+  }
+
+  destroy() {
+    const toolBar = this.get("toolBar");
+
+    if (toolBar) {
+      let container = this.get("container");
+      if (!container) {
+        container = this.get("graph").get("container");
+      }
+      container.removeChild(toolBar);
+    }
+  }
+}
+
+const checkRealGroup = async (params) => {
+  return await createCindGroup(params)
+}