<template>
|
<el-row>
|
<!--产品右键菜单-->
|
<div id="proMenu" style="height: 100%">
|
<!--产品-->
|
<ul id="productContextMenu" class="contextMenu" v-show="proMenuVisible">
|
<!--刷新-->
|
<li @click="loadTree"><i class="el-icon-refresh"></i> 刷新</li>
|
<!--产品-->
|
<li v-if="contextMenuList.product_add.show" @click="showProductAddDialog"><i class="el-icon-plus"></i> 添加产品</li>
|
<li v-if="contextMenuList.product_add_child.show" class="menu_item" @click="showComponentAddDialog"><i class="el-icon-plus"></i> 添加部件</li>
|
<li v-if="contextMenuList.product_edit.show" @click="showProductEditDialog"><i class="el-icon-edit"></i> 编辑产品信息</li>
|
<li v-if="contextMenuList.product_import.show" @click="showUploadDialog"><i class="el-icon-upload2"></i> 导入其他文档</li>
|
<li v-if="contextMenuList.product_delete.show" @click="productDelete"><i class="el-icon-delete"></i> 删除</li>
|
<!-- <li v-if="contextMenuList.product_export.show" class="menu_item" @click=""><i class="el-icon-download"></i> 导出文档</li>-->
|
<!--权限配置-->
|
<li v-if="contextMenuList.public_assign_permission.show" @click="assignConfig"><i class="el-icon-edit"></i> 权限配置</li>
|
</ul>
|
<!--产品结构树空白区-->
|
<ul id="productBContextMenu" class="contextMenu" v-show="proBMenuVisible">
|
<!--刷新-->
|
<li @click="loadTree"><i class="el-icon-refresh"></i> 刷新</li>
|
<!--产品-->
|
<li v-if="contextMenuList.product_add.show" @click="showProductAddDialog"><i class="el-icon-plus"></i> 添加产品</li>
|
</ul>
|
<!--部件-->
|
<ul id="componentContextMenu" class="contextMenu" v-show="comMenuVisible">
|
<li v-if="contextMenuList.component_add.show" class="menu_item" @click="showComponentAddDialog"><i class="el-icon-plus"></i> 添加子部件</li>
|
<li v-if="contextMenuList.component_add_child.show" class="menu_item" @click="showPartAddDialog"><i class="el-icon-plus"></i> 添加零件</li>
|
<li v-if="contextMenuList.component_add_relative.show" class="menu_item" @click="showProcessAddDialog"><i class="el-icon-plus"></i> 添加工序</li>
|
<li v-if="contextMenuList.component_edit.show" @click="showComponentEditDialog"><i class="el-icon-edit"></i> 编辑部件信息</li>
|
<li v-if="contextMenuList.component_import.show" class="menu_item" @click="showUploadDialog"><i class="el-icon-upload2"></i> 导入其他文档</li>
|
<li v-if="contextMenuList.component_delete.show" @click="componentDelete"><i class="el-icon-delete"></i> 删除</li>
|
<!--<li v-if="contextMenuList.component_export.show" class="menu_item" @click=""><i class="el-icon-download"></i> 导出文档</li>-->
|
<!--权限配置-->
|
<li v-if="contextMenuList.public_assign_permission.show" @click="assignConfig"><i class="el-icon-edit"></i> 权限配置</li>
|
</ul>
|
<!--零件-->
|
<ul id="partContextMenu" class="contextMenu" v-show="partMenuVisible">
|
<li v-if="contextMenuList.parts_add.show" class="menu_item" @click="showPartAddDialog"><i class="el-icon-plus"></i> 添加零件</li>
|
<li v-if="contextMenuList.parts_edit.show" @click="showPartEditDialog"><i class="el-icon-edit"></i> 编辑零件信息</li>
|
<li v-if="contextMenuList.parts_import.show" class="menu_item" @click="showUploadDialog"><i class="el-icon-upload2"></i> 导入其他文档</li>
|
<li v-if="contextMenuList.parts_delete.show" @click="partDelete"><i class="el-icon-delete"></i> 删除</li>
|
<!-- <li v-if="contextMenuList.parts_export.show" class="menu_item" @click=""><i class="el-icon-download"></i> 导出文档</li>-->
|
<li v-if="contextMenuList.parts_add_relative.show" class="menu_item" @click="showProcessAddDialog"><i class="el-icon-plus"></i> 创建工序</li>
|
<!--权限配置-->
|
<li v-if="contextMenuList.public_assign_permission.show" @click="assignConfig"><i class="el-icon-edit"></i> 权限配置</li>
|
</ul>
|
</div>
|
</el-row>
|
</template>
|
|
<script>
|
import * as SystemApi from '../../../base/api/system'
|
export default {
|
name: "productContextMenu",
|
data(){
|
return{
|
proMenuVisible:false,
|
proBMenuVisible:false,
|
comMenuVisible:false,
|
partMenuVisible:false,
|
treeContextNode:[],
|
contextMenuList: {},
|
defaultContextMenuList: {
|
public_assign_permission: {show:false, code:'public_assign_permission'},//权限配置
|
product_add : {show:false, code : 'product_add'},//添加产品
|
product_edit : {show:false, code : 'product_edit'},//编辑产品信息
|
product_delete : {show:false, code : 'product_delete'},//删除产品
|
product_export : {show:false, code : 'product_export'},//产品-导出文档
|
product_import : {show:false, code : 'product_import'},//产品-导入文档
|
product_add_child : {show:false, code : 'product_add_child'},//产品-添加部件
|
component_add : {show:false, code : 'component_add'},//部件-添加部件
|
component_edit : {show:false, code : 'component_edit'},//编辑部件信息
|
component_delete : {show:false, code : 'component_delete'},//删除部件
|
component_import : {show:false, code : 'component_import'},//部件-导入文档
|
component_export : {show:false, code : 'component_export'},//部件-导出文档
|
component_add_child : {show:false, code : 'component_add_child'},//部件-添加零件
|
component_add_relative : {show:false, code : 'component_add_relative'},//部件-添加工序
|
parts_add : {show:false, code : 'parts_add'},//零件-添加零件
|
parts_edit : {show:false, code : 'parts_edit'},//编辑零件信息
|
parts_delete : {show:false, code : 'parts_delete'},//删除零件
|
parts_export : {show:false, code : 'parts_export'},//零件-导出文档
|
parts_import : {show:false, code : 'parts_import'},//零件-导入文档
|
parts_add_relative : {show:false, code : 'parts_add_relative'},//零件-添加工序
|
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程序
|
device_add : {show:false, code : 'device_add'},//添加设备
|
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'},//设备-导入文档
|
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'},//删除设备
|
document_delete : {show:false, code : 'document_delete'},//文档-删除文档
|
document_import : {show:false, code : 'document_import'},//文档-导入NC程序
|
document_export : {show:false, code : 'document_export'},//文档-导出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'},//文档-入库
|
file_export : {show:false, code : 'file_export'},//文件-导出NC程序
|
file_import : {show:false, code : 'file_import'},//文件-导入NC程序
|
file_assign : {show:false, code : 'file_assign'},//文件-指定当前版本
|
file_add_relative : {show:false, code : 'file_add_relative'}//比对
|
},
|
docUploadParams:''
|
}
|
},
|
methods:{
|
//加载树
|
loadTree(){
|
this.$emit('loadTree');
|
},
|
//新增产品
|
showProductAddDialog(){
|
this.$emit('showProductAddDialog');
|
},
|
//新增部件
|
showComponentAddDialog(){
|
this.$emit('showComponentAddDialog');
|
},
|
//新增零件
|
showPartAddDialog(){
|
this.$emit('showPartAddDialog');
|
},
|
//编辑产品信息
|
showProductEditDialog(){
|
this.$emit('showProductEditDialog');
|
},
|
//编辑部件信息
|
showComponentEditDialog(){
|
this.$emit('showComponentEditDialog');
|
},
|
//编辑零件信息
|
showPartEditDialog(){
|
this.$emit('showPartEditDialog');
|
},
|
//新增工序
|
showProcessAddDialog(){
|
this.$emit('showProcessAddDialog');
|
},
|
//删除产品
|
productDelete(){
|
this.$emit('productDelete');
|
},
|
//删除部件
|
componentDelete(){
|
this.$emit('componentDelete');
|
},
|
//删除零件
|
partDelete(){
|
this.$emit('partDelete');
|
},
|
//权限配置
|
assignConfig(){
|
this.$emit('assignConfig');
|
},
|
//导入文档
|
showUploadDialog(param){
|
this.$emit('showUploadDialog',this.docUploadParams);
|
},
|
treeRightClick(MouseEvent, object, Node, element,params,docUploadParams){
|
this.docUploadParams = Object.assign(docUploadParams,{docClassCode:'OTHER'});
|
this.contextMenuList = JSON.parse(JSON.stringify(this.defaultContextMenuList));
|
SystemApi.button_list(params).then((res) =>{
|
if (res.success && res.list && res.list.length) {
|
res.list.forEach((v,k) =>{
|
if(this.contextMenuList[v].code == v) {
|
this.contextMenuList[v].show = true;
|
}
|
});
|
this.closeTreeMenu();
|
let menu;
|
if (object.type == 1) {
|
this.proMenuVisible = true; // 显示产品模态窗口，跳出自定义菜单栏
|
console.log('-----打开右键菜单')
|
menu = document.querySelector('#productContextMenu');
|
}else if (object.type == 2) {
|
this.comMenuVisible = true; // 显示产品模态窗口，跳出自定义菜单栏
|
menu = document.querySelector('#componentContextMenu');
|
} else if (object.type == 3) {
|
this.partMenuVisible = true; // 显示产品模态窗口，跳出自定义菜单栏
|
menu = document.querySelector('#partContextMenu');
|
}
|
document.body.addEventListener('click',this.foo);
|
document.addEventListener('click', this.foo);// 给整个document添加监听鼠标事件，点击任何位置执行foo方法
|
menu.style.display = "block";
|
this.$nextTick(function () {
|
console.log('-----定位右键菜单')
|
menu.style.left = MouseEvent.clientX - 10 + 'px';
|
let h = document.getElementById('productTree').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('校验错误');
|
}
|
});
|
|
},
|
/* tableRightClick(row, column, event){
|
this.closeMenu();
|
// 阻止右键默认行为
|
event.preventDefault();
|
this.processMenuVisible = true;
|
let menu = document.querySelector('#processContextMenu');
|
document.addEventListener('click', this.foo);// 给整个document添加监听鼠标事件，点击任何位置执行foo方法
|
menu.style.display = "block";
|
this.$nextTick(function () {
|
menu.style.left = event.clientX - 0 + 'px';
|
let h = document.getElementById('proMenu').offsetHeight;
|
if (event.clientY - 60 + menu.clientHeight > h) {
|
menu.style.top = event.clientY - 60 - menu.clientHeight + 'px'
|
}else {
|
menu.style.top = event.clientY - 60 + 'px'
|
}
|
})
|
|
},*/
|
blankRightClick(e,params){
|
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.closeTreeMenu();
|
this.proBMenuVisible = true; // 显示产品模态窗口，跳出自定义菜单栏
|
let menu = document.querySelector('#productBContextMenu');
|
document.addEventListener('click', this.foo);// 给整个document添加监听鼠标事件，点击任何位置执行foo方法
|
menu.style.display = "block";
|
this.$nextTick(function () {
|
menu.style.left = e.clientX - 0 + 'px';
|
let h = document.getElementById('proMenu').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.message){
|
this.$message.error(res.message);
|
}
|
});
|
},
|
foo() { // 取消鼠标监听事件 菜单栏
|
console.log('关闭右键菜单 ----foo')
|
this.proMenuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
this.proBMenuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
this.comMenuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
this.partMenuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
this.proMenuVisible = false;
|
document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
|
},
|
closeTreeMenu(){
|
console.log('关闭右键菜单 ----close')
|
this.proMenuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
this.proBMenuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
this.comMenuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
this.partMenuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
|
},
|
getContextMenuList(params){
|
//this.contextMenuList = this.defaultContextMenuList;
|
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;
|
}
|
})
|
}
|
})
|
}
|
},
|
//初始化 模板渲染前调用
|
created(){
|
//this.contextMenuList = this.defaultContextMenuList;
|
this.contextMenuList = JSON.parse(JSON.stringify(this.defaultContextMenuList));
|
},
|
//监听
|
watch: {
|
//右键菜单
|
proBMenuVisible(value) {
|
if (value) {
|
document.body.addEventListener('click', this.closeTreeMenu)
|
} else {
|
document.body.removeEventListener('click', this.closeTreeMenu)
|
}
|
},
|
},
|
}
|
</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>
|
