26840

src/apps/AppWalkask/add.vue

@@ -4,7 +4,7 @@
       <div class="header-description">
         <u-form :model="forms" ref="uForm" label-width="auto">
           <u-form-item label="区域选择" prop="areaId" class="areaIds" style="position: relative">
-            <AiAreaPicker v-model="forms.areaId" :areaId="areaIdProps" @select="areaSelect" style="color: #333"></AiAreaPicker>
+            <AiAreaPicker :value="forms.areaId" :areaId="areaIdProps" @select="areaSelect" style="color: #333"></AiAreaPicker>
             <u-icon name="arrow-right" color="rgb(192, 196, 204)" size="30" style="margin-left: 4px" />
           </u-form-item>
 
@@ -93,7 +93,7 @@ export default {
     this.areaIdProps = this.user.areaId
     if (!this.id) {
       this.forms.areaId = this.user.areaId
-      this.areaName = this.user.areaName
+      this.forms.areaName = this.user.areaName
     }
     this.$dict.load('realityStatus').then(() => {
       this.getDetail()
@@ -126,6 +126,8 @@ export default {
             this.forms = res.data
             this.forms.create_user_name = res.data.name
             this.forms.realityValue = res.data.reality
+            this.forms.areaId = res.data.areaId
+            this.forms.areaName = res.data.areaName
             this.forms.reality = this.$dict.getLabel('realityStatus', res.data.reality)
             if (res.data.images) {
               this.forms.images = JSON.parse(res.data.images || '[]')

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 || currentArea.name"/>
+          <div v-text="areaName"/>
         </div>
       </div>
       <div class="areaSelector">
@@ -90,6 +90,7 @@ export default {
     return {
       fullArea: [],
       index: '',
+      areaName: '',
       list: [],
       levelLabels: ["省", "市", "县/区", "镇/街道", "村/社区"],
       selected: {},
@@ -101,6 +102,12 @@ export default {
       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(() => {
@@ -134,8 +141,8 @@ export default {
             this.fullArea = res.data.reverse().slice(this.dataRange)
           } else {
             this.fullArea = res.data
-          }
 
+          }
           return this.fullArea
         }
       })
@@ -148,6 +155,14 @@ export default {
         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)
           }
@@ -173,6 +188,7 @@ export default {
       if (this.selected.type == 5) {
         fullName = fullName + this.selected.name
       }
+      this.areaName = this.selected.name
       this.$emit('update:fullName', fullName)
       this.$emit('update:name', this.selected.name)
       this.closePopup()
@@ -210,7 +226,6 @@ export default {
 
         return false
       }
-      console.log(this.index)
       this.getFullArea().then(() => {
         this.getChildAreas(this.currentArea.id || this.areaId)
       })