<template>
|
<el-row>
|
<div id="comMenu" style="height: 100%">
|
<!--工序-->
|
<ul id="processContextMenu" class="contextMenu" v-show="processMenuVisible">
|
<li v-if="contextMenuList.process_add.show" class="menu_item" @click="showProcessAddDialog"><i class="el-icon-plus"></i> 创建工序</li>
|
<li v-if="contextMenuList.process_edit.show" @click="showProcessEditDialog"><i class="el-icon-edit"></i> 编辑工序信息</li>
|
<li v-if="contextMenuList.process_delete.show" @click="processDelete"><i class="el-icon-delete"></i> 删除</li>
|
<li v-if="contextMenuList.process_import.show" class="menu_item" @click="showUploadDialog"><i class="el-icon-upload2"></i> 导入NC程序</li>
|
<!--<li v-if="contextMenuList.process_export.show" class="menu_item" @click=""><i class="el-icon-download"></i> 导出NC程序</li>-->
|
</ul>
|
<!--工序空白区-->
|
<!--<ul id="processBContextMenu" class="contextMenu" v-show="processBMenuVisible">
|
<li v-if="contextMenuList.process_add.show" class="menu_item" @click=""><i class="el-icon-plus"></i> 创建工序</li>
|
<li v-if="contextMenuList.process_import.show" class="menu_item" @click=""><i class="el-icon-upload2"></i> 导入NC程序</li>
|
<li v-if="contextMenuList.process_export.show" class="menu_item" @click=""><i class="el-icon-download"></i> 导出NC程序</li>
|
</ul>-->
|
</div>
|
</el-row>
|
</template>
|
|
<script>
|
import * as SystemApi from '../../../base/api/system'
|
export default {
|
name: "processContextMenu",
|
data(){
|
return{
|
processMenuVisible:false,
|
treeContextNode:[],
|
contextMenuList: {},
|
defaultContextMenuList: {
|
process_add : {show:false, code : 'process_add'},//工序-添加工序
|
process_edit : {show:false, code : 'process_edit'},//编辑工序信息
|
process_delete : {show:false, code : 'process_delete'},//删除
|
process_export : {show:false, code : 'process_export'},//工序-导出NC程序
|
process_import : {show:false, code : 'process_import'},//工序-导入NC程序
|
}
|
}
|
},
|
methods:{
|
//新增工序
|
showProcessAddDialog(){
|
this.$emit('showProcessAddDialog');
|
},
|
//编辑工序信息
|
showProcessEditDialog(){
|
this.$emit('showProcessEditDialog');
|
},
|
showUploadDialog(){
|
this.$emit('showUploadDialog');
|
},
|
processDelete(){
|
this.$emit('processDelete');
|
},
|
processRightClick(row, column, event,params){
|
this.contextMenuList = JSON.parse(JSON.stringify(this.defaultContextMenuList));
|
SystemApi.button_list(params).then((res) =>{
|
let flag = false;
|
if (res.success && res.list && res.list.length>0) {
|
res.list.forEach((v,k) =>{
|
if(this.contextMenuList[v] && this.contextMenuList[v].code == v) {
|
this.contextMenuList[v].show = true;
|
flag = true;
|
}
|
});
|
this.closeMenu();
|
// 阻止右键默认行为
|
// event.preventDefault();
|
if(event.preventDefault){
|
event.preventDefault();
|
}
|
if (flag) {
|
this.processMenuVisible = true;
|
}
|
let menu = document.querySelector('#processContextMenu');
|
document.addEventListener('click', this.foo);// 给整个document添加监听鼠标事件，点击任何位置执行foo方法
|
menu.style.display = "block";
|
this.$nextTick(function () {
|
let w =document.body.offsetWidth;
|
let w1 = document.getElementById('treeDiv').offsetWidth;
|
if (event.clientX - 105 > w ) {
|
menu.style.left = event.clientX - w1-105 + 'px';
|
}else {
|
menu.style.left = event.clientX - w1 + 'px';
|
}
|
menu.style.top = event.clientY -125 + 'px';
|
//this.secondMenu();
|
})
|
}else if(res.success){
|
this.$message.error('没有权限');
|
}else {
|
this.$message.error('校验错误');
|
}
|
});
|
},
|
/*blankRightClick(event,params){
|
this.contextMenuList = JSON.parse(JSON.stringify(this.defaultContextMenuList));
|
SystemApi.button_list(params).then((res) =>{
|
if (res.success) {
|
res.list.forEach((v,k) =>{
|
if(this.contextMenuList[v].code == v) {
|
this.contextMenuList[v].show = true;
|
}
|
});
|
this.closeMenu();
|
//this.proBMenuVisible = true; // 显示产品模态窗口，跳出自定义菜单栏
|
let menu = document.querySelector('#processBContextMenu');
|
document.addEventListener('click', this.foo);// 给整个document添加监听鼠标事件，点击任何位置执行foo方法
|
menu.style.display = "block";
|
this.$nextTick(function () {
|
let w =document.body.offsetWidth;
|
if (event.clientX - 105 > w ) {
|
menu.style.left = event.clientX - 375 + 'px';
|
}else {
|
menu.style.left = event.clientX - 240 + 'px';
|
}
|
menu.style.top = event.clientY -135 + 'px';
|
//this.secondMenu();
|
})
|
}else if(res.message){
|
this.$message.error(res.message);
|
}
|
});
|
|
},*/
|
foo() { // 取消鼠标监听事件 菜单栏
|
this.processMenuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
|
},
|
closeMenu(){
|
this.processMenuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
},
|
getContextMenuList(params){
|
|
}
|
},
|
//初始化 模板渲染前调用
|
created(){
|
//this.contextMenuList = this.defaultContextMenuList;
|
this.contextMenuList = JSON.parse(JSON.stringify(this.defaultContextMenuList));
|
},
|
//监听
|
watch: {
|
//右键菜单
|
processMenuVisible(value) {
|
if (value) {
|
document.body.addEventListener('click', this.closeMenu)
|
} else {
|
document.body.removeEventListener('click', this.closeMenu)
|
}
|
},
|
processBMenuVisible(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;
|
}
|
li ul {
|
position: absolute;
|
width: 100%;
|
left: 146px;
|
/* Set 1px less than menu width */
|
top: -5px;
|
display: none;
|
}
|
li:hover ul,
|
li.over ul {
|
display: block;
|
}
|
}
|
</style>
|
