<template>
|
<el-row>
|
<div id="docContextMenuDiv" style="height: 100%;position: relative">
|
<!--NC文件-->
|
<ul id="sendDocContextMenu" class="contextMenu" v-show="sendDocVisible">
|
<li v-if="docContextMenuList.document_edit.show" @click="showDocEditDialog"><i class="el-icon-edit"></i>编辑文档信息</li>
|
<li v-if="docContextMenuList.document_import.show" class="menu_item" @click="showDocImportDialog"><i class="el-icon-upload2"></i> 导入NC程序</li>
|
<li v-if="docContextMenuList.document_download.show" class="menu_item" @click="docDownload"><i class="el-icon-download"></i> 下载</li>
|
<li v-if="docContextMenuList.document_delete.show" @click="docDelete"><i class="el-icon-delete"></i> 删除</li>
|
<li v-if="docContextMenuList.document_batch_remove.show" @click="showBatchDeleteDialog"><i class="el-icon-delete"></i> 批量删除</li>
|
<!--<li v-if="docContextMenuList.document_export.show" class="menu_item" @click=""><i class="el-icon-download"></i> 导出NC程序</li>-->
|
<li v-if="lifeCycleShow"><i class="el-icon-edit"></i> 生命周期
|
<ul id="sendDocMenu" class="contextMenu">
|
<li v-if="docContextMenuList.document_pull.show" @click="docPull" ><i class="el-icon-download"></i> 出库</li>
|
<li v-if="docContextMenuList.document_cancel_pull.show" class="menu_item" @click="docCancelPull"><i class="el-icon-refresh-right"></i> 取消出库</li>
|
<li v-if="docContextMenuList.document_push.show" @click="docPush" ><i class="el-icon-upload2"></i> 入库</li>
|
<li v-if="docContextMenuList.document_publish.show" class="menu_item" @click="docPublish"><i class="el-icon-upload2"></i> 发布</li>
|
<li v-if="docContextMenuList.document_republish.show" class="menu_item" @click="docRepublish"><i class="el-icon-refresh-right"></i> 重新发布</li>
|
<li v-if="docContextMenuList.document_pigeonhole.show" class="menu_item" @click="docPigeonhole"><i class="el-icon-delete"></i> 归档</li>
|
</ul>
|
</li>
|
</ul>
|
|
<!--NC文件-->
|
<ul id="recDocContextMenu" class="contextMenu" v-show="recDocVisible">
|
<li v-if="docContextMenuList.document_edit.show" @click="showDocEditDialog"><i class="el-icon-edit"></i>编辑文档信息</li>
|
<li v-if="docContextMenuList.document_import.show" class="menu_item" @click="showDocImportDialog"><i class="el-icon-upload2"></i> 导入NC程序</li>
|
<!--<li v-if="docContextMenuList.document_export.show" class="menu_item" @click=""><i class="el-icon-download"></i> 导出NC程序</li>-->
|
<li v-if="docContextMenuList.document_download.show" class="menu_item" @click="docDownload"><i class="el-icon-download"></i> 下载</li>
|
<li v-if="docContextMenuList.document_delete.show" @click="docDelete"><i class="el-icon-delete"></i> 删除</li>
|
<li v-if="docContextMenuList.document_batch_remove.show" @click="showBatchDeleteDialog"><i class="el-icon-delete"></i> 批量删除</li>
|
<li><i class="el-icon-edit"></i> 生命周期
|
<ul id="recDocMenu" class="contextMenu">
|
<li v-if="docContextMenuList.document_pull.show" @click="docPull" ><i class="el-icon-download"></i> 出库</li>
|
<li v-if="docContextMenuList.document_cancel_pull.show" class="menu_item" @click="docCancelPull"><i class="el-icon-refresh-right"></i> 取消出库</li>
|
<li v-if="docContextMenuList.document_push.show" @click="docPush" ><i class="el-icon-upload2"></i> 入库</li>
|
<li v-if="docContextMenuList.document_publish.show" class="menu_item" @click="docPublish"><i class="el-icon-upload2"></i> 发布</li>
|
<li v-if="docContextMenuList.document_republish.show" class="menu_item" @click="docRepublish"><i class="el-icon-refresh-right"></i> 重新发布</li>
|
<li v-if="docContextMenuList.document_pigeonhole.show" class="menu_item" @click="docPigeonhole"><i class="el-icon-delete"></i> 归档</li>
|
</ul>
|
</li>
|
</ul>
|
</div>
|
</el-row>
|
</template>
|
|
<script>
|
import * as SystemApi from '../../../base/api/system'
|
export default {
|
name: "doc_context_menu",
|
data(){
|
return{
|
sendDocVisible:false,
|
recDocVisible:false,
|
lifeCycleShow:true,
|
treeContextNode:[],
|
docContextMenuList: {},
|
defaultContextMenuList: {
|
document_import : {show:false, code : 'document_import'},//文档-导入NC程序
|
document_export : {show:false, code : 'document_export'},//文档-导出NC程序
|
document_download : {show:false, code : 'document_download'},//文档-下载NC程序
|
document_edit:{show:false, code:'document_edit'},//文档-编辑文档属性
|
document_delete : {show:false, code : 'document_delete'},//文档-删除文档
|
document_batch_remove:{show:false, code : 'document_batch_remove'},//文档-批量删除文档
|
document_publish : {show:false, code : 'document_publish'},//文档-发布
|
document_republish : {show:false, code : 'document_republish'},//文档-重发布
|
document_pigeonhole : {show:false, code : 'document_pigeonhole'},//文档-归档
|
document_pull : {show:false, code : 'document_pull'},//文档-出库
|
document_assign : {show:false, code : 'document_assign'},//文档-指派到设备
|
document_cancel_pull : {show:false, code : 'document_cancel_pull'},//文档-取消出库
|
document_push : {show:false, code : 'document_push'},//文档-入库
|
}
|
}
|
},
|
methods:{
|
sendDocRightClick(row, column, event,params){
|
this.docContextMenuList = JSON.parse(JSON.stringify(this.defaultContextMenuList));
|
SystemApi.button_list(params).then((res) =>{
|
if (res.success) {
|
let flag = false;
|
res.list.forEach((v,k) =>{
|
if(this.docContextMenuList[v] && this.docContextMenuList[v].code == v) {
|
this.docContextMenuList[v].show = true;
|
flag = true;
|
}
|
});
|
if(!this.docContextMenuList.document_publish.show &&
|
!this.docContextMenuList.document_republish.show &&
|
!this.docContextMenuList.document_pigeonhole.show &&
|
!this.docContextMenuList.document_pull.show &&
|
!this.docContextMenuList.document_cancel_pull.show &&
|
!this.docContextMenuList.document_push.show ){
|
this.lifeCycleShow = false;
|
}else {
|
this.lifeCycleShow = true;
|
}
|
this.closeMenu();
|
// 阻止右键默认行为
|
// event.preventDefault();
|
if(event.preventDefault){
|
event.preventDefault();
|
}
|
if(flag) {
|
this.sendDocVisible = true;
|
}
|
let menu = document.querySelector('#sendDocContextMenu');
|
document.addEventListener('click', this.foo);// 给整个document添加监听鼠标事件，点击任何位置执行foo方法
|
//menu.style.display = "block";
|
this.$nextTick(function () {
|
let w = document.body.offsetWidth;
|
let dw = document.getElementById('docContextMenuDiv').offsetWidth;
|
let w1 = document.getElementById('deviceTreeDiv').offsetWidth;
|
if (event.clientX + 145 > w ) {
|
menu.style.left = event.clientX - dw -w1 - 170 + 'px';
|
//document.getElementById('ncProcessMenu').style.left = '-140px';
|
}else {
|
menu.style.left = event.clientX - dw -w1 - 10 + 'px';
|
}
|
menu.style.top = event.clientY -125 + 'px';
|
if (this.lifeCycleShow) {
|
this.secondMenu(event,"sendDocContextMenu","sendDocMenu")
|
}
|
});
|
|
}else if(res.message){
|
this.$message.error(res.message);
|
}
|
})
|
},
|
secondMenu(event,parentId,id){
|
let w =document.body.offsetWidth;
|
if (event.clientX + 145 > w ) {
|
document.getElementById(id).style.left = '-145px';
|
}else {
|
document.getElementById(id).style.left = '145px';
|
}
|
if (document.all && document.getElementById) {
|
let navRoot = document.getElementById(parentId);
|
for (let i = 0; i < navRoot.childNodes.length; i++) {
|
let node = navRoot.childNodes[i];
|
if (node.nodeName == "LI") {
|
node.onmouseover = function() {
|
this.className += " over";
|
};
|
node.onmouseout = function() {
|
this.className = this.className.replace(" over", "");
|
}
|
}
|
}
|
}
|
},
|
recDocRightClick(row, column, event,params){
|
this.docContextMenuList = JSON.parse(JSON.stringify(this.defaultContextMenuList));
|
SystemApi.button_list(params).then((res) =>{
|
if (res.success) {
|
let flag = false;
|
res.list.forEach((v,k) =>{
|
if(this.docContextMenuList[v] && this.docContextMenuList[v].code == v) {
|
this.docContextMenuList[v].show = true;
|
flag = true;
|
}
|
});
|
this.closeMenu();
|
// 阻止右键默认行为
|
// event.preventDefault();
|
if(event.preventDefault){
|
event.preventDefault();
|
}
|
if(flag) {
|
this.recDocVisible = true;
|
}
|
let menu = document.querySelector('#recDocContextMenu');
|
document.addEventListener('click', this.foo);// 给整个document添加监听鼠标事件，点击任何位置执行foo方法
|
menu.style.display = "block";
|
this.$nextTick(function () {
|
let w = document.body.offsetWidth;
|
let dw = document.getElementById('docContextMenuDiv').offsetWidth;
|
let w1 = document.getElementById('deviceTreeDiv').offsetWidth;
|
if (event.clientX + 145 > w ) {
|
menu.style.left = event.clientX - dw -w1 - 170 + 'px';
|
//document.getElementById('ncProcessMenu').style.left = '-140px';
|
}else {
|
menu.style.left = event.clientX - dw -w1 - 10 + 'px';
|
}
|
menu.style.top = event.clientY -125 + 'px';
|
});
|
if (this.lifeCycleShow) {
|
this.secondMenu(event,"recDocContextMenu","recDocMenu")
|
}
|
}else if(res.message){
|
this.$message.error(res.message);
|
}
|
})
|
},
|
foo() { // 取消鼠标监听事件 菜单栏
|
this.sendDocVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
this.recDocVisible = false;
|
document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
|
},
|
closeMenu(){
|
this.sendDocVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
this.recDocVisible = false;
|
},
|
showDocEditDialog(){
|
this.$emit('showDocEditDialog');
|
},
|
showDocImportDialog() {
|
this.$emit('showDocImportDialog'); // 调用父组件传递过来的方法，同时把数据传递出去
|
},
|
/*NC文档，其他文档 下载*/
|
docDownload(){
|
this.$emit('docDownload');
|
},
|
/*文档 删除*/
|
docDelete(){
|
this.$emit('docDelete');
|
},
|
/*文档 批量删除*/
|
showBatchDeleteDialog(){
|
this.$emit('showBatchDeleteDialog');
|
},
|
/*文档 发布*/
|
docPublish(){
|
this.$emit('docPublish')
|
},
|
/*文档 重发布*/
|
docRepublish(){
|
this.$emit('docRepublish')
|
},
|
/*文档 出库*/
|
docPull(){
|
this.$emit('docPull')
|
},
|
/*文档 取消出库*/
|
docCancelPull(){
|
this.$emit('docCancelPull')
|
},
|
/*NC文档，其他文档 入库*/
|
docPush(){
|
this.$emit('docPush')
|
},
|
/*文档 归档*/
|
docPigeonhole(){
|
this.$emit('docPigeonhole')
|
}
|
},
|
//初始化 模板渲染前调用
|
created(){
|
//this.contextMenuList = this.defaultContextMenuList;
|
this.docContextMenuList = JSON.parse(JSON.stringify(this.defaultContextMenuList));
|
},
|
mounted(){
|
},
|
//监听
|
watch: {
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.el-row{
|
height: 100%;
|
}
|
#proMenu{
|
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>
|
