地区选择器

src/components/AiAreaPicker.vue

@@ -5,7 +5,7 @@
         <slot v-if="$slots.default"/>
         <div v-else class="areaSelector">
           <image :src="locationIcon" class="location"/>
-          <div v-text="selected.name || name"/>
+          <div v-text="selected.name || currentArea.name"/>
         </div>
       </div>
       <div class="areaSelector">
@@ -26,14 +26,15 @@
           <b>选择地区</b>
           <em>选择区域</em>
           <div class="selectedArea" v-if="hasSelected"/>
-          <div/>
           <span v-text="'行政区域'"/>
         </div>
         <!--end-->
       </div>
-      <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 class="fill pendingList">
+        <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>
       </div>
       <div class="bottomBtns">
         <div @click="closePopup">取消</div>
@@ -51,14 +52,10 @@ import {mapState} from 'vuex'
 export default {
   name: 'AiAreaPicker',
   components: {AiCell, AiSearchPopup},
-  model: {
-    prop: "value",
-    event: "select"
-  },
   props: {
-    value: {default: ""},
     areaId: {default: ''},
     name: {default: ''},
+    value: String,
     all: Boolean,
     icon: {default: "location.svg"}
   },
@@ -76,7 +73,7 @@ export default {
       })
       return level
     },
-    currentSelector() {
+    currentArea() {
       return this.fullArea?.slice(-1)?.[0] || {}
     },
     locationIcon() {
@@ -99,48 +96,52 @@ export default {
     }
   },
   watch: {
-    value(v) {
-      v && this.handleInit()
+    areaId(v) {
+      v && (this.getFullArea())
     }
   },
+  mounted () {
+    this.handleInit()
+  },
   methods: {
+    show() {
+      this.handleInit()
+      this.$refs.areaSelector.showPopup()
+    },
     getFullArea() {
-      let areaId = this.index || (this.all ? '' : this.$areaId)
-      return areaId && this.$http.post('/admin/area/getAllParentAreaId', null, {
+      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.levelLabel = this.levelLabels[e.type]
+          res.data.forEach((e) => {
+            e && (e.levelLabel = this.levelLabels[e.type])
           })
-          if (!/0{3}$/g.test(areaId)) {//如果是村需要特殊处理
-            this.selected = res.data.shift()
-          } else {
-            this.selected = res.data?.[0]
-          }
-          this.$emit('update:name', this.selected.name)
           if (res.data.length > 1) {
-            this.fullArea = res.data.filter(e => !!e.levelLabel).reverse().slice(this.dataRange)
+            this.fullArea = res.data.reverse().slice(this.dataRange)
           } else {
             this.fullArea = res.data
           }
           return this.fullArea
         }
-      }) || Promise.reject()
+      })
     },
     getChildAreas(id) {
       id && this.$http.post('/admin/area/queryAreaByParentId', null, {
         withoutToken: true,
         params: {id},
       }).then((res) => {
-        if (res?.data) {
+        if (res.data.length) {
           this.list = res.data
-          let self = this.fullArea.find((e) => e.id == id)
-          self && this.list.unshift(self)
+          let self = this.fullArea.find((e) => e.id ==  this.areaId)
+          if (self.id) {
+            this.list.unshift(self)
+          }
         }
       })
     },
+
     getProvinces() {
       this.$http.post('/admin/area/queryProvinceList', null, {withoutToken: true}).then((res) => {
         if (res?.data) {
@@ -150,6 +151,15 @@ export default {
     },
     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.$emit('update:fullName', fullName)
       this.$emit('update:name', this.selected.name)
       this.closePopup()
     },
@@ -175,17 +185,20 @@ export default {
     },
     handleInit() {
       this.index = this.value || this.areaId
+
+      if (this.all && !this.areaId && !this.currentArea.id) {
+        this.getProvinces()
+
+        return false
+      }
+      console.log(this.index)
       this.getFullArea().then(() => {
-        if (this.all && !this.currentSelector.id) this.getProvinces()
-        else this.getChildAreas(this.currentSelector.id)
+        this.getChildAreas(this.currentArea.id || this.areaId)
       })
     },
     closePopup() {
       this.$refs.areaSelector?.handleSelect()
     }
-  },
-  created() {
-    !!this.value && this.handleInit()
   }
 }
 </script>
@@ -271,10 +284,6 @@ export default {
   }
 
   ::v-deep.u-drawer-content {
-    position: fixed;
-    border-radius: 32px 32px 0 0;
-    overflow: hidden;
-    padding: 0 32px 90px;
 
     .areaSelector {
       box-sizing: border-box;
@@ -282,13 +291,17 @@ export default {
     }
   }
 
-  ::v-deep.pendingItem {
-    color: #333;
-    height: 104px;
-    text-align: start;
+  ::v-deep .pendingList {
+    padding: 0 32px 120px;
 
-    .self {
-      font-weight: bold;
+    .pendingItem {
+      color: #333;
+      height: 104px;
+      text-align: start;
+
+      .self {
+        font-weight: bold;
+      }
     }
   }