From 5323b3ce03a4306519a442ff072b328a2e474909 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Tue, 31 May 2022 15:33:57 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E5=9C=B0=E5=8C=BA=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=99=A8=E8=BF=BD=E5=8A=A0=E5=A4=9A=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pages/multiplyArea.vue | 208 ++++++++++++++++++++++++++
 src/components/pages/selectGird.vue   |  23 ---
 2 files changed, 208 insertions(+), 23 deletions(-)
 create mode 100644 src/components/pages/multiplyArea.vue

diff --git a/src/components/pages/multiplyArea.vue b/src/components/pages/multiplyArea.vue
new file mode 100644
index 00000000..cdb071d1
--- /dev/null
+++ b/src/components/pages/multiplyArea.vue
@@ -0,0 +1,208 @@
+<template>
+  <section class="multiplyArea">
+    <AiTopFixed>
+      <u-search placeholder="搜索" v-model="search" :show-action="false"/>
+      <span v-for="(item, index) in selectList" :key="index"><span v-if="index" style="margin:0 4px;">/</span>
+        <span class="color-3F8DF5" @click="selectListClick(item, index)" v-text="item.name"/>
+      </span>
+    </AiTopFixed>
+    <div class="header-middle">
+      <div class="showTypes">
+        <div v-if="options.length > 0">
+          <div class="cards" v-for="(item, index) in optionsList" :key="index" @click="getChildren(item)">
+            <div class="checkbox" :class="{checked:item.isChecked}" @click.stop="handleCheck(item)"/>
+            <div class="cardRight fill">
+              <div class="applicationNames fill">{{ item.name }}</div>
+              <u-icon v-if="item.type<valueLevel" name="arrow-right" color="#ddd"/>
+            </div>
+          </div>
+        </div>
+        <AiEmpty description="暂无数据" class="emptyWrap" v-else/>
+      </div>
+    </div>
+    <u-gap height="118"/>
+    <div class="footer">
+      <div class="btn cancel" @click="selectAll">全选</div>
+      <div class="btn cancel" @click="cancelAll">清空</div>
+      <div class="btn cancel" @click="back">取消</div>
+      <div class="btn" @click="confirm">确定选择</div>
+    </div>
+  </section>
+</template>
+
+<script>
+import AiTopFixed from "../AiTopFixed";
+
+export default {
+  name: "multiplyArea",
+  components: {AiTopFixed},
+  data() {
+    return {
+      search: "",
+      options: [],
+      selectList: [],
+      selected: {}
+    }
+  },
+  computed: {
+    optionsList() {
+      let {search} = this
+      return this.options.filter(e => !search || e.name.indexOf(search) > -1)
+    },
+    valueLevel() {
+      return this.$route.query.valueLevel || 5
+    }
+  },
+  methods: {
+    getOptionsByRoot() {
+      let {areaId, all} = this.$route.query, action = "/admin/area/queryAreaByParentId"
+      if (all == true || !areaId) {
+        action = "/admin/area/queryProvinceList"
+      }
+      this.selectList = [{name: "可选范围", id: areaId}]
+      this.$http.post(action, null, {
+        withoutToken: true, params: {id: areaId}
+      }).then(res => {
+        if (res?.data) {
+          this.options = res.data.map(e => ({...e, isChecked: !!this.selected[e.id]}))
+        }
+      })
+    },
+    getChildren(row) {
+      let {id, type} = row
+      if (type < this.valueLevel && !row.locked) {
+        row.locked = true
+        this.$http.post("/admin/area/queryAreaByParentId", null, {
+          withoutToken: true, params: {id}
+        }).then(res => {
+          if (res?.data) {
+            this.selectList.push(row)
+            this.options = res.data.map(e => ({...e, isChecked: !!this.selected[e.id]}))
+          }
+          row.locked = false
+        })
+      }
+    },
+    selectListClick(row, index) {
+      if (index == 0) { //第一级别
+        this.getOptionsByRoot()
+      } else {
+        this.selectList.splice(index, 5)
+        this.getChildren(row)
+      }
+    },
+    handleCheck(row, value) {
+      if (value > -1) {
+        row.isChecked = Boolean(value)
+      } else row.isChecked = !row.isChecked
+      if (row.isChecked) {
+        this.$set(this.selected, row.id, row)
+      } else {
+        delete this.selected[row.id]
+      }
+    },
+    confirm() {
+      uni.$emit("selectArea", Object.keys(this.selected))
+      this.back()
+    },
+    selectAll() {
+      this.optionsList.map(e => this.handleCheck(e, 1))
+    },
+    cancelAll() {
+      this.optionsList.map(e => this.handleCheck(e, 0))
+    },
+    back() {
+      uni.navigateBack({})
+    }
+  },
+  created() {
+    [this.$route.query.value].flat().map(id => this.$set(this.selected, id, {id}))
+    this.getOptionsByRoot()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.multiplyArea {
+  .color-3F8DF5 {
+    color: #3F8DF5;
+  }
+
+  .header-middle {
+    .showTypes {
+      .empty-div {
+        height: 16px;
+        background: #f5f5f5;
+      }
+
+      .cards {
+        display: flex;
+        align-items: center;
+        height: 120px;
+        line-height: 120px;
+        padding: 0 0 0 32px;
+
+        .checkbox {
+          width: 48px;
+          height: 48px;
+          background-image: url("./img/xz.png");
+          background-size: 100%;
+
+          &.checked {
+            background-image: url("./img/xzh.png");
+          }
+        }
+
+        .cardRight {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-left: 32px;
+          border-bottom: 1px solid #e4e5e6;
+          padding-right: 16px;
+          box-sizing: border-box;
+
+          .applicationNames {
+            font-size: 36px;
+            font-weight: 500;
+            color: #333333;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+  }
+
+  .footer {
+    width: 100%;
+    height: 118px;
+    background: #F4F8FB;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    text-align: right;
+
+    .btn {
+      display: inline-block;
+      padding: 0 32px;
+      height: 80px;
+      line-height: 80px;
+      background: #1365DD;
+      border-radius: 4px;
+      text-align: center;
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #FFF;
+      margin: 20px 34px 0 0;
+
+      &.cancel {
+        background: #fff;
+        color: #333;
+        border: 1px solid #ddd;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/pages/selectGird.vue b/src/components/pages/selectGird.vue
index 2755015e..2640af04 100644
--- a/src/components/pages/selectGird.vue
+++ b/src/components/pages/selectGird.vue
@@ -272,29 +272,6 @@ export default {
       }
     }
   }
-
-  .subBtn {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 118px;
-    background: #f4f8fb;
-
-    div {
-      width: 192px;
-      height: 80px;
-      line-height: 80px;
-      text-align: center;
-      background: #1365dd;
-      border-radius: 4px;
-      font-size: 32px;
-      color: #fff;
-      margin: 20px 34px 0 0;
-      float: right;
-    }
-  }
-
   .footer {
     width: 100%;
     height: 118px;

From 60a70df499428fb1fe79ca9ab2dd20a103067980 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Tue, 31 May 2022 15:34:34 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E5=9C=B0=E5=8C=BA=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=99=A8=E8=BF=BD=E5=8A=A0=E5=A4=9A=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AiAreaPicker.vue | 31 ++++++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/AiAreaPicker.vue b/src/components/AiAreaPicker.vue
index 5d7dfb40..064eff25 100644
--- a/src/components/AiAreaPicker.vue
+++ b/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 => {
-        let arr = JSON.parse(JSON.stringify(list))
-        this.areaName = arr?.reverse()?.[0]?.name
-      })
+      name ? this.areaName = name :
+          this.multiple ? this.areaName = !![area].toString() ? `已选择${[area].flat().length}个` : '' :
+              this.getFullArea(area).then(list => {
+                let arr = JSON.parse(JSON.stringify(list))
+                this.areaName = arr?.reverse()?.[0]?.name || ""
+              })
     },
   }
 }

From 58bbe2d5bc565966379be0c3e137f48d1a1995ad Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Tue, 31 May 2022 15:41:11 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E5=9C=B0=E5=8C=BA=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=99=A8=E8=BF=BD=E5=8A=A0=E5=A4=9A=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AiAreaPicker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AiAreaPicker.vue b/src/components/AiAreaPicker.vue
index 064eff25..00cc9b39 100644
--- a/src/components/AiAreaPicker.vue
+++ b/src/components/AiAreaPicker.vue
@@ -31,7 +31,7 @@ export default {
      */
     areaId: String,
     name: {default: ''},
-    value: String,
+    value: {default: ''},
     all: Boolean,
     icon: {default: "location.svg"},
     isForm: Boolean,

From 43428029deaf70f3cc1621c1ac0bda0369b3c119 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Tue, 31 May 2022 15:49:03 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E8=BF=87=E6=BB=A4=E7=A9=BA=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pages/multiplyArea.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/multiplyArea.vue b/src/components/pages/multiplyArea.vue
index cdb071d1..a5ab24db 100644
--- a/src/components/pages/multiplyArea.vue
+++ b/src/components/pages/multiplyArea.vue
@@ -116,7 +116,7 @@ export default {
     }
   },
   created() {
-    [this.$route.query.value].flat().map(id => this.$set(this.selected, id, {id}))
+    [this.$route.query.value].filter(e=>!!e).flat().map(id => this.$set(this.selected, id, {id}))
     this.getOptionsByRoot()
   }
 }