127 lines
3.5 KiB
Vue
127 lines
3.5 KiB
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>
|