增加分页接入维保确认

src/views/order/dataConfirm/index.vue

@@ -11,7 +11,7 @@
 					</span>
 				</el-header>
 				<el-main class="nopadding" v-loading="listLoading" element-loading-text="加载中...">
-					<el-scrollbar height="100%">
+					<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="name text">{{item.from && item.from.email}}</div>
@@ -40,13 +40,14 @@
 					<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-dropdown placement="bottom-start">
-								<el-button type="primary" :size="size" style="margin-right: 12px;">确认维保 <el-icon class="el-icon--right"><el-icon-ArrowDown/></el-icon></el-button>
+								<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>全部入保</el-dropdown-item>
+										<el-dropdown-item @click="allDefend">全部入保</el-dropdown-item>
-										<el-dropdown-item>部分入保</el-dropdown-item>
+										<el-dropdown-item @click="allDefend">部分入保</el-dropdown-item>
 									</el-dropdown-menu>
 								</template>
 							</el-dropdown>
@@ -64,7 +65,7 @@
 						</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 type="selection" align="center" width="45" :selectable="selectable"></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>
@@ -85,15 +86,17 @@
 					<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-Excel/></el-icon>
 							</div>
-							<div class="rightBox">
+							<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}}</div>
+								<div class="size">
+									{{emailParams.file_name && emailParams.file_name.size}}
+									<span class="down">下载</span>
+								</div>
 							</div>
 						</div>
 					</div>
@@ -154,6 +157,11 @@ export default {
 			},
 			confirmList:[],
 			listLoading:false,
+			listParams:{
+				page:1,
+				pageSize:30,
+			},
+			threshold:100,
 
 			emailId:'',
 			searchShow:false,
@@ -182,6 +190,7 @@ export default {
 				},
 			},
 
+			selection:[],
 			userColumn:[],
 			emailData:{
 				list:[],
@@ -196,14 +205,14 @@ export default {
 	methods: {
 		async getData() {
 			this.listLoading = true;
-			const res = await this.$API.orders.order.mail.list.get();
+			const res = await this.$API.orders.order.mail.list.get(this.listParams);
 			if(res.code == 200){
 				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;
-					await this.emailChange(res.data.rows[5])
+					await this.emailChange(res.data.rows[0])
 				}
 			}
 			this.listLoading = false;
@@ -213,13 +222,27 @@ export default {
 			div.innerHTML = html;
 			return div.textContent || div.innerText || '';
 		},
+		// 滚动分页
+		onScroll(event){
+			const scrollbar = this.$refs.scrollbar;
+			const remainingDistance = scrollbar.$el.scrollHeight - (event.scrollTop + scrollbar.$el.clientHeight);
+			if (remainingDistance <= this.threshold) {
+				this.loadMore();
+			}
+		},
+		loadMore(){
+			console.log('加载更多')
+		},
+
 		emailChange(item) {
 			this.emailId = item.id;
 			this.getEmailData();
 		},
 		async getEmailData() {
 			let params = {
-				mail_data_id: this.emailId
+				mail_data_id: this.emailId,
+				pageSize:this.scPageSize,
+				page:this.currentPage
 			}
 			this.loading = true;
 			const res = await this.$API.orders.order.mail.detail.post(params);
@@ -233,6 +256,16 @@ export default {
 			this.loading = false;
 		},
 
+		async allDefend() {
+			let params = {
+				ids:this.selection.map(em=> em.id)
+			};
+			const res = await this.$API.orders.order.mail.confirm.post(params);
+			if(res.code == 200){
+				await this.getData();
+			}
+		},
+
 		getSelectData(){
 
 		},
@@ -258,8 +291,15 @@ export default {
 			}
 		},
 		// 选择数据
-		selectionChange(){
+		selectionChange(selection){
-
+			this.selection = selection;
+		},
+		selectable(row){
+			if(row.is_confirm){
+				return false;  //不禁用
+			}else {
+				return true;  //禁用
+			}
 		},
 
 		//分页点击
@@ -425,6 +465,8 @@ export default {
 			top: 10px;
 			.date{
 				text-align: right;
+				margin-bottom: 10px;
+				color: var(--el-text-color-placeholder);
 			}
 		}
 	}
@@ -437,10 +479,7 @@ export default {
 		padding: 10px;
 		overflow: hidden;
 		display: flex;flex-direction: column;justify-content: space-between;
-		.down{
+
-			color: var(--el-color-primary);
-			cursor: pointer;
-		}
 		.annexMain{
 			width: 320px;
 			margin-bottom: 10px;
@@ -450,6 +489,7 @@ export default {
 				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;
@@ -458,6 +498,14 @@ export default {
 						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;
+						}
+					}
 				}
 			}
 		}