矛盾调解调整

src/components/AiPagePicker.vue

@@ -33,6 +33,7 @@ export default {
         resident: {url: "/components/pages/selectResident", label: "name"},
         sysUser: {url: "/components/pages/selectSysUser", label: "name"},
         gird: {url: "/components/pages/selectGird", label: "girdName"},
+        gridUser: {url: "/components/pages/selectGridMember", label: "name"},
         party: {url: "/components/pages/selectParty", label: "name"},
         dept: {url: "/components/pages/selectDept", label: "name"},
         custom: {...this.ops}

src/components/pages/selectGird.vue

@@ -3,7 +3,7 @@
     <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 v-if="index" class="mar-h8" v-text="`/`"/>
           <span style="color:#3F8DF5" @click="girdNameClick(item, index)" v-text="item.girdName"/>
         </span>
       </div>

src/components/pages/selectGridMember.vue

@@ -0,0 +1,299 @@
+<template>
+  <section class="selectGridMember">
+    <div class="header-middle">
+      <div class="hint">
+        <span v-for="(item, index) in selectGridPath" :key="index"><span v-if="index" style="margin:0 4px;">/</span><span
+            style="color:#3F8DF5" @click="girdNameClick(item, index)">{{ item.girdName }}</span></span>
+      </div>
+      <div class="cards" v-for="(item, index) in treeList" :key="item.id" @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/gird--select-icon.png" alt="" class="avatras"/>
+        </div>
+        <div class="rightes">
+          <div class="applicationNames">{{ item.girdName }}</div>
+          <u-icon class="mar-r16" name="arrow-right" color="#ddd"/>
+        </div>
+      </div>
+      <div class="userCards" v-for="(e, index) in userList" :key="e.id">
+        <div class="imges">
+          <img src="./img/xzh.png" alt="" class="imgselect" v-if="e.isChecked" @click="userClick(e, index)"/>
+          <img src="./img/xz.png" alt="" class="imgselect" v-else @click="userClick(e, index)"/>
+          <img src="./img/user-img.png" alt="" class="avatras"/>
+        </div>
+        <div class="rights fill">
+          <div class="applicationNames" v-text="e.name"/>
+          <div class="idNumbers">{{ e.phone }}</div>
+        </div>
+      </div>
+      <AiEmpty description="暂无数据" v-if="!hasData"/>
+    </div>
+    <div class="subBtn" @click="submit">
+      <div>确定选择</div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "selectGridMember",
+  appName: "选择人员(网格成员)",
+  data() {
+    return {
+      selected: {},
+      allData: null,
+      treeList: [],
+      selectGridPath: [],
+      userList: [],
+    }
+  },
+  computed: {
+    hasData() {
+      return this.treeList?.length > 0 || this.userList?.length > 0
+    }
+  },
+  onLoad() {
+    this.selected.id = this.$route.query.id
+    this.getAllGrids()
+  },
+  onShow() {
+    document.title = '选择人员'
+  },
+  methods: {
+    getAllGrids() {
+      uni.showLoading({title: "数据加载中...", mask: true})
+      this.$http.post('/app/appgirdinfo/listByInfo').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.gridInit()
+        }
+      }).finally(() => uni.hideLoading())
+    },
+    gridInit() {
+      this.treeList = this.allData.filter(e => !e.parentGirdId)
+      this.selectGridPath = [{girdName: "可选范围", id: ''}]
+    },
+    itemClick({id, girdName}) {
+      this.selectGridPath.push({girdName, id})
+      this.getGridsAndUsersByParent(id)
+    },
+
+    getGridsAndUsersByParent(id) {
+      this.treeList = this.allData.filter(e => e.parentGirdId == id)
+      this.userList = []
+      this.$http.post(`/app/appgirdmemberinfo/listByGirdIdByThree?girdId=${id}`).then((res) => {
+        if (res?.data) {
+          this.userList = res.data.map(e => ({...e, isChecked: e.id == this.selected.id}))
+        }
+      })
+    },
+    girdNameClick(row, index) {
+      this.userList = []
+      if (!index) { //第一级别
+        this.gridInit()
+      } else {
+        let length = this.selectGridPath.length - index
+        this.selectGridPath.splice(index, length)
+        this.getGridsAndUsersByParent(row.id)
+      }
+    },
+    girdClick(row, index) {
+      if (this.treeList[index].isChecked) {//取消
+        this.treeList[index].isChecked = false
+        this.selected = {}
+      } else {
+        this.treeList.map((item, i) => {
+          item.isChecked = index == i
+        })
+        this.selected = {...row, kind: "grid"}
+      }
+      this.$forceUpdate()
+    },
+
+    userClick(row, index) {
+      if (this.userList[index].isChecked) {//取消
+        this.userList[index].isChecked = false
+        this.selected = {}
+      } else {
+        this.userList.map((item, i) => {
+          item.isChecked = index == i
+        })
+        this.selected = {...row, kind: "user"}
+      }
+      this.$forceUpdate()
+    },
+
+    submit() {
+      if (this.selected.id != null) {
+        uni.navigateBack({
+          success: () => {
+            uni.$emit("pagePicker:gridUser", this.selected)
+          }
+        })
+      } else {
+        return this.$u.toast('请选择网格或网格员')
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.selectGridMember {
+  height: 100%;
+  background: #fff;
+
+  .header-top {
+    background: #fff;
+    padding: 20px 32px;
+  }
+
+  .header-middle {
+    padding-bottom: 140px;
+
+    .hint {
+      padding: 28px 20px 28px 32px;
+      line-height: 56px;
+      box-shadow: 0 1px 0 0 #e4e5e6;
+      font-size: 30px;
+      font-weight: 500;
+      word-break: break-all;
+    }
+
+    .empty-div {
+      height: 16px;
+      background: #f5f5f5;
+    }
+
+    .cards {
+      display: flex;
+      align-items: center;
+      height: 120px;
+      line-height: 120px;
+      padding: 0 0 0 32px;
+
+      .imges {
+        display: flex;
+        align-items: center;
+
+        .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 {
+        width: calc(100% - 160px);
+        display: flex;
+        align-items: center;
+        margin-left: 32px;
+        border-bottom: 1px solid #e4e5e6;
+
+        .applicationNames {
+          flex: 1;
+          min-width: 0;
+          font-size: 36px;
+          font-weight: 500;
+          color: #333333;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .imgs {
+          flex-shrink: 0;
+          width: 40px;
+          height: 40px;
+          margin-right: 20px;
+        }
+      }
+    }
+
+    .userCards {
+      display: flex;
+      align-items: center;
+      height: 120px;
+      line-height: 120px;
+      padding: 0 0 0 32px;
+
+      .imges {
+        display: flex;
+        align-items: center;
+
+        .imgselect {
+          width: 48px;
+          height: 48px;
+        }
+
+        .avatras {
+          width: 74px;
+          height: 74px;
+          border-radius: 8px;
+          margin-left: 36px;
+        }
+      }
+
+      .rights {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-left: 32px;
+        border-bottom: 1px solid #e4e5e6;
+        padding-right: 40px;
+        height: inherit;
+
+        .applicationNames {
+          font-size: 36px;
+          font-weight: 500;
+          color: #333333;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .idNumbers {
+          color: #666;
+        }
+      }
+    }
+  }
+
+  .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/qujing/AppConflictMediation/AppConflictMediation.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="AppConflictMediation">
-    <component v-if="refresh && isGridMember" :is="component" @change="onChange" :params="params"> </component>
+    <component v-if="refresh && isGridMember" :is="component" @change="onChange" :params="params"></component>
     <div v-if="!isGridMember" class="empty">
       <img src="./components/no-admin.png" alt="">
-      <p>没有网格员权限<br />无法查看矛盾调解信息哦~</p>
+      <p>没有网格员权限<br/>无法查看矛盾调解信息哦~</p>
     </div>
   </div>
 </template>
@@ -21,11 +21,10 @@ export default {
       params: {},
       refresh: true,
       tabIndex: 0,
-      isTab: true,
     }
   },
   components: {List},
-  computed:{
+  computed: {
     ...mapState(['user']),
     isGridMember() {
       return this.user.girdCheckType > 0
@@ -39,16 +38,9 @@ export default {
   },
   onShow() {
     document.title = '矛盾调解'
-    uni.$on('hideTab', () => {
-      this.isTab = false
-    })
-    uni.$on('showTab', () => {
-      this.isTab = true
-    })
-
   },
   onReachBottom() {
-    if(!this.tabIndex) {
+    if (!this.tabIndex) {
       uni.$emit('nextList')
     }
   },
@@ -59,6 +51,7 @@ export default {
 .AppConflictMediation {
   height: 100%;
 }
+
 .tabs {
   width: 100%;
   height: 98px;
@@ -68,14 +61,17 @@ export default {
   bottom: 0;
   left: 0;
   display: flex;
+
   .item {
     flex: 1;
     text-align: center;
+
     img {
       width: 56px;
       height: 56px;
       margin-top: 8px;
     }
+
     p {
       font-size: 22px;
       font-family: PingFangSC-Medium, PingFang SC;
@@ -83,19 +79,23 @@ export default {
       color: #c4cad4;
       line-height: 8px;
     }
+
     .color-3267F0 {
       color: #3267f0;
     }
   }
 }
-.empty{
+
+.empty {
   text-align: center;
-  img{
+
+  img {
     width: 282px;
     height: 306px;
     margin: 136px auto 0;
   }
-  p{
+
+  p {
     font-size: 28px;
     font-family: PingFangSC-Regular, PingFang SC;
     color: #999;

src/project/qujing/AppConflictMediation/Content.vue

@@ -4,8 +4,7 @@
       <u-form :model="forms" ref="uForm" label-width="auto" :border-bottom="false">
         <u-form-item label="转交给" prop="status" required :border-bottom="false" class="first-form" v-if="status == 4">
           <div flex class="flexEnd">
-            <AiPagePicker type="custom" :id="selectObject.id" @select="handleSelectObject"
+            <AiPagePicker type="gridUser" :id="selectObject.id" @select="handleSelectObject">
-                          :ops="{url:'../AppGridManagement/selectGridMember',label: 'name'}">
               <AiMore v-model="forms.name"/>
             </AiPagePicker>
           </div>
@@ -19,20 +18,15 @@
           <u-select v-model="show" :list="myList" value-name="id" label-name="groupName"
                     @confirm="selectStatus"></u-select>
         </u-form-item>
-
         <u-form-item :label="status == 2 ? '办结意见':'办理意见'" prop="content" required :border-bottom="false"
                      label-position="top" class="contents">
           <u-input v-model="forms.content" :placeholder="status == 2 ? '请写下你的办结意见…' : '请写下你的办理意见...'" type="textarea"
                    auto-height height="100" maxlength="200"/>
         </u-form-item>
-
         <div class="limit">{{ forms.content.length }}/200</div>
-
+        <div class="line"/>
-        <div class="line"></div>
-
         <u-form-item label="图片上传(最多9张)" prop="files" :border-bottom="false" class="avatars" label-position="top">
-          <AiUploader :def.sync="forms.files" multiple placeholder="上传图片" :limit="9"
+          <AiUploader :def.sync="forms.files" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"/>
-                      action="/admin/file/add2"></AiUploader>
         </u-form-item>
 
       </u-form>

src/project/qujing/AppConflictMediation/List.vue

@@ -13,7 +13,9 @@
     <!-- 事件列表 -->
     <div class="title">
       <div class="title-name">事件列表</div>
-      <div class="title-type" @click="showGird = true">{{ status ? status : '全部类型' }}<u-icon name="arrow-down"></u-icon></div>
+      <div class="title-type" @click="showGird = true">{{ status ? status : '全部类型' }}
+        <u-icon name="arrow-down"></u-icon>
+      </div>
     </div>
 
     <template>
@@ -51,14 +53,14 @@
       <AiEmpty v-if="!datas.length"></AiEmpty>
     </template>
 
-    <u-select v-model="showGird" :list="$dict.getDict('clapEventStatusAll')" label-name="dictName" value-name="dictValue" @confirm="changeType" />
+    <u-select v-model="showGird" :list="$dict.getDict('clapEventStatusAll')" label-name="dictName" value-name="dictValue" @confirm="changeType"/>
 
     <div class="pad-b120" v-if="datas.length"></div>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import {mapState} from 'vuex'
 
 export default {
   props: {},
@@ -123,9 +125,12 @@ export default {
     document.title = '矛盾调解'
   },
   created() {
-    this.$dict.load('clapEventStatus', 'clapEventStatusAll', 'clapEventStatusHistory').then(() => {
+    uni.showLoading({title: "数据加载中...", mask: true})
-      this.getList()
+    Promise.all([
+      this.getList(),
       this.getStaticList()
+    ]).finally(() => uni.hideLoading())
+    this.$dict.load('clapEventStatus', 'clapEventStatusAll', 'clapEventStatusHistory').then(() => {
       this.listTypeAll = this.$dict.getDict('clapEventStatusAll')
       this.listTypeHistory = this.$dict.getDict('clapEventStatusHistory')
       this.listType = this.listTypeAll
@@ -133,8 +138,7 @@ export default {
   },
   methods: {
     getList() {
-      this.$http
+      return this.$http.post(`/app/appconflicteventinfo/listByGirdMember`, null, {
-        .post(`/app/appconflicteventinfo/listByGirdMember`, null, {
         params: {
           size: 10,
           current: this.current,
@@ -152,7 +156,7 @@ export default {
       })
     },
     getStaticList() {
-      this.$http.post('/app/appconflicteventinfo/conflictEventStatisticByGirdMember').then((res) => {
+      return this.$http.post('/app/appconflicteventinfo/conflictEventStatisticByGirdMember').then((res) => {
         if (res?.data) {
           Object.keys(res.data).forEach(() => {
             this.staticName[0].value = res.data['待处理']
@@ -175,11 +179,11 @@ export default {
 
     // 新增事件
     addEvent() {
-      uni.navigateTo({ url: './add' })
+      uni.navigateTo({url: './add'})
     },
 
     goDetail(item) {
-      uni.navigateTo({ url: `./detail?id=${item.id}` })
+      uni.navigateTo({url: `./detail?id=${item.id}`})
     },
 
     change(index) {
@@ -199,7 +203,7 @@ export default {
     },
 
     linkTo(url) {
-      uni.navigateTo({ url })
+      uni.navigateTo({url})
     },
   },
 }
@@ -209,6 +213,7 @@ export default {
 uni-page-body {
   height: 100%;
 }
+
 .list-content {
   height: 100%;
 
@@ -251,6 +256,7 @@ uni-page-body {
     height: 80px;
     line-height: 80px;
     padding: 0 30px;
+
     .title-name {
       font-size: 38px;
       color: #333333;
@@ -267,6 +273,7 @@ uni-page-body {
   ::v-deep .AiTopFixed .content {
     padding: 0;
   }
+
   ::v-deep .AiCard {
     background: #f3f6f9;
     padding: 24px 30px 0;
@@ -277,6 +284,7 @@ uni-page-body {
 
       .card-top {
         padding: 32px;
+
         .titles {
           margin-bottom: 34px;
           font-size: 32px;
@@ -290,20 +298,24 @@ uni-page-body {
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
         }
+
         .types,
         .gards {
           display: flex;
           margin-top: 8px;
           font-size: 26px;
           width: 100%;
+
           .types-right,
           .gards-right {
             width: calc(100% - 120px);
             color: #333333;
           }
+
           .label1 {
             width: 120px;
           }
+
           .label {
             width: 120px;
           }
@@ -313,6 +325,7 @@ uni-page-body {
       .status {
         padding: 32px;
         border-top: 1px solid #dddddd;
+
         .icon {
           display: inline-block;
           width: 8px;
@@ -324,6 +337,7 @@ uni-page-body {
 
       .status0 {
         color: #ff883c;
+
         .icon {
           background: #ff883c;
         }
@@ -331,6 +345,7 @@ uni-page-body {
 
       .status1 {
         color: #1aaaff;
+
         .icon {
           background: #1aaaff;
         }
@@ -338,6 +353,7 @@ uni-page-body {
 
       .status2 {
         color: #42d784;
+
         .icon {
           background: #42d784;
         }
@@ -345,6 +361,7 @@ uni-page-body {
 
       .status3 {
         color: #ff4466;
+
         .icon {
           background: #ff4466;
         }
@@ -366,11 +383,13 @@ uni-page-body {
     align-items: center;
     box-shadow: inset 0px 1px 0px 0px #dddddd;
     z-index: 999;
+
     .myreport {
       background-color: #ffffff;
       width: 40%;
       color: #333;
     }
+
     .add {
       background-color: #3975c6;
       width: 60%;