From a58602d8d9e23ab2a1b8d3a41da066382e30d491 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=99=E8=BF=90=E6=A8=A1?= <1724894114@qq.com>
Date: Fri, 2 Aug 2024 20:01:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE=E7=A1=AE?=
 =?UTF-8?q?=E8=AE=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/model/orders.js               |   1 +
 src/views/order/dataConfirm/index.vue | 325 +++++++++++++++++++++++---
 2 files changed, 288 insertions(+), 38 deletions(-)

diff --git a/src/api/model/orders.js b/src/api/model/orders.js
index 6e4f9eb..071059a 100644
--- a/src/api/model/orders.js
+++ b/src/api/model/orders.js
@@ -39,6 +39,7 @@ export default {
 					return await http.post(this.url, params);
 				},
 			},
+
 		},
 		maintenance:{
 			list:{
diff --git a/src/views/order/dataConfirm/index.vue b/src/views/order/dataConfirm/index.vue
index a6d4781..d89b19a 100644
--- a/src/views/order/dataConfirm/index.vue
+++ b/src/views/order/dataConfirm/index.vue
@@ -2,10 +2,11 @@
 	<el-container class="mainBox">
 		<el-aside width="340px">
 			<el-container>
+				<el-header><span class="emailTitle">邮件通知</span></el-header>
 				<el-main class="nopadding">
 					<el-scrollbar height="100%">
 						<div class="emailMain">
-							<div class="itemBox" v-for="item in confirmList" :key="item" @click="emailChange(item)">
+							<div class="itemBox" :class="emailId == item.id?'itemTrue':''" v-for="item in confirmList" :key="item" @click="()=>{this.emailChange(item);}">
 								<div class="name text">{{item.from && item.from.email}}</div>
 								<div class="title text">{{item.subject}}</div>
 								<div class="msg text">{{item.text}}</div>
@@ -16,11 +17,11 @@
 				</el-main>
 			</el-container>
 		</el-aside>
-		<el-container class="mainHeaderNoBorderPadding">
-			<el-main class="nopadding">
+		<el-container class="mainHeaderNoBorderPadding" v-loading="loading">
+			<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="fromPeople itemText"><span class="text">发件人：</span>{{emailParams.from && emailParams.from.email}} {{emailParams.from && emailParams.from.name?'('+emailParams.from.name+')':''}}</div>
 					<div class="date itemText"><span class="text">时&nbsp;&nbsp;&nbsp;间：</span> {{emailParams.sent_at}}</div>
 					<div class="receivingPeople itemText"><span class="text">收件人：</span>{{emailParams.source_email}}</div>
 					<div class="theme itemText">
@@ -28,7 +29,81 @@
 					</div>
 				</div>
 				<div class="emailBody">
+					<div class="searchMain " style="padding-left: 10px;">
+						<scSearch ref="scSearch" :searchList="searchList" @fetchSelectData="getSelectData"></scSearch>
 
+						<div class="searchItem searchBtn">
+							<el-button :size="size" :icon="searchShow?'el-icon-ArrowUpBold':'el-icon-ArrowDownBold'" @click="searchShowClick">{{searchShow?'收起':'更多'}}</el-button>
+							<el-button :size="size" type="primary" icon="el-icon-search" @click="upSearch">查询</el-button>
+							<el-button :size="size" type="info" icon="el-icon-RefreshRight" @click="reset">重置</el-button>
+						</div>
+					</div>
+					<el-table class="scTable" :data="emailData.rows" ref="table" :row-key="rowKey" :key="toggleIndex" :header-cell-style="{'background': '#F5F7FA','color':'#606266'}" @selection-change="selectionChange" stripe :size="size">
+						<el-table-column type="selection" align="center" width="45"></el-table-column>
+						<el-table-column label="序号" align="center" type="index"></el-table-column>
+						<template v-for="(item, index) in userColumn" :key="index">
+							<el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop" :width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" show-overflow-tooltip>
+								<template #default="scope">
+									<slot :name="item.prop" v-bind="scope">
+										{{scope.row[item.prop]}}
+									</slot>
+								</template>
+							</el-table-column>
+						</template>
+						<el-table-column min-width="1"></el-table-column>
+						<template #empty>
+							<el-empty :description="emptyText" :image-size="100"></el-empty>
+						</template>
+					</el-table>
+				</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}} 个附件
+							(<span class="down" @click="downFile(emailParams)">下载</span>)
+						</div>
+						<div class="itemBox">
+							<div class="leftBox">
+								<el-icon style="font-size: 26px;"><sc-icon-FilePdf/></el-icon>
+							</div>
+							<div class="rightBox">
+								<div class="name">{{emailParams.file_name && emailParams.file_name.file}}</div>
+								<div class="size">{{emailParams.file_name && emailParams.file_name.size}}</div>
+							</div>
+						</div>
+					</div>
+					<div class="scTable-page">
+						<div class="scTable-do">
+							<el-button @click="reset" icon="el-icon-refresh" circle style="margin-left:15px"></el-button>
+							<el-popover placement="top" title="列设置" :width="500" trigger="click" :hide-after="0" @show="customColumnShow=true" @after-leave="customColumnShow=false">
+								<template #reference>
+									<el-button icon="el-icon-set-up" circle style="margin-left:15px"></el-button>
+								</template>
+								<columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange" @save="columnSettingSave" @back="columnSettingBack" :column="userColumn"></columnSetting>
+							</el-popover>
+							<el-popover placement="top" title="表格设置" :width="400" trigger="click" :hide-after="0">
+								<template #reference>
+									<el-button icon="el-icon-setting" circle style="margin-left:15px"></el-button>
+								</template>
+								<el-form label-width="80px" label-position="left">
+									<el-form-item label="表格尺寸">
+										<el-radio-group v-model="config.size" size="small" @change="configSizeChange">
+											<el-radio-button label="large">大</el-radio-button>
+											<el-radio-button label="default">正常</el-radio-button>
+											<el-radio-button label="small">小</el-radio-button>
+										</el-radio-group>
+									</el-form-item>
+									<el-form-item label="样式">
+										<el-checkbox v-model="config.config.border" label="纵向边框" @change="configSizeChange"></el-checkbox>
+										<el-checkbox v-model="config.config.stripe" label="斑马纹" @change="configSizeChange"></el-checkbox>
+									</el-form-item>
+								</el-form>
+							</el-popover>
+						</div>
+						<div class="scTable-pagination">
+							<el-pagination background :small="true" :layout="paginationLayout" :total="total" :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
+						</div>
+					</div>
 				</div>
 			</el-main>
 		</el-container>
@@ -38,9 +113,12 @@
 
 <script>
 
+import columnSetting from '@/components/scTable/columnSetting'
+import config from "@/config/table";
+
 export default {
 	components: {
-
+		columnSetting
 	},
 	data() {
 		return {
@@ -51,7 +129,39 @@ export default {
 			},
 			confirmList:[],
 
+			emailId:'',
+			searchShow:false,
+			searchList:[
+				{name:'创建日期',type:'date',code:'activation_date'},
+				{name:'状态',type:'select',code:'active_status', data:[], placeholder:"请选择状态",show:true},
+				{name:'联系方式',type:'text',code:['mobile'],placeholder:"请输入手机号",isOpen:true,show:false},
+				{name:'姓名',type:'text',code:['name'],placeholder:"请输入姓名",isOpen:true,show:false},
+				{name:'关键字',type:'text',code:['login_name','roles','department'],keyword:true,show:true},
+			],
 			emailParams: {},
+			toggleIndex: 0,
+			rowKey:"",
+			paginationLayout:config.paginationLayout,
+			scPageSize:config.pageSize,
+			pageSizes:config.pageSizes,
+			currentPage: 1,
+			total:0,
+			loading:false,
+			customColumnShow: false,
+			config: {
+				size: 'small',
+				config:{
+					border: false,
+					stripe: false
+				},
+			},
+
+			userColumn:[],
+			emailData:{
+				list:[],
+				column:[]
+			},
+			emptyText: "暂无数据",
 		}
 	},
 	mounted() {
@@ -66,7 +176,7 @@ export default {
 						item.text = this.stripHtmlTags(item.summary)
 					})
 					this.confirmList = res.data.rows;
-					this.emailChange(res.data.rows[0])
+					await this.emailChange(res.data.rows[5])
 				}
 			}
 		},
@@ -75,21 +185,109 @@ export default {
 			div.innerHTML = html;
 			return div.textContent || div.innerText || '';
 		},
-		emailChange(item){
-			this.emailParams = item;
-		}
+		emailChange(item) {
+			this.emailId = item.id;
+			this.getEmailData();
+		},
+		async getEmailData() {
+			let params = {
+				mail_data_id: this.emailId
+			}
+			this.loading = true;
+			const res = await this.$API.orders.order.mail.detail.post(params);
+			if (res.code == 200) {
+				this.total = res.data.total;
+				this.emailData = res.data;
+				this.userColumn = res.data.columnConfig;
+				res.data.mail_info[0].text = this.stripHtmlTags(res.data.mail_info[0].summary)
+				this.emailParams = res.data.mail_info[0];
+			}
+			this.loading = false;
+		},
+
+		getSelectData(){
+
+		},
+		searchShowClick(){
+
+		},
+		upSearch(){
+			this.getEmailData();
+		},
+		reset(){
+			this.getEmailData();
+		},
+		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);
+				})
+			}
+		},
+		// 选择数据
+		selectionChange(){
+
+		},
+
+		//分页点击
+		paginationChange(){
+			this.getEmailData();
+		},
+		//条数变化
+		pageSizeChange(size){
+			this.scPageSize = size
+			this.getEmailData();
+		},
+
+		//自定义变化事件
+		columnSettingChange(userColumn){
+			this.userColumn = userColumn;
+			this.toggleIndex += 1;
+		},
+		//自定义列保存
+		async columnSettingSave(userColumn){
+			this.$refs.columnSetting.isSave = true
+			try {
+				await config.columnSettingSave(this.tableName, userColumn,this.apiObj);
+				this.$message.success('保存成功')
+			}catch(error){
+				this.$message.error('保存失败')
+				this.$refs.columnSetting.isSave = false
+			}
+			this.$refs.columnSetting.isSave = false
+		},
+		//自定义列重置
+		async columnSettingBack(userColumn){
+			this.$refs.columnSetting.isSave = true
+			try {
+				const column = await config.columnSettingReset(this.tableName, userColumn,this.apiObj)
+				if(column){
+					this.userColumn = column
+					this.$refs.columnSetting.usercolumn = JSON.parse(JSON.stringify(this.userColumn||[]))
+				}
+			}catch(error){
+				this.$message.error('重置失败')
+				this.$refs.columnSetting.isSave = false
+			}
+			this.$refs.columnSetting.isSave = false
+		},
 	}
 }
 </script>
 
 <style lang="scss" scoped>
+.emailTitle{font-size: 14px;font-weight: 600;}
 .emailMain{
 	padding: 5px 0;
 	.itemBox{
 		box-shadow: 0 1px 1px rgba(0,0,0,0.08);
 		position: relative;
-		padding: 12px 0;
-		margin-right: 10px;
+		padding: 12px 0 12px 10px;
 		cursor: pointer;
 		.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)}
@@ -102,40 +300,91 @@ export default {
 			overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
 		}
 	}
+	.itemTrue{
+		background: #EFF5FF;
+		border-top-left-radius: 2px;
+		border-bottom-left-radius: 2px;
+	}
 	.itemBox:last-child{
 		box-shadow: none;
 	}
 }
-.emailContent{
-	box-shadow: 0 1px 1px rgba(0,0,0,0.06);
-	padding: 10px;
-	color: var(--el-color-dark);
-	.title{
-		font-weight: 600;
-		font-size: 14px;
-		margin-bottom: 12px;
-	}
-
-	.fromPeople{
-		margin-bottom: 6px;
-	}
-	.date{
-		margin-bottom: 6px;
-	}
-	.receivingPeople{
-		margin-bottom: 6px;
-	}
-	.itemText{
-		padding: 0 10px;
-		.text{
-			color: var(--el-text-color-regular)
+.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);
+		.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;
 		}
 	}
-	.theme{
-		line-height: 20px;
-	}
 	.emailBody{
-
+		flex: 1;
+		overflow: hidden;
+		display: flex;flex-direction: column;
+	}
+	.annex{
+		flex-basis: 100px;
+		padding: 10px;
+		overflow: hidden;
+		display: flex;justify-content: space-between;
+		.down{
+			color: var(--el-color-primary);
+			cursor: pointer;
+		}
+		.annexMain{
+			width: 320px;
+			.itemBox{
+				margin-top: 8px;
+				border-radius: 4px;
+				padding: 10px;
+				background: #f6f6f6;
+				display: flex;align-items: center;
+				.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;
+					}
+				}
+			}
+		}
+		.scTable-page{
+			flex: 1;
+			display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;
+		}
 	}
 }
+
+.scTable{
+	flex: 1;
+	overflow: hidden;
+}
+.scTable ::v-deep .el-table__header .cell{
+	white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
+}
 </style>