优化原邮件
This commit is contained in:
龙运模
parent
2e7aace0cd
commit
7b07502d1b
@ -13,7 +13,7 @@
|
|||||||
<el-main class="nopadding" v-loading="listLoading" element-loading-text="加载中...">
|
<el-main class="nopadding" v-loading="listLoading" element-loading-text="加载中...">
|
||||||
<el-scrollbar height="100%" ref="scrollbar" @scroll="onScroll">
|
<el-scrollbar height="100%" ref="scrollbar" @scroll="onScroll">
|
||||||
<div class="emailMain">
|
<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="name text">{{item.from && item.from.email}}</div>
|
||||||
<div class="title text">{{item.subject}}</div>
|
<div class="title text">{{item.subject}}</div>
|
||||||
<div class="msg text">{{item.text}}</div>
|
<div class="msg text">{{item.text}}</div>
|
||||||
@ -40,13 +40,13 @@
|
|||||||
<div class="rightBtnMain">
|
<div class="rightBtnMain">
|
||||||
<div class="date">{{emailParams.sent_at}}</div>
|
<div class="date">{{emailParams.sent_at}}</div>
|
||||||
<div class="btnItem">
|
<div class="btnItem">
|
||||||
<el-button type="primary" plain icon="el-icon-Refresh" :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">查看原邮件</el-button>
|
<el-button type="primary" plain :size="size" @click="seeEmail">查看原邮件</el-button>
|
||||||
<el-dropdown placement="bottom-start">
|
<el-dropdown placement="bottom-start">
|
||||||
<el-button type="primary" :size="size" >确认维保 <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>
|
<template #dropdown>
|
||||||
<el-dropdown-menu>
|
<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-item @click="allDefend">部分入保</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</template>
|
</template>
|
||||||
@ -272,8 +272,8 @@ export default {
|
|||||||
console.log('加载更多')
|
console.log('加载更多')
|
||||||
},
|
},
|
||||||
|
|
||||||
emailChange(item) {
|
emailChange(item,isChange) {
|
||||||
this.emailId = item.id;
|
this.emailId = isChange?item.id:this.emailId>0?this.emailId:item.id;
|
||||||
this.getEmailData();
|
this.getEmailData();
|
||||||
},
|
},
|
||||||
async getEmailData() {
|
async getEmailData() {
|
||||||
@ -294,15 +294,53 @@ export default {
|
|||||||
this.loading = false;
|
this.loading = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
async allDefend() {
|
async getDetailIds() {
|
||||||
|
let ids = new Array();
|
||||||
let params = {
|
let 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)
|
ids:this.selection.map(em=> em.id)
|
||||||
};
|
};
|
||||||
const res = await this.$API.orders.order.mail.confirm.post(params);
|
res = await this.$API.orders.order.mail.confirm.post(params);
|
||||||
|
}
|
||||||
if(res.code == 200){
|
if(res.code == 200){
|
||||||
await this.getData();
|
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(){
|
getSelectData(){
|
||||||
|
|
||||||
|
|||||||
248
src/views/order/view-mail.vue
Normal file
248
src/views/order/view-mail.vue
Normal file
@ -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">摘 要：</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>
|
||||||
Loading…
Reference in New Issue
Block a user