1、MDC零件加工管理和OEE页面开发100% 2、DNC结构树取消搜索框侧边下拉菜单改为树组件空白处右键菜单

zhaowei

2025-03-19 8fbfac872e852a0ad0dbe04f2b7b69e4cff3c85c

 src/views/dnc/base/modules/ProductStructure/ProductStructureTree.vue

@@ -1,17 +1,17 @@
<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;justify-content: space-between">
          <a-input placeholder="输入关键字进行搜索" allowClear v-model="searchInput"
                   @change="handleSearchInputChange"/>
          <a-tooltip title="刷新">
            <a-button icon="reload" @click="getTreeDataByApi" style="width: 18%;margin-left: 8px"></a-button>
          </a-tooltip>
          <a-button type="primary" v-has="'product_add'" icon="plus" style="margin-left: 8px"
                    @click="$refs.productModalFormRef.triggerCorrespondingMethod({modalTitle:'添加产品',methodName:'handleProductAdd'})">
            产品
          </a-button>
          <!--          <a-tooltip title="刷新">-->
          <!--            <a-button icon="reload" @click="handleTreeReload" style="width: 18%;margin-left: 8px"></a-button>-->
          <!--          </a-tooltip>-->
          <!--          <a-button type="primary" v-has="'product_add'" icon="plus" style="margin-left: 8px"-->
          <!--                    @click="$refs.productModalFormRef.triggerCorrespondingMethod({modalTitle:'添加产品',methodName:'handleProductAdd'})">-->
          <!--            产品-->
          <!--          </a-button>-->
          <!--          <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>-->
@@ -25,7 +25,7 @@
        </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">
@@ -61,6 +61,8 @@
    <ProcessStepModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/>
    <!--权限配置弹窗-->
    <AssignPermissionModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/>
    <!--产品结构树基本右键菜单(空白处触发)-->
    <ProductStructureBaseContextMenu ref="baseContextmenuRef"/>
  </a-card>
</template>

@@ -76,10 +78,13 @@
import ProcessStepModal from './ProcessStep/ProcessStepModal'
import AssignPermissionModal from './Permission/AssignPermissionModal'
import DeviceCustomTypeModal from '@views/dnc/base/modules/ProductStructure/DeviceCustomType/DeviceCustomTypeModal.vue'
import ProductStructureBaseContextMenu
  from '@views/dnc/base/modules/ProductStructure/ProductStructureBaseContextMenu.vue'

export default {
  name: 'ProductStructureTree',
  components: {
    ProductStructureBaseContextMenu,
    DeviceCustomTypeModal,
    AssignPermissionModal,
    ProcessStepModal,
@@ -118,6 +123,7 @@
    this.$bus.$off('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
  },
  methods: {
    // 调用接口获取树的数据
    getTreeDataByApi() {
      this.loading = true
      this.cardLoading = true
@@ -180,6 +186,7 @@
     * @param node 节点对象
     */
    handleTreeRightClick({ node }) {
      if (this.$refs.baseContextmenuRef) this.$refs.baseContextmenuRef.menuVisible = false
      const that = this
      const record = node.dataRef
      const { id, type } = record
@@ -339,8 +346,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)
    },

    /**
@@ -369,7 +385,23 @@
          break
        default:
      }
    },

    // 控制基础右键菜单关闭
    handleBaseContextMenuClose() {
      this.$refs.baseContextmenuRef.menuVisible = false
      document.body.removeEventListener('click', this.handleBaseContextMenuClose)
    },

    // 刷新重新获取树的数据
    handleTreeReload() {
      this.getTreeDataByApi()
    },

    triggerCorrespondingMethod({ methodName }) {
      if (this[methodName]) this[methodName]()
    }

  }
}
</script>