人员组件完成

2021-12-24 12:05:40 +08:00
parent db781c050c
commit 1902f0e197
5 changed files with 122 additions and 60 deletions
--- a/src/apps/AppBuilding/AppBuilding.vue
+++ b/src/apps/AppBuilding/AppBuilding.vue
@@ -1,10 +1,6 @@
 <template>
  <div class="AppBuilding">
-    <component
-        :is="component"
-        @change="onChange"
-        :params="params">
-    </component>
+    <search-map v-if="show"/>
  </div>
 </template>

@@ -18,21 +14,17 @@ import Map from './map'
 export default {
  name: 'AppBuilding',
  appName: '以房找人',
-
  data() {
    return {
-      component: 'SearchMap',
-      params: {}
+      show: true
    }
  },
-
  components: {Detail, Add, List, SearchMap, Map},
-
-  methods: {
-    onChange(e) {
-      this.params = e.params
-      this.component = e.type
-    }
+  onShow() {
+    this.show = false
+    this.$nextTick(() => {
+      this.show = true
+    })
  },
  mounted() {
    document.title = "以房找人"
--- a/src/apps/AppBuilding/add.vue
+++ b/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="select" @click="toSelectUser">选择人员</span>
+      <span class="tips"/>房主信息
+      <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>

--- a/src/apps/AppBuilding/components/searchMap.vue
+++ b/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>
--- a/src/apps/AppComponent/selectResident.vue
+++ b/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'),
-      checkIcon: require('./components/img/check-icon.png'),
+      cirIcon: require('../AppBuilding/components/img/cir-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)
        }
      })
-
-      console.log(checkList)
-
-      if(!checkList.length) {
+      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{
-    margin-bottom: 0!important;
+  ::v-deep .AiTopFixed .u-search {
+    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;
--- a/src/components/AiPagePicker.vue
+++ b/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>