1094 lines
32 KiB
Vue
1094 lines
32 KiB
Vue
<template>
|
||
<div>
|
||
<div class="crumbs">
|
||
<el-button type="text" icon="el-icon-arrow-left" @click="goBackInbox" class="back-inbox-btn">
|
||
{{ $t('mailboxSend.backToInbox') }}
|
||
</el-button>
|
||
<el-breadcrumb separator="/">
|
||
<el-breadcrumb-item>
|
||
<i class="el-icon-message"></i> {{ $t('mailboxSend.title') }}
|
||
</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
</div>
|
||
|
||
<div class="container" style="padding-top: 0px;" v-if="showSendEmail">
|
||
<div class="mail_shuru" style="position: relative; display: flex; align-items: center;">
|
||
<span class="mail_tit">{{ $t('mailboxSend.to') }}</span>
|
||
|
||
<div style="flex: 1; display: flex; flex-wrap: wrap; align-items: center;">
|
||
<div class="selected-tags" v-if="queryMail.sendnamelist && queryMail.sendnamelist.length" style="display: inline-block;">
|
||
<el-tag
|
||
v-for="(item, index) in queryMail.sendnamelist"
|
||
:key="item._uid != null ? item._uid : 'to-' + index"
|
||
closable
|
||
@close="removeRecipient(index)"
|
||
type="info"
|
||
size="small"
|
||
style="margin-right: 6px;"
|
||
>
|
||
{{ item.name }}
|
||
</el-tag>
|
||
</div>
|
||
|
||
<el-autocomplete
|
||
v-if="!isToRecipientLimitReached()"
|
||
ref="autocompleteTo"
|
||
class="mail_inp"
|
||
v-model="toInput"
|
||
:fetch-suggestions="fetchUserSuggestions"
|
||
:trigger-on-focus="false"
|
||
placeholder=""
|
||
@select="handleSelectUser"
|
||
@blur="handleToBlur"
|
||
style="width: 200px; flex: 1;"
|
||
>
|
||
<!-- <i slot="suffix" class="el-icon-plus" @click="handleSetLibrary" style="cursor: pointer; color: #006699; font-weight: bold; line-height: 40px; font-size: 16px;"></i> -->
|
||
|
||
<template slot-scope="{ item }">
|
||
<div class="name">
|
||
{{ item.value }} <span style="padding: 4px; color: #ccc;">|</span> {{ item.realname }}
|
||
</div>
|
||
</template>
|
||
</el-autocomplete>
|
||
</div>
|
||
|
||
<!-- <span class="sel_liby" @click="handleSetLibrary" style="position: static; margin-left: 10px;">
|
||
<i class="el-icon-plus"></i>{{ $t('mailboxSend.selectFromLibrary') }}
|
||
</span> -->
|
||
</div>
|
||
<div class="mail_shuru">
|
||
<span class="mail_tit">{{ $t('mailboxSend.subject') }}</span>
|
||
<el-input v-model="queryMail.sendtitle" class="mail_inp" ></el-input>
|
||
</div>
|
||
<!-- <div class="mail_shuru" style="position: relative; display: flex; align-items: center;">
|
||
<span class="mail_tit">{{ $t('mailboxSend.cc') }}</span>
|
||
<div style="flex: 1; display: flex; flex-wrap: wrap; align-items: center;">
|
||
<div class="selected-tags" v-if="ccList && ccList.length" style="display: inline-block;">
|
||
<el-tag
|
||
v-for="(item, index) in ccList"
|
||
:key="item._uid != null ? item._uid : 'cc-' + index"
|
||
closable
|
||
@close="removeCc(index)"
|
||
type="info"
|
||
size="small"
|
||
style="margin-right: 6px;"
|
||
>
|
||
{{ item.name }}
|
||
</el-tag>
|
||
</div>
|
||
<el-autocomplete
|
||
ref="autocompleteCc"
|
||
class="mail_inp"
|
||
v-model="ccInput"
|
||
:fetch-suggestions="fetchUserSuggestions"
|
||
:trigger-on-focus="false"
|
||
placeholder=""
|
||
@select="handleSelectCc"
|
||
@blur="handleCcBlur"
|
||
style="width: 200px; flex: 1;"
|
||
>
|
||
<template slot-scope="{ item }">
|
||
<div class="name">
|
||
{{ item.value }} <span style="padding: 4px; color: #ccc;">|</span> {{ item.realname }}
|
||
</div>
|
||
</template>
|
||
</el-autocomplete>
|
||
</div>
|
||
</div> -->
|
||
|
||
<div class="mail-editor-wrap" style="margin: 20px 0 0 0;">
|
||
<!-- 仿阿里邮箱：工具栏中的 源代码编辑 / 退出源码编辑 -->
|
||
|
||
|
||
<emailCkeditor
|
||
ref="myTextEditor"
|
||
v-model="queryMail.content"
|
||
:is-source-mode="isSourceMode"
|
||
:source-content.sync="sourceContent"
|
||
:source-rows="16"
|
||
:source-placeholder="$t('mailboxSend.sourcePlaceholder')"
|
||
:show-select-template-button="true"
|
||
@onSelectTemplate="showTemplateDialog = true"
|
||
/>
|
||
</div>
|
||
<div class="mail-footer-bar" :style="{ left: footerBarLeft }">
|
||
<div class="sender-info">
|
||
<span class="sender-label">{{ $t('mailboxSend.sender') }}</span>
|
||
<span class="sender-content">
|
||
{{ userMes.realname }} <{{ userMes.email }}>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="action-buttons">
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-s-promotion"
|
||
:loading="sendLoading"
|
||
:disabled="sendLoading"
|
||
:loading-text="$t('mailboxSend.sending')"
|
||
@click="handleSend"
|
||
>
|
||
{{ $t('mailboxSend.send') }}
|
||
</el-button>
|
||
<!-- <el-button size="medium" :loading="saveDraftLoading" :disabled="saveDraftLoading" @click="handleSaveDraft">{{ $t('mailboxSend.saveDraft') }}</el-button> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 选择通讯录 -->
|
||
<el-dialog :title="$t('mailboxSend.selectUser')" :visible.sync="Librarybox" width="900px" :close-on-click-modal="false">
|
||
<el-button type="primary" style="margin: 0 0 15px 0;" icon="el-icon-plus" @click="mailLiyAll()" v-if="LibrarySelection!=''">
|
||
{{ $t('mailboxSend.batchSelection') }}
|
||
</el-button>
|
||
<el-table :data="mail_List" border ref="multipleTable" header-cell-class-name="table-header" @selection-change="handleSelectionChange" :empty-text="$t('mailboxSend.emptyText')">
|
||
<el-table-column type="selection" width="40" align="center" :selectable='checkboxSelect'></el-table-column>
|
||
<el-table-column :label="$t('mailboxSend.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="$t('mailboxSend.account')"></el-table-column>
|
||
<el-table-column :label="$t('mailboxSend.operation')" width="110" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button plain type="primary" icon="el-icon-plus" @click="mailLibAdd(scope.row)">
|
||
{{ $t('mailboxSend.selectBtn') }}
|
||
</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>
|
||
|
||
<template-selector-dialog
|
||
v-if="showTemplateDialog"
|
||
:visible.sync="showTemplateDialog"
|
||
@confirm="handleTemplateApply"
|
||
@close-all-dialogs="closeAllDialogs"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import emailCkeditor from '@/components/page/components/email/CkeditorMail.vue'
|
||
import TemplateSelectorDialog from '@/components/page/components/email/TemplateSelectorDialog.vue'
|
||
import 'multi-items-input'
|
||
import 'multi-items-input/dist/multi-items-input.css'
|
||
import bus from '../common/bus'
|
||
export default {
|
||
data() {
|
||
return {
|
||
baseUrl: this.Common.baseUrl,
|
||
mediaUrl: this.Common.mediaUrl,
|
||
that: this,
|
||
userMes: {},
|
||
queryMail: {
|
||
sendname: [],
|
||
sendnamelist: [],
|
||
sendtitle: '',
|
||
sendcc: '',
|
||
content: '',
|
||
expert_id: ''
|
||
},
|
||
mail_List: [],
|
||
fileL_atta: [],
|
||
fol_low: [{
|
||
value: '1',
|
||
label: 'Template 1'
|
||
}],
|
||
TempForm: {
|
||
board: 0
|
||
},
|
||
queryLibry: {
|
||
pageIndex: 1,
|
||
pageSize: 15,
|
||
username: ''
|
||
},
|
||
LibrForm: {},
|
||
LibrarySelection: [],
|
||
showTemplateDialog: false,
|
||
Librarybox: false,
|
||
link_TotalLibry: 0,
|
||
isSourceMode: false,
|
||
// 源码模式下的完整 HTML（保留 DOCTYPE、html、行内样式等），发送时若在源码模式则用此项
|
||
sourceContent: '',
|
||
|
||
toInput: '',
|
||
// 默认只允许 1 个收件人，后续可按需动态修改
|
||
maxToRecipients: 1,
|
||
toSelecting: false,
|
||
nextToUid: 1,
|
||
ccList: [],
|
||
ccInput: '',
|
||
ccSelecting: false,
|
||
nextCcUid: 1,
|
||
collapseValue: localStorage.getItem('collapse'),
|
||
sendLoading: false,
|
||
sendDebounceTimer: null,
|
||
saveDraftLoading: false,
|
||
selectedTemplateId: '',
|
||
selectedStyleId: '',
|
||
recipientSuggest: {
|
||
keyword: '',
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
totalPages: 1,
|
||
loading: false,
|
||
options: [],
|
||
cb: null
|
||
},
|
||
recipientSuggestScrollHandler: null,
|
||
showSendEmail:true
|
||
};
|
||
},
|
||
components: {
|
||
emailCkeditor,
|
||
TemplateSelectorDialog,
|
||
},
|
||
computed: {
|
||
footerBarLeft() {
|
||
const collapsed = this.collapseValue === true || this.collapseValue === 'true';
|
||
return (collapsed ? 64: 260) + 'px';
|
||
}
|
||
},
|
||
watch: {
|
||
collapseValue: {
|
||
handler() {
|
||
// 监听 collapseValue 变化，footerBarLeft 通过 computed 自动更新
|
||
},
|
||
immediate: true,
|
||
},
|
||
},
|
||
created() {
|
||
this.showSendEmail=true
|
||
this.getDate();
|
||
},
|
||
activated(){
|
||
this.showSendEmail=true
|
||
},
|
||
mounted() {
|
||
bus.$on('collapse-content', (msg) => {
|
||
this.collapseValue = msg;
|
||
});
|
||
document.addEventListener('click', this.handleOutsideAutocompleteClick, true);
|
||
},
|
||
beforeDestroy() {
|
||
bus.$off('collapse-content');
|
||
this.detachRecipientSuggestScroll();
|
||
if (this.sendDebounceTimer) {
|
||
clearTimeout(this.sendDebounceTimer);
|
||
this.sendDebounceTimer = null;
|
||
}
|
||
document.removeEventListener('click', this.handleOutsideAutocompleteClick, true);
|
||
},
|
||
methods: {
|
||
closeAllDialogs() {
|
||
// 点击“去新增模板”后：关闭模板选择弹窗以及可能打开的其它弹窗
|
||
this.Librarybox = false;
|
||
this.showTemplateDialog = false;
|
||
},
|
||
handleOutsideAutocompleteClick(e) {
|
||
const target = e && e.target;
|
||
if (!target) return;
|
||
const inputRef = this.$refs.autocompleteTo;
|
||
const inputEl = inputRef && inputRef.$el ? inputRef.$el : null;
|
||
const inInput = inputEl && inputEl.contains(target);
|
||
const inSuggestion = typeof target.closest === 'function' && !!target.closest('.el-autocomplete-suggestion');
|
||
if (inInput || inSuggestion) return;
|
||
|
||
if (inputRef && typeof inputRef.close === 'function') {
|
||
inputRef.close();
|
||
}
|
||
if (inputRef && inputRef.$refs && inputRef.$refs.input && typeof inputRef.$refs.input.blur === 'function') {
|
||
inputRef.$refs.input.blur();
|
||
}
|
||
},
|
||
isToRecipientLimitReached() {
|
||
const max = Number(this.maxToRecipients || 0);
|
||
if (!max) return false;
|
||
return (this.queryMail.sendnamelist || []).length >= max;
|
||
},
|
||
showToRecipientLimitWarning() {
|
||
const max = Number(this.maxToRecipients || 1);
|
||
this.$message.warning(this.$t('mailboxSend.recipientLimit', { count: max }));
|
||
},
|
||
attachRecipientSuggestScroll() {
|
||
this.detachRecipientSuggestScroll();
|
||
this.$nextTick(() => {
|
||
const wraps = document.querySelectorAll('.el-autocomplete-suggestion__wrap');
|
||
if (!wraps || !wraps.length) return;
|
||
const wrap = wraps[wraps.length - 1];
|
||
const handler = () => {
|
||
if (this.recipientSuggest.loading) return;
|
||
if (this.recipientSuggest.pageIndex >= this.recipientSuggest.totalPages) return;
|
||
const threshold = 24;
|
||
const reachBottom = wrap.scrollTop + wrap.clientHeight >= wrap.scrollHeight - threshold;
|
||
if (reachBottom) {
|
||
this.loadMoreRecipientSuggestions();
|
||
}
|
||
};
|
||
wrap.addEventListener('scroll', handler);
|
||
this.recipientSuggestScrollHandler = { el: wrap, fn: handler };
|
||
});
|
||
},
|
||
detachRecipientSuggestScroll() {
|
||
const h = this.recipientSuggestScrollHandler;
|
||
if (h && h.el && h.fn) {
|
||
h.el.removeEventListener('scroll', h.fn);
|
||
}
|
||
this.recipientSuggestScrollHandler = null;
|
||
},
|
||
normalizeExpertList(list) {
|
||
if (!Array.isArray(list)) return [];
|
||
return list.map((u) => ({
|
||
...u,
|
||
value: u.email || '',
|
||
realname: u.name || u.realname || u.username || '',
|
||
expert_id: u.expert_id || u.id || ''
|
||
}));
|
||
},
|
||
async queryRecipientSuggestions(reset) {
|
||
if (this.recipientSuggest.loading) return;
|
||
const st = this.recipientSuggest;
|
||
if (!st.keyword) {
|
||
st.options = [];
|
||
if (st.cb) st.cb([]);
|
||
return;
|
||
}
|
||
if (reset) {
|
||
st.pageIndex = 1;
|
||
st.totalPages = 1;
|
||
st.options = [];
|
||
} else if (st.pageIndex >= st.totalPages) {
|
||
if (st.cb) st.cb(st.options);
|
||
return;
|
||
} else {
|
||
st.pageIndex += 1;
|
||
}
|
||
st.loading = true;
|
||
try {
|
||
const res = await this.$api.post('api/expert_manage/getList', {
|
||
major_id: '',
|
||
keyword: st.keyword,
|
||
pageIndex: st.pageIndex,
|
||
pageSize: st.pageSize
|
||
});
|
||
const data = (res && res.data) || {};
|
||
const list = this.normalizeExpertList(data.list || []);
|
||
st.totalPages = Number(data.totalPages || data.total_pages || 1) || 1;
|
||
st.options = reset ? list : st.options.concat(list);
|
||
if (st.cb) st.cb(st.options);
|
||
this.attachRecipientSuggestScroll();
|
||
} catch (e) {
|
||
if (st.cb) st.cb(st.options || []);
|
||
} finally {
|
||
st.loading = false;
|
||
}
|
||
},
|
||
loadMoreRecipientSuggestions() {
|
||
this.queryRecipientSuggestions(false);
|
||
},
|
||
handleTemplateApply(payload) {
|
||
// TemplateSelectorDialog 现在返回对象：{ html, journal_id, style_id, template_id, ... }
|
||
const html = payload && typeof payload === 'object' ? (payload.html || '') : String(payload || '');
|
||
const templateId = payload && typeof payload === 'object' ? (payload.template_id || '') : '';
|
||
const styleId = payload && typeof payload === 'object' ? (payload.style_id || '') : '';
|
||
const templateSubject = payload && typeof payload === 'object'
|
||
? ((payload.template && payload.template.subject) || payload.subject || '')
|
||
: '';
|
||
if (!html) {
|
||
this.$message.warning(this.$t('mailTemplate.noTemplateTip') || '未获取到模板内容');
|
||
return;
|
||
}
|
||
|
||
// 始终维护一份内容状态，确保源码模式/富文本模式都能回填
|
||
this.queryMail.content = html;
|
||
this.sourceContent = html;
|
||
|
||
// 优先回填 TinyMCE 实例
|
||
if (window.tinymce && window.tinymce.activeEditor && window.tinymce.activeEditor.setContent) {
|
||
window.tinymce.activeEditor.setContent(html);
|
||
}
|
||
this.selectedTemplateId = templateId ? String(templateId) : '';
|
||
this.selectedStyleId = styleId ? String(styleId) : '';
|
||
// 模板自带 subject：仅当当前主题为空时自动回填
|
||
if (!this.queryMail.sendtitle && templateSubject) {
|
||
this.queryMail.sendtitle = String(templateSubject);
|
||
}
|
||
|
||
// this.$message.success(this.$t('mailboxSend.templateApplied') || 'Template applied successfully!');
|
||
},
|
||
// 切换富文本 / 源代码编辑模式（源码用 sourceContent 保留完整 HTML，可自由来回切换）
|
||
toggleSourceMode() {
|
||
if (this.isSourceMode) {
|
||
// 退出源码 -> 先用 juice 做样式内联，再同步给富文本展示
|
||
if (this.$refs.myTextEditor && this.$refs.myTextEditor.handleInlining) {
|
||
const finalHtml = this.$refs.myTextEditor.handleInlining();
|
||
this.sourceContent = finalHtml || this.sourceContent || '';
|
||
this.queryMail.content = this.sourceContent;
|
||
} else {
|
||
this.queryMail.content = this.sourceContent || '';
|
||
}
|
||
} else {
|
||
// 进入源码：仅当源码区为空时才从富文本同步，避免覆盖你已编辑的完整 HTML
|
||
if (this.sourceContent === '' || this.sourceContent == null) {
|
||
this.sourceContent = this.queryMail.content || '';
|
||
}
|
||
}
|
||
this.isSourceMode = !this.isSourceMode;
|
||
},
|
||
// 返回收件箱（邮箱列表），账号信息从本地缓存读取
|
||
goBackInbox() {
|
||
this.showSendEmail=false
|
||
const currentPath = this.$route.fullPath;
|
||
// 先静默关闭当前标签，强制销毁 keep-alive 缓存，再执行跳转
|
||
bus.$emit('close_tag_by_path', {
|
||
path: currentPath,
|
||
silent: true
|
||
});
|
||
this.$nextTick(() => {
|
||
this.$router.push({ path: '/mailboxCollect' });
|
||
});
|
||
},
|
||
// 收件人自动补全 - 搜索用户
|
||
fetchUserSuggestions(queryString, cb) {
|
||
if (this.isToRecipientLimitReached()) {
|
||
cb([]);
|
||
return;
|
||
}
|
||
const keyword = (queryString || '').trim();
|
||
this.recipientSuggest.keyword = keyword;
|
||
this.recipientSuggest.cb = cb;
|
||
if (!keyword) {
|
||
this.detachRecipientSuggestScroll();
|
||
cb([]);
|
||
return;
|
||
}
|
||
this.queryRecipientSuggestions(true);
|
||
},
|
||
// 收件人输入框失焦：输入内容失去焦点则自动成为一条收件人数据（排除点击下拉项时）
|
||
handleToBlur(e) {
|
||
// 若失焦是因为点击了下拉建议区域，不执行任何逻辑，让 click 触发 select，否则点击会选不中
|
||
const related = e && e.relatedTarget;
|
||
if (related && typeof related.closest === 'function' && related.closest('.el-autocomplete-suggestion')) {
|
||
return;
|
||
}
|
||
const value = (this.toInput || '').trim();
|
||
setTimeout(() => {
|
||
if (this.toSelecting) {
|
||
this.toSelecting = false;
|
||
return;
|
||
}
|
||
if (!value) return;
|
||
if (value.indexOf('@') === -1) {
|
||
this.toInput = '';
|
||
return;
|
||
}
|
||
const exists = (this.queryMail.sendnamelist || []).some(item => item.name === value);
|
||
if (!exists) {
|
||
if (this.isToRecipientLimitReached()) {
|
||
this.showToRecipientLimitWarning();
|
||
this.toInput = '';
|
||
return;
|
||
}
|
||
this.queryMail.sendnamelist.push({
|
||
id: null,
|
||
name: value,
|
||
_uid: this.nextToUid++,
|
||
});
|
||
this.queryMail.expert_id = '';
|
||
this.queryMail.sendname = (this.queryMail.sendnamelist || []).map(i => i.name);
|
||
}
|
||
this.toInput = '';
|
||
}, 150);
|
||
},
|
||
// 选中某个用户作为收件人
|
||
handleSelectUser(user) {
|
||
this.toSelecting = true;
|
||
if (!user || !user.email) return;
|
||
const email = user.email;
|
||
// 去重
|
||
const exists = (this.queryMail.sendnamelist || []).some(item => item.name === email);
|
||
if (!exists) {
|
||
if (this.isToRecipientLimitReached()) {
|
||
this.showToRecipientLimitWarning();
|
||
this.toInput = '';
|
||
return;
|
||
}
|
||
this.queryMail.sendnamelist.push({
|
||
id: user.expert_id || user.user_id || user.id || null,
|
||
name: email,
|
||
_uid: this.nextToUid++,
|
||
});
|
||
this.queryMail.expert_id = user.expert_id || user.user_id || user.id || '';
|
||
// 同步简单数组
|
||
this.queryMail.sendname = (this.queryMail.sendnamelist || []).map(i => i.name);
|
||
}
|
||
// 清空输入框，便于继续输入下一个
|
||
this.toInput = '';
|
||
},
|
||
// 删除已选收件人
|
||
removeRecipient(index) {
|
||
if (index < 0) return;
|
||
this.queryMail.sendnamelist.splice(index, 1);
|
||
this.queryMail.sendname = (this.queryMail.sendnamelist || []).map(i => i.name);
|
||
if (!this.queryMail.sendnamelist.length) {
|
||
this.queryMail.expert_id = '';
|
||
}
|
||
},
|
||
// CC 输入框失焦：与 To 相同逻辑，输入失去焦点则自动成为一条数据（排除点击下拉项时）
|
||
handleCcBlur(e) {
|
||
const related = e && e.relatedTarget;
|
||
if (related && typeof related.closest === 'function' && related.closest('.el-autocomplete-suggestion')) {
|
||
return;
|
||
}
|
||
const value = (this.ccInput || '').trim();
|
||
setTimeout(() => {
|
||
if (this.ccSelecting) {
|
||
this.ccSelecting = false;
|
||
return;
|
||
}
|
||
if (!value) return;
|
||
if (value.indexOf('@') === -1) {
|
||
this.ccInput = '';
|
||
return;
|
||
}
|
||
const exists = (this.ccList || []).some(item => item.name === value);
|
||
if (!exists) {
|
||
this.ccList.push({
|
||
id: null,
|
||
name: value,
|
||
_uid: this.nextCcUid++,
|
||
});
|
||
}
|
||
this.ccInput = '';
|
||
}, 150);
|
||
},
|
||
// 选中某个用户作为 CC（与 To 相同逻辑）
|
||
handleSelectCc(user) {
|
||
this.ccSelecting = true;
|
||
if (!user || !user.email) return;
|
||
const email = user.email;
|
||
const exists = (this.ccList || []).some(item => item.name === email);
|
||
if (!exists) {
|
||
this.ccList.push({
|
||
id: user.user_id || user.id || null,
|
||
name: email,
|
||
_uid: this.nextCcUid++,
|
||
});
|
||
}
|
||
this.ccInput = '';
|
||
},
|
||
// 删除已选 CC
|
||
removeCc(index) {
|
||
if (index < 0) return;
|
||
this.ccList.splice(index, 1);
|
||
},
|
||
// 根据本地缓存（优先）或路由参数获取发件邮箱信息，用于展示发件人
|
||
getDate() {
|
||
// 1. 优先从本地缓存读取
|
||
const storedEmailId = localStorage.getItem('mailboxCollect_j_email_id');
|
||
const jEmailId = storedEmailId || this.$route.query.j_email_id;
|
||
if (!jEmailId) {
|
||
this.userMes = {};
|
||
return;
|
||
}
|
||
this.$api
|
||
.post('api/email_client/getOneEmail', { j_email_id: jEmailId })
|
||
.then(res => {
|
||
if (res && res.code === 0 && res.data && res.data.email) {
|
||
const email = res.data.email;
|
||
this.userMes = {
|
||
realname: email.smtp_from_name || email.smtp_user || '',
|
||
email: email.smtp_user || '',
|
||
};
|
||
} else {
|
||
this.userMes = {};
|
||
}
|
||
})
|
||
.catch(() => {
|
||
this.userMes = {};
|
||
});
|
||
},
|
||
// 获取通讯录数据
|
||
getLibary() {
|
||
this.$api
|
||
.post('api/Reviewer/researchUser', {keywords: this.queryLibry.username})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.mail_List = res.data.list;
|
||
this.link_TotalLibry = res.data.list.length || 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);
|
||
});
|
||
},
|
||
|
||
// 发送邮件：api/email_client/sendTemplateStyleText
|
||
handleSend() {
|
||
// 防抖：快速连点只触发最后一次
|
||
if (this.sendLoading) return;
|
||
if (this.sendDebounceTimer) clearTimeout(this.sendDebounceTimer);
|
||
this.sendDebounceTimer = setTimeout(() => {
|
||
this.sendDebounceTimer = null;
|
||
if (this.sendLoading) return;
|
||
|
||
const toList = (this.queryMail.sendnamelist || []).map((item) => item.name).filter(Boolean);
|
||
const expert_id_list = (this.queryMail.sendnamelist || []).map((item) => item.expert_id).filter(Boolean);
|
||
if (!toList.length) {
|
||
this.$message.warning(this.$t('mailboxSend.validateTo'));
|
||
return;
|
||
}
|
||
if (!this.queryMail.sendtitle) {
|
||
this.$message.warning(this.$t('mailboxSend.validateSubject'));
|
||
return;
|
||
}
|
||
|
||
// journal_id 优先从本地缓存获取，兼容旧的路由参数
|
||
const storedJournalId = localStorage.getItem('mailboxCollect_journal_id');
|
||
const journalId = storedJournalId || this.$route.query.journal_id;
|
||
const storedEmailId = localStorage.getItem('mailboxCollect_j_email_id');
|
||
const jEmailId = storedEmailId || this.$route.query.j_email_id;
|
||
|
||
if (!journalId) {
|
||
this.$message.warning(this.$t('mailboxSend.needAccount'));
|
||
return;
|
||
}
|
||
if (!jEmailId) {
|
||
this.$message.warning(this.$t('mailboxSend.needAccount'));
|
||
return;
|
||
}
|
||
if (!this.selectedTemplateId || !this.selectedStyleId) {
|
||
this.$message.warning(this.$t('mailboxSend.selectTemplateStyleFirst'));
|
||
return;
|
||
}
|
||
|
||
this.sendLoading = true;
|
||
const params = {
|
||
journal_id: String(journalId),
|
||
template_id: String(this.selectedTemplateId),
|
||
to_email: toList.join(','),
|
||
style_id: String(this.selectedStyleId),
|
||
expert_id: expert_id_list.join(',') || '1',
|
||
j_email_id: String(jEmailId),
|
||
};
|
||
|
||
const self = this;
|
||
this.$api
|
||
.post('api/email_client/sendTemplateStyleTest', params)
|
||
.then((res) => {
|
||
if (res && res.code === 0) {
|
||
self.$message.success(self.$t('mailboxSend.sendSuccess'));
|
||
self.queryMail.sendnamelist = [];
|
||
self.queryMail.sendtitle = '';
|
||
self.queryMail.sendcc = '';
|
||
self.ccList = [];
|
||
self.queryMail.content = '';
|
||
self.sourceContent = '';
|
||
self.selectedTemplateId = '';
|
||
self.selectedStyleId = '';
|
||
self.fileL_atta = [];
|
||
self.goBackInbox();
|
||
} else {
|
||
self.$message.error((res && res.msg) || self.$t('mailboxSend.sendFail'));
|
||
}
|
||
})
|
||
.catch(() => {
|
||
self.$message.error(self.$t('mailboxSend.sendFail'));
|
||
})
|
||
.finally(() => {
|
||
self.sendLoading = false;
|
||
});
|
||
}, 600);
|
||
},
|
||
// 保存草稿（防抖：请求中禁用按钮）
|
||
handleSaveDraft() {
|
||
if (this.saveDraftLoading) return;
|
||
this.saveDraftLoading = true;
|
||
// TODO: 调用保存草稿接口，此处仅防抖占位
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this.saveDraftLoading = false;
|
||
}, 300);
|
||
});
|
||
},
|
||
|
||
// 选择通讯录-弹出框
|
||
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) {
|
||
if (this.isToRecipientLimitReached()) {
|
||
this.showToRecipientLimitWarning();
|
||
return;
|
||
}
|
||
this.queryMail.sendname.push(e.email)
|
||
this.queryMail.sendnamelist.push({
|
||
id: null,
|
||
name: e.email,
|
||
_uid: this.nextToUid++,
|
||
})
|
||
this.getLibary();
|
||
},
|
||
// 批量保存通讯录
|
||
mailLiyAll() {
|
||
console.log(this.LibrarySelection)
|
||
const max = Number(this.maxToRecipients || 0);
|
||
const current = (this.queryMail.sendnamelist || []).length;
|
||
const remain = max > 0 ? Math.max(0, max - current) : this.LibrarySelection.length;
|
||
if (remain <= 0) {
|
||
this.showToRecipientLimitWarning();
|
||
return;
|
||
}
|
||
for (let i = 0; i < this.LibrarySelection.length; i++) {
|
||
if (i >= remain) break;
|
||
this.queryMail.sendname.push(this.LibrarySelection[i].email)
|
||
this.queryMail.sendnamelist.push({
|
||
id: null,
|
||
name: this.LibrarySelection[i].email,
|
||
_uid: this.nextToUid++,
|
||
})
|
||
}
|
||
this.getLibary();
|
||
},
|
||
|
||
|
||
|
||
|
||
|
||
// 回车方框输入框
|
||
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 scoped>
|
||
.crumbs {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
.back-inbox-btn {
|
||
margin-right: 12px;
|
||
padding-left: 0;
|
||
}
|
||
.mail_shuru {
|
||
font-size: 14px;
|
||
padding: 0 0 5px 0;
|
||
margin: 0 0 10px 0;
|
||
border-bottom: 1px solid #ccc;
|
||
}
|
||
|
||
.mail_tit {
|
||
width: 60px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.mail_inp {
|
||
display: inline-block;
|
||
width: 100%;
|
||
margin: 0 15px 0 0;
|
||
border: 0;
|
||
}
|
||
|
||
.mail_inp ::v-deep .el-input__inner {
|
||
border: 1px solid #fff !important;
|
||
}
|
||
|
||
.up_newstyle {
|
||
margin-left: 15px;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.up_newstyle ::v-deep .el-upload--text {
|
||
background-color: #006699;
|
||
border: 1px solid #006699;
|
||
padding: 5px 15px;
|
||
}
|
||
|
||
.up_newstyle ::v-deep .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 ::v-deep .el-upload--text {
|
||
height: 0 !important;
|
||
border: 0;
|
||
}
|
||
/* 让输入框的边框在平时不可见，只有在交互时体现，对齐邮件系统风格 */
|
||
.mail_inp ::v-deep .el-input__inner {
|
||
border: none !important;
|
||
border-bottom: 0px solid #fff !important;
|
||
padding-right: 30px;
|
||
}
|
||
|
||
.mail_inp ::v-deep .el-input__suffix {
|
||
right: 5px;
|
||
transition: all .3s;
|
||
}
|
||
|
||
.mail_inp ::v-deep .el-input__suffix:hover {
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
/* 调整容器对齐 */
|
||
.mail_shuru {
|
||
display: flex;
|
||
align-items: flex-start; /* 考虑到多行标签，对齐顶部 */
|
||
min-height: 40px;
|
||
line-height: 40px;
|
||
}
|
||
/* 底部操作栏容器 */
|
||
.mail-footer-bar {
|
||
margin-top: 20px;
|
||
padding: 10px 15px;
|
||
background-color: #f8f9fa; /* 浅灰色背景，类似图1 */
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
justify-content: space-between; /* 左右分布 */
|
||
align-items: center;
|
||
}
|
||
|
||
/* 发件人信息样式 */
|
||
.sender-info {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.sender-label {
|
||
font-weight: bold;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.sender-content {
|
||
color: #006699; /* 保持你代码中的蓝色 */
|
||
}
|
||
|
||
/* 按钮组样式 */
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
|
||
.mail-footer-bar {
|
||
position: fixed;
|
||
bottom: 0;
|
||
|
||
|
||
right: 0;
|
||
z-index: 10;
|
||
box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
/* Quill 工具栏“源代码编辑”按钮文案 */
|
||
/* 仿阿里邮箱：源代码编辑 工具栏条 */
|
||
.editor-toolbar-bar {
|
||
border: 1px solid #dcdfe6;
|
||
border-bottom: none;
|
||
background: #fafafa;
|
||
padding: 8px 12px;
|
||
border-radius: 4px 4px 0 0;
|
||
}
|
||
.toolbar-source-btn {
|
||
color: #409eff;
|
||
padding: 0 4px;
|
||
}
|
||
.toolbar-source-btn.exit {
|
||
color: #909399;
|
||
}
|
||
.source-editor-box {
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 0 0 4px 4px;
|
||
overflow: hidden;
|
||
}
|
||
.source-editor-box .el-textarea__inner {
|
||
border: none;
|
||
border-radius: 0;
|
||
font-family: Consolas, Monaco, monospace;
|
||
font-size: 13px;
|
||
}
|
||
|
||
</style>
|