会话存档布局优化

linkwe-ui/src/views/conversation/component/customerList.vue

@@ -8,15 +8,11 @@
           @click="liClick(item)"
         >
           <el-row style="padding:10px">
-            <el-col :span="3"
-              ><img :src="item.avatar"
-            /></el-col>
+            <el-col :span="3"><img :src="item.avatar"/></el-col>
             <el-col :span="21">
               <p>
                 {{ item.name }}
-                <span class="fr gray">{{
-                    item.msgTime
-                }}</span>
+                <span class="fr gray">{{ item.msgTime }}</span>
               </p>
               <p class="gray padt10" v-if="item.contact">
                 {{ JSON.parse(item.contact).content }}
@@ -58,7 +54,7 @@ export default {
 <style lang="scss" scoped>
 .list {
   overflow-y: scroll;
-  height: 651px;
+  height: calc(100vh - 328px);
   ::-webkit-scrollbar {
     display: none;
   }

linkwe-ui/src/views/conversation/component/groupList.vue

 <template>
   <div class="list" v-loading="loading">
-    <div v-if="personList">
+    <div v-if="personList.length">
       <ul>
         <li
           v-for="(item, index) in personList"
           :key="index"
           @click="liClick(item)"
         >
-          <el-row style="padding:10px" v-if="item.msgType == 'text'">
-            <span class="fl">
-              <div class="ninebox">
-                <ul v-if="item.avatar">
-                  <li
-                    v-for="(a, i) in item.avatar.split(',')"
-                    :key="i"
-                  >
-                    <img :src="a" />
-                  </li>
-                </ul>
-              </div>
-            </span>
-            <span class="fl" style="margin-left:8px;line-height:60px">
+          <el-row type="flex" v-if="item.msgType == 'text'">
+            <div class="ninebox">
+              <ul v-if="item.avatar">
+                <li v-for="(a, i) in item.avatar.split(',')" :key="i">
+                  <img :src="a" />
+                </li>
+              </ul>
+            </div>
+            <div class="fl" style="margin-left:8px;line-height:60px">
               <p>
                 {{ item.name }}
-                <span class="fr gray">{{
-                    item.msgTime
-                }}</span>
+                <!-- <span class="fr gray">{{ item.msgTime }}</span> -->
               </p>
-              <p class="gray" v-if="item">
-                {{ item.name }}:{{
-                  item.content
-                }}
-              </p>
-            </span>
+              <!-- <p class="gray" v-if="item">
+                {{ item.name }}:
+                {{ item.content }}
+              </p> -->
+            </div>
           </el-row>
           <!-- <el-row style="padding:10px" v-if="item.finalChatContext.msgtype=='file'">
                 <el-col :span="3">&nbsp;</el-col>
@@ -46,7 +38,9 @@
         </li>
       </ul>
     </div>
-    <div v-else></div>
+    <div class="ac" v-else>
+      暂无数据
+    </div>
   </div>
 </template>
 <script>
@@ -77,6 +71,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .ninebox {
+  flex: none;
   width: 54px;
   height: 52px;
   border: 1px solid #199ed8;
@@ -90,6 +85,7 @@ export default {
 }
 .list {
   overflow-y: scroll;
+  height: calc(100vh - 328px);
 
   ::-webkit-scrollbar {
     display: none;

linkwe-ui/src/views/conversation/component/insideList.vue

 <template>
   <div class="list" v-loading="loading">
-    <div v-if="personList.length >= 1">
+    <div v-if="personList.length">
       <ul>
         <li
           v-for="(item, index) in personList"
@@ -8,9 +8,7 @@
           @click="liClick(item)"
         >
           <el-row style="padding:10px">
-            <span class="fl">
-              <img :src="item.avatar"
-            /></span>
+            <span class="fl"> <img :src="item.avatar"/></span>
             <span class="fl" style="margin-left:8px">
               <p>{{ item.name }}</p>
             </span>
@@ -18,7 +16,9 @@
         </li>
       </ul>
     </div>
-    <div v-else></div>
+    <div class="ac" v-else>
+      暂无数据
+    </div>
   </div>
 </template>
 <script>
@@ -51,7 +51,8 @@ export default {
 <style lang="scss" scoped>
 .list {
   overflow-y: scroll;
-  height: 708px;
+  height: calc(100vh - 328px);
+
   ::-webkit-scrollbar {
     display: none;
   }

linkwe-ui/src/views/conversation/component/list.vue

 <template>
   <div class="list" v-loading="loading">
-    <div v-if="personList.length >= 1">
+    <div v-if="personList.length">
       <ul>
         <li
           v-for="(item, index) in personList"
           :key="index"
           @click="liClick(item)"
         >
-          <el-row style="padding:10px">
+          <el-row>
             <span class="fl"> <img :src="item.avatar"/></span>
             <span class="fl" style="margin-left:8px">
               <p>{{ item.name }}</p>
             </span>
-            <span class="fl">
+            <!-- <span class="fl">
               <p>{{ item.contact }}</p>
-            </span>
+            </span> -->
           </el-row>
         </li>
       </ul>
     </div>
-    <div v-else></div>
+    <div class="ac" v-else>
+      暂无数据
+    </div>
   </div>
 </template>
 <script>
@@ -45,8 +47,8 @@ export default {
       console.log(e, 'liClick')
       this.$emit('chatFn', e)
     },
-    msgContentType(type,msg){
-      console.log(type,msg, 'msgContentType')
+    msgContentType(type, msg) {
+      console.log(type, msg, 'msgContentType')
       //消息获取
       /*case msg = JSON.parse(msg);
       switch (type){
@@ -59,7 +61,7 @@ export default {
 <style lang="scss" scoped>
 .list {
   overflow-y: scroll;
-  height: 708px;
+  height: calc(100vh - 328px);
   ::-webkit-scrollbar {
     display: none;
   }

linkwe-ui/src/views/conversation/page/roleTest.vue

 <template>
   <div>
-    <el-form :inline="true" :model="form" class="demo-form-inline">
-      <el-row>
-        <el-form-item label="员工名称">
-          <el-input v-model="form.Ename" placeholder="客户名称" style="width:300px"></el-input>
-        </el-form-item>
-        <el-form-item label="客户名称">
-          <el-input v-model="form.Cname" placeholder="客户名称" style="width:300px"></el-input>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="查找内容">
-          <el-input v-model="form.Scontent" placeholder="查找内容" style="width:300px"></el-input>
-        </el-form-item>
-        <el-form-item label="时间范围">
-          <el-date-picker v-model="form.Stime" type="datetimerange" format='yyyy-MM-dd' range-separator="至"
-            start-placeholder="开始日期" end-placeholder="结束日期" align="right">
-          </el-date-picker>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item>
-          <el-button type="primary" @click="init">查询</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button>导出列表</el-button>
-        </el-form-item>
-      </el-row>
+    <el-form :inline="true" :model="form" class="top-serach">
+      <el-form-item label="员工名称">
+        <el-input v-model="form.Ename" placeholder="客户名称"></el-input>
+      </el-form-item>
+      <el-form-item label="客户名称">
+        <el-input v-model="form.Cname" placeholder="客户名称"></el-input>
+      </el-form-item>
+      <el-form-item label="查找内容">
+        <el-input v-model="form.Scontent" placeholder="查找内容"></el-input>
+      </el-form-item>
+      <el-form-item label="时间范围">
+        <el-date-picker
+          v-model="form.Stime"
+          type="datetimerange"
+          format="yyyy-MM-dd"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          align="right"
+        >
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="init">查询</el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-button>导出列表</el-button>
+      </el-form-item>
     </el-form>
-    <div class="content">
-      <el-table :data="fileData" stripe style="width: 100%" :header-cell-style="{background:'#fff'}">
+    <div>
+      <el-table
+        :data="fileData"
+        stripe
+        style="width: 100%"
+        :header-cell-style="{ background: '#fff' }"
+      >
         <el-table-column prop="date" label="发送者" width="180">
           <template slot-scope="scope">
-            <p v-if="scope.row">{{scope.row.name}}</p>
+            <p v-if="scope.row">{{ scope.row.name }}</p>
           </template>
         </el-table-column>
         <el-table-column prop="name" label=" 内容">
           <template slot-scope="scope">
-            <p v-if="!!scope.row.contact" class="emcode" v-html="scope.row.contact"></p>
-            <p v-else-if="!!!scope.row.contact&&scope.row.text">{{JSON.parse(scope.row.contact).content}}</p>
+            <p
+              v-if="!!scope.row.contact"
+              class="emcode"
+              v-html="scope.row.contact"
+            ></p>
+            <p v-else-if="!!!scope.row.contact && scope.row.text">
+              {{ JSON.parse(scope.row.contact).content }}
+            </p>
           </template>
         </el-table-column>
         <el-table-column label="消息状态" width="200">
           <template slot="header">
-            {{floorRange}}
-            <el-select size="mini" v-model="floorRange" class="noborder" @change="chechName(floorRange)">
-              <el-option v-for="item in displayOptions" :key="item.value" :label="item.label" :value="item.value">
+            {{ floorRange }}
+            <el-select
+              size="mini"
+              v-model="floorRange"
+              class="noborder"
+              @change="chechName(floorRange)"
+            >
+              <el-option
+                v-for="item in displayOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
               </el-option>
             </el-select>
           </template>
           <template slot-scope="scope">
             <div class="pers">
-              <span v-if="scope.row.action==''">
-              </span>
-              <span v-else-if="scope.row.action=='send'">
+              <span v-if="scope.row.action == ''"> </span>
+              <span v-else-if="scope.row.action == 'send'">
                 <span class="green"></span>
                 已发送
               </span>
-              <span v-else-if="scope.row.action=='recall'">
+              <span v-else-if="scope.row.action == 'recall'">
                 <span class="red"></span>
                 已撤回
               </span>
-              <span v-else-if="scope.row.action=='switch'">
+              <span v-else-if="scope.row.action == 'switch'">
                 <span class="gay"></span>
                 企业日志
               </span>
@@ -74,157 +96,156 @@
           </template>
         </el-table-column>
       </el-table>
-      <el-pagination background class="pagination" layout="prev, pager, next" :total="total"
-        @current-change="currentChange" :current-page="currentPage">
+      <el-pagination
+        background
+        class="pagination"
+        layout="prev, pager, next"
+        :total="total"
+        @current-change="currentChange"
+        :current-page="currentPage"
+      >
       </el-pagination>
     </div>
   </div>
 </template>
 <script>
-  import {
-    content
-  } from '@/api/conversation/content.js'
-  import {
-    yearMouthDay,
-    parseTime
-  } from '@/utils/common.js'
-  export default {
-    data() {
-      return {
-        form: {
-          Ename: "",
-          Cname: '',
-          Scontent: '',
-          Stime: ''
+import { content } from '@/api/conversation/content.js'
+import { yearMouthDay, parseTime } from '@/utils/common.js'
+export default {
+  data() {
+    return {
+      form: {
+        Ename: '',
+        Cname: '',
+        Scontent: '',
+        Stime: ''
+      },
+      currentPage: 1,
+      total: 0,
+      ac: '',
+      fileData: [],
+      floorRange: '全部',
+      displayOptions: [
+        {
+          value: '',
+          label: '全部'
         },
-        currentPage: 1,
-        total: 0,
-        ac: '',
-        fileData: [],
-        floorRange: '全部',
-        displayOptions: [{
-            value: "",
-            label: "全部"
-          },
-          {
-            value: "send",
-            label: "已发送"
-          },
-          {
-            value: "recall",
-            label: "已撤回"
-          },
-          {
-            value: "switch",
-            label: "切回企业日志"
-          }
-        ]
-      }
+        {
+          value: 'send',
+          label: '已发送'
+        },
+        {
+          value: 'recall',
+          label: '已撤回'
+        },
+        {
+          value: 'switch',
+          label: '切回企业日志'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    currentChange(e) {
+      this.currentPage = e
+      this.init(true)
     },
-    mounted() {
-      this.init()
+    init(flag) {
+      if (!!!flag) {
+        this.currentPage = 1
+      }
+      let query = {
+        name: this.form.Ename,
+        customerName: this.form.Cname,
+        contact: this.form.Scontent,
+        beginTime: this.form.Stime ? yearMouthDay(this.form.Stime[0]) : '',
+        endTime: this.form.Stime ? yearMouthDay(this.form.Stime[1]) : '',
+        pageNum: this.currentPage,
+        action: this.ac,
+        orderByColumn: 'msg_time',
+        isAsc: 'desc'
+      }
+      content.getFullSearchChatList(query).then((res) => {
+        this.fileData = res.rows
+        this.total = Number(res.total)
+      })
     },
-    methods: {
-      currentChange(e) {
-        this.currentPage = e
-        this.init(true)
-      },
-      init(flag) {
-        if (!!!flag) {
-          this.currentPage = 1
-        }
-        let query = {
-          name: this.form.Ename,
-          customerName: this.form.Cname,
-          contact: this.form.Scontent,
-          beginTime: this.form.Stime ? yearMouthDay(this.form.Stime[0]) : "",
-          endTime: this.form.Stime ? yearMouthDay(this.form.Stime[1]) : "",
-          pageNum: this.currentPage,
-          action: this.ac,
-          orderByColumn: "msg_time",
-          isAsc: "desc"
-        }
-        content.getFullSearchChatList(query).then(res => {
-          this.fileData = res.rows;
-          this.total = Number(res.total)
-        })
-      },
-      chechName(e) {
-        if (e == '') {
-          this.floorRange = '全部'
-          this.ac = ''
-        } else if (e == 'send') {
-          this.floorRange = '已发送'
-          this.ac = 'send'
-        } else if (e == 'recall') {
-          this.floorRange = '已撤回'
-          this.ac = 'recall'
-        } else {
-          this.floorRange = '切回企业日志'
-          this.ac = 'switch'
-        }
-        console.log(e,this.ac)
-     this.init()
+    chechName(e) {
+      if (e == '') {
+        this.floorRange = '全部'
+        this.ac = ''
+      } else if (e == 'send') {
+        this.floorRange = '已发送'
+        this.ac = 'send'
+      } else if (e == 'recall') {
+        this.floorRange = '已撤回'
+        this.ac = 'recall'
+      } else {
+        this.floorRange = '切回企业日志'
+        this.ac = 'switch'
       }
+      console.log(e, this.ac)
+      this.init()
     }
   }
-
+}
 </script>
 <style lang="scss" scoped>
-  .demo-form-inline {
-    background: #f1f1f1;
-    padding: 18px 10px 0 10px;
-  }
+.demo-form-inline {
+  background: #f1f1f1;
+  padding: 18px 10px 0 10px;
+}
 
-  .content {
-    margin-top: 15px;
-    padding: 10px;
-  }
+.content {
+  margin-top: 15px;
+  padding: 10px;
+}
 
-  .pers {
-    position: relative;
+.pers {
+  position: relative;
 
-    .green {
-      background: greenyellow;
-      position: absolute;
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      top: 10px;
-      left: -8px;
-    }
-
-    .red {
-      background: red;
-      position: absolute;
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      top: 10px;
-      left: -8px;
-    }
-
-    .gay {
-      background: gray;
-      position: absolute;
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      top: 10px;
-      left: -8px;
-    }
+  .green {
+    background: greenyellow;
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    top: 10px;
+    left: -8px;
   }
 
+  .red {
+    background: red;
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    top: 10px;
+    left: -8px;
+  }
 
-  .noborder {
-    /deep/ .el-input--mini .el-input__inner {
-      width: 2px;
-      border: none
-    }
+  .gay {
+    background: gray;
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    top: 10px;
+    left: -8px;
   }
+}
 
-  .emcode /deep/ em {
-    color: #ff0000;
+.noborder {
+  /deep/ .el-input--mini .el-input__inner {
+    width: 2px;
+    border: none;
   }
+}
 
+.emcode /deep/ em {
+  color: #ff0000;
+}
 </style>

linkwe-ui/src/views/conversation/page/userTest.vue

@@ -14,7 +14,7 @@
             </el-input>
           </div>
         </div>
-        <div class="ct_box ct_boxFirst">
+        <div class="ct_box ct_boxFirst" style="height: calc(100vh - 288px)">
           <ul>
             <li
               v-for="(i, t) in CList"
@@ -289,7 +289,7 @@ export default {
   methods: {
     chatFn(data) {
       this.chatData = data
-      console.log(data,"<><><><>><")
+      console.log(data, '<><><><>><')
       this.activeNameThreeClick()
     },
     groupFn(data) {
@@ -317,7 +317,7 @@ export default {
         this.loading = true
       }
       this.personList = []
-      if(this.activeName == '0'){
+      if (this.activeName == '0') {
         content
           .selectAloneChatList({
             fromId: this.fromId,
@@ -330,7 +330,7 @@ export default {
           .catch((err) => {
             this.loading = false
           })
-      }else {
+      } else {
         content
           .getGroupChatList({
             fromId: this.fromId
@@ -417,7 +417,7 @@ export default {
       })
     },
     chatMsgList() {
-      this.getChatList();
+      this.getChatList()
     }
   },
   mounted() {
@@ -440,7 +440,6 @@ export default {
 
 .employ {
   background: #f6f6f9;
-  min-height: 800px;
 
   .hd_tabs {
     background: #fff;
@@ -460,7 +459,6 @@ export default {
 
   .hd_tabs_content {
     width: 100%;
-    min-height: 653px;
     border-bottom: 1px solid #efefef;
   }
 
@@ -472,13 +470,11 @@ export default {
   }
 
   .ct_boxFirst {
-    height: 700px;
   }
 
   .ct_box {
     background: white;
     border-bottom: 1px solid #efefef;
-    min-height: 709px;
     padding: 10px;
     overflow-y: scroll;
     color: #999;