293 lines
6.7 KiB
Vue
293 lines
6.7 KiB
Vue
<template>
|
|
<div>
|
|
<div class="crumbs">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item>
|
|
<i class="el-icon-message"></i> Mailbox template
|
|
</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
<div class="container">
|
|
<div class="handle-box">
|
|
<el-input v-model="query.username" placeholder="Please enter" style="width: 200px;">
|
|
</el-input>
|
|
<el-button type="primary" icon="el-icon-search" @click="getDate" style="margin-left: 10px;">Search
|
|
</el-button>
|
|
<el-button type="primary" icon="el-icon-plus" @click="handleAdd()" style="float: right;">
|
|
Add mail template
|
|
</el-button>
|
|
</div>
|
|
|
|
<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
|
|
empty-text="New messages (0)">
|
|
<el-table-column prop="realname" label="Title"></el-table-column>
|
|
<el-table-column label=" " width="198" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button plain type="success" icon="el-icon-view" @click="handleView(scope.row)">Preview
|
|
</el-button>
|
|
<el-button plain type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">Edit
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<div class="pagination">
|
|
<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
|
|
:page-size="query.pageSize" :total="link_Total" @current-change="handlePageChange">
|
|
</el-pagination>
|
|
</div>
|
|
|
|
<!-- 新建邮件弹出框 -->
|
|
<el-dialog title="Add mail template" :visible.sync="addVisible" width="800px">
|
|
<el-form ref="add_Tab" :model="addForm" :rules="rules" label-width="100px">
|
|
<el-form-item label="Title :" prop="title">
|
|
<el-input v-model="addForm.title"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="Content :" prop="content">
|
|
<quill-editor ref="myTextEditor" v-model="addForm.content" :options="editorOption">
|
|
</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="saveEmail">OK</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<!-- 编辑邮件弹出框 -->
|
|
<el-dialog title="Edit mail template" :visible.sync="editVisible" width="800px">
|
|
<el-form ref="edit_Tab" :model="editForm" :rules="rules" label-width="100px">
|
|
<el-form-item label="Title :" prop="title">
|
|
<el-input v-model="editForm.title"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="Content :" prop="content">
|
|
<quill-editor ref="myTextEditor" v-model="editForm.content" :options="editorOption">
|
|
</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="editEmail">OK</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<!-- 预览邮件弹出框 -->
|
|
<el-dialog title="Preview mail template" :visible.sync="viewVisible" width="800px">
|
|
{{viewForm}}
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="viewVisible = false">Cancel</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</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 {
|
|
name: 'partyList',
|
|
data() {
|
|
return {
|
|
mediaUrl: this.Common.mediaUrl,
|
|
userrole: localStorage.getItem('U_status'),
|
|
guest_id: localStorage.getItem('U_id'),
|
|
query: {
|
|
role:0,
|
|
username:'',
|
|
pageIndex: 1,
|
|
pageSize: 15,
|
|
},
|
|
tableData: [],
|
|
link_Total: 0,
|
|
addVisible: false,
|
|
editVisible: false,
|
|
viewVisible: false,
|
|
addForm: {},
|
|
editForm:{},
|
|
viewForm:{},
|
|
rules: {
|
|
title: [{
|
|
required: true,
|
|
message: 'Please enter the title',
|
|
trigger: 'blur'
|
|
}],
|
|
content: [{
|
|
required: true,
|
|
message: 'Please enter the message 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']
|
|
]
|
|
}
|
|
}
|
|
},
|
|
};
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
created() {
|
|
this.getDate()
|
|
},
|
|
methods: {
|
|
// 获取数据
|
|
getDate() {
|
|
this.$api
|
|
.post('api/User/getAllUser', this.query)
|
|
.then(res => {
|
|
if (res.code == 0) {
|
|
this.tableData = res.data.users;
|
|
this.link_Total = res.data.count || 0;
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
|
|
// 添加邮件弹出
|
|
handleAdd(){
|
|
this.addVisible=true
|
|
},
|
|
|
|
// 确定增加
|
|
saveEmail() {
|
|
this.$refs.add_Tab.validate((valid) => {
|
|
if (valid) {
|
|
|
|
} else {
|
|
this.$message.error('error submit!!');
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
|
|
// 编辑邮件弹出
|
|
handleEdit(e){
|
|
this.editVisible=true
|
|
this.editForm=e
|
|
},
|
|
|
|
// 预览邮件弹出层
|
|
handleView(e){
|
|
this.viewVisible=true
|
|
this.viewForm=e
|
|
},
|
|
|
|
// 确定修改
|
|
editEmail() {
|
|
this.$refs.edit_Tab.validate((valid) => {
|
|
if (valid) {
|
|
|
|
} else {
|
|
this.$message.error('error submit!!');
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
|
|
// 分页导航
|
|
handlePageChange(val) {
|
|
this.$set(this.query, 'pageIndex', val);
|
|
this.getDate();
|
|
},
|
|
|
|
// 富文本编辑器
|
|
onEditorChange({
|
|
editor,
|
|
html,
|
|
text
|
|
}) {
|
|
this.content = html;
|
|
},
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
watch: {
|
|
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.handle-box {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.el-button--primary.is-plain:hover {
|
|
background-color: #409EFF !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.zhsoiuStyle {
|
|
color: #006699;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.zhsoiuStyle:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.zhsoiuStyle i {
|
|
margin-right: 3px;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|