0
This commit is contained in:
徐哼唧L
317
src/components/page/articleDetailEmail.vue
Normal file
317
src/components/page/articleDetailEmail.vue
Normal file
@@ -0,0 +1,317 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user