<template>
|
<el-row>
|
<div id="ncDocMenu" style="height: 100%;position: relative">
|
<!--NC文件-->
|
<ul id="ncContextMenu" class="contextMenu" v-show="ncMenuVisible">
|
<li v-if="docContextMenuList.document_edit.show" @click="showDocEditDialog"><i class="el-icon-edit"></i>编辑文档信息
|
</li>
|
<li v-if="docContextMenuList.document_assign.show" class="menu_item" @click="showAssignDeviceDialog"><i
|
class="el-icon-plus"></i> 指派到设备
|
</li>
|
<li v-if="docContextMenuList.document_import.show" class="menu_item" @click="showUploadDialog"><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 v-if="lifeCycleShow"><i class="el-icon-edit"></i> 生命周期
|
<ul id="ncProcessMenu" 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="ncBContextMenu" class="contextMenu" v-show="ncMenuBVisible">
|
<li v-if="docContextMenuList.document_import.show" class="menu_item" @click=""><i class="el-icon-upload2"></i> 导入NC程序</li>
|
</ul>-->
|
</div>
|
</el-row>
|
</template>
|
|
<script>
|
import * as SystemApi from '../../../base/api/system'
|
|
export default {
|
name: "ncDocContexttMenu",
|
data() {
|
return {
|
ncMenuVisible: false,
|
lifeCycleShow: true,
|
treeContextNode: [],
|
docContextMenuList: {},
|
defaultContextMenuList: {
|
process_export: {show: false, code: 'process_export'},//工序-导出NC程序
|
process_import: {show: false, code: 'process_import'},//工序-导入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_import: {show: false, code: 'document_import'},//文档-导入NC程序
|
document_export: {show: false, code: 'document_export'},//文档-导出NC程序
|
document_download: {show: false, code: 'document_download'},//文档-下载NC程序
|
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: {
|
showDocEditDialog() {
|
this.$emit('showDocEditDialog');
|
},
|
showUploadDialog() {
|
this.$emit('showUploadDialog');
|
},
|
showAssignDeviceDialog() {
|
this.$emit('showAssignDeviceDialog');
|
},
|
showBatchDeleteDialog() {
|
this.$emit('showBatchDeleteDialog');
|
},
|
ncDocRightClick(row, column, event, params) {
|
this.docContextMenuList = 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.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.ncMenuVisible = true;
|
}
|
let menu = document.querySelector('#ncContextMenu');
|
document.addEventListener('click', this.foo);// 给整个document添加监听鼠标事件，点击任何位置执行foo方法
|
menu.style.display = "block";
|
this.$nextTick(function () {
|
let w = document.body.offsetWidth;
|
let dw = document.getElementById('processTable').offsetWidth;
|
let w1 = document.getElementById('treeDiv').offsetWidth;
|
if (event.clientX + 145 > w) {
|
menu.style.left = event.clientX - dw - w1 - 190 + 'px';
|
document.getElementById('ncProcessMenu').style.left = '-140px';
|
} else {
|
menu.style.left = event.clientX - dw - w1 - 30 + 'px';
|
}
|
menu.style.top = event.clientY - 125 + 'px';
|
if (this.lifeCycleShow) {
|
this.secondMenu(event);
|
}
|
})
|
} else if (res.success) {
|
this.$message.error('没有权限');
|
} else {
|
this.$message.error('校验错误');
|
}
|
})
|
},
|
secondMenu(event) {
|
let w = document.body.offsetWidth;
|
if (event.clientX + 145 > w) {
|
document.getElementById('ncProcessMenu').style.left = -145 + 'px';
|
} else {
|
document.getElementById('ncProcessMenu').style.left = 145 + 'px';
|
}
|
if (document.all && document.getElementById) {
|
let navRoot = document.getElementById("ncContextMenu");
|
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", "");
|
}
|
}
|
}
|
}
|
},
|
foo() { // 取消鼠标监听事件 菜单栏
|
this.ncMenuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
|
},
|
closeMenu() {
|
this.ncMenuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
},
|
/*NC文档，其他文档 下载*/
|
docDownload() {
|
this.$emit('docDownload');
|
},
|
/*NC文档，其他文档 删除*/
|
docDelete() {
|
this.$emit('docDelete');
|
},
|
/*NC文档，其他文档 发布*/
|
docPublish() {
|
this.$emit('docPublish')
|
},
|
/*NC文档，其他文档 重发布*/
|
docRepublish() {
|
this.$emit('docRepublish')
|
},
|
/*NC文档，其他文档 出库*/
|
docPull() {
|
this.$emit('docPull')
|
},
|
/*NC文档，其他文档 取消出库*/
|
docCancelPull() {
|
this.$emit('docCancelPull')
|
},
|
/*NC文档，其他文档 入库*/
|
docPush() {
|
this.$emit('docPush')
|
},
|
/*NC文档，其他文档 归档*/
|
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>
|
