0
This commit is contained in:
徐哼唧L
552
src/components/page/mailboxSend.vue
Normal file
552
src/components/page/mailboxSend.vue
Normal file
@@ -0,0 +1,552 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item>
|
||||
<i class="el-icon-message"></i> Mailbox Send
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="mail_shuru" style="position: relative;">
|
||||
<span class="mail_tit">Addressee :</span>
|
||||
<span class="sel_liby" @click="handleSetLibrary">
|
||||
<i class="el-icon-plus"></i>Select from library
|
||||
</span>
|
||||
<!-- <el-input v-model="queryMail.sendname" class="mail_inp"></el-input> -->
|
||||
<multi-items-input v-model="queryMail.sendnamelist" placeholder="" separator="" @select="selectHandle" @delete="deleteHandle"
|
||||
:selection-only="false" class="dxk_inp" @blur="blueHandle"></multi-items-input>
|
||||
</div>
|
||||
<div class="mail_shuru">
|
||||
<span class="mail_tit">Mail Subject :</span>
|
||||
<el-input v-model="queryMail.sendtitle" class="mail_inp"></el-input>
|
||||
</div>
|
||||
<div class="mail_shuru">
|
||||
<span class="mail_tit">CC :</span>
|
||||
<el-input v-model="queryMail.sendcc" class="mail_inp"></el-input>
|
||||
<!-- <multi-items-input v-model="queryMail.sendnamelist" placeholder="" separator="" @select="selectHandle" @delete="deleteHandle"
|
||||
:selection-only="false" class="dxk_inp" @blur="blueHandle"></multi-items-input> -->
|
||||
</div>
|
||||
<div class="mail_shuru" style="border: 0;">
|
||||
<span class="mail_tit">Attachments :</span>
|
||||
<el-upload class="upload-demo up_newstyle" :action="this.baseUrl + 'api/Article/up_file/type/attr'" accept=".jpg, .png, .rar, .zip"
|
||||
name="atta" :before-upload="beforeupload_atta" :on-error="uperr_atta" :on-success="upSuccess_atta" :limit="30"
|
||||
:on-exceed="alertlimit" :on-remove="removefile_atta" :file-list="fileL_atta">
|
||||
<div class="el-upload__text">
|
||||
<em>Upload</em>
|
||||
</div>
|
||||
<!-- <div class="el-upload__tip" slot="tip">Only compressed files can be uploaded(.rar,.zip)</div> -->
|
||||
</el-upload>
|
||||
|
||||
</div>
|
||||
<p class="sel_moud" @click="handleSetMoudle">
|
||||
<i class="el-icon-brush"></i>Template selection
|
||||
</p>
|
||||
<div style="margin: 20px 0 0 0;">
|
||||
<quill-editor ref="myTextEditor" v-model="queryMail.content" :options="editorOption"></quill-editor>
|
||||
<el-upload class="avatar-uploader-mail" :action="baseUrl+'api/Suggest/upImg'" name="img" :show-file-list="false"
|
||||
:on-success="uploadSuccess">
|
||||
</el-upload>
|
||||
<p style="margin-top: 10px;font-size: 14px;">
|
||||
Sender :<span style="color: #006699;margin: 0 0 0 15px;">{{userMes.realname}} < {{userMes.email}} ></span>
|
||||
</p>
|
||||
</div>
|
||||
<div style="margin: 20px 0 0 0;">
|
||||
|
||||
<el-button type="primary" icon="el-icon-s-promotion" @click="handleSend" style="">Send</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选择通讯录 -->
|
||||
<el-dialog title="Select User" :visible.sync="Librarybox" width="900px">
|
||||
<el-button type="primary" style="margin: 0 0 15px 0;" icon="el-icon-plus" @click="mailLiyAll()" v-if="LibrarySelection!=''">Batch
|
||||
Selection</el-button>
|
||||
<el-table :data="mail_List" border ref="multipleTable" header-cell-class-name="table-header" @selection-change="handleSelectionChange" empty-text="New messages (0)">
|
||||
<el-table-column type="selection" width="40" align="center" :selectable='checkboxSelect'></el-table-column>
|
||||
<el-table-column label="Email">
|
||||
<template slot-scope="scope">
|
||||
<b class="el-icon-check" v-if="scope.row.select_mark==1" style="color:#f74c4c;margin-right: 5px;font-weight: bold;"></b>
|
||||
{{scope.row.email}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="account" label="Account"></el-table-column>
|
||||
<el-table-column label=" " width="110" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button plain type="primary" icon="el-icon-plus" @click="mailLibAdd(scope.row)">Select</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination background layout="total, prev, pager, next" :current-page="queryLibry.pageIndex" :page-size="queryLibry.pageSize"
|
||||
:total="link_TotalLibry" @current-change="handlePageChangeLibry"></el-pagination>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 选择模板 -->
|
||||
<el-dialog title="Select template" :visible.sync="Templatebox" width="620px">
|
||||
<el-form ref="Tempform" :model="TempForm" label-width="225px">
|
||||
<el-form-item label="Choose Template :">
|
||||
<el-select v-model="TempForm.board" placeholder=" " @change="select_tem($event)" style="width: 220px;">
|
||||
<el-option :key="0" label="None" :value="0"></el-option>
|
||||
<el-option v-for="item in fol_low" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Preview Formatted Document :">
|
||||
<img src="../../assets/img/img.jpg" alt="" style="width: 250px;">
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="Templatebox = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="saveTemplate">Save</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入富文本quill-editor相关组件依赖
|
||||
import {
|
||||
quillEditor,
|
||||
Quill
|
||||
} from 'vue-quill-editor'
|
||||
// import {
|
||||
// container,
|
||||
// QuillWatch
|
||||
// } from 'quill-image-extend-module'
|
||||
// import ImageResize from 'quill-image-resize-module' // 引用，调整图片大小
|
||||
// Quill.register('modules/imageResize', ImageResize)
|
||||
import 'multi-items-input'
|
||||
import 'multi-items-input/dist/multi-items-input.css'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
baseUrl: this.Common.baseUrl,
|
||||
mediaUrl: this.Common.mediaUrl,
|
||||
that: this,
|
||||
userMes: {},
|
||||
queryMail: {
|
||||
sendname: [],
|
||||
sendnamelist: [{
|
||||
id: null,
|
||||
name: "atr@tmrjournals.com"
|
||||
}, {
|
||||
id: null,
|
||||
name: "tmrtheory@tmrjournals.com"
|
||||
}],
|
||||
sendtitle: '',
|
||||
sendcc: '',
|
||||
content: ''
|
||||
},
|
||||
mail_List: [],
|
||||
fileL_atta: [],
|
||||
fol_low: [{
|
||||
value: '1',
|
||||
label: 'Template 1'
|
||||
}],
|
||||
TempForm: {
|
||||
board: 0
|
||||
},
|
||||
queryLibry: {
|
||||
pageIndex: 1,
|
||||
pageSize: 15,
|
||||
username: ''
|
||||
},
|
||||
LibrForm: {},
|
||||
LibrarySelection: [],
|
||||
Templatebox: false,
|
||||
Librarybox: false,
|
||||
link_TotalLibry: 0,
|
||||
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', 'image']
|
||||
],
|
||||
// 工具栏
|
||||
handlers: {
|
||||
image: function(value) {
|
||||
if (value) {
|
||||
// upload点击上传事件
|
||||
document.querySelector('.avatar-uploader input').click()
|
||||
} else {
|
||||
this.quill.format('image', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 调整图片大小
|
||||
// imageResize: {
|
||||
// displayStyles: {
|
||||
// backgroundColor: 'black',
|
||||
// border: 'none',
|
||||
// color: 'white'
|
||||
// },
|
||||
// modules: ['Resize', 'DisplaySize', 'Toolbar']
|
||||
// }
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getDate();
|
||||
this.getLibary();
|
||||
},
|
||||
// components: {
|
||||
// quillEditor
|
||||
// },
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 获取初始用户数据
|
||||
getDate() {
|
||||
this.$api
|
||||
.post('api/User/getUserDetail', {
|
||||
'user_id': localStorage.getItem('U_id')
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
this.userMes = res.data.user
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
// 获取通讯录数据
|
||||
getLibary() {
|
||||
this.$api
|
||||
.post('api/User/getAllUser', this.queryLibry)
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
this.mail_List = res.data.users;
|
||||
this.link_TotalLibry = res.data.count || 0;
|
||||
for (let i = 0; i < this.mail_List.length; i++) {
|
||||
this.mail_List[i].select_mark = 0
|
||||
for (let j = 0; j < this.queryMail.sendnamelist.length; j++) {
|
||||
if (this.queryMail.sendnamelist[j].name == this.mail_List[i].email) {
|
||||
this.mail_List[i].select_mark = 1 // 禁用
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
},
|
||||
|
||||
// 发送邮件
|
||||
handleSend() {
|
||||
console.log(this.queryMail)
|
||||
},
|
||||
|
||||
// 选择通讯录-弹出框
|
||||
handleSetLibrary() {
|
||||
this.Librarybox = true
|
||||
console.log(this.LibrarySelection)
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.LibrarySelection = val;
|
||||
},
|
||||
// 通讯录禁用
|
||||
checkboxSelect(row, rowIndex) {
|
||||
let mar_dis = 0
|
||||
for (let i = 0; i < this.queryMail.sendnamelist.length; i++) {
|
||||
if (this.queryMail.sendnamelist[i].name == row.email) {
|
||||
mar_dis += 1 // 禁用
|
||||
} else {
|
||||
mar_dis += 0 // 不禁用
|
||||
}
|
||||
}
|
||||
if (mar_dis == 1) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
},
|
||||
// 保存通讯录
|
||||
mailLibAdd(e) {
|
||||
this.queryMail.sendname.push(e.email)
|
||||
this.queryMail.sendnamelist.push({
|
||||
id: null,
|
||||
name: e.email
|
||||
})
|
||||
this.getLibary();
|
||||
},
|
||||
// 批量保存通讯录
|
||||
mailLiyAll() {
|
||||
console.log(this.LibrarySelection)
|
||||
for (let i = 0; i < this.LibrarySelection.length; i++) {
|
||||
this.queryMail.sendname.push(this.LibrarySelection[i].email)
|
||||
this.queryMail.sendnamelist.push({
|
||||
id: null,
|
||||
name: this.LibrarySelection[i].email
|
||||
})
|
||||
}
|
||||
this.getLibary();
|
||||
},
|
||||
|
||||
// 模板选择-弹出框
|
||||
handleSetMoudle() {
|
||||
this.Templatebox = true
|
||||
},
|
||||
// 保存模板
|
||||
saveTemplate() {
|
||||
|
||||
},
|
||||
|
||||
// 下拉换模板预览
|
||||
select_tem(e) {
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 回车方框输入框
|
||||
blueHandle() {
|
||||
console.log('456789')
|
||||
},
|
||||
// ip控制 - 回车确定
|
||||
selectHandle(arr, obj) {
|
||||
this.queryMail.sendname = []
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
this.queryMail.sendname.push(arr[i].name)
|
||||
}
|
||||
},
|
||||
// ip控制 - backspace确定
|
||||
deleteHandle(obj, arr) {
|
||||
this.queryMail.sendname = []
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
this.queryMail.sendname.push(arr[i].name)
|
||||
}
|
||||
},
|
||||
|
||||
// 分页导航-通讯录
|
||||
handlePageChangeLibry(val) {
|
||||
this.$set(this.queryLibry, 'pageIndex', val);
|
||||
this.getLibary();
|
||||
},
|
||||
|
||||
// 富文本编辑器
|
||||
onEditorChange({
|
||||
editor,
|
||||
html,
|
||||
text
|
||||
}) {
|
||||
this.content = html;
|
||||
},
|
||||
|
||||
// 上传成功
|
||||
uploadSuccess(res) {
|
||||
let quill = this.$refs.myTextEditor.quill;
|
||||
|
||||
// 获取光标所在位置
|
||||
let length = quill.getSelection().index
|
||||
// 插入图片 res.upurl为服务器返回的图片地址
|
||||
quill.insertEmbed(length, 'image', this.baseUrl + res.data.icon)
|
||||
// 调整光标到最后
|
||||
quill.setSelection(length + 1)
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 上传文件
|
||||
upSuccess_atta(res, file) {
|
||||
if (res.code == 0) {
|
||||
this.queryMail.attr = [];
|
||||
for (var ii in fileList) {
|
||||
var url = fileList[ii].response.upurl;
|
||||
this.form.attr.push('picturesAndTables/' + url);
|
||||
}
|
||||
} else {
|
||||
this.$message.error('service error：' + res.msg);
|
||||
}
|
||||
},
|
||||
beforeupload_atta(file) {
|
||||
|
||||
},
|
||||
removefile_atta(file, fileList) {
|
||||
this.queryMail.picturesAndTables = [];
|
||||
for (var ii in fileList) {
|
||||
var url = fileList[ii].response.upurl;
|
||||
this.queryMail.picturesAndTables.push('picturesAndTables/' + url);
|
||||
}
|
||||
},
|
||||
uperr_atta(err) {
|
||||
this.$message.error('Upload error');
|
||||
},
|
||||
alertlimit() {
|
||||
this.$message.error('The maximum number of uploaded files has been exceeded');
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.mail_shuru {
|
||||
font-size: 14px;
|
||||
padding: 0 0 5px 0;
|
||||
margin: 0 0 10px 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.mail_tit {
|
||||
width: 90px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mail_inp {
|
||||
display: inline-block;
|
||||
width: 550px;
|
||||
margin: 0 15px 0 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.mail_inp .el-input__inner {
|
||||
border: 1px solid #fff !important;
|
||||
}
|
||||
|
||||
.up_newstyle {
|
||||
margin-left: 15px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.up_newstyle .el-upload--text {
|
||||
background-color: #006699;
|
||||
border: 1px solid #006699;
|
||||
padding: 5px 15px;
|
||||
/* margin-left: 10px; */
|
||||
}
|
||||
|
||||
.up_newstyle .el-upload__text em {
|
||||
color: #fff !important;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
.jw-container {
|
||||
margin-top: 0;
|
||||
background-color: #fff !important;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 75%;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.jw-container .jw__container {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.jw-container .jw__container input {
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.jw-container .pre-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.jw-container .point-container {
|
||||
margin: 2px 0 1px;
|
||||
}
|
||||
|
||||
.jw-container .point-container .label {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background: #eef9ff;
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
|
||||
.sel_liby {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 0;
|
||||
color: #006699;
|
||||
font-weight: bold;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.sel_moud {
|
||||
font-size: 14px;
|
||||
margin: -15px 0 0 0;
|
||||
text-align: right;
|
||||
color: #006699;
|
||||
font-weight: bold;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.sel_moud:hover,
|
||||
.sel_liby:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sel_moud i,
|
||||
.sel_liby i {
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
.avatar-uploader-mail {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.avatar-uploader-mail .el-upload--text {
|
||||
height: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user