From 1d98c00999235cc1ea3aa5bc75c0d1a9f0d2db74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E6=9C=89=E6=B8=85=E9=A6=99=E6=9C=88=E6=9C=89?=
 =?UTF-8?q?=E9=98=B4?= <185154740@qq.com>
Date: Fri, 10 Dec 2021 16:47:42 +0800
Subject: [PATCH] AiAreaPicker

---
 src/apps/AppWalkask/AppWalkask.vue            |  35 ++-
 src/apps/AppWalkask/components/add.vue        |  47 ++--
 .../AppWalkask/components/images/icon1.png    | Bin 0 -> 396 bytes
 .../AppWalkask/components/images/icon2.png    | Bin 0 -> 766 bytes
 src/components/AiAreaPicker.vue               | 222 ++++++++++++++++++
 5 files changed, 278 insertions(+), 26 deletions(-)
 create mode 100644 src/apps/AppWalkask/components/images/icon1.png
 create mode 100644 src/apps/AppWalkask/components/images/icon2.png
 create mode 100644 src/components/AiAreaPicker.vue

diff --git a/src/apps/AppWalkask/AppWalkask.vue b/src/apps/AppWalkask/AppWalkask.vue
index 00e11bde..c4969218 100644
--- a/src/apps/AppWalkask/AppWalkask.vue
+++ b/src/apps/AppWalkask/AppWalkask.vue
@@ -11,10 +11,13 @@
         <div class="currentLeft" v-if="currentTabs == 0">
           <div class="currentLeft-top">
             <div class="left">
-              <u-icon name="map"></u-icon>
-              <div class="btns" style="display: inline-block" @click="show = true">
+              <img src="./components/images/icon2.png" alt="" />
+
+              <ai-area-picker v-model="areaId" ref="areaIds" :areaId="areaId" @select="areaSelect" style="color: #fff"> </ai-area-picker>
+
+              <!-- <div class="btns" style="display: inline-block" @click="show = true">
                 <u-icon name="arrow-down"></u-icon>
-              </div>
+              </div> -->
             </div>
 
             <u-search v-model="keyword" :clearabled="true" placeholder="请输入标题" :show-action="false" bg-color="#1F5CAF" search-icon-color="#E2E8F1" color="#E2E8F1" height="58" @search="handerSearch" @clear="handerClear"></u-search>
@@ -74,14 +77,16 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import AiEmpty from '../../components/AiEmpty.vue'
 import add from './components/add.vue'
 import detail from './components/detail.vue'
+import AiAreaPicker from '../../components/AiAreaPicker.vue'
 
 export default {
   name: 'AppWalkask',
   appName: '走访慰问',
-  components: { AiEmpty, add, detail },
+  components: { AiEmpty, add, detail, AiAreaPicker },
   props: {},
   data() {
     return {
@@ -117,10 +122,13 @@ export default {
       comp: '',
       params: null,
       current: 1,
+      areaId: '',
     }
   },
-  computed: {},
+  computed: { ...mapState(['user']) },
   created() {
+    console.log(this.user)
+    this.areaId = this.user.areaId
     this.getList()
   },
   mounted() {},
@@ -131,6 +139,7 @@ export default {
           params: {
             size: 6,
             current: this.current,
+            areaId: this.areaId,
           },
         })
         .then((res) => {
@@ -140,6 +149,14 @@ export default {
         })
     },
 
+    areaSelect(e) {
+      if (e.type == 5) {
+        this.areaId = e.id
+      } else {
+        return this.$u.toast('请选择到村')
+      }
+    },
+
     change(index) {
       this.currentTabs = index
     },
@@ -208,7 +225,13 @@ export default {
         background: #3975c6;
         padding: 24px 30px;
         .left {
-          width: 50%;
+          width: 40%;
+          display: flex;
+          align-items: center;
+          img {
+            width: 48px;
+            height: 48px;
+          }
         }
       }
 
diff --git a/src/apps/AppWalkask/components/add.vue b/src/apps/AppWalkask/components/add.vue
index 1aa272b3..9fb616ef 100644
--- a/src/apps/AppWalkask/components/add.vue
+++ b/src/apps/AppWalkask/components/add.vue
@@ -6,11 +6,7 @@
       <div class="header-content">
         <u-form :model="forms" ref="uForm" label-width="auto">
           <u-form-item label="区域选择" prop="areaId" required style="position: relative">
-            <u-input v-model="forms.areaId" disabled placeholder="请选择区域" @click="showAreaId = true" />
-
-            <u-select v-model="showAreaId" :list="areaIdlist" @confirm="changeAreaId"></u-select>
-
-            <u-icon name="arrow-right" color="#CCCCCC" style="position: absolute; top: 25px; right: 30px"></u-icon>
+            <ai-area-picker v-model="forms.areaId" ref="areaIds" :areaId="areaIdProps" @select="areaSelect" style="color: #333"> </ai-area-picker>
           </u-form-item>
 
           <u-form-item label="走访对象" prop="object" style="position: relative">
@@ -22,10 +18,11 @@
             <u-icon name="arrow-right" color="#CCCCCC" style="position: absolute; top: 25px; right: 30px"></u-icon>
           </u-form-item>
 
-          <u-form-item label="现实状态" prop="nowStstus" required style="position: relative">
-            <u-input v-model="forms.nowStstus" disabled placeholder="请选择走访对象" @click="showStstus = true" />
+          <u-form-item label="现实状态" prop="reality" required style="position: relative">
+            <u-input v-model="forms.reality" disabled placeholder="请选择走访对象" @click="showStstus = true" />
 
-            <u-select v-model="showStstus" :list="Objectlist" @confirm="changeStstus"></u-select>
+            <!-- :disabled="!forms.object" -->
+            <u-select v-model="showStstus" :list="$dict.getDict('realityStatus')" value-name="dictValue" label-name="dictName" @confirm="changeStstus"></u-select>
 
             <u-icon name="arrow-right" color="#CCCCCC" style="position: absolute; top: 25px; right: 30px"></u-icon>
           </u-form-item>
@@ -56,23 +53,27 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import AiUploader from '../../../components/AiUploader.vue'
 import AiBack from '../../../components/AiBack.vue'
 import walkObject from './walkObject.vue'
+import AiAreaPicker from '../../../components/AiAreaPicker'
 
 export default {
   name: 'add',
-  components: { AiUploader, AiBack, walkObject },
+  components: { AiUploader, AiBack, walkObject, AiAreaPicker },
   props: {},
   data() {
     return {
       backgroundNavbar: {
         backgroundColor: '#3975C6',
       },
+
       forms: {
         areaId: '',
         object: '',
-        nowStstus: '',
+        reality: '',
+        realitylabel: '',
         things: '',
         content: '',
         avatar: [],
@@ -102,10 +103,14 @@ export default {
       showStstus: false,
       flag: false,
       addList: true,
+      areaIdProps: '',
     }
   },
-  computed: {},
-  created() {},
+  computed: { ...mapState(['user']) },
+  created() {
+    this.areaIdProps = this.user.areaId
+    this.$dict.load('realityStatus').then(() => {})
+  },
   mounted() {},
   methods: {
     submit() {
@@ -113,7 +118,7 @@ export default {
 
       this.$refs.uForm.validate((valid) => {
         if (valid) {
-          if (!this.form.areaId) {
+          if (!this.areaId) {
             return this.$u.toast('请选择走访对象')
           }
           if (!this.form.things) {
@@ -125,7 +130,7 @@ export default {
             .post(`/appjobresume/addOrUpdate`, {
               areaId: this.forms.areaId,
               object: this.forms.object,
-              nowStstus: this.forms.nowStstus,
+              reality: this.forms.reality == Number ? this.forms.reality : this.forms.realitylabel,
               things: this.forms.things,
               content: this.forms.content,
               avatar: this.forms.avatar[0],
@@ -145,10 +150,12 @@ export default {
       })
     },
 
-    changeAreaId(e) {
-      console.log(e)
-      this.forms.areaId = e[0].value
-      this.forms.areaIdValue = e[0].label
+    areaSelect(e) {
+      if (e.type == 5) {
+        this.forms.areaId = e.id
+      } else {
+        return this.$u.toast('请选择到村')
+      }
     },
 
     changeObject(e) {
@@ -159,8 +166,8 @@ export default {
 
     changeStstus(e) {
       console.log(e)
-      this.forms.nowStstus = e[0].value
-      this.forms.nowStstuslabel = e[0].label
+      this.forms.reality = e[0].value
+      this.forms.realitylabel = e[0].label
     },
 
     toWalkObject() {
diff --git a/src/apps/AppWalkask/components/images/icon1.png b/src/apps/AppWalkask/components/images/icon1.png
new file mode 100644
index 0000000000000000000000000000000000000000..a4a19c6811e6e46fd3b2d76df7bbcb31196883a0
GIT binary patch
literal 396
zcmV;70dxL|P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00001b5ch_0Itp)
z=>Px$MoC0LR7gv`mAfuRK@^3*rJ+#p2s$c>o`^<x1&PijB&a-u3W<9s@d`vELN8IF
z@(2_P8e1lrU(P?yoY@J-l#?~<n^}9$jA(hNWq*nQGaCgKfhk}pZs-}f0*)o!H*GQt
zFta{j8(08(GA5tE39upQy-rgLh~^i-q%*>6V5Sa|0~`WNPV<iJNYZk;<_92Ve%BC7
zjvL|{OKVaG*aKD)mk(eQIF0l3z!uP(==LS8R_E#f55RD;a9z@Fb<WJzfSpA5C~2ew
z2;GqGY*5l`0vG^Z(vwOG-S<7}PS85wHxWHa>WcTTi+mudt3m$1O+$6eti6jC0ihEv
zfeGhrz5%A)Pep|E1Lwea0dfn>N_ulYb{(Oal^~7g!N>C-<RC?J7a$Xt%iIm9K+a-(
qbGgim&$Y8_+_GW~+)f!`>wqugkA)dLaAVs50000<MNUMnLSTYDh@!v%

literal 0
HcmV?d00001

diff --git a/src/apps/AppWalkask/components/images/icon2.png b/src/apps/AppWalkask/components/images/icon2.png
new file mode 100644
index 0000000000000000000000000000000000000000..c6f0463863e8c2fd5b11e76661db770d05dec625
GIT binary patch
literal 766
zcmV<a0s;MrP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px%xJg7oRA@u(m^p}4K@f(&KT#1y5Ih1SHFCi#*j+FZ6az6aQ84yM6eA4`#K1sJ
zL=#<21x-xEKopDw7r_&aJQ5RK5X1vlgOZY77;tA^z1KbS7?_Uhb^TvecUAQhL%uZR
z`WXSVoxx%mFta7VZeTmG8CVM}OMqX2_rP=DA#hjH_Y&~g0A{uxH~}0076(QB1a1K5
zCA|%PGp|`=05e+zoB@sl3mS^}4O|3HOZwGhk46Aywhp)rY;59mo^M_PdnLWAyI*Yp
zGus5*16I{_R$>1M*d^&joqcNoq{u(&gZMek4zaCHCc*&e%ug3QHr)d4$7v#ZC+Yy4
zOVy@MhMU@YbvhaOI0TSN<?D=U6VcLX<JD;_QevY3Q^3KxDl+Y_ORDr)36MIhU#@7A
zngtx#8<l6x*H~(Fhk%7auphwcs*W82*azGUI{gUjk>n%8f6L5##JB^j3GTOF(yd;$
z5r8Ye;ebPr{A4%rbKfV3$H7cYN$Tl40^rUj0sxmK9ShiDW|x4Y0o!RwleroA46Fz^
z^XPk@s9a{|0r9|8tr<xxa{>HlM25AcRTr+~82RY^tx7%cM^aDUkt5V5z^o*ndb_R&
zz|bF|HZSoLN#nU0XtRu7m2@N*VCWl}SBy4B34b^HDABW8RbFCGpP98W%w3b@vs2F%
z1@J!)!#hr=EDZ8Nb3u~-s;OL|3?u+=D1&%Xz5>RJKPeN0|4!-Wqkbm6hd)$?J{g2F
z&@sns0UiL$qfUZ$Uw|Ewo(1jynbihJnb->4F9_k{cS?F%M|@*|!VrzcX8{y~$P%9o
zkO`43z6d}=h$7;P0n~&jCcY>@5TdB~;s6y8#l`mppbJD_#P<y#L2Lldrp9zi(wn+X
wDq`QL6Gt{4l+6fWP?7HDXOw|a1~Mb?7liW|Kst8+)c^nh07*qoM6N<$g8Y(1!2kdN

literal 0
HcmV?d00001

diff --git a/src/components/AiAreaPicker.vue b/src/components/AiAreaPicker.vue
new file mode 100644
index 00000000..67abc4fb
--- /dev/null
+++ b/src/components/AiAreaPicker.vue
@@ -0,0 +1,222 @@
+<template>
+  <section class="AiAreaPicker">
+    <ai-search-popup mode="bottom" ref="areaSelector">
+      <div slot="btn" @tap="handleInit">
+        <slot v-if="$slots.default" />
+        <div v-else class="areaSelector">
+          <image :src="icon" class="location" />
+          <div v-text="currentArea.name" />
+        </div>
+      </div>
+      <div class="areaSelector">
+        <div class="fixedTop">
+          <span v-for="(area, i) in fullArea" :key="area.id" v-text="area.name" :class="{ current: area.id == index }" @click="selectNode(area, i)" />
+        </div>
+        <span v-text="currentArea.name" />
+      </div>
+      <div class="pendingItem flexRow" flex v-for="op in list" :key="op.id">
+        <div class="fill" :class="{ self: index == op.id }" v-html="op.name" @tap="handleSelect(op)" />
+        <u-icon v-if="index != op.id" name="arrow-right" color="#ddd" @click="getChild(op)" />
+      </div>
+    </ai-search-popup>
+  </section>
+</template>
+
+<script>
+import AiSearchPopup from './AiSearchPopup'
+import AiCell from './AiCell.vue'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'AiAreaPicker',
+  components: { AiCell, AiSearchPopup },
+  props: {
+    areaId: { default: '' },
+    name: { default: '' },
+    all: Boolean,
+  },
+  computed: {
+    ...mapState(['user']),
+    dataRange() {
+      let rules = [10, 8, 6, 3, 0],
+        level = 0
+      if (this.all) return (level = 0)
+      rules.some((e, i) => {
+        let reg = new RegExp(`0{${e}}`, 'g')
+        if (reg.test(this.areaId || this.user.areaId || this.$areaId)) {
+          return (level = i)
+        }
+      })
+      return level
+    },
+    currentArea() {
+      return this.fullArea?.slice(-1)?.[0] || {}
+    },
+    icon() {
+      return this.$cdn + '/img/location.svg'
+    },
+  },
+  data() {
+    return {
+      fullArea: [{ name: '全国', id: 0 }],
+      index: '',
+      list: [],
+    }
+  },
+  watch: {
+    areaId(v) {
+      v && this.getFullArea()
+    },
+  },
+  methods: {
+    getFullArea() {
+      let areaId = this.areaId || (this.all ? '' : this.$areaId)
+      areaId &&
+        this.$http
+          .post('/admin/area/getAllParentAreaId', null, {
+            withoutToken: true,
+            params: { areaId },
+          })
+          .then((res) => {
+            if (res?.data) {
+              if (res.data.length > 1) {
+                this.fullArea = res.data.reverse().slice(this.dataRange)
+              } else {
+                this.fullArea = res.data
+              }
+              this.fullArea.unshift({ name: '全国', id: 0 })
+            }
+          })
+    },
+    getChildAreas(id) {
+      id &&
+        this.$http
+          .post('/admin/area/queryAreaByParentId', null, {
+            withoutToken: true,
+            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)
+            }
+          })
+    },
+    getProvinces() {
+      this.$http.post('/admin/area/queryProvinceList', null, { withoutToken: true }).then((res) => {
+        if (res?.data) {
+          this.list = res.data
+        }
+      })
+    },
+    handleSelect(op) {
+      if (op.id != this.index) {
+        this.fullArea.push(op)
+        this.index = op.id
+      }
+      this.$emit('select', op)
+      this.$emit('update:name', this.currentArea.name)
+      this.$refs.areaSelector?.handleSelect()
+    },
+    getChild(op) {
+      this.fullArea.push(op)
+      this.index = op.id
+      this.getChildAreas(op.id)
+    },
+    selectNode(area, i) {
+      this.fullArea.splice(i + 1, this.fullArea.length - i)
+      if (this.all && !area.id) {
+        this.index = ''
+        this.getProvinces()
+      } else {
+        this.index = area.id
+        this.getChildAreas(area.id)
+      }
+    },
+    handleInit() {
+      this.index = this.currentArea.id
+      if (this.all && !this.currentArea.id) this.getProvinces()
+      else this.getChildAreas(this.currentArea.id)
+    },
+  },
+  created() {
+    this.index = this.areaId
+    this.getFullArea()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AiAreaPicker {
+  ::v-deep .areaSelector {
+    display: flex;
+    align-items: center;
+
+    span {
+      cursor: pointer;
+      color: #333;
+
+      &:first-of-type:before {
+        content: '';
+        padding: 0;
+      }
+
+      &:before {
+        color: #333;
+        content: '/';
+        padding: 0 16px;
+      }
+    }
+
+    .current {
+      color: #3f8df5;
+    }
+
+    .fixedTop {
+      position: fixed;
+      top: 0;
+      width: 100%;
+      left: 0;
+      background: #fff;
+      border-bottom: 4px solid #f5f5f5;
+      z-index: 1;
+      text-align: start;
+      padding: 0 16px;
+    }
+  }
+
+  ::v-deep.u-drawer-content {
+    position: fixed;
+
+    .areaSelector {
+      padding: 0 16px;
+      box-sizing: border-box;
+      border-bottom: 16px solid #f5f5f5;
+
+      span {
+        line-height: 100px;
+      }
+    }
+  }
+
+  ::v-deep.pendingItem {
+    color: #333;
+    margin-left: 32px;
+    padding-right: 32px;
+    height: 104px;
+    border-bottom: 1px solid #ddd;
+    text-align: start;
+
+    .self {
+      font-weight: bold;
+    }
+  }
+
+  .location {
+    width: 28px;
+    height: 80px;
+    margin-right: 12px;
+  }
+}
+</style>