rt-sim-training-client/src/views/trainingManage/demonMenu.vue
2022-08-30 15:43:21 +08:00

115 lines
2.7 KiB
Vue

<template>
<div>
<div class="display_top_draft">
<div class="btn_hover" @click="menuClick">菜单</div>
<el-button-group ref="button_group_box" class="button_group_box" :style="`margin-left:${btnWidth}px`">
<el-button size="small" @click="showList">实训列表</el-button>
</el-button-group>
</div>
<TrainingList ref="trainingList" @updateDetails="updateDetails" @gradeRules="gradeRules" />
<EditDetails ref="editDetails" v-dialogDrag :edit-data="editData" @openEditOperate="openEditOperate" />
<edit-operate ref="editOperate" v-dialogDrag @backStepList="backStepList" />
<grade-rules ref="gradeRules" />
</div>
</template>
<script>
import TrainingList from './trainingList.vue';
import EditDetails from './editDetails.vue';
import EditOperate from './editOperate.vue';
import GradeRules from './gradeRules.vue';
export default {
name:'DemonMenu',
components:{
TrainingList,
EditDetails,
EditOperate,
GradeRules
},
props:{
},
data() {
return {
hoverBtn: false,
btnWidth: -600,
editData: {}
};
},
computed:{
group() {
return this.$route.query.group;
},
mapId() {
return this.$route.query.mapId;
},
lineCode() {
return this.$route.query.lineCode;
}
},
mounted() {
},
methods:{
menuClick() {
this.hoverBtn = !this.hoverBtn;
if (this.hoverBtn) {
this.btnWidth = 0; // 默认宽度
} else {
this.btnWidth = -600;
}
},
showList() {
this.$refs.trainingList.doShow();
},
updateDetails(data) {
this.editData = data;
this.$refs.editDetails.doShow(data);
},
openEditOperate(data) {
console.log(data, '***');
this.$refs.editOperate.doShow(data);
},
backStepList(data) {
this.$refs.editDetails.setOperations(data);
this.$refs.editDetails.minisize();
},
gradeRules(data) {
this.$refs.gradeRules.doShow(data);
}
}
};
</script>
<style lang="scss" scoped>
/deep/ .el-dialog__wrapper{
overflow: hidden;
}
.display_top_draft{
position: absolute;
left: 5px;
top: 15px;
height: 32px;
overflow: hidden;
padding-left: 44px;
z-index: 35;
.btn_hover{
position: absolute;
left: 0;
top: 0;
z-index: 2;
color: #4e4d4d;
font-size: 14px;
background: #fff;
padding: 8px;
border-radius: 5px;
display: block;
cursor: pointer;
float: left;
height: 32px;
}
.button_group_box{
float: left;
transition: all 0.5s;
overflow: hidden;
}
}
</style>