<template>
|
<a-card class="tree_con" :loading="cardLoading" :bordered="false" @contextmenu.native="e=>e.preventDefault()">
|
<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>
|
</div>
|
|
<!--设备结构树-->
|
<div 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>
|
|
<a-icon slot="switcherIcon" type="down"/>
|
<a-icon slot="workshop" type="bank"/>
|
<a-icon slot="device" type="laptop"/>
|
</a-tree>
|
</div>
|
</div>
|
</a-spin>
|
|
<!--权限配置弹窗-->
|
<AssignPermissionModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="getTreeDataByApi"/>
|
</a-card>
|
</template>
|
|
<script>
|
import dncApi from '@/api/dnc'
|
import DeviceStructureTreeContextMenu from './DeviceStructureTreeContextMenu'
|
import AssignPermissionModal from './Permission/AssignPermissionModal'
|
|
export default {
|
name: 'DeviceStructureTree',
|
components: {
|
AssignPermissionModal,
|
DeviceStructureTreeContextMenu
|
},
|
data() {
|
return {
|
searchInput: '',
|
cardLoading: false,
|
loading: false,
|
treeDataSource: [],
|
selectedKeys: [],
|
expandedKeys: [],
|
searchValue: '',
|
dataList: [],
|
autoExpandParent: true,
|
checkStrictly: true,
|
allTreeKeys: [],
|
currentSelected: {},
|
rightClickSelected: {},
|
currentDeviceDocClassCode: 'SEND',
|
url: {
|
delete: '/nc/product/delete'
|
}
|
}
|
},
|
created() {
|
this.getTreeDataByApi()
|
this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
|
this.$bus.$on('handleSwitchDeviceDocClassCode', this.setCurrentDeviceDocClassCode)
|
},
|
methods: {
|
getTreeDataByApi() {
|
this.loading = true
|
this.cardLoading = true
|
dncApi.getDeviceTreeDataApi()
|
.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
|
})
|
},
|
|
setCurrentDeviceDocClassCode(documentActiveTabKey) {
|
if (documentActiveTabKey === 1) this.currentDeviceDocClassCode = 'SEND'
|
else this.currentDeviceDocClassCode = 'REC'
|
},
|
|
/**
|
* 树节点选中时触发
|
* @param selectedKeys 选中节点key
|
* @param {node} node 节点对象
|
*/
|
handleTreeSelect(selectedKeys, { node }) {
|
let record = node.dataRef
|
this.currentSelected = Object.assign({}, record)
|
this.selectedKeys = selectedKeys
|
// 向右侧父级组件发送当前选中树节点信息
|
this.$bus.$emit('sendCurrentTreeNodeInfo', this.currentSelected)
|
},
|
|
/**
|
* 树节点右键单击节点时触发
|
* @param event 事件对象
|
* @param node 节点对象
|
*/
|
handleTreeRightClick({ event, node }) {
|
const record = node.dataRef
|
// 若右键时当前右侧展示层级为设备层级且当前右键树层级同为设备层级时则在触发右键菜单功能时同时触发左键选中功能
|
if (this.currentSelected.type === 2 && record.type === 2) this.handleTreeSelect([record.key], { node })
|
this.rightClickSelected = Object.assign({}, record)
|
},
|
|
/**
|
* 树节点展开合并时触发
|
* @param expandedKeys 展开项key
|
*/
|
handleTreeExpand(expandedKeys) {
|
this.expandedKeys = 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)
|
}
|
return null
|
}
|
})
|
.filter((item, i, self) => item && self.indexOf(item) === i)
|
Object.assign(this, {
|
expandedKeys,
|
searchValue: search,
|
autoExpandParent: true
|
})
|
},
|
|
/**
|
* 递归获得输入项的父级key
|
* @param key 子项key
|
* @param tree 子项
|
*/
|
getParentKey(key, tree) {
|
let parentKey
|
for (let i = 0; i < tree.length; i++) {
|
const node = tree[i]
|
if (node.children) {
|
if (node.children.some(item => item.key === key)) {
|
parentKey = node.key
|
} else if (
|
this.getParentKey(key, node.children)) {
|
parentKey = this.getParentKey(key, node.children)
|
}
|
}
|
}
|
return parentKey
|
},
|
|
/**
|
* 递归获得所有树节点key
|
* @param data
|
*/
|
generateList(data) {
|
for (let i = 0; i < data.length; i++) {
|
const node = data[i]
|
const key = node.key
|
const title = node.title
|
this.dataList.push({ key, title })
|
this.allTreeKeys.push(key)
|
this.setTreeNodeIcon(node)
|
if (node.children) this.generateList(node.children)
|
}
|
},
|
|
triggerCorrespondingMethod({ methodName }) {
|
if (this[methodName]) this[methodName]()
|
},
|
|
/**
|
* 设置树节点图标
|
* @param treeNode
|
*/
|
setTreeNodeIcon(treeNode) {
|
if (!treeNode.equipmentId) {
|
treeNode.slots = { icon: 'workshop' }
|
} else {
|
treeNode.slots = { icon: 'device' }
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
/deep/ .ant-card-body {
|
padding: 0 12px 0 0;
|
}
|
|
/deep/ .ant-card-body, /deep/ .ant-spin-nested-loading, /deep/ .ant-spin-container {
|
height: 100%;
|
}
|
|
/deep/ .ant-tree-title, .ant-tree-title .ant-dropdown-trigger {
|
display: inline-block;
|
width: calc(100% - 24px) !important;
|
}
|
|
::-webkit-scrollbar {
|
width: 8px;
|
}
|
|
@media screen and (min-width: 1920px) {
|
.tree_con {
|
height: 748px !important;
|
}
|
}
|
|
@media screen and (min-width: 1680px) and (max-width: 1920px) {
|
.tree_con {
|
height: 748px !important;
|
}
|
}
|
|
@media screen and (min-width: 1400px) and (max-width: 1680px) {
|
.tree_con {
|
height: 600px !important;
|
}
|
}
|
|
@media screen and (min-width: 1280px) and (max-width: 1400px) {
|
.tree_con {
|
height: 501px !important;
|
}
|
}
|
|
@media screen and (max-width: 1280px) {
|
.tree_con {
|
height: 501px !important;
|
}
|
}
|
</style>
|
