同步地区组件逻辑

src/components/AiAreaPicker/AiAreaPicker.vue

@@ -1,17 +1,17 @@
 <template>
   <section class="AiAreaPicker">
-    <ai-search-popup mode="bottom" ref="areaSelector" length="85%">
+    <ai-search-popup mode="bottom" ref="areaSelector" length="85%" :disabled="disabled">
       <div slot="btn" @tap="handleInit">
         <slot v-if="$slots.default"/>
         <div v-else-if="isForm">
-          <u-icon name="arrow-right" :label="areaName||'请选择'" label-pos="left" color="#ddd"/>
+          <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" id="areaSelector">
+      <div class="areaSelector">
         <div class="fixedTop">
           <b>选择地区</b>
           <em>选择区域</em>
@@ -21,8 +21,8 @@
           </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)"/>
+          <span v-for="(area,i) in fullArea.filter(e=>e.type<valueLevel)" :key="area.id"
+                v-text="area.levelLabel" @click="selectNode(area, i)"/>
         </div>
       </div>
       <scroll-view class="fill pendingList" :style="{height: height}" scroll-y>
@@ -32,8 +32,8 @@
         </div>
       </scroll-view>
       <div class="bottomBtns">
-        <div @click="closePopup">取消</div>
-        <div class="primary fill" @click="handleSelect">确定</div>
+        <div @click.stop="closePopup">取消</div>
+        <div class="primary fill" @click.stop="handleSelect">确定</div>
       </div>
     </ai-search-popup>
   </section>
@@ -42,23 +42,22 @@
 <script>
 import AiSearchPopup from './AiSearchPopup'
 import {mapState} from 'vuex'
+import AiMore from "../AiMore/AiMore";
 
 export default {
   name: 'AiAreaPicker',
-  components: {AiSearchPopup},
+  components: {AiMore, AiSearchPopup},
   props: {
     areaId: {default: ''},
     name: {default: ''},
     value: String,
     all: Boolean,
-    icon: {default: "/dvpc/h5/location.svg"},
-    isHideTown: {
-      type: Boolean,
-      default: false
-    },
+    icon: {default: "location.svg"},
     isForm: Boolean,
     valueLevel: {default: 5},
-    fullName: {default: ''}
+    fullName: {default: ''},
+    disabled: Boolean,
+    selectRoot: {default: true}
   },
   computed: {
     ...mapState(['user']),
@@ -68,14 +67,14 @@ export default {
       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)) {
+        if (reg.test(this.root)) {
           return (level = i)
         }
       })
       return level
     },
-    currentArea() {
-      return this.fullArea?.slice(-1)?.[0] || {}
+    root() {
+      return this.areaId || this.user.areaId || this.$areaId
     },
     locationIcon() {
       return this.$cdn + this.icon
@@ -93,18 +92,20 @@ export default {
       index: '',
       areaName: '',
       list: [],
-      height: '500px',
       levelLabels: ["省", "市", "县/区", "镇/街道", "村/社区"],
-      selected: {}
+      selected: {},
+      height: '500px'
     }
   },
   watch: {
     areaId(v) {
-      v && this.getFullArea()
+      v && (this.getFullArea(v))
     },
     value(v) {
-      if (this.list.length && v) {
-        this.areaName = this.list.find((e) => e.id == this.value).name
+      if (v) {
+        this.getFullArea(v).then(list => {
+          this.areaName = list?.reverse()?.[0]?.name
+        })
       }
     },
     fullArea: {
@@ -131,9 +132,8 @@ export default {
         }
       })
     },
-    getFullArea() {
-      let areaId = this.areaId || (this.all ? '' : this.$areaId)
-      return this.$instance.post('/admin/area/getAllParentAreaId', null, {
+    getFullArea(areaId) {
+      return areaId && this.$http.post('/admin/area/getAllParentAreaId', null, {
         withoutToken: true,
         params: {areaId},
       }).then((res) => {
@@ -142,7 +142,7 @@ export default {
             e && (e.levelLabel = this.levelLabels[e.type])
           })
           if (res.data.length > 1) {
-            this.fullArea = res.data.reverse().slice(this.dataRange - 1)
+            this.fullArea = res.data.reverse().slice(this.dataRange)
           } else {
             this.fullArea = res.data
           }
@@ -155,18 +155,13 @@ export default {
         withoutToken: true,
         params: {id},
       }).then((res) => {
-        if (res.data.length) {
+        if (res?.data) {
           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.isHideTown) {
-            this.list.unshift(self)
+          if (this.selectRoot) {
+            let root = JSON.parse(JSON.stringify(this.fullArea?.[0]))
+            this.list.unshift(root)
           }
+          this.scrollHeight()
         }
       })
     },
@@ -185,16 +180,16 @@ export default {
       })
 
       if (this.selected.type == 5) {
-        fullName = fullName + this.selected.name
+        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.$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)) {
+        if (op.type < this.valueLevel && op.type < 5 && (/0{3}$/g.test(this.index) || !this.index)) {
           this.fullArea.push(op)
           this.getChildAreas(op.id)
         }
@@ -216,16 +211,23 @@ export default {
       }
     },
     handleInit() {
-      this.index = this.value || this.areaId
-
-      if (this.all && !this.areaId && !this.currentArea.id) {
-        this.getProvinces()
-
-        return false
+      this.index = this.value || this.root
+      if (!this.disabled) {
+        if (this.all) {
+          this.getProvinces()
+          return false
+        } else if (this.value) {
+          this.getFullArea(this.value).then(() => {
+            let area = this.fullArea?.[0]
+            if (area.type == this.valueLevel) this.getChildAreas(area.parentId)
+            else this.getChildAreas(area.id)
+          })
+        } else {
+          this.getFullArea(this.root).then(() => {
+            this.getChildAreas(this.root)
+          })
+        }
       }
-      this.getFullArea().then(() => {
-        this.getChildAreas(this.currentArea.id || this.areaId)
-      })
     },
     closePopup() {
       this.$refs.areaSelector?.handleSelect()

src/components/AiMore/AiMore.vue

@@ -0,0 +1,32 @@
+<template>
+  <section class="AiMore">
+    <u-icon name="arrow-right" color="#ddd" :label="value||placeholder" label-pos="left" :label-color="labelColor" label-size="32"/>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiMore",
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    placeholder: {default: "请选择"},
+    value: String
+  },
+  computed: {
+    isEmpty() {
+      return !this.value
+    },
+    labelColor() {
+      return this.isEmpty ? "#999" : "#333"
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiMore {
+}
+</style>