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" @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 { DeviceMenu } from '@/scripts/ConstDic';
    import { postBuildMapImport } from '@/api/jmap/mapdraft';
    import { getPublishMapTree } from '@/api/management/mapprd';
    import { getMapList } from '@/api/designPlatform';
    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: getPublishMapTree,
                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;
            },
            showContextMenu(e, obj, node, vueElem) {
                if (obj) {
                    this.node = node;
                    this.selected = obj;
                }
            },
            clickEvent(obj, data, ele) {
                switch(obj.type){
                    case 'scriptDesign':{
                        this.$router.push({ path: `${UrlConfig.design.scriptHome}/${obj.mapId}` });
                        break;
                    }
                    case 'lessonDesign': {
                        this.$router.push({ path: `${UrlConfig.design.lessonHome}/${obj.mapId}/${obj.skinCode}`,query: {cityCode:data.parent.data.cityCode} });
                        break;
                    }
                    case 'runPlanDesign': {
                        this.$router.push({ path: `${UrlConfig.design.runPlan}/${obj.mapId}?skinCode=${obj.skinCode}` });
                        break;
                    }
                }
                // this.$refs.menu.doClose();
            },
            // async myrefresh(filterSelect){

            // },
            async refresh(filterSelect) {
                this.loading = true;
                this.treeData = this.treeList = [];
                try {
                    const res = await getMapList(filterSelect);

                    res.data.forEach(elem=>{
                        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
                            },
                            {
                                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>