318 lines
7.9 KiB
Vue
318 lines
7.9 KiB
Vue
<template>
|
||
<div>
|
||
<div class="crumbs">
|
||
<el-breadcrumb separator="/">
|
||
<el-breadcrumb-item>
|
||
<i class="el-icon-lx-calendar"></i> Manuscript email detail
|
||
</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
</div>
|
||
<div class="container_state" v-loading="loading">
|
||
<el-row :gutter="30">
|
||
<el-col :span="16">
|
||
<el-form :model="EmailData" label-width="110px" class="Email_Data">
|
||
<el-form-item label="Sender :">
|
||
<el-input v-model="AuthorMes.email"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="Content :">
|
||
<p v-html="EmailData.topmail"></p>
|
||
<p v-html="EmailData.articleInfor"></p>
|
||
<el-input type="textarea" rows="9" v-model="EmailData.substance" @input="btn_ft=false">
|
||
</el-input>
|
||
<p v-html="EmailData.bottomail"></p>
|
||
</el-form-item>
|
||
<el-form-item label="Attachment :">
|
||
<el-upload style="display: inline-block;" class="upload-demo" :action="upload_enclosure"
|
||
accept=".docx," name="enclosure" :before-upload="beforeupload_enclosure"
|
||
:on-error="uperr_enclosure" :on-success="upSuccess_enclosure" :limit="1"
|
||
:on-exceed="alertlimit" :on-remove="removefilenclosure">
|
||
<div class="el-upload__text" style="padding:0 5px;">
|
||
<em>Click Upload</em>
|
||
</div>
|
||
<div class="el-upload__tip" slot="tip">Only word file can be uploaded(.docx)</div>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-button type="primary" @click="sendData" :disabled="btn_ft"
|
||
style="float: right;margin-top: -20px;">Send mail
|
||
</el-button>
|
||
</el-form>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="muban_list">
|
||
<p>Template selection</p>
|
||
<el-collapse v-model="activeNames" default-expand-all>
|
||
<el-collapse-item v-for="(itemC, indexC) in mubanList" :title="itemC.etitle"
|
||
:name="itemC.eid">
|
||
<div class="sel_muban" v-for="(item, index) in itemC.children">
|
||
<i class="header-icon el-icon-circle-plus" @click="add_muban(item)"></i>
|
||
{{item.econtent}}
|
||
<span style="color: #999;margin-left: 10px;">({{item.num}})</span>
|
||
<br>
|
||
{{item.etitle}}
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
baseUrl: this.Common.baseUrl,
|
||
articleId: this.$route.query.id,
|
||
AuthorMes: {},
|
||
EmailData: {
|
||
email: '',
|
||
attachment: '',
|
||
substance: '',
|
||
topmail: '',
|
||
articleInfor: '',
|
||
bottomail: ''
|
||
},
|
||
activeNames: [],
|
||
mubanList: [],
|
||
btn_ft: false
|
||
};
|
||
},
|
||
created: function() {
|
||
this.getData();
|
||
},
|
||
computed: {
|
||
upload_enclosure: function() {
|
||
return this.baseUrl + 'api/Email/up_enclosure_file';
|
||
},
|
||
},
|
||
methods: {
|
||
//获取数据
|
||
getData() {
|
||
this.$api
|
||
.post('api/Email/getAllEmailTemplate')
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.mubanList = res.data.templates;
|
||
// for (let i in this.mubanList) {
|
||
// this.activeNames.push(this.mubanList[i].eid)
|
||
// }
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
|
||
this.$api
|
||
.post('api/Article/getArticleUserDetail', {
|
||
article_id: this.articleId
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.AuthorMes = res.data.userDetail;
|
||
this.EmailData.topmail = 'Dear Dr. ' + this.AuthorMes.realname + ',<br/>';
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
|
||
this.$api
|
||
.post('api/Article/getArticleDetail', {
|
||
articleId: this.articleId,
|
||
human: 'editor'
|
||
})
|
||
.then(res => {
|
||
let arry = res.article;
|
||
this.EmailData.articleInfor = arry.accept_sn + '<br/>' + arry.title + '<br/>';
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
|
||
this.$api
|
||
.post('api/Journal/getJournalDetailByArticleId', {
|
||
article_id: this.articleId
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
let arry = res.data.journal;
|
||
this.EmailData.bottomail = '<br/>Yours Sincerely' +
|
||
'<br/>' + arry.title + ' | Editorial Office | New Zealand' +
|
||
'<br/>Telephone: +64 02108293806' +
|
||
'<br/>Email: ' + arry.email +
|
||
'<br/>' + arry.website +
|
||
'<br/>Subscribe to receive Latest Research and News from ' + arry.title +
|
||
'<br/>https://www.tmrjournals.com/draw_up.html?issn=' + arry.issn
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
},
|
||
|
||
|
||
// 发送邮件
|
||
sendData() {
|
||
if (this.EmailData.substance == '') {
|
||
this.$message.error('Please enter the message content!');
|
||
return
|
||
}
|
||
this.loading = true;
|
||
this.EmailData.content = this.EmailData.topmail + this.EmailData.articleInfor + '<br/>' + this.EmailData
|
||
.substance.replace(/\n/g, '<br/>') + '<br/>' + this.EmailData.bottomail;
|
||
this.EmailData.email = this.AuthorMes.email;
|
||
this.EmailData.article_id = this.articleId;
|
||
this.$api
|
||
.post('api/Email/pushEmailOnTemplate', this.EmailData)
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
setTimeout(() => {
|
||
this.loading = false
|
||
this.btn_ft = true
|
||
this.$message.success('Sent successfully!');
|
||
this.$router.push({
|
||
path: 'articleDetailEmailist',
|
||
query: {
|
||
id: this.articleId
|
||
}
|
||
});
|
||
}, 2500);
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
},
|
||
|
||
// 添加模板
|
||
add_muban(e) {
|
||
if (this.EmailData.substance == '') {
|
||
this.EmailData.substance += e.econtent
|
||
} else {
|
||
this.EmailData.substance += '\n\n' + e.econtent
|
||
}
|
||
// 增加次数
|
||
this.$api
|
||
.post('api/Email/addEmailTemplateNum', e)
|
||
.then(res => {
|
||
e.num += 1
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
},
|
||
|
||
// 附件上传
|
||
beforeupload_enclosure() {},
|
||
uperr_enclosure(err) {
|
||
this.$message.error('upload error');
|
||
},
|
||
upSuccess_enclosure(res, file) {
|
||
if (res.code == 0) {
|
||
this.EmailData.attachment = 'enclosure/' + res.upurl;
|
||
} else {
|
||
this.$message.error('service error：' + res.msg);
|
||
}
|
||
},
|
||
removefilenclosure(file, fileList) {
|
||
this.EmailData.attachment = '';
|
||
},
|
||
alertlimit() {
|
||
this.$message.error('The maximum number of uploaded files has been exceeded!');
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
|
||
<style>
|
||
.Email_Data {
|
||
margin: 30px 0 0 0;
|
||
}
|
||
|
||
.Email_Data .el-textarea__inner {
|
||
line-height: 26px;
|
||
margin: 10px 0 -20px 0;
|
||
border: 0;
|
||
box-shadow: 1px 1px 5px 1px rgb(0 102 153 / 20%);
|
||
font-size: 14px;
|
||
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
|
||
}
|
||
|
||
.Email_Data p {
|
||
line-height: 27px;
|
||
padding-top: 4px;
|
||
}
|
||
|
||
.Email_Data .el-upload__tip {
|
||
display: inline-block;
|
||
line-height: 38px;
|
||
margin: 0 0 0 15px;
|
||
color: #888 !important;
|
||
vertical-align: text-bottom;
|
||
}
|
||
|
||
.muban_list {
|
||
border-left: 1px solid #eee;
|
||
padding: 0 0 0 30px;
|
||
}
|
||
|
||
.muban_list>p {
|
||
margin: 45px 0 30px 0;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
letter-spacing: -1px;
|
||
}
|
||
|
||
.muban_list .el-collapse {
|
||
overflow-y: auto;
|
||
max-height: 650px;
|
||
}
|
||
|
||
.muban_list .el-collapse-item__header {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.muban_list .el-collapse-item__header .header-icon {
|
||
margin: 0 10px 0 0;
|
||
font-size: 16px;
|
||
color: #006699;
|
||
}
|
||
|
||
.muban_list .el-collapse-item__wrap {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.muban_list .sel_muban {
|
||
line-height: 26px;
|
||
position: relative;
|
||
padding-left: 30px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.muban_list .sel_muban:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.muban_list .sel_muban i {
|
||
position: absolute;
|
||
font-size: 18px;
|
||
color: #006699;
|
||
cursor: pointer;
|
||
top: 3px;
|
||
left: 1px;
|
||
|
||
}
|
||
</style>
|