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, getSubSystemInfo } 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: ''
		};
	},
	computed: {
		account() {
			return this.$store.state.user.account;
		},
		project() {
			return getSessionStorage('project');
		}
	},
	watch: {
	},
	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 === 'Map') {
				this.mapId = obj.id;
				this.$router.push({ path: `${UrlConfig.trainingPlatform.permission}/${this.mapId}`});
			} else if ( obj.type === 'SubSystem') {
				getSubSystemInfo(obj.id).then(resp => {
					switch (resp.data.type) {
					case 'Exam':
						this.setLocalRoute(`${UrlConfig.trainingPlatform.course}/${obj.id}`);
						this.$router.push({ path: `${UrlConfig.trainingPlatform.course}/${obj.id}`});
						break;
					case 'Lesson':
						this.setLocalRoute(`${UrlConfig.trainingPlatform.teachDetail}/${obj.id}`);
						this.$router.push({ path: `${UrlConfig.trainingPlatform.teachDetail}/${obj.id}`});
						break;
					case 'Simulation':
						this.setLocalRoute(`${UrlConfig.trainingPlatform.prodDetail}/${obj.id}`);
						this.$router.push({ path: `${UrlConfig.trainingPlatform.prodDetail}/${obj.id}`, query: { mapId: this.mapId}});
						break;
                        // case '运行图编制':
                        //     this.$router.push({ path: `${UrlConfig.trainingPlatform.runPlan}/${this.mapId}`, query: {skinCode: '02'} });
                        //     break;
					}
				}).catch(() => {
					this.$messageBox('获取子系统信息失败！');
				});
			}
		},
		setLocalRoute(path) {
			localStore.set('trainingPlatformRoute'+this.account, path);
		},
		async refresh(filterSelect) {
			this.loading = true;
			this.treeList = [];
			this.filterSelect = filterSelect;
			try {
				const res = await getTrainingSystemList(filterSelect);
				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.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>