<template>
|
<el-row>
|
<div id="deviceContextMenuDiv" style="height: 100%">
|
<!--右键设备节点-->
|
<ul id="deviceContextMenu" class="contextMenu" v-show="deviceContextVisible">
|
<!--刷新-->
|
<li @click="loadTree"><i class="el-icon-refresh"></i> 刷新</li>
|
<li v-if="contextMenuList.device_edit.show" class="menu_item" @click="showDeviceEditDialog"><i class="el-icon-plus"></i> 编辑属性</li>
|
<li v-if="contextMenuList.device_import.show" class="menu_item" @click="showDocImportDialog"><i class="el-icon-plus"></i> 导入NC文档</li>
|
<li v-if="contextMenuList.device_delete.show" class="menu_item" @click="deleteDevice"><i class="el-icon-delete"></i> 删除</li>
|
<!--<li v-if="contextMenuList.device_export.show" class="menu_item" @click=""><i class="el-icon-plus"></i> 导出NC文档</li>-->
|
<!--权限配置-->
|
<li v-if="contextMenuList.public_assign_permission.show" @click="showDeviceAssignDialog"><i class="el-icon-edit"></i> 权限配置</li>
|
</ul>
|
|
<!--设备树空白区-->
|
<ul id="deviceGroupBlankMenu" class="contextMenu" v-show="groupBlankVisible">
|
<!--刷新-->
|
<li @click="loadTree"><i class="el-icon-refresh"></i> 刷新</li>
|
<li v-if="contextMenuList.device_group_add.show" class="menu_item" @click="showGroupAddDialog"><i class="el-icon-plus"></i> 添加分组</li>
|
</ul>
|
|
<!--右键设备分组-->
|
<ul id="deviceGroupContextMenu" class="contextMenu" v-show="groupContextVisible">
|
<!--刷新-->
|
<li @click="loadTree"><i class="el-icon-refresh"></i> 刷新</li>
|
<li v-if="contextMenuList.device_group_add_child.show" class="menu_item" @click="showDeviceAddDialog"><i class="el-icon-plus"></i> 添加设备</li>
|
<li v-if="contextMenuList.device_group_add.show" class="menu_item" @click="showGroupAddChildDialog"><i class="el-icon-plus"></i> 添加子分组</li>
|
<li v-if="contextMenuList.device_group_edit.show" class="menu_item" @click="showGroupEditDialog"><i class="el-icon-plus"></i> 编辑属性</li>
|
<li v-if="contextMenuList.device_group_delete.show" class="menu_item" @click="deleteDeviceGroup"><i class="el-icon-delete"></i> 删除</li>
|
<!--权限配置-->
|
<li v-if="contextMenuList.public_assign_permission.show" @click="showGroupAssignDialog"><i class="el-icon-edit"></i> 权限配置</li>
|
</ul>
|
</div>
|
</el-row>
|
</template>
|
|
<script>
|
import * as SystemApi from '../../../base/api/system'
|
export default {
|
name: "device_context_menu",
|
props:['baseNode'],
|
data(){
|
return{
|
docUploadParams : {
|
attributionId:'',
|
attributionType:4
|
},
|
groupBlankVisible:false,
|
groupContextVisible:false,
|
deviceContextVisible:false,
|
contextMenuList: {},
|
defaultContextMenuList: {
|
public_assign_permission: {show:false, code:'public_assign_permission'},//权限配置
|
device_group_add : {show:false, code : 'device_group_add'},//设备-添加分组
|
device_group_edit : {show:false, code : 'device_group_edit'},//编辑设备信息
|
device_group_delete : {show:false, code : 'device_group_delete'},//删除设备
|
device_group_add_child : {show:false, code : 'device_group_add_child'},//添加设备
|
device_edit : {show:false, code : 'device_edit'},//编辑设备信息
|
device_delete : {show:false, code : 'device_delete'},//删除设备
|
device_export : {show:false, code : 'device_export'},//设备-导出文档
|
device_import : {show:false, code : 'device_import'},//设备-导入文档
|
}
|
}
|
},
|
methods:{
|
//加载树
|
loadTree(){
|
this.$emit('loadTree');
|
},
|
showGroupAddDialog() {
|
this.$emit('showGroupAddDialog');
|
},
|
showGroupEditDialog() {
|
this.$emit('showGroupEditDialog');
|
},
|
showDeviceAddDialog() {
|
this.$emit('showDeviceAddDialog');
|
},
|
showDeviceEditDialog() {
|
this.$emit('showDeviceEditDialog');
|
},
|
showDeviceAssignDialog() {
|
this.$emit('showDeviceAssignDialog');
|
},
|
showGroupAssignDialog() {
|
this.$emit('showGroupAssignDialog');
|
},
|
showDocImportDialog() {
|
if(this.baseNode && this.baseNode.index == 2) {
|
this.docUploadParams.attributionId=this.baseNode.list.deviceId;
|
this.$emit('showDocImportDialog', this.docUploadParams);
|
}
|
},
|
showGroupAddChildDialog() {
|
this.$emit('showGroupAddChildDialog');
|
},
|
deleteDeviceGroup(){
|
this.$emit('deleteDeviceGroup');
|
},
|
deleteDevice(){
|
this.$emit('deleteDevice');
|
},
|
treeRightClick(MouseEvent, object, Node, element, params){
|
this.closeMenu();
|
this.getContextMenuList(params).then((res) => {
|
if(res.success && res.list && res.list.length > 0) {
|
this.contextMenuList = JSON.parse(JSON.stringify(this.defaultContextMenuList));
|
res.list.forEach((v,k) =>{
|
if(this.contextMenuList[v] && this.contextMenuList[v].code == v) {
|
this.contextMenuList[v].show = true;
|
}
|
});
|
let menu;
|
if(object.type == 1) {
|
this.groupContextVisible = true; // 显示产品模态窗口，跳出自定义菜单栏
|
console.log('-----打开右键菜单')
|
menu = document.querySelector('#deviceGroupContextMenu');
|
}else if(object.type == 2) {
|
this.deviceContextVisible = true; // 显示产品模态窗口，跳出自定义菜单栏
|
console.log('-----打开右键菜单')
|
menu = document.querySelector('#deviceContextMenu');
|
}
|
document.addEventListener('click', this.foo);// 给整个document添加监听鼠标事件，点击任何位置执行foo方法
|
this.$nextTick(function () {
|
/*if(MouseEvent) {*/
|
console.log('------定位右键菜单')
|
menu.style.left = MouseEvent.clientX - 0 + 'px';
|
let h = document.getElementById('deviceContextMenuDiv').offsetHeight;
|
if (MouseEvent.clientY - 60 + menu.clientHeight > h) {
|
menu.style.top = MouseEvent.clientY - 60 - menu.clientHeight + 'px'
|
}else {
|
menu.style.top = MouseEvent.clientY - 60 + 'px'
|
}
|
/*}*/
|
})
|
}else if(res.success){
|
this.$message.error('没有权限');
|
}else {
|
this.$message.error('校验错误');
|
}
|
});
|
},
|
blankRightClick(e, param){
|
this.closeMenu();
|
this.getContextMenuList(param).then((res)=>{
|
if(res.success && res.list && res.list.length > 0) {
|
this.contextMenuList = JSON.parse(JSON.stringify(this.defaultContextMenuList));
|
res.list.forEach((v,k) =>{
|
if(this.contextMenuList[v] && this.contextMenuList[v].code == v) {
|
this.contextMenuList[v].show = true;
|
}
|
})
|
let menu = document.querySelector('#deviceGroupBlankMenu');
|
document.addEventListener('click', this.foo);// 给整个document添加监听鼠标事件，点击任何位置执行foo方法
|
this.groupBlankVisible = true;
|
|
this.$nextTick(function () {
|
//debugger;
|
if(e && menu) {
|
menu.style.left = e.clientX - 0 + 'px';
|
let h = document.getElementById('deviceContextMenuDiv').offsetHeight;
|
if (e.clientY - 60 + menu.clientHeight > h) {
|
menu.style.top = e.clientY - 60 - menu.clientHeight + 'px'
|
}else {
|
menu.style.top = e.clientY - 60 + 'px'
|
}
|
}
|
})
|
}else if(res.success){
|
this.$message.error('没有权限');
|
}else {
|
this.$message.error('校验错误');
|
}
|
});
|
},
|
closeMenu() {
|
console.log('关闭右键菜单 ----close')
|
this.groupBlankVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
this.groupContextVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
this.deviceContextVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
},
|
foo() { // 取消鼠标监听事件 菜单栏
|
console.log('关闭右键菜单 ----foo')
|
this.groupBlankVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
this.groupContextVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
this.deviceContextVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
|
},
|
async getContextMenuList(params){
|
return await SystemApi.button_list(params);
|
}
|
},
|
//初始化 模板渲染前调用
|
created(){
|
//this.contextMenuList = this.defaultContextMenuList;
|
this.contextMenuList = JSON.parse(JSON.stringify(this.defaultContextMenuList));
|
},
|
//监听
|
watch: {
|
//右键菜单
|
groupBlankVisible(value) {
|
if (value) {
|
document.body.addEventListener('click', this.closeMenu)
|
} else {
|
document.body.removeEventListener('click', this.closeMenu)
|
}
|
},
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.el-row{
|
height: 100%;
|
}
|
#comMenu{
|
height: 100%;
|
}
|
.contextMenu {
|
margin: 0;
|
background: #fff;
|
width: 145px;
|
z-index: 3000;
|
position: absolute;
|
list-style-type: none;
|
padding: 5px 0;
|
border-radius: 4px;
|
font-size: 12px;
|
font-weight: 400;
|
color: #333;
|
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
|
li {
|
margin: 0;
|
padding: 7px 16px;
|
cursor: pointer;
|
list-style-type:none;
|
position: relative;
|
font-size:15px
|
}
|
li:hover {
|
background-color: #1790ff;
|
color: white;
|
}
|
}
|
</style>
|
