1、优化产品结构树以及设备结构树、列表右键菜单重复右键后出现window菜单问题 2、优化产品结构树节点删除后的loading展示时机 3、优化产品以...

zhaowei

10 小时以前 f2d1b5615b05c002ec63db4df7164c9ed3ecc4a3

 src/views/dnc/base/modules/DeviceStructure/DeviceStructureTreeContextMenu.vue

@@ -1,18 +1,12 @@
<template>
  <a-dropdown :trigger="['contextmenu']">
    <span v-if="treeParams.title.indexOf(treeParams.searchValue) > -1">{{ treeParams.title.substr(0, treeParams.title.indexOf(treeParams.searchValue)) }}<span
      class="replaceSearch">{{ treeParams.searchValue }}</span>{{ treeParams.title.substr(treeParams.title.indexOf(treeParams.searchValue) + treeParams.searchValue.length) }}</span>
    <span v-else>{{ treeParams.title }}</span>
    <template #overlay>
      <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeParams.treeKey, menuKey)"
              @contextmenu="event=>event.preventDefault()">
        <a-menu-item v-for="item in defaultContextMenuList[getCurrentMenuLevel]" :key="item.code" v-has="item.code">
          <a-icon :type="item.icon"/>
          {{item.label}}
        </a-menu-item>
      </a-menu>
  <a-menu :style="menuStyle" @click="menuItemClick" v-if="menuVisible" mode="vertical" @contextmenu="menuContextMenu">
    <template v-for="menuItem in defaultContextMenuList[getCurrentMenuLevel]">
      <a-menu-item :key="menuItem.code" v-has="menuItem.code">
        <a-icon :type="menuItem.icon"/>
        {{ menuItem.label }}
      </a-menu-item>
    </template>
  </a-dropdown>
  </a-menu>
</template>

<script>
@@ -26,6 +20,15 @@
    },
    data() {
      return {
        menuVisible: false,
        menuStyle: {
          position: 'fixed',
          top: 0,
          left: 0,
          border: '1px solid #eee',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
          zIndex: 999
        },
        defaultContextMenuList: {
          //车间
          workshop: [
@@ -33,7 +36,7 @@
          ],
          //设备
          device: [
            { label: '导入NC文档', code: 'device_import', icon: 'import', isCommonMethod: true },
            { label: '导入NC文档', code: 'device_nc_import', icon: 'import', isCommonMethod: true },
            { label: '权限配置', code: 'public_assign_permission', icon: 'idcard', isCommonMethod: true }
          ]
        }
@@ -41,18 +44,17 @@
    },
    computed: {
      getCurrentMenuLevel() {
        if (!this.treeParams.equipmentId) return 'workshop'
        if (this.treeParams.type === 1) return 'workshop'
        else return 'device'
      }
    },
    methods: {
      onContextMenuClick(treeKey, menuKey) {
      menuItemClick({ key }) {
        const menuKey = key
        const level = this.getCurrentMenuLevel
        const { param } = this.treeParams
        const treeNodeInfo = Object.assign({}, this.treeParams, { param })
        console.log('treeNodeInfo++++++++++++++++++++++++++++', treeNodeInfo)
        if (treeNodeInfo.type === 2) treeNodeInfo.type = 4
        // 设备结构树节点中的设备层级为2，但在产品结构树中将设备层级的type设置为4，为保证两个结构树共用的方法能正常运行，因此在此处同样设置为4
        const treeNodeInfo = Object.assign({ treeKey: this.treeParams.key }, this.treeParams)
        if (treeNodeInfo.type === 2) treeNodeInfo.type = 7
        // 设备结构树节点中的设备层级为2，但在产品结构树中将设备层级的type设置为7，因此在此处设置为7
        const menuKeyArray = menuKey.split('_')
        const isCommonMethod = this.defaultContextMenuList[level].find(item => item.code === menuKey).isCommonMethod
        // product_add => handleAdd 触发对应组件事件
@@ -63,21 +65,18 @@
        } else {
          methodName = 'handle' + menuKeyArray.map(item => item[0].toUpperCase() + item.slice(1)).join('')
        }
        console.log('methodName------------------------------------', methodName)
        console.log('treeParams------------------------------------', this.treeParams)
        const modalTitle = this.defaultContextMenuList[level].find(item => item.code === menuKey).label

        this.$bus.$emit('treeMenuItemMethodTrigger', { methodName, modalTitle, treeNodeInfo })
      },

      /**
       * 避免单次重复右键后关闭菜单或打开window菜单
       * @param event 事件对象
       */
      menuContextMenu(event) {
        event.preventDefault()
        event.stopPropagation()
      }
    }
  }
</script>

<style scoped>
  .replaceSearch {
    color: #40a9ff;
    font-weight: bold;
    background-color: rgb(204, 204, 204);
  }

</style>
</script>