Merge branch 'test' of https://git.code.tencent.com/lian-cbtc/jl-client into test
This commit is contained in:
commit
b1766b0ac5
@ -1,13 +1,139 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>任务列表</div>
|
<div class="trainingPlatform" :style="'padding-left:'+(widthLeft)+'px'">
|
||||||
|
<div class="trainingPubMapList" :style="{width: widthLeft+'px'}">
|
||||||
|
<paper-list ref="paperList" @changeModuleData="changeModuleData" />
|
||||||
|
<drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style="height: 50px;text-align: center;line-height: 50px;font-size: 26px;font-weight: bolder;">{{ paperName }}</div>
|
||||||
|
<el-tabs v-model="activeModuleName" class="tabs-box" type="border-card" @tab-click="handleTabClick">
|
||||||
|
<template v-for="(mod, modIndex) in moduleList">
|
||||||
|
<el-tab-pane :key="modIndex" :label="mod.moduleName" :name="mod.customModuleId+''">
|
||||||
|
<el-card>
|
||||||
|
<div>考试时间:{{ mod.duration }}</div>
|
||||||
|
<el-tree
|
||||||
|
:data="taskTreeDatas"
|
||||||
|
node-key="id"
|
||||||
|
default-expand-all
|
||||||
|
:expand-on-click-node="false"
|
||||||
|
/>
|
||||||
|
</el-card>
|
||||||
|
<el-button type="primary" @click="beginExercise(mod.customModuleId)">开始训练</el-button>
|
||||||
|
</el-tab-pane>
|
||||||
|
</template>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import paperList from './paperList';
|
||||||
|
import drapLeft from '@/views/components/drapLeft/index';
|
||||||
|
import localStore from 'storejs';
|
||||||
|
import { getPaperDetail} from '@/api/contest';
|
||||||
|
let id = 1;
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "contestList"
|
name: 'TrainingPlatform',
|
||||||
}
|
components: {
|
||||||
|
paperList,
|
||||||
|
drapLeft
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
widthLeft: 450,
|
||||||
|
paperName:'试卷',
|
||||||
|
paperId:'',
|
||||||
|
activeModuleName:'',
|
||||||
|
moduleList:[],
|
||||||
|
moduleTreeDatas:[],
|
||||||
|
taskTreeDatas:[]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
width() {
|
||||||
|
return this.$store.state.app.width;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.widthLeft = Number(localStore.get('LeftWidth')) ? Number(localStore.get('LeftWidth')) : 450;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
drapWidth(width) {
|
||||||
|
this.widthLeft = Number(width);
|
||||||
|
},
|
||||||
|
changeModuleData(paper) {
|
||||||
|
this.paperName = paper.name;
|
||||||
|
this.paperId = paper.id;
|
||||||
|
getPaperDetail(paper.id).then((res) => {
|
||||||
|
this.moduleList = res.data.moduleVo.modules;
|
||||||
|
this.activeModuleName = this.moduleList[0].customModuleId + '';
|
||||||
|
this.moduleTreeDatas = this.moduleList.map(moduleItem=>{
|
||||||
|
let children = [];
|
||||||
|
if (moduleItem.group.length) {
|
||||||
|
children = moduleItem.group.map(taskCatalog=> this.transformTree(taskCatalog));
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
id:id++,
|
||||||
|
label:moduleItem.moduleName,
|
||||||
|
duration:moduleItem.duration,
|
||||||
|
moduleScoreRuleId:moduleItem.moduleScoreRuleId,
|
||||||
|
customModuleId:moduleItem.customModuleId,
|
||||||
|
type:'module',
|
||||||
|
children
|
||||||
|
};
|
||||||
|
});
|
||||||
|
this.taskTreeDatas = this.moduleTreeDatas[0].children;
|
||||||
|
}).catch(error => {
|
||||||
|
this.$message.error(error.message);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleTabClick(tab) {
|
||||||
|
this.taskTreeDatas = this.moduleTreeDatas.find((item)=>item.customModuleId == tab.name).children;
|
||||||
|
},
|
||||||
|
beginExercise(moduleId) {
|
||||||
|
this.$router.push({path: '/contest/detail', query:{paperId:this.paperId, moduleId }});
|
||||||
|
},
|
||||||
|
transformTree(data) {
|
||||||
|
const result = {label:data.name, children:[], id:id++, type:'taskCatalog' };
|
||||||
|
if (data.group.length) {
|
||||||
|
const changeGroup = data.group.map(taskCatalog=>
|
||||||
|
this.transformTree(taskCatalog)
|
||||||
|
);
|
||||||
|
result.children.push(...changeGroup);
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
<style scoped>
|
.trainingPlatform {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.trainingPubMapList {
|
||||||
|
position:absolute;
|
||||||
|
left:0;
|
||||||
|
top:0;
|
||||||
|
height: 100%;
|
||||||
|
background: #00172E;
|
||||||
|
}
|
||||||
|
.tabs-box{
|
||||||
|
height: calc(100% - 30px);
|
||||||
|
margin: 0 10px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: transparent;
|
||||||
|
&::-webkit-scrollbar{
|
||||||
|
background: #06284a;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb{
|
||||||
|
background: #0c0909;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-track{
|
||||||
|
background: #06284a;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
142
src/views/contest/paperList.vue
Normal file
142
src/views/contest/paperList.vue
Normal file
@ -0,0 +1,142 @@
|
|||||||
|
<template>
|
||||||
|
<div v-loading="loading" class="map-list-main">
|
||||||
|
<div id="trainingMapTree" class="left-map-list">
|
||||||
|
<div class="mapListName">
|
||||||
|
<el-form :inline="true" :model="formModel" class="demo-form-inline">
|
||||||
|
<el-form-item label="组别">
|
||||||
|
<el-select v-model="formModel.group" placeholder="请选择" clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="item in groupOption"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="赛季">
|
||||||
|
<el-select v-model="formModel.seasonId" placeholder="请选择" clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="item in seasonOptions"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.code"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="queryPaper">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<el-menu
|
||||||
|
:default-active="defaultIndex"
|
||||||
|
class="el-menu-vertical-demo"
|
||||||
|
text-color="#fff"
|
||||||
|
active-text-color="#ffd04b"
|
||||||
|
>
|
||||||
|
<template v-for="(paper,paperIndex) in paperList">
|
||||||
|
<el-menu-item :key="paperIndex" :index="paper.name" @click="showPaperDetail(paper)">
|
||||||
|
{{ paper.name }}
|
||||||
|
</el-menu-item>
|
||||||
|
</template>
|
||||||
|
</el-menu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { queryContestSeasonPaged, getPaperList} from '@/api/contest';
|
||||||
|
export default {
|
||||||
|
name: 'DemonList',
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: true,
|
||||||
|
formModel: {
|
||||||
|
seasonId: '', // 所属赛季id
|
||||||
|
group:'' // 高职和中职
|
||||||
|
},
|
||||||
|
groupOption:[{
|
||||||
|
value: 'ZZ',
|
||||||
|
label: '中职'
|
||||||
|
}, {
|
||||||
|
value: 'GZ',
|
||||||
|
label: '高职'
|
||||||
|
}],
|
||||||
|
seasonOptions:[],
|
||||||
|
paperList:[],
|
||||||
|
defaultIndex: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.loading = false;
|
||||||
|
queryContestSeasonPaged({pageSize:999}).then((res) => {
|
||||||
|
this.seasonOptions = res.data.list;
|
||||||
|
});
|
||||||
|
getPaperList({pageSize:999}).then((res) => {
|
||||||
|
this.paperList = res.data.list;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
queryPaper() {
|
||||||
|
const data = Object.assign({pageSize:999}, this.formModel);
|
||||||
|
getPaperList(data).then((res) => {
|
||||||
|
this.paperList = res.data.list;
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
showPaperDetail(paper) {
|
||||||
|
this.$emit('changeModuleData', paper);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.el-menu{
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.el-menu-item{
|
||||||
|
&:hover{
|
||||||
|
background: #00172E;
|
||||||
|
}
|
||||||
|
&:focus{
|
||||||
|
background-color: #00172E;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mapListName{
|
||||||
|
padding: 10px 0 10px 17px;
|
||||||
|
background: #01468B;
|
||||||
|
position: sticky;
|
||||||
|
position: -webkit-sticky;
|
||||||
|
border-bottom: 1px solid #00172E;
|
||||||
|
top: 0;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
.left-map-list{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: scroll;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
background: linear-gradient(to bottom, #01468B, #00172E);
|
||||||
|
&::-webkit-scrollbar{
|
||||||
|
background: #06284a;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb{
|
||||||
|
background: #0c0909;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-track{
|
||||||
|
background: #06284a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.map-list-main{
|
||||||
|
height: 100%;
|
||||||
|
display:flex;
|
||||||
|
flex-direction:column;
|
||||||
|
}
|
||||||
|
/deep/{
|
||||||
|
.el-menu{
|
||||||
|
border-right-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -218,6 +218,7 @@ export default {
|
|||||||
const targetData = this.findLabel(this.taskTreeDatas, data.id);
|
const targetData = this.findLabel(this.taskTreeDatas, data.id);
|
||||||
targetData.label = data.label;
|
targetData.label = data.label;
|
||||||
targetData.duration = data.duration;
|
targetData.duration = data.duration;
|
||||||
|
targetData.moduleScoreRuleId = data.moduleScoreRuleId;
|
||||||
}
|
}
|
||||||
|
|
||||||
} else if (type == 'taskCatalog') {
|
} else if (type == 'taskCatalog') {
|
||||||
|
Loading…
Reference in New Issue
Block a user