rt-sim-training-client/src/views/trainingPlatform/demonList.vue

<template>
    <el-card v-loading="loading" class="map-list-main">
        <div slot="header" class="clearfix">
            <span>{{ $t('global.mapList') }}</span>
        </div>
        <filter-city v-if="project!=='xty' " ref="filerCity" filter-empty :query-function="queryFunction" @filterSelectChange="refresh" />
        <el-input v-if="project!=='xty' " v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: (height-(project?50:125)) +'px' }">
            <el-tree
                ref="tree"
                :data="treeList"
                node-key="id"
                :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:tnode, data }">
          <span
              class="el-icon-tickets"
              :style="{color: data.valid ? 'green':''}"
          >&nbsp;{{ tnode.label }}</span>
        </span>
            </el-tree>
        </el-scrollbar>
    </el-card>
</template>
<script>
    import { getPublishMapTree } from '@/api/management/mapprd';
    import { getTrainingSystemList,getTrainingSystemListByMapId } from '@/api/trainingPlatform'
    import { UrlConfig } from '@/router/index';
    import FilterCity from '@/views/components/filterCity';
    import localStore from 'storejs';
    import { getSessionStorage } from '@/utils/auth';

    export default {
        name: 'DemonList',
        components: {
            FilterCity
        },
        props: {
            height: {
                type: Number,
                required: true
            }
        },
        data() {
            return {
                loading: true,
                defaultShowKeys: [],
                queryFunction: getPublishMapTree,
                filterText: '',
                treeList: [],
                selected: {},
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                node: {
                },
                mapId: '',
                expandList: [],
                filterSelect: ''
            };
        },
        watch: {
        },
        computed: {
            account() {
                return this.$store.state.user.account;
            },
            project() {
                return getSessionStorage('project');
            }
        },
        beforeDestroy () {
        },
        mounted() {
            if (this.project === 'xty'){
                this.projectInitData('18')
            }
        },
        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.account, obj.id);
                while (data) {
                    if (data.data.type === 'map') {
                        this.mapId = data.data.id;
                        break;
                    }
                    data = data.parent;
                }
                if (obj.type === '仿真系统') {
                    this.$router.push({ path: `${UrlConfig.trainingPlatform.prodDetail}/${this.mapId}`, query: { prodId: obj.code, type: obj.type }});
                } else if ( obj.type === 'map'){
                    this.mapId = obj.id;
                    this.$router.push({ path: `${UrlConfig.trainingPlatform.permission}/${this.mapId}`});
                } else if ( obj.type === '教学系统' ){
                    this.$router.push({ path: `${UrlConfig.trainingPlatform.teachDetail}`, query: { prodId: obj.code, type: obj.type }});
                } else if ( obj.type === '考试系统' ){
                    this.$router.push({ path: `${UrlConfig.trainingPlatform.course}/${this.mapId}`, query: { prodId: obj.code, type: obj.type }});
                } else if ( obj.type === '运行图编制'){
                    this.$router.push({ path: `${UrlConfig.trainingPlatform.runPlan}/${this.mapId}`,query:{skinCode: '02'} })
                }
                localStore.set('trainingPlatformRoute'+this.account,this.$router.history.current.fullPath);
            },
            async refresh(filterSelect) {
                this.loading = true;
                this.treeList = [];
                this.filterSelect = filterSelect;
                try {
                    const res = await getTrainingSystemList({cityCode:filterSelect});
                    this.treeList = res.data;
                    this.getExpandList(filterSelect);
                    this.changeCityWithPage(this.treeList);
                    this.$nextTick(() => {
                        const checkId = localStore.get('trainingPlatformCheckId'+filterSelect+this.account) || null;
                        this.$refs.tree && this.$refs.tree.setCurrentKey(checkId);
                        this.loading = false;
                    });
                } catch (error) {
                    this.loading = false;
                    this.$messageBox(this.$t('error.refreshFailed'));
                }
            },
            async projectInitData(mapId){
                  this.loading = true;
                  this.treeList = [];
                  try {
                      const resp = await getTrainingSystemListByMapId(mapId);
                      this.treeList = resp.data;
                      this.loading = false;
                      this.getExpandList(this.filterSelect);
                      this.$nextTick(() => {
                          const checkId = localStore.get('trainingPlatformCheckId'+this.filterSelect+this.account) || null;
                          this.$refs.tree && this.$refs.tree.setCurrentKey(checkId);
                          this.loading = false;
                      });
                  } catch (e) {
                      this.loading = false;
                      this.$messageBox(this.$t('error.failedToGetSystemData'));
                  }
            },
            nodeExpand(obj, node, ele) {
                const key = obj.id;
                this.expandList = this.expandList.filter(item => item!==key);
                this.expandList.push(key);
                localStore.set('trainIngPlatformExpandList'+this.filterSelect+this.account,this.expandList)
            },
            nodeCollapse(obj, node, ele) {
                const key = obj.id;
                this.expandList = this.expandList.filter(item => item!==key);
                localStore.set('trainIngPlatformExpandList'+this.filterSelect+this.account,this.expandList)
            },
            getExpandList(filterSelect) {
                let expand = localStore.get('trainIngPlatformExpandList'+filterSelect+this.account);
                expand = expand?(expand+'').split(','):'';
                if (expand instanceof Array){
                    this.expandList = expand;
                }
            },
            changeCityWithPage(treeList){
                if (treeList.length > 0) {
                    this.$router.push({ path: `${UrlConfig.trainingPlatform.permission}/${treeList[0].id}`});
                    this.$refs.tree.setCurrentKey(treeList[0].id);
                }
            }
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .back-home {
        float: right;
        cursor: pointer;

    &:hover {
         color: #3ea726;
     }
    }
</style>
<style>
    .el-tree {
        overflow-x: hidden;
    }

    .el-tree-node.is-current>.el-tree-node__content {
        background-color: #e4e3e3 !important;
    }
</style>