126 lines
3.5 KiB
Vue
126 lines
3.5 KiB
Vue
<template>
|
|
<section class="AiAreaPicker">
|
|
<div @click="handleOpenDialog">
|
|
<slot v-if="$scopedSlots.default" :selected="selected"/>
|
|
<el-button v-else type="text">选择地区</el-button>
|
|
</div>
|
|
<ai-dialog :visible.sync="dialog" title="选择地区" @onConfirm="submit" @close="selecting=[],init()" destroy-on-close>
|
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
|
<el-breadcrumb-item v-for="(item,i) in path" :key="item.id">
|
|
<el-button type="text" @click.native="handlePathClick(i)">{{ item.name }}</el-button>
|
|
</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
<ai-table-select class="mar-t16" v-model="selecting" :instance="instance" :action="action" :isShowPagination="false" extra="hidden" search-key="name"
|
|
multiple valueObj>
|
|
<template slot="extra" slot-scope="{row}">
|
|
<el-button v-if="row.id!=root" type="text" icon="el-icon-arrow-right" @click.stop="getChildren(row)"/>
|
|
</template>
|
|
</ai-table-select>
|
|
</ai-dialog>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: "AiAreaPicker",
|
|
model: {
|
|
prop: "value",
|
|
event: "change"
|
|
},
|
|
props: {
|
|
value: {default: ""},
|
|
meta: {default: null},
|
|
root: {default: ""},
|
|
instance: {type: Function, required: true},
|
|
multiple: Boolean
|
|
},
|
|
computed: {
|
|
action() {
|
|
let currentParent = this.path.slice(-1)?.[0]?.id
|
|
return !!currentParent && /[^0]0{0,2}$/.test(currentParent) ? `/admin/appresident/queryAreaIdGroup?currentAreaId=${currentParent}` :
|
|
`/admin/area/queryAreaByParentIdSelf?self=${currentParent == this.root ? 1 : ''}&id=${currentParent}`
|
|
}
|
|
},
|
|
watch: {
|
|
value(v) {
|
|
this.dispatch('ElFormItem', 'el.form.change', [v]);
|
|
},
|
|
selected(v) {
|
|
this.$emit("update:meta", v)
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
dialog: false,
|
|
options: [],
|
|
selecting: [],
|
|
path: [],
|
|
selected: []
|
|
}
|
|
},
|
|
methods: {
|
|
dispatch(componentName, eventName, params) {
|
|
let parent = this.$parent || this.$root;
|
|
let name = parent.$options.componentName;
|
|
while (parent && (!name || name !== componentName)) {
|
|
parent = parent.$parent;
|
|
if (parent) {
|
|
name = parent.$options.componentName;
|
|
}
|
|
}
|
|
if (parent) {
|
|
parent.$emit.apply(parent, [eventName].concat(params));
|
|
}
|
|
},
|
|
getChildren(row) {
|
|
let area = this.path.find(e => e.id == row.id)
|
|
if (!area) this.path.push(row)
|
|
},
|
|
handlePathClick(index) {
|
|
this.path.splice(index + 1, 10)
|
|
},
|
|
submit() {
|
|
this.$emit("change", this.selecting.map(e => e.id))
|
|
this.selected = this.$copy(this.selecting)
|
|
this.$emit("select", this.selecting)
|
|
this.dialog = false
|
|
},
|
|
init() {
|
|
this.path = [{id: this.root, name: "可选范围"}]
|
|
},
|
|
handleOpenDialog() {
|
|
let areas = this.value.filter(e => /^\d{12}$/.test(e))
|
|
this.instance.post("/admin/area/getAreaNameByids", null, {
|
|
params: {ids: areas?.toString()}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.selecting = this.value.map(id => ({id, name: res.data?.[id] || id}))
|
|
this.dialog = true
|
|
}
|
|
})
|
|
},
|
|
getAreaById(id) {
|
|
return this.instance.post("/admin/area/queryAreaByAreaid", null, {
|
|
params: {id}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
return res.data
|
|
}
|
|
})
|
|
}
|
|
},
|
|
created() {
|
|
this.init()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AiAreaPicker {
|
|
.mar-t16 {
|
|
margin-top: 16px;
|
|
}
|
|
}
|
|
</style>
|