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

<template>
  <el-card v-loading="loading" class="map-list-main" :header="$t('map.myMapList')">
    <el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
    <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: (height-185) +'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':''}"
          />
          <span>&nbsp;{{ tnode.label }}</span>
        </span>
      </el-tree>
    </el-scrollbar>
    <div class="buttonList">
      <el-button size="small" type="primary" class="eachButton uploadDemo ">
        <input
          ref="files"
          type="file"
          class="file_box"
          accept=".json, application/json"
          @change="importf"
        >
        {{ $t('map.importMap') }}
      </el-button>
      <el-button size="small" type="primary" class="eachButton" @click="createMap">{{ $t('map.newConstruction') }}</el-button>
    </div>
    <map-operate-menu
      ref="menu"
      :point="point"
      :edit-model="editModel"
      :skin-code="skinCode"
      @refresh="loadInitData"
      @jlmap3d="jlmap3d"
    />
  </el-card>
</template>
<script>
import { DeviceMenu } from '@/scripts/ConstDic';
import { postBuildMapImport, listMap } from '@/api/jmap/mapdraft';
import { UrlConfig } from '@/router/index';
import { removeSessionStorage } from '@/utils/auth';
import localStore from 'storejs';
import MapOperateMenu from '@/views/map/mapdraft/mapmanage/operateMenu';

export default {
	name: 'UserMapList',
	components: {
		MapOperateMenu
	},
	props: {
		height: {
			type: Number,
			required: true
		},
		width: {
			type: Number,
			required: true
		}
	},
	data() {
		return {
			loading: true,
			defaultShowKeys: [],
			filterText: '',
			treeData: [],
			treeList: [],
			selected: {},
			defaultProps: {
				children: 'children',
				label: 'name'
			},
			node: {
			},
			heightUp: 450,
			point: {
				x: 0,
				y: 0
			},
			editModel: {},
			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.$refs.tree.filter(val);
		}
	},
	beforeDestroy () {
		removeSessionStorage('demonList');
	},
	mounted() {
		this.heightUp = Number(localStore.get('upHeight')?localStore.get('upHeight'):(this.height)/2);
		this.loadInitData();
	},
	methods: {
		filterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		},
		createMap() {
			this.$emit('createMap');
		},
		async loadInitData() {
			this.loading = true;
			this.treeData = this.treeList = [];
			try {
				const res = await listMap();
				res.data&&res.data.forEach(elem=>{
					// if(elem.children)
					// {
					elem.type='map';
					elem.children=[
						{
							id: '1',
							name: this.$t('designPlatform.mapDesign'),
							type: 'mapDesign',
							mapId: elem.id,
							mapName: elem.name,
							skinCode: elem.skinCode
						},
						{
							id: '4',
							name: this.$t('designPlatform.runPlanDesign'),
							type: 'runPlanDesign',
							mapId: elem.id,
							mapName: elem.name,
							skinCode: elem.skinCode
						}
					];
					// }
				});

				this.treeData = res.data;
				this.treeList = this.filterText
					? res.data.filter(elem => { return elem.name.includes(this.filterText); })
					: res.data;
				this.loading = false;
			} catch (error) {
				this.loading = false;
				this.$messageBox(this.$t('error.refreshFailed'));
			}
		},
		clickEvent(obj, data, ele) {
			switch (obj.type) {
			case 'mapDesign': {
				this.$router.push({ path: `${UrlConfig.designUser.mapDraw}/${obj.mapId}/draft`, query: { name: obj.mapName } });
				break;
			}
			case 'runPlanDesign': {
				this.$router.push({ path: `${UrlConfig.designUser.runPlan}/${obj.mapId}?skinCode=${obj.skinCode}` });
				break;
			}
			}
			this.$refs.menu.doClose();
		},
		showContextMenu(e, obj, node, vueElem) {
			if (obj && obj.type == 'map') {
				e.preventDefault();
				const menu = DeviceMenu.Map;

				this.point = {
					x: e.clientX,
					y: e.clientY
				};
				this.editModel = obj;
				this.editModel.skinCode = obj.skinCode;
				this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
			} else {
				// 关掉右键操作
			}
		},
		jlmap3d() {
			this.$router.push({ path: '/design/jlmap3d/edit', query: { mapid: this.editModel.id } });
		},
		importf() {
			const loading = this.$loading({
				lock: true,
				text: '正在导入中...',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			setTimeout(() => {
				const obj = this.$refs.files;
				if (!obj.files) return;
				const f = obj.files[0];
				const reader = new FileReader();
				const that = this;
				reader.readAsText(f, 'utf-8');
				reader.onload = function(e) {
					const data = e.target.result;
					postBuildMapImport(JSON.parse(data)).then(res => {
						loading.close();
						that.$message.success('导入成功！');
						that.loadInitData();
						loading.close();
					}).catch(error => {
						loading.close();
						that.$message.error('导入失败' + error.message);
					});
					obj.value = '';
				};
			});
		}
	}
};
</script>
<style lang="scss" scoped>
    .buttonList{
        padding: 8px 0px 8px 0px;
        border-top: 1px #ccc solid;
    }
    .eachButton{
        margin-left:10px;
    }
    .uploadDemo {
        position: relative;
        overflow: hidden;
        // float: right;
        padding: 9px 15px;
        margin-right: 3px;
        cursor: pointer;
        input {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
        }
    }
    .map-list-main{
        text-align:left;
    }
</style>