From b6b2c379bd92f076acd16801b1442604ea21fc5d Mon Sep 17 00:00:00 2001
From: cuilei <ray_tsu1@163.com>
Date: 星期三, 27 八月 2025 17:30:52 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/dnc/base/modules/DeviceStructure/DeviceStructureTree.vue | 185 +++++++++++++++++++++++++++++++++------------
1 files changed, 134 insertions(+), 51 deletions(-)
diff --git a/src/views/dnc/base/modules/DeviceStructure/DeviceStructureTree.vue b/src/views/dnc/base/modules/DeviceStructure/DeviceStructureTree.vue
index 1b86a5b..c2db72b 100644
--- a/src/views/dnc/base/modules/DeviceStructure/DeviceStructureTree.vue
+++ b/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"/>
@@ -37,18 +41,26 @@
<!--鏉冮檺閰嶇疆寮圭獥-->
<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
},
@@ -60,6 +72,7 @@
treeDataSource: [],
selectedKeys: [],
expandedKeys: [],
+ beforeSearchExpandedKeys: [],
searchValue: '',
dataList: [],
autoExpandParent: true,
@@ -78,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鏍忔墍鍦╝ctiveKey璁剧疆褰撳墠璁惧鐨凬C鏂囨。绫诲瀷
+ * @param documentActiveTabKey 鍙充晶tab鏍忕殑activeKey
+ */
setCurrentDeviceDocClassCode(documentActiveTabKey) {
if (documentActiveTabKey === 1) this.currentDeviceDocClassCode = 'SEND'
else this.currentDeviceDocClassCode = 'REC'
@@ -114,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
},
/**
@@ -125,10 +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)
+ this.rightClickSelected = Object.assign({ param: this.currentDeviceDocClassCode }, record)
+ this.openMainContextMenu(event)
},
/**
@@ -136,27 +162,36 @@
* @param expandedKeys 灞曞紑椤筴ey
*/
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
})
},
@@ -197,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)
},
/**
@@ -206,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]()
}
}
}
@@ -234,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;
--
Gitblit v1.9.3