会话存档

project/pidu/app/AppSessionArchive/AppSessionArchive.vue

@@ -26,7 +26,7 @@ export default {
   },
   data() {
     return {
-      component: "List",
+      component: "Detail",
       params: {},
       include: [],
     };

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

@@ -11,11 +11,11 @@
         </div>
         <div class="addressBook-left__list--title">
           <el-input
-              size="mini"
-              placeholder="请输入联系人姓名"
-              v-model="searchName"
-              clearable
-              suffix-icon="iconfont iconSearch">
+            size="mini"
+            placeholder="请输入联系人姓名"
+            v-model="searchName"
+            clearable
+            suffix-icon="iconfont iconSearch">
           </el-input>
         </div>
         <div class="addressBook-left__list--wrapper">
@@ -28,11 +28,11 @@
             </div>
           </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>
+        <el-pagination class="pagination"
+          layout="prev, pager, next"
+          :total="total" @current-change="currentChange" :current-page="current" :page-size="20">
+        </el-pagination>
       </div>
     </template>
     <template slot="content">
@@ -41,7 +41,7 @@
           <h2 v-for="(item, index) in msgTypeList" :key="index" :class="msgType == index ? 'tab-active' : ''" @click="msgTypeClick(index)">{{item.name}}</h2>
         </div>
         <div class="search-content">
-          <el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
+          <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="searchMsg" clearable
@@ -85,11 +85,11 @@
           </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>
+      <el-pagination class="msg-list-pagination"
+        layout="prev, pager, next"
+        :total="msgTotal" @current-change="msgCurrentChange" :current-page="msgCurrent" :page-size="20">
+      </el-pagination>
     </template>
   </ai-list>
 </template>
@@ -116,11 +116,11 @@
           name: ''
         },
         current: 1,
-        total: '',
+        total: 0,
         list: [],
         leftActiveIndex: 0,
         msgCurrent: 1,
-        msgTotal: '',
+        msgTotal: 0,
         msgList: [],
         msgType: 0,
         msgTypeList: [
@@ -142,6 +142,7 @@
         this.id = this.params.id
         this.getList()
       }
+      this.getList()
     },
 
     methods: {
@@ -164,7 +165,7 @@
         }).then(res => {
           if (res.code === 0) {
             this.list = res.data.records
-            this.total = res.data.total
+            this.total = res.data.total || 0
             this.getMsgListInit()
           }
           this.isLoading = false
@@ -189,13 +190,13 @@
             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] : ''
+            startTime: this.time ? this.time[0] : '',
+            endTime: this.time ? this.time[1] : ''
           }
         }).then(res => {
           if (res.code === 0) {
             this.msgList = res.data.records
-            this.msgTotal = res.data.total
+            this.msgTotal = res.data.total || 0
           }
           this.isLoading = false
         }).catch(() => {
@@ -207,7 +208,7 @@
         this.getListInit()
       },
       onChange() {
-        this.getListInit()
+        this.getMsgListInit()
       },
       currentChange(e) {
         console.log(e)
@@ -262,6 +263,7 @@
       width: 100%;
       height: auto;
       background: #FAFAFB;
+      position: relative;
 
       .addressBook-left__title {
         display: flex;
@@ -288,9 +290,9 @@
       }
 
       .addressBook-left__list--wrapper {
-        height: calc(100% - 68px);
+        height: calc(100% - 110px);
         padding: 8px;
-        position: relative;
+        overflow-y: scroll;
         .addressBook-left__list--item {
           line-height: 44px;
           font-size: 16px;
@@ -313,12 +315,6 @@
           background-color: #E8EFFF;
           color: #26f;
         }
-        .pagination {
-          position: absolute;
-          bottom: 20px;
-          width: 100%;
-          text-align: center;
-        }
       }
       .addressBook-left__list--title {
         display: flex;
@@ -339,6 +335,13 @@
           margin-right: 8px;
         }
       }
+      .pagination {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        text-align: center;
+        background-color: #fff;
+      }
     }
 
     :deep( .ai-list__content--right ){
@@ -349,14 +352,12 @@
 
       .ai-list__content--right-wrapper {
         width: 100%;
+        position: relative;
+        padding: 0!important;
+        height: 100%;
       }
     }
 
-    :deep .ai-list__content--right-wrapper {
-      padding: 0!important;
-      position: relative;
-    }
-
     .content-right-title {
       height: 40px;
       border-bottom: 1px solid #ddd;
@@ -406,6 +407,8 @@
     }
     .content-right-info {
       padding: 24px 16px;
+      height: calc(100% - 80px);
+      overflow-y: scroll;
       .item {
         margin-bottom: 48px;
         .time {
@@ -496,12 +499,26 @@
         }
         
       }
-      .pagination {
-        position: absolute;
-        bottom: 0;
-        width: calc(100% - 32px);
-        text-align: center;
-      }
+    }
+    .addressBook-left__list--wrapper::-webkit-scrollbar,
+    .content-right-info::-webkit-scrollbar {
+      width: 4px;
+    }
+    .addressBook-left__list--wrapper::-webkit-scrollbar-thumb,
+    .content-right-info::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      background: rgba(0,0,0,0.2);
+    }
+    .addressBook-left__list--wrapper::-webkit-scrollbar-track
+    .content-right-info::-webkit-scrollbar-track {
+      border-radius: 0;
+      background: rgba(0,0,0,0.1);
+    }
+    .msg-list-pagination {
+      position: absolute;
+      bottom: 0;
+      width: calc(100% - 32px);
+      text-align: center;
     }
   }