lyh
2025-03-19 eb59bf31b7cdc41f09d386dfc448d7c287c6d3d3
src/views/dnc/base/modules/DeviceStructure/DeviceStructureTree.vue
@@ -1,24 +1,24 @@
<template>
  <a-card class="tree_con" :loading="cardLoading" :bordered="false" @contextmenu.native="e=>e.preventDefault()">
  <a-card class="tree_con" :loading="cardLoading" :bordered="false" @contextmenu.native.stop="openBaseContextMenu">
    <a-spin :spinning="loading">
      <div style="display: flex;flex-direction: column;height: 100%">
        <div style="display: flex">
          <a-input placeholder="输入关键字进行搜索" allowClear v-model="searchInput"
                   @change="handleSearchInputChange"/>
          <a-dropdown :trigger="['click']" placement="bottomCenter" style="margin: 0 8px">
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="expandedKeys = allTreeKeys">展开所有</a-menu-item>
              <a-menu-item key="2" @click="expandedKeys = ['-1']">合并所有</a-menu-item>
              <a-menu-item key="3" @click="getTreeDataByApi">刷新</a-menu-item>
            </a-menu>
            <a-button>
              <a-icon type="bars"/>
            </a-button>
          </a-dropdown>
          <!--          <a-dropdown :trigger="['click']" placement="bottomCenter" style="margin: 0 8px">-->
          <!--            <a-menu slot="overlay">-->
          <!--              <a-menu-item key="1" @click="expandedKeys = allTreeKeys">展开所有</a-menu-item>-->
          <!--              <a-menu-item key="2" @click="expandedKeys = ['-1']">合并所有</a-menu-item>-->
          <!--              <a-menu-item key="3" @click="getTreeDataByApi">刷新</a-menu-item>-->
          <!--            </a-menu>-->
          <!--            <a-button>-->
          <!--              <a-icon type="bars"/>-->
          <!--            </a-button>-->
          <!--          </a-dropdown>-->
        </div>
        <!--设备结构树-->
        <div style="flex: 1;overflow:auto;margin-top: 10px">
        <div id="tree-container" style="flex: 1;overflow:auto;margin-top: 10px">
          <a-tree blockNode show-icon :expandedKeys.sync="expandedKeys"
                  :selectedKeys="selectedKeys" :treeData="treeDataSource" :autoExpandParent="autoExpandParent"
                  @select="handleTreeSelect" @expand="handleTreeExpand" @rightClick="handleTreeRightClick">
@@ -37,6 +37,8 @@
    <!--权限配置弹窗-->
    <AssignPermissionModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="getTreeDataByApi"/>
    <!--产品结构树基本右键菜单(空白处触发)-->
    <DeviceStructureBaseContextMenu ref="baseContextmenuRef"/>
  </a-card>
</template>
@@ -44,10 +46,13 @@
  import dncApi from '@/api/dnc'
  import DeviceStructureTreeContextMenu from './DeviceStructureTreeContextMenu'
  import AssignPermissionModal from './Permission/AssignPermissionModal'
import DeviceStructureBaseContextMenu
  from '@views/dnc/base/modules/DeviceStructure/DeviceStructureBaseContextMenu.vue'
  export default {
    name: 'DeviceStructureTree',
    components: {
    DeviceStructureBaseContextMenu,
      AssignPermissionModal,
      DeviceStructureTreeContextMenu
    },
@@ -83,6 +88,7 @@
      this.$bus.$off('handleSwitchDeviceDocClassCode', this.setCurrentDeviceDocClassCode)
    },
    methods: {
    // 调用接口获取树的数据
      getTreeDataByApi() {
        this.loading = true
        this.cardLoading = true
@@ -106,6 +112,10 @@
          })
      },
    /**
     * 通过右侧tab栏所在activeKey设置当前设备的NC文档类型
     * @param documentActiveTabKey 右侧tab栏的activeKey
     */
      setCurrentDeviceDocClassCode(documentActiveTabKey) {
        if (documentActiveTabKey === 1) this.currentDeviceDocClassCode = 'SEND'
        else this.currentDeviceDocClassCode = 'REC'
@@ -131,6 +141,7 @@
       * @param node 节点对象
       */
      handleTreeRightClick({ event, node }) {
      if (this.$refs.baseContextmenuRef) this.$refs.baseContextmenuRef.menuVisible = false
        const record = node.dataRef
        // 若右键时当前右侧展示层级为设备层级且当前右键树层级同为设备层级时则在触发右键菜单功能时同时触发左键选中功能
        if (this.currentSelected.type === 2 && record.type === 2) this.handleTreeSelect([record.key], { node })
@@ -213,8 +224,17 @@
        }
      },
      triggerCorrespondingMethod({ methodName }) {
        if (this[methodName]) this[methodName]()
    /**
     * 树所在父元素的右键事件
     * @param event 事件对象
     */
    openBaseContextMenu(event) {
      event.preventDefault()
      if (event.target.id !== 'tree-container') return
      this.$refs.baseContextmenuRef.menuStyle.top = event.clientY + 'px'
      this.$refs.baseContextmenuRef.menuStyle.left = event.clientX + 'px'
      this.$refs.baseContextmenuRef.menuVisible = true
      document.body.addEventListener('click', this.handleBaseContextMenuClose)
      },
      /**
@@ -227,6 +247,21 @@
        } else {
          treeNode.slots = { icon: 'device' }
        }
    },
    // 控制基础右键菜单关闭
    handleBaseContextMenuClose() {
      this.$refs.baseContextmenuRef.menuVisible = false
      document.body.removeEventListener('click', this.handleBaseContextMenuClose)
    },
    // 刷新重新获取树的数据
    handleTreeReload() {
      this.getTreeDataByApi()
    },
    triggerCorrespondingMethod({ methodName }) {
      if (this[methodName]) this[methodName]()
      }
    }
  }