修复组件

src/components/AiAreaPicker/AiSearchPopup.vue

@@ -1,92 +0,0 @@
-<template>
-  <section class="AiSearchPopup">
-    <u-popup v-model="show" :length="length" closeable :mode="mode" border-radius="32" z-index="202203181717" safe-area-inset-bottom>
-      <slot v-if="$slots.default"/>
-      <div class="searchPane" v-else>
-        <div class="title">{{ title }}</div>
-        <u-search v-model="search" :placeholder="placeholder" :show-action="false" @search="getList()" :focus="show"/>
-        <div class="result">
-          <div class="option" v-for="(op,i) in list" :key="i" @tap="handleSelect(op)">{{ op[ops.label] }}</div>
-        </div>
-      </div>
-    </u-popup>
-    <div @tap="show= !disabled&&true">
-      <slot name="btn"/>
-    </div>
-  </section>
-</template>
-
-<script>
-export default {
-  name: "AiSearchPopup",
-  props: {
-    title: {default: "搜索"},
-    placeholder: {default: "请搜索"},
-    ops: {default: () => ({label: 'label', search: 'name'})},
-    url: String,
-    mode: {default: "right"},
-    length: {default: "100%"},
-    disabled: Boolean
-  },
-  data() {
-    return {
-      show: false,
-      search: "",
-      list: []
-    }
-  },
-  watch: {
-    show(v) {
-      !v && this.$emit('close')
-    }
-  },
-  methods: {
-    getList() {
-      this.url && this.$instance.post(this.url, null, {
-        params: {[this.ops.search]: this.search}
-      }).then(res => {
-        if (res?.data) {
-          this.list = res.data
-        }
-      })
-    },
-    handleSelect(op) {
-      this.$emit('select', op)
-      this.show = false
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.AiSearchPopup {
-  ::v-deep .searchPane {
-    padding: 0 16px;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-
-    .title {
-      width: 100%;
-      height: 100px;
-      text-align: center;
-      line-height: 100px;
-    }
-
-    .result {
-      flex: 1;
-      min-height: 0;
-      overflow-y: auto;
-      padding-bottom: 30px;
-    }
-
-    .option {
-      display: flex;
-      align-items: center;
-      height: 80px;
-      border-bottom: 1px solid #eee;
-      font-size: 32px;
-    }
-  }
-}
-</style>

src/components/pages/selectArea.vue

@@ -9,8 +9,8 @@
           <p v-else>请选择</p>
         </div>
         <div/>
-        <span v-if="all" v-text="`省`" @click="selectNode({}, -1)"/>
-        <span v-for="(area,i) in fullArea.filter(e=>e.type<valueLevel)" :key="area.id"
+        <span v-if="urlParams.all" v-text="`省`" @click="selectNode({}, -1)"/>
+        <span v-for="(area,i) in typeLabels" :key="area.id"
               v-text="area.levelLabel" @click="selectNode(area, i)"/>
       </div>
     </div>
@@ -37,11 +37,11 @@ export default {
   computed: {
     ...mapState(['user']),
     dataRange() {
-      if (this.all || this.disabled) return 0
-      return this.getAreaType(this.root)
+      console.log(this.urlParams.all, this.urlParams.disabled)
+      return this.urlParams.all || this.urlParams.disabled ? 0 : this.getAreaType(this.root)
     },
     root() {
-      return this.areaId || this.user.areaId || this.$areaId
+      return this.urlParams.areaId || this.user.areaId || this.$areaId
     },
     pending() {
       return this.list?.map(e => ({...e, levelLabel: this.levelLabels[e.type]})) || []
@@ -50,8 +50,11 @@ export default {
       return this.fullArea?.length > 0
     },
     hasLastLevelValue() {
-      return this.fullArea.some(e => e.type >= this.valueLevel)
+      return this.fullArea.some(e => e.type >= this.urlParams.valueLevel)
     },
+    typeLabels() {
+      return this.fullArea.filter(e => e.type < this.urlParams.valueLevel)
+    }
   },
   data() {
     return {
@@ -99,7 +102,7 @@ export default {
       }).then((res) => {
         if (res?.data) {
           this.list = res.data
-          if (this.selectRoot) {
+          if (this.urlParams.selectRoot) {
             if (this.hasLastLevelValue) {
               let parent = JSON.parse(JSON.stringify(this.fullArea?.slice(-2)?.[0]))
               this.list.unshift(parent)
@@ -127,13 +130,14 @@ export default {
       if (op.id != this.index) {
         this.selected = op
         this.index = op.id
-        if (op.type == this.valueLevel) {
+        let {length} = this.fullArea
+        if (op.type == this.urlParams.valueLevel) {
           if (this.hasLastLevelValue) {
-            this.fullArea.splice(this.fullArea.length - 1, 1, op)
+            this.fullArea.splice(length - 1, 1, op)
           } else this.fullArea.push(op)
-        } else if (op.type < this.valueLevel) {
+        } else if (op.type < this.urlParams.valueLevel) {
           if (this.hasLastLevelValue) {
-            this.fullArea.splice(this.fullArea.length - 1, 1)
+            this.fullArea.splice(length - 1, 1)
           } else {
             this.fullArea.push(op)
             this.getChildAreas(op.id)
@@ -146,7 +150,7 @@ export default {
       if (deleteCount > 0) {
         this.fullArea.splice(i + 1, deleteCount)
       }
-      if (this.all && !area.id) {
+      if (this.urlParams.all && !area.id) {
         this.index = ''
         this.getProvinces()
       } else {
@@ -156,18 +160,18 @@ export default {
     },
     handleInit() {
       //初始化
-      this.index = this.value || this.root
-      if (!this.disabled) {
-        if (this.value) {
-          this.getFullArea(this.value).then(() => {
-            let area = this.fullArea.find(e => e.id == this.value) || {}
+      this.index = this.urlParams.value || this.root
+      if (!this.urlParams.disabled) {
+        if (this.urlParams.value) {
+          this.getFullArea(this.urlParams.value).then(() => {
+            let area = this.fullArea.find(e => e.id == this.urlParams.value) || {}
             //当前选择列表必须是可选范围内的值
-            let top = area.type == this.valueLevel ? area.parentId : area.id
+            let top = area.type == this.urlParams.valueLevel ? area.parentId : area.id
             if (this.getAreaType(top) >= this.dataRange) {
               this.getChildAreas(top)
             }
           })
-        } else if (this.all) {
+        } else if (this.urlParams.all) {
           this.getProvinces()
         } else {
           this.getFullArea(this.root).then(() => {
@@ -194,7 +198,7 @@ export default {
   },
   onLoad(params) {
     Object.keys(params).map(k => {
-      this[k] = params[k] == "false" ? false : params[k]
+      this.$set(this.urlParams, k, params[k] == "false" ? false : params[k])
     })
   },
   created() {