2

src/project/saas/AppBuilding/AppBuilding.vue

@@ -29,10 +29,10 @@ export default {
     }
   },
   onShow() {
-    this.show = false
+    // this.show = false
-    this.$nextTick(() => {
+    // this.$nextTick(() => {
-      this.show = true
+    //   this.show = true
-    })
+    // })
     document.title = "以房找人"
   },
 }

src/project/saas/AppBuilding/SelectGird.vue

@@ -0,0 +1,253 @@
+<template>
+  <div class="SelectGird">
+    <div class="header-middle">
+      <div class="hint">
+        <span v-for="(item, index) in slectList" :key="index">
+          <span v-if="index" style="margin:0 4px;" v-text="`/`"/>
+          <span style="color:#3F8DF5" @click="girdNameClick(item, index)" v-text="item.girdName"/>
+        </span>
+      </div>
+      <div class="showTypes">
+        <div v-if="treeList.length > 0">
+          <div class="cards" v-for="(item, index) in treeList" :key="index" @click="itemClick(item)">
+            <div class="imges">
+              <img src="./components/img/xzh.png" alt="" class="imgselect" v-if="item.isChecked"
+                   @click.stop="girdClick(item, index)"/>
+              <img src="./components/img/xz.png" alt="" class="imgselect" v-else @click.stop="girdClick(item, index)"/>
+              <img src="./components/img/gird--select-icon.png" alt="" class="avatras"/>
+            </div>
+            <div class="rightes fill">
+              <div class="applicationNames fill">{{ item.girdName }}</div>
+            </div>
+          </div>
+        </div>
+        <AiEmpty :description="isGridMember?`暂无数据`:`当前人员不是网格员或网格管理员`" class="emptyWrap" v-else/>
+      </div>
+    </div>
+    <div class="subBtn" @click="submit">
+      <div>确定选择</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {mapState} from "vuex";
+
+  export default {
+    name: 'SelectGird',
+    data() {
+      return {
+        SelectGird: {},
+        allData: null,
+        treeList: [],
+        slectList: [],
+        userList: [],
+        parentGirdId: '',
+        isFormMap: 0, //1为网格地图 一级不允许选中
+      }
+    },
+    computed: {
+      ...mapState(['user']),
+      isMyGirds() {
+        return !!this.$route.query.self
+      },
+      isGridMember() {
+        return this.user.girdCheckType > 0
+      }
+    },
+    onLoad(option) {
+      if (option.isFormMap) {
+        this.isFormMap = option.isFormMap
+      }
+      this.isGridMember ? this.getAllGrids() : this.$u.toast('当前人员不是网格员或网格管理员')
+    },
+    methods: {
+      getAllGrids() {
+        this.slectList = []
+        let {girdMemberId} = this.user,
+            url = `/app/appgirdinfo/queryAppGirdInfoByGirdLevel`,
+            params = {girdMemberId}
+        if (this.isMyGirds) {
+          url = `/app/appgirdmemberinfo/queryMyGirdListByLevel2AndUser`
+          params = {}
+        }
+        this.$http.post(url, null, {params}).then((res) => {
+          if (res?.data) {
+            let parents = res.data.map(e => e.parentGirdId)
+            this.allData = res.data.map(e => ({...e, hasChildren: parents.includes(e.id)}))
+            this.treeInit()
+          }
+        })
+      },
+      treeInit() {
+        let last = uni.getStorageSync("lastSelectedGrid")
+        if (last) {
+          this.$http.post("/app/appgirdinfo/listFatherGirdInfo", null, {
+            params: {girdId: last}
+          }).then(res => {
+            if (res?.data) {
+              this.slectList = [{girdName: '可选范围', id: ''}, res.data].flat()
+              this.getGridsByGridMemberAndParent({id: last})
+            }
+          })
+        } else {
+          this.treeList = this.allData.filter(e => !e.parentGirdId || this.isMyGirds)
+          this.treeList.map((item) => item.isChecked = false)
+          let obj = {girdName: '可选范围', id: ''}
+          this.slectList.push(obj)
+        }
+      },
+      itemClick(row) {
+        if (row.hasChildren) {
+          let obj = {
+            girdName: row.girdName,
+            id: row.id,
+          }
+          this.slectList.push(obj)
+          this.getGridsByGridMemberAndParent(row)
+        }
+      },
+      getGridsByGridMemberAndParent(row) {
+        let {id: parentGirdId} = row
+        this.treeList = this.allData.filter(e => e.parentGirdId == parentGirdId)
+      },
+      girdNameClick(row, index) {
+        this.userList = []
+        if (!index) { //第一级别
+          this.slectList = []
+          this.treeInit()
+        } else {
+          var list = []
+          this.slectList.map((item, i) => {
+            if (i <= index) {
+              list.push(item)
+            }
+          })
+          this.slectList = list
+          this.getGridsByGridMemberAndParent(row)
+        }
+      },
+      girdClick(row, index) {
+        if (this.treeList[index].isChecked) {//取消
+          this.treeList[index].isChecked = false
+          this.SelectGird = {}
+        } else {
+          this.treeList.map((item) => {
+            item.isChecked = false
+          })
+          this.treeList[index].isChecked = true
+          this.SelectGird = row
+        }
+        this.$forceUpdate()
+      },
+      submit() {
+        if (this.SelectGird.id != null) {
+          uni.setStorageSync("lastSelectedGrid", this.SelectGird.parentGirdId)
+          uni.navigateBack({
+            success: () => {
+              uni.$emit("pagePicker:custom", this.SelectGird)
+            }
+          })
+        } else {
+          return this.$u.toast('请选择网格')
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .SelectGird {
+    min-height: 100vh;
+    background: #fff;
+    padding-bottom: 140px;
+    box-sizing: border-box;
+
+    .header-middle {
+      .hint {
+        padding: 28px 20px 28px 32px;
+        line-height: 56px;
+        box-shadow: 0px 1px 0px 0px #e4e5e6;
+        font-size: 30px;
+        font-weight: 500;
+        word-break: break-all;
+      }
+
+      .showTypes {
+        .cards {
+          display: flex;
+          align-items: center;
+          height: 120px;
+          line-height: 120px;
+          // background: pink;
+          padding: 0 0 0 32px;
+
+          .imges {
+            display: flex;
+            align-items: center;
+            // width: 200px;
+            .imgselect {
+              width: 48px;
+              height: 48px;
+              vertical-align: middle;
+            }
+
+            .avatras {
+              width: 74px;
+              height: 74px;
+              border-radius: 8px;
+              margin-left: 36px;
+            }
+          }
+
+          img {
+            width: 74px;
+            height: 74px;
+            border-radius: 8px;
+          }
+
+          .rightes {
+            display: flex;
+            border-bottom: 1px solid #e4e5e6;
+            padding: 0 16px;
+
+            .applicationNames {
+              display: inline-block;
+              font-size: 36px;
+              font-weight: 500;
+              color: #333333;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              vertical-align: bottom;
+            }
+          }
+        }
+      }
+
+    }
+
+    .subBtn {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 118px;
+      background: #f4f8fb;
+
+      div {
+        width: 192px;
+        height: 80px;
+        line-height: 80px;
+        text-align: center;
+        background: #1365dd;
+        border-radius: 4px;
+        font-size: 32px;
+        color: #fff;
+        margin: 20px 34px 0 0;
+        float: right;
+      }
+    }
+
+  }
+</style>

src/project/saas/AppBuilding/components/searchMap.vue

@@ -1,14 +1,23 @@
 <template>
   <div class="searchMap">
+    <div class="top">
+      <AiPagePicker class="left" type="custom" @select="handleSelectGird"
+                    :ops="{url:'./SelectGird',label: 'girdName'}">
+        <div class="gird-content">
+          <image src="./img/gird--select-icon.png" class="avatras"/>
+          <div class="label">{{ form.girdName || '网格选择' }}</div>
+          <u-icon name="arrow-right" color="#cccccc" size="26" style="margin-left:4px;"></u-icon>
+        </div>
+      </AiPagePicker>
       <div class="grid-input">
         <img src="./img/back-icon.png" alt="" class="back-icon" v-if="name && show" @click="show=false">
-      <img src="./img/search-icon.png" alt="" class="search-icon" v-else>
+        <img src="./img/search-icon-w.png" alt="" class="search-icon" v-else>
         <input type="text" class="input" placeholder="请输入姓名、房屋信息" v-model="name" maxlength="10" confirm-type="search"
               @confirm="search"/>
         <div class="clear-btn">
           <img src="./img/del-icon.png" alt="" class="del-icon" v-if="name" @click="clear">
         </div>
-      <span class="search-btn" @click="search">搜索</span>
+      </div>
     </div>
     <div class="search-list" v-if="show">
       <div class="title border">
@@ -127,6 +136,7 @@ export default {
       markerArr: [],
       show: false,
       value: '',
+      form: {girdName: '', id: ''},
       ClusterBubble: null,
       name: '',
       buildList: [],
@@ -155,6 +165,10 @@ export default {
     this.$dict.load("communityBuildingType")
   },
   methods: {
+    handleSelectGird(v) {
+      this.form = v || {}
+      // this.getGridList(v?.id, true)
+    },
     getCommunityList() {
       return this.$http.post('/app/appcommunitybuildinginfo/listByBuilding', null, {
         params: {
@@ -365,34 +379,68 @@ export default {
 .searchMap {
   height: 100vh;
 
-  .grid-input {
+  * {
-    width: calc(100% - 64px);
+    box-sizing: border-box;
-    height: 88px;
+  }
-    background: #FFF;
+
-    box-shadow: 0 4px 8px 0 rgba(192, 185, 185, 0.5);
+  .top {
-    border-radius: 16px;
+    display: flex;
     position: fixed;
-    top: 24px;
+    align-items: center;
-    left: 50%;
+    justify-content: space-between;
-    transform: translateX(-50%);
+    top: 0;
-    z-index: 99999;
+    left: 0;
-    padding: 16px 20px;
+    z-index: 1111;
+    width: 100%;
+    height: 112px;
+    padding: 0 32px;
+    background: #FFF;
     box-sizing: border-box;
 
+    .gird-content {
+      display: flex;
+      align-items: center;
+
+      image {
+        width: 32px;
+        height: 34px;
+        margin-right: 16px;
+      }
+
+      .label {
+        max-width: 120px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: #666666;
+        font-size: 28px;
+      }
+    }
+
+    .left {
+      flex: 1;
+    }
+  }
+
+  .grid-input {
+    display: flex;
+    align-items: center;
+    width: 460px;
+    height: 64px;
+    background: #F5F5F5;
+    border-radius: 32px;
+    padding: 0 36px;
     .search-icon {
-      width: 48px;
+      width: 32px;
-      height: 48px;
+      height: 32px;
       margin-right: 16px;
     }
 
     .input {
-      display: inline-block;
+      flex: 1;
-      padding: 8px 0;
+      height: 64px;
-      height: 32px;
+      width: 100%;
-      line-height: 32px;
-      width: calc(100% - 220px);
       font-size: 28px;
-      font-family: MicrosoftYaHei;
       color: #666;
     }
 
@@ -404,30 +452,13 @@ export default {
     }
 
     .clear-btn {
-      display: inline-block;
       width: 32px;
       height: 32px;
-      margin-right: 30px;
     }
 
     .del-icon {
       width: 32px;
       height: 32px;
-      vertical-align: super;
-    }
-
-    .search-btn {
-      display: inline-block;
-      width: 80px;
-      height: 32px;
-      line-height: 32px;
-      text-align: right;
-      font-size: 28px;
-      font-family: MicrosoftYaHei;
-      color: #1365DD;
-      border-left: 1px solid #DEDFE0;
-      vertical-align: top;
-      margin-top: 12px;
     }
   }
 
@@ -588,9 +619,8 @@ export default {
   ::v-deep.marker {
     color: #fff;
     background: #5088FF;
-    padding: 0 32px;
     width: fit-content;
-    height: 56px;
+    padding: 10px 32px;
     border-radius: 52px;
     transform: translate(-50%, -50%);
     display: flex;

src/project/saas/AppBuilding/list.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="list">
+  <div class="AppBuildinglist">
     <AiTopFixed>
       <u-search placeholder="小区名称" :show-action="false" v-model="title" @search="current=1,getList()"/>
     </AiTopFixed>
@@ -96,7 +96,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.list {
+.AppBuildinglist {
   padding-bottom: 20px;
   .list-content {
     padding: 32px 32px 0;