rt-sim-training-client/src/views/publish/publishMap/mapSort.vue

<template>
    <div class="card-box steps">
        <el-steps :active="display">
            <el-step :title="this.$t('system.mapSort')" icon="el-icon-edit-outline" />
            <el-step title="" icon="el-icon-upload" />
        </el-steps>
        <el-card class="forms">
            <filter-city ref="filerCity" filter-empty :query-function="queryFunction" :local-param-name="localParamName" @filterSelectChange="refresh" />
            <div style="height:100%;overflow-y:auto">
                <el-tree
                    ref="mapTree"
                    :data="treeData"
                    :props="defaultProps"
                    draggable
                    :allow-drop="allowDrop"
                    default-expand-all
                    :allow-drag="allowDrag"
                    expand-on-click-node
                    highlight-current
                    style="margin:20px; min-height:300px;"
                    @node-drag-end="handleDragEnd"
                ></el-tree>
            </div>
        </el-card>
        <div class="draft">
            <el-button type="primary" @click="goback">{{ $t('global.back') }}</el-button>
        </div>
    </div>
</template>

<script>
import FilterCity from '@/views/components/filterCity';
import { listPublishMap, toSortMap } from '@/api/jmap/map';
export default {
    name: 'SortTree',
    components: {
        FilterCity
    },
    data() {
        return {
            display: 1,
            treeData: [],
            queryFunction: listPublishMap,
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            localParamName: 'publish_cityCode'
        };
    },
    methods: {
        async refresh(filterSelect) {
            this.loading = true;
            this.treeData = this.treeList = [];
            const that = this;
            try {
                let res = '';
                res = await listPublishMap({cityCode: filterSelect});
                this.treeData = res.data;
            } catch (error) {
                this.loading = false;
                this.$messageBox(that.$t('error.refreshFailed'));
            }
        },
        allowDrop(draggingNode, dropNode, type) {
            return type !== 'inner';
        },
        allowDrag() {
            return true;
        },
        handleDragEnd(draggingNode, dropNode, dropType, ev) {
            const questdata = [];
            this.treeData.forEach((elem, index) => {
                questdata.push({id:elem.id, orderNumber: index});
            });
            toSortMap(questdata).then(resp => {
                this.$message.success(this.$t('tip.mapSortSuccessfully'));
            }).catch(error => {
                this.$messageBox(this.$t('tip.mapSortFailed'));
            });
        },
        goback() {
            this.$router.go(-1);
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

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

    .card-box {
        padding-top: 20px;
    }

    .steps {
        width: 980px;
        margin: 0 auto;
        height: 100%;

        /deep/ {
            .el-step__icon.is-icon {
                width: 95px;
            }
        }
    }

    /deep/ .el-card__body{
        height:100%;
    }

    .forms {
        width: 800px;
        margin: 0 auto;
        margin-top: 10px;
        height: calc(100% - 150px);
    }
    .draft {
        width: 300px;
        text-align: center;
        margin: 20px auto;
    }
</style>