企微迁移智慧监护(手环)

2022-05-17 09:12:29 +08:00
parent 9a3aab86d0
commit f5a1cd7424
10 changed files with 5 additions and 4 deletions
--- a/src/apps/AppGuardianship/component/areaSelector.vue
+++ b/src/apps/AppGuardianship/component/areaSelector.vue
@@ -0,0 +1,146 @@
+<template>
+  <section class="areaSelector">
+    <ai-search-popup mode="bottom" ref="areaSelector">
+      <template #btn>
+        <div class="areaSelector">
+          <span v-for="area in fullArea" :key="area.id" v-text="area.name"
+                :class="{current:area.id==areaId}" @tap="index=area.id,getChildAreas(area.id)"/>
+        </div>
+      </template>
+      <div class="areaSelector">
+        <span v-for="area in fullArea" :key="area.id" v-text="area.name"
+              :class="{current:area.id==index}"
+              @click="index=area.id,getChildAreas(area.id)"/>
+      </div>
+      <div class="pendingItem" flex v-for="op in list" :key="op.id" @tap="handleSelect(op)">
+        <div class="fill" :class="{self:index==op.id}" v-html="op.name"/>
+        <u-icon name="arrow-right" color="#ddd"/>
+      </div>
+    </ai-search-popup>
+  </section>
+</template>
+
+<script>
+import AiSearchPopup from "../../../components/AiSearchPopup";
+import AiCell from "../../../components/AiCell";
+import {mapState} from "vuex";
+
+export default {
+  name: "areaSelector",
+  components: {AiCell, AiSearchPopup},
+  props: {
+    areaId: {default: ""}
+  },
+  computed: {
+    ...mapState(['user']),
+    dataRange() {
+      let rules = [10, 8, 6, 3, 0], level = 2
+      rules.some((e, i) => {
+        let reg = new RegExp(`0{${e}}`, 'g')
+        if (reg.test(this.user.areaId)) {
+          return level = i
+        }
+      })
+      return level
+    }
+  },
+  data() {
+    return {
+      fullArea: [],
+      index: "",
+      list: []
+    }
+  },
+  watch: {
+    areaId(v) {
+      v && this.getFullArea()
+    }
+  },
+  methods: {
+    getFullArea() {
+      let {areaId} = this
+      return areaId && this.$http.post("/admin/area/getAllParentAreaId", null, {
+        params: {areaId}
+      }).then(res => {
+        if (res?.data) {
+          this.fullArea = res.data.reverse().slice(this.dataRange)
+        }
+      })
+    },
+    getChildAreas(id) {
+      id && this.$http.post("/admin/area/queryAreaByParentId", null, {
+        params: {id}
+      }).then(res => {
+        if (res?.data) {
+          this.list = res.data
+          let self = this.fullArea.find(e => e.id == this.index)
+          this.list.unshift(self)
+        }
+      })
+    },
+    handleSelect(op) {
+      this.$emit('select', op)
+      this.$refs.areaSelector?.handleSelect()
+    }
+  },
+  created() {
+    this.index = this.areaId
+    this.getFullArea()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.areaSelector {
+  ::v-deep .AiSearchPopup {
+    .areaSelector {
+      display: flex;
+      align-items: center;
+
+      span {
+        cursor: pointer;
+
+        &:first-of-type:before {
+          content: "";
+          padding: 0;
+        }
+
+        &:before {
+          color: #333;
+          content: "/";
+          padding: 0 16px;
+        }
+      }
+
+      .current {
+        color: #3F8DF5;
+      }
+    }
+
+    .u-drawer-content {
+      position: fixed;
+
+      .areaSelector {
+        padding: 0 16px;
+        box-sizing: border-box;
+        border-bottom: 16px solid #f5f5f5;
+
+        span {
+          line-height: 100px;
+        }
+      }
+    }
+
+    .pendingItem {
+      margin-left: 32px;
+      padding-right: 32px;
+      height: 104px;
+      border-bottom: 1px solid #ddd;
+
+      .self {
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style>