403 lines
9.8 KiB
Vue
403 lines
9.8 KiB
Vue
<template>
|
|
<section class="AiAreaPicker">
|
|
<ai-search-popup mode="bottom" ref="areaSelector" length="85%">
|
|
<div slot="btn" @tap="handleInit">
|
|
<slot v-if="$slots.default"/>
|
|
<div v-else-if="isForm">
|
|
<ai-more v-model="areaName"/>
|
|
</div>
|
|
<div v-else class="areaSelector">
|
|
<image :src="locationIcon" class="location"/>
|
|
<div v-text="areaName"/>
|
|
</div>
|
|
</div>
|
|
<div class="areaSelector">
|
|
<div class="fixedTop">
|
|
<b>选择地区</b>
|
|
<em>选择区域</em>
|
|
<div class="selectedArea" v-if="hasSelected">
|
|
<p v-for="area in fullArea" :key="area.id" v-text="area.name"/>
|
|
<p v-if="selected.type==5" v-text="selected.name"/>
|
|
</div>
|
|
<div/>
|
|
<span v-if="all" v-text="`省`" @click="selectNode({}, -1)"/>
|
|
<span v-for="(area,i) in fullArea" :key="area.id" v-text="area.levelLabel || '村/社区'"
|
|
@click="selectNode(area, i)"/>
|
|
</div>
|
|
<!--用来作为占位的-->
|
|
<div class="fixedPlaceholder" style="line-height: 60px;" v-if="false">
|
|
<b>选择地区</b>
|
|
<em>选择区域</em>
|
|
<div class="selectedArea" v-if="hasSelected"/>
|
|
<span v-text="'行政区域'"/>
|
|
</div>
|
|
<!--end-->
|
|
</div>
|
|
<scroll-view class="fill pendingList" scroll-y :style="{height: height}">
|
|
<div class="pendingItem flexRow" flex v-for="op in pending" :key="op.id" @tap="getChild(op)">
|
|
<div class="fill" :class="{ self: index == op.id }" v-html="op.name"/>
|
|
<u-icon v-if="index == op.id" name="checkbox-mark" color="#4181FF"/>
|
|
</div>
|
|
</scroll-view>
|
|
<div class="bottomBtns">
|
|
<div @click="closePopup">取消</div>
|
|
<div class="primary fill" @click="handleSelect">确定</div>
|
|
</div>
|
|
</ai-search-popup>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import AiSearchPopup from './AiSearchPopup'
|
|
import {mapState} from 'vuex'
|
|
import AiMore from "./AiMore";
|
|
|
|
export default {
|
|
name: 'AiAreaPicker',
|
|
components: {AiMore, AiSearchPopup},
|
|
props: {
|
|
areaId: {default: ''},
|
|
name: {default: ''},
|
|
value: String,
|
|
all: Boolean,
|
|
icon: {default: "location.svg"},
|
|
isForm: Boolean,
|
|
valueLevel: {default: 5},
|
|
fullName: {default: ''}
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
dataRange() {
|
|
let rules = [10, 8, 6, 3, 0],
|
|
level = 0
|
|
if (this.all) return (level = 0)
|
|
rules.some((e, i) => {
|
|
let reg = new RegExp(`0{${e}}`, 'g')
|
|
if (reg.test(this.areaId || this.user.areaId || this.$areaId)) {
|
|
return (level = i)
|
|
}
|
|
})
|
|
return level
|
|
},
|
|
currentArea() {
|
|
return this.fullArea?.slice(-1)?.[0] || {}
|
|
},
|
|
locationIcon() {
|
|
return this.$cdn + this.icon
|
|
},
|
|
pending() {
|
|
return this.list.map(e => ({...e, levelLabel: this.levelLabels[e.type]}))
|
|
},
|
|
hasSelected() {
|
|
return this.fullArea?.length > 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
fullArea: [],
|
|
index: '',
|
|
areaName: '',
|
|
list: [],
|
|
levelLabels: ["省", "市", "县/区", "镇/街道", "村/社区"],
|
|
selected: {},
|
|
height: '500px'
|
|
}
|
|
},
|
|
watch: {
|
|
areaId(v) {
|
|
v && (this.getFullArea())
|
|
},
|
|
|
|
value(v) {
|
|
if (this.list.length && v) {
|
|
this.areaName = this.list.find((e) => e.id == this.value).name
|
|
}
|
|
},
|
|
|
|
fullArea: {
|
|
handler(v) {
|
|
this.$nextTick(() => {
|
|
if (v) {
|
|
this.scrollHeight()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.handleInit()
|
|
},
|
|
methods: {
|
|
show() {
|
|
this.handleInit()
|
|
this.$refs.areaSelector.showPopup()
|
|
},
|
|
scrollHeight() {
|
|
this.height = document.querySelector('.areaSelector') && `calc(100% - ${document.querySelector('.areaSelector').offsetHeight}px)`
|
|
},
|
|
getFullArea() {
|
|
let areaId = this.areaId || (this.all ? '' : this.$areaId)
|
|
return this.$http.post('/admin/area/getAllParentAreaId', null, {
|
|
withoutToken: true,
|
|
params: {areaId},
|
|
}).then((res) => {
|
|
if (res?.data) {
|
|
res.data.forEach((e) => {
|
|
e && (e.levelLabel = this.levelLabels[e.type])
|
|
})
|
|
if (res.data.length > 1) {
|
|
this.fullArea = res.data.reverse().slice(this.dataRange)
|
|
} else {
|
|
this.fullArea = res.data
|
|
|
|
}
|
|
return this.fullArea
|
|
}
|
|
})
|
|
},
|
|
getChildAreas(id) {
|
|
id && this.$http.post('/admin/area/queryAreaByParentId', null, {
|
|
withoutToken: true,
|
|
params: {id},
|
|
}).then((res) => {
|
|
if (res.data.length) {
|
|
this.list = res.data
|
|
let self = this.fullArea.find((e) => e.id == this.areaId)
|
|
|
|
if (this.value && !this.areaName && this.value !== this.areaId) {
|
|
this.areaName = this.list.find((e) => e.id == this.value)?.name
|
|
}
|
|
if (!this.areaName && this.value === this.areaId) {
|
|
this.areaName = self.name
|
|
}
|
|
if (self?.id) {
|
|
this.list.unshift(self)
|
|
}
|
|
this.scrollHeight()
|
|
} else {
|
|
if (this.areaId.substr(this.areaId.length - 3, 3) !== '000') {
|
|
this.list = [{
|
|
id: this.areaId,
|
|
name: this.fullArea[0].name
|
|
}]
|
|
this.areaName = this.fullArea[0].name
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
getProvinces() {
|
|
this.$http.post('/admin/area/queryProvinceList', null, {withoutToken: true}).then((res) => {
|
|
if (res?.data) {
|
|
this.list = res.data
|
|
}
|
|
})
|
|
},
|
|
handleSelect() {
|
|
this.$emit('select', this.index)
|
|
let fullName = ''
|
|
this.fullArea.forEach(v => {
|
|
fullName = fullName + v.name
|
|
})
|
|
|
|
if (this.selected.type == 5) {
|
|
fullName = fullName + (this.selected.name || this.areaName)
|
|
}
|
|
this.areaName = this.selected.name || this.areaName
|
|
this.$emit('update:fullName', fullName)
|
|
this.$emit('update:name', (this.selected.name || this.areaName))
|
|
this.closePopup()
|
|
},
|
|
getChild(op) {
|
|
if (op.id != this.index) {
|
|
if (op.type < this.valueLevel && op.type < 5 && (/0{3}$/g.test(this.index) || !this.index)) {
|
|
this.fullArea.push(op)
|
|
this.getChildAreas(op.id)
|
|
}
|
|
this.selected = op
|
|
this.index = op.id
|
|
}
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.scrollHeight()
|
|
})
|
|
},
|
|
selectNode(area, i) {
|
|
this.fullArea.splice(i + 1, this.fullArea.length - i)
|
|
if (this.all && !area.id) {
|
|
this.index = ''
|
|
this.getProvinces()
|
|
} else {
|
|
this.index = area.id
|
|
this.getChildAreas(area.id)
|
|
}
|
|
},
|
|
handleInit() {
|
|
this.index = this.value || this.areaId
|
|
|
|
if (this.all && !this.areaId && !this.currentArea.id) {
|
|
this.getProvinces()
|
|
|
|
return false
|
|
}
|
|
this.getFullArea().then(() => {
|
|
this.getChildAreas(this.currentArea.id || this.areaId)
|
|
})
|
|
},
|
|
closePopup() {
|
|
this.$refs.areaSelector?.handleSelect()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AiAreaPicker {
|
|
::v-deep .areaSelector {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
span {
|
|
cursor: pointer;
|
|
color: #333;
|
|
font-weight: bold;
|
|
line-height: 112px;
|
|
margin-right: 72px;
|
|
position: relative;
|
|
|
|
&:last-of-type {
|
|
margin-right: 0;
|
|
|
|
&:after {
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
bottom: -26px;
|
|
left: 50%;
|
|
transform: translate(-50%, 100%);
|
|
width: 40px;
|
|
height: 8px;
|
|
background: #4181FF;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
b {
|
|
display: block;
|
|
width: 100%;
|
|
line-height: 96px;
|
|
text-align: center;
|
|
}
|
|
|
|
em {
|
|
font-style: normal;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 34px;
|
|
}
|
|
|
|
.selectedArea {
|
|
display: flex;
|
|
align-items: center;
|
|
width: fit-content;
|
|
max-width: calc(100vw - 128px);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding: 0 32px;
|
|
height: 80px;
|
|
background: #ECF2FF;
|
|
border-radius: 40px;
|
|
font-size: 32px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #4181FF !important;
|
|
margin: 16px 0 32px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.fixedTop {
|
|
// position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
left: 0;
|
|
background: #fff;
|
|
border-bottom: 4px solid #f5f5f5;
|
|
z-index: 1;
|
|
text-align: start;
|
|
padding: 0 32px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
::v-deep.u-drawer-content {
|
|
|
|
.areaSelector {
|
|
box-sizing: border-box;
|
|
// border-bottom: 1px solid #f5f5f5;
|
|
}
|
|
}
|
|
|
|
::v-deep .pendingList {
|
|
height: 500px;
|
|
overflow-y: auto;
|
|
padding: 0 32px 120px;
|
|
box-sizing: border-box;
|
|
|
|
.pendingItem {
|
|
color: #333;
|
|
height: 84px;
|
|
text-align: start;
|
|
|
|
.self {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep.bottomBtns {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100vw;
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
height: 120px;
|
|
font-size: 34px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #3671EE;
|
|
background: #fff;
|
|
padding: 0 32px;
|
|
box-sizing: border-box;
|
|
|
|
& > div {
|
|
padding: 0 92px;
|
|
line-height: 88px;
|
|
height: 88px;
|
|
border: 1px solid #A0C0FF;
|
|
border-radius: 16px;
|
|
|
|
&.primary {
|
|
color: #fff;
|
|
background: #4181FF;
|
|
border-color: #4181FF;
|
|
}
|
|
|
|
& + div {
|
|
margin-left: 32px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.location {
|
|
width: 28px;
|
|
height: 80px;
|
|
margin-right: 12px;
|
|
}
|
|
}
|
|
</style>
|