144 lines
3.1 KiB
Vue
144 lines
3.1 KiB
Vue
<template>
|
|
<section class="areaSelector">
|
|
<AiSearchPopup mode="bottom" ref="areaSelector">
|
|
<template #btn>
|
|
<div class="areaSelector">
|
|
<span v-for="area in fullArea" :key="area.id" v-text="area.name"
|
|
:class="{current:area.id==areaId}" @tap="index=area.id,getChildAreas(area.id)"/>
|
|
</div>
|
|
</template>
|
|
<div class="areaSelector">
|
|
<span v-for="area in fullArea" :key="area.id" v-text="area.name"
|
|
:class="{current:area.id==index}"
|
|
@click="index=area.id,getChildAreas(area.id)"/>
|
|
</div>
|
|
<div class="pendingItem" flex v-for="op in list" :key="op.id" @tap="handleSelect(op)">
|
|
<div class="fill" :class="{self:index==op.id}" v-html="op.name"/>
|
|
<u-icon name="arrow-right" color="#ddd"/>
|
|
</div>
|
|
</AiSearchPopup>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from "vuex";
|
|
|
|
export default {
|
|
name: "areaSelector",
|
|
props: {
|
|
areaId: {default: ""}
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
dataRange() {
|
|
let rules = [10, 8, 6, 3, 0], level = 2
|
|
rules.some((e, i) => {
|
|
let reg = new RegExp(`0{${e}}`, 'g')
|
|
if (reg.test(this.user.areaId)) {
|
|
return level = i
|
|
}
|
|
})
|
|
return level
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
fullArea: [],
|
|
index: "",
|
|
list: []
|
|
}
|
|
},
|
|
watch: {
|
|
areaId(v) {
|
|
v && this.getFullArea()
|
|
}
|
|
},
|
|
methods: {
|
|
getFullArea() {
|
|
let {areaId} = this
|
|
return areaId && this.$http.post("/admin/area/getAllParentAreaId", null, {
|
|
params: {areaId}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.fullArea = res.data.reverse().slice(this.dataRange)
|
|
}
|
|
})
|
|
},
|
|
getChildAreas(id) {
|
|
id && this.$http.post("/admin/area/queryAreaByParentId", null, {
|
|
params: {id}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.list = res.data
|
|
let self = this.fullArea.find(e => e.id == this.index)
|
|
this.list.unshift(self)
|
|
}
|
|
})
|
|
},
|
|
handleSelect(op) {
|
|
this.$emit('select', op)
|
|
this.$refs.areaSelector?.handleSelect()
|
|
}
|
|
},
|
|
created() {
|
|
this.index = this.areaId
|
|
this.getFullArea()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.areaSelector {
|
|
::v-deep .AiSearchPopup {
|
|
.areaSelector {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
span {
|
|
cursor: pointer;
|
|
|
|
&:first-of-type:before {
|
|
content: "";
|
|
padding: 0;
|
|
}
|
|
|
|
&:before {
|
|
color: #333;
|
|
content: "/";
|
|
padding: 0 16px;
|
|
}
|
|
}
|
|
|
|
.current {
|
|
color: #3F8DF5;
|
|
}
|
|
}
|
|
|
|
.u-drawer-content {
|
|
position: fixed;
|
|
|
|
.areaSelector {
|
|
padding: 0 16px;
|
|
box-sizing: border-box;
|
|
border-bottom: 16px solid #f5f5f5;
|
|
|
|
span {
|
|
line-height: 100px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pendingItem {
|
|
margin-left: 32px;
|
|
padding-right: 32px;
|
|
height: 104px;
|
|
border-bottom: 1px solid #ddd;
|
|
|
|
.self {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|