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

<template>
  <div>
    <el-card v-loading="loading" class="map-list-main" header="已发布地图列表">
      <filter-city ref="filerCity" filter-empty :query-function="queryFunction" :local-param-name="localParamName" @filterSelectChange="refresh" />
      <el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
      <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: (height-125) +'px' }">
        <!-- :style="{ height: heightUp +'px' }" -->
        <el-tree
          ref="tree"
          :data="treeList"
          node-key="id"
          :props="defaultProps"
          highlight-current
          :span="22"
          :filter-node-method="filterNode"
          @node-click="clickEvent"
        >
          <!-- @node-contextmenu="showContextMenu" -->
          <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>
  </div>
</template>
<script>
import { listPublishMap } from '@/api/jmap/map';
import { UrlConfig } from '@/router/index';
import { getSessionStorage, setSessionStorage, removeSessionStorage } from '@/utils/auth';
import FilterCity from '@/views/components/filterCity';
import localStore from 'storejs';

export default {
	name: 'PublicMapList',
	components: {
		FilterCity
	},
	props: {
		height: {
			type: Number,
			required: true
		},
		width: {
			type: Number,
			required: true
		}
	},
	data() {
		return {
			loading: true,
			defaultShowKeys: [],
			queryFunction: listPublishMap,
			filterText: '',
			treeData: [],
			treeList: [],
			selected: {},
			defaultProps: {
				children: 'children',
				label: 'name'
			},
			node: {
			},
			// mapId: '',
			heightUp: 450,
			point: {
				x: 0,
				y: 0
			},
			editModel: {},
			localParamName: 'publish_cityCode',
			cityCode: ''
			// skinCode:''
		};
	},
	computed: {
		role() {
			return this.$store.state.user.roles.includes('04') ||
                    this.$store.state.user.roles.includes('05') ||
                    this.$store.state.user.roles.includes('01');
		}
	},
	watch: {
		filterText(val) {
			this.treeList = this.treeData.filter((res) => {
				return res.name.includes(val);
			});
		}
	},
	beforeDestroy () {
		removeSessionStorage('demonList');
	},
	mounted() {
		this.heightUp = Number(localStore.get('upHeight')?localStore.get('upHeight'):(this.height)/2);
	},
	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) {
			switch (obj.type) {
			case 'scriptDesign': {
				setSessionStorage('designType', 'scriptDesign');
				this.$router.push({ path: `${UrlConfig.design.scriptHome}/${obj.mapId}?skinCode=${obj.skinCode}` });
				break;
			}
			case 'lessonDesign': {
				setSessionStorage('designType', 'lessonDesign');
				this.$router.push({ path: `${UrlConfig.design.lessonHome}/${obj.mapId}/${obj.skinCode}`, query: {cityCode: this.cityCode} });
				break;
			}
			case 'runPlanDesign': {
				setSessionStorage('designType', 'runPlanDesign');
				this.$router.push({ path: `${UrlConfig.design.runPlan}/${obj.mapId}?skinCode=${obj.skinCode}` });
				break;
			}
			case 'map': {
				setSessionStorage('demonList', obj.id);
			}
			}
			// this.$refs.menu.doClose();
		},
		// async myrefresh(filterSelect){

		// },
		async refresh(filterSelect) {
			this.cityCode=filterSelect;
			this.loading = true;
			this.treeData = this.treeList = [];
			try {
				const res = await listPublishMap({cityCode: filterSelect});
				res.data.forEach(elem=>{
					// debugger;
					// elem.children.find(n => { return n.name.includes("行调")})
					elem.children=[
						// {
						//     id:'1',
						//     name:'地图设计',
						//     type:'mapDesign'
						// },
						{
							id: '2',
							name: '课程设计',
							type: 'lessonDesign',
							mapId: elem.id,
							skinCode: elem.skinCode
						},
						{
							id: '3',
							name: '剧本设计',
							type: 'scriptDesign',
							mapId: elem.id,
							skinCode: elem.skinCode
							// code:elem.children.find(n => { return n.name.includes("行调")})
						},
						{
							id: '4',
							name: '运行图设计',
							type: 'runPlanDesign',
							mapId: elem.id,
							skinCode: elem.skinCode
						}
					];
				});
				this.treeData = res.data;
				this.treeList = this.filterText
					? res.data.filter(elem => { return elem.name.includes(this.filterText); })
					: res.data;
				this.$nextTick(() => {
					const mapId = getSessionStorage('demonList') || null;
					this.$refs.tree.setCurrentKey(mapId);
					this.loading = false;
				});
			} catch (error) {
				this.loading = false;
				this.$messageBox(this.$t('error.refreshFailed'));
			}
		},
		// refresh1(){

		// },
		drapHeight(height) {
			this.heightUp = Number(height);
		},
		resize() {
			this.widthLeft = Number(localStore.get('LeftWidth')) || this.widthLeft;
			const width = this.$store.state.app.width - 521 - this.widthLeft;
			const height = this.$store.state.app.height - 90;
			this.$store.dispatch('config/resize', { width: width, height: height });
		}
		// createMap() {
		//     this.$emit("createMap");
		// },
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .back-home {
        float: right;
        cursor: pointer;

    &:hover {
         color: #3ea726;
     }
    }

    .map-list-main{
        text-align:left;
    }
</style>
<style>
    .el-tree {
        overflow-x: hidden;
    }

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