From e2812373b301835dbfdf219117e8c29e5baed5d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=99=E8=BF=90=E6=A8=A1?= <1724894114@qq.com>
Date: Thu, 1 Aug 2024 23:30:49 +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/views/home/console/components/ring.vue |  15 +-
 src/views/order/dataConfirm/index.vue      | 372 ++++++---------------
 2 files changed, 118 insertions(+), 269 deletions(-)

diff --git a/src/views/home/console/components/ring.vue b/src/views/home/console/components/ring.vue
index d24ea82..b824358 100644
--- a/src/views/home/console/components/ring.vue
+++ b/src/views/home/console/components/ring.vue
@@ -30,11 +30,6 @@ export default {
 						type: 'pie',
 						radius: ['40%', '70%'],
 						avoidLabelOverlap: false,
-						itemStyle: {
-							borderRadius: 10,
-							borderColor: '#fff',
-							borderWidth: 2
-						},
 						label: {
 							show: false,
 							position: 'center'
@@ -46,6 +41,16 @@ export default {
 								fontWeight: 'bold'
 							}
 						},
+						// 设置颜色
+						itemStyle: {
+							borderRadius: 10,
+							borderColor: '#fff',
+							borderWidth: 2,
+							color: function(params) {
+								let colors = ['#28F8E6', '#2A91C4', '#1367C1', '#d48265', '#91c7ae'];
+								return colors[params.dataIndex];
+							}
+						},
 						labelLine: {
 							show: false
 						},
diff --git a/src/views/order/dataConfirm/index.vue b/src/views/order/dataConfirm/index.vue
index b2b902a..a6d4781 100644
--- a/src/views/order/dataConfirm/index.vue
+++ b/src/views/order/dataConfirm/index.vue
@@ -1,83 +1,46 @@
 <template>
-	<el-container class="mainBox mainHeaderNoBorderPadding">
-		<el-header>
-			<div class="left-panel">
-				<el-button type="primary" :size="size" icon="el-icon-plus" @click="add">新增工单</el-button>
-				<scImport ref="scImport" :size="size" title="批量导入维保工单" @parentParams="importUpload" @importSuccess="importSuccess">
-					<template #header>
-						<el-button v-auth="'organizationImport'" type="primary" :size="size" plain @click="importFile">批量导入</el-button>
-					</template>
-					<template #download>
-						<div v-auth="'companyImportTemplate'" @click="importTemplate">下载导入模版</div>
-					</template>
-				</scImport>
-			</div>
-			<div class="right-panel">
-				<scExport :size="size" @exportData="exportData" @updateShow="exportChangeShow" :show="exportShow" type="11">
-					<el-button :size="size" icon="sc-icon-Download" @click="exportData">下载</el-button>
-				</scExport>
-			</div>
-		</el-header>
-		<el-main class="nopadding">
-			<div class="searchMain searchMainNoTop">
-				<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>
-			<scTable ref="table" :apiObj="list.apiObj" :column="list.column" row-key="id" stripe :size="size" @selection-change="selectionChange">
-				<el-table-column type="selection" align="center" width="40"></el-table-column>
-				<sc-table-column label="序号" align="center" type="index"></sc-table-column>
-				<template ></template>
-				<template #logo="scope">
-					<el-image class="logoCell" :src="scope.row.logo" preview-teleported :preview-src-list="[scope.row.logo]" fit="contain">
-						<template #error>
-							<div class="image-slot" style="text-align: center;font-size: 20px;">
-								<el-icon><el-icon-Picture /></el-icon>
+	<el-container class="mainBox">
+		<el-aside width="340px">
+			<el-container>
+				<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="name text">{{item.from && item.from.email}}</div>
+								<div class="title text">{{item.subject}}</div>
+								<div class="msg text">{{item.text}}</div>
+								<div class="date">{{item.sent_at}}</div>
 							</div>
-						</template>
-					</el-image>
-				</template>
-				<template #active_status="scope">
-					<el-switch :size="size" v-model="scope.row.active_status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" :active-value="true" :inactive-value="false"></el-switch>
-				</template>
-				<el-table-column label="操作" fixed="right" align="center" width="150">
-					<template #default="scope">
-						<el-dropdown>
-							<el-button class="noBorderBtn" icon="el-icon-more" :size="size"></el-button>
-							<template #dropdown>
-								<el-dropdown-menu>
-									<el-dropdown-item @click="table_show(scope.row, 'see')" icon="sc-icon-See">查看详情</el-dropdown-item>
-									<el-dropdown-item @click="table_edit(scope.row, 'edit')" icon="sc-icon-Edit">编辑公司</el-dropdown-item>
-									<el-dropdown-item  icon="sc-icon-AbilityAuthorization" @click="table_empower(scope.row)" divided>功能授权</el-dropdown-item>
-									<el-dropdown-item  icon="sc-icon-DataAuthorization">数据授权</el-dropdown-item>
-									<el-dropdown-item  icon="sc-icon-UserList" @click="table_user_ist(scope.row)" divided>用户列表</el-dropdown-item>
-									<el-dropdown-item @click="table_del(scope.row, 'delete')" icon="sc-icon-Delete">删除公司</el-dropdown-item>
-								</el-dropdown-menu>
-							</template>
-						</el-dropdown>
-					</template>
-				</el-table-column>
-			</scTable>
-		</el-main>
-	</el-container>
+						</div>
+					</el-scrollbar>
+				</el-main>
+			</el-container>
+		</el-aside>
+		<el-container class="mainHeaderNoBorderPadding">
+			<el-main class="nopadding">
+				<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="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">
+						<span class="text">摘&nbsp;&nbsp;&nbsp;要：</span><span v-html="emailParams.text"></span>
+					</div>
+				</div>
+				<div class="emailBody">
 
-	<!--	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>-->
-	<!--	<see-dialog v-if="dialog.show" ref="showDialog" @closed="dialog.show=false"></see-dialog>-->
+				</div>
+			</el-main>
+		</el-container>
+	</el-container>
 
 </template>
 
 <script>
-// import saveDialog from './save'
-// import seeDialog from  './see'
 
 export default {
 	components: {
-		// saveDialog,
-		// seeDialog,
+
 	},
 	data() {
 		return {
@@ -86,212 +49,93 @@ export default {
 				save: false,
 				show: false,
 			},
-			list: {
-				apiObj: this.$API.orders.order.mail.list,
-				column: [],
-			},
-			selection: [],
-			exportShow:false,
-			searchShow:false,
-			searchList:[
-				{name:'生产日期',type:'date',code:'activation_date'},
-				{name:'反厂日期',type:'date',code:'activation_date'},
-				{name:'处理时间',type:'date',code:'activation_date'},
-				{name:'客户名称',type:'multiple',code:'id', data:[], placeholder:"请选择公司名称",show:false},
-				{name:'状态',type:'select',code:'active_status', data:[], placeholder:"请选择状态",show:false},
-				{name:'工单号',type:'text',code:['mobile'],placeholder:"请输入手机号",isOpen:true,show:false},
-				{name:'邮件地址',type:'text',code:['email'],placeholder:"请输入邮箱地址",isOpen:true,show:false},
-				{name:'公司地址',type:'text',code:['address'],placeholder:"请输入公司地址",isOpen:true,show:false},
-				{name:'负责人',type:'text',code:['owner'],placeholder:"请输入负责人",isOpen:true,show:false},
-				{name:'关键字',type:'text',code:['domain','name'],keyword:true,show:true},
-			],
-			params: {},
+			confirmList:[],
+
+			emailParams: {},
 		}
 	},
+	mounted() {
+		this.getData();
+	},
 	methods: {
-		searchShowClick(){
-			this.searchShow = !this.searchShow;
-			this.searchList.forEach(item=>{
-				if(item.isOpen){
-					item.show = this.searchShow
-				}
-			})
-		},
-		getSelectData(item){
-			let {data,params} = item;
-			this.params = params;
-			if(data.code == "id"){
-				this.getCompanyList(data,params)
-			}else if(data.code == "active_status"){
-				this.getStatusList(data,params);
-			}
-		},
-
-		async getCompanyList(data,params) {
-			const res = await this.$API.system.company.select.post(params);
-			if(res.data && res.data.length>0){
-				res.data.forEach(item=>{
-					item.label = item.full_name;
-				})
-			}
+		async getData() {
+			const res = await this.$API.orders.order.mail.list.get();
 			if(res.code == 200){
-				this.searchList.forEach(item=>{
-					if(item.code == data.code){
-						item.data = res.data;
-					}
-				})
-			}
-		},
-		async getStatusList(data,params) {
-			const res = await this.$API.oss.status.post(params);
-			if(res.code == 200){
-				this.searchList.forEach(item=>{
-					if(item.code == data.code){
-						item.data = res.data;
-					}
-				})
-			}
-		},
-
-		//添加
-		add(){
-			this.dialog.save = true;
-			this.$nextTick(() => {
-				this.$refs.saveDialog.open()
-			})
-		},
-
-		// 批量导入
-		importFile(){
-			this.$nextTick(()=>{
-				this.$refs.scImport.importFile();
-			})
-		},
-		async importTemplate() {
-			const res = await this.$API.orders.order.maintenance.template.post();
-			const blob = new Blob([res]);
-			const text = new Date().getTime();
-			const eLink = document.createElement('a');
-			eLink.download = "维保导入模版_"+text+'.xlsx';
-			eLink.style.display = 'none';
-			eLink.href = URL.createObjectURL(blob);
-			document.body.appendChild(eLink);
-			eLink.click();
-			URL.revokeObjectURL(eLink.href);
-			document.body.removeChild(eLink);
-		},
-		async importUpload(params) {
-			const res = await this.$API.orders.order.maintenance.import.post(params);
-			if(res.code == 200){
-				this.$message.success('上传成功，开始导入数据');
-			}
-		},
-		importSuccess(){
-			this.$refs.table.refresh()
-		},
-
-		//编辑
-		table_edit(row){
-			this.dialog.save = true
-			this.$nextTick(() => {
-				this.$refs.saveDialog.open('edit').setData(row)
-			})
-		},
-		//查看
-		table_show(row){
-			this.dialog.show = true
-			this.$nextTick(() => {
-				this.$refs.showDialog.open('show').setData(row);
-			})
-		},
-		//删除
-		async table_del(row){
-			this.$confirm(`确定删除 ${row.name} 吗？`, '提示', {
-				type: 'warning'
-			}).then(async () => {
-				const reqData = {id: row.id};
-				const res = await this.$API.system.company.delete.post(reqData);
-				if(res.code == 200){
-					this.$refs.table.refresh()
-					this.$message.success("删除成功")
-				}else{
-					await this.$alert(res.message, "提示", {type: 'error'})
+				if(res.data.rows && res.data.rows.length>0){
+					res.data.rows.forEach(item=>{
+						item.text = this.stripHtmlTags(item.summary)
+					})
+					this.confirmList = res.data.rows;
+					this.emailChange(res.data.rows[0])
 				}
-			}).catch(()=>{})
-		},
-		// 功能授权
-		table_empower(row){
-			this.$router.push({
-				path: '/setting/company/add-permission',
-				query: {
-					id: row.id,
-					name:row.name
-				}
-			})
-		},
-		// 公司用户列表
-		table_user_ist(row){
-			this.$router.push({
-				path: '/setting/user/company-user-list',
-				query: {
-					id: row.id,
-					name:row.name
-				}
-			})
-		},
-		//表格选择后回调事件
-		selectionChange(selection){
-			this.selection = selection;
-		},
-		// 状态
-		changeSwitch(val, row) {
-			row.$switch_yx = true;
-			setTimeout(async () => {
-				let params = {
-					id: row.id,
-					status: row.active_status,
-				};
-				const res = await this.$API.system.company.status.post(params);
-				if(res.code !=200){
-					row.active_status = !row.active_status;
-				}
-				delete row.$switch_status;
-				delete row.$switch_yx;
-			}, 500);
-		},
-		// 下载导出
-		exportChangeShow(params){
-			if(params.type == 11){
-				this.exportShow = params.status==0?true:false
 			}
 		},
-		async exportData() {
-			if(this.exportShow) return
-			const res = await this.$API.orders.order.maintenance.export.post(this.params);
-			if(res.code == 200){
-				this.$message.success('开始导出');
-			}
-		},
-		upSearch(){
-			this.$refs.table.upData(this.params);
-		},
-		reset(){
-			this.params = {};
-			this.$refs.scSearch.reload();
-			this.$refs.table.reload();
-		},
-		handleSaveSuccess(){
-			this.$refs.table.refresh();
+		stripHtmlTags(html) {
+			const div = document.createElement('div');
+			div.innerHTML = html;
+			return div.textContent || div.innerText || '';
 		},
+		emailChange(item){
+			this.emailParams = item;
+		}
 	}
 }
 </script>
 
 <style lang="scss" scoped>
-.logoCell{
-	display: flex;
-	align-items: center;
-	height: 20px;
-	margin: 0 auto;
+.emailMain{
+	padding: 5px 0;
+	.itemBox{
+		box-shadow: 0 1px 1px rgba(0,0,0,0.08);
+		position: relative;
+		padding: 12px 0;
+		margin-right: 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)}
+		.msg{color: var(--el-text-color-placeholder);}
+		.text{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
+		.date{
+			position: absolute;right: 0;top: 14px;z-index: 10;
+			color: var(--el-text-color-regular);
+			width: 90px;
+			overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
+		}
+	}
+	.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)
+		}
+	}
+	.theme{
+		line-height: 20px;
+	}
+	.emailBody{
+
+	}
 }
 </style>