同步地区组件

src/components/AiAreaPicker/AiAreaPicker.vue

@@ -47,6 +47,10 @@ import AiMore from "../AiMore/AiMore";
 export default {
   name: 'AiAreaPicker',
   components: {AiMore, AiSearchPopup},
+  model: {
+    prop: "value",
+    event: "select"
+  },
   props: {
     areaId: {default: ''},
     name: {default: ''},
@@ -90,23 +94,19 @@ export default {
     return {
       fullArea: [],
       index: '',
-      areaName: '',
       list: [],
       levelLabels: ["省", "市", "县/区", "镇/街道", "村/社区"],
       selected: {},
-      height: '500px'
+      height: '500px',
+      areaName: ""
     }
   },
   watch: {
-    areaId(v) {
+    root(v) {
       v && (this.getFullArea(v))
     },
     value(v) {
-      if (v) {
+      v && !this.areaName && this.getAreaName(this.value)
-        this.getFullArea(v).then(list => {
-          this.areaName = list?.reverse()?.[0]?.name
-        })
-      }
     },
     fullArea: {
       handler(v) {
@@ -118,8 +118,8 @@ export default {
       }
     }
   },
-  mounted() {
+  created() {
-    this.handleInit()
+    this.getAreaName(this.value)
   },
   methods: {
     show() {
@@ -135,24 +135,29 @@ export default {
         }
       })
     },
-    getFullArea(areaId) {
+    getInfo(areaId) {
       return areaId && this.$instance.post('/admin/area/getAllParentAreaId', null, {
         withoutToken: true,
         params: {areaId},
-      }).then((res) => {
+      }).then(res => {
         if (res?.data) {
           res.data.forEach((e) => {
             e && (e.levelLabel = this.levelLabels[e.type])
           })
-          if (res.data.length > 1) {
+          return res.data.reverse()
-            this.fullArea = res.data.reverse().slice(this.dataRange)
-          } else {
-            this.fullArea = res.data
-          }
-          return this.fullArea
         }
       })
     },
+    getFullArea(areaId) {
+      return this.fullArea?.length > 0 ? Promise.resolve(this.fullArea) : this.getInfo(areaId).then(meta => {
+        if (meta.length > 1) {
+          this.fullArea = meta.slice(this.dataRange)
+        } else {
+          this.fullArea = meta
+        }
+        return this.fullArea
+      })
+    },
     getChildAreas(id) {
       id && this.$instance.post('/admin/area/queryAreaByParentId', null, {
         withoutToken: true,
@@ -177,17 +182,8 @@ export default {
     },
     handleSelect() {
       this.$emit('select', this.index)
-      let fullName = ''
+      this.$emit('update:name', this.selected.name)
-      this.fullArea.forEach(v => {
+      this.getAreaName(null, this.selected.name)
-        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) {
@@ -199,6 +195,9 @@ export default {
         this.selected = op
         this.index = op.id
       }
+      this.$nextTick(() => {
+        this.scrollHeight()
+      })
     },
     selectNode(area, i) {
       let deleteCount = this.fullArea.length - i
@@ -214,17 +213,17 @@ export default {
       }
     },
     handleInit() {
+      //初始化
       this.index = this.value || this.root
       if (!this.disabled) {
-        if (this.all) {
+        if (this.value) {
-          this.getProvinces()
-          return false
-        } else if (this.value) {
           this.getFullArea(this.value).then(() => {
-            let area = this.fullArea?.[0]
+            let area = this.fullArea.find(e => e.id == this.value) || {}
             if (area.type == this.valueLevel) this.getChildAreas(area.parentId)
             else this.getChildAreas(area.id)
           })
+        } else if (this.all) {
+          this.getProvinces()
         } else {
           this.getFullArea(this.root).then(() => {
             this.getChildAreas(this.root)
@@ -232,6 +231,17 @@ export default {
         }
       }
     },
+    getAreaName(area, name) {
+      name ? this.areaName = name : this.getFullArea(area).then(list => {
+        let arr = JSON.parse(JSON.stringify(list))
+        this.areaName = arr?.reverse()?.[0]?.name
+      })
+      let fullName = this.fullArea.map(e => e.name).join("")
+      if (this.selected.type == 5) {
+        fullName = fullName + name
+      }
+      this.$emit('update:fullName', fullName)
+    },
     closePopup() {
       this.$refs.areaSelector?.handleSelect()
     }