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

zhaowei

13 小时以前 f2d1b5615b05c002ec63db4df7164c9ed3ecc4a3

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

@@ -1,30 +1,34 @@
<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">
            <template slot="title" slot-scope="{ title, parentId, entity, key:treeKey,equipmentId,type}">
              <DeviceStructureTreeContextMenu ref="contextMenuRef"
                                              :treeParams="{title,treeKey,searchValue,equipmentId,entity,type,param:currentDeviceDocClassCode}"/>
            <template slot="title" slot-scope="{ title }">
              <span v-if="title.indexOf(searchValue) > -1">
                {{ title.substr(0, title.indexOf(searchValue)) }}
                <span class="replaceSearch">{{ searchValue }}</span>
                {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
              </span>
              <span v-else>{{ title }}</span>
            </template>

            <a-icon slot="switcherIcon" type="down"/>
@@ -34,17 +38,30 @@
        </div>
      </div>
    </a-spin>

    <!--权限配置弹窗-->
    <AssignPermissionModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="getTreeDataByApi"/>

    <!--设备结构树树节点右键菜单（树节点触发）-->
    <device-structure-tree-context-menu ref="mainContextmenuRef" :treeParams="rightClickSelected"/>

    <!--设备结构树基本右键菜单(空白处触发)-->
    <DeviceStructureBaseContextMenu ref="baseContextmenuRef"/>
  </a-card>
</template>

<script>
  import { mapActions } from 'vuex'
  import { deleteAction } from '@/api/manage'
  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
    },
    data() {
@@ -55,6 +72,7 @@
        treeDataSource: [],
        selectedKeys: [],
        expandedKeys: [],
        beforeSearchExpandedKeys: [],
        searchValue: '',
        dataList: [],
        autoExpandParent: true,
@@ -73,29 +91,39 @@
      this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
      this.$bus.$on('handleSwitchDeviceDocClassCode', this.setCurrentDeviceDocClassCode)
    },
    beforeDestroy() {
      this.$bus.$off('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
      this.$bus.$off('handleSwitchDeviceDocClassCode', this.setCurrentDeviceDocClassCode)
    },
    methods: {
      ...mapActions(['QueryProduction']),

      // 调用接口获取树的数据
      getTreeDataByApi() {
        this.loading = true
        this.cardLoading = true
        this.QueryProduction('DNC').then(res => {
          if (res.success) {
            this.dataList = []
            this.allTreeKeys = []
            this.treeDataSource = res.result
            this.generateList(this.treeDataSource)
            this.expandedKeys = this.allTreeKeys
            this.$bus.$emit('sendCurrentTreeNodeInfo', this.treeDataSource[0])
          } else {
            this.$message.warn(res.message)
          }
        }).finally(() => {
          this.loading = false
          this.cardLoading = false
        })
        this.treeDataSource = []
        dncApi.getDeviceTreeDataApi()
          .then(res => {
            if (res.success) {
              this.dataList = []
              this.allTreeKeys = []
              this.treeDataSource = res.result
              this.generateList(this.treeDataSource)
              this.expandedKeys = this.beforeSearchExpandedKeys = this.allTreeKeys
              this.$bus.$emit('sendDeviceTreeNodeInfo', this.treeDataSource[0])
            } else {
              this.$message.warn(res.message)
            }
          })
          .finally(() => {
            this.loading = false
            this.cardLoading = false
          })
      },

      /**
       * 通过右侧tab栏所在activeKey设置当前设备的NC文档类型
       * @param documentActiveTabKey 右侧tab栏的activeKey
       */
      setCurrentDeviceDocClassCode(documentActiveTabKey) {
        if (documentActiveTabKey === 1) this.currentDeviceDocClassCode = 'SEND'
        else this.currentDeviceDocClassCode = 'REC'
@@ -109,9 +137,10 @@
      handleTreeSelect(selectedKeys, { node }) {
        let record = node.dataRef
        this.currentSelected = Object.assign({}, record)
        this.selectedKeys = selectedKeys
        // 向右侧父级组件发送当前选中树节点信息
        this.$bus.$emit('sendCurrentTreeNodeInfo', this.currentSelected)
        this.$bus.$emit('sendDeviceTreeNodeInfo', this.currentSelected)
        if (selectedKeys.length === 0) return
        this.selectedKeys = selectedKeys
      },

      /**
@@ -120,58 +149,12 @@
       * @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 })
        this.rightClickSelected = Object.assign({}, record)
      },

      // 树节点右键单击菜单中删除按钮时触发
      handleDelete() {
        const that = this
        that.$confirm({
          title: '提示',
          content: '确认删除此条记录吗？',
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk: () => {
            if (!this.url.delete) {
              this.$message.error('请设置url.delete属性!')
              return
            }
            deleteAction(that.url.delete, { id: this.rightClickSelected.id })
              .then((res) => {
                if (res.success) {
                  that.getTreeDataByApi()
                  that.$notification.success({
                    message: '消息',
                    description: res.message
                  })
                } else {
                  that.$notification.warning({
                    message: '消息',
                    description: res.message
                  })
                }
              })
              .finally(() => {
                that.$destroyAll()
              })
          },
          onCancel: () => {
            that.$destroyAll()
          }
        })
      },

      /**
       * 自动展开添加下级节点的父节点
       */
      modalFormSubmitSuccess(isAddNextLevel) {
        // 判断是否为添加下级并且判断父节点是否展开
        if (isAddNextLevel && !this.expandedKeys.includes(this.rightClickSelected.id)) this.expandedKeys.push(this.rightClickSelected.id)
        this.getTreeDataByApi()
        this.rightClickSelected = Object.assign({ param: this.currentDeviceDocClassCode }, record)
        this.openMainContextMenu(event)
      },

      /**
@@ -179,27 +162,36 @@
       * @param expandedKeys 展开项key
       */
      handleTreeExpand(expandedKeys) {
        this.expandedKeys = expandedKeys
        this.expandedKeys = this.beforeSearchExpandedKeys = expandedKeys
        this.autoExpandParent = false
      },

      /* 输入查询内容变化时触发 */
      handleSearchInputChange() {
        let search = this.searchInput
        let expandedKeys = this.dataList
          .map(item => {
            if (item.title != null) {
              if (item.title.indexOf(search) > -1) {
                return this.getParentKey(item.key, this.treeDataSource)
        let expandedKeys
        let autoExpandParent
        if (search !== '') {
          expandedKeys = this.dataList
            .map(item => {
              if (item.title != null) {
                if (item.title.indexOf(search) > -1) {
                  return this.getParentKey(item.key, this.treeDataSource)
                }
                return null
              }
              return null
            }
          })
          .filter((item, i, self) => item && self.indexOf(item) === i)
            })
            .filter((item, i, self) => item && self.indexOf(item) === i)
          autoExpandParent = true
        } else {
          expandedKeys = this.beforeSearchExpandedKeys
          autoExpandParent = false
        }

        Object.assign(this, {
          expandedKeys,
          searchValue: search,
          autoExpandParent: true
          autoExpandParent
        })
      },

@@ -240,8 +232,29 @@
        }
      },

      triggerCorrespondingMethod({ methodName }) {
        if (this[methodName]) this[methodName]()
      /**
       * 打开树节点菜单事件
       * @param event 树节点事件对象
       */
      openMainContextMenu(event) {
        this.$refs.mainContextmenuRef.menuStyle.top = event.clientY + 'px'
        this.$refs.mainContextmenuRef.menuStyle.left = event.clientX + 'px'
        this.$refs.mainContextmenuRef.menuVisible = true
        document.body.addEventListener('click', this.handleMainContextMenuClose)
      },

      /**
       * 树所在父元素的右键事件
       * @param event 事件对象
       */
      openBaseContextMenu(event) {
        event.preventDefault()
        if (event.target.id !== 'tree-container') return
        if (this.$refs.mainContextmenuRef) this.$refs.mainContextmenuRef.menuVisible = false
        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)
      },

      /**
@@ -249,11 +262,32 @@
       * @param treeNode
       */
      setTreeNodeIcon(treeNode) {
        if (!treeNode.equipmentId) {
        if (+treeNode.type === 1) {
          treeNode.slots = { icon: 'workshop' }
        } else {
          treeNode.slots = { icon: 'device' }
        }
      },

      // 控制主要右键菜单关闭
      handleMainContextMenuClose() {
        if (this.$refs.mainContextmenuRef) this.$refs.mainContextmenuRef.menuVisible = false
        document.body.removeEventListener('click', this.handleMainContextMenuClose)
      },

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

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

      triggerCorrespondingMethod({ methodName }) {
        if (this[methodName]) this[methodName]()
      }
    }
  }
@@ -277,6 +311,12 @@
    width: 8px;
  }

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

  @media screen and (min-width: 1920px) {
    .tree_con {
      height: 748px !important;