改造上架版网格

src/saas/AppGridManagement/SelectGird.vue

@@ -2,42 +2,33 @@
   <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;">/</span><span style="color:#3F8DF5" @click="girdNameClick(item, index)">{{item.girdName}}</span></span>
+        <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">
-              <span v-if="isFormMap == 1 && item.girdLevel != 0">
-                <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)" />
-              </span>
-              <span v-if="isFormMap != 1">
-                <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)" />
-              </span>
-              <img src="./components/img/gird--select-icon.png" alt="" class="avatras" />
+              <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">
               <div class="applicationNames">{{ item.girdName }}</div>
-              <img src="./components/img/right-icon.png" alt="" class="imgs" v-if="item.girdLevel != 2"/>
+              <u-icon v-if="item.hasChildren" @click="itemClick(item)" name="arrow-right" color="#ddd"/>
             </div>
           </div>
         </div>
-
-        <AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
+        <AiEmpty description="暂无数据" class="emptyWrap" v-else/>
       </div>
     </div>
     <!-- <div style="padding-bottom: 70px;"></div> -->
-    <div v-if="isFormMap == 1">
-      <div class="subBtn" @click="submit" v-if="treeList.length && treeList[0].girdLevel != 0">
-        <div>确定选择</div>
-      </div>
-    </div>
-    <div class="subBtn" @click="submit" v-else>
+    <div class="subBtn" @click="submit">
       <div>确定选择</div>
     </div>
-
   </div>
 </template>
 
@@ -52,13 +43,12 @@ export default {
       slectList: [],
       userGird: {},
       userList: [],
-      girdLevel: 0,
       parentGirdId: '',
       isFormMap: 0, //1为网格地图 一级不允许选中
     }
   },
   onLoad(option) {
-    if(option.isFormMap) {
+    if (option.isFormMap) {
       this.isFormMap = option.isFormMap
     }
     this.isGirdUser()
@@ -69,74 +59,69 @@ export default {
         if (res.code == 0) {
           if (res.data.checkType) {
             this.userGird = res.data
-            this.getTree()
+            this.getAllGrids()
           } else {
             this.$u.toast('当前人员不是网格员或网格管理员')
           }
         }
       })
     },
-    getTree() {
+    getAllGrids() {
       this.slectList = []
-      this.$http.post(`/app/appgirdinfo/queryAppGirdInfoByGirdLevel?girdLevel=${this.girdLevel}&girdMemberId=${this.userGird.girdMemberId}&parentGirdId=${this.parentGirdId}`).then((res) => {
+      let {girdMemberId} = this.userGird
+      this.$http.post(`/app/appgirdinfo/queryAppGirdInfoByGirdLevel`, null, {
+        params: {girdMemberId}
+      }).then((res) => {
         if (res?.data) {
-          this.allData = 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() {
-      this.treeList = this.allData
+      this.treeList = this.allData.filter(e => !e.parentGirdId)
       this.treeList.map((item) => {
         item.isChecked = false
       })
-      var obj = {
+      let obj = {
         girdName: '可选范围',
         id: '',
-        girdLevel: ''
       }
       this.slectList.push(obj)
     },
 
     itemClick(row) {
-      if(row.girdLevel == 2) return
-      var obj = {
+      let obj = {
         girdName: row.girdName,
         id: row.id,
-        girdLevel: row.girdLevel
       }
       this.slectList.push(obj)
-      this.searckGird(row)
+      this.getGridsByGridMemberAndParent(row)
     },
 
-    searckGird(row) {
-      if(row.girdLevel == 2) return
-      var girdLevel = Number(row.girdLevel)+1
-      this.$http.post(`/app/appgirdinfo/queryAppGirdInfoByGirdLevel?girdLevel=${girdLevel}&girdMemberId=${this.userGird.girdMemberId}&parentGirdId=${row.id}`).then((res) => {
-        if (res?.data) {
-          this.treeList = res.data
-        }
-      })
+    getGridsByGridMemberAndParent(row) {
+      let {id: parentGirdId} = row
+      this.treeList = this.allData.filter(e => e.parentGirdId == parentGirdId)
     },
-
     girdNameClick(row, index) {
       this.userList = []
-      if(!index) { //第一级别
+      if (!index) { //第一级别
         this.slectList = []
         this.treeInit()
-      }else {
+      } else {
         var list = []
         this.slectList.map((item, i) => {
-          if(i <= index) {
+          if (i <= index) {
             list.push(item)
           }
         })
         this.slectList = list
-        this.searckGird(row)
+        this.getGridsByGridMemberAndParent(row)
       }
     },
-    
+
 
     girdClick(row, index) {
       if (this.treeList[index].isChecked) {//取消
@@ -156,8 +141,7 @@ export default {
     submit() {
       if (this.SelectGird.id != null) {
         uni.$emit('goback', this.SelectGird)
-        console.log(this.SelectGird)
-        uni.navigateBack()
+        uni.navigateBack({})
       } else {
         return this.$u.toast('请选择网格')
       }
@@ -171,6 +155,7 @@ export default {
   height: 100%;
   background: #fff;
   padding-bottom: 140px;
+
   .header-top {
     background: #fff;
     padding: 20px 32px;
@@ -217,11 +202,13 @@ export default {
             margin-left: 36px;
           }
         }
+
         img {
           width: 74px;
           height: 74px;
           border-radius: 8px;
         }
+
         .rightes {
           width: calc(100% - 188px);
           display: flex;
@@ -229,15 +216,17 @@ export default {
           align-items: center;
           margin-left: 32px;
           border-bottom: 1px solid #e4e5e6;
+
           .applicationNames {
             width: calc(100% - 56px);
             font-size: 36px;
             font-weight: 500;
             color: #333333;
-            overflow:hidden; 
-            text-overflow:ellipsis; 
-            white-space:nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
           }
+
           .imgs {
             width: 40px;
             height: 40px;
@@ -260,6 +249,7 @@ export default {
           display: flex;
           align-items: center;
           width: 200px;
+
           .imgselect {
             width: 48px;
             height: 48px;
@@ -281,11 +271,13 @@ export default {
           margin-left: 32px;
           border-bottom: 1px solid #e4e5e6;
           padding-right: 40px;
+
           .applicationNames {
             font-size: 36px;
             font-weight: 500;
             color: #333333;
           }
+
           .idNumbers {
             color: #666;
           }
@@ -301,6 +293,7 @@ export default {
     width: 100%;
     height: 118px;
     background: #f4f8fb;
+
     div {
       width: 192px;
       height: 80px;