rt-sim-training-client/src/views/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"
          @node-contextmenu="showContextMenu"
          @node-expand="nodeExpand"
          @node-collapse="nodeCollapse"
        >
          <span slot-scope="{ node }">
            <span
              class="el-icon-tickets"
            />
            <span v-if="node.data.id ==='Simulation'">&nbsp;仿真系统</span>
            <span v-else>&nbsp;{{ node.data.name }}</span>
          </span>
        </el-tree>
      </div>
    </div>
  </div>
</template>
<script>
import { getSubSystemInfo } from '@/api/trainingPlatform';
import { UrlConfig } from '@/scripts/ConstDic';
import localStore from 'storejs';
import { getSessionStorage } from '@/utils/auth';

export default {
    name: 'DemonList',
    data() {
        return {
            loading: false,
            defaultShowKeys: [],
            filterText: '',
            treeList: [],
            selected: {},
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            node: {
            },
            mapId: '',
            expandList: [],
            filterSelect: ''
        };
    },
    computed: {
        userId() {
            return this.$store.state.user.id;
        },
        project() {
            return getSessionStorage('project');
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    beforeDestroy () {
    },
    mounted() {

    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        showContextMenu(e, obj, node, vueElem) {
            if (obj) {
                this.node = node;
                this.selected = obj;
            }
        },
        clickEvent(obj, data, ele) {
            localStore.set('trainingPlatformCheckId' + this.filterSelect + this.userId, obj.id);
            while (data) {
                if (data.data.type === 'Map') {
                    this.mapId = data.data.id;
                    break;
                }
                data = data.parent;
            }
            console.log(obj, data, ele);
        },
        setLocalRoute(path) {
            localStore.set('trainingPlatformRoute' + this.userId, path);
        },
        forTree(item) {
            item.children && item.children.forEach(childrenItem => {
                childrenItem.key = item.id + childrenItem.id + childrenItem.type;
                if (childrenItem.children && childrenItem.children.length) {
                    this.forTree(childrenItem);
                }
            });
        },
        nodeExpand(obj, node, ele) {
            const key = obj.id + obj.type;
            this.expandList = this.expandList.filter(item => item !== key);
            this.expandList.push(key);
            localStore.set('trainIngPlatformExpandList' + this.filterSelect + this.userId, this.expandList);
        },
        nodeCollapse(obj, node, ele) {
            const key = obj.id + obj.type;
            this.expandList = this.expandList.filter(item => item !== key);
            localStore.set('trainIngPlatformExpandList' + this.filterSelect + this.userId, this.expandList);
        },
        getExpandList(filterSelect) {
            let expand = localStore.get('trainIngPlatformExpandList' + filterSelect + this.userId);
            expand = expand ? (expand + '').split(',') : '';
            if (expand instanceof Array) {
                this.expandList = expand;
            }
        }
    }
};
</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>