From b306a519f311b676b89e4a5d0731465407d3f1d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=99=E8=BF=90=E6=A8=A1?= <1724894114@qq.com>
Date: Wed, 20 Nov 2024 20:02:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=A2=E6=88=B7=E7=AB=AF?=
 =?UTF-8?q?=E5=AE=A2=E6=9C=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/scCustomer/index.vue           | 269 ++++++++++++++++--
 src/style/pages.scss                          |   2 +-
 src/views/personalCenter/index.vue            |   2 +-
 src/views/serveView/components/commonPage.vue |  64 +++--
 src/views/serveView/components/footerPage.vue |   3 +-
 src/views/serveView/index.vue                 |   2 +-
 src/views/service/infoQuery.vue               |  10 +-
 7 files changed, 291 insertions(+), 61 deletions(-)

diff --git a/src/components/scCustomer/index.vue b/src/components/scCustomer/index.vue
index ff4cb73..50f617b 100644
--- a/src/components/scCustomer/index.vue
+++ b/src/components/scCustomer/index.vue
@@ -10,8 +10,12 @@
 				<div class="bodyMain affix-container">
 					<el-scrollbar ref="scrollbar" height="100%" @scroll="scroll">
 						<div class="innerRefCom">
-							<div class="tagList" ref="tagList">
-								<div class="tagItem" v-for="(item,index) in tagList" :key="index" @click="typeActive(item)">{{item.label}}</div>
+							<div class="tagRow" ref="tagList">
+								<el-scrollbar height="100%">
+									<div class="tagList">
+										<div class="tagItem" v-for="(item,index) in tagList" :key="index" @click="typeActive(item)">{{item.label}}</div>
+									</div>
+								</el-scrollbar>
 							</div>
 							<div class="msgList">
 								<div class="msgItem" :class="user_id != item.to_user_id?'msgRightItem':''" v-for="(item,index) in msgList" :key="index">
@@ -26,9 +30,25 @@
 											{{item.from_user && item.from_user.name?item.from_user.name:'匿名'}}
 											<span class="time" v-if="user_id === item.to_user_id">{{item.created_at}}</span>
 										</div>
-										<div class="textCom">
+										<div class="textCom" v-if="item.send_message_type === 1">
 											<div v-html="item.to_message"></div>
 										</div>
+										<div class="textCom textComNoneBack" v-if="item.send_message_type === 2">
+											<div :class="user_id != item.to_user_id?'fileRightItem':'fileLeftItem'" v-for="(em,ind) in item.to_message_list" :key="ind">
+												<span class="imgView" :class="user_id != item.to_user_id?'imgViewRight':''" v-if="['png','jpg','gif','jpeg'].indexOf(em.file_type || em.extension) !=-1">
+													<el-icon class="loadingIcon" size="30" v-if="user_id != item.to_user_id && em.showLoading" style="color:#333;padding: 4px;"><el-icon-Loading/></el-icon>
+													<el-image style="width: 140px;height: 100px;" fit="contain" lazy :src="em.file?em.file:em" preview-teleported :preview-src-list="[em.file?em.file:em]"></el-image>
+													<el-icon class="loadingIcon" size="30" v-if="user_id === item.to_user_id && em.showLoading" style="color:#333;padding: 4px;"><el-icon-Loading/></el-icon>
+												</span>
+												<span class="fileView" v-if="['png','jpg','gif','jpeg'].indexOf(em.file_type || em.extension) ===-1" @click="linkFile(em)">
+													<fileType size="26px" :fileType="em.extension || em.file_type" />
+													<span class="fileName">{{em.client_file_name?em.client_file_name:'未命名'}}</span>
+												</span>
+												<span class="progressLine" v-if="['png','jpg','gif','jpeg'].indexOf(em.file_type || em.extension) ===-1 && em.showLoading">
+												<el-progress class="exportPopover" :text-inside="true" :show-text="false" :stroke-width="4" :percentage="em.rate" />
+												</span>
+											</div>
+										</div>
 									</div>
 									<div class="avatar" v-if="user_id != item.to_user_id">
 										<el-avatar :size="36" :src="item.from_user.avatar" fit="cover">
@@ -41,22 +61,47 @@
 					</el-scrollbar>
 				</div>
 				<div class="footer">
-					<el-input class="customTextarea" v-model="params.to_message" @keydown="handleKeydown" resize="none" type="textarea" :row="2" placeholder="Shift+Enter换行 请简短描述您的问题"></el-input>
-					<div class="saveBtn" :class="params.to_message!==''?'saveActive':''" @click="sendCustomer">发 送</div>
+					<div class="tagList">
+						<div class="tagItem" @click="uploadFile">
+							<uploadFile ref="uploadFile" @uploadFileSuccess="uploadFileSuccess" title="上传附件"></uploadFile>
+						</div>
+						<div class="tagItem" @click="recordsShow"><el-icon size="18"><sc-icon-Record/></el-icon></div>
+						<div class="tagItem"><el-icon size="18"><sc-icon-Expression/></el-icon></div>
+					</div>
+					<div class="sendView">
+						<el-input class="customTextarea" v-model="params.to_message" @keydown="handleKeydown" resize="none" type="textarea" :rows="3" placeholder="Shift+Enter换行 请简短描述您的问题"></el-input>
+						<div class="saveBtn" :class="params.to_message!==''?'saveActive':''" @click="sendCustomer">发 送</div>
+					</div>
 				</div>
 			</div>
 		</div>
 	</div>
+
+	<customer-records-dialog v-if="dialog.show" ref="recordsMsgDialog" @closed="dialog.show=false"></customer-records-dialog>
 </template>
 
 <script>
 import {eventBus} from "@/utils/eventBus";
-
+import uploadFile from "@/views/service/components/attachmentUpload";
+import customerRecordsDialog from "@/views/service/components/customerRecords"
+import fileType from "@/views/docsManager/fileType"
 export default {
 	name: "index",
+	components:{
+		uploadFile,
+		customerRecordsDialog,
+		fileType
+	},
 	data(){
 		return{
+			dialog:{
+				show:false
+			},
 			customerShow:false,
+			user_info:{
+				name:"随机客服"
+			},
+			page:1,
 			params:{
 				client:2,
 				type:"",
@@ -78,7 +123,6 @@ export default {
 			// 获取新消息
 			eventBus.$on('sockBack', this.getWsResult);
 
-
 			const userInfo = this.$TOOL.data.get("USER_INFO");
 			if(userInfo && userInfo.id){
 				this.user_id = userInfo.id;
@@ -90,22 +134,72 @@ export default {
 	},
 	methods:{
 		getWsResult(res){
-			if(res.data && (res.data.type == 36 || res.data.type == 37)){
+			if(res.data && (res.data.type == 12 || res.data.type == 35 || res.data.type == 36 || res.data.type == 37)){
 				switch(res.data.type) {
-					case 36:
-						this.msgList = res.data.rows;
-						this.scrollDown();
+					case 12:  // 接收进度
+						this.msgList.forEach(item=>{
+							if(item.to_message_list && item.to_message_list.length>0){
+								item.to_message_list.forEach(em=>{
+									if(em.uuid && em.uuid === res.data.file_unique_id){
+										em.showLoading = res.data.rate !== 100;
+										em.rate = res.data.rate;
+									}
+								})
+							}
+						})
 						break;
-					case 37:
+					case 35:  // 接收消息
+						if(res.data.send_message_type === 2 && res.data.data.to_message){
+							res.data.data.to_message_list = JSON.parse(res.data.data.to_message);
+						}
+						if(res.data.data){
+							let obj = {
+								created_at: res.data.from_time,
+								send_message_type: res.data.send_message_type ? res.data.send_message_type : 1,
+								to_user_id: res.data.to_user_id,
+								to_message: res.data.data.to_message,
+								to_message_list: res.data.data.to_message_list,
+								from_user: {
+									avatar: res.data.from_avatar,
+									name: res.data.from_user,
+								}
+							};
+							this.msgList.push(obj);
+							setTimeout(()=>{
+								this.scrollDown();
+							},100);
+						}
+						break;
+					case 36:  // 系统记录
+						res.data.rows.forEach((item)=>{
+							if(item.send_message_type == 2){
+								item.to_message_list = JSON.parse(item.to_message);
+							}
+						})
+						this.msgList = res.data.rows.concat(this.msgList);
+						this.page = res.data.page;
+						setTimeout(()=>{
+							if(res.data.page === res.data.pageSize){
+								this.scrollDown();
+							}
+						},100);
+						break;
+					case 37:  // 随机客服
+						this.user_info = res.data.user.user_info;
 						this.params.to_user_id = res.data.user.uid;
-						this.msgList = [{
+						this.msgList.push({
 							to_user_id:this.user_id,
+							send_message_type:1,
+							created_at:this.$TOOL.dateFormat(new Date()),
 							from_user:{
 								name:res.data.user.user_info.name,
 								avatar:res.data.user.user_info.avatar
 							},
 							to_message:res.data.to_message
-						}]
+						})
+						setTimeout(()=>{
+							this.scrollDown();
+						},100);
 						break;
 					default:
 						break;
@@ -115,9 +209,11 @@ export default {
 		openCustomer(){
 			this.customerShow = !this.customerShow;
 			if(this.customerShow){
-				this.getAssign();
-				this.getRecordList();
 				this.customerType();
+				this.getRecordList();
+
+				this.getAssign();
+
 				// 控制条控制在底部
 				this.scrollDown();
 			}
@@ -129,8 +225,21 @@ export default {
 		async getAssign() {
 			await this.$API.customer.customer.post();
 		},
-		async getRecordList() {
-			await this.$API.customer.list.post();
+		async getRecordList(isPage=false) {
+			let params = {}
+			if(!isPage){
+				params = {
+					to_user_id:'',
+					pageSize:30
+				}
+			}else{
+				params = {
+					to_user_id:'',
+					page:this.page,
+					pageSize:30
+				}
+			}
+			await this.$API.customer.list.post(params);
 		},
 		async customerType() {
 			const res = await this.$API.customer.typeList.post();
@@ -157,6 +266,8 @@ export default {
 				const userInfo = this.$TOOL.data.get("USER_INFO");
 				this.msgList.push({
 					to_user_id:-1,
+					send_message_type:1,
+					created_at:this.$TOOL.dateFormat(new Date()),
 					from_user:{
 						name:userInfo.name,
 						avatar:userInfo.avatar
@@ -168,6 +279,47 @@ export default {
 			}
 		},
 
+		// 上传附件
+		uploadFile(){
+			this.$nextTick(()=>{
+				this.$refs.uploadFile.importFile(this.params);
+			})
+		},
+		uploadFileSuccess(data){
+			const userInfo = this.$TOOL.data.get("USER_INFO");
+			this.msgList.push({
+				to_user_id:-1,
+				send_message_type:2,
+				created_at:this.$TOOL.dateFormat(new Date()),
+				from_user:{
+					name:userInfo.name,
+					avatar:userInfo.avatar
+				},
+				to_message_list:data,
+				to_message:''
+			});
+
+			setTimeout(()=>{
+				this.scrollDown();
+			},100)
+		},
+
+		recordsShow(){
+			this.dialog.show = true;
+			this.$nextTick(() => {
+				let params = {
+					from_user_id:this.params.to_user_id,
+					from_user:{
+						name:this.user_info.name
+					}
+				}
+				this.$refs.recordsMsgDialog.open('show').setData(params);
+			})
+		},
+		linkFile(em){
+			window.location.href = em.file;
+		},
+
 		scroll({scrollTop}){
 			if(scrollTop>10){
 				this.$refs.tagList.style.position = "absolute";
@@ -176,6 +328,10 @@ export default {
 				this.$refs.tagList.style.position = "relative";
 				this.$refs.tagList.style.background = "";
 			}
+			if(scrollTop === 0 && this.msgList.length>0 && this.page >1){
+				this.page = this.page -1;
+				this.getRecordList(true)
+			}
 		},
 		scrollDown() {
 			this.$nextTick(() => {
@@ -203,7 +359,7 @@ export default {
 	}
 	.customerView{
 		width: 380px;
-		height: 580px;
+		height: 600px;
 		position: absolute;
 		right: 0;
 		bottom: 70px;
@@ -211,7 +367,6 @@ export default {
 		box-shadow: 0 4px 4px rgba(19,103,193,0.3);
 		border: 1px solid #B7D7F9;
 		border-radius: 8px;
-
 		.viewBody{
 			display: flex;
 			flex-direction: column;
@@ -234,10 +389,13 @@ export default {
 			.bodyMain{
 				flex: 1;
 				overflow: hidden;
-				.tagList{
+				.tagRow{
 					position: relative;
 					left: 0;
-					z-index: 0;
+					z-index: 200;
+					height: 100px;
+				}
+				.tagList{
 					display: flex;
 					flex-wrap: wrap;
 					padding: 0 10px 10px 10px;
@@ -279,6 +437,52 @@ export default {
 								padding: 10px;
 								display: inline-block;
 								text-align: left;
+								.imgView{
+									height: 100%;
+									display: flex;
+									align-items: center;
+									justify-content: flex-start;
+									margin-bottom: 5px;
+									.loadingIcon{
+										animation: rotate 1s linear infinite;
+									}
+									@keyframes rotate {
+										0% {
+											transform: rotate(0deg);
+										}
+										100% {
+											transform: rotate(360deg);
+										}
+									}
+								}
+								.imgViewRight{
+									justify-content: flex-end;
+								}
+								.fileView{
+									cursor: pointer;
+									color: var(--el-color-primary);
+									display: flex;
+									align-items: center;
+									border: 1px solid #f4f4f4;
+									padding: 10px;
+									border-radius: 4px;
+									background: #f8f6f6;
+									margin-bottom: 5px;
+								}
+							}
+							.el-image{
+								border-radius: 4px;
+							}
+							.textComNoneBack{
+								background: none;
+								padding: 10px 0;
+								.fileLeftItem{
+									padding-right: 48px;
+								}
+								.fileRightItem{
+									text-align: right;
+									padding-left: 48px;
+								}
 							}
 						}
 					}
@@ -298,14 +502,33 @@ export default {
 								color: var(--el-color-white);
 								text-align: left;
 							}
+							.textComNoneBack{
+								background: none;
+								.el-image{
+									border-radius: 4px;
+								}
+							}
 						}
 					}
 				}
 			}
 			.footer{
-				padding: 10px;
+				padding: 10px 0;
 				border-top: 1px solid #F6F6F6;
 				position: relative;
+				.tagList{
+					display: flex;
+					align-items: center;
+					border-bottom: 1px solid #F6F6F6;
+					padding-bottom: 10px;
+					.tagItem{
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						margin-left: 15px;
+						cursor: pointer;
+					}
+				}
 				.customTextarea{
 					font-size:13px;
 					::v-deep .el-textarea__inner{
diff --git a/src/style/pages.scss b/src/style/pages.scss
index cc8f7d7..0c59a07 100644
--- a/src/style/pages.scss
+++ b/src/style/pages.scss
@@ -24,7 +24,7 @@
 
 /*common-page*/
 .common-page {}
-.pageHeader{box-shadow: 0 1px 10px rgba(0,0,0,0.14);margin-bottom: 10px;}
+.pageHeader{box-shadow: 0 1px 8px rgba(0,0,0,0.06);margin-bottom: 10px;}
 .common-header-left {display: flex;align-items: center;}
 .common-header-logo {display: flex;align-items: center;}
 .common-header-logo img {margin-right: 10px;vertical-align: bottom;width: 180px;}
diff --git a/src/views/personalCenter/index.vue b/src/views/personalCenter/index.vue
index 7ac5a59..f081e8f 100644
--- a/src/views/personalCenter/index.vue
+++ b/src/views/personalCenter/index.vue
@@ -90,7 +90,7 @@ export default {
 
 <style scoped lang="scss">
 .mainScroll ::v-deep .el-scrollbar__view{
-	height: calc(100% - 240px);
+	height: calc(100% - 180px);
 }
 
 .mainServeBody{
diff --git a/src/views/serveView/components/commonPage.vue b/src/views/serveView/components/commonPage.vue
index a22cf72..923087e 100644
--- a/src/views/serveView/components/commonPage.vue
+++ b/src/views/serveView/components/commonPage.vue
@@ -8,13 +8,35 @@
 				<div class="headerView">
 					<div class="menuList">
 						<div class="menu-item">
-							<el-dropdown trigger="click" @command="handleUser" placement="bottom-start">
+							<el-dropdown trigger="click" @command="serverQuery">
 								<span class="el-dropdown-link">
-								  个人中心
+								  服务支持
 								  <el-icon class="el-icon--right">
 									<el-icon-ArrowDown />
 								  </el-icon>
 								</span>
+								<template #dropdown>
+									<el-dropdown-menu>
+										<el-dropdown-item command="termQuery">维保期限查询</el-dropdown-item>
+										<el-dropdown-item command="componentQuery">主控部件查询</el-dropdown-item>
+										<el-dropdown-item command="orderQuery">订单号查询</el-dropdown-item>
+									</el-dropdown-menu>
+								</template>
+							</el-dropdown>
+						</div>
+					</div>
+					<div class="menuIcon">
+						<div class="panel-item">
+							<el-icon><sc-icon-See /></el-icon>
+						</div>
+						<div class="panel-item">
+							<el-dropdown trigger="click" @command="handleUser" placement="bottom-start">
+								<span class="el-dropdown-link">
+									<el-icon><sc-icon-User /></el-icon>
+<!--								  	<el-icon class="el-icon&#45;&#45;right">-->
+<!--										<el-icon-ArrowDown />-->
+<!--								  	</el-icon>-->
+								</span>
 								<template #dropdown>
 									<div class="userView" style="width: 280px">
 										<div class="headerView">
@@ -41,31 +63,7 @@
 									</div>
 								</template>
 							</el-dropdown>
-						</div>
-						<div class="menu-item">
-							<el-dropdown trigger="click" @command="serverQuery">
-								<span class="el-dropdown-link">
-								  服务支持
-								  <el-icon class="el-icon--right">
-									<el-icon-ArrowDown />
-								  </el-icon>
-								</span>
-								<template #dropdown>
-									<el-dropdown-menu>
-										<el-dropdown-item command="termQuery">维保期限查询</el-dropdown-item>
-										<el-dropdown-item command="componentQuery">主控部件查询</el-dropdown-item>
-										<el-dropdown-item command="orderQuery">订单号查询</el-dropdown-item>
-									</el-dropdown-menu>
-								</template>
-							</el-dropdown>
-						</div>
-					</div>
-					<div class="menuIcon">
-						<div class="panel-item">
-							<el-icon><sc-icon-See /></el-icon>
-						</div>
-						<div class="panel-item">
-							<el-icon><sc-icon-User /></el-icon>
+
 						</div>
 					</div>
 				</div>
@@ -190,6 +188,18 @@ export default {
 				display: flex;
 				align-items: center;
 				cursor: pointer;
+				.el-dropdown{
+					height: 100%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					.el-dropdown-link{
+						height: 100%;
+						display: flex;
+						align-items: center;
+						cursor: pointer;
+					}
+				}
 			}
 		}
 	}
diff --git a/src/views/serveView/components/footerPage.vue b/src/views/serveView/components/footerPage.vue
index 4443151..e718313 100644
--- a/src/views/serveView/components/footerPage.vue
+++ b/src/views/serveView/components/footerPage.vue
@@ -43,7 +43,7 @@ export default {
 
 <style lang="scss" scoped>
 	.serveFooter{
-		background: #262626;
+		background: #f0f0f0;
 		padding: 20px;
 		.footerView{
 			display: flex;
@@ -56,7 +56,6 @@ export default {
 					margin: 0 50px;
 					.line{
 						padding:0 0 15px 0;
-						color: var(--el-color-white);
 						font-size: 14px;
 					}
 				}
diff --git a/src/views/serveView/index.vue b/src/views/serveView/index.vue
index 3d624f2..e2de5bf 100644
--- a/src/views/serveView/index.vue
+++ b/src/views/serveView/index.vue
@@ -97,7 +97,7 @@ export default {
 
 <style scoped lang="scss">
 .mainScroll ::v-deep .el-scrollbar__view{
-	height: calc(100% - 240px);
+	height: calc(100% - 180px);
 }
 
 .mainServeBody{
diff --git a/src/views/service/infoQuery.vue b/src/views/service/infoQuery.vue
index 9f00bd3..c86ba07 100644
--- a/src/views/service/infoQuery.vue
+++ b/src/views/service/infoQuery.vue
@@ -52,7 +52,7 @@
 										<div :class="user_id != item.to_user_id?'fileRightItem':''" v-for="(em,ind) in item.to_message_list" :key="ind">
 											<span class="imgView" :class="user_id != item.to_user_id?'imgViewRight':''" v-if="['png','jpg','gif','jpeg'].indexOf(em.file_type || em.extension) !=-1">
 												<el-icon class="loadingIcon" size="30" v-if="user_id != item.to_user_id && em.showLoading" style="color:#333;padding: 4px;"><el-icon-Loading/></el-icon>
-												<el-image style="max-width: 240px;max-height: 200px;" fit="cover" lazy :src="em.file?em.file:em" preview-teleported :preview-src-list="[em.file?em.file:em]"></el-image>
+												<el-image style="width: 240px;height: 200px;" fit="contain" lazy :src="em.file?em.file:em" preview-teleported :preview-src-list="[em.file?em.file:em]"></el-image>
 												<el-icon class="loadingIcon" size="30" v-if="user_id === item.to_user_id && em.showLoading" style="color:#333;padding: 4px;"><el-icon-Loading/></el-icon>
 											</span>
 											<span class="fileView" v-if="['png','jpg','gif','jpeg'].indexOf(em.file_type || em.extension) ===-1" @click="linkFile(em)">
@@ -144,7 +144,6 @@ export default {
 			user_id:0,
 			to_user_id:0,
 			page:1,
-			pageSize:1,
 
 			params:{
 				client:1,      // 1 管理后台 2 客服端
@@ -206,7 +205,7 @@ export default {
 							this.msgList.push(obj);
 							setTimeout(()=>{
 								this.scrollDown();
-							},500);
+							},100);
 						}
 						break;
 					case 36:
@@ -217,12 +216,11 @@ export default {
 						})
 						this.msgList = res.data.rows.concat(this.msgList);
 						this.page = res.data.page;
-						this.pageSize = res.data.pageSize;
 						setTimeout(()=>{
 							if(res.data.page === res.data.pageSize){
 								this.scrollDown();
 							}
-						},500);
+						},100);
 						break;
 					case 38:
 						if(res.data.contact_list && res.data.contact_list.length>0){
@@ -326,7 +324,7 @@ export default {
 
 			setTimeout(()=>{
 				this.scrollDown();
-			},500)
+			},100)
 		},
 
 		recordsShow(){