Commit e375268a authored by 周远喜's avatar 周远喜

Merge branch 'master' of http://git.mes123.com/zhouyx/mes-ui

parents 156e4b72 cd900c8b
<template> <template>
<transition name="contextmenu-submenu-fade"> <transition name="contextmenu-submenu-fade" v-if="show">
<div ref="menu" :class="[commonClass.menu, 'menu', customClass]" :style="{left: style.left + 'px', top: style.top + 'px', minWidth: style.minWidth + 'px', zIndex: style.zIndex}" v-if="visible" @contextmenu="(e)=>e.preventDefault()"> <div ref="menu" :class="[commonClass.menu, 'menu', customClass]" :style="{left: style.left + 'px', top: style.top + 'px', minWidth: style.minWidth + 'px', zIndex: style.zIndex}" v-if="visible" @contextmenu="(e)=>e.preventDefault()">
<div class="menu_body"> <div class="menu_body">
<template v-for="(item,index) of items"> <template v-for="(item,index) of items">
...@@ -95,18 +95,29 @@ export default { ...@@ -95,18 +95,29 @@ export default {
data: { data: {
type: Array, type: Array,
default: [] default: []
},
params: {
type: Object,
default: null
} }
}, },
mounted() { mounted() {
if (this.data != []) {
this.load(this.data)
}
},
methods: {
load(v) {
this.visible = true; this.visible = true;
this.items = this.data this.items = this.data
alert(JSON.stringify(this.items))
for (let item of this.items) { for (let item of this.items) {
if (item.icon) { if (item.icon) {
this.hasIcon = true; this.hasIcon = true;
break; break;
} }
} }
this.position.x = this.params.x
this.position.y = this.params.y
this.$nextTick(() => { this.$nextTick(() => {
const windowWidth = document.documentElement.clientWidth; const windowWidth = document.documentElement.clientWidth;
const windowHeight = document.documentElement.clientHeight; const windowHeight = document.documentElement.clientHeight;
...@@ -128,7 +139,6 @@ export default { ...@@ -128,7 +139,6 @@ export default {
} }
}); });
}, },
methods: {
leftOpen(windowWidth, windowHeight, menuWidth) { leftOpen(windowWidth, windowHeight, menuWidth) {
this.style.left = this.position.x - menuWidth; this.style.left = this.position.x - menuWidth;
this.openTrend = SUBMENU_OPEN_TREND_LEFT; this.openTrend = SUBMENU_OPEN_TREND_LEFT;
...@@ -219,6 +229,7 @@ export default { ...@@ -219,6 +229,7 @@ export default {
data(v) { data(v) {
if (v != []) { if (v != []) {
this.data = v; this.data = v;
this.load(this.data)
} }
}, },
}, },
......
<template> <template>
<div class="ib"> <div></div>
<template>
右键菜单
</template>
</div>
</template> </template>
<script> <script>
......
...@@ -653,7 +653,7 @@ export default { ...@@ -653,7 +653,7 @@ export default {
// ); // );
// }); // });
tempCol.forEach((elem) => { tempCol.forEach((elem) => {
if (e[elem.key] && e[elem.key] != "" && e[elem.key] != null) { if ((e[elem.key] && e[elem.key] != "" && e[elem.key] != null) || e[elem.key] == 0) {
//如果数据字典项对应的DirName字段存在,通过name查询到对应的code,然后赋值。 //如果数据字典项对应的DirName字段存在,通过name查询到对应的code,然后赋值。
let codeArr = []; let codeArr = [];
let keyValue = e[elem.key]; let keyValue = e[elem.key];
......
This diff is collapsed.
This diff is collapsed.
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
<MenuItem name="a4" to="/test/resource">资源选择</MenuItem> <MenuItem name="a4" to="/test/resource">资源选择</MenuItem>
<MenuItem name="a3" to="/test/view">详情拖拽排版</MenuItem> <MenuItem name="a3" to="/test/view">详情拖拽排版</MenuItem>
<MenuItem name="a5" to="/test/test1">colum验证</MenuItem> <MenuItem name="a5" to="/test/test1">colum验证</MenuItem>
<MenuItem name="a6" to="/test/test2">右键点击/点击</MenuItem>
</div> </div>
</Menu> </Menu>
</div> </div>
......
<template> <template>
<div style="width:100%;"> <div style="width:100%;">
<div class="mt50 pl10">
<h2>SubMenu</h2> <h2>SubMenu</h2>
<p><Button @click="showBmenu">showMenu</Button></p> <p><Button @click="showBmenu" ref="showBtn">左键打开菜单</Button></p>
<Submenus :show="showStatu" :data="tempItems"></Submenus> <Submenus :show="showStatu" :data="tempItems" :params="params"></Submenus>
</div>
<div class="mt50 pl10">
<h2>Bmenu</h2>
<div @contextmenu="onCon" class="tc" style="width:120px;height:40px;line-height:40px;background:#f5f5f5;border:#ccc solid 1px; border-radius: 5px;">{{message}}</div>
</div>
</div> </div>
</template> </template>
...@@ -13,8 +19,98 @@ export default { ...@@ -13,8 +19,98 @@ export default {
data() { data() {
return { return {
//submenu //submenu
showStatu: false, showStatu: false, //控件是否显示
tempItems: [{ tempItems: [], //控件数据
params: {}, //控件坐标位置
message: "右键打开菜单",
useCustomClass: false,
};
},
mounted() {
},
methods: {
showBmenu(event) {
let obj = event.target
let objSet = obj.getBoundingClientRect()
this.showStatu = true;
this.params = {
x: objSet.x,
y: objSet.bottom
};
console.log(event)
this.tempItems = [{
label: "返回(B)",
onClick: () => {
this.showStatu = false;
},
}, {
label: "前进(F)",
disabled: true,
onClick: () => {
this.showStatu = false;
},
},
{
label: "重新加载(R)",
divided: true,
icon: "el-icon-refresh",
onClick: () => {
this.showStatu = false;
},
},
{
label: "另存为(A)...",
onClick: () => {
this.showStatu = false;
},
},
{
label: "打印(P)...",
icon: "el-icon-printer",
onClick: () => {
this.showStatu = false;
},
},
{
label: "投射(C)...",
divided: true,
onClick: () => {
this.showStatu = false;
},
},
{
label: "使用网页翻译(T)",
divided: true,
minWidth: 0,
children: [{
label: "翻译成简体中文"
},
{
label: "翻译成繁体中文"
},
],
},
];
event.preventDefault();
},
onCon(event) {
this.$contextmenu({
items: [{
label: `自定义样式(${this.useCustomClass ? "开" : "关"})`,
onClick: () => {
this.useCustomClass = !this.useCustomClass;
},
},
{
label: "返回(B)",
onClick: () => {
this.message = "返回(B)";
console.log("返回(B)");
},
},
{
label: "前进(F)", label: "前进(F)",
disabled: true disabled: true
}, },
...@@ -46,19 +142,17 @@ export default { ...@@ -46,19 +142,17 @@ export default {
}, },
], ],
}, },
], {
useCustomClass: false, label: "截取网页(R)",
nametitle: 'contextmenu-submenu', minWidth: 0,
level: '', children: [{
}; label: "返回(B)",
onClick: () => {
this.message = "返回(B)";
console.log("返回(B)");
}, },
mounted() {
}, },
methods: { {
showBmenu() {
this.showStatu = true;
this.tempItems = [{
label: "前进(F)", label: "前进(F)",
disabled: true disabled: true
}, },
...@@ -90,8 +184,52 @@ export default { ...@@ -90,8 +184,52 @@ export default {
}, },
], ],
}, },
] {
} label: "截取网页(R)",
minWidth: 0,
children: [{
label: "截取可视化区域",
onClick: () => {
this.message = "截取可视化区域";
console.log("截取可视化区域");
},
},
{
label: "截取全屏"
},
],
},
{
label: "查看网页源代码(V)",
icon: "el-icon-view"
},
{
label: "检查(N)"
},
],
},
{
label: "查看网页源代码(V)",
icon: "el-icon-view"
},
{
label: "检查(N)"
},
],
event,
customClass: this.useCustomClass ? "custom-class" : "",
zIndex: 3,
minWidth: 230,
});
event.preventDefault();
},
}, },
}; };
</script> </script>
<style>
.custom-class .menu_item__available:hover {
background: #ffecf2 !important;
color: #ff4050 !important;
}
</style>
<template> <template>
<div class="router-main flex fc-m fa-m"> <div class="router-main flex fc-m fa-m pr">
<ul class="pa navMenu">
<li
class="navMenuLi flex fc-m fa-m pr"
v-for="(item, index) in menus"
:key="index"
@mouseenter="navClick(item,index)"
>
<Icon type="ios-stats" class="f16" />{{ item.name }}
</li>
</ul>
<div class="bdImg pr" @click="pageClick"> <div class="bdImg pr" @click="pageClick">
<div <div
class="one pa cursor" class="one pa cursor"
...@@ -27,9 +38,153 @@ ...@@ -27,9 +38,153 @@
<script> <script>
import { isInteger } from "lodash"; import { isInteger } from "lodash";
import viewerVue from "../test/viewer.vue";
export default { export default {
data() { data() {
return { return {
navMenus: false,
onetest: "0",
menus: [
{
name: "项目管理",
style:{
left:'260px',
top:"100px"
},
children: [
{
name: "项目管理",
type: 2,
code: "",
icon: "",
target: 0,
url: "/project/project",
status: 1,
description: "",
source: 0,
app: "mes_roter",
priority: 0,
id: 541,
title: "项目管理",
expand: true,
upId: 537,
lay: 2,
children: null,
data: null,
},
{
name: "任务中心",
type: 2,
code: "",
icon: "",
target: 0,
url: "/project/task",
status: 1,
description: "",
source: 0,
app: "mes_roter",
priority: 0,
id: 542,
title: "任务中心",
expand: true,
upId: 537,
lay: 2,
children: null,
data: null,
},
{
name: "项目资源",
type: 2,
code: "",
icon: "",
target: 0,
url: "/project/resources",
status: 1,
description: "",
source: 0,
app: "mes_roter",
priority: 0,
id: 543,
title: "项目资源",
expand: true,
upId: 537,
lay: 2,
children: null,
data: null,
},
],
},
{
name: "文档管理",
style:{
left:'260px',
top:"190px"
},
children: [
{
name: "文档分类",
type: 2,
code: "",
icon: "",
target: 0,
url: "/word/classification",
status: 1,
description: "",
source: 0,
app: "mes_roter",
priority: 0,
id: 544,
title: "文档分类",
expand: true,
upId: 539,
lay: 2,
children: null,
data: null,
},
{
name: "文档管理",
type: 2,
code: "",
icon: "",
target: 0,
url: "/word/document",
status: 1,
description: "",
source: 0,
app: "mes_roter",
priority: 0,
id: 545,
title: "文档管理",
expand: true,
upId: 539,
lay: 2,
children: null,
data: null,
},
{
name: "模板类型",
type: 2,
code: "",
icon: "",
target: 0,
url: "/word/template",
status: 1,
description: "",
source: 0,
app: "mes_roter",
priority: 0,
id: 546,
title: "模板类型",
expand: true,
upId: 539,
lay: 2,
children: null,
data: null,
},
],
},
{ name: "大屏展示" },
],
list: [], list: [],
arrList: [], arrList: [],
isIndex: -1, isIndex: -1,
...@@ -81,6 +236,17 @@ export default { ...@@ -81,6 +236,17 @@ export default {
var { left, top } = item.style; var { left, top } = item.style;
this.menuPos = { left, top }; this.menuPos = { left, top };
} }
},
navClick(v,index) {
if (v.children && v.children.length > 0) {
var { left, top } = v.style;
this.list = v.children;
this.menuPos = { left, top };
this.menu = true;
}else{
this.menu = false;
}
}, },
leavePosition() { leavePosition() {
this.oneShow = false; this.oneShow = false;
...@@ -93,6 +259,39 @@ export default { ...@@ -93,6 +259,39 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.router-main { .router-main {
height: 100%; height: 100%;
.navMenu {
z-index: 999;
top: 90px;
left: 95px;
.navMenuLi {
cursor: pointer;
width: 185px;
height: 99px;
color: #ffffff;
.ivu-icon {
margin-right: 18px;
}
}
.navMenuLi:nth-child(1) {
background: url("../../assets/images/home/router/one.png") no-repeat;
background-size: contain;
}
.navMenuLi:nth-child(2) {
background: url("../../assets/images/home/router/two.png") no-repeat;
background-size: contain;
}
.navMenuLi:nth-child(3) {
background: url("../../assets/images/home/router/three.png") no-repeat;
background-size: contain;
}
.navMenuLi:hover {
transform: scale(1.1);
}
.navChild {
cursor: pointer;
left: 167px;
}
}
.oneHover { .oneHover {
border: 2px dotted #0868da; border: 2px dotted #0868da;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment