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>
    <div style="height: calc(100% - 47px);">
      <filter-city v-if="project==='login'" ref="filerCity" filter-empty :query-function="queryFunction" :local-param-name="localParamName" @filterSelectChange="refresh" />
      <el-input v-if="project==='login'" v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
      <div style="height: 100%;">
        <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 }">
            <span
              class="el-icon-tickets"
            />
            <span v-if="node.data.id ==='Simulation'">&nbsp;{{ node.data.name+ $t('global.simulationSystem') }}</span>
            <span v-else-if="node.data.id ==='Lesson'">&nbsp;{{ node.data.name+ $t('global.lessonSystem') }}</span>
            <span v-else-if="node.data.id ==='Exam'">&nbsp;{{ node.data.name+ $t('global.examSystem') }}</span>
            <span v-else-if="node.data.id ==='Plan'">&nbsp;{{ node.data.name+ $t('global.runPlanSystem') }}</span>
            <span v-else>&nbsp;{{ node.data.name }}</span>
          </span>
        </el-tree>
      </div>
    </div>

  </el-card>
</template>
<script>
import { getPublishMapTree } from '@/api/management/mapprd';
import { getTrainingSystemList, getSubSystemInfo, getSubSystemByProjectCode } from '@/api/trainingPlatform';
import { UrlConfig } from '@/router/index';
import FilterCity from '@/views/components/filterCity';
import localStore from 'storejs';
import { getSessionStorage } from '@/utils/auth';
import { ProjectCode } from '@/scripts/ConstDic';

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: '',
            localParamName: 'training_cityCode'
        };
    },
    computed: {
        userId() {
            return this.$store.state.user.id;
        },
        project() {
            return getSessionStorage('project');
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    beforeDestroy () {
    },
    mounted() {
        if (this.project === 'xty') {
            this.refresh();
        }
    },
    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;
            }
            if ( obj.type === 'Map') {
                this.mapId = obj.id;
                this.$router.push({ path: `${UrlConfig.trainingPlatform.permission}/${this.mapId}`});
            } else if ( obj.type === 'MapSystem') {
                getSubSystemInfo(obj.id).then(resp => {
                    let router = '';
                    switch (resp.data.type) {
                    case 'Exam':
                        this.setLocalRoute(`${UrlConfig.trainingPlatform.examHome}/${obj.id}`);
                        router = localStore.get('examDetail' + obj.id);
                        if (router) {
                            this.$router.push(router);
                        } else {
                            this.$router.push({ path: `${UrlConfig.trainingPlatform.examHome}/${obj.id}`});
                        }
                        break;
                    case 'Lesson':
                        this.setLocalRoute(`${UrlConfig.trainingPlatform.teachHome}/${obj.id}`);
                        router = localStore.get('teachDetail' + obj.id);
                        if (router) {
                            this.$router.push(router);
                        } else {
                            this.$router.push({ path: `${UrlConfig.trainingPlatform.teachHome}/${obj.id}`});
                        }
                        break;
                    case 'Simulation':
                        this.setLocalRoute(`${UrlConfig.trainingPlatform.prodDetail}/${obj.id}?mapId=${this.mapId}`);
                        this.$router.push({ path: `${UrlConfig.trainingPlatform.prodDetail}/${obj.id}`, query: { mapId: this.mapId}});
                        break;
                    case 'Plan':
                        this.$router.push({ path: `${UrlConfig.trainingPlatform.runPlan}/${this.mapId}`, query: {skinCode: '02'} });
                        break;
                    }
                }).catch((error) => {
                    if (error.code === '40004') {
                        this.$messageBox(this.$t('systemGenerate.getSubSystemInfoFail'));
                    }
                });
            }
        },
        setLocalRoute(path) {
            localStore.set('trainingPlatformRoute' + this.userId, path);
        },
        async refresh(filterSelect) {
            this.loading = true;
            this.treeList = [];
            this.filterSelect = filterSelect;
            try {
                let res = {};
                if (this.project === 'xty') {
                    res = await getSubSystemByProjectCode(ProjectCode[this.project]);
                } else {
                    res = await getTrainingSystemList(filterSelect);
                }
                this.$emit('goRoutePath', res.data);
                res.data && res.data.forEach(item =>{
                    item.key = item.id + item.type;
                    item.children && item.children.forEach(childrenItem => {
                        childrenItem.key = childrenItem.id + item.type;
                    });
                });
                this.treeList = res.data;
                this.getExpandList(filterSelect);
                // this.changeCityWithPage(this.treeList);
                this.$nextTick(() => {
                    const checkId = localStore.get('trainingPlatformCheckId' + filterSelect + this.userId) || null;
                    this.$refs.tree && this.$refs.tree.setCurrentKey(checkId);
                    this.loading = false;
                });
            } catch (error) {
                this.loading = false;
                this.$messageBox(this.$t('error.refreshFailed'));
            }
        },
        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.userId, this.expandList);
        },
        nodeCollapse(obj, node, ele) {
            const key = obj.id;
            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;
            }
        }
        // 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;
    }
    .map-list-main{
        text-align:left;
        height: 100%;
    }
    .el-tree-node.is-current>.el-tree-node__content {
        background-color: #e4e3e3 !important;
    }
</style>