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] =?UTF-8?q?=E5=9C=B0=E5=8C=BA=E9=80=89=E6=8B=A9=E5=99=A8?=
 =?UTF-8?q?=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;