问题：修改弹窗问题
This commit is contained in:
ival
parent
4c649312c1
commit
4ca2403d36
@ -4,29 +4,34 @@
|
||||
{{ item.computedTitle?item.computedTitle(item): item.title }}
|
||||
</span>
|
||||
<span v-if="isNextBtn&&item.children" class="triangle" />
|
||||
<!-- item.title -->
|
||||
<ul v-if="item.children&&!className" class="nav-ul" :class="{'active' :id==classA}">
|
||||
<ul v-if="item.children&&!className" class="nav-ul" :class="{'active' :id==index}">
|
||||
<each-child-menu
|
||||
v-for="(gridChild,j) in item.children"
|
||||
:id="id+':'+j"
|
||||
:id="j"
|
||||
:key="j"
|
||||
:index="active"
|
||||
ref="eachChildMenu"
|
||||
:item="gridChild"
|
||||
class-name="menu-li-block"
|
||||
:is-next-btn="isNextBtn"
|
||||
@active="doActive"
|
||||
@close="doClose"
|
||||
/>
|
||||
</ul>
|
||||
<div v-if="item.children&&className" class="menu-ul-block-out">
|
||||
<div class="menu-ul-block">
|
||||
<ul class="menu-ul" :class="{'active' :id==classA}">
|
||||
<ul class="menu-ul" :class="{'active' :id==index}">
|
||||
<each-child-menu
|
||||
v-for="(gridChild,j) in item.children"
|
||||
:id="id+':'+j"
|
||||
:id="j"
|
||||
:key="j"
|
||||
:index="active"
|
||||
ref="eachChildMenu"
|
||||
:item="gridChild"
|
||||
class-name="menu-li-block"
|
||||
:is-next-btn="isNextBtn"
|
||||
@active="doActive"
|
||||
@close="doClose"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
@ -46,11 +51,17 @@ export default {
|
||||
}
|
||||
},
|
||||
id:{
|
||||
type:String,
|
||||
type: Number,
|
||||
default() {
|
||||
return -1;
|
||||
}
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default() {
|
||||
return -1;
|
||||
}
|
||||
},
|
||||
className:{
|
||||
type:String,
|
||||
default() {
|
||||
@ -66,8 +77,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
classA:'-1',
|
||||
tempClassA: -1
|
||||
active: -1
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -88,44 +98,44 @@ export default {
|
||||
},
|
||||
hookClick(item, event) {
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
|
||||
const idArray = this.id.split(':');
|
||||
if (idArray.length <= 1) { this.$store.dispatch('menuOperation/changeMenuBar', ''); }
|
||||
if (item && typeof item.click == 'function') {
|
||||
if (item.children && item.children.length > 0) {
|
||||
this.selectedClassA(item, this.id);
|
||||
this.selectedClass(item, this.id);
|
||||
} else {
|
||||
item.click(item.operate);
|
||||
this.doClose(-1);
|
||||
this.$store.dispatch('menuOperation/changeMenuBar', '');
|
||||
}
|
||||
}
|
||||
},
|
||||
setClassA(index) {
|
||||
this.classA = index;
|
||||
},
|
||||
selectedClassA(item, index) {
|
||||
selectedClass(item, index) {
|
||||
const order = this.order || 0;
|
||||
if (this.mode !== TrainingMode.TEACH) { // 编辑模式下可显示
|
||||
this.popupMenuA(item, index);
|
||||
this.popupMenu(item, index);
|
||||
} else if (this.steps[order] && this.steps[order].type == 'bar') { // 操作步骤没有顶部操作顶部菜单都不可显示
|
||||
this.popupMenuA(item, index);
|
||||
this.popupMenu(item, index);
|
||||
}
|
||||
},
|
||||
// 弹出顶部菜单操作
|
||||
popupMenuA(item, index) {
|
||||
// this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
|
||||
// this.clickEvent();
|
||||
popupMenu(item, index) {
|
||||
const operate = {
|
||||
type: 'bar',
|
||||
operation: item.operate.operation
|
||||
};
|
||||
this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
|
||||
if (valid) {
|
||||
this.classA = index;
|
||||
this.$emit('active', index);
|
||||
this.$store.dispatch('menuOperation/changeMenuBar', index);
|
||||
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
doActive(index) {
|
||||
this.active = index;
|
||||
},
|
||||
doClose() {
|
||||
this.active = -1;
|
||||
this.$emit('close');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,13 +1,16 @@
|
||||
<template>
|
||||
<div id="menuBar">
|
||||
<div class="nav">
|
||||
<each-child-menu v-for="(item,i) in menu" :id="''+i" :key="i" ref="eachChildMenu" :item="item" :is-next-btn="isNextBtn" />
|
||||
<each-child-menu v-for="(item,i) in menu" :id="i" :key="i" ref="eachChildMenu" :item="item" :is-next-btn="isNextBtn"
|
||||
:index="index"
|
||||
@active="doActie"
|
||||
@close="doClose"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { TrainingMode } from '@/scripts/ConstDic';
|
||||
// import { EventBus } from '@/scripts/event-bus';
|
||||
import { State2SimulationMap } from '@/scripts/cmdPlugin/Config';
|
||||
import MenuContextHandler from '@/scripts/cmdPlugin/MenuContextHandler';
|
||||
import EachChildMenu from './eachChildMenu';
|
||||
@ -33,43 +36,14 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: -1,
|
||||
menu: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.menuOperation.menuBarIndex': function (newval, oldval) {
|
||||
if ((oldval !== '' && oldval !== null)) {
|
||||
const indexArray = oldval.split(':');
|
||||
let current = this;
|
||||
if ((newval === '' || newval === null)) {
|
||||
indexArray.forEach(element => {
|
||||
current = current.$refs.eachChildMenu[element];
|
||||
current.setClassA(-1);
|
||||
});
|
||||
} else {
|
||||
const newArray = newval.split(':');
|
||||
if (newArray.length === indexArray.length) {
|
||||
indexArray.forEach(element => {
|
||||
current = current.$refs.eachChildMenu[element];
|
||||
});
|
||||
current.setClassA(-1);
|
||||
}
|
||||
if (newArray.length < indexArray.length) {
|
||||
indexArray.forEach((element, i) => {
|
||||
current = current.$refs.eachChildMenu[element];
|
||||
if (element != newArray[i]) { current.setClassA(-1); }
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
'$store.state.training.operatemode': function (mode) {
|
||||
this.initMenu();
|
||||
},
|
||||
'$store.state.training.started': function (val) {
|
||||
this.closeMenu(true);
|
||||
},
|
||||
'$store.state.training.prdType': function () {
|
||||
this.initMenu();
|
||||
}
|
||||
@ -87,17 +61,16 @@ export default {
|
||||
initMenu(menu) {
|
||||
const type = State2SimulationMap[this.$store.state.training.prdType];
|
||||
this.menu = MenuContextHandler.menuBarConvert(this.menuNormal[type], this.$store.state.training.operatemode);
|
||||
// this.clickEvent();
|
||||
this.closeMenu(true);
|
||||
this.clickEvent();
|
||||
},
|
||||
clickEvent() {
|
||||
const self = this;
|
||||
window.onclick = function (e) {
|
||||
if (document.getElementById('menuBar')) {
|
||||
self.doClose(false);
|
||||
}
|
||||
};
|
||||
},
|
||||
// clickEvent() {
|
||||
// const self = this;
|
||||
// window.onclick = function (e) {
|
||||
// if (document.getElementById('menuBar')) {
|
||||
// self.closeMenu(false);
|
||||
// }
|
||||
// };
|
||||
// },
|
||||
noShowingChildren(children) {
|
||||
if (!children || children.length <= 0) {
|
||||
return true;
|
||||
@ -110,16 +83,15 @@ export default {
|
||||
}
|
||||
return false;
|
||||
},
|
||||
closeMenu(flag) {
|
||||
if (flag || (this.mode !== TrainingMode.EDIT && this.mode !== TrainingMode.TEACH)) {
|
||||
this.$store.dispatch('menuOperation/changeMenuBar', '');
|
||||
}
|
||||
},
|
||||
doClose() {
|
||||
// this.$nextTick(() => {
|
||||
// EventBus.$emit('closeMenu');
|
||||
// });
|
||||
}
|
||||
doActie(index) {
|
||||
this.index = index;
|
||||
},
|
||||
doClose() {
|
||||
this.index = -1;
|
||||
},
|
||||
closeMenu() {
|
||||
// 兼容以前
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user