1200 lines
34 KiB
Vue
1200 lines
34 KiB
Vue
<template>
|
||
<div>
|
||
<div class="crumbs">
|
||
<el-breadcrumb separator="/">
|
||
<el-breadcrumb-item>
|
||
<i class="el-icon-lx-calendar"></i> Email promotion task
|
||
</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
</div>
|
||
<div class="container_state" v-loading="loading" style="min-width: 1100px;">
|
||
|
||
<el-form :rules="rules" ref="emailRef" :model="EmailData" label-width="220px" class="Email_Data">
|
||
<div class="d_rol">
|
||
<h3>
|
||
Journal
|
||
</h3>
|
||
<el-form-item label="Promoting journal :" prop="journal_issn">
|
||
<el-select v-model="EmailData.journal_issn" placeholder="Please select a journal"
|
||
@change="getIssnMajor" style="width: 260px;">
|
||
<el-option v-for="item in journalList" :label="item.title" :key="item.issn"
|
||
:value="item.issn">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="d_rol">
|
||
<h3>
|
||
Personnel Scope
|
||
</h3>
|
||
<el-form-item label="Target library :" prop="library">
|
||
<el-select v-model="EmailData.library" placeholder="Please select a range"
|
||
style="width: 215px;margin-right: 15px;" @change="getTarUser()">
|
||
<el-option v-for="item in ubaseList" :label="item.title" :key="item.id" :value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="User Country :" prop="china_type">
|
||
<el-radio-group v-model="EmailData.china_type" @change="getTarUser()">
|
||
<el-radio :label="0">
|
||
All countries
|
||
</el-radio>
|
||
<el-radio :label="1">
|
||
Only China
|
||
</el-radio>
|
||
<el-radio :label="2">
|
||
Without China
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="Target personnel :" prop="category">
|
||
<div class="senderKuan" style="position: relative;">
|
||
<el-radio-group v-model="EmailData.category" @change="numCateGory">
|
||
<el-radio label="keyword" style="display: inline-block;margin-right: 20px;">
|
||
Keywords :
|
||
<el-input v-model="EmailData.keyword" placeholder="Please enter keyword"
|
||
style="width: 160px;margin:0 10px;" @focus="gatClearkey">
|
||
</el-input>
|
||
</el-radio>
|
||
<el-radio label="major" style="display: inline-block;">
|
||
Research direction :
|
||
</el-radio>
|
||
<el-button type="primary" icon="el-icon-search" @click="getUser()"
|
||
style="margin-left: 210px;">Search
|
||
</el-button>
|
||
</el-radio-group>
|
||
<el-cascader v-model="EmailData.major" :options="majorList" :props="defaultParams" clearable
|
||
placeholder="Please select a major" @change="majorChange" popper-class='majorSelct'
|
||
:key="keyValue" style="width: 200px;position: absolute;top: 17px;left: 480px;">
|
||
</el-cascader>
|
||
<div>
|
||
|
||
</div>
|
||
<p class="tolPeoUse">
|
||
A total of <b>{{userListNum}}</b> users meet the filtering criteria.
|
||
</p>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="Number of sends per time :" prop="pagesize">
|
||
<el-select v-model="EmailData.pagesize" placeholder="Please select number"
|
||
style="width: 100px;">
|
||
<el-option v-for="item in numberList" :label="item.number" :key="item.number"
|
||
:value="item.number">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="Begin Page Number :" prop="beginPage">
|
||
<el-input-number :min="1" :max="Math.ceil(userListNum/EmailData.pagesize)" v-model="EmailData.beginPage" label="Page Number"></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item label="Scheduled Tasks :" prop="frequency">
|
||
<el-radio-group v-model="EmailData.frequency">
|
||
<el-radio label="day" style="display: block;margin: 10px 0 0 0;">
|
||
Day
|
||
<span style="margin: 0 0 0 5px;">(explanatory note: 10:00 - 12:00)</span>
|
||
</el-radio>
|
||
<el-radio label="week" style="display: block;margin: 18px 0;">
|
||
Week
|
||
<span style="margin: 0 0 0 5px;">(explanatory note: Monday - Tuesday)</span>
|
||
</el-radio>
|
||
<el-radio label="month" style="display: block;">
|
||
Month
|
||
<span style="margin: 0 0 0 5px;">(explanatory note: 1st - 5th)</span>
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="d_rol">
|
||
<h3>
|
||
Mail
|
||
</h3>
|
||
<el-form-item label="Mail Range :" prop="range">
|
||
<el-select v-model="EmailData.range" placeholder="Please select a range" @change="changeRange()"
|
||
style="width: 260px;">
|
||
<el-option v-for="item in rangeList" :label="item.title" :key="item.id" :value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="Promoting article :" prop="" v-if="EmailData.range==2">
|
||
<div class="senderKuan">
|
||
<el-button size="mini" type="primary" icon="el-icon-document" @click="openArticl">
|
||
Change Articles
|
||
</el-button>
|
||
<p style="height: 5px;"></p>
|
||
<p v-for="(item,index) in artChoseList" class="artChosn">
|
||
<a :href="'https://www.tmrjournals.com/article.html?J_num='+item.journal_id+'&a_id='+item.article_id"
|
||
target="_blank">
|
||
<font>{{index+1}}.</font> {{item.title}}
|
||
</a>
|
||
<font style="color: #aaa;"> - {{item.journal_title}}</font>
|
||
<b @click="deleteArticleCho(item,index)" class="el-icon-delete"></b>
|
||
</p>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="Mail Template :" prop="template">
|
||
<el-select v-model="EmailData.template" placeholder="Please select a template"
|
||
@change="changeTemple($event)" style="width: 400px;margin-right: 20px;">
|
||
<el-option v-for="item in templeList" :label="item.title" :key="item.pro_email_id"
|
||
:value="item.pro_email_id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="Content :">
|
||
<div class="emaStyle">
|
||
<img src="../../assets/img/mailPT.png" v-if="EmailData.has_hb==1"
|
||
style="margin-bottom: -10px;">
|
||
<div style="background-color: #fff;" v-if="EmailData.range==1">
|
||
<quill-editor ref="myTextEditor" v-model="EmailData.substance" :options="editorOption"
|
||
@focus="myTextMark='myTextEditor'">
|
||
</quill-editor>
|
||
</div>
|
||
<div style="background-color: #fff;" v-if="EmailData.range==2">
|
||
<quill-editor ref="myTextEditor1" v-model="EmailData.substance_top"
|
||
:options="editorOption" @focus="myTextMark='myTextEditor1'">
|
||
</quill-editor>
|
||
<div v-for="(item,index) in artChoseList" class="artCLise">
|
||
<a :href="'https://www.tmrjournals.com/article.html?J_num='+item.journal_id+'&a_id='+item.article_id"
|
||
target="_blank">
|
||
<font></font> {{item.title}}
|
||
</a>
|
||
<p style="color: #444;font-family: Calibri;font-size: 16px;">{{item.authortitle}}
|
||
</p>
|
||
<p style="color: #333;">
|
||
{{item.journal_title}}
|
||
<font style="display:inline-block;margin: 0 20px 0 20px;">|</font>
|
||
<a :href="'https://www.tmrjournals.com/public/articlePDF/'+item.file_pdf"
|
||
target="_blank">
|
||
<img src="https://www.tmrjournals.cn/img/link_3.jpg">PDF
|
||
</a>
|
||
</p>
|
||
<p>
|
||
<b>Cite this article :</b>
|
||
<font v-html="item.cite"></font>
|
||
</p>
|
||
</div>
|
||
<quill-editor ref="myTextEditor2" v-model="EmailData.substance_bom"
|
||
:options="editorOption" @focus="myTextMark='myTextEditor2'">
|
||
</quill-editor>
|
||
</div>
|
||
<img src="../../assets/img/mailPB.png" v-if="EmailData.has_hb==1"
|
||
style="margin-bottom: -10px;">
|
||
|
||
<el-upload class="avatar-uploader avatar-uploader-foot"
|
||
:action="baseUrl+'api/Promotion/up_promotion_file'" name="promotion"
|
||
:show-file-list="false" :on-success="uploadSuccess">
|
||
</el-upload>
|
||
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="Public Image :" prop="has_hb">
|
||
<el-radio-group v-model="EmailData.has_hb">
|
||
<el-radio :label="1">Yes</el-radio>
|
||
<el-radio :label="2">No</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
</div>
|
||
</el-form>
|
||
|
||
|
||
<div style="text-align: center;margin: 30px 0 30px 0;">
|
||
<el-button type="primary" icon="el-icon-message" @click="saveData" :disabled="btn_ft">
|
||
Save email promotion task
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 更换文章弹出框 -->
|
||
<el-dialog title="Change Articles" :visible.sync="articleBox" width="885px" :close-on-click-modal="false">
|
||
<div>
|
||
<span class="artTile" style="width: 115px;">Journal stage :</span>
|
||
<!-- <el-select v-model="articleForm.journal_id" @change="changeJournal"
|
||
placeholder="Please select a journal" style="width: 190px;">
|
||
<el-option v-for="item in journalList" :key="item.journal_id" :label="item.title"
|
||
:value="item.journal_id">
|
||
</el-option>
|
||
</el-select> -->
|
||
{{articleForm.journal_title}} -
|
||
<el-select v-model="articleForm.journal_stage_id" @change="getArticle"
|
||
placeholder="Please select a stage" style="width: 250px;margin: 0 15px;">
|
||
<!-- <el-option :key="0" label="All stages" :value="0"></el-option> -->
|
||
<el-option v-for="item in stageList" :key="item.journal_stage_id"
|
||
:label="item.stage_year+' Vol.'+item.stage_vol +' issue.'+item.stage_no+' '+item.stage_pagename+item.stage_page"
|
||
:value="item.journal_stage_id">
|
||
</el-option>
|
||
</el-select>
|
||
|
||
<div class="artChoList">
|
||
<p v-for="(item,index) in artTicleList"
|
||
:style="item.chooState==0?'border-color:#eee':'border-color:#00669980'">
|
||
<a :href="'https://www.tmrjournals.com/article.html?J_num='+item.journal_id+'&a_id='+item.article_id"
|
||
target="_blank">
|
||
<font>{{index+1}}.</font> {{item.title}}
|
||
</a>
|
||
<i class="kuangGeo" @click="saveArticle(item,index)"></i>
|
||
<b class="el-icon-check" @click="deleteArticle(item,index)" v-if="item.chooState==1"></b>
|
||
</p>
|
||
<div style="text-align: center;color: #aaa;" v-if="artTicleList.length==0">No Articles</div>
|
||
<div style="text-align: center;color: #aaa;" v-if="artTicleList.length!=0">
|
||
{{artTicleList.length}} articles in total
|
||
</div>
|
||
<!-- <div class="pagination">
|
||
<el-pagination background layout="total, prev, pager, next"
|
||
:current-page="articleForm.pageIndex" :page-size="articleForm.pageSize" :total="ArtTotal"
|
||
@current-change="ArthandlePageChange"></el-pagination>
|
||
</div> -->
|
||
</div>
|
||
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="articleBox = false">Cancel</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<!-- 测试邮件弹出框 -->
|
||
<el-dialog title="Send test mail" :visible.sync="testEBox" width="500px">
|
||
<el-form ref="testRef" :rules="rules" :model="EmailData" label-width="120px">
|
||
<el-form-item label="Test Email :" prop="test">
|
||
<el-input v-model="EmailData.email" style="width: 280px;" placeholder="Please enter the test email">
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="testEBox = false">Cancel</el-button>
|
||
<el-button type="primary" @click="sendTest">Send test mail</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import 'quill/dist/quill.core.css';
|
||
import 'quill/dist/quill.snow.css';
|
||
import 'quill/dist/quill.bubble.css';
|
||
import {
|
||
quillEditor
|
||
} from 'vue-quill-editor';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
baseUrl: this.Common.baseUrl,
|
||
mediaUrl: this.Common.mediaUrl,
|
||
EmailData: {
|
||
user_id: localStorage.getItem('U_id'),
|
||
email_title: '',
|
||
journal_issn: '',
|
||
journal_id: '',
|
||
library: 'user',
|
||
category: 'keyword',
|
||
keyword: '',
|
||
major: '',
|
||
china_type: 0,
|
||
pagesize: 100,
|
||
range: 1,
|
||
template: '',
|
||
has_hb: 2,
|
||
substance: '',
|
||
substance_top: '',
|
||
substance_bom: '',
|
||
substanceOld: '',
|
||
frequency: 'day',
|
||
beginPage:1 // 开始页数
|
||
},
|
||
keyValue: 0,
|
||
userListNum: 0,
|
||
rangeList: [{
|
||
title: 'Promotion',
|
||
id: 1
|
||
}, {
|
||
title: 'Article Recommendation',
|
||
id: 2
|
||
}],
|
||
numberList: [],
|
||
journalList: [],
|
||
stageList: [],
|
||
templeList: [],
|
||
ubaseList: [{
|
||
title: 'All Users',
|
||
id: 'user'
|
||
}, {
|
||
title: 'Author Database',
|
||
id: 'author'
|
||
}, {
|
||
title: 'Untapped Users',
|
||
id: 'ash'
|
||
}],
|
||
btn_ft: false,
|
||
majorList: [],
|
||
artChoseList: [],
|
||
artTicleList: [],
|
||
articleForm: {
|
||
pageIndex: 1,
|
||
pageSize: 30,
|
||
journal_stage_id: ''
|
||
},
|
||
ArtTotal: 0,
|
||
articleBox: false,
|
||
testEBox: false,
|
||
defaultParams: {
|
||
label: 'major_title',
|
||
value: 'major_id',
|
||
children: 'children',
|
||
checkStrictly: true,
|
||
},
|
||
myTextMark: 'myTextEditor',
|
||
rules: {
|
||
range: [{
|
||
required: true,
|
||
message: 'please select a mail range',
|
||
trigger: 'blur'
|
||
}],
|
||
journal_issn: [{
|
||
required: true,
|
||
message: 'please select a journal',
|
||
trigger: 'blur'
|
||
}],
|
||
journal_id: [{
|
||
required: true,
|
||
message: 'please select a journal',
|
||
trigger: 'blur'
|
||
}],
|
||
library: [{
|
||
required: true,
|
||
message: 'please select a library',
|
||
trigger: 'blur'
|
||
}],
|
||
category: [{
|
||
required: true,
|
||
message: 'please select a personnel',
|
||
trigger: 'blur'
|
||
}],
|
||
template: [{
|
||
required: true,
|
||
message: 'please select a template',
|
||
trigger: 'blur'
|
||
}],
|
||
has_hb: [{
|
||
required: true,
|
||
message: 'please select public image',
|
||
trigger: 'blur'
|
||
}],
|
||
frequency: [{
|
||
required: true,
|
||
message: 'please select a scheduled tasks',
|
||
trigger: 'blur'
|
||
}],
|
||
comment: [{
|
||
required: true,
|
||
message: "please input",
|
||
trigger: "blur"
|
||
}],
|
||
test: [{
|
||
required: true,
|
||
message: "please input",
|
||
trigger: "blur"
|
||
}],
|
||
china_type: [{
|
||
required: true,
|
||
message: "please select",
|
||
trigger: "blur"
|
||
}],
|
||
pagesize: [{
|
||
required: true,
|
||
message: "please select a pagesize",
|
||
trigger: "blur"
|
||
}],
|
||
},
|
||
editorOption: {
|
||
placeholder: 'Please enter...',
|
||
modules: {
|
||
toolbar: {
|
||
container: [
|
||
['bold', 'italic', 'underline', 'strike'],
|
||
[{
|
||
'header': 1
|
||
}, {
|
||
'header': 2
|
||
}],
|
||
[{
|
||
'list': 'ordered'
|
||
}, {
|
||
'list': 'bullet'
|
||
}],
|
||
[{
|
||
'script': 'sub'
|
||
}, {
|
||
'script': 'super'
|
||
}],
|
||
[{
|
||
'size': ['small', false, 'large', 'huge']
|
||
}],
|
||
[{
|
||
'header': [1, 2, 3, 4, 5, 6, false]
|
||
}],
|
||
[{
|
||
'color': []
|
||
}, {
|
||
'background': []
|
||
}],
|
||
[{
|
||
'align': []
|
||
}],
|
||
['link', 'image']
|
||
],
|
||
// 工具栏
|
||
handlers: {
|
||
image: function(value) {
|
||
if (value) {
|
||
// upload点击上传事件
|
||
document.querySelector('.avatar-uploader input').click()
|
||
} else {
|
||
this.quill.format('image', false)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
};
|
||
},
|
||
created: function() {
|
||
this.getData();
|
||
this.changeRange();
|
||
},
|
||
computed: {
|
||
|
||
},
|
||
methods: {
|
||
//获取数据
|
||
getData() {
|
||
this.$api
|
||
.post('api/Chief/getJournalsByEditor', {
|
||
'user_id': this.EmailData.user_id
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.journalList = res.data.journals;
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
|
||
for (let i = 1; i <= 40; i++) {
|
||
this.numberList.push({
|
||
number: i * 5
|
||
})
|
||
}
|
||
|
||
},
|
||
|
||
// 更换期刊
|
||
getIssnMajor() {
|
||
this.EmailData.major = ''
|
||
this.$api
|
||
.post('api/Major/getJournalMajorList', {
|
||
journal_issn: this.EmailData.journal_issn
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.majorList = res.data.majors;
|
||
for (let i = 0; i < this.journalList.length; i++) {
|
||
if (this.EmailData.journal_issn == this.journalList[i].issn) {
|
||
this.EmailData.journal_id = this.journalList[i].journal_id
|
||
this.articleForm.journal_id = this.journalList[i].journal_id
|
||
this.articleForm.journal_title = this.journalList[i].title
|
||
}
|
||
}
|
||
|
||
// 选择分期
|
||
this.$api
|
||
.post('api/Web/getStages', this.articleForm)
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.stageList = res.data.stages;
|
||
this.articleForm.journal_stage_id = this.stageList[0].journal_stage_id
|
||
this.getArticle()
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
|
||
})
|
||
.catch(err => {
|
||
console.log(err);
|
||
});
|
||
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
},
|
||
|
||
// 切换范围获取模板
|
||
changeRange() {
|
||
this.EmailData.template = ''
|
||
this.EmailData.substance = ''
|
||
this.EmailData.substance_top = ''
|
||
this.EmailData.substance_bom = ''
|
||
this.$api
|
||
.post('api/Promotion/getEmailModel', {
|
||
type: this.EmailData.range
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.templeList = res.data.list;
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
},
|
||
|
||
|
||
// 切换模板
|
||
changeTemple(e) {
|
||
for (let i = 0; i < this.templeList.length; i++) {
|
||
if (this.templeList[i].pro_email_id == e) {
|
||
this.EmailData.email_title = this.templeList[i].title
|
||
if (this.EmailData.range == 1) {
|
||
this.EmailData.substance = this.templeList[i].content
|
||
} else if (this.EmailData.range == 2) {
|
||
this.EmailData.substance = this.templeList[i].content.split('{{articles}}\r\n\r\n')
|
||
this.EmailData.substance_top = this.EmailData.substance[0]
|
||
this.EmailData.substance_bom = this.EmailData.substance[1]
|
||
}
|
||
|
||
console.log()
|
||
}
|
||
}
|
||
},
|
||
|
||
// 插入文章列表
|
||
pushArticle() {
|
||
this.EmailData.substance = JSON.parse(JSON.stringify(this.EmailData.substanceOld))
|
||
let artHtml = ''
|
||
if (this.artChoseList.length > 0 && this.EmailData.range == 2) {
|
||
for (let i = 0; i < this.artChoseList.length; i++) {
|
||
artHtml +=
|
||
'<div class="artCLise" style="line-height: 22px;margin-bottom: 15px;padding-bottom: 18px;border-bottom: 1px dashed #4e837480;"><a href="https://www.tmrjournals.com/article.html?J_num=' +
|
||
this
|
||
.artChoseList[i].journal_id + '&a_id=' + this.artChoseList[i].article_id +
|
||
'" target="_blank" style="color: #4e8374;font-weight: bold;"><font style="display: inline-block;width: 7px;height: 7px;border-radius: 10px;margin: 0 3px 0 0;background-color: #4e8374;"></font>' +
|
||
this.artChoseList[i].title +
|
||
'</a><p style="color: #444;font-family: Calibri;font-size: 16px;">' +
|
||
this.artChoseList[i].authortitle + '</p><p style="color: #333;">' + this.artChoseList[i]
|
||
.journal_title +
|
||
'<font style="display:inline-block;margin: 0 20px 0 20px;">|</font><a href="https://www.tmrjournals.cn/public/articlePDF/' +
|
||
this.artChoseList[i].file_pdf +
|
||
'" target="_blank" style="color: #7a2702;"><img src="https://www.tmrjournals.cn/img/link_3.jpg" style="width: 14px;vertical-align: text-bottom;margin: 0 5px 0 0;">PDF</a></p><p><b style="margin: 0 5px 0 0;letter-spacing: -0.5px;color: #4e8374;font-weight: normal;">Cite this article :</b><font v-html="item.cite">' +
|
||
this.artChoseList[i].cite + '</font></p></div>'
|
||
};
|
||
artHtml = artHtml +
|
||
'<br/><style>.artCLise p{margin: 3px 0 0 2px;font-size: 13px;}.artCLise a{text-decoration: none;}.artCLise a:hover{text-decoration: underline;}</style>'
|
||
|
||
|
||
|
||
// for (let i = 0; i < this.artChoseList.length; i++) {
|
||
// artHtml +=
|
||
// '<a href="https://www.tmrjournals.com/article.html?J_num=' + this.artChoseList[
|
||
// i]
|
||
// .journal_id +
|
||
// '&a_id=' + this.artChoseList[i].article_id +
|
||
// '" target="_blank" style="font-size: 14px;line-height: 22px;color: #4e8374;font-weight: bold;"><font style="display: inline-block;width: 7px;height: 7px;border-radius: 10px;margin: 0 3px 0 0;background-color: #4e8374;"></font>' +
|
||
// this.artChoseList[i].title +
|
||
// '</a><p style="color: #444;font-family: Calibri;font-size: 16px;line-height: 20px;">' +
|
||
// this
|
||
// .artChoseList[i]
|
||
// .authortitle + '</p><p style="color: #333;">' + this.artChoseList[i]
|
||
// .journal_title +
|
||
// '<text style="display: inline-block;margin: 0 20px 0 20px;">|</text><a href="https://www.tmrjournals.cn/public/articlePDF/' +
|
||
// this.artChoseList[i].file_pdf +
|
||
// '" target="_blank" style="color: #7a2702;"><img src="https://www.tmrjournals.cn/img/link_3.jpg" style="width: 14px;vertical-align: text-bottom;margin: 0 5px 0 0;">PDF</a></p><p style="margin: 5px 0 15px 2px;padding:0 0 18px 0;line-height: 20px;font-size: 12px;color: #777;border-bottom: 1px dashed #4e837480;"><b style="margin: 0 5px 0 0;letter-spacing: -0.5px;color: #4e8374;font-weight: normal;">Cite this article :</b><font>' +
|
||
// this.artChoseList[i].cite + '</font></p>'
|
||
// };
|
||
|
||
// artHtml =
|
||
// '<div class="artCLise">' + artHtml +
|
||
// '</div><p style="height:20px"></p><style>.artCLise p{margin: 3px 0 0 2px;font-size: 13px;}.artCLise a{text-decoration: none;}.artCLise a:hover{text-decoration: underline;}</style>'
|
||
|
||
if (this.EmailData.substance.indexOf("{{articles}}\r\n\r\n") != -1) {
|
||
this.EmailData.substance = this.EmailData.substance.replace('{{articles}}\r\n\r\n', artHtml)
|
||
// console.log(this.EmailData.substance)
|
||
}
|
||
|
||
|
||
}
|
||
},
|
||
|
||
// 切换人员库-关键词、领域
|
||
getUser() {
|
||
if (this.EmailData.category == 'keyword') {
|
||
if (this.EmailData.keyword == '') {
|
||
this.$message.error('Please fill in the keywords!');
|
||
return
|
||
}
|
||
this.$api
|
||
.post('api/Promotion/getLibUsers', {
|
||
'lib': this.EmailData.library,
|
||
'category': 'keyword',
|
||
'body': this.EmailData.keyword,
|
||
'china_type': this.EmailData.china_type,
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.userListNum = res.data.count;
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
} else if (this.EmailData.category == 'major') {
|
||
this.$api
|
||
.post('api/Promotion/getLibUsers', {
|
||
'lib': this.EmailData.library,
|
||
'category': 'major',
|
||
'body': this.EmailData.major,
|
||
'china_type': this.EmailData.china_type,
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.userListNum = res.data.count;
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
}
|
||
},
|
||
|
||
// 改变人员多选框
|
||
chanProce(e) {
|
||
this.$forceUpdate()
|
||
},
|
||
|
||
// 切换人员范围
|
||
getTarUser() {
|
||
if (this.EmailData.category == 'keyword') {
|
||
if (this.EmailData.keyword != '') {
|
||
this.getUser()
|
||
}
|
||
} else if (this.EmailData.category == 'major') {
|
||
if (this.EmailData.major != '') {
|
||
this.getUser()
|
||
}
|
||
}
|
||
},
|
||
|
||
// 切换搜索方式
|
||
numCateGory() {
|
||
this.userListNum = 0
|
||
this.EmailData.major = ''
|
||
},
|
||
|
||
// 聚焦关键词搜索方式
|
||
gatClearkey() {
|
||
this.EmailData.category = 'keyword'
|
||
this.EmailData.major = ''
|
||
this.userListNum = 0
|
||
},
|
||
|
||
// 选择领域
|
||
majorChange(value) {
|
||
this.EmailData.category = 'major'
|
||
this.EmailData.keyword = ''
|
||
this.userListNum = 0
|
||
if (value.length == 0) {
|
||
this.EmailData.major = ''
|
||
} else {
|
||
this.EmailData.major = value[value.length - 1]
|
||
}
|
||
},
|
||
|
||
|
||
// 文章弹出层
|
||
openArticl() {
|
||
if (this.EmailData.journal_issn == '') {
|
||
this.$message.error('Please select a journal!');
|
||
} else {
|
||
this.articleBox = true
|
||
}
|
||
},
|
||
|
||
// 筛选文章
|
||
getArticle() {
|
||
this.$api
|
||
.post('api/Web/getArticlesByStage', this.articleForm)
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.artTicleList = res.data.articles;
|
||
this.ArtTotal = this.artTicleList.length
|
||
for (let i = 0; i < this.artTicleList.length; i++) {
|
||
this.artTicleList[i].chooState = 0
|
||
for (let j = 0; j < this.artChoseList.length; j++) {
|
||
if (this.artTicleList[i].article_id == this.artChoseList[j].article_id) {
|
||
this.artTicleList[i].chooState = 1
|
||
continue;
|
||
}
|
||
};
|
||
};
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log(err);
|
||
});
|
||
},
|
||
|
||
// 添加文章
|
||
saveArticle(row, e) {
|
||
if (this.artChoseList.length >= 5) {
|
||
this.$message.error('Up to five articles can be selected!');
|
||
return
|
||
}
|
||
this.artTicleList[e].chooState = 1
|
||
this.artChoseList.push(this.artTicleList[e])
|
||
// this.pushArticle()
|
||
},
|
||
|
||
// 删除文章
|
||
deleteArticle(row, e) {
|
||
this.artTicleList[e].chooState = 0
|
||
for (let i = 0; i < this.artChoseList.length; i++) {
|
||
if (this.artChoseList[i].article_id == row.article_id) {
|
||
this.artChoseList.splice(i, 1);
|
||
// this.pushArticle()
|
||
}
|
||
};
|
||
},
|
||
|
||
// 删除已经选择文章
|
||
deleteArticleCho(value, e) {
|
||
this.artChoseList.splice(e, 1);
|
||
for (let i = 0; i < this.artTicleList.length; i++) {
|
||
if (this.artTicleList[i].article_id == value.article_id) {
|
||
this.artTicleList[i].chooState = 0
|
||
this.$forceUpdate()
|
||
// this.pushArticle()
|
||
}
|
||
};
|
||
},
|
||
|
||
// 文章分页导航
|
||
ArthandlePageChange(val) {
|
||
this.$set(this.articleForm, 'pageIndex', val);
|
||
// this.getArticle();
|
||
},
|
||
|
||
// 保存邮件
|
||
saveData() {
|
||
// const reg = /<\/?.+?\/?>/g
|
||
// this.EmailData.substance = this.EmailData.substance.replace(/<p>/gim,"")
|
||
// console.log(this.EmailData.substance)
|
||
|
||
if (this.userListNum == 0) {
|
||
this.$message.error('Please select target personnel!');
|
||
return
|
||
}
|
||
|
||
this.$refs.emailRef.validate((valid) => {
|
||
if (valid) {
|
||
let artHtml = ''
|
||
|
||
if (this.EmailData.range == 1) {
|
||
this.EmailData.template = this.EmailData.substance.replace(/<p><br><\/p>/gim, '<br/>')
|
||
this.EmailData.template = this.EmailData.template.replace(/<p>/gim, "")
|
||
this.EmailData.template = this.EmailData.template.replace(/<\/p>/gim, '<br/>')
|
||
} else if (this.EmailData.range == 2) {
|
||
if (this.artChoseList.length == 0) {
|
||
this.$message.error('Please select articles!');
|
||
return
|
||
} else {
|
||
for (let i = 0; i < this.artChoseList.length; i++) {
|
||
artHtml +=
|
||
'<a href="https://www.tmrjournals.com/article.html?J_num=' + this
|
||
.artChoseList[
|
||
i]
|
||
.journal_id +
|
||
'&a_id=' + this.artChoseList[i].article_id +
|
||
'" target="_blank" style="font-size: 14px;line-height: 22px;color: #4e8374;font-weight: bold;"><font style="display: inline-block;width: 7px;height: 7px;border-radius: 10px;margin: 0 3px 0 0;background-color: #4e8374;"></font>' +
|
||
this.artChoseList[i].title +
|
||
'</a><p style="color: #444;font-family: Calibri;font-size: 16px;line-height: 20px;">' +
|
||
this
|
||
.artChoseList[i]
|
||
.authortitle + '</p><p style="color: #333;">' + this.artChoseList[i]
|
||
.journal_title +
|
||
'<text style="display: inline-block;margin: 0 20px 0 20px;">|</text><a href="https://www.tmrjournals.cn/public/articlePDF/' +
|
||
this.artChoseList[i].file_pdf +
|
||
'" target="_blank" style="color: #7a2702;"><img src="https://www.tmrjournals.cn/img/link_3.jpg" style="width: 14px;vertical-align: text-bottom;margin: 0 5px 0 0;">PDF</a></p><p style="margin: 5px 0 15px 2px;padding:0 0 18px 0;line-height: 20px;font-size: 12px;color: #777;border-bottom: 1px dashed #4e837480;"><b style="margin: 0 5px 0 0;letter-spacing: -0.5px;color: #4e8374;font-weight: normal;">Cite this article :</b><font>' +
|
||
this.artChoseList[i].cite + '</font></p>'
|
||
};
|
||
artHtml =
|
||
'<div class="artCLise">' + artHtml +
|
||
'</div><style>.artCLise p{margin: 3px 0 0 2px;font-size: 13px;}.artCLise a{text-decoration: none;}.artCLise a:hover{text-decoration: underline;}</style>'
|
||
|
||
this.EmailData.substance_top = this.EmailData.substance_top.replace(
|
||
/<p><br><\/p>/gim, '<br/>')
|
||
this.EmailData.substance_top = this.EmailData.substance_top.replace(/<p>/gim, "")
|
||
this.EmailData.substance_top = this.EmailData.substance_top.replace(/<\/p>/gim,
|
||
'<br/>')
|
||
this.EmailData.substance_bom = this.EmailData.substance_bom.replace(
|
||
/<p><br><\/p>/gim, '<br/>')
|
||
this.EmailData.substance_bom = this.EmailData.substance_bom.replace(/<p>/gim, "")
|
||
this.EmailData.substance_bom = this.EmailData.substance_bom.replace(/<\/p>/gim,
|
||
'<br/>')
|
||
|
||
this.EmailData.template = this.EmailData.substance_top + artHtml + this.EmailData
|
||
.substance_bom
|
||
}
|
||
}
|
||
|
||
// if (this.EmailData.template.indexOf("{{articles}}\r\n\r\n") != -1) {
|
||
// this.EmailData.template = this.EmailData.template.replace('{{articles}}\r\n\r\n',
|
||
// artHtml)
|
||
// }
|
||
|
||
this.$api
|
||
.post('api/Promotion/addPromotion', this.EmailData)
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.$message.success('Successfully added promotion task!');
|
||
this.$router.push({
|
||
path: 'disseMRecord',
|
||
});
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
} else {
|
||
this.$message.error('Please complete the information!');
|
||
}
|
||
});
|
||
|
||
|
||
},
|
||
|
||
|
||
// 发送测试邮件
|
||
sendTest() {
|
||
this.$refs.testRef.validate((valid) => {
|
||
if (valid) {
|
||
this.$api
|
||
.post('api/Promotion/pushTestEmail', this.EmailData)
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.$message.success('Successfully send test email!');
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
} else {
|
||
|
||
this.$message.error('Please complete the information!');
|
||
}
|
||
});
|
||
},
|
||
|
||
// 富文本编辑器上传
|
||
uploadSuccess(res) {
|
||
let quill = this.$refs[this.myTextMark].quill;
|
||
// 获取光标所在位置
|
||
let length = quill.getSelection().index
|
||
// 插入图片 res.upurl为服务器返回的图片地址
|
||
quill.insertEmbed(length, 'image', this.mediaUrl + 'promotion/' + res.upurl)
|
||
// 调整光标到最后
|
||
quill.setSelection(length + 1)
|
||
}
|
||
|
||
},
|
||
watch: {
|
||
majorList(newVal) {
|
||
this.keyValue++ //只要监听到数据源发生变化 ，改变keyValue的值，达到重新渲染的效果
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
|
||
<style scoped>
|
||
.d_rol {
|
||
margin: 0 0 20px 0;
|
||
/* border: 2px solid rgba(0, 102, 153, 0.15); */
|
||
padding: 20px 20px 20px 20px;
|
||
border-radius: 10px;
|
||
background-color: rgb(255, 255, 255);
|
||
|
||
}
|
||
|
||
.d_rol>h3 {
|
||
margin: 0 0 25px 0;
|
||
letter-spacing: -0.5px;
|
||
font-size: 16px;
|
||
border-bottom: 2px solid rgba(0, 102, 153, 0.15);
|
||
padding: 0px 0px 15px 6px;
|
||
}
|
||
|
||
|
||
.Email_Data {
|
||
margin: 30px 0 0 0;
|
||
}
|
||
|
||
.Email_Data .el-textarea__inner {
|
||
line-height: 26px;
|
||
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 img {
|
||
width: 100%;
|
||
image-rendering: -webkit-optimize-contrast;
|
||
}
|
||
|
||
.Email_Data .el-upload__tip {
|
||
display: inline-block;
|
||
line-height: 38px;
|
||
margin: 0 0 0 15px;
|
||
color: #888 !important;
|
||
vertical-align: text-bottom;
|
||
}
|
||
|
||
.senderKuan {
|
||
margin: 5px 0 0 0;
|
||
padding: 15px;
|
||
border: 1px solid #00669933;
|
||
background: #fff;
|
||
}
|
||
|
||
.senderKuan .artChosn>a {
|
||
color: #333;
|
||
}
|
||
|
||
.senderKuan .artChosn>a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.senderKuan .artChosn>b {
|
||
color: #bf1010;
|
||
margin: 0 0 0 10px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.senderKuan .artChosn>b:hover {
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
|
||
|
||
|
||
.senderTile {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
display: inline-block;
|
||
text-align: right;
|
||
width: 140px;
|
||
margin: 0 10px 0 0;
|
||
}
|
||
|
||
/deep/.quilStyle {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.tolPeoUse {
|
||
border-top: 1px solid #00669933;
|
||
margin: 20px 0 0 0;
|
||
padding: 0 20px 0 30px;
|
||
}
|
||
|
||
.tolPeoUse b {
|
||
font-size: 20px;
|
||
color: #006699;
|
||
display: inline-block;
|
||
margin: 5px 3px 0 5px;
|
||
}
|
||
|
||
.artTile {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
margin: 0 10px 0 0;
|
||
display: inline-block;
|
||
width: 75px;
|
||
text-align: right;
|
||
}
|
||
|
||
.artChoList {
|
||
margin: 20px 20px 0 20px;
|
||
}
|
||
|
||
.artChoList p {
|
||
margin-bottom: 15px;
|
||
line-height: 22px;
|
||
word-wrap: break-word;
|
||
word-break: normal;
|
||
border: 2px dashed #eee;
|
||
padding: 10px 100px 10px 10px;
|
||
position: relative;
|
||
}
|
||
|
||
.artChoList p>a {
|
||
color: #333;
|
||
}
|
||
|
||
.artChoList p>a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.artChoList p>font {
|
||
margin-right: 5px;
|
||
}
|
||
|
||
|
||
.artChoList .kuangGeo {
|
||
display: block;
|
||
position: absolute;
|
||
width: 15px;
|
||
height: 15px;
|
||
border: 2px solid #eee;
|
||
top: 10px;
|
||
right: 10px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.artChoList .el-icon-check {
|
||
display: block;
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 5px;
|
||
color: #069;
|
||
font-weight: 700;
|
||
font-size: 25px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.emaStyle {
|
||
border: 2px dashed #ccc;
|
||
background-color: #f2f2f2;
|
||
border-radius: 2px;
|
||
padding: 10px;
|
||
}
|
||
|
||
|
||
.emaStyle .artCLise {
|
||
line-height: 22px;
|
||
margin: 15px 20px;
|
||
padding-bottom: 18px;
|
||
border-bottom: 1px dashed #4e837480;
|
||
}
|
||
|
||
.emaStyle .artCLise:nth-last-child(1) {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
|
||
.emaStyle .artCLise>a {
|
||
color: #4e8374;
|
||
font-weight: bold;
|
||
}
|
||
|
||
|
||
.emaStyle .artCLise>a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.emaStyle .artCLise>a>font {
|
||
display: inline-block;
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 10px;
|
||
margin: 0 3px 0 0;
|
||
background-color: #4e8374;
|
||
|
||
|
||
}
|
||
|
||
.emaStyle .artCLise>p {
|
||
margin: 3px 0 0 2px;
|
||
padding-top: 0;
|
||
line-height: 22px;
|
||
color: #777;
|
||
}
|
||
|
||
.emaStyle .artCLise>p>b {
|
||
margin: 0 5px 0 0;
|
||
letter-spacing: -0.5px;
|
||
color: #4e8374;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.emaStyle .artCLise>p>a {
|
||
color: #7a2702;
|
||
}
|
||
|
||
.emaStyle .artCLise>p>a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.emaStyle .artCLise>p>a>img {
|
||
width: 14px;
|
||
vertical-align: text-bottom;
|
||
margin: 0 5px 0 0;
|
||
}
|
||
|
||
.avatar-uploader-foot {
|
||
height: 0;
|
||
}
|
||
|
||
.avatar-uploader-foot .el-upload--text {
|
||
height: 0 !important;
|
||
border: 0;
|
||
}
|
||
</style>
|
||
|
||
|
||
<style>
|
||
.majorSelct {}
|
||
|
||
.majorSelct .el-radio {
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 10;
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
}
|
||
|
||
.majorSelct .el-radio__input {
|
||
visibility: hidden;
|
||
}
|
||
|
||
.majorSelct .el-cascader-node__postfix {
|
||
top: 10px;
|
||
}
|
||
</style>
|