网格

src/apps/AppGridManagement/AddGird.vue

@@ -4,21 +4,23 @@
       <div class="label">
         <span class="tips">*</span>网格名称
       </div>
-      <div class="value">请输入</div>
+      <div class="value">
+        <u-input type="text" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48" v-model="form.girdName" maxlength="20" />
+      </div>
     </div>
     <div class="item-flex">
       <div class="label">
         <span class="tips"></span>网格长
       </div>
-      <div class="value">请选择<img src="./components/img/right-icon.png" alt="" /></div>
+      <div class="value" @click="toAddUser('manage')">请选择<img src="./components/img/right-icon.png" alt="" /></div>
     </div>
     <div class="item-flex">
       <div class="label">
         <span class="tips"></span>网格员
       </div>
-      <div class="value">请选择<img src="./components/img/right-icon.png" alt="" /></div>
+      <div class="value" @click="toAddUser('Member')">请选择<img src="./components/img/right-icon.png" alt="" /></div>
     </div>
-    <div class="footer">确认添加</div>
+    <div class="footer" @click="confirm">确认添加</div>
   </div>
 </template>
 
@@ -26,17 +28,62 @@
 export default {
   data() {
     return {
-      
+      id: '',
+      form: {},
+      detailInfo: {},
+      fromType: 'add', //add新增 edit编辑,
+      addUserType: 'manage', //manage网格长 Member管理员
     }
   },
   methods: {
    
+  },
+  onLoad(option) {
+    this.id = option.id
+    this.getDetail()
+    uni.$on('selectUser', res => {
+      if(this.addUserType == 'manage') {
+        this.form.girdMemberManageList = res
+      }else {
+        this.form.girdMemberList = res
+      }
+    })
   },
   onShow() {
     document.title = '添加网格'
   },
-  linkTo(url) {
-    uni.navigateTo({url})
+  methods: {
+    getDetail() {
+      this.$http.post(`/app/appgirdinfo/queryDetailById?id=${this.id}`).then((res) => {
+        if (res.code == 0) {
+          this.detailInfo = res.data
+          if(this.fromType == 'edit') {
+            this.form = res.data
+          }
+        }
+      })
+    },
+    toAddUser(type) {
+      this.addUserType = type
+      var selectUserList = []
+      if(type == 'manage') {
+        selectUserList = this.form.girdMemberManageList
+      }else {
+        selectUserList = this.form.girdMemberList
+      }
+      uni.navigateTo({url: `./SelectUser?selectUserList=${selectUserList}`})
+    },
+    confirm() {
+      if(!this.form.girdName){
+        return this.$u.toast('请输入网格名称')
+      }
+      this.$http.post(`/app/appgirdinfo/addOrUpdate`).then((res) => {
+        if (res.code == 0) {
+          this.form = res.data
+        }
+      })
+
+    }
   }
 }
 </script>

src/apps/AppGridManagement/Organization.vue

@@ -29,7 +29,7 @@
         <p>{{item.girdName}} </p>
       </div>
     </div>
-    
+    <div class="pad-b112"></div>
   </div>
 </template>
 
@@ -38,20 +38,27 @@ export default {
   data() {
     return {
       userGird: {},
-      dataInfo: {}
+      dataInfo: {},
+      checkType: ''
     }
   },
   onShow() {
     document.title = '网格管理'
+     
   },
   mounted() {
     this.isGirdUser()
+    uni.$on('goback', (res) => {
+      this.userGird = res
+      this.getGirdUserList()
+    }) 
   },
   methods: {
     isGirdUser() {
       this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
         if (res.code == 0) {
           if (res.data.checkType) {
+            this.checkType = res.data.checkType
             this.userGird = res.data.appGirdInfo
             this.getGirdUserList()
           } else {
@@ -76,8 +83,8 @@ export default {
 
 <style lang="scss" scoped>
 .Organization {
-  height: 100%;
   padding-top: 32px;
+  background-color: #f3f6f9;
   .select-gird{
   width: calc(100% - 60px);
   padding: 24px 32px;
@@ -186,5 +193,8 @@ export default {
     line-height: 36px;
     float: right;
   }
+  .pad-b112{
+    padding-bottom: 112px;
+  }
 }
 </style>

src/apps/AppGridManagement/SelectGird.vue

@@ -40,19 +40,31 @@ export default {
       allData: null,
       treeList: [],
       slectList: [],
+      userGird: {},
       userList: [],
-
-      type: 0,  //0统计 1组织
+      girdLevel: 0,
+      parentGirdId: ''
     }
   },
-  onLoad(option) {
-    this.type = option.type
-    this.getTree()
+  onLoad() {
+    this.isGirdUser()
   },
   methods: {
+    isGirdUser() {
+      this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
+        if (res.code == 0) {
+          if (res.data.checkType) {
+            this.userGird = res.data
+            this.getTree()
+          } else {
+            this.$u.toast('当前人员不是网格员或网格管理员')
+          }
+        }
+      })
+    },
     getTree() {
       this.slectList = []
-      this.$http.post('/app/appgirdinfo/listAllByTop').then((res) => {
+      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()
@@ -61,18 +73,14 @@ export default {
     },
 
     treeInit() {
-      if(this.allData[0].isLastLevel == 1) {
-        this.userList = this.allData[0].girdMemberList
-        this.userList.map((item) => {
+      this.treeList = this.allData
+      this.treeList.map((item) => {
         item.isChecked = false
       })
-      }else {
-        this.treeList = this.allData[0].girdList
-      }
       var obj = {
-        girdName: this.allData[0].girdName,
-        id: this.allData[0].id,
-        girdLevel: this.allData[0].girdLevel
+        girdName: '可选范围',
+        id: '',
+        girdLevel: ''
       }
       this.slectList.push(obj)
     },
@@ -90,9 +98,10 @@ export default {
 
     searckGird(row) {
       if(row.girdLevel == 2) return
-      this.$http.post(`/app/appgirdinfo/list?parentGirdId=${row.id}&size=999`).then((res) => {
+      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.records
+          this.treeList = res.data
         }
       })
     },
@@ -138,10 +147,6 @@ export default {
         return this.$u.toast('请选择网格')
       }
     },
-
-    callPhone(phone) {
-      uni.makePhoneCall({phoneNumber: phone})
-    },
   }
 }
 </script>

src/apps/AppGridManagement/SelectUser.vue

@@ -2,35 +2,15 @@
   <div class="SelectUser">
     <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>
+        <u-search v-model="name" :clearabled="true" placeholder="请输入姓名" :show-action="false" bg-color="#F5F5F5" search-icon-color="#999" color="#999" height="58" @search="getListInit" @clear="name='',getListInit"></u-search>
       </div>
 
-      <div class="showTypes" v-if="!userList.length">
-        <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="item.girdLevel == 2">
-                <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" />
-            </div>
-            <div class="rightes">
-              <div class="applicationNames">{{ item.girdName }}</div>
-              <img src="./components/img/right-icon.png" alt="" class="imgs" />
-            </div>
-          </div>
-        </div>
-
-        <AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
-      </div>
-
-      <div class="showUsers" v-else>
+      <div class="showUsers">
         <div v-if="userList.length > 0">
           <div class="cards" v-for="(e, index) in userList" :key="index">
             <div class="imges">
-              <img src="./components/img/xzh.png" alt="" class="imgselect" v-if="e.isChecked" @click="userClick(e, index)" />
-              <img src="./components/img/xz.png" alt="" class="imgselect" v-else @click="userClick(e, index)" />
+              <img src="./components/img/xzh.png" alt="" class="imgselect" v-if="e.isChecked" @click="userClick(index)" />
+              <img src="./components/img/xz.png" alt="" class="imgselect" v-else @click="userClick(index)" />
 
               <img src="./components/img/tx@2x.png" alt="" class="avatras" />
             </div>
@@ -58,128 +38,63 @@ export default {
   name: 'SelectUser',
   data() {
     return {
-      selectUser: {},
-      allData: null,
-      treeList: [],
-      slectList: [],
+      selectUserList: [],
       userList: [],
+      name: '',
     }
   },
-  onLoad() {
-    this.getTree()
+  onLoad(option) {
+    this.selectUserList = option.selectUserList
+    this.getList()
   },
   methods: {
-    getTree() {
-      this.slectList = []
-      this.$http.post('/app/appgirdinfo/listAllByTop').then((res) => {
-        if (res?.data) {
-          this.allData = res.data
-          this.treeInit()
-        }
-      })
-    },
-
-    treeInit() {
-      if(this.allData[0].isLastLevel == 1) {
-        this.userList = this.allData[0].girdMemberList
-        this.userList.map((item) => {
-          item.isChecked = false
-        })
-      }else {
-        this.treeList = this.allData[0].girdList
-      }
-      var obj = {
-        girdName: this.allData[0].girdName,
-        id: this.allData[0].id,
-        girdLevel: this.allData[0].girdLevel
-      }
-      this.slectList.push(obj)
-    },
-
-    itemClick(row) {
-      console.log(row)
-      var obj = {
-        girdName: row.girdName,
-        id: row.id,
-        girdLevel: row.girdLevel
-      }
-      this.slectList.push(obj)
-      this.searckGird(row)
-    },
-
-    searckGird(row) {
-      if(row.girdLevel != 2) { //查网格
-        this.$http.post(`/app/appgirdinfo/list?parentGirdId=${row.id}&size=999`).then((res) => {
-          if (res?.data) {
-            this.treeList = res.data.records
-          }
-        })
-      }else { //查网格员
-        this.$http.post(`/app/appgirdmemberinfo/listByGirdIdByThree?girdId=${row.id}`).then((res) => {
-          if (res?.data) {
-            this.userList = res.data
-            this.userList.map((item) => {
-              item.isChecked = false
-            })
-          }
-        })
-      }
-    },
-
-    girdNameClick(row, index) {
+    getListInit() {
       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.searckGird(row)
-      }
+      this.current = 1
     },
-    
-
-    girdClick(row, index) {
-      if (this.treeList[index].isChecked) {//取消
-        this.treeList[index].isChecked = false
-        this.selectUser = {}
-      } else {
-        this.treeList.map((item) => {
+    getList() {
+      this.$http.post(`/app/appgirdmemberinfo/list?name=${this.name}&current=${this.current}&size=20`).then((res) => {
+        if (res?.data) {
+          res.data.records.map((item) => {
             item.isChecked = false
           })
-        this.treeList[index].isChecked = true
-        this.selectUser = row
-      }
-      this.$forceUpdate()
-    },
 
-    userClick(row, index) {
-      if (this.userList[index].isChecked) {//取消
-        this.userList[index].isChecked = false
-        this.selectUser = {}
-      } else {
+          this.userList = this.current > 1 ? res.data.records : [...this.userList, ...res.data.records]
+          
           this.userList.map((item) => {
-          item.isChecked = false
-        })
-        this.userList[index].isChecked = true
-        this.selectUser = row
+            this.selectUserList.map((e) => {
+              if(e.id == item.id) {
+                item.isChecked = true
               }
+            })
+          })
+        }
+      })
+    },
+
+    userClick(index) {
+      this.userList[index].isChecked = !this.userList[index].isChecked
       this.$forceUpdate()
     },
 
     submit() {
-      if (this.selectUser.id != null) {
-        uni.$emit('goback', this.selectUser)
-        uni.navigateBack()
+      var selectUserList = []
+      this.userList.map((item) => {
+        if(item.isChecked) {
+          selectUserList.push(item)
+        }
+      })
+      if (!selectUserList.length) {
+        return this.$u.toast('请选择人员')
       } else {
-        return this.$u.toast('请选择网格或网格员')
+        uni.$emit('selectUser', selectUserList)
+        uni.navigateBack()
       }
     },
+  },
+  onReachBottom() {
+    this.current ++
+    this.getList()
   }
 }
 </script>

src/apps/AppGridManagement/SetGird.vue

@@ -7,37 +7,17 @@
 
       <div class="showTypes" v-if="!userList.length">
         <div v-if="treeList.length > 0">
-          <div class="cards" v-for="(item, index) in treeList" :key="index" @click="itemClick(item)">
+          <div class="cards" v-for="(item, index) in treeList" :key="index">
             <div class="imges">
-              <span v-if="item.girdLevel == 2">
+              <span v-if="item.girdRight == 1 && item.girdLevel != 2">
                 <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" />
             </div>
             <div class="rightes">
-              <div class="applicationNames">{{ item.girdName }}</div>
-              <img src="./components/img/right-icon.png" alt="" class="imgs" />
-            </div>
-          </div>
-        </div>
-
-        <AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
-      </div>
-
-      <div class="showUsers" v-else>
-        <div v-if="userList.length > 0">
-          <div class="cards" v-for="(e, index) in userList" :key="index">
-            <div class="imges">
-              <img src="./components/img/xzh.png" alt="" class="imgselect" v-if="e.isChecked" @click="userClick(e, index)" />
-              <img src="./components/img/xz.png" alt="" class="imgselect" v-else @click="userClick(e, index)" />
-
-              <img src="./components/img/tx@2x.png" alt="" class="avatras" />
-            </div>
-
-            <div class="rights">
-              <div class="applicationNames">{{ e.name }}</div>
-              <div class="idNumbers">{{ e.phone }}</div>
+              <div class="applicationNames" @click="showGirdInfo(item)">{{ item.girdName }}</div>
+              <img src="./components/img/right-icon.png" alt="" class="imgs" v-if="item.girdLevel != 2" @click="itemClick(item)" />
             </div>
           </div>
         </div>
@@ -56,23 +36,33 @@
         <div class="title">{{ form.girdName }}</div>
        <div class="info-flex">
           <span class="label">网格类型</span>
-          <span class="value">{{ }}</span>
+          <span class="value">{{ $dict.getLabel('girdType', form.girdType) }}</span>
         </div>
         <div class="info-flex">
           <span class="label">网格层级</span>
-          <span class="value">{{  }}</span>
+          <span class="value">{{ $dict.getLabel('girdLevel', form.girdLevel) }}</span>
         </div>
-        <div class="info-flex">
+        <div v-if="form.girdMemberManageList && form.girdMemberManageList.length">
+          <div class="info-flex" v-for="(item, index) in  form.girdMemberManageList" :key="index">
             <span class="label">网格负责人</span>
-          <span class="value">{{  }}</span>
+            <span class="value">{{ item.name }}&nbsp;&nbsp;{{ item.phone }}
+              <img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(item.phone)" class="phone-icon"
+                   v-if="item.phone">
+            </span>
           </div>
-        <div class="info-flex border-b0">
+        </div>
+        <div v-if="form.girdMemberList && form.girdMemberList.length">
+          <div class="info-flex" v-for="(item, index) in  form.girdMemberList" :key="index">
             <span class="label">网格员</span>
-          <span class="value">{{  }}<img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone('110')" class="phone-icon"></span>
+            <span class="value">{{ item.name }}&nbsp;&nbsp;{{ item.phone }}
+              <img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(item.phone)" class="phone-icon"
+                   v-if="item.phone">
+            </span>
           </div>
-        <div class="btn">
-          <span class="del">删除网格</span>
-          <span class="edit">编辑网格</span>
+        </div>
+        <div class="btn" v-if="form.girdRight == 1">
+          <span class="del" @click="del">删除网格</span>
+          <span class="edit" @click="edit">编辑网格</span>
         </div>
       </div>
     </u-popup>
@@ -91,17 +81,30 @@ export default {
       slectList: [],
       userList: [],
 
-      show: true,
-      form: {}
+      show: false,
+      form: {},
     }
   },
   onLoad() {
-    this.getTree()
+    this.$dict.load('girdType', 'girdLevel')
+    this.isGirdUser()
   },
   methods: {
+    isGirdUser() {
+      this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
+        if (res.code == 0) {
+          if (res.data.checkType) {
+            this.userGird = res.data
+            this.getTree()
+          } else {
+            this.$u.toast('当前人员不是网格员或网格管理员')
+          }
+        }
+      })
+    },
     getTree() {
       this.slectList = []
-      this.$http.post('/app/appgirdinfo/listAllByTop').then((res) => {
+      this.$http.post(`/app/appgirdinfo/queryAppGirdInfoByGirdLevel?girdLevel=0&girdMemberId=${this.userGird.girdMemberId}&parentGirdId=`).then((res) => {
         if (res?.data) {
           this.allData = res.data
           this.treeInit()
@@ -110,24 +113,20 @@ export default {
     },
 
     treeInit() {
-      if(this.allData[0].isLastLevel == 1) {
-        this.userList = this.allData[0].girdMemberList
-        this.userList.map((item) => {
+      this.treeList = this.allData
+      this.treeList.map((item) => {
         item.isChecked = false
       })
-      }else {
-        this.treeList = this.allData[0].girdList
-      }
       var obj = {
-        girdName: this.allData[0].girdName,
-        id: this.allData[0].id,
-        girdLevel: this.allData[0].girdLevel
+        girdName: '可选范围',
+        id: '',
+        girdLevel: ''
       }
       this.slectList.push(obj)
     },
 
     itemClick(row) {
-      console.log(row)
+      if(row.girdLevel == 2) return
       var obj = {
         girdName: row.girdName,
         id: row.id,
@@ -138,22 +137,13 @@ export default {
     },
 
     searckGird(row) {
-      if(row.girdLevel != 2) { //查网格
-        this.$http.post(`/app/appgirdinfo/list?parentGirdId=${row.id}&size=999`).then((res) => {
+      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.records
+          this.treeList = res.data
         }
       })
-      }else { //查网格员
-        this.$http.post(`/app/appgirdmemberinfo/listByGirdIdByThree?girdId=${row.id}`).then((res) => {
-          if (res?.data) {
-            this.userList = res.data
-            this.userList.map((item) => {
-              item.isChecked = false
-            })
-          }
-        })
-      }
     },
 
     girdNameClick(row, index) {
@@ -188,27 +178,25 @@ export default {
       this.$forceUpdate()
     },
 
-    userClick(row, index) {
-      if (this.userList[index].isChecked) {//取消
-        this.userList[index].isChecked = false
-        this.setGird = {}
-      } else {
-        this.userList.map((item) => {
-          item.isChecked = false
-        })
-        this.userList[index].isChecked = true
-        this.setGird = row
-      }
-      this.$forceUpdate()
+    showGirdInfo(row) {
+      this.show = true
+      this.form = row
     },
 
-    submit() {
-      if (this.setGird.id != null) {
-        uni.$emit('goback', this.setGird)
-        uni.navigateBack()
-      } else {
-        return this.$u.toast('请选择网格或网格员')
+    del() {
+      this.$confirm(`是否删除该网格？`).then(() => {
+        this.$http.post(`/app/appgirdinfo/delete?ids=${this.form.id}`).then((res) => {
+          if (res.code == 0) {
+            this.$u.toast('删除成功!')
+            this.treeList = []
+            this.isGirdUser()
           }
+        })
+      })
+    },
+
+    edit() {
+      uni.navigateTo({url: `./AddGird?id=${this.form.id}&fromType=edit`})
     },
 
     callPhone(phone) {
@@ -216,7 +204,11 @@ export default {
     },
 
     toAddGird() {
-      uni.navigateTo({url: './AddGird'})
+      if (this.setGird.id != null) {
+        uni.navigateTo({url: `./AddGird?id=${this.setGird.id}&fromType=add`})
+      } else {
+        return this.$u.toast('请选择网格')
+      }
     }
   }
 }

src/apps/AppGridManagement/Statistics.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="Statistics">
     <div class="top">
-      <div class="left">
+      <div class="left" @click="linkTo('./SelectGird')">
         <img src="./components/img/gird-icon.png" alt="" />
         <div class="girdNmae">{{ girdMsgList.girdName || '' }}</div>
         <u-icon name="arrow-down" color="#666"></u-icon>
       </div>
 
-      <div class="right">网格配置</div>
+      <div class="right" @click="linkTo('./SetGird')" v-if="checkType == 2">网格配置</div>
     </div>
 
     <div class="middle">
@@ -74,6 +74,7 @@ export default {
       girdUser: [],
       peopleList: {},
       girdMsgList: {},
+      checkType: ''
     }
   },
   computed: {},
@@ -82,12 +83,17 @@ export default {
   mounted() {
     this.$dict.load('girdType', 'girdLevel').then(() => {})
     this.isGirdUser()
+    uni.$on('goback', (res) => {
+      this.girdMsgList = res
+      this.getGirdUserList()
+    }) 
   },
   methods: {
     isGirdUser() {
       this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
         if (res.code == 0) {
           this.girdUser = res.data
+          this.checkType = res.data.checkType
           if (this.girdUser.checkType != '0') {
             this.getList()
             if (this.girdUser.appGirdInfo) {
@@ -107,6 +113,9 @@ export default {
         }
       })
     },
+    linkTo(url) {
+      uni.navigateTo({url})
+    }
   },
 }
 </script>