rt-sim-training-client/src/views/jsxt/competition/demonList.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`});
            } else if (obj.type === 'theory') {
                const query = {type: 'theory', mapId: this.mapId};
                this.$router.push({path: `/jsxt/examDetail`, query: query});
            } else if (obj.type === 'operation') {
                const query = {type: 'operation', mapId: this.mapId};
                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>