增加分页接入维保确认
This commit is contained in:
龙运模
parent
1479d12d8b
commit
9567e4878b
@ -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>部分入保</el-dropdown-item>
|
||||
<el-dropdown-item @click="allDefend">全部入保</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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user