314 lines
7.7 KiB
Vue
314 lines
7.7 KiB
Vue
<template>
|
|
<div>
|
|
<div class="crumbs">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item>
|
|
<i class="el-icon-message"></i> Promotion email management
|
|
</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="add_Selection">Add template
|
|
</el-button>
|
|
</div>
|
|
<el-table :data="tableData" row-key="eid" border class="table" ref="multipleTable" default-expand-all
|
|
header-cell-class-name="table-header" :tree-props="{children: 'children', hasChildren: true}"
|
|
empty-text="New template (0)">
|
|
<el-table-column label="Template Range" width="220">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.epid==0">
|
|
{{scope.row.etitle}}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="Template Name" prop="econtent">
|
|
<template slot-scope="scope">
|
|
<p v-if="scope.row.epid!=0">
|
|
{{scope.row.econtent}}
|
|
<br>
|
|
{{scope.row.etitle}}
|
|
</p>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="Number of clicks" width="90" align="center">
|
|
<template slot-scope="scope" v-if="scope.row.epid!=0">
|
|
{{scope.row.num}}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="" width="200" align="center">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.epid!=0">
|
|
<el-button type="primary" plain size="mini" icon="el-icon-edit"
|
|
@click="handleEdit(scope.row)">
|
|
Edit
|
|
</el-button>
|
|
<el-button type="danger" plain size="mini" icon="el-icon-delete"
|
|
@click="handleDelete(scope.row)">
|
|
Delete
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<!-- 添加弹出框 -->
|
|
<el-dialog title="Add template" :visible.sync="addVisible" width="850px">
|
|
<el-form ref="add_Form" :model="addForm" :rules="rules" label-width="150px">
|
|
<el-form-item label="Template name :" prop="etitle">
|
|
<el-input v-model="addForm.etitle"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="Mail Range :" prop="range">
|
|
<el-select v-model="addForm.range" placeholder="Please select a range" @change="changeRange()"
|
|
style="width: 240px;">
|
|
<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="Content :" prop="econtent">
|
|
<quill-editor ref="myTextEditor" v-model="addForm.econtent" :options="editorOption"
|
|
class="quilStyle">
|
|
</quill-editor>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="addVisible = false;">Cancel</el-button>
|
|
<el-button type="primary" @click="saveAdd(addForm)">OK</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<!-- 编辑弹出框 -->
|
|
<el-dialog title="Edit template" :visible.sync="editVisible" width="850px">
|
|
<el-form ref="edit_Form" :model="editForm" :rules="rules" label-width="150px">
|
|
<el-form-item label="Template name :" prop="etitle">
|
|
<el-input v-model="editForm.etitle"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="Mail Range :" prop="range">
|
|
<el-select v-model="editForm.range" placeholder="Please select a range" @change="changeRange()"
|
|
style="width: 240px;">
|
|
<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="Content :" prop="econtent">
|
|
<quill-editor ref="myTextEditor" v-model="editForm.econtent" :options="editorOption"
|
|
class="quilStyle">
|
|
</quill-editor>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="editVisible = false;">Cancel</el-button>
|
|
<el-button type="primary" @click="saveEdit(editForm)">OK</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
addForm: {
|
|
etitle: '',
|
|
econtent: ''
|
|
},
|
|
editForm: {
|
|
etitle: '',
|
|
econtent: ''
|
|
},
|
|
tableData: [],
|
|
addVisible: false,
|
|
editVisible: false,
|
|
rangeList: [{
|
|
title: 'Appointment',
|
|
id: 1
|
|
}, {
|
|
title: 'Article Recommendation',
|
|
id: 2
|
|
}, {
|
|
title: 'Promotion',
|
|
id: 3
|
|
}],
|
|
rules: {
|
|
etitle: [{
|
|
required: true,
|
|
message: 'Please enter a template title',
|
|
trigger: 'blur'
|
|
}],
|
|
range: [{
|
|
required: true,
|
|
message: 'Please select a range',
|
|
trigger: 'blur'
|
|
}],
|
|
econtent: [{
|
|
required: true,
|
|
message: 'Please enter template content',
|
|
trigger: 'blur'
|
|
}],
|
|
},
|
|
editorOption: {
|
|
placeholder: 'Please enter...',
|
|
modules: {
|
|
toolbar: {
|
|
container: [
|
|
['bold', 'italic', 'underline', 'strike'],
|
|
['blockquote', 'code-block'],
|
|
[{
|
|
'header': 1
|
|
}, {
|
|
'header': 2
|
|
}],
|
|
[{
|
|
'list': 'ordered'
|
|
}, {
|
|
'list': 'bullet'
|
|
}],
|
|
[{
|
|
'script': 'sub'
|
|
}, {
|
|
'script': 'super'
|
|
}],
|
|
[{
|
|
'indent': '-1'
|
|
}, {
|
|
'indent': '+1'
|
|
}],
|
|
[{
|
|
'direction': 'rtl'
|
|
}],
|
|
[{
|
|
'size': ['small', false, 'large', 'huge']
|
|
}],
|
|
[{
|
|
'header': [1, 2, 3, 4, 5, 6, false]
|
|
}],
|
|
[{
|
|
'color': []
|
|
}, {
|
|
'background': []
|
|
}],
|
|
[{
|
|
'font': []
|
|
}],
|
|
[{
|
|
'align': []
|
|
}],
|
|
['link']
|
|
]
|
|
}
|
|
}
|
|
},
|
|
};
|
|
},
|
|
created: function() {
|
|
this.getData();
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
methods: {
|
|
//获取数据
|
|
getData() {
|
|
this.$api
|
|
.post('api/Email/getAllEmailTemplate')
|
|
.then(res => {
|
|
if (res.code == 0) {
|
|
this.tableData = res.data.templates;
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
// 添加操作
|
|
add_Selection(index, row) {
|
|
this.addVisible = true;
|
|
},
|
|
// 保存添加
|
|
saveAdd(addForm) {
|
|
this.$refs.add_Form.validate((valid) => {
|
|
if (valid) {
|
|
this.$api
|
|
.post('api/Email/addEmailTemplate', this.addForm)
|
|
.then(res => {
|
|
if (res.code == 0) {
|
|
this.addVisible = false;
|
|
this.$refs.add_Form.resetFields();
|
|
this.$message.success('Template added successfully!');
|
|
this.getData();
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
// 编辑操作
|
|
handleEdit(row) {
|
|
this.editForm = row
|
|
this.editVisible = true
|
|
},
|
|
// 保存编辑
|
|
saveEdit(editForm) {
|
|
|
|
},
|
|
// 删除操作
|
|
handleDelete(row) {
|
|
// 二次确认删除
|
|
this.$confirm('Are you sure to delete this template "' + row.etitle + '"?', 'Tips', {
|
|
distinguishCancelAndClose: true,
|
|
confirmButtonText: 'OK',
|
|
cancelButtonText: 'Cancel'
|
|
})
|
|
.then(() => {
|
|
this.$api
|
|
.post('api/Email/delEmailTemplate', 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(() => {});
|
|
},
|
|
|
|
|
|
// 富文本编辑器
|
|
onEditorChange({
|
|
editor,
|
|
html,
|
|
text
|
|
}) {
|
|
this.addForm.econtent = html;
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.handle-box {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.red {
|
|
color: #ff0000;
|
|
}
|
|
</style>
|