553 lines
14 KiB
Vue
553 lines
14 KiB
Vue
<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>
|