From 7b07502d1be3d9abb4c1deb6d40df84c17a41a97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=99=E8=BF=90=E6=A8=A1?= <1724894114@qq.com>
Date: Mon, 5 Aug 2024 23:25:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8E=9F=E9=82=AE=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/order/dataConfirm/index.vue |  58 ++++--
 src/views/order/view-mail.vue         | 248 ++++++++++++++++++++++++++
 2 files changed, 296 insertions(+), 10 deletions(-)
 create mode 100644 src/views/order/view-mail.vue

diff --git a/src/views/order/dataConfirm/index.vue b/src/views/order/dataConfirm/index.vue
index 39b4445..4b7b16a 100644
--- a/src/views/order/dataConfirm/index.vue
+++ b/src/views/order/dataConfirm/index.vue
@@ -13,7 +13,7 @@
 				<el-main class="nopadding" v-loading="listLoading" element-loading-text="加载中...">
 					<el-scrollbar height="100%" ref="scrollbar" @scroll="onScroll">
 						<div class="emailMain">
-							<div class="itemBox" :class="[item.is_confirm===0?'notStarted':'complete', emailId == item.id?'itemTrue':'']" v-for="item in confirmList" :key="item" @click="()=>{this.emailChange(item);}">
+							<div class="itemBox" :class="[item.is_confirm==2?'part':item.is_confirm==1?'complete':'notStarted', emailId == item.id?'itemTrue':'']" v-for="item in confirmList" :key="item" @click="()=>{this.emailChange(item,true);}">
 								<div class="name text">{{item.from && item.from.email}}</div>
 								<div class="title text">{{item.subject}}</div>
 								<div class="msg text">{{item.text}}</div>
@@ -40,13 +40,13 @@
 					<div class="rightBtnMain">
 						<div class="date">{{emailParams.sent_at}}</div>
 						<div class="btnItem">
-							<el-button type="primary" plain icon="el-icon-Refresh" :size="size">手动同步</el-button>
-							<el-button type="primary" plain :size="size">查看原邮件</el-button>
+							<el-button type="primary" plain icon="el-icon-Refresh" :size="size" @click="manualClick">手动同步</el-button>
+							<el-button type="primary" plain :size="size" @click="seeEmail">查看原邮件</el-button>
 							<el-dropdown placement="bottom-start">
 								<el-button type="primary" :size="size" >确认维保 <el-icon class="el-icon--right"><el-icon-ArrowDown/></el-icon></el-button>
 								<template #dropdown>
 									<el-dropdown-menu>
-										<el-dropdown-item @click="allDefend">全部入保</el-dropdown-item>
+										<el-dropdown-item @click="allDefend('all')">全部入保</el-dropdown-item>
 										<el-dropdown-item @click="allDefend">部分入保</el-dropdown-item>
 									</el-dropdown-menu>
 								</template>
@@ -272,8 +272,8 @@ export default {
 			console.log('加载更多')
 		},
 
-		emailChange(item) {
-			this.emailId = item.id;
+		emailChange(item,isChange) {
+			this.emailId = isChange?item.id:this.emailId>0?this.emailId:item.id;
 			this.getEmailData();
 		},
 		async getEmailData() {
@@ -294,15 +294,53 @@ export default {
 			this.loading = false;
 		},
 
-		async allDefend() {
+		async getDetailIds() {
+			let ids = new Array();
 			let params = {
-				ids:this.selection.map(em=> em.id)
-			};
-			const res = await this.$API.orders.order.mail.confirm.post(params);
+				mail_data_id:this.emailId
+			}
+			const res = await this.$API.orders.order.mail.detailIds.post(params);
+			if(res.code == 200){
+				ids = res.data;
+			}
+			return ids;
+		},
+		async allDefend(type) {
+			let res = {};
+			if(type == "all"){
+				const ids = await this.getDetailIds();
+				if(ids){
+					let params = {
+						mail_data_id:this.emailId,
+						ids:ids
+					};
+					res = await this.$API.orders.order.mail.confirm.post(params);
+				}
+			}else{
+				let params = {
+					mail_data_id:this.emailId,
+					ids:this.selection.map(em=> em.id)
+				};
+				res = await this.$API.orders.order.mail.confirm.post(params);
+			}
 			if(res.code == 200){
 				await this.getData();
 			}
 		},
+		async manualClick() {
+			const res = await this.$API.orders.order.mail.manual.post();
+			if(res.code == 200){
+				await this.getData();
+			}
+		},
+		seeEmail(){
+			this.$router.push({
+				path: '/order/view-mail',
+				query: {
+					id: this.emailId,
+				}
+			})
+		},
 
 		getSelectData(){
 
diff --git a/src/views/order/view-mail.vue b/src/views/order/view-mail.vue
new file mode 100644
index 0000000..ebb4501
--- /dev/null
+++ b/src/views/order/view-mail.vue
@@ -0,0 +1,248 @@
+<template>
+	<el-container class="mainHeaderNoBorderPadding" v-loading="loading" element-loading-text="加载中...">
+		<el-main class="nopadding emailMiddle">
+			<div class="emailContent">
+				<div class="title">【邮件名称】{{emailParams.subject}}</div>
+				<div class="fromPeople itemText"><span class="text">发件人：</span>{{emailParams.from && emailParams.from.email}} {{emailParams.from && emailParams.from.name?'('+emailParams.from.name+')':''}}</div>
+				<div class="receivingPeople itemText"><span class="text">收件人：</span>{{emailParams.source_email}}</div>
+				<div class="theme itemText">
+					<span class="text">摘&nbsp;&nbsp;&nbsp;要：</span><span v-html="emailParams.text"></span>
+				</div>
+				<div class="rightBtnMain">
+					<div class="date">{{emailParams.sent_at}}</div>
+				</div>
+			</div>
+			<div class="emailBody">
+				<el-scrollbar height="100%">
+					<iframe class="emailIframe" :srcdoc="emailParams.body_html" frameborder="0"></iframe>
+				</el-scrollbar>
+			</div>
+			<div class="annex">
+				<div class="annexMain" v-if="emailParams.file_path && emailParams.file_path.length>0">
+					<div class="title">
+						{{emailParams.file_path && emailParams.file_path.length}} 个附件
+					</div>
+					<div class="itemBox">
+						<div class="leftBox">
+							<el-icon style="font-size: 26px;"><sc-icon-Excel/></el-icon>
+						</div>
+						<div class="rightBox" @click="downFile(emailParams)">
+							<div class="name">{{emailParams.file_name && emailParams.file_name.file}}</div>
+							<div class="size">
+								{{emailParams.file_name && emailParams.file_name.size}}
+								<span class="down">下载</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</el-main>
+	</el-container>
+</template>
+
+<script>
+
+export default {
+	components: {
+
+	},
+	data() {
+		return {
+			size:'small',
+			params:{
+				id: this.$route.query.id,
+			},
+			emailParams:[]
+		}
+	},
+	computed: {
+
+	},
+	mounted() {
+		this.getData();
+	},
+	methods: {
+		async getData() {
+			this.listLoading = true;
+			const res = await this.$API.orders.order.mail.info.post(this.params);
+			if(res.code == 200){
+				if(res.data && res.data.length>0){
+					res.data.forEach(item=>{
+						item.text = this.stripHtmlTags(item.summary)
+					})
+				}
+				this.emailParams = res.data[0];
+			}
+			this.listLoading = false;
+		},
+		stripHtmlTags(html) {
+			const div = document.createElement('div');
+			div.innerHTML = html;
+			return div.textContent || div.innerText || '';
+		},
+		// 下载
+		downFile(info){
+			if(info.file_path && info.file_path.length>0){
+				info.file_path.forEach(em=>{
+					const link = document.createElement('a');
+					link.href = em;
+					link.setAttribute('download', '');
+					document.body.appendChild(link);
+					link.click();
+					document.body.removeChild(link);
+				})
+			}
+		},
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.complete:after{
+	background: var(--el-color-success);
+}
+.notStarted:after{
+	background: var(--el-color-danger);
+}
+.part:after{
+	background: var(--el-color-warning);
+}
+
+.emailMain{
+	padding: 5px 0;
+	.itemBox{
+		position: relative;
+		padding: 12px 0 12px 10px;
+		cursor: pointer;
+		.text{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: calc(100% - 10px);}
+		.name{margin-bottom: 10px;font-size: 14px;font-weight: 600;color: var(--el-color-dark);}
+		.title{margin-bottom: 6px;color: var(--el-text-color-regular);text-align: left;}
+		.msg{color: var(--el-text-color-placeholder);width: calc(100% - 40px);}
+		.date{
+			position: absolute;right: 12px;top: 14px;z-index: 10;
+			color: var(--el-text-color-regular);
+			width: 90px;
+			overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
+		}
+		.total{
+			position: absolute;right: 12px;bottom: 8px;z-index: 10;
+			.badgeItem ::v-deep .el-badge__content{
+				background: #EBEBEB;
+				border-color: #EBEBEB;
+				color: #555555;
+			}
+		}
+	}
+	.itemBox:after{
+		content: "";
+		position: absolute;
+		top: 16px;
+		left: 0;
+		z-index: 20;
+		width: 4px;
+		height: calc(100% - 32px);
+		border-radius: 4px;
+	}
+	.itemTrue{
+		background: #EFF5FF;
+		border-top-left-radius: 2px;
+		border-bottom-left-radius: 2px;
+	}
+	.itemBox:last-child{
+		box-shadow: none;
+	}
+}
+.emailMiddle{
+	display: flex;flex-direction: column;
+	.emailContent{
+		box-shadow: 0 1px 1px rgba(0,0,0,0.06);
+		padding: 10px 5px 10px 10px;
+		color: var(--el-color-dark);
+		position: relative;
+		.title{
+			font-weight: 600;
+			font-size: 14px;
+			padding: 10px 0;
+			margin-bottom: 8px;
+		}
+		.fromPeople{
+			margin-bottom: 6px;
+		}
+		.date{
+			margin-bottom: 6px;
+		}
+		.receivingPeople{
+			margin-bottom: 6px;
+		}
+		.itemText{
+			padding: 0 0 0 10px;
+			.text{
+				color: var(--el-text-color-regular)
+			}
+		}
+		.theme{
+			line-height: 20px;
+		}
+		.rightBtnMain{
+			position: absolute;
+			right: 10px;
+			top: 10px;
+			.date{
+				text-align: right;
+				margin-bottom: 10px;
+				color: var(--el-text-color-placeholder);
+			}
+		}
+	}
+	.emailBody{
+		flex: 1;
+		padding: 20px 20px 5px 20px;
+		overflow: hidden;
+		display: flex;flex-direction: column;
+		::v-deep .el-scrollbar__view{height: 100%;}
+		.emailIframe{
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.annex{
+		padding: 10px;
+		overflow: hidden;
+		display: flex;flex-direction: column;justify-content: space-between;
+
+		.annexMain{
+			width: 320px;
+			margin-bottom: 10px;
+			.itemBox{
+				margin-top: 8px;
+				border-radius: 4px;
+				padding: 10px;
+				background: #f6f6f6;
+				display: flex;align-items: center;
+				cursor: pointer;
+				.leftBox{flex-basis: 40px;display: flex;align-items: center;justify-content: flex-start;}
+				.rightBox{
+					flex: 1;overflow: hidden;
+					.name{
+						width: 100%;
+						white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
+						margin-bottom: 4px;
+					}
+					.size{
+						position: relative;
+						.down{
+							color: var(--el-color-primary);
+							cursor: pointer;
+							margin-left: 10px;
+						}
+					}
+				}
+			}
+		}
+		.scTable-page{
+			flex: 1;
+			display: flex;flex-direction: row;justify-content: space-between;align-items: flex-end;
+		}
+	}
+}
+</style>