地区选择器追加多选

src/components/AiAreaPicker.vue

@@ -26,6 +26,9 @@ export default {
     event: "select"
   },
   props: {
+    /**
+     * 用于标定最大地区范围地区编码
+     */
     areaId: String,
     name: {default: ''},
     value: String,
@@ -36,6 +39,7 @@ export default {
     fullName: {default: ''},
     disabled: Boolean,
     selectRoot: Boolean,
+    multiple: Boolean
   },
   computed: {
     ...mapState(['user']),
@@ -57,6 +61,9 @@ export default {
     locationIcon() {
       return this.$cdn + this.icon
     },
+    hasValue() {
+      return this.multiple ? this.value?.length > 0 : !!this.value
+    }
   },
   data() {
     return {
@@ -73,7 +80,7 @@ export default {
       v && !this.areaName && this.getAreaName(this.value)
     },
     fullArea(v) {
-      v && this.value && this.$emit('update:fullName', v?.map(e => e.name)?.join("") || "")
+      v && this.value && !this.multiple && this.$emit('update:fullName', v?.map(e => e.name)?.join("") || "")
     },
     areaName(v) {
       v && this.$emit('update:name', v)
@@ -122,20 +129,30 @@ export default {
             this.areaName = data.name
             this.fullArea = data.fullArea
             this.$forceUpdate()
+          } else if (data.length > -1) {
+            this.$emit("select", data)
+            this.areaName = data.length == 0 ? '' : `已选择${data.length}个`
+            this.$forceUpdate()
           }
         })
-        let {value, all, valueLevel, selectRoot, areaId = this.root} = this.$props
+        let {value, all, valueLevel, selectRoot, areaId = this.root} = this.$props,
+            action = "/components/pages/selectArea"
+        if (this.multiple) {
+          action = "/components/pages/multiplyArea"
+        }
         let url = qs.stringifyUrl({
-          url: "/components/pages/selectArea", query: {...this.$attrs, value, all, valueLevel, selectRoot, areaId}
+          url: action, query: {...this.$attrs, value, all, valueLevel, selectRoot, areaId}
         })
         uni.navigateTo({url})
       }
     },
     getAreaName(area, name) {
-      name ? this.areaName = name : this.getFullArea(area).then(list => {
+      name ? this.areaName = name :
-        let arr = JSON.parse(JSON.stringify(list))
+          this.multiple ? this.areaName = !![area].toString() ? `已选择${[area].flat().length}个` : '' :
-        this.areaName = arr?.reverse()?.[0]?.name
+              this.getFullArea(area).then(list => {
-      })
+                let arr = JSON.parse(JSON.stringify(list))
+                this.areaName = arr?.reverse()?.[0]?.name || ""
+              })
     },
   }
 }