You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
2.1 KiB
73 lines
2.1 KiB
6 years ago
|
<template>
|
||
|
|
<el-dialog
|
||
|
|
v-drag-dialog
|
||
|
|
:visible="value"
|
||
|
|
append-to-body
|
||
|
|
title="选择行政区域"
|
||
|
|
width="30%"
|
||
|
|
top="50px"
|
||
|
|
@close="$emit('input', false)"
|
||
|
|
>
|
||
|
|
<el-scrollbar>
|
||
|
|
<el-tree
|
||
|
|
ref="tree"
|
||
|
|
v-loading="loading"
|
||
|
|
:data="limit?limitTree:regionTree"
|
||
|
|
:expand-on-click-node="false"
|
||
|
|
node-key="id"
|
||
|
|
@node-click="nodeClick"
|
||
|
|
>
|
||
|
|
<span slot-scope="{data}" class="el-tree-node__label">
|
||
|
|
{{data.name}}
|
||
|
|
<template v-if="limit">({{data.value}})</template>
|
||
|
|
</span>
|
||
|
|
</el-tree>
|
||
|
|
</el-scrollbar>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {mapState} from 'vuex'
|
||
|
|
import {createLimitTree, getNodeId} from "@/utils/tree"
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "RegionSelector",
|
||
|
|
props: {
|
||
|
|
value: Boolean,
|
||
|
|
limit: Boolean,
|
||
|
|
limitApi: Function
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
loading: false,
|
||
|
|
limitTree: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapState('dataCache', {
|
||
|
|
regionTree: state => state.regionTree
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
nodeClick(obj) {
|
||
|
|
let ids = getNodeId(obj.children)
|
||
|
|
ids.unshift(obj.id)
|
||
|
|
this.$emit('select', obj, ids)
|
||
|
|
this.$emit('input', false)
|
||
|
|
},
|
||
|
|
init() {
|
||
|
|
this.loading = true
|
||
|
|
const hasInit = this.regionTree.length > 0
|
||
|
|
const promise = () => hasInit ? Promise.resolve() : this.$store.dispatch('dataCache/initRegion')
|
||
|
|
promise()
|
||
|
|
.then(() => this.limit ? this.limitApi() : Promise.resolve())
|
||
|
|
.then(data => data && (this.limitTree = createLimitTree(this.regionTree, data)))
|
||
|
|
.finally(() => this.loading = false)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.init()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|