joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

问题：修改弹窗问题

Browse Source
This commit is contained in:
ival 2021-03-05 17:47:30 +08:00
parent a565e1f204
commit 07eaf3d8d4
2 changed files with 57 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/jmapNew/theme/components/menus/eachChildMenu.vue
View File

@ -4,29 +4,34 @@
{{ item.computedTitle?item.computedTitle(item): item.title }} {{ item.computedTitle?item.computedTitle(item): item.title }}
</span> </span>
<span v-if="isNextBtn&&item.children" class="triangle" /> <span v-if="isNextBtn&&item.children" class="triangle" />
<!-- item.title --> <ul v-if="item.children&&!className" class="nav-ul" :class="{'active' :id==index}">
<ul v-if="item.children&&!className" class="nav-ul" :class="{'active' :id==classA}">
<each-child-menu <each-child-menu
v-for="(gridChild,j) in item.children" v-for="(gridChild,j) in item.children"
:id="id+':'+j" :id="j"
:key="j" :key="j"
:index="active"
ref="eachChildMenu" ref="eachChildMenu"
:item="gridChild" :item="gridChild"
class-name="menu-li-block" class-name="menu-li-block"
:is-next-btn="isNextBtn" :is-next-btn="isNextBtn"
@active="doActive"
@close="doClose"
/> />
</ul> </ul>
<div v-if="item.children&&className" class="menu-ul-block-out"> <div v-if="item.children&&className" class="menu-ul-block-out">
<div class="menu-ul-block"> <div class="menu-ul-block">
<ul class="menu-ul" :class="{'active' :id==classA}"> <ul class="menu-ul" :class="{'active' :id==index}">
<each-child-menu <each-child-menu
v-for="(gridChild,j) in item.children" v-for="(gridChild,j) in item.children"
:id="id+':'+j" :id="j"
:key="j" :key="j"
:index="active"
ref="eachChildMenu" ref="eachChildMenu"
:item="gridChild" :item="gridChild"
class-name="menu-li-block" class-name="menu-li-block"
:is-next-btn="isNextBtn" :is-next-btn="isNextBtn"
@active="doActive"
@close="doClose"
/> />
</ul> </ul>
</div> </div>
@ -46,11 +51,17 @@ export default {
} }
}, },
id:{ id:{
type:String, type: Number,
default() { default() {
return -1; return -1;
} }
}, },
index: {
type: Number,
default() {
return -1;
}
},
className:{ className:{
type:String, type:String,
default() { default() {
@ -66,8 +77,7 @@ export default {
}, },
data() { data() {
return { return {
classA:'-1', active: -1
tempClassA: -1
}; };
}, },
computed: { computed: {
@ -88,44 +98,44 @@ export default {
}, },
hookClick(item, event) { hookClick(item, event) {
this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null }); 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 && typeof item.click == 'function') {
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
this.selectedClassA(item, this.id); this.selectedClass(item, this.id);
} else { } else {
item.click(item.operate); item.click(item.operate);
this.doClose(-1);
this.$store.dispatch('menuOperation/changeMenuBar', ''); this.$store.dispatch('menuOperation/changeMenuBar', '');
} }
} }
}, },
setClassA(index) { selectedClass(item, index) {
this.classA = index;
},
selectedClassA(item, index) {
const order = this.order || 0; const order = this.order || 0;
if (this.mode !== TrainingMode.TEACH) { // 编辑模式下可显示 if (this.mode !== TrainingMode.TEACH) { // 编辑模式下可显示
this.popupMenuA(item, index); this.popupMenu(item, index);
} else if (this.steps[order] && this.steps[order].type == 'bar') { // 操作步骤没有顶部操作顶部菜单都不可显示 } else if (this.steps[order] && this.steps[order].type == 'bar') { // 操作步骤没有顶部操作顶部菜单都不可显示
this.popupMenuA(item, index); this.popupMenu(item, index);
} }
}, },
// 弹出顶部菜单操作 popupMenu(item, index) {
popupMenuA(item, index) {
// this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
// this.clickEvent();
const operate = { const operate = {
type: 'bar', type: 'bar',
operation: item.operate.operation operation: item.operate.operation
}; };
this.$store.dispatch('training/nextNew', operate).then(({ valid }) => { this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
if (valid) { if (valid) {
this.classA = index; this.$emit('active', index);
this.$store.dispatch('menuOperation/changeMenuBar', index); this.$store.dispatch('menuOperation/changeMenuBar', index);
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true }); this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
} }
}); });
} },
doActive(index) {
this.active = index;
},
doClose() {
this.active = -1;
this.$emit('close');
}
} }
}; };
</script> </script>

76
src/jmapNew/theme/components/menus/menuBar.vue
View File

@ -1,13 +1,16 @@
<template> <template>
<div id="menuBar"> <div id="menuBar">
<div class="nav"> <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>
</div> </div>
</template> </template>
<script> <script>
import { TrainingMode } from '@/scripts/ConstDic'; import { TrainingMode } from '@/scripts/ConstDic';
// import { EventBus } from '@/scripts/event-bus';
import { State2SimulationMap } from '@/scripts/cmdPlugin/Config'; import { State2SimulationMap } from '@/scripts/cmdPlugin/Config';
import MenuContextHandler from '@/scripts/cmdPlugin/MenuContextHandler'; import MenuContextHandler from '@/scripts/cmdPlugin/MenuContextHandler';
import EachChildMenu from './eachChildMenu'; import EachChildMenu from './eachChildMenu';
@ -33,43 +36,14 @@ export default {
}, },
data() { data() {
return { return {
index: -1,
menu: [] menu: []
}; };
}, },
watch: { 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) { '$store.state.training.operatemode': function (mode) {
this.initMenu(); this.initMenu();
}, },
'$store.state.training.started': function (val) {
this.closeMenu(true);
},
'$store.state.training.prdType': function () { '$store.state.training.prdType': function () {
this.initMenu(); this.initMenu();
} }
@ -87,17 +61,16 @@ export default {
initMenu(menu) { initMenu(menu) {
const type = State2SimulationMap[this.$store.state.training.prdType]; const type = State2SimulationMap[this.$store.state.training.prdType];
this.menu = MenuContextHandler.menuBarConvert(this.menuNormal[type], this.$store.state.training.operatemode); this.menu = MenuContextHandler.menuBarConvert(this.menuNormal[type], this.$store.state.training.operatemode);
// this.clickEvent(); this.clickEvent();
this.closeMenu(true); },
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) { noShowingChildren(children) {
if (!children || children.length <= 0) { if (!children || children.length <= 0) {
return true; return true;
@ -110,16 +83,15 @@ export default {
} }
return false; return false;
}, },
closeMenu(flag) { doActie(index) {
if (flag || (this.mode !== TrainingMode.EDIT && this.mode !== TrainingMode.TEACH)) { this.index = index;
this.$store.dispatch('menuOperation/changeMenuBar', ''); },
} doClose() {
}, this.index = -1;
doClose() { },
// this.$nextTick(() => { closeMenu() {
// EventBus.$emit('closeMenu'); // 兼容以前
// }); }
}
} }
}; };
</script> </script>