<template>
|
<el-row>
|
<div id="fileMenu" style="height: 100%;position: absolute;top: 0;">
|
<!--文件右键菜单-->
|
<ul id="fileContextMenu" class="contextMenu" v-show="fileMenuVisible">
|
<!--<li v-if="fileContextMenuList.file_export.show" class="menu_item" @click=""><i class="el-icon-upload2"></i> 导入NC程序</li>
|
<li v-if="fileContextMenuList.file_import.show" class="menu_item" @click=""><i class="el-icon-download"></i> 导出NC程序</li>-->
|
<li v-if="fileContextMenuList.file_assign.show" @click="fileAssignVersion" ><i class="el-icon-delete"></i> 指定当前版本</li>
|
<li v-if="fileContextMenuList.file_add_relative.show" @click="showRelativeDialog"><i class="el-icon-edit"></i> 比对</li>
|
</ul>
|
</div>
|
</el-row>
|
</template>
|
|
<script>
|
import * as SystemApi from '../../../base/api/system'
|
export default {
|
name: "file_context_menu",
|
data(){
|
return{
|
fileMenuVisible:false,
|
fileContextMenuList: {},
|
defaultContextMenuList: {
|
file_assign : {show:false, code : 'file_assign'},//文件-指定当前版本
|
file_add_relative : {show:false, code : 'file_add_relative'}//比对
|
}
|
}
|
},
|
|
methods:{
|
showRelativeDialog(){
|
this.$emit('showRelativeDialog');
|
},
|
fileAssignVersion(){
|
this.$emit('fileAssignVersion');
|
},
|
fileRightClick(row, column, event,params){
|
let flag = false;
|
this.fileContextMenuList = JSON.parse(JSON.stringify(this.defaultContextMenuList));
|
SystemApi.button_list(params).then((res) =>{
|
if (res.success && res.list && res.list.length > 0) {
|
res.list.forEach((v,k) =>{
|
if(this.defaultContextMenuList[v] && this.defaultContextMenuList[v].code == v) {
|
this.fileContextMenuList[v].show = true;
|
flag = true;
|
}
|
});
|
this.closeMenu();
|
// 阻止右键默认行为
|
// event.preventDefault();
|
if(event.preventDefault){
|
event.preventDefault();
|
}
|
if (flag) {
|
this.fileMenuVisible = true;
|
}
|
let menu = document.querySelector('#fileContextMenu');
|
document.addEventListener('click', this.foo);// 给整个document添加监听鼠标事件，点击任何位置执行foo方法
|
menu.style.display = "block";
|
this.$nextTick(function () {
|
let w =document.body.offsetWidth;
|
let h = document.getElementById('deviceCon').offsetHeight;
|
if (event.clientX + 145 > w ) {
|
menu.style.left = event.clientX - 395 + 'px';
|
}else {
|
menu.style.left = event.clientX - 240 + 'px';
|
}
|
if (event.clientY + menu.clientHeight > h) {
|
menu.style.top = event.clientY -400 - menu.clientHeight + 'px'
|
}else {
|
menu.style.top = event.clientY -400 + 'px'
|
}
|
//menu.style.top = event.clientY -135 + 'px';
|
})
|
}else if(res.success){
|
this.$message.error('没有权限');
|
}else {
|
this.$message.error('校验错误');
|
}
|
})
|
},
|
foo() { // 取消鼠标监听事件 菜单栏
|
this.fileMenuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
|
},
|
closeMenu(){
|
this.fileMenuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
},
|
},
|
//初始化 模板渲染前调用
|
created(){
|
//this.contextMenuList = this.defaultContextMenuList;
|
this.fileContextMenuList = JSON.parse(JSON.stringify(this.defaultContextMenuList));
|
},
|
mounted(){
|
},
|
//监听
|
watch: {
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.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>
|
