From 84737aeb227d429166a90b4177b2b093f8e968bc Mon Sep 17 00:00:00 2001
From: qiyeqing <444251443@qq.com>
Date: Mon, 11 Jan 2021 17:49:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=9A=E8=AF=9D=EF=BC=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 linkwe-ui/package.json                        |   1 +
 linkwe-ui/src/api/content.js                  |  37 ++
 linkwe-ui/src/utils/common.js                 |  13 +
 .../src/views/conversation/component/chat.vue | 152 ++++++++
 .../views/conversation/component/curList.vue  |  74 ++++
 .../views/conversation/component/cusChat.vue  | 152 ++++++++
 .../src/views/conversation/component/list.vue |  75 ++++
 linkwe-ui/src/views/conversation/content.vue  |  14 +-
 .../views/conversation/page/employeeTest.vue  | 337 ++++++++++++++----
 .../src/views/conversation/page/roleTest.vue  | 180 ++++++++--
 .../src/views/conversation/page/userTest.vue  | 264 +++++++++++---
 11 files changed, 1122 insertions(+), 177 deletions(-)
 create mode 100644 linkwe-ui/src/api/content.js
 create mode 100644 linkwe-ui/src/views/conversation/component/chat.vue
 create mode 100644 linkwe-ui/src/views/conversation/component/curList.vue
 create mode 100644 linkwe-ui/src/views/conversation/component/cusChat.vue
 create mode 100644 linkwe-ui/src/views/conversation/component/list.vue

diff --git a/linkwe-ui/package.json b/linkwe-ui/package.json
index 55f67fd77..f7f8045fd 100644
--- a/linkwe-ui/package.json
+++ b/linkwe-ui/package.json
@@ -49,6 +49,7 @@
     "js-beautify": "1.10.2",
     "js-cookie": "2.2.0",
     "jsencrypt": "3.0.0-rc.1",
+    "moment": "^2.29.1",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
diff --git a/linkwe-ui/src/api/content.js b/linkwe-ui/src/api/content.js
new file mode 100644
index 000000000..0f41ebad2
--- /dev/null
+++ b/linkwe-ui/src/api/content.js
@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+const  getTree=(params)=>{
+    return request({
+      url:'/chat/mapping/list',
+      method: 'get',
+      params,
+    })
+  }
+  
+  const  chatList=(params)=>{
+    return request({
+      url:'/wecom/finance/getChatContactList',
+      method: 'get',
+      params,
+    })
+  }
+  const  listByCustomer=(params)=>{
+    return request({
+      url:'/chat/mapping/listByCustomer',
+      method: 'get',
+      params,
+    })
+  }
+  const  getChatAllList=(params)=>{
+    return request({
+      url:'/wecom/finance/getChatAllList',
+      method: 'get',
+      params,
+    })
+  }
+  //
+  export const content={
+    getTree,
+    chatList,
+    listByCustomer,
+    getChatAllList
+  }
\ No newline at end of file
diff --git a/linkwe-ui/src/utils/common.js b/linkwe-ui/src/utils/common.js
index 17539d3b6..55bfa9bc8 100644
--- a/linkwe-ui/src/utils/common.js
+++ b/linkwe-ui/src/utils/common.js
@@ -52,6 +52,19 @@ export function resetForm(refName) {
 	}
 }
 
+//年月日格式
+export function yearMouthDay(data) {
+	var time = new Date(data);
+    var year = time.getFullYear();
+    var month = time.getMonth()+1;
+    var date = time.getDate();
+   console.log(year+'-'+add0(month)+'-'+add0(date))
+	return year+'-'+add0(month)+'-'+add0(date)
+	
+}
+function add0(m){return m<10?'0'+m:m }
+
+
 // 添加日期范围
 export function addDateRange(params, dateRange) {
 	var search = params;
diff --git a/linkwe-ui/src/views/conversation/component/chat.vue b/linkwe-ui/src/views/conversation/component/chat.vue
new file mode 100644
index 000000000..c1fa74723
--- /dev/null
+++ b/linkwe-ui/src/views/conversation/component/chat.vue
@@ -0,0 +1,152 @@
+<template>
+    <div class="takecontent">
+        <ul>
+            <li v-for="(item,index) in allChat" :key="index">
+                <div :style="{'color':item.action=='send'?'#199ed8':'#999'}">{{item.from}} <span
+                        :style="{'color':item.action=='send'?'#199ed8':'#999'}">{{parseTime(item.msgtime)}}</span></div>
+                <div v-if="item.msgtype=='text'" class="msgtypetext">
+                    {{item.text.content}}
+                </div>
+                <div v-else-if="item.msgtype=='image'" class="msgtypeimg">
+                    <img :src="item.image.attachment">
+                </div>
+                <div v-else-if="item.msgtype=='file'" class="msgtypefile" @click="down(item.file)">
+                    {{item.file.filename}}
+                </div>
+                <!--  <div v-else-if="item.msgtype=='link'&&item.text" class="msgtypelink">
+                    {{item.text.content}}
+                 </div>-->
+                <div v-else-if="item.msgtype=='voice'" class="msgtypevoice">
+                    <i class="el-icon-video-play"  @click="play(item,'voice')"></i>
+                </div>
+                <div v-else-if="item.msgtype=='video'" class="msgtypevideo">
+                    <i class="el-icon-video-play"  @click="play(item,'video')"></i>
+                </div>
+                
+                 <div v-else-if="item.msgtype=='location'" class="msgtypecard ">
+                    <div class="card_name"></div>
+                    <div class="card_foot">{{item.location.address}}</div>
+                </div>
+                 <div v-else-if="item.msgtype=='weapp'" class="msgtypecard ">
+                    <div class="card_name"></div>
+                    <div class="card_foot">小程序</div>
+                </div>
+                <div v-else-if="item.msgtype=='card'" class="msgtypecard ">
+                    <div class="card_name">{{item.card.corpname}}</div>
+                    <div class="card_foot">个人名片</div>
+                </div>
+            </li>
+        </ul>
+        <el-dialog :visible.sync="dia" :show-close='false'>
+            <p>播放</p>
+
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+    import {
+        parseTime,
+        yearMouthDay,
+       
+    } from '@/utils/common.js'
+    export default {
+        props: {
+            allChat: {
+                type: Array,
+                defluat: () => []
+            }
+        },
+
+        data() {
+            return {
+                dia: false
+            }
+        },
+        methods: {
+            play() {
+                this.dia = true
+            },
+            down(e){
+                //下载文件
+            }
+        }
+    }
+</script>
+<style lang="scss" scoped>
+    * {
+        padding: 0;
+        margin: 0;
+    }
+
+    .takecontent {
+        text-align: left;
+        width: 100%;
+        height: 600px;
+        overflow-y: scroll;
+
+        ::-webkit-scrollbar {
+            display: none;
+        }
+
+        ul li {
+            padding: 8px;
+        }
+
+        .msgtypetext {
+            padding: 10px 0;
+        }
+
+        .msgtypevoice {
+            margin: 10px;
+        }
+
+        .msgtypefile {
+            margin: 10px;
+            width: 200px;
+            height: 40px;
+            line-height: 40px;
+             cursor: pointer;
+               color: #199ed8;
+            text-indent: 10px;
+            box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.19);
+        }
+        .card_name{ line-height: 80px;text-indent: 10px;}
+        .msgtypevideo {
+            margin: 10px;
+            font-size: 40px;
+            cursor: pointer;
+            color: #199ed8;
+            border-radius: 8px;
+        }
+
+        .msgtypeimg {
+            width: 100px;
+            height: 80px;
+            margin: 10px;
+        }
+
+        .msgtypecard {
+            width: 300px;
+            height: 140px;
+            margin: 10px;
+            border-radius: 8px;
+            -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19);
+            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19);
+            position: relative;
+
+            .card_foot {
+                position: absolute;
+                height: 20px;
+                border-top: 1px solid #efefef;
+                text-align: left;
+                bottom: 15px;
+                padding: 10px;
+                color: #333;
+                font-weight: bold;
+                width: 100%;
+            }
+        }
+
+    }
+</style>
\ No newline at end of file
diff --git a/linkwe-ui/src/views/conversation/component/curList.vue b/linkwe-ui/src/views/conversation/component/curList.vue
new file mode 100644
index 000000000..91b1d7aa2
--- /dev/null
+++ b/linkwe-ui/src/views/conversation/component/curList.vue
@@ -0,0 +1,74 @@
+<template>
+    <div class="list" v-loading="loading">
+        <div v-if="personList.length>=1">         
+            <ul>             
+            <li v-for="(item,index) in personList" :key="index" @click="liClick(item)">
+                <el-row style="padding:10px">
+                <el-col :span="4"> <img :src="item.finalChatContext.fromInfo.avatar"></el-col>
+                <el-col :span="20">
+                    <p>{{item.roomInfo.groupName}} <span class="fr gray">{{parseTime(item.finalChatContext.msgtime)}}</span></p>
+                 <p class="gray padt10" v-if="item.finalChatContext.text">{{item.finalChatContext.text.content}}</p>   
+                </el-col>
+                </el-row>           
+            </li>
+        </ul>
+        </div>
+        <div v-else></div>
+    </div>
+</template>
+<script>
+    import {parseTime} from '@/utils/common.js'
+    export default {
+        props: {
+            personList: {
+                type: Array,
+                defluat: () => []
+            },
+            loading: {
+                type: Boolean,
+                defluat: false
+            },
+        },
+     
+        data() {
+            return{
+                loadings:true
+            }
+        },
+        methods:{
+            liClick(e){
+                this.$emit('chatFn',e)
+            }
+        }
+    }
+</script>
+<style lang="scss" scoped>
+*{ padding: 0;
+            margin: 0;}
+    .list {
+        overflow-y:scroll;
+       height: 652px;
+      ::-webkit-scrollbar {
+                display: none;
+            }
+
+        /deep/ .el-loading-spinner{margin-top: 20px;}
+       .fr{float:right;}
+       .gray{color: #999;}
+       .padt10{padding-top: 10px;}
+        ul li {
+            overflow: hidden;
+            border-bottom: 1px solid #efefef;
+            cursor: pointer;
+            p{white-space:nowrap;
+            overflow:hidden;
+            text-overflow:ellipsis;}
+            :hover{ background: #efefef;}
+            img {
+                width: 40px;
+                height: 40px;
+                float: left
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/linkwe-ui/src/views/conversation/component/cusChat.vue b/linkwe-ui/src/views/conversation/component/cusChat.vue
new file mode 100644
index 000000000..c1fa74723
--- /dev/null
+++ b/linkwe-ui/src/views/conversation/component/cusChat.vue
@@ -0,0 +1,152 @@
+<template>
+    <div class="takecontent">
+        <ul>
+            <li v-for="(item,index) in allChat" :key="index">
+                <div :style="{'color':item.action=='send'?'#199ed8':'#999'}">{{item.from}} <span
+                        :style="{'color':item.action=='send'?'#199ed8':'#999'}">{{parseTime(item.msgtime)}}</span></div>
+                <div v-if="item.msgtype=='text'" class="msgtypetext">
+                    {{item.text.content}}
+                </div>
+                <div v-else-if="item.msgtype=='image'" class="msgtypeimg">
+                    <img :src="item.image.attachment">
+                </div>
+                <div v-else-if="item.msgtype=='file'" class="msgtypefile" @click="down(item.file)">
+                    {{item.file.filename}}
+                </div>
+                <!--  <div v-else-if="item.msgtype=='link'&&item.text" class="msgtypelink">
+                    {{item.text.content}}
+                 </div>-->
+                <div v-else-if="item.msgtype=='voice'" class="msgtypevoice">
+                    <i class="el-icon-video-play"  @click="play(item,'voice')"></i>
+                </div>
+                <div v-else-if="item.msgtype=='video'" class="msgtypevideo">
+                    <i class="el-icon-video-play"  @click="play(item,'video')"></i>
+                </div>
+                
+                 <div v-else-if="item.msgtype=='location'" class="msgtypecard ">
+                    <div class="card_name"></div>
+                    <div class="card_foot">{{item.location.address}}</div>
+                </div>
+                 <div v-else-if="item.msgtype=='weapp'" class="msgtypecard ">
+                    <div class="card_name"></div>
+                    <div class="card_foot">小程序</div>
+                </div>
+                <div v-else-if="item.msgtype=='card'" class="msgtypecard ">
+                    <div class="card_name">{{item.card.corpname}}</div>
+                    <div class="card_foot">个人名片</div>
+                </div>
+            </li>
+        </ul>
+        <el-dialog :visible.sync="dia" :show-close='false'>
+            <p>播放</p>
+
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+    import {
+        parseTime,
+        yearMouthDay,
+       
+    } from '@/utils/common.js'
+    export default {
+        props: {
+            allChat: {
+                type: Array,
+                defluat: () => []
+            }
+        },
+
+        data() {
+            return {
+                dia: false
+            }
+        },
+        methods: {
+            play() {
+                this.dia = true
+            },
+            down(e){
+                //下载文件
+            }
+        }
+    }
+</script>
+<style lang="scss" scoped>
+    * {
+        padding: 0;
+        margin: 0;
+    }
+
+    .takecontent {
+        text-align: left;
+        width: 100%;
+        height: 600px;
+        overflow-y: scroll;
+
+        ::-webkit-scrollbar {
+            display: none;
+        }
+
+        ul li {
+            padding: 8px;
+        }
+
+        .msgtypetext {
+            padding: 10px 0;
+        }
+
+        .msgtypevoice {
+            margin: 10px;
+        }
+
+        .msgtypefile {
+            margin: 10px;
+            width: 200px;
+            height: 40px;
+            line-height: 40px;
+             cursor: pointer;
+               color: #199ed8;
+            text-indent: 10px;
+            box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.19);
+        }
+        .card_name{ line-height: 80px;text-indent: 10px;}
+        .msgtypevideo {
+            margin: 10px;
+            font-size: 40px;
+            cursor: pointer;
+            color: #199ed8;
+            border-radius: 8px;
+        }
+
+        .msgtypeimg {
+            width: 100px;
+            height: 80px;
+            margin: 10px;
+        }
+
+        .msgtypecard {
+            width: 300px;
+            height: 140px;
+            margin: 10px;
+            border-radius: 8px;
+            -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19);
+            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19);
+            position: relative;
+
+            .card_foot {
+                position: absolute;
+                height: 20px;
+                border-top: 1px solid #efefef;
+                text-align: left;
+                bottom: 15px;
+                padding: 10px;
+                color: #333;
+                font-weight: bold;
+                width: 100%;
+            }
+        }
+
+    }
+</style>
\ No newline at end of file
diff --git a/linkwe-ui/src/views/conversation/component/list.vue b/linkwe-ui/src/views/conversation/component/list.vue
new file mode 100644
index 000000000..aca6430a7
--- /dev/null
+++ b/linkwe-ui/src/views/conversation/component/list.vue
@@ -0,0 +1,75 @@
+<template>
+    <div class="list" v-loading="loading">
+        <div v-if="personList.length>=1">         
+            <ul>             
+            <li v-for="(item,index) in personList" :key="index" @click="liClick(item)">
+                <el-row style="padding:10px">
+                <el-col :span="4"> <img :src="item.receiveWeCustomer.avatar"></el-col>
+                <el-col :span="20">
+                    <p>{{item.receiveWeCustomer.name}} <span class="fr gray">{{parseTime(item.finalChatContext.msgtime)}}</span></p>
+                   <p class="gray padt10" v-if="item.finalChatContext.text">{{item.finalChatContext.text.content}}</p>     
+                </el-col>
+                </el-row>           
+            </li>
+        </ul>
+        </div>
+        <div v-else></div>
+    </div>
+</template>
+<script>
+    import {parseTime} from '@/utils/common.js'
+    export default {
+        props: {
+            personList: {
+                type: Array,
+                defluat: () => []
+            },
+            loading: {
+                type: Boolean,
+                defluat: false
+            },
+        },
+     
+        data() {
+            return{
+                loadings:true
+            }
+        },
+        methods:{
+            liClick(e){
+                this.$emit('chatFn',e)
+            }
+        }
+    }
+</script>
+<style lang="scss" scoped>
+*{ padding: 0;
+            margin: 0;}
+    .list {
+        overflow-y:scroll;
+       height: 708px;
+      ::-webkit-scrollbar {
+                display: none;
+            }
+
+        /deep/ .el-loading-spinner{margin-top: 20px;}
+       .fr{float:right;}
+       .gray{color: #999;}
+       .padt10{padding-top: 10px;}
+        ul li {
+            padding: 10px;
+            overflow: hidden;
+            border-bottom: 1px solid #efefef;
+            cursor: pointer;
+            p{white-space:nowrap;
+            overflow:hidden;
+            text-overflow:ellipsis;}
+            :hover{ background: #efefef;}
+            img {
+                width: 40px;
+                height: 40px;
+                float: left
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/linkwe-ui/src/views/conversation/content.vue b/linkwe-ui/src/views/conversation/content.vue
index a242b8636..0ce173107 100644
--- a/linkwe-ui/src/views/conversation/content.vue
+++ b/linkwe-ui/src/views/conversation/content.vue
@@ -1,17 +1,16 @@
 <template>
     <div class="content">
         <el-tabs v-model="activeName" @tab-click="handleClick">
-            <el-tab-pane label="根据员工检测" name="1">
+            <el-tab-pane label="员工检索" name="1">
                <employee></employee>
             </el-tab-pane>
-            <el-tab-pane label="根据用户检测" name="2">
-              <user></user>
+            <el-tab-pane label="客户检索" name="2" >
+              <user v-if="activeName==2"></user>
             </el-tab-pane>
-            <el-tab-pane label="全局检测" name="3">
-              <role></role>
+            <el-tab-pane label="全局检索" name="3">
+              <role v-if="activeName==3"></role>
             </el-tab-pane>
         </el-tabs>
-
     </div>
 </template>
 <script>
@@ -33,3 +32,6 @@ import role from './page/roleTest.vue'
         }
     }
 </script>
+<style scoped>
+ *{margin: 0;padding: 0;}
+</style>
diff --git a/linkwe-ui/src/views/conversation/page/employeeTest.vue b/linkwe-ui/src/views/conversation/page/employeeTest.vue
index c9bedf3f9..4fcf3540f 100644
--- a/linkwe-ui/src/views/conversation/page/employeeTest.vue
+++ b/linkwe-ui/src/views/conversation/page/employeeTest.vue
@@ -10,8 +10,8 @@
                     </div>
                 </div>
                 <div class="ct_box ct_boxFirst">
-                    <el-tree class="filter-tree" :data="data" :filter-node-method="filterNode" ref="tree"
-                        @node-click="handleNodeClick">
+                    <el-tree class="filter-tree" :data="treeData" :props="defaultProps" :filter-node-method="filterNode"
+                        ref="tree" @node-click="handleNodeClick" :default-expand-all="true">
                     </el-tree>
                 </div>
             </el-col>
@@ -20,139 +20,176 @@
                     <div class="hd_name">{{talkName}}</div>
                 </div>
                 <div class="hd_tabs">
-                    <el-tabs v-model="activeName">
+                    <el-tabs v-model="activeName" @tab-click="tabClick(true)">
                         <el-tab-pane label="内部联系人" name="0">
                             <div class="ct_box">
-                                <!-- 应该是类似聊天记录的  后期弄成组件 看 -->
-                                暂无联系人
+                                <list v-if="activeName==0" :personList="personList" :loading="loading" @chatFn='chatFn'>
+                                </list>
                             </div>
                         </el-tab-pane>
                         <el-tab-pane label="外部联系人" name="1">
-                            <div class="ct_box">
-                                <!-- ！ -->
-                                暂无联系人
-                            </div>
+                            <list v-if="activeName==1" :personList="personList" :loading="loading" @chatFn='chatFn'>
+                            </list>
                         </el-tab-pane>
                         <el-tab-pane label="群聊" name="2">
-                            <div class="ct_box">
-                                <!-- ！ -->
-                                暂无联系人
-                            </div>
+                          
                         </el-tab-pane>
+
                     </el-tabs>
                 </div>
             </el-col>
             <el-col :span="12">
                 <div class="hd_box">
-                    <div class="hd_name hd_nameRi">下载会话</div>
+                    <div class="hd_name"><span v-if="chat.receiveWeCustomer"> 与{{chat.receiveWeCustomer.name}}的聊天</span>
+                        <span class="fr hd_nameRi">下载会话</span></div>
                 </div>
                 <div class=" hd_tabthree">
-                    <el-tabs v-model="activeNameThree">
+                    <el-tabs v-model="activeNameThree" @tab-click="activeNameThreeClick()">
                         <el-tab-pane label="全部" name="0">
                             <div class="ct_box">
                                 <div class="hds_time">
-                                    <el-date-picker v-model="takeTime" type="date" placeholder="选择日期">
+                                    <el-date-picker v-model="takeTime" type="datetimerange" format='yyyy-MM-dd'
+                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+                                        align="right" @change="activeNameThreeClick">
                                     </el-date-picker>
                                 </div>
+                                <chat :allChat="allChat" v-if="allChat.length>=1"></chat>
+                                <el-pagination background v-if="allChat.length>=1" layout="prev, pager, next"
+                                    class="pagination" :current-page="currentPage" @current-change="currentChange"
+                                    :total="total">
+                                </el-pagination>
                             </div>
                         </el-tab-pane>
                         <el-tab-pane label="图片及视频" name="1">
                             <div class="ct_box">
                                 <div class="hds_time">
-                                    <el-date-picker v-model="takeTime" type="date" placeholder="选择日期">
+                                    <el-date-picker v-model="takeTime" type="datetimerange" format='yyyy-MM-dd'
+                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+                                        align="right" @change="activeNameThreeClick">
                                     </el-date-picker>
                                 </div>
+                                <chat :allChat="allChatImg" v-if="allChatImg.length>=1"></chat>
+                                <el-pagination background v-if="allChatImg.length>=1" class="pagination"
+                                    layout="prev, pager, next" :total="total" @current-change="currentChange"
+                                    :current-page="currentPage">
+                                </el-pagination>
                             </div>
                         </el-tab-pane>
-                        <el-tab-pane label="文件" name="3">
+                        <el-tab-pane label="文件" name="2">
                             <div class="ct_box">
                                 <div class="hds_time">
-                                    <el-date-picker v-model="takeTime" type="date" placeholder="选择日期">
+                                    <el-date-picker v-model="takeTime" type="datetimerange" format='yyyy-MM-dd'
+                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+                                        align="right" @change="activeNameThreeClick">
                                     </el-date-picker>
                                 </div>
-                                <el-table :data="fileData" stripe style="width: 100%" :header-cell-style="{background:'#fff'}">
-                                    <el-table-column prop="date" label="类型">
+                                <el-table :data="allFile" stripe style="width: 100%"
+                                    :header-cell-style="{background:'#fff'}">
+                                    <el-table-column prop="msgtype" label="类型">
                                     </el-table-column>
-                                    <el-table-column prop="name" label="名称">
+                                    <el-table-column label="名称">
+                                        <template slot-scope="scope">
+                                            {{scope.row.file.filename}}
+                                        </template>
                                     </el-table-column>
-                                    <el-table-column prop="address" label="大小">
+                                    <el-table-column label="大小">
+                                        <template slot-scope="scope">
+                                            {{filterSize(scope.row.file.filesize)}}
+                                        </template>
                                     </el-table-column>
-                                    <el-table-column prop="address" label="来源">
+                                    <el-table-column prop="action" label="来源">
+                                        <template slot-scope="scope">
+                                            {{scope.row.tolist[0]}}
+                                        </template>
                                     </el-table-column>
-                                    <el-table-column prop="address" label="操作">
+                                    <el-table-column prop="action" label="操作">
+                                        <template slot-scope="scope">
+                                            <el-button type="text" size="small">下载</el-button>
+                                            <el-button type="text" size="small">查看</el-button>
+                                        </template>
                                     </el-table-column>
                                 </el-table>
                             </div>
                         </el-tab-pane>
-                        <el-tab-pane label="链接" name="4">
+                        <el-tab-pane label="链接" name="3">
                             <div class="ct_box">
                                 <div class="hds_time">
-                                    <el-date-picker v-model="takeTime" type="date" placeholder="选择日期">
+                                    <el-date-picker v-model="takeTime" type="datetimerange" format='yyyy-MM-dd'
+                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+                                        align="right" @change="activeNameThreeClick">
                                     </el-date-picker>
                                 </div>
                             </div>
                         </el-tab-pane>
-                        <el-tab-pane label="语音通话" name="5">
+                        <el-tab-pane label="语音通话" name="4">
                             <div class="ct_box">
                                 <div class="hds_time">
-                                    <el-date-picker v-model="takeTime" type="date" placeholder="选择日期">
-                                    </el-date-picker>                                
+                                    <el-date-picker v-model="takeTime" type="datetimerange" format='yyyy-MM-dd'
+                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+                                        align="right" @change="activeNameThreeClick">
+                                    </el-date-picker>
                                 </div>
-                                 <el-table :data="fileData" stripe style="width: 100%" :header-cell-style="{background:'#fff'}">
-                                        <el-table-column prop="date" label="发起人">
-                                        </el-table-column>
-                                        <el-table-column prop="name" label="通话时间">
-                                        </el-table-column>
-                                        <el-table-column prop="address" label="时长">
-                                        </el-table-column>
-                                        <el-table-column prop="address" label="操作">
-                                        </el-table-column>
-                                    </el-table>
+                                <el-table :data="fileData" stripe style="width: 100%"
+                                    :header-cell-style="{background:'#fff'}">
+                                    <el-table-column prop="date" label="发起人">
+                                    </el-table-column>
+                                    <el-table-column prop="name" label="通话时间">
+                                    </el-table-column>
+                                    <el-table-column prop="address" label="时长">
+                                    </el-table-column>
+                                    <el-table-column prop="address" label="操作">
+                                    </el-table-column>
+                                </el-table>
                             </div>
                         </el-tab-pane>
                     </el-tabs>
                 </div>
             </el-col>
         </el-row>
-
     </div>
 </template>
 <script>
+    import list from '../component/list.vue'
+    import chat from '../component/chat.vue'
+    import * as api from '@/api/organization'
+    import {
+        content
+    } from '@/api/content.js'
+    import {
+        yearMouthDay
+    } from '@/utils/common.js'
     export default {
+        components: {
+            list,
+            chat
+        },
         data() {
             return {
                 employAmount: 1,
+                employId: '',
                 employName: '',
                 talkName: '',
-                data: [{
-                    id: 1,
-                    label: '一级 1',
-                    children: [{
-                        id: 4,
-                        label: '二级 1-1',
-                        children: [{
-                            id: 9,
-                            label: '三级 1-1-1'
-                        }, {
-                            id: 10,
-                            label: '三级 1-1-2'
-                        }]
-                    }]
-                }, {
-                    id: 3,
-                    label: '一级 3',
-                    children: [{
-                        id: 7,
-                        label: '二级 3-1'
-                    }, {
-                        id: 8,
-                        label: '二级 3-2'
-                    }]
-                }],
+                treeData: [],
+                defaultProps: {
+                    label: 'name',
+                    children: 'children',
+                },
                 activeName: "1",
-                activeNameThree: '1',
+                activeNameThree: '0',
                 takeTime: '',
-                fileData: []
+                fileData: [],
+                chat: {},
+
+                personList: [],
+                loading: false,
+                allChat: [], //全部聊天记录
+                allChatImg: [], //图片，
+                allVoice: [],
+                allFile: [],
+                allLInk: [],
+                //分页
+                total: '',
+                currentPage: ''
             };
         },
         watch: {
@@ -160,15 +197,136 @@
                 this.$refs.tree.filter(val);
             }
         },
+        mounted() {
+            this.getTree()
+        },
         methods: {
+            filterSize(size) {
+                if (!size) return '';
+                if (size < this.pow1024(1)) return size + ' B';
+                if (size < this.pow1024(2)) return (size / this.pow1024(1)).toFixed(2) + ' KB';
+                if (size < this.pow1024(3)) return (size / this.pow1024(2)).toFixed(2) + ' MB';
+                if (size < this.pow1024(4)) return (size / this.pow1024(3)).toFixed(2) + ' GB';
+                return (size / pow1024(4)).toFixed(2) + ' TB'
+            },
+            pow1024(num) {
+                return Math.pow(1024, num)
+            },
+            currentChange(e) {
+                this.currentPage = e
+                this.activeNameThreeClick(true)
+            },
+            activeNameThreeClick(page) {
+                if (!!!page) {
+                    this.currentPage = 1
+                }
+                if (this.chat && this.chat.receiveWeCustomer) {
+                    let msgType = ''
+                    if (this.activeNameThree == 0) {
+                        msgType = ''
+                    } else if (this.activeNameThree == 1) {
+                        msgType = 'image'
+                    } else if (this.activeNameThree == 2) {
+                        msgType = 'file'
+                    } else if (this.activeNameThree == 3) {
+                        msgType = 'link'
+                    } else if (this.activeNameThree == 4) {
+                        msgType = 'voice'
+                    }
+
+                    let query = {
+                        fromId: this.employId,
+                        receiveId: this.chat.receiveId,
+                        msgType,
+                        pageSize: '10',
+                        pageNum: this.currentPage,
+                        beginTime: this.takeTime ? yearMouthDay(this.takeTime[0]) : "",
+                        endTime: this.takeTime ? yearMouthDay(this.takeTime[1]) : '',
+                    }
+                    content.chatList(query).then(res => {
+                        this.total = Number(res.total)
+                        if (this.activeNameThree == 0) {
+                            return this.allChat = res.rows
+                        }
+                        if (this.activeNameThree == 1) {
+                            return this.allChatImg = res.rows
+                        }
+                        if (this.activeNameThree == 2) {
+                            return this.allFile = res.rows
+                        }
+                        if (this.activeNameThree == 3) {
+                            return this.allLInk = res.rows
+                        }
+                        if (this.activeNameThree == 4) {
+                            return this.allVoice = res.rows
+                        }
+                    })
+                }
+            },
+            chatFn(data) {
+                this.chat = data;
+                if (data.receiveWeCustomer) {
+                    this.activeNameThreeClick()
+                }
+            },
+            getTree() {
+                api.getTree().then(({
+                    data
+                }) => {
+                    this.treeData = this.handleTree(data)
+                    this.handleNodeClick(this.treeData[0], true)
+                })
+            },
+            tabClick(flag) {
+                this.personList = []
+                if (!this.employId) {
+                    return
+                }
+                if (flag) {
+                    this.loading = true
+                }
+                content.getTree({
+                    fromId: this.employId,
+                    searchType: this.activeName
+                }).then(({
+                    rows
+                }) => {
+                    this.loading = false
+                    this.personList = rows
+                }).catch(err => {
+                    this.loading = false
+                })
+            },
             filterNode(value, data) {
+                console.log(value, data)
                 if (!value) return true;
-                return data.label.indexOf(value) !== -1;
+                return data.name.indexOf(value) !== -1;
             },
-            handleNodeClick(data) {
-                if (!data.children) {
-                    console.log(data.label)
-                    this.talkName = data.label
+            handleNodeClick(data, add) {
+                if (!data.gender) {
+                    let querys = {
+                        pageNum: '1',
+                        pageSize: '999',
+                        isActivate: '4',
+                        department: data.id
+                    }
+                    api.getList(querys).then(({
+                        rows
+                    }) => {
+                        if (add == true) {
+                            console.log(this.treeData, data, rows)
+                            this.treeData[0].children = data.children.concat(rows)
+                            return
+                        } else {
+                            const newChild = rows;
+                            this.$set(data, 'children', []);
+                            data.children = rows
+                        }
+                    })
+                } else {
+                    this.talkName = data.name;
+                    this.employId = data.userId;
+                    this.tabClick()
                 }
             }
         }
@@ -176,8 +334,17 @@
     }
 </script>
 <style lang="scss" scoped>
-    /deep/ #tab-0 {
-        text-indent: 15px;
+    * {
+        margin: 0;
+        padding: 0;
+    }
+
+    /deep/.el-tabs__nav-scroll {
+        padding-left: 15px;
+    }
+
+    .fr {
+        float: right;
     }
 
     .borderR {
@@ -194,6 +361,10 @@
 
         .hd_tabs {
             background: #fff;
+
+            /deep/ .el-tabs__header {
+                margin: 0;
+            }
         }
 
         .hd_tabthree {
@@ -219,25 +390,33 @@
         }
 
         .ct_boxFirst {
-            height: 720px;
+            height: 707px !important;
         }
 
         .ct_box {
             background: white;
-            min-height: 710px;
+            height: 710px;
             padding: 10px;
             overflow-y: scroll;
+            border-bottom: 1px solid #efefef;
             color: #999;
             text-align: center;
-
             ::-webkit-scrollbar {
                 display: none;
             }
 
             .hds_time {
-                float: left;
+                text-align: left;
+                width: 100%;
                 padding: 10px 0;
             }
+
         }
     }
+    .pagination {
+        padding: 10px 0;
+        height: 30px;
+
+        float: left;
+    }
 </style>
\ No newline at end of file
diff --git a/linkwe-ui/src/views/conversation/page/roleTest.vue b/linkwe-ui/src/views/conversation/page/roleTest.vue
index 47b0098f3..8ac439b0c 100644
--- a/linkwe-ui/src/views/conversation/page/roleTest.vue
+++ b/linkwe-ui/src/views/conversation/page/roleTest.vue
@@ -3,8 +3,8 @@
         <el-form :inline="true" :model="form" class="demo-form-inline">
             <el-row>
                 <el-form-item label="员工名称">
-                    <el-select v-model="form.Ename" placeholder="员工名称" style="width:300px">
-                    </el-select>
+                    <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>
@@ -15,14 +15,16 @@
                     <el-input v-model="form.Scontent" placeholder="查找内容" style="width:300px"></el-input>
                 </el-form-item>
                 <el-form-item label="时间范围">
-                    <el-time-picker is-range v-model="form.Stime" range-separator="至" start-placeholder="开始时间"
-                        end-placeholder="结束时间" placeholder="选择时间范围">
-                    </el-time-picker>
+               
+                    <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">查询</el-button>
+                    <el-button type="primary" @click="init">查询</el-button>
                 </el-form-item>
                 <el-form-item>
                     <el-button>导出列表</el-button>
@@ -31,36 +33,64 @@
         </el-form>
         <div class="content">
             <el-table :data="fileData" stripe style="width: 100%" :header-cell-style="{background:'#fff'}">
-                <el-table-column prop="date" label="发送者" width="200">
+                <el-table-column prop="date" label="发送者" width="300">
+                    <template slot-scope="scope">
+                        {{scope.row.from}}
+                    </template>
                 </el-table-column>
                 <el-table-column prop="name" label=" 内容">
+                    <template slot-scope="scope" v-if="scope.row.text">
+                        {{scope.row.text.content}}
+                    </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-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">
                             </el-option>
                         </el-select>
-                         </template>
-                   
+                    </template>
+                    <template slot-scope="scope">
+                        <div class="pers">
+                            <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 class="red"></span>
+                                已撤回
+                            </span>
+                            <span v-else-if="scope.row.action=='switch'">
+                                <span class="gay"></span>
+                                企业日志
+                            </span>
+                        </div>
+                    </template>
                 </el-table-column>
                 <el-table-column prop="address" label="发送时间" width="200">
+                    <template slot-scope="scope" v-if="scope.row.text">
+                        {{parseTime(scope.row.msgtime)}}
+                    </template>
                 </el-table-column>
             </el-table>
-            <el-pagination
-  :page-size="20"
-  style="padding:10px"
-  :pager-count="11"
-  layout="prev, pager, next"
-  :total="1000">
-</el-pagination>
+            <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/content.js'
+    import {
+        yearMouthDay,
+        parseTime
+    } from '@/utils/common.js'
     export default {
         data() {
             return {
@@ -70,46 +100,79 @@
                     Scontent: '',
                     Stime: ''
                 },
+                currentPage: 1,
+                total: 0,
+                ac:'',
                 fileData: [],
-                floorRange:'全部',
-                 displayOptions: [{
-                        value: "0",
+                floorRange: '全部',
+                displayOptions: [{
+                        value: "",
                         label: "全部"
                     },
                     {
-                        value: "1",
+                        value: "send",
                         label: "已发送"
                     },
                     {
-                        value: "2",
+                        value: "recall",
                         label: "已撤回"
                     },
                     {
-                        value: "3",
+                        value: "switch",
                         label: "切回企业日志"
                     }
                 ]
             }
         },
-        methods:{
-            chechName(e){
-                if(e==0){
-                    this.floorRange='全部'
+        mounted() {
+            this.init()
+        },
+        methods: {
+            currentChange(e) {
+                this.currentPage = e
+                this.init(true)
+            },
+            init(flag) {
+                if (!!!flag) {
+                    this.currentPage = 1
+                }
+                let query = {
+                    userName: this.form.Ename,
+                    customerName: this.form.Cname,
+                    keyWord: 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
                 }
-                else if(e==1){
-                    this.floorRange='已发送'
-                }else if(e==2){
-                    this.floorRange='已撤回'
-                }else{
-                      this.floorRange='切回企业日志'
+                content.getChatAllList(query).then(res => {
+                    console.log(res)
+                    this.fileData = res.rows;
+                    this.total = Number(res.total)
+                })
+            },
+            chechName(e) {           
+                if (e == 0) {
+                    this.floorRange = '全部'
+                    this.ac=''
+                } else if (e == 1) {
+                    this.floorRange = '已发送'
+                    this.ac='send'
+                } else if (e == 2) {
+                    this.floorRange = '已撤回'
+                     this.ac='recall'
+                } else {
+                    this.floorRange = '切回企业日志'
+                       this.ac='switch'
                 }
+           this.init()
             }
         }
     }
 </script>
 <style lang="scss" scoped>
     .demo-form-inline {
-        background: #efefef;
+        background: #f1f1f1;
         padding: 18px 10px 0 10px;
     }
 
@@ -117,7 +180,46 @@
         margin-top: 15px;
         padding: 10px;
     }
+
+    .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;
+        }
+    }
+
+
     .noborder {
-        /deep/ .el-input--mini .el-input__inner{width: 2px;border:none}
+        /deep/ .el-input--mini .el-input__inner {
+            width: 2px;
+            border: none
+        }
     }
 </style>
\ No newline at end of file
diff --git a/linkwe-ui/src/views/conversation/page/userTest.vue b/linkwe-ui/src/views/conversation/page/userTest.vue
index 72f5ed173..a1f85c24c 100644
--- a/linkwe-ui/src/views/conversation/page/userTest.vue
+++ b/linkwe-ui/src/views/conversation/page/userTest.vue
@@ -11,12 +11,16 @@
                 </div>
                 <div class="ct_box ct_boxFirst">
                     <ul>
-                        <li v-for="(i,t) in 49" :key="t" @click="personCheck(i,t)" :class="{'liActive':t==personIndex}">
-                            <el-row :gutter="20">
-                                <el-col :span="4"> <img
-                                        src="http://wx.qlogo.cn/mmhead/pburdzLK7PV4ZRaUcsb0X4ssicO9TqpQHZa26oHRvb1ONZT1r3dI0Aw/0"
-                                        alt=""></el-col>
-                                <el-col :span="16"><span style="line-height:40px">{{i}}</span></el-col>
+                        <!-- -->
+                        <li v-for="(i,t) in CList" :key="t"  @click="personCheck(i,t)"  :class="{'liActive':t==personIndex}">
+                            <el-row :gutter="20" style="   padding: 10px 0;margin:0">
+                                <el-col :span="4">
+                                     <img
+                                        v-if="i.avatar"
+                                        :src="i.avatar"
+                                        alt="头像">
+                                </el-col>
+                                <el-col :span="16" v-if="i"><span style="line-height:40px">{{i.name}}</span></el-col>
                             </el-row>
                         </li>
                     </ul>
@@ -30,78 +34,113 @@
                         </el-input>
                     </div>
                 </div>
-                 <div class="ct_box
-                 "> <div class="hd_tabs">
+                 
+                 <div class="hd_tabs">
                     <el-tabs v-model="activeName">
-                        <el-tab-pane label="单聊" name="0">
-                            <div class="ct_box">                         
-                                暂无联系人
-                            </div>
+                        <el-tab-pane label="单聊" name="0">                                           
+                           <div class="hd_tabs_content">
+                                <!-- <list v-if="activeName==0" :personList="personList" :loading="loading" >
+                                </list> -->
+                           </div>
                         </el-tab-pane>
-                        <el-tab-pane label="群聊" name="1">
-                            <div class="ct_box">
-                                暂无群聊记录
-                            </div>
+                        <el-tab-pane label="群聊" name="2">
+                            <list v-if="activeName==2" :personList="personList" :loading="loading"  @chatFn="chatFn">
+                                </list>
                         </el-tab-pane>                  
                     </el-tabs>
-                </div></div>
+                </div>
+                
            
             </el-col>
             <el-col :span="12">
                 <div class="hd_box">
-                    <div class="hd_name hd_nameRi">下载会话</div>
+                   <div class="hd_name"><span v-if="chatData&&chatData.finalChatContext">与{{chatData.finalChatContext.roomInfo.name}} 的聊天</span>
+                  <span class="fr hd_nameRi">下载会话</span></div>
                 </div>
                 <div class=" hd_tabthree">
-                    <el-tabs v-model="activeNameThree">
-                        <el-tab-pane label="全部" name="0">
+                    <el-tabs v-model="activeNameThree" @tab-click="activeNameThreeClick()">
+                            <el-tab-pane label="全部" name="0">
                             <div class="ct_box">
                                 <div class="hds_time">
-                                    <el-date-picker v-model="takeTime" type="date" placeholder="选择日期">
+                                    <el-date-picker v-model="takeTime" type="datetimerange" format='yyyy-MM-dd'
+                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+                                        align="right" @change="activeNameThreeClick">
                                     </el-date-picker>
                                 </div>
+                                <chat :allChat="allChat" v-if="allChat.length>=1"></chat>
+                                <el-pagination background v-if="allChat.length>=1" layout="prev, pager, next"
+                                    class="pagination" :current-page="currentPage" @current-change="currentChange"
+                                    :total="total">
+                                </el-pagination>
                             </div>
                         </el-tab-pane>
                         <el-tab-pane label="图片及视频" name="1">
                             <div class="ct_box">
                                 <div class="hds_time">
-                                    <el-date-picker v-model="takeTime" type="date" placeholder="选择日期">
+                                    <el-date-picker v-model="takeTime" type="datetimerange" format='yyyy-MM-dd'
+                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+                                        align="right" @change="activeNameThreeClick">
                                     </el-date-picker>
                                 </div>
+                                <chat :allChat="allChatImg" v-if="allChatImg.length>=1"></chat>
+                                <el-pagination background v-if="allChatImg.length>=1" class="pagination"
+                                    layout="prev, pager, next" :total="total" @current-change="currentChange"
+                                    :current-page="currentPage">
+                                </el-pagination>
                             </div>
                         </el-tab-pane>
-                        <el-tab-pane label="文件" name="3">
+                        <el-tab-pane label="文件" name="2">
                             <div class="ct_box">
                                 <div class="hds_time">
-                                    <el-date-picker v-model="takeTime" type="date" placeholder="选择日期">
+                                    <el-date-picker v-model="takeTime" type="datetimerange" format='yyyy-MM-dd'
+                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+                                        align="right" @change="activeNameThreeClick">
                                     </el-date-picker>
                                 </div>
-                                <el-table :data="fileData" stripe style="width: 100%"
+                                <el-table :data="allFile" stripe style="width: 100%"
                                     :header-cell-style="{background:'#fff'}">
-                                    <el-table-column prop="date" label="类型">
+                                    <el-table-column prop="msgtype" label="类型">
                                     </el-table-column>
-                                    <el-table-column prop="name" label="名称">
+                                    <el-table-column label="名称">
+                                        <template slot-scope="scope">
+                                            {{scope.row.file.filename}}
+                                        </template>
                                     </el-table-column>
-                                    <el-table-column prop="address" label="大小">
+                                    <el-table-column label="大小">
+                                        <template slot-scope="scope">
+                                            {{filterSize(scope.row.file.filesize)}}
+                                        </template>
                                     </el-table-column>
-                                    <el-table-column prop="address" label="来源">
+                                    <el-table-column prop="action" label="来源">
+                                        <template slot-scope="scope">
+                                            {{scope.row.tolist[0]}}
+                                        </template>
                                     </el-table-column>
-                                    <el-table-column prop="address" label="操作">
+                                    <el-table-column prop="action" label="操作">
+                                        <template slot-scope="scope">
+                                            <el-button type="text" size="small">下载</el-button>
+                                            <el-button type="text" size="small">查看</el-button>
+                                        </template>
                                     </el-table-column>
                                 </el-table>
                             </div>
                         </el-tab-pane>
-                        <el-tab-pane label="链接" name="4">
+                        <el-tab-pane label="链接" name="3">
                             <div class="ct_box">
                                 <div class="hds_time">
-                                    <el-date-picker v-model="takeTime" type="date" placeholder="选择日期">
+                                    <el-date-picker v-model="takeTime" type="datetimerange" format='yyyy-MM-dd'
+                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+                                        align="right" @change="activeNameThreeClick">
                                     </el-date-picker>
                                 </div>
                             </div>
                         </el-tab-pane>
-                        <el-tab-pane label="语音通话" name="5">
+                        <el-tab-pane label="语音通话" name="4">
                             <div class="ct_box">
                                 <div class="hds_time">
-                                    <el-date-picker v-model="takeTime" type="date" placeholder="选择日期">
+                                    <el-date-picker v-model="takeTime" type="datetimerange" format='yyyy-MM-dd'
+                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+                                        align="right" @change="activeNameThreeClick">
                                     </el-date-picker>
                                 </div>
                                 <el-table :data="fileData" stripe style="width: 100%"
@@ -125,35 +164,147 @@
     </div>
 </template>
 <script>
+    import list from '../component/curList.vue'
+    import chat from '../component/chat.vue'
+import {
+        content
+    } from '@/api/content.js'
+     import {
+        yearMouthDay
+    } from '@/utils/common.js'
     export default {
+        components:{
+            list,chat
+        },
         data() {
             return {
                 employAmount: 1,
                 employName: '',
                 talkName: '',
                 personIndex: '-1',
-                activeName: "1",
-                activeNameThree: '1',
+                activeName: "2",
+                activeNameThree: '0',
                 takeTime: '',
-                fileData: []
+                fileData: [],
+                CList:[],
+                personList:[],
+                loading:false,
+                employId:'',
+                chatData:{},
+
+                allChat:[],
+                  allChatImg:[],
+                  allFile:[],
+                  allLInk:[],
+                  allVoice:[],
+                //分页
+                currentPage:1,
+                total:0
+              
             };
         },
-
+        
         methods: {
-            personCheck(name, e) {
-                this.personIndex = e
-                this.talkName = name
+            chatFn(data){
+                this.chatData=data
+                if (data.fromId) {
+                  this.activeNameThreeClick()
+                }
+            },
+            currentChange(){
+                this.currentPage = e
+                this.activeNameThreeClick(true)
+            },
+            personCheck(data, e) {
+                  this.personIndex = e
+                  this.talkName = data.name;
+                  this.employId=data.externalUserid
+                  this.getChatList() 
+            },
+            getChatList(flag){
+              if (!this.employId) {
+                    return
+                }
+                if (flag) {
+                    this.loading = true
+                }
+                content.getTree({
+                    fromId: this.employId,
+                    searchType: this.activeName
+                }).then(({
+                    rows
+                }) => {
+                    console.log(rows)
+                     this.loading = false
+                    this.personList = rows
+                }).catch(err => {
+                    this.loading = false
+                })
+            },
+            activeNameThreeClick(page){
+                  if (!!!page) {
+                    this.currentPage = 1
+                }
+                  let msgType = ''
+                    if (this.activeNameThree == 0) {
+                        msgType = ''
+                    } else if (this.activeNameThree == 1) {
+                        msgType = 'image'
+                    } else if (this.activeNameThree == 2) {
+                        msgType = 'file'
+                    } else if (this.activeNameThree == 3) {
+                        msgType = 'link'
+                    } else if (this.activeNameThree == 4) {
+                        msgType = 'voice'
+                    }
+                  let query = {
+                        fromId: this.chatData.fromId,
+                        receiveId: this.chatData.roomId,
+                        msgType,
+                        pageSize: '10',
+                        pageNum: this.currentPage,
+                        beginTime: this.takeTime ? yearMouthDay(this.takeTime[0]) : "",
+                        endTime: this.takeTime ? yearMouthDay(this.takeTime[1]) : '',
+                    }
+                     content.chatList(query).then(res => {
+                        this.total = Number(res.total)
+                        console.log(res,'chatData')
+                        if (this.activeNameThree == 0) {
+                            return this.allChat = res.rows
+                        }
+                        if (this.activeNameThree == 1) {
+                            return this.allChatImg = res.rows
+                        }
+                        if (this.activeNameThree == 2) {
+                            return this.allFile = res.rows
+                        }
+                        if (this.activeNameThree == 3) {
+                            return this.allLInk = res.rows
+                        }
+                        if (this.activeNameThree == 4) {
+                            return this.allVoice = res.rows
+                        }
+                    })
+            },
+            customerList(){
+            content.listByCustomer().then(res=>{
+               res.rows= res.rows.filter((a,b)=>{ return a&&a.name})    
+                this.CList=res.rows  
+                this.employAmount=res.total;
+           })
             }
-
+        },
+        mounted(){
+           this.customerList()
         }
 
     }
 </script>
 <style lang="scss" scoped>
-    /deep/ #tab-0 {
-        text-indent: 15px;
+    /deep/.el-tabs__nav-scroll {
+        padding-left: 15px;
     }
-
+.fr{float:right;}
     .borderR {
         border-right: 2px solid #ccc;
     }
@@ -184,7 +335,7 @@
             font-size: 18px;
             min-height: 20px;
         }
-
+.hd_tabs_content{ width: 100%;min-height: 653px;border-bottom: 1px solid #efefef; }
         .hd_nameRi {
             color: #199ed8;
             text-align: right;
@@ -193,12 +344,13 @@
         }
 
         .ct_boxFirst {
-            height: 720px;
+            height: 700px;
         }
 
         .ct_box {
             background: white;
-            min-height: 710px;
+            border-bottom: 1px solid #efefef;
+            min-height: 709px;
             padding: 10px;
             overflow-y: scroll;
             color: #999;
@@ -214,12 +366,11 @@
             }
 
             ul li {
-                margin-bottom: 3px;
-                padding: 10px 20px;
+             
                 text-align: left;
                 cursor: pointer;
                 border-bottom: 1px solid #efefef;
-
+                 :hover{ background: #efefef;}
                 img {
                     width: 40px;
                 }
@@ -229,13 +380,20 @@
 
             .liActive {
                 background: lightblue !important;
-                color: #fff;
+                color: #199ed8;
             }
 
             .hds_time {
-                float: left;
+                text-align: left;
+                 width: 100%;
                 padding: 10px 0;
             }
         }
+       
+    }
+      .pagination {
+        padding: 10px 0;
+        height: 30px;
+        float: left;
     }
 </style>
\ No newline at end of file
-- 
Gitee