rt-sim-training-client/src/views/jsxt/competition/demonList.vue
joylink_cuiweidong 0f3520a8e3 竞赛代码调整
2020-05-22 20:46:03 +08:00

121 lines
3.1 KiB
Vue

<template>
<div v-loading="loading" class="joylink-card map-list-main">
<div class="clearfix">
<span>{{ $t('global.mapList') }}</span>
</div>
<div class="left-map-list">
<div style="height: calc(100% - 76px); overflow: auto;">
<el-tree
ref="tree"
:data="treeList"
node-key="key"
:props="defaultProps"
highlight-current
:span="22"
:filter-node-method="filterNode"
:default-expanded-keys="expandList"
@node-click="clickEvent"
>
<span slot-scope="{ node }">
<span class="el-icon-tickets" />
<span>&nbsp;{{ node.data.name }}</span>
</span>
</el-tree>
</div>
</div>
</div>
</template>
<script>
import { getSessionStorage } from '@/utils/auth';
export default {
name: 'DemonList',
data() {
return {
loading: false,
treeList: [
{name: '西安考试地图', id: '13', type: 'Map', children: [
{name: '理论竞赛', type: 'theory'},
{name: '实操竞赛', type: 'operation'}
]}
],
defaultProps: {
children: 'children',
label: 'name'
},
mapId: '',
expandList: []
};
},
computed: {
userId() {
return this.$store.state.user.id;
},
project() {
return getSessionStorage('project');
}
},
watch: {
},
beforeDestroy () {
},
mounted() {
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
clickEvent(obj, data, ele) {
if (obj.type === 'Map') {
this.mapId = obj.id;
this.$router.push({ path: `/jsxt/home`, query:{raceId:this.$route.query.raceId}});
} else if (obj.type === 'theory') {
const query = {type: 'theory', mapId: this.mapId, raceId:this.$route.query.raceId};
this.$router.push({path: `/jsxt/examDetail`, query: query});
} else if (obj.type === 'operation') {
const query = {type: 'operation', mapId: this.mapId, raceId:this.$route.query.raceId};
this.$router.push({path: `/jsxt/examDetail`, query: query});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.clearfix{
width:100%;
height: 47px;
line-height: 47px;
padding-left: 17px;
position:absolute;
}
.back-home {
float: right;
cursor: pointer;
&:hover {
color: #3ea726;
}
}
.left-map-list{
width: 100%;
height: 100%;
padding-top: 47px;
}
.map-list-main{
text-align:left;
height: 100%;
position: relative;
}
</style>
<style>
.el-tree {
overflow-x: hidden;
}
.el-tree-node.is-current>.el-tree-node__content {
background-color: #e4e3e3 !important;
}
</style>