人员组件完成

src/apps/AppBuilding/AppBuilding.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="AppBuilding">
-    <component
+    <search-map v-if="show"/>
-        :is="component"
-        @change="onChange"
-        :params="params">
-    </component>
   </div>
 </template>
 
@@ -18,21 +14,17 @@ import Map from './map'
 export default {
   name: 'AppBuilding',
   appName: '以房找人',
-
   data() {
     return {
-      component: 'SearchMap',
+      show: true
-      params: {}
     }
   },
-
   components: {Detail, Add, List, SearchMap, Map},
-
+  onShow() {
-  methods: {
+    this.show = false
-    onChange(e) {
+    this.$nextTick(() => {
-      this.params = e.params
+      this.show = true
-      this.component = e.type
+    })
-    }
   },
   mounted() {
     document.title = "以房找人"

src/apps/AppBuilding/add.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="add">
     <div class="title">
-      <span class="tips"></span>房屋信息
+      <span class="tips"/>房屋信息
     </div>
     <div class="pad-l32">
       <div class="item">
@@ -18,7 +18,7 @@
               :class="houseInfo.livingStatus === '' ? 'color-999' : ''">{{
               $dict.getLabel('houselivingStatus', houseInfo.livingStatus) || '请选择'
             }}</span>
-          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+          <u-icon name="arrow-right" color="#cccccc" size="14"/>
         </div>
       </div>
       <div class="item">
@@ -28,7 +28,7 @@
               :class="houseInfo.houseUse === '' ? 'color-999' : ''">{{
               $dict.getLabel('houseUseStatus', houseInfo.houseUse) || '请选择'
             }}</span>
-          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+          <u-icon name="arrow-right" color="#cccccc" size="14"/>
         </div>
       </div>
       <div class="item" v-if="houseInfo.livingStatus == 1">
@@ -38,14 +38,14 @@
               :class="houseInfo.leaseSituation === '' ? 'color-999' : ''">{{
               $dict.getLabel('houseLeaseSituation', houseInfo.leaseSituation) || '请选择'
             }}</span>
-          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+          <u-icon name="arrow-right" color="#cccccc" size="14"/>
         </div>
       </div>
       <div class="item" v-if="houseInfo.livingStatus == 1">
         <span class="label">起租日期</span>
         <div class="value" @click="dateShow=true">
           <span :class="houseInfo.startDate === '' ? 'color-999' : ''">{{ houseInfo.startDate || '请选择' }}</span>
-          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+          <u-icon name="arrow-right" color="#cccccc" size="14"/>
         </div>
       </div>
       <div class="item" v-if="houseInfo.livingStatus == 1">
@@ -55,14 +55,14 @@
               :class="houseInfo.isFilingCertificate === '' ? 'color-999' : ''">{{
               $dict.getLabel('isFilingCertificateStatus', houseInfo.isFilingCertificate) || '请选择'
             }}</span>
-          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+          <u-icon name="arrow-right" color="#cccccc" size="14"/>
         </div>
       </div>
     </div>
-    <div class="line-bg"></div>
+    <div class="line-bg"/>
     <div class="title">
-      <span class="tips"></span>房主信息
+      <span class="tips"/>房主信息
-      <span class="select" @click="toSelectUser">选择人员</span>
+      <AiPagePicker class="select" :selected.sync="houseInfo.owner">选择人员</AiPagePicker>
     </div>
     <div class="pad-l32">
       <div class="item" v-for="(item, index) in houseInfo.owner" :key="index">
@@ -72,13 +72,13 @@
               :class=" item.relation === '' ? 'color-999' : ''">{{
               $dict.getLabel('householdRelation', item.relation) || '与户主关系'
             }}</span>
-          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+          <u-icon name="arrow-right" color="#cccccc" size="14"/>
         </div>
       </div>
     </div>
-    <div class="line-bg"></div>
+    <div class="line-bg"/>
     <div class="title">
-      <span class="tips"></span>承租人信息
+      <span class="tips"/>承租人信息
       <span class="select" @click="handleSelectUser('renter')">选择人员</span>
     </div>
     <div class="pad-l32">
@@ -89,13 +89,13 @@
               :class=" item.relation === '' ? 'color-999' : ''">{{
               $dict.getLabel('householdRelation', item.relation) || '与户主关系'
             }}</span>
-          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+          <u-icon name="arrow-right" color="#cccccc" size="14"/>
         </div>
       </div>
     </div>
-    <div class="line-bg"></div>
+    <div class="line-bg"/>
     <div class="title">
-      <span class="tips"></span>实际居住人员
+      <span class="tips"/>实际居住人员
       <span class="select" @click="handleSelectUser('live')">选择人员</span>
     </div>
     <div class="pad-l32">
@@ -106,7 +106,7 @@
               :class=" item.relation === '' ? 'color-999' : ''">{{
               $dict.getLabel('householdRelation', item.relation) || '与户主关系'
             }}</span>
-          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+          <u-icon name="arrow-right" color="#cccccc" size="14"/>
         </div>
       </div>
     </div>
@@ -117,9 +117,9 @@
     <u-picker mode="time" v-model="dateShow" :params="deteParams" start-year="2010" @confirm="dateConfirm">请选择
     </u-picker>
     <u-select v-model="showSelect" :list="selectList" label-name="dictName" value-name="dictValue"
-              @confirm="confirmSelect"></u-select>
+              @confirm="confirmSelect"/>
     <u-select v-model="showRelation" :list="$dict.getDict('householdRelation')" label-name="dictName"
-              value-name="dictValue" @confirm="confirmRelation"></u-select>
+              value-name="dictValue" @confirm="confirmRelation"/>
   </div>
 </template>
 

src/apps/AppBuilding/components/searchMap.vue

@@ -100,7 +100,7 @@
           </span>
         </div>
       </div>
-      <div class="popup-btn" @click="toDetail(building.communityId)">查看楼栋模型</div>
+      <div class="popup-btn" @click="toDetail(building.id)">查看楼栋模型</div>
     </u-popup>
   </div>
 </template>

src/apps/AppComponent/selectResident.vue

@@ -10,7 +10,7 @@
         </div>
         <div class="user-info">
           <img :src="item.photo" alt="" v-if="item.photo">
-          <img src="./components/img/user-img.png" alt="" v-else>{{item.name}}
+          <img src="../AppBuilding/components/img/user-img.png" alt="" v-else>{{ item.name }}
         </div>
       </div>
     </div>
@@ -25,21 +25,25 @@
 import {mapState} from 'vuex'
 
 export default {
-
+  name: "selectResident",
+  appName: "人员选择器(居民档案)",
   data() {
     return {
       current: 1,
       name: '',
       list: [],
-      cirIcon: require('./components/img/cir-icon.png'),
+      cirIcon: require('../AppBuilding/components/img/cir-icon.png'),
-      checkIcon: require('./components/img/check-icon.png'),
+      checkIcon: require('../AppBuilding/components/img/check-icon.png'),
+      selected: []
     }
   },
   computed: {...mapState(['user'])},
-  mounted() {
+  onLoad(query) {
+    if (query.selected) {
+      this.selected = query.selected?.split(",") || []
+    }
     this.getList()
   },
-
   methods: {
     getList() {
       this.$http.post(`/app/appresident/list`, null, {
@@ -52,7 +56,7 @@ export default {
       }).then(res => {
         if (res?.data) {
           res.data.records.forEach(e => {
-            e.isCheck = false
+            e.isCheck = this.selected.includes(e.id)
           })
           if (this.current > 1 && this.current > res.data.pages) {
             return
@@ -65,23 +69,24 @@ export default {
       this.list[index].isCheck = !this.list[index].isCheck
     },
     confirm() {
-      var checkList = []
+      let checkList = []
       this.list.map((item) => {
-        if(item.isCheck) {
+        if (item.isCheck) {
           checkList.push(item)
         }
       })
-
+      if (!checkList.length) {
-      console.log(checkList)
-
-      if(!checkList.length) {
         return this.$u.toast('请先选择人员')
+      } else {
+        uni.navigateBack({
+          success: () => {
+            uni.$emit("pagePicker", checkList)
+          }
+        })
       }
-
     }
   },
   onReachBottom() {
-    console.log(111)
     this.current++
     this.getList()
   },
@@ -90,25 +95,30 @@ export default {
 
 <style lang="scss" scoped>
 .selectResident {
-  ::v-deep .AiTopFixed .u-search{
+  ::v-deep .AiTopFixed .u-search {
-    margin-bottom: 0!important;
+    margin-bottom: 0 !important;
   }
-  .pad-b118{
+
+  .pad-b118 {
     padding-bottom: 118px;
   }
-  .user-list{
+
+  .user-list {
     background-color: #fff;
-    .item{
+
-      .select-img{
+    .item {
+      .select-img {
         display: inline-block;
-        img{
+
+        img {
           width: 48px;
           height: 48px;
           margin: 12px 36px 12px 30px;
           vertical-align: middle;
         }
       }
-      .user-info{
+
+      .user-info {
         display: inline-block;
         padding: 20px 0 20px 0;
         width: calc(100% - 114px);
@@ -119,7 +129,8 @@ export default {
         font-weight: 500;
         color: #333;
         line-height: 74px;
-        img{
+
+        img {
           width: 74px;
           height: 74px;
           border-radius: 8px;
@@ -129,7 +140,8 @@ export default {
       }
     }
   }
-  .footer{
+
+  .footer {
     width: 100%;
     height: 118px;
     background: #F4F8FB;
@@ -137,7 +149,8 @@ export default {
     left: 0;
     bottom: 0;
     text-align: right;
-    .btn{
+
+    .btn {
       display: inline-block;
       width: 192px;
       height: 80px;

src/components/AiPagePicker.vue

@@ -0,0 +1,57 @@
+<template>
+  <section class="AiPagePicker">
+    <div @click="handleJump">
+      <slot v-if="$slots.default"/>
+      <div v-else v-text="selectedLabel"/>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiPagePicker",
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    value: {default: ""},
+    type: {default: "resident"},
+    nodeKey: {default: "id"},
+    selected: {default: () => []},
+    placeholder: {default: "选择人员"}
+  },
+  data() {
+    return {
+      configList: {
+        resident: {url: "/apps/AppComponent/selectResident", label: "name"}
+      },
+    }
+  },
+  computed: {
+    config() {
+      return this.configList[this.type] || {}
+    },
+    selectedLabel() {
+      let {placeholder, config: {label}} = this
+      return this.selected?.map(e => e[label])?.toString() || placeholder
+    }
+  },
+  methods: {
+    handleJump() {
+      let {config, nodeKey} = this,
+          selected = this.value || this.selected?.map(e => e[nodeKey])
+      uni.$once('pagePicker', data => {
+        this.$emit("update:selected", data)
+        this.$emit("change", data.map(e => e[nodeKey]))
+      })
+      uni.navigateTo({url: `${config.url}?selected=${selected?.toString()}`})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiPagePicker {
+}
+</style>