AiAreaPicker

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>
+              <img src="./components/images/icon2.png" alt="" />
-              <div class="btns" style="display: inline-block" @click="show = true">
+
+              <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;
+          }
         }
       }
 

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" />
+            <ai-area-picker v-model="forms.areaId" ref="areaIds" :areaId="areaIdProps" @select="areaSelect" style="color: #333"> </ai-area-picker>
-
-            <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>
           </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-form-item label="现实状态" prop="reality" required style="position: relative">
-            <u-input v-model="forms.nowStstus" disabled placeholder="请选择走访对象" @click="showStstus = true" />
+            <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: {},
+  computed: { ...mapState(['user']) },
-  created() {},
+  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) {
+    areaSelect(e) {
-      console.log(e)
+      if (e.type == 5) {
-      this.forms.areaId = e[0].value
+        this.forms.areaId = e.id
-      this.forms.areaIdValue = e[0].label
+      } 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.reality = e[0].value
-      this.forms.nowStstuslabel = e[0].label
+      this.forms.realitylabel = e[0].label
     },
 
     toWalkObject() {

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>