708 lines
17 KiB
Vue
708 lines
17 KiB
Vue
<template>
|
|
<div>
|
|
<div class="crumbs">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item>
|
|
<i class="el-icon-message"></i> Promotion Record
|
|
</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
<div class="container_state">
|
|
<div class="handle-box">
|
|
<el-button type="primary" icon="el-icon-plus" class="handle-del" @click="addTtask()">
|
|
Add email promotion task
|
|
</el-button>
|
|
<!-- <el-button type="warning" icon="el-icon-document-copy" @click="addTemple()">
|
|
Mail Template
|
|
</el-button> -->
|
|
</div>
|
|
<p v-if="tableData.length==0" style="color: #6f6f6f;font-size: 18px;margin-top: 30px;text-align: center;">No
|
|
task</p>
|
|
<div v-for="item in tableData" class="taskList" :style="stateChange(item.range,item.is_end)">
|
|
<div style="text-align: right;padding-right: 60px;">
|
|
<el-button type="primary" size="mini" icon="el-icon-view" @click="handleSend(item)">
|
|
Preview mail
|
|
</el-button>
|
|
<el-button type="success" size="mini" icon="el-icon-postcard" @click="handleTest(item)">
|
|
Send test mail
|
|
</el-button>
|
|
<el-button type="warning" size="mini" icon="el-icon-finished" @click="handleTaske(item,1)"
|
|
v-if="item.is_end==1">
|
|
Open Task
|
|
</el-button>
|
|
<el-button type="info" size="mini" icon="el-icon-circle-close" @click="handleTaske(item,2)"
|
|
v-if="item.is_end==0">
|
|
Close Task
|
|
</el-button>
|
|
<el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(item)">
|
|
Delete
|
|
</el-button>
|
|
</div>
|
|
<!-- <div class="taskRow" style="font-size: 16px;margin:-23px 0 15px 0;letter-spacing: -0.5px;">
|
|
<b>{{decjuRange(item.range)}}</b>
|
|
</div> -->
|
|
<div class="taskRow">
|
|
<font>
|
|
<i class="el-icon-paperclip"></i>
|
|
Promoting journal :
|
|
</font>
|
|
{{item.journal_title}}
|
|
</div>
|
|
<div class="taskRow">
|
|
<font>
|
|
<i class="el-icon-user"></i>
|
|
Target library :
|
|
</font>
|
|
{{decjuSendata(item.library)}}
|
|
<p v-if="item.category=='major'" style="display: inline-block;">
|
|
({{decjuCountry(item.china_type)}} , {{item.major_str}})
|
|
</p>
|
|
<p v-if="item.category=='keyword'" style="display: inline-block;">
|
|
({{decjuCountry(item.china_type)}} , {{item.keyword}})
|
|
</p>
|
|
</div>
|
|
<div class="taskRow">
|
|
<font>
|
|
<i class="el-icon-message"></i>
|
|
Mail title :
|
|
</font>
|
|
{{item.email_title}}
|
|
</div>
|
|
<div class="taskRow">
|
|
<font>
|
|
<i class="el-icon-time"></i>
|
|
Scheduled Tasks :
|
|
</font>
|
|
{{timefreSDel(item.frequency)}}
|
|
</div>
|
|
<div class="taskRow">
|
|
<font>
|
|
<i class="el-icon-position"></i>
|
|
Sent personnel :
|
|
</font>
|
|
<b style="color: #006699">{{item.user_count}}</b> in total,
|
|
<b style="color: #006699">{{item.pushed_num}}</b> people have been sent,
|
|
send <b style="color: #006699">{{item.pagesize}}</b> people each time.
|
|
<!-- <div style="margin: 10px 0 0 120px;">
|
|
<p v-for="item in numbeoList" class="sentPeale">
|
|
<font :style="item.disfor?'background-color:#F56C6C':'background-color:#006699'"></font>
|
|
<b class="el-icon-success" v-if="item.disfor" style="color: #159900;"></b>
|
|
<b class="el-icon-error" v-if="!item.disfor" style="color: #F56C6C;"></b>
|
|
{{item.title}}
|
|
</p>
|
|
</div> -->
|
|
</div>
|
|
<div class="ribbon-lanren" v-if="item.is_end==0">
|
|
<div class="blue">In Progress</div>
|
|
</div>
|
|
|
|
<div class="ribbon-lanren" v-if="item.is_end==1">
|
|
<div class="gray">Unexecuted</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 预览弹出框 -->
|
|
<el-dialog title="Preview mail messages" :visible.sync="sendVisible" :close-on-click-modal="false"
|
|
width="880px">
|
|
<el-form ref="send_Form" :model="sendForm" :rules="rules" label-width="160px">
|
|
<!-- <el-form-item label="Target personnel :" prop="senProce">
|
|
<el-checkbox-group v-model="sendForm.senProce" @change="chanProce">
|
|
<el-checkbox v-for="item in numbeoList" :label="item.id" :key="item.id" :disabled="item.disfor">
|
|
{{item.title}}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item> -->
|
|
<!-- <el-form-item label="Mail Range :">
|
|
<div>{{decjuRange(sendForm.range)}}</div>
|
|
</el-form-item> -->
|
|
<el-form-item label="Promoting journal :">
|
|
<div>{{sendForm.journal_title}}</div>
|
|
</el-form-item>
|
|
<el-form-item label="Target library :">
|
|
<div>
|
|
{{decjuSendata(sendForm.library)}}
|
|
<p v-if="sendForm.category=='major'" style="display: inline-block;">
|
|
({{decjuCountry(sendForm.china_type)}} , {{sendForm.major_str}})
|
|
</p>
|
|
<p v-if="sendForm.category=='keyword'" style="display: inline-block;">
|
|
({{decjuCountry(sendForm.china_type)}} , {{sendForm.keyword}})
|
|
</p>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="Mail Template :" prop="email_title">
|
|
<div>
|
|
{{sendForm.email_title}}
|
|
</div>
|
|
<!-- <el-input v-model="sendForm.email_title"></el-input> -->
|
|
</el-form-item>
|
|
<el-form-item label="Content :" prop="substance">
|
|
<div class="senderKuan">
|
|
<img src="../../assets/img/mailPT.png" style="margin-bottom: -10px;" v-if="sendForm.has_hb==1">
|
|
<div style="background-color: #fff;">
|
|
<div v-html="sendForm.template" style="padding: 20px;word-wrap: break-word;word-break: normal;">
|
|
</div>
|
|
<!-- <quill-editor ref="myTextEditor" v-model="sendForm.template" :options="editorOption">
|
|
</quill-editor> -->
|
|
</div>
|
|
<img src="../../assets/img/mailPB.png" v-if="sendForm.has_hb==1">
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="Scheduled Tasks :">
|
|
{{timefreSDel(sendForm.frequency)}}
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="sendVisible = false;">Cancel</el-button>
|
|
<!-- <el-button type="primary" @click="saveSend(sendForm)">Save mail</el-button> -->
|
|
</span>
|
|
</el-dialog>
|
|
|
|
|
|
<!-- 测试邮件弹出框 -->
|
|
<el-dialog title="Send test mail" :visible.sync="testEBox" width="500px" :close-on-click-modal="false">
|
|
<el-form ref="testRef" :rules="rules" :model="testEForm" label-width="120px">
|
|
<el-form-item label="Mail title :">
|
|
{{testEForm.email_title}}
|
|
</el-form-item>
|
|
<el-form-item label="Test Email :" prop="email">
|
|
<el-input v-model="testEForm.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>
|
|
|
|
<!-- 开关任务弹出框 -->
|
|
<el-dialog title="" :visible.sync="taskBox" width="500px" :close-on-click-modal="false">
|
|
<div style="position: relative;">
|
|
<i class="el-icon-warning"
|
|
style="color: #E6A23C;font-size:30px;margin-right: 5px;position: absolute;top: 5px;left: 10px;"></i>
|
|
<p style="font-size: 15px;line-height: 26px;padding: 5px 35px 0px 50px;word-break: normal;">
|
|
<font v-if="taskForm.index==2">
|
|
Are you sure want to stop executing the email '
|
|
<b style="letter-spacing: -0.5px;">{{taskForm.email_title}}</b>' task?
|
|
</font>
|
|
<font v-if="taskForm.index==1">
|
|
Are you sure want to start executing the email '
|
|
<b style="letter-spacing: -0.5px;">{{taskForm.email_title}}</b>' task?
|
|
<br>
|
|
The task cycle is <b>{{timefreSDel(taskForm.frequency)}}</b>
|
|
</font>
|
|
</p>
|
|
</div>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="taskBox = false">Cancel</el-button>
|
|
<el-button type="primary" @click="gengTask">OK</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 {
|
|
edit_id: localStorage.getItem('U_id'),
|
|
tableData: [],
|
|
sendForm: {},
|
|
sendVisible: false,
|
|
testEForm: {
|
|
email: ''
|
|
},
|
|
testEBox: false,
|
|
rangeList: [{
|
|
title: 'Promotion',
|
|
id: 1
|
|
}, {
|
|
title: 'Article Recommendation',
|
|
id: 2
|
|
}],
|
|
numbeoList: [{
|
|
title: '1-100',
|
|
id: 1,
|
|
disfor: true
|
|
}, {
|
|
title: '101-200',
|
|
id: 2,
|
|
disfor: false
|
|
}, {
|
|
title: '201-300',
|
|
id: 3,
|
|
disfor: false
|
|
}],
|
|
taskBox: false,
|
|
taskForm: {},
|
|
rules: {
|
|
senProce: [{
|
|
required: true,
|
|
message: 'Please select target personnel',
|
|
trigger: 'blur'
|
|
}],
|
|
email: [{
|
|
required: true,
|
|
message: 'Please enter a email',
|
|
trigger: 'blur'
|
|
}],
|
|
email_title: [{
|
|
required: true,
|
|
message: 'Please enter email title',
|
|
trigger: 'blur'
|
|
}],
|
|
substance: [{
|
|
required: true,
|
|
message: 'Please enter email substance',
|
|
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': []
|
|
}],
|
|
]
|
|
}
|
|
},
|
|
|
|
}
|
|
};
|
|
},
|
|
created: function() {
|
|
this.getData();
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
methods: {
|
|
//获取数据
|
|
getData() {
|
|
this.$api
|
|
.post('api/Promotion/getPromotions', {
|
|
user_id: this.edit_id
|
|
})
|
|
.then(res => {
|
|
if (res.code == 0) {
|
|
this.tableData = res.data.list
|
|
for (let i = 0; i < this.tableData.length; i++) {
|
|
this.tableData[i].journal_title = this.tableData[i].journal.title
|
|
}
|
|
} else {
|
|
this.$message.error('res.msg');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
|
|
// 编辑操作
|
|
handleSend(row) {
|
|
this.sendForm = row
|
|
this.sendForm.senProce = []
|
|
this.sendVisible = true
|
|
},
|
|
|
|
// 保存编辑
|
|
saveSend(sendForm) {
|
|
this.$refs.send_Form.validate((valid) => {
|
|
if (valid) {
|
|
|
|
} else {
|
|
this.$message.error('Please complete the information!');
|
|
}
|
|
});
|
|
},
|
|
|
|
// 测试邮件弹出
|
|
handleTest(e) {
|
|
this.testEForm.pro_id = e.pro_id;
|
|
this.testEForm.email_title = e.email_title;
|
|
// this.testEForm.email = '';
|
|
this.testEBox = true
|
|
},
|
|
|
|
// 发送测试邮件
|
|
sendTest() {
|
|
this.$refs.testRef.validate((valid) => {
|
|
if (valid) {
|
|
this.$api
|
|
.post('api/Promotion/pushTestEmail', this.testEForm)
|
|
.then(res => {
|
|
if (res.code == 0) {
|
|
this.$message.success('Successfully send test email!');
|
|
this.testEBox = false
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
} else {
|
|
this.$message.error('Please complete the information!');
|
|
}
|
|
});
|
|
},
|
|
|
|
|
|
// 开启关闭任务
|
|
handleTaske(row, index) {
|
|
this.taskForm.email_title = row.email_title
|
|
this.taskForm.frequency = row.frequency
|
|
this.taskForm.pro_id = row.pro_id
|
|
this.taskForm.index = index
|
|
this.taskBox = true
|
|
},
|
|
// 开启关闭任务确认
|
|
gengTask() {
|
|
let bianUrl
|
|
if (this.taskForm.index == 1) {
|
|
bianUrl = 'api/Promotion/startPromotion'
|
|
}
|
|
if (this.taskForm.index == 2) {
|
|
bianUrl = 'api/Promotion/stopPromotion'
|
|
}
|
|
this.$api
|
|
.post(bianUrl, this.taskForm)
|
|
.then(res => {
|
|
if (res.code == 0) {
|
|
this.$message.success('Succeeded!');
|
|
this.taskBox = false
|
|
this.getData();
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
|
|
// 删除操作
|
|
handleDelete(row) {
|
|
// 二次确认删除
|
|
this.$confirm('Are you sure to delete this email "' + row.email_title + '"?', 'Tips', {
|
|
distinguishCancelAndClose: true,
|
|
confirmButtonText: 'OK',
|
|
cancelButtonText: 'Cancel'
|
|
})
|
|
.then(() => {
|
|
this.$api
|
|
.post('api/Promotion/delPromotion', row)
|
|
.then(res => {
|
|
if (res.code == 0) {
|
|
this.$message.success('Delete succeeded!');
|
|
this.getData();
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
|
|
// 添加邮件任务
|
|
addTtask() {
|
|
this.$router.push({
|
|
path: 'disseMinate',
|
|
});
|
|
},
|
|
|
|
// 添加模板
|
|
addTemple() {
|
|
this.$router.push({
|
|
path: 'disseMTemple',
|
|
});
|
|
},
|
|
|
|
// 任务范围
|
|
decjuRange(e) {
|
|
let phrase = '';
|
|
switch (e) {
|
|
case 1:
|
|
phrase = 'Promotion';
|
|
break;
|
|
case 2:
|
|
phrase = 'Article Recommendation';
|
|
break;
|
|
}
|
|
return phrase;
|
|
},
|
|
|
|
// 人员范围
|
|
decjuSendata(e) {
|
|
let phrase = '';
|
|
switch (e) {
|
|
case 'user':
|
|
phrase = 'All Users';
|
|
break;
|
|
case 'author':
|
|
phrase = 'Author Database';
|
|
break;
|
|
case 'ash':
|
|
phrase = 'Untapped Users';
|
|
break;
|
|
}
|
|
return phrase;
|
|
},
|
|
|
|
// 人员国家
|
|
decjuCountry(e){
|
|
let country = '';
|
|
switch (e) {
|
|
case 0:
|
|
country = 'All countries';
|
|
break;
|
|
case 1:
|
|
country = 'Only China';
|
|
break;
|
|
case 2:
|
|
country = 'Without China';
|
|
break;
|
|
}
|
|
return country;
|
|
},
|
|
|
|
// 发送时间
|
|
timefreSDel(e) {
|
|
let phrase = '';
|
|
switch (e) {
|
|
case 'day':
|
|
phrase = 'Day (explanatory note: 10:00 - 12:00)';
|
|
break;
|
|
case 'week':
|
|
phrase = 'Week (explanatory note: Monday - Tuesday)';
|
|
break;
|
|
case 'month':
|
|
phrase = 'Month (explanatory note: 1st - 5th)';
|
|
break;
|
|
}
|
|
return phrase;
|
|
},
|
|
|
|
// 改变人员多选框
|
|
chanProce(e) {
|
|
this.$forceUpdate()
|
|
},
|
|
|
|
// 列表颜色
|
|
stateChange(value, contol) {
|
|
let str = '';
|
|
let sgr = '';
|
|
let skr = '';
|
|
switch (contol) {
|
|
case 0:
|
|
str = '#5a90e10d;';
|
|
sgr = '#5a90e14d;';
|
|
skr = '0px 0px 4px #5a90e133;';
|
|
break;
|
|
case 1:
|
|
str = '#8888880d;';
|
|
sgr = '#8888884d;';
|
|
skr = '0px 0px 4px #88888833;';
|
|
break;
|
|
}
|
|
return 'background-color:' + str + ';border-color:' + sgr + ';box-shadow:' + skr;
|
|
},
|
|
|
|
// 富文本编辑器
|
|
onEditorChange({
|
|
editor,
|
|
html,
|
|
text
|
|
}) {
|
|
this.sendForm.substance = html;
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.handle-box {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.red {
|
|
color: #ff0000;
|
|
}
|
|
|
|
.taskList {
|
|
color: #333;
|
|
margin: 0 0 20px 0;
|
|
font-size: 14px;
|
|
border-radius: 5px;
|
|
border: 1px solid #EBEEF5;
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.taskRow {
|
|
margin: 0 0 5px 0;
|
|
line-height: 24px;
|
|
}
|
|
|
|
|
|
|
|
.taskRow>font {
|
|
font-size: 13px;
|
|
color: #666b7a;
|
|
display: inline-block;
|
|
margin: 0 10px 0 0;
|
|
}
|
|
|
|
.taskRow>font>i {
|
|
margin: 0 3px 0 0;
|
|
}
|
|
|
|
.sentPeale {
|
|
display: inline-block;
|
|
margin-right: 40px;
|
|
}
|
|
|
|
.sentPeale font {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
background-color: #000;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.sentPeale b {
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
display: inline-block;
|
|
vertical-align: text-bottom;
|
|
margin: 0 3px 0 0;
|
|
}
|
|
|
|
|
|
.senderKuan {
|
|
border: 2px dashed #ccc;
|
|
background-color: #f2f2f2;
|
|
border-radius: 2px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.senderKuan img {
|
|
width: 100%;
|
|
image-rendering: -webkit-optimize-contrast;
|
|
}
|
|
|
|
.lanren {
|
|
margin: 50px auto;
|
|
width: 280px;
|
|
height: 180px;
|
|
background: white;
|
|
border-radius: 10px;
|
|
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
|
|
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
|
|
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
|
|
position: relative;
|
|
z-index: 90;
|
|
}
|
|
|
|
.ribbon-lanren {
|
|
width: 85px;
|
|
height: 88px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: -3px;
|
|
right: -3px;
|
|
}
|
|
|
|
.ribbon-lanren div {
|
|
position: relative;
|
|
padding: 7px 0;
|
|
left: -5px;
|
|
top: 15px;
|
|
width: 120px;
|
|
font: bold 12px Sans-Serif;
|
|
color: #333;
|
|
text-align: center;
|
|
-webkit-transform: rotate(45deg);
|
|
-moz-transform: rotate(45deg);
|
|
-ms-transform: rotate(45deg);
|
|
-o-transform: rotate(45deg);
|
|
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
|
|
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
|
|
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.ribbon-lanren .blue {
|
|
|
|
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
|
|
|
|
background-color: #006699cc;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
|
|
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
|
|
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
|
|
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
|
|
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
.ribbon-lanren .gray {
|
|
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
|
|
|
|
background-color: #e3e0e0;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
|
|
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
|
|
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
|
|
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
|
|
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
|
|
color: #6a6340;
|
|
}
|
|
</style>
|