随手拍调整无级网格

src/components/pages/selectGird.vue

@@ -1,213 +1,188 @@
 <template>
-  <div class="selectGird">
-    <AiTopFixed>
-      <u-search placeholder="搜索" v-model="name" :show-action="false"/>
-      <div class="hint">
-        <span v-for="(item, index) in selectList" :key="index"><span v-if="index" style="margin:0 4px;">/</span><span
-            style="color:#3F8DF5" @click="girdNameClick(item, index)">{{ item.girdName }}</span></span>
-      </div>
-    </AiTopFixed>
+  <div class="SelectGird">
     <div class="header-middle">
+      <div class="hint">
+        <span v-for="(item, index) in selectList" :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="options.length > 0">
           <div class="cards" v-for="(item, index) in options" :key="index" @click="itemClick(item)">
             <div class="imges">
               <img src="./img/xzh.png" alt="" class="imgselect" v-if="item.isChecked"
                    @click.stop="girdClick(item, index)"/>
-              <img src="./img/xz.png" alt="" class="imgselect" v-else
-                   @click.stop="girdClick(item, index)"/>
+              <img src="./img/xz.png" alt="" class="imgselect" v-else @click.stop="girdClick(item, index)"/>
               <img src="./img/gird--select-icon.png" alt="" class="avatras"/>
             </div>
-            <div class="rightes">
+            <div class="rightes fill">
               <div class="applicationNames fill">{{ item.girdName }}</div>
-              <u-icon v-if="item.girdLevel != 2" name="arrow-right" color="#ddd"/>
             </div>
           </div>
         </div>
-        <AiEmpty description="暂无数据" class="emptyWrap" v-else/>
+        <AiEmpty :description="isGridMember?`暂无数据`:`当前人员不是网格员或网格长`" class="emptyWrap" v-else/>
       </div>
     </div>
-    <div class="pad-b118"/>
-    <div class="footer">
-      <div class="btn" @click="confirm">确定选择</div>
+    <div class="subBtn flex">
+      <div v-if="clearable" class="cancel" @click="cancel">清空</div>
+      <div @click="submit">确定选择</div>
     </div>
   </div>
 </template>
 
 <script>
+import {mapState} from "vuex";
+
 export default {
   name: 'selectGird',
   appName: "网格选择",
   data() {
     return {
-      current: 1,
-      name: '',
-      list: [],
-      selected: [],
       SelectGird: {},
       allData: null,
-      treeList: [],
+      options: [],
       selectList: [],
-      userGird: {},
-      userList: [],
-      girdLevel: 0,
       parentGirdId: '',
-      isMyGird: false, //是否只查询当前户对应的网格员管理的三级网格
+      query: {}
     }
   },
   computed: {
-    options() {
-      return this.treeList.filter(e => e.girdName?.indexOf(this.name) > -1 || !this.name) || []
-    }
+    ...mapState(['user']),
+    isGridMember() {
+      return this.user.girdCheckType > 0
+    },
+    //是否展示所有网格(随手拍)
+    isApply: v => v.query?.formType == 2,
+    clearable: v => v.query?.clearable,
+    isMyGirds: v => v.query?.self == true,
+    selected: v => [v.query?.selected].flat(),
+    isFormMap: v => v.query?.isFormMap || 0
   },
-  onLoad(params) {
-    console.log(params)
-    if (params.girdLevel) {
-      this.girdLevel = params.girdLevel
-    }
-    if (params.isMyGird) {
-      this.isMyGird = params.isMyGird
-    }
-    this.isGirdUser()
+  onLoad(query) {
+    this.query = query
+    this.isGridMember || this.isApply ? this.getAllGrids() : this.$u.toast('当前人员不是网格员或网格长')
   },
   methods: {
-    isGirdUser() {
-      this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
-        if (res?.data) {
-          if (res.data.checkType) {
-            this.userGird = res.data
-            if (this.isMyGird) {
-              this.getMyGird()
-            } else {
-              this.getTree()
-            }
-
-          } else {
-            this.$u.toast('当前人员不是网格员或网格管理员')
-          }
-        }
-      })
-    },
-    getMyGird() {
+    getAllGrids() {
       this.selectList = []
-      this.$http.post('/app/appgirdmemberinfo/queryMyGirdListByLevel2AndUser').then((res) => {
-        if (res.code == 0) {
-          this.allData = res.data
-          this.treeInit()
-        }
-      })
-    },
-    getTree() {
-      this.selectList = []
-      this.$http.post(`/app/appgirdinfo/queryAppGirdInfoByGirdLevel?girdLevel=${this.girdLevel}&girdMemberId=${this.userGird.girdMemberId}&parentGirdId=${this.parentGirdId}`).then((res) => {
-        if (res?.data) {
-          this.allData = res.data
-          this.treeInit()
-        }
-      })
-    },
-
-    treeInit() {
-      this.treeList = this.allData
-      this.treeList.map((item) => {
-        item.isChecked = false
-      })
-      let obj = {
-        girdName: '可选范围',
-        id: '',
-        girdLevel: ''
+      let {girdMemberId} = this.user,
+          url = `/app/appgirdmemberinfo/queryMyGirdListByLevel2AndUser`,
+          params = {girdMemberId}
+      if (this.isApply) {
+        url = `/app/appgirdinfo/listByInfo`
+        params = {}
       }
-      this.selectList.push(obj)
-    },
-
-    itemClick(row) {
-      if (row.girdLevel == 2) return
-      const obj = {
-        girdName: row.girdName,
-        id: row.id,
-        girdLevel: row.girdLevel
-      };
-      this.selectList.push(obj)
-      this.searckGird(row)
-    },
-
-    searckGird(row) {
-      if (row.girdLevel == 2) return
-      const girdLevel = Number(row.girdLevel) + 1;
-      this.$http.post(`/app/appgirdinfo/queryAppGirdInfoByGirdLevel?girdLevel=${girdLevel}&girdMemberId=${this.userGird.girdMemberId}&parentGirdId=${row.id}`).then((res) => {
+      if (this.isMyGirds) {
+        url = `/app/appgirdmemberinfo/queryMyGirdListByLevel2`
+      }
+      this.$instance.post(url, null, {params}).then((res) => {
         if (res?.data) {
-          this.treeList = 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(isClick) {
+      let last = uni.getStorageSync("lastSelectedGrid")
+      if (!isClick && last && !this.isApply) {
+        this.$instance.post("/app/appgirdinfo/listFatherGirdInfo", null, {
+          params: {girdId: last}
+        }).then(res => {
+          if (res?.data) {
+            this.selectList = [{girdName: '可选范围', id: ''}, res.data.filter(e => !!this.allData.find(a => a.id == e.id))].flat()
+            this.getGridsByGridMemberAndParent({id: last})
+          }
+        })
+      } else {
+        this.options = this.allData.filter((e, i, arr) => !arr?.map(e => e.id).includes(e.parentGirdId) || this.isMyGirds)
+        this.options?.map((item) => item.isChecked = this.selected.includes(item.id))
+        let obj = {girdName: '可选范围', id: ''}
+        this.selectList.push(obj)
+      }
+    },
+    itemClick(row) {
+      if (row.hasChildren) {
+        let obj = {
+          girdName: row.girdName,
+          id: row.id,
+        }
+        this.selectList.push(obj)
+        this.getGridsByGridMemberAndParent(row)
+      }
+    },
+    getGridsByGridMemberAndParent(row) {
+      let {id: parentGirdId} = row
+      this.options = this.allData.filter(e => e.parentGirdId == parentGirdId)
+      this.options?.map((item) => item.isChecked = this.selected.includes(item.id))
+    },
     girdNameClick(row, index) {
-      this.userList = []
       if (!index) { //第一级别
         this.selectList = []
-        this.treeInit()
+        this.treeInit(true)
       } else {
-        const list = [];
-        this.selectList.map((item, i) => {
-          if (i <= index) {
-            list.push(item)
-          }
-        })
-        this.selectList = list
-        this.searckGird(row)
+        this.selectList.splice(index, 8)
+        this.getGridsByGridMemberAndParent(row)
       }
     },
-
-
     girdClick(row, index) {
-      if (this.treeList[index].isChecked) {//取消
-        this.treeList[index].isChecked = false
+      if (this.options[index].isChecked) {//取消
+        this.options[index].isChecked = false
         this.SelectGird = {}
       } else {
-        this.treeList.map((item) => {
+        this.options?.map((item) => {
           item.isChecked = false
         })
-        this.treeList[index].isChecked = true
+        this.options[index].isChecked = true
         this.SelectGird = row
       }
       this.$forceUpdate()
     },
-    confirm() {
+    submit() {
       if (this.SelectGird.id != null) {
+        if (!this.isApply && !this.isMyGirds) {
+          uni.setStorageSync("lastSelectedGrid", this.SelectGird.parentGirdId)
+        }
         uni.navigateBack({
           success: () => {
-            uni.$emit("pagePicker", [this.SelectGird])
+            uni.$emit("pagePicker:gird", this.SelectGird)
           }
         })
       } else {
         return this.$u.toast('请选择网格')
       }
     },
+    cancel() {
+      this.SelectGird = {}
+      uni.navigateBack({
+        success: () => {
+          uni.$emit("pagePicker:gird", this.SelectGird)
+        }
+      })
+    }
   }
 }
 </script>
 
 <style scoped lang="scss">
-.selectGird {
-  height: 100%;
+.SelectGird {
+  min-height: 100vh;
   background: #fff;
   padding-bottom: 140px;
-
-  .hint {
-    padding-bottom: 28px;
-    line-height: 56px;
-    font-size: 30px;
-    font-weight: 500;
-    word-break: break-all;
-  }
+  box-sizing: border-box;
 
   .header-middle {
-    .showTypes {
-      .empty-div {
-        height: 16px;
-        background: #f5f5f5;
-      }
+    .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;
@@ -241,22 +216,19 @@ export default {
         }
 
         .rightes {
-          width: calc(100% - 188px);
           display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-left: 32px;
           border-bottom: 1px solid #e4e5e6;
-          padding-right: 16px;
-          box-sizing: border-box;
+          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;
           }
         }
       }
@@ -270,42 +242,25 @@ export default {
     width: 100%;
     height: 118px;
     background: #f4f8fb;
+    justify-content: flex-end;
 
     div {
       width: 192px;
       height: 80px;
       line-height: 80px;
       text-align: center;
+      border: 2px solid #1365dd;
       background: #1365dd;
       border-radius: 4px;
       font-size: 32px;
       color: #fff;
-      margin: 20px 34px 0 0;
-      float: right;
-    }
-  }
+      margin-right: 32px;
 
-  .footer {
-    width: 100%;
-    height: 118px;
-    background: #F4F8FB;
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    text-align: right;
-
-    .btn {
-      display: inline-block;
-      width: 192px;
-      height: 80px;
-      line-height: 80px;
-      background: #1365DD;
-      border-radius: 4px;
-      text-align: center;
-      font-size: 32px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      color: #FFF;
-      margin: 20px 34px 0 0;
+      &.cancel {
+        color: #333;
+        background: #fff;
+        border-color: #ddd;
+      }
     }
   }
 }