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