From d14e7b3ab52bc52166a01d7ce03ff762322b83ad Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Mon, 17 Jul 2023 15:20:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=9A=E8=AF=9D=E5=AD=98=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pidu/AppConversation/AppConversation.vue  | 508 +++++++++---------
 .../AppConversation/conversationDetail.vue    |  15 +-
 .../pidu/AppConversation/img/dept-img.png     | Bin 0 -> 2224 bytes
 src/project/pidu/AppConversation/list.vue     | 285 ++++++++++
 4 files changed, 561 insertions(+), 247 deletions(-)
 create mode 100644 src/project/pidu/AppConversation/img/dept-img.png
 create mode 100644 src/project/pidu/AppConversation/list.vue

diff --git a/src/project/pidu/AppConversation/AppConversation.vue b/src/project/pidu/AppConversation/AppConversation.vue
index 522691b1..fa01e4cb 100644
--- a/src/project/pidu/AppConversation/AppConversation.vue
+++ b/src/project/pidu/AppConversation/AppConversation.vue
@@ -1,283 +1,309 @@
 <template>
-  <div class="AppConversation">
+  <section class="AppConversation">
     <AiTopFixed>
-      <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6"
-        inactive-color="#A1C1E8" :bar-style="barStyle" :active-item-style="activeStyle" active-color="#ffffff " @change="change">
-      </u-tabs>
-      <div class="top-search">
-        <div class="left">
-          <AiPagePicker type="dept" :selected.sync="deptUserList" nodeKey="id" single @select="deptSelect">
-            <span class="label" v-if="deptUserList.length">{{deptUserList[0].name}}</span>
-            <span v-else style="color:#999;">部门名称</span>
-            <div class="clear-btn" v-if="deptUserList.length" @click.stop="clearDept">
-              <img src="./img/del-icon.png" alt="" class="del-icon">
-            </div>
-            <u-icon name="arrow-down" color="#999" size="24" style="margin-left:8px;" v-else/>
-           
-          </AiPagePicker>
-        </div>
-        <div class="right">
-          <u-search v-model="keyword" :clearabled="true" :placeholder="currentTabs != 1 ? '请输入群名称' : '请输入昵称'" :show-action="false" bg-color="#F5F5F5"
-            search-icon-color="#999" color="#999" height="58" @search="getListInit" @clear="getListInit">
-          </u-search>
-        </div>
+      <u-search v-model="keyword" :clearabled="true" placeholder="搜索" :show-action="false" bg-color="#F5F5F5"
+        search-icon-color="#999" color="#999" height="58" @search="getUserListInit" @clear="getDeptListInit">
+      </u-search>
+      <div class="hint">
+        <span v-for="(item, index) in selectDeptPath" :key="index">
+          <span v-if="index>0" class="mar-h4">/</span>
+          <span class="color-3F8DF5" @click="deptNameClick(item, index)">{{ item.name }}</span>
+        </span>
       </div>
-      <!-- <div class="top-search">
-        <div class="left">
-          <u-search v-model="keyword" :clearabled="true" :placeholder="currentTabs != 1 ? '请输入群名称' : '请输入昵称'" :show-action="false" bg-color="#F5F5F5"
-            search-icon-color="#999" color="#999" height="58" @search="getListInit" @clear="getListInit">
-          </u-search>
-        </div>
-      </div>
-      <div class="top-select">
-        <div class="item">
-          <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" style="color: #666" selectRoot>
-            <span style="margin-left: 4px" v-if="areaName">{{ areaName }}</span>
-            <span v-else style="color:#999;">行政区划</span>
-            <u-icon name="arrow-down" color="#999" size="28" style="margin-left: 4px" />
-          </AiAreaPicker>
-        </div>
-        <div class="item">
-          <AiPagePicker type="dept" :selected.sync="deptUserList" nodeKey="id" single @select="deptSelect">
-            <span class="label" v-if="deptUserList.length">{{deptUserList[0].name}}</span>
-            <span v-else style="color:#999;">部门名称</span>
-            <u-icon name="arrow-down" color="#999" size="24" style="margin-left:8px;"/>
-          </AiPagePicker>
-        </div>
-      </div> -->
     </AiTopFixed>
-    <div class="user-list" v-if="list.length">
-      <div class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
-        <img :src="item.toUserAvatar" alt="" v-if="currentTabs == 1">
-        <img src="./img/group-img.png" alt="" v-else>
-        <div class="item-border">
-          <div class="flex-left">
-            <p>{{currentTabs == 1 ? item.toUserName : item.roomName}}</p>
-          </div>
-          <div class="flex-right" :class="`type`+item.userType" v-if="item.userType > 0">{{item.userType == 1 ? '内部' : '外部'}}</div>
+    <div class="header-middle">
+      <div class="cards" v-for="item in treeList" :key="item.id" @click="itemClick(item)">
+        <div class="imges">
+          <img src="./img/dept-img.png" alt="" class="avatras"/>
+        </div>
+        <div class="rightes">
+          <div class="applicationNames">{{ item.name }}</div>
         </div>
       </div>
+      <div v-if="userList.length">
+        <div class="userCards" v-for="e in userList" :key="e.id" @click="toList(e)">
+          <div class="imges">
+            <img :src="e.avatar" alt="" class="avatras" v-if="e.avatar">
+            <img src="./img/user-img.png" alt="" class="avatras" v-else/>
+          </div>
+          <div class="rights fill">
+            <div class="applicationNames" v-html="brightenKeyword(e.name, keyword)"></div>
+            <div class="idNumbers">{{ e.mobile }}</div>
+          </div>
+        </div>
+      </div>
+      <AiEmpty description="暂无数据" v-if="!hasData"/>
     </div>
-    <AiEmpty v-else/>
-  </div>
+  </section>
 </template>
 
 <script>
-import {mapState} from "vuex";
 export default {
   name: "AppConversation",
   appName: "会话存档",
   data() {
     return {
-      tabList: [
-        {name: '群聊会话'},
-        {name: '私聊会话'},
-      ],
-      currentTabs: 0,
-      barStyle: {
-        'width': '24px',
-        'height': '2px',
-        'border-radius': '0',
-        'bottom': '5px'
-      },
-      activeStyle: {
-        'font-weight' : '400',
-      },
-      keyword: '',
-      areaId: '',
-      areaName: '',
-      current: 1,
-      pages: 2,
-      list: [],
-      deptUserList: []
-    };
+      selected: [],
+      allData: null,
+      treeList: [],
+      selectDeptPath: [],
+      userList: [],
+      keyword: ''
+    }
   },
   computed: {
-    ...mapState(['user']),
+    hasData() {
+      return this.treeList?.length > 0 || this.userList?.length > 0
+    }
   },
   onLoad() {
-    this.areaId = this.user.areaId
-    this.areaName = this.user.areaName
-    // this.deptUserList = [{id: this.user.departId, name: this.user.departName}]
-    this.getList()
-  },
-  onShow() {
-    
+    this.getAllDepts()
   },
   methods: {
-    clearDept() {
-      this.deptUserList = []
-      this.getListInit()
+    isSelected(id, corpId) {
+      return !!this.selected.find(e => e.id == id && e.corpId == corpId)
     },
-    change(index) {
-      this.keyword = ''
-      this.currentTabs = index
-      this.getListInit()
-    },
-    getListInit() {
-      this.current = 1
-      this.pages = 2
-      this.list = []
-      this.getList()
-    },
-    areaSelect(e) {
-      this.areaId = e
-      this.getListInit()
-    },
-    deptSelect(e) {
-      this.deptUserList = e
-      this.getListInit()
-    },
-    getList() {
-      if(this.current > this.pages)  return
-      this.$http.post(`/app/appsessionarchiveindex/listByUser`, null, {
-        params: {
-          current: this.current,
-          size: 15,
-          type: this.currentTabs == 1 ? 0 : 1,
-          // areaId: this.areaId,
-          toUserName: this.currentTabs == 1 ? this.keyword : '',
-          roomName: this.currentTabs == 1 ? '' : this.keyword,
-          departmentId: this.deptUserList.length ? this.deptUserList[0].id : ''
-        }
-      }).then(res=> {
-        if(res?.data) {
-          res.data.records.map((item) => {
-            if(item.type == 1) {
-              item.userType = item.roomType
-            }else {
-              item.userType = item.toUserType
-            }
-          })
-          this.list = this.current > 1 ? [...this.list, ...res.data.records]: res.data.records
-          this.pages = res.data.pages
+    getAllDepts() {
+      this.$http.post('/app/wxcp/wxdepartment/listAllByCorp').then((res) => {
+        if (res?.data) {
+          let parents = res.data.map(e => e.parentid)
+          this.allData = res.data.map(e => ({...e, hasChildren: parents.includes(e.id), isChecked: this.isSelected(e.id, e.corpId)}))
+          this.deptInit()
         }
       })
     },
-    toDetail(row) {
-      var query = row.type == 1 ? `?roomId=${row.roomId}` : `?toUserId=${row.toUserId}`
-      uni.navigateTo({ url: `./conversationDetail${query}&type=${row.type}`})
+    deptInit() {
+      this.treeList = this.allData.filter(e => !e.parentid)
+      this.selectDeptPath = [{name: "可选范围", id: ''}]
+    },
+    itemClick({id, name, corpId}) {
+      let index = this.selectDeptPath.findIndex(e => e.id == id && e.corpId == corpId)
+      if (index == -1) {
+        this.selectDeptPath.push({name, id, corpId})
+        this.getDeptsAndUsersByParent(id, corpId)
+      }
+    },
+    getDeptsAndUsersByParent(departmentId, corpId) {
+      this.treeList = this.allData.filter(e => e.parentid == departmentId && e.corpId == corpId)
+      this.userList = []
+      this.$http.post(`/app/wxcp/wxuser/listByDeptId`, null, {
+        params: {departmentId, status: 1, cid: corpId, name: this.keyword}
+      }).then(res => {
+        if (res?.data) {
+          if(this.keyword) {
+            res.data.map((item) => {
+              var nameList = item.name.split(this.keyword)
+              console.log(nameList)
+            })
+          }
+          
+          this.userList = res.data
+        }
+      })
+    },
+    getRedWords(contentText, keyword) {
+      let keywordArray = keyword.split('');
+      let wordsArray = [];
+      for(let key of keywordArray){
+        if(contentText.includes(key)){
+          wordsArray.push(key)
+        }
+      }
+      return wordsArray;
+    },
+    brightenKeyword(contentText, keyword) {
+      let wordsArray = this.getRedWords(contentText, keyword);
+      let res = contentText;//res的初始值是不带任何红色格式的
+      //遍历相同字数组，
+      for(let word of wordsArray){
+        const Reg = new RegExp(word, 'i');
+        //替换每一个相同字
+        res = res.replace(Reg, `<span style="color: #1365DD;">${word}</span>`);
+      }
+      return res;
+    },
+    getUserListInit() {
+      var e = this.selectDeptPath[this.selectDeptPath.length - 1]
+      if(!e.id) {  //第一级 根节点
+        return this.$u.toast('请选择部门后再搜索人员')
+      }
+      this.getDeptsAndUsersByParent(e.id, e.corpId)
+    },
+    getDeptListInit() {
+      var e = this.selectDeptPath[this.selectDeptPath.length - 1]
+      if(!e.id) {  //第一级
+        this.treeList = this.allData.filter(e => !e.parentid)
+        this.userList = []
+      }else {
+        this.getDeptsAndUsersByParent(e.id || '', e.corpId || '')
+      }
+    },
+    deptNameClick(row, index) {
+      this.userList = []
+      if (!index) { //第一级别
+        this.deptInit()
+      } else {
+        let length = this.selectDeptPath.length - index
+        this.selectDeptPath.splice(index + 1, length)
+        this.getDeptsAndUsersByParent(row.id, row.corpId)
+      }
+    },
+    itemCheck(row, kind) {
+      row.isChecked = !row.isChecked
+      if (row.isChecked) {
+        this.selected.push({...row, kind})
+      } else {
+        let index = this.selected.findIndex(e => e.id == row.id)
+        this.selected.splice(index, 1)
+      }
+      this.$forceUpdate()
+    },
+    toList(row) {
+      uni.navigateTo({url: `./list?id=${row.id}`})
     }
-  },
-  onReachBottom() {
-    this.current ++
-    this.getList()
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
 .AppConversation {
   height: 100%;
-  ::v-deep .AiTopFixed {
-    .placeholder {
-      .content {
-        padding: 0 !important;
-      }
-    }
-    .fixed {
-      margin: 0 !important;
-      .content {
-        padding: 0 !important;
-      }
-    }
-  }
-  .top-search {
+  background: #fff;
+
+  .header-top {
+    background: #fff;
     padding: 20px 32px;
-    display: flex;
-    .left {
-      width: 350px;
-      line-height: 64px;
-      .clear-btn {
-        display: inline-block;
-        padding: 0 16px;
-      }
-      .del-icon {
-        width: 32px;
-        height: 32px;
-        vertical-align: middle;
-      }
-    }
-    .right {
-      width: calc(100% - 350px);
-    }
   }
-  .top-select {
-    display: flex;
-    padding: 28px 0;
-    .item {
-      flex: 1;
-      padding: 0 8px;
-      text-align: center;
-      span {
-        display: inline-block;
-        font-family: PingFangSC-Medium;
-        font-weight: 500;
-        font-size: 28px;
-        color: #666;
-        line-height: 40px;
-      }
+
+  .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;
     }
-  }
-  .user-list {
-    border-top: 1px solid #eee;
-    background-color: #fff;
-    .item {
-      padding: 24px 0 0 32px;
+
+    .empty-div {
+      height: 16px;
+      background: #f5f5f5;
+    }
+
+    .imges {
       display: flex;
-      .item-border {
-        width: calc(100% - 112px);
-        padding-right: 32px;
+      align-items: center;
+
+      .avatras {
+        width: 74px;
+        height: 74px;
+        border-radius: 8px;
+      }
+    }
+
+    .cards {
+      display: flex;
+      align-items: center;
+      height: 120px;
+      line-height: 120px;
+      padding: 0 0 0 32px;
+
+
+      img {
+        width: 74px;
+        height: 74px;
+        border-radius: 8px;
+      }
+
+      .rightes {
+        width: calc(100% - 106px);
+        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;
+
+      .rights {
         display: flex;
         justify-content: space-between;
-        border-bottom: 1px solid #eee;
-      }
-      .flex-left {
-        padding-right: 8px;
-        box-sizing: border-box;
-      }
-      .flex-right {
-        font-size: 24px;
-        margin-top: 26px;
-        width: 78px;
-        height: 34px;
-        line-height: 34px;
-        text-align: center;
-        border-radius: 4px;
-      }
-      .type1 {
-        background-color: #EAF4FF;
-        color: #267EF0;
-      }
-      .type2 {
-        background-color: #FDEEE1;
-        color: #FB7D29;
-      }
-      img {
-        width: 80px;
-        height: 80px;
-        border-radius: 50%;
-        margin-right: 32px;
-      }
-      p {
-        padding-bottom: 32px;
-        width: calc(100% - 112px);
-        line-height: 80px;
-        font-family: PingFangSC-Medium;
-        font-weight: 500;
-        font-size: 32px;
-        color: #333;
-        letter-spacing: 0.3px;
-        display: inline-block;
-        vertical-align: top;
-        width: 100%;
-      }
-    }
-    .item:nth-last-child(1) {
-      p {
-        border-bottom: 0;
+        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;
+    }
+  }
+
+  .color-3F8DF5 {
+    color: #3F8DF5;
+  }
+
+  .mar-h4 {
+    margin: 0 4px;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/project/pidu/AppConversation/conversationDetail.vue b/src/project/pidu/AppConversation/conversationDetail.vue
index 96f8834e..2b834aea 100644
--- a/src/project/pidu/AppConversation/conversationDetail.vue
+++ b/src/project/pidu/AppConversation/conversationDetail.vue
@@ -20,12 +20,12 @@
     <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll" v-if="list.length" :style="{height: scrollHeight+'px'}">
 			<div class="conversation-list">
         <div v-for="(item, index) in list" :key="index">
-          <div class="item" :class="item.userId == user.wxUserId ? 'item-right' : 'item-left'">
+          <div class="item" :class="item.userId == id ? 'item-right' : 'item-left'">
 
             <!-- <img src="./img/fail-icon.png" alt="" class="fail-img" v-if="item.userId == user.wxUserId"> -->
 
-            <img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId != user.wxUserId && item.userAvatar">
-            <img src="./img/user-img.png" alt="" class="user-img" v-if="item.userId != user.wxUserId && !item.userAvatar">
+            <img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId != id && item.userAvatar">
+            <img src="./img/user-img.png" alt="" class="user-img" v-if="item.userId != id && !item.userAvatar">
 
             <p class="user-name">{{item.userName}}<span>{{item.msgSendTime}}</span></p>
 
@@ -111,7 +111,7 @@
               </div>
 
             </div>
-            <img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId == user.wxUserId">
+            <img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId == id">
 
             <!-- <img src="./img/fail-icon.png" alt="" class="fail-img" v-if="item.userId != user.wxUserId"> -->
           </div>
@@ -158,7 +158,8 @@ export default {
       dateList: [],
       scrollTop: 0,
       scrollHeight: '',
-      preveHeight: ''
+      preveHeight: '',
+      id: ''
     };
   },
   computed: {
@@ -171,6 +172,7 @@ export default {
       this.roomId = option.roomId
     }
     this.type = option.type
+    this.id = option.id
     this.getList()
     console.log()
     this.scrollHeight = uni.getSystemInfoSync().windowHeight - 150 
@@ -234,12 +236,13 @@ export default {
           this.preveHeight = res.height  
         }).exec();
       }
-      this.$http.post(`/app/appsessionarchiveinfo/listByUser`, null, {
+      this.$http.post(`/app/appsessionarchiveinfo/list`, null, {
         params: {
           current: this.current,
           size: 10,
           msgType: this.tabList[this.currentTabs].value,
           // msgType: 'link',
+          userId: this.id,
           toUserId: this.toUserId,
           roomId: this.roomId,
           type: this.type,
diff --git a/src/project/pidu/AppConversation/img/dept-img.png b/src/project/pidu/AppConversation/img/dept-img.png
new file mode 100644
index 0000000000000000000000000000000000000000..7076628f3688aa60a1e59f42d380441cbdd8c566
GIT binary patch
literal 2224
zcmV;h2v7HkP)<h;3K|Lk000e1NJLTq002+`002-31^@s6juG;$00001b5ch_0Itp)
z=>Px-YDq*vRCr$PolR^cM-_nItE%q#u^o?-*s<5vE}(=%IB<X?7mi2>Bt$F_A_$NS
zN!AO9z<I9ZM?$gqTM5u^6bTI{PQVEvAr1(*06An)M3Dd1-mJ$N&tG>{J@ne{iN~Jt
z%yid~$-3ucd8*!2ef_Fly;rZQ5&j<^A_PS0`Y9q@-}twmE6pfva-Nw|9vR_@0F|(9
z(e_cGMZtAQkj({Tt;kvHlSXMnS=XVG?XX>~>5cWrgI@B_{cj9?#WBcySL7LR<uZxA
zC-;l;s89%{^c4oakf@Bts2y5S1X)_>hJ7N@2#Ct5lk!p#SwmWrA9%(DX1dv2czwQ6
zE~D)<qSwQ7*y-^C1OSExAA|hc&7&!5ndwlXiUF`@x#&x*sr&#uLmKn)=#j#79sUNb
zE|@NU?2L@D0c3F1Yt@H>d~QbBFwa^R1Cxfx$YZT@^*Jq*fwFdL;kEo$yH<Lu^v<|I
zI_(6*h{1(E%z~D=cn)&~Y7{xKW`Z(pFMz{wfOHD*`P;iwO*#80=rG5_soz{S3IrEr
zdG3s+4dt~9=J4K2PcPP8$YmK$0G2D{Z?_wdpwQD7839*~PAVrhLS)s^m0a=d@+t;N
zWySSU1AMl!H%+0xAhb}fj6&K@4XV#W+bXNk3-*4zx^Oh8{6*g<2FP<=?ZdT)kBH_b
zS?l_BKGw!*#DkePX6`37GKl~_RUx?o&BdUpr`|7G*AFCXqhC<<O(^XCdKJy6+Bh=6
zwZD>=fAe6;G*$ln4zDwh@v^6&Tdfbx?cDr0hND0n3E=uGcXD#((WRy@yh*XJqjdJ7
zvOJ^<felUV-p<C2C)&fx9U5Ty52SW?t1B{){)3`<XCd)$HogfK7fYMvPof?M;!pr9
z6_S5~gXITl*j_Xz@^JnH%x$d>F((cL$kz7o$>vh4t)~%a<Vkjzr#NY42vFv8>S*@$
z!p<P;JP_b|r8aMyH20tm+lw?&6!2hUb!I>DI`I2H-=8_m`-=~n!5CKK*|5yEg54Ls
zK40q#y5AS&%D?=(;qr<Fl$RNx05XqxTbt$8kMwl=`VQf>SL;ijH8YoO==QSAp^&wk
zU!L0OrEEO`mMeSHJ7I3=vTEL0P&|~Ey!KAHhu?e-AiHS`VQWQ0;Aa4jQAXh~@Pj=s
zzj@Z(I|uNY*Q#?ui+MrTxQ-eRJ9$r9IgWO-w`Y~z|H+q12dCTD1(4T#yVt5$DTS-X
zPfMKari}u^3bK=|@!T&AY`FMV>A$DfhFt)^{mX+=DC9y~!=XXdbD`Ct8ZKa)Q-}fS
zsY$o^?CN>e?EUbobJb2DBL0Jj@VQ?#S1{0pqyXcM9V^90g{6lrPailKB3ZCP;$KW#
z*QJ<TUz-7vubMylLSYk6_PG&G_D$D*wq49mPc7>{d$NOuW8{c~stcvRNB}SLe)vh9
zLEa9R<L3O%0Df1YuJdM8(uX*xooT;U0<d*d-@5sYD-CAX>0DZu?buS;z=C9WPXPeO
z)#Q*3=KWy>h<}t8*8>wAN}&pq=zFuGoObadfNVVOK5_VgG;>fq$qG;XfRI)JfT2XG
z8AE<JP$7Zv&m_fl(QMr#&nr$E#K=gpcXDU;KWt1QfY0BisRq8YG-OA67K=3yK)q;z
zSOZ4|$Z|ObrwH)x0QMQs;g%3y;yIZGst_>ncn#7!T_kCri}cXWOHX4x0=WK*+PszN
zA})>qM(bAAL<0PWvT%beZ3CgFRWbmcAWLMLB1GkCT^kK!g9jU5o7s;5e)CpiSwgxE
zB8LFENs;y<VwDJLlwkiF0XS0$qbUIKWfO+KK_zo8G%+@qKmAH^3)f$v9F-2QaMDj2
z;f?_^#K<})9bzZ-j%6VJ6AXP`8LM4rA@?;(Vyf<MBd22ovT!Bo@+I!z7y!l)(=cR!
z0s-C-2%lw7!Ue!+ZWVyOX>Q|M<^HVKRF9?gea8ea4ZMyPy9OBh#$iF<#kA|cF>9bJ
zfOiDKXIyGvydK2w+-fX0R9H+i|3#+rWFeh$8Iu;++4{#`4uErj+~1=18n|}r{#6&&
z=`sQ&ZQA(UYX{fJ3NP)Wzia@R7YZBV_1o1CTEt;}*1nuCBS1l9@Yz=nA5W`&mvIh^
znPmV|YEL$VQvi&HaAri36O4?=ja!YYZ55_=vM-wv;r`~d*UlEw2^Fxjkj`AWWCS~|
z+$9MnICbT^f(a8I&Pt{p@75ZdFWd=dapE|Y<|i?rnik&aaF$aI><Xw(Xh`1$ys-i7
z3hDE&OxUK9D|llC*tMxNLED-x;f)O-3+~$1bhWY0nF&Pdg@haHuHlU(q~CL6JsQR-
zv++Bb3BG!nfIbHRoKu`SOqP-=TVaI&Z-T*3lQiwlA?$>L&!=`cPA)=Ee+vk{7jKX!
zY^SSgadyOS0qpg(@VHTZlZ(=(x5cJigPcM|p8|pfhR7G5xS}zt9JEm$OOqu2-nPtk
zn#585?cV8ar&^UZ!7`p7Fi;JVKfd$jz5Yldqbba55UF#%FHErHj=D_o6^@g6l0FC<
zr5ppL%{Lq>#g`kIC7GXpR6{43bJgsa!+C%s9dn3=a(2+Bi{eNJZQ`2QQLkeXY&b?f
z>UFGz*<r(u*OBC~Aw$fLyQVnq8V}{PE?&~*$9rAxtjpG~Jp;Xj?8yJAy9j$w90-u>
zWS36#9}hzTjEqWl?MY9HLj&a6*~L5O8IA;yt7lg~bweB(VC?Q?myew+w399uvg_|s
z0*t|D7ceGO!Bh3JD?lAUWD(gVv<^UK*C0E97%jZBi@4p8%&vk@!!dgqK^l6e>h^sd
y2Kc$s-LBVR1VLLBE%tmJMnjPG{oF*o4&#4E(7_LYAlN+s0000<MNUMnLSTa26*vq4

literal 0
HcmV?d00001

diff --git a/src/project/pidu/AppConversation/list.vue b/src/project/pidu/AppConversation/list.vue
new file mode 100644
index 00000000..9c91b5f7
--- /dev/null
+++ b/src/project/pidu/AppConversation/list.vue
@@ -0,0 +1,285 @@
+<template>
+  <div class="conversation-list">
+    <AiTopFixed>
+      <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6"
+        inactive-color="#A1C1E8" :bar-style="barStyle" :active-item-style="activeStyle" active-color="#ffffff " @change="change">
+      </u-tabs>
+      <div class="top-search">
+        <div class="left">
+          <AiPagePicker type="dept" :selected.sync="deptUserList" nodeKey="id" single @select="deptSelect">
+            <span class="label" v-if="deptUserList.length">{{deptUserList[0].name}}</span>
+            <span v-else style="color:#999;">部门名称</span>
+            <div class="clear-btn" v-if="deptUserList.length" @click.stop="clearDept">
+              <img src="./img/del-icon.png" alt="" class="del-icon">
+            </div>
+            <u-icon name="arrow-down" color="#999" size="24" style="margin-left:8px;" v-else/>
+           
+          </AiPagePicker>
+        </div>
+        <div class="right">
+          <u-search v-model="keyword" :clearabled="true" :placeholder="currentTabs != 1 ? '请输入群名称' : '请输入昵称'" :show-action="false" bg-color="#F5F5F5"
+            search-icon-color="#999" color="#999" height="58" @search="getListInit" @clear="getListInit">
+          </u-search>
+        </div>
+      </div>
+      <!-- <div class="top-search">
+        <div class="left">
+          <u-search v-model="keyword" :clearabled="true" :placeholder="currentTabs != 1 ? '请输入群名称' : '请输入昵称'" :show-action="false" bg-color="#F5F5F5"
+            search-icon-color="#999" color="#999" height="58" @search="getListInit" @clear="getListInit">
+          </u-search>
+        </div>
+      </div>
+      <div class="top-select">
+        <div class="item">
+          <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" style="color: #666" selectRoot>
+            <span style="margin-left: 4px" v-if="areaName">{{ areaName }}</span>
+            <span v-else style="color:#999;">行政区划</span>
+            <u-icon name="arrow-down" color="#999" size="28" style="margin-left: 4px" />
+          </AiAreaPicker>
+        </div>
+        <div class="item">
+          <AiPagePicker type="dept" :selected.sync="deptUserList" nodeKey="id" single @select="deptSelect">
+            <span class="label" v-if="deptUserList.length">{{deptUserList[0].name}}</span>
+            <span v-else style="color:#999;">部门名称</span>
+            <u-icon name="arrow-down" color="#999" size="24" style="margin-left:8px;"/>
+          </AiPagePicker>
+        </div>
+      </div> -->
+    </AiTopFixed>
+    <div class="user-list" v-if="list.length">
+      <div class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
+        <img :src="item.toUserAvatar" alt="" v-if="currentTabs == 1">
+        <img src="./img/group-img.png" alt="" v-else>
+        <div class="item-border">
+          <div class="flex-left">
+            <p>{{currentTabs == 1 ? item.toUserName : item.roomName}}</p>
+          </div>
+          <div class="flex-right" :class="`type`+item.userType" v-if="item.userType > 0">{{item.userType == 1 ? '内部' : '外部'}}</div>
+        </div>
+      </div>
+    </div>
+    <AiEmpty v-else/>
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+export default {
+  name: "conversationList",
+  data() {
+    return {
+      tabList: [
+        {name: '群聊会话'},
+        {name: '私聊会话'},
+      ],
+      currentTabs: 0,
+      barStyle: {
+        'width': '24px',
+        'height': '2px',
+        'border-radius': '0',
+        'bottom': '5px'
+      },
+      activeStyle: {
+        'font-weight' : '400',
+      },
+      keyword: '',
+      areaId: '',
+      areaName: '',
+      current: 1,
+      pages: 2,
+      list: [],
+      deptUserList: [],
+      id: ''
+    };
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  onLoad(options) {
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
+    // this.deptUserList = [{id: this.user.departId, name: this.user.departName}]
+    this.id = options.id
+    this.getList()
+  },
+  onShow() {
+    document.title = '会话存档'
+  },
+  methods: {
+    clearDept() {
+      this.deptUserList = []
+      this.getListInit()
+    },
+    change(index) {
+      this.keyword = ''
+      this.currentTabs = index
+      this.getListInit()
+    },
+    getListInit() {
+      this.current = 1
+      this.pages = 2
+      this.list = []
+      this.getList()
+    },
+    areaSelect(e) {
+      this.areaId = e
+      this.getListInit()
+    },
+    deptSelect(e) {
+      this.deptUserList = e
+      this.getListInit()
+    },
+    getList() {
+      if(this.current > this.pages)  return
+      this.$http.post(`/app/appsessionarchiveindex/list`, null, {
+        params: {
+          current: this.current,
+          size: 15,
+          type: this.currentTabs == 1 ? 0 : 1,
+          // areaId: this.areaId,
+          userId: this.id,
+          toUserName: this.currentTabs == 1 ? this.keyword : '',
+          roomName: this.currentTabs == 1 ? '' : this.keyword,
+          departmentId: this.deptUserList.length ? this.deptUserList[0].id : ''
+        }
+      }).then(res=> {
+        if(res?.data) {
+          res.data.records.map((item) => {
+            if(item.type == 1) {
+              item.userType = item.roomType
+            }else {
+              item.userType = item.toUserType
+            }
+          })
+          this.list = this.current > 1 ? [...this.list, ...res.data.records]: res.data.records
+          this.pages = res.data.pages
+        }
+      })
+    },
+    toDetail(row) {
+      var query = row.type == 1 ? `?roomId=${row.roomId}` : `?toUserId=${row.toUserId}`
+      uni.navigateTo({ url: `./conversationDetail${query}&type=${row.type}&id=${this.id}`})
+    }
+  },
+  onReachBottom() {
+    this.current ++
+    this.getList()
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.conversation-list {
+  height: 100%;
+  ::v-deep .AiTopFixed {
+    .placeholder {
+      .content {
+        padding: 0 !important;
+      }
+    }
+    .fixed {
+      margin: 0 !important;
+      .content {
+        padding: 0 !important;
+      }
+    }
+  }
+  .top-search {
+    padding: 20px 32px;
+    display: flex;
+    .left {
+      width: 350px;
+      line-height: 64px;
+      .clear-btn {
+        display: inline-block;
+        padding: 0 16px;
+      }
+      .del-icon {
+        width: 32px;
+        height: 32px;
+        vertical-align: middle;
+      }
+    }
+    .right {
+      width: calc(100% - 350px);
+    }
+  }
+  .top-select {
+    display: flex;
+    padding: 28px 0;
+    .item {
+      flex: 1;
+      padding: 0 8px;
+      text-align: center;
+      span {
+        display: inline-block;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        font-size: 28px;
+        color: #666;
+        line-height: 40px;
+      }
+    }
+  }
+  .user-list {
+    border-top: 1px solid #eee;
+    background-color: #fff;
+    .item {
+      padding: 24px 0 0 32px;
+      display: flex;
+      .item-border {
+        width: calc(100% - 112px);
+        padding-right: 32px;
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 1px solid #eee;
+      }
+      .flex-left {
+        padding-right: 8px;
+        box-sizing: border-box;
+      }
+      .flex-right {
+        font-size: 24px;
+        margin-top: 26px;
+        width: 78px;
+        height: 34px;
+        line-height: 34px;
+        text-align: center;
+        border-radius: 4px;
+      }
+      .type1 {
+        background-color: #EAF4FF;
+        color: #267EF0;
+      }
+      .type2 {
+        background-color: #FDEEE1;
+        color: #FB7D29;
+      }
+      img {
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        margin-right: 32px;
+      }
+      p {
+        padding-bottom: 32px;
+        width: calc(100% - 112px);
+        line-height: 80px;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        font-size: 32px;
+        color: #333;
+        letter-spacing: 0.3px;
+        display: inline-block;
+        vertical-align: top;
+        width: 100%;
+      }
+    }
+    .item:nth-last-child(1) {
+      p {
+        border-bottom: 0;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file