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>
-              <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;
+          }
         }
       }
 

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() {