会话存档

project/pidu/app/AppSessionArchive/AppSessionArchive.vue

@@ -20,12 +20,10 @@ import Detail from "./components/Detail";
 export default {
   name: "AppSessionArchive",
   label: "会话存档",
-
   props: {
     instance: Function,
     dict: Object,
   },
-
   data() {
     return {
       component: "List",
@@ -33,19 +31,16 @@ export default {
       include: [],
     };
   },
-
   components: {
     Detail,
     List,
   },
-
   methods: {
     onChange(data) {
       if (data.type === "Detail") {
         this.component = "Detail";
         this.params = data.params;
       }
-
       if (data.type === "List") {
         this.component = "List";
         this.params = data.params;

project/pidu/app/AppSessionArchive/components/Detail.vue

@@ -6,8 +6,8 @@
     <template #left>
       <div class="addressBook-left">
         <div class="addressBook-left__title">
-          <h2 :class="[tabIndex === 0 ? 'tab-active' : '']">群聊会话</h2>
+          <h2 :class="[tabIndex == 1 ? 'tab-active' : '']" @click="typeClick(1)">群聊会话</h2>
-          <h2 :class="[tabIndex === 1 ? 'tab-active' : '']">私聊会话</h2>
+          <h2 :class="[tabIndex == 0 ? 'tab-active' : '']" @click="typeClick(0)">私聊会话</h2>
         </div>
         <div class="addressBook-left__list--title">
           <el-input
@@ -19,137 +19,213 @@
           </el-input>
         </div>
         <div class="addressBook-left__list--wrapper">
-          <div class="addressBook-left__list--item active">
+          <div class="addressBook-left__list--item" v-for="(item, index) in list" :key="index" :class="leftActiveIndex == index ? 'active' : ''" @click="leftClick(index)">
-            <img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""> 张三
+            <div v-if="tabIndex == 1">
-          </div>
+              <img src="./img/group-img.png" alt="">{{item.roomName}}
-          <div class="addressBook-left__list--item">
+            </div>
-            <img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""> 张三
+            <div v-else>
-          </div>
+              <img :src="item.toUserAvatar" alt="">{{item.toUserName}}
-          <div class="addressBook-left__list--item">
+            </div>
-            <img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""> 张三
           </div>
+          <AiEmpty v-if="!list.length"></AiEmpty>
+          <el-pagination class="pagination"
+            layout="prev, pager, next"
+            :total="total" @current-change="currentChange" :current-page="current" :page-size="20">
+          </el-pagination>
         </div>
       </div>
     </template>
     <template slot="content">
       <div class="content-right-title">
         <div class="tab-content">
-          <h2 class="tab-active">全部</h2>
+          <h2 v-for="(item, index) in msgTypeList" :key="index" :class="msgType == index ? 'tab-active' : ''" @click="msgTypeClick(index)">{{item.name}}</h2>
-          <h2>图片/视频</h2>
-          <h2>文件</h2>
         </div>
         <div class="search-content">
           <el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
             range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onChange">
           </el-date-picker>
-          <el-input size="small" placeholder="输入搜索内容" v-model="search.name" clearable
+          <el-input size="small" placeholder="输入搜索内容" v-model="searchMsg" clearable
-              @clear="current = 1, search.name = '', getTableData()" suffix-icon="iconfont iconSearch"
+              @clear="msgCurrent = 1, searchMsg = '', getMsgListInit()" suffix-icon="iconfont iconSearch"
-              v-throttle="() => {(current = 1), getTableData();}"/>
+              v-throttle="() => {(msgCurrent = 1), getMsgListInit();}"/>
               <ai-download :instance="instance" url="/app/appconvenientaddressbook/export" :params="search" fileName="会话存档"
-                       :disabled="tableData.length == 0">
+                       :disabled="msgList.length == 0">
-            <el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
+            <el-button icon="iconfont iconExported" :disabled="msgList.length == 0">导出</el-button>
           </ai-download>
         </div>
       </div>
       <div class="content-right-info">
-        <div v-for="(item, index) in list" :key="index">
+        <div v-for="(item, index) in msgList" :key="index">
-          <div class="item item-left" v-if="item.type">
+          <div class="item item-right" v-if="item.userId == user.wxUserId">
             <p class="time">2023-04-26 16:11:43</p>
             <div class="item-content-flex">
-              <img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="" class="user-img">
+              <!-- <i class="el-icon-warning"></i> -->
-              <div class="content">
+              <div class="content" v-if="item.msgType == 'text'">
                 <span></span>
                 <p>{{item.content}}</p>
               </div>
-              <i class="el-icon-warning"></i>
+              <div class="img-list" v-if="item.msgType == 'image'">
+                <img :src="item.sdkFileUrl" alt="" v-viewer>
+              </div>
+              <img :src="item.userAvatar" alt="" class="user-img">
             </div>
           </div>
-          <div class="item item-right" v-else>
+          <div class="item item-left" v-else>
             <p class="time">2023-04-26 16:11:43</p>
             <div class="item-content-flex">
-              <i class="el-icon-warning"></i>
+              <img :src="item.userAvatar" alt="" class="user-img">
-              <div class="content">
+              <div class="content" v-if="item.msgType == 'text'">
                 <span></span>
                 <p>{{item.content}}</p>
               </div>
-              <img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="" class="user-img">
+              <div class="img-list" v-if="item.msgType == 'image'">
+                <img :src="item.sdkFileUrl" alt="" v-viewer>
+              </div>
+              <!-- <i class="el-icon-warning"></i> -->
             </div>
           </div>
         </div>
+        <AiEmpty v-if="!msgList.length"></AiEmpty>
+        <el-pagination class="pagination"
+          layout="prev, pager, next"
+          :total="msgTotal" @current-change="msgCurrentChange" :current-page="msgCurrent" :page-size="20">
+        </el-pagination>
       </div>
     </template>
   </ai-list>
 </template>
 
 <script>
+  import { mapState } from 'vuex'
+  import Viewer from 'v-viewer'
+  import Vue from 'vue'
+  Vue.use(Viewer);
   export default {
     name: 'Detail',
-
     props: {
       instance: Function,
       dict: Object,
       params: Object
     },
-
     data () {
       return {
-        info: {},
-        isShow: false,
-        currIndex: 0,
         isLoading: false,
-        tableData: [],
+        tabIndex: 1,
-        form: {
-          code: ''
-        },
-        colConfigs: [
-          { slot: 'goods', label: '商品' },
-          { prop: 'merchandiseIntegral', align: 'center', label: '单价' },
-          { prop: 'merchandiseNumber', align: 'center', label: '数量' },
-          { prop: 'merchandiseIntegral', align: 'center', label: '小计' }
-        ],
-
-
-
-        tabIndex: 0,
         searchName: '',
         time: [],
         search: {
           name: ''
         },
         current: 1,
-        list: [
+        total: '',
-          {type: 0, content: '123全部全部全部全部全部全部全部全部全部全部全部全部右右右右123全部全部全部全部全部全部全部全部全部全部全部全部右右右右123全部全部全部全部全部全部全部全部全部全部全部全部右右右右123全部全部全部全部全部全部全部全部全部全部全部全部右右右右123全部全部全部全部全部全部全部全部全部全部全部全部右右右右123全部全部全部全部全部全部全部全部全部全部全部全部右右右右'},
+        list: [],
-          {type: 1, content: '123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左'},
+        leftActiveIndex: 0,
-          {type: 0, content: '456右右右右'},
+        msgCurrent: 1,
-          {type: 0, content: '123右右右右'},
+        msgTotal: '',
-          {type: 1, content: '123左左左左'},
+        msgList: [],
-        ]
+        msgType: 0,
+        msgTypeList: [
+          {name: '全部', value: ''},
+          {name: '文本', value: 'text'},
+          {name: '图片', value: 'image'},
+          {name: '语音', value: 'voice'},
+        ],
+        searchMsg: '',
+        id: 'LiuYe'
       }
     },
-
+    computed: {
+      ...mapState(['user']),
+    },
     created () {
-      // this.isLoading = true
+      this.isLoading = true
       if (this.params && this.params.id) {
         this.id = this.params.id
-        this.dict.load(['merchandiseOrderStatus']).then(() => {
+        this.getList()
-          // this.getInfo(this.params.id)
-        })
       }
     },
 
     methods: {
-      getInfo (id) {
+      getListInit() {
-        this.instance.post(`/app/appintegralmerchandiseorder/queryDetailById?id=${id}`).then(res => {
+        this.isLoading = true
-          if (res.code === 0) {
+        this.current = 1
-            this.info = res.data
+        this.leftActiveIndex = 0
-            this.tableData = [this.info]
+        this.getList()
+      },
+      getList () {
+        this.instance.post(`/app/appsessionarchiveindex/list`, null, {
+          params: {
+            userId: this.id,
+            type: this.tabIndex,
+            size: 20,
+            current: this.current,
+            toUserName: this.tabIndex == 1 ? '' : this.searchName,
+            roomName: this.tabIndex == 1 ? this.searchName : '',
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.list = res.data.records
+            this.total = res.data.total
+            this.getMsgListInit()
           }
-
           this.isLoading = false
         }).catch(() => {
           this.isLoading = false
         })
       },
+      getMsgListInit() {
+        this.isLoading = true
+        this.msgCurrent = 1
+        this.getMsgList()
+      },
+      getMsgList() {
+        this.instance.post(`/app/appsessionarchiveinfo/listByUser`, null, {
+          params: {
+            userId: this.id,
+            type: this.tabIndex,
+            size: 20,
+            current: this.msgCurrent,
+            msgType: this.msgTypeList[this.msgType].value,
+            toUserId: this.list[this.leftActiveIndex].type == 1 ? '' : this.list[this.leftActiveIndex].toUserId,
+            roomId: this.list[this.leftActiveIndex].type == 1 ? this.list[this.leftActiveIndex].roomId : '',
+            type: this.list[this.leftActiveIndex].type,
+            content: this.searchMsg,
+            startTime: this.time.length ? this.time[0] : '',
+            endTime: this.time.length ? this.time[1] : ''
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.msgList = res.data.records
+            this.msgTotal = res.data.total
+          }
+          this.isLoading = false
+        }).catch(() => {
+          this.isLoading = false
+        })
+      },
+      typeClick(index) {
+        this.tabIndex = index
+        this.getListInit()
+      },
+      onChange() {
+        this.getListInit()
+      },
+      currentChange(e) {
+        console.log(e)
+        this.current = e
+        this.getList()
+      },
+      msgCurrentChange(e) {
+        this.msgCurrent = e
+        this.getMsgList()
+      },
+      leftClick(index) {
+        this.leftActiveIndex = index
+        this.getMsgListInit()
+      },
+      msgTypeClick(index) {
+        this.msgType = index
+        this.getMsgListInit()
+      },
 
       onConfirm() {
         this.$refs.form.validate((valid) => {
@@ -157,7 +233,7 @@
             this.instance.post(`/app/appintegralmerchandiseorder/writeOffOrder`, null, {
               params: {
                 code: this.form.code,
-                id: this.params.id
+                id: this.params.id,
               }
             }).then(res => {
               if (res.code == 0) {
@@ -214,6 +290,7 @@
       .addressBook-left__list--wrapper {
         height: calc(100% - 68px);
         padding: 8px;
+        position: relative;
         .addressBook-left__list--item {
           line-height: 44px;
           font-size: 16px;
@@ -236,6 +313,12 @@
           background-color: #E8EFFF;
           color: #26f;
         }
+        .pagination {
+          position: absolute;
+          bottom: 20px;
+          width: 100%;
+          text-align: center;
+        }
       }
       .addressBook-left__list--title {
         display: flex;
@@ -271,6 +354,7 @@
 
     :deep .ai-list__content--right-wrapper {
       padding: 0!important;
+      position: relative;
     }
 
     .content-right-title {
@@ -361,6 +445,12 @@
               word-break: break-all;
             }
           }
+          .img-list {
+            img {
+              width: 200px;
+              height: 200px;
+            }
+          }
           .el-icon-warning {
             font-size: 32px;
             color: #f46;
@@ -406,6 +496,12 @@
         }
         
       }
+      .pagination {
+        position: absolute;
+        bottom: 0;
+        width: calc(100% - 32px);
+        text-align: center;
+      }
     }
   }