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

<template>
        <el-card v-loading="loading" class="map-list-main" header="我的地图列表">
        <filter-city ref="myfilerCity" filter-empty :query-function="queryFunction" @filterSelectChange="refresh" />
        <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':''}"
          >&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" >新建地图</el-button>
            <!-- {{ $t('map.newConstruction') }} -->
        </div>
        <map-operate-menu
        ref="menu"
        :point="point"
        :edit-model="editModel"
        :skin-code="skinCode"
        @refresh="refresh1"
        @jlmap3d="jlmap3d"
        />
    </el-card>
</template>
<script>
    import { DeviceMenu } from '@/scripts/ConstDic';
    import { postBuildMapImport } from '@/api/jmap/mapdraft';
    import { getUserMapTree } from '@/api/management/mapprd';
    import { UrlConfig } from '@/router/index';
    import { getSessionStorage, setSessionStorage, removeSessionStorage } from '@/utils/auth';
    import FilterCity from '@/views/components/filterCity';
    import localStore from 'storejs';
    import MapOperateMenu  from '@/views/map/mapdraft/mapmanage/operateMenu';

    export default {
        name: 'userMapList',
        components: {
            FilterCity,
            MapOperateMenu
        },
        props: {
            height: {
                type: Number,
                required: true
            },
            width: {
                type: Number,
                required: true
            }
        },
                data() {
            return {
                loading: true,
                defaultShowKeys: [],
                queryFunction:getUserMapTree,
                filterText: '',
                treeData: [],
                treeList: [],
                selected: {},
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                node: {
                },
                mapId: '',
                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.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;
            },
            createMap() {
                this.$emit("createMap");
            },
            async refresh(filterSelect) {
                this.loading = true;
                this.treeData = this.treeList = [];
                try {
                    const res = await getUserMapTree(filterSelect);
                    res.data.forEach(elem=>{
                        // if(elem.children)
                        // {
                            elem.type="map",
                            elem.children=[
                                {
                                    id:'1',
                                    name:'地图设计',
                                    type:'mapDesign'
                                },
                                {
                                    id:'2',
                                    name:'课程设计',
                                    type:'lessonDesign'
                                },
                                {
                                    id:'3',
                                    name:'剧本设计',
                                    type:'scriptDesign'
                                },
                                {
                                    id:'4',
                                    name:'运行图设计',
                                    type:'runPlanDesign'
                                },
                            ]
                        // }
                    });

                    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'));
                }
            },
            clickEvent(obj, data, ele) {
                if (data.parent && data.parent.data){
                    this.mapId = data.parent.data.id;
                }
                switch(obj.type){
                    case 'scriptDesign':{
                        this.$router.push({ path: `${UrlConfig.designUser.scriptHome}/${this.mapId}` });
                        break;
                    }
                    case 'mapDesign': {
                        // this.resize();
                        this.$router.push({ path: `${UrlConfig.designUser.mapDraw}/0/draft`, query: { name: '' } });
                        break;
                    }
                    case 'lessonDesign': {
                        this.$router.push({ path: `${UrlConfig.designUser.lessonHome}` });
                        break;
                    }
                    case 'runPlanDesign': {
                        this.$router.push({ path: `${UrlConfig.designUser.runPlan}/${this.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 = node.data.skinCode;
                    this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
                }
                else{
                    // 关掉右键操作
                }
            },
            refresh1(){
                this.$refs.myfilerCity.loadInitData();   
                this.refresh();
            },
            refresh2(){
                this.$refs.myfilerCity.loadInitData();   
                this.refresh();
            },
            jlmap3d() {
                this.$router.push({ path: '/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.refresh();
                            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>