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

<template>
  <div v-loading="loading" class="joylink-card map-list-main">
    <div class="clearfix">
      <span>{{ $t('map.myMapList') }}</span>
    </div>
    <div class="text_item">
      <el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
      <div class="tree_box">
        <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>
      </div>
      <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>
    </div>
    <map-operate-menu
      ref="menu"
      :point="point"
      :edit-model="editModel"
      :skin-code="skinCode"
      @refresh="loadInitData"
      @jlmap3d="jlmap3d"
    />
  </div>
</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 MapOperateMenu from './mapmanage/operateMenu';

export default {
    name: 'UserMapList',
    components: {
        MapOperateMenu
    },
    props: {
        width: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            loading: true,
            defaultShowKeys: [],
            filterText: '',
            treeData: [],
            treeList: [],
            selected: {},
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            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.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=>{
                    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': {
                // ?skinCode=${obj.skinCode}
                this.$router.push({ path: `${UrlConfig.designUser.runPlan}/${obj.mapId}` });
                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 });
            }
        },
        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>
	.clearfix{
		padding: 0 20px;
		border-bottom: 1px solid #EBEEF5;
		box-sizing: border-box;
		height: 47px;
		line-height: 47px;
	}
    .text_item{
        height: calc(100% - 47px);
        .tree_box{
            height: calc(100% - 89px);
            overflow-y: auto;
        }
    }
    .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;
		height: 100%;
    }
</style>