邮件模版
This commit is contained in:
19719
package-lock.json
generated
19719
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -8,11 +8,15 @@
|
|||||||
"build": "vue-cli-service build"
|
"build": "vue-cli-service build"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@ckeditor/ckeditor5-build-classic": "^34.2.0",
|
||||||
|
"@ckeditor/ckeditor5-source-editing": "^34.2.0",
|
||||||
|
"@ckeditor/ckeditor5-vue2": "^3.0.1",
|
||||||
"@stripe/stripe-js": "^5.5.0",
|
"@stripe/stripe-js": "^5.5.0",
|
||||||
"@tinymce/tinymce-vue": "^3.0.1",
|
"@tinymce/tinymce-vue": "^3.0.1",
|
||||||
"@vue/reactivity": "^3.5.13",
|
"@vue/reactivity": "^3.5.13",
|
||||||
"axios": "^0.18.0",
|
"axios": "^0.18.0",
|
||||||
"babel-polyfill": "^6.26.0",
|
"babel-polyfill": "^6.26.0",
|
||||||
|
"ckeditor5-custom-project": "file:ckeditor5-builder-47.6.0",
|
||||||
"clipboard": "^2.0.11",
|
"clipboard": "^2.0.11",
|
||||||
"cnpm": "^9.4.0",
|
"cnpm": "^9.4.0",
|
||||||
"docx": "^9.1.0",
|
"docx": "^9.1.0",
|
||||||
@@ -25,6 +29,7 @@
|
|||||||
"html2canvas": "^1.4.1",
|
"html2canvas": "^1.4.1",
|
||||||
"install": "^0.13.0",
|
"install": "^0.13.0",
|
||||||
"jszip": "^3.10.1",
|
"jszip": "^3.10.1",
|
||||||
|
"juice": "^11.1.1",
|
||||||
"katex": "^0.16.21",
|
"katex": "^0.16.21",
|
||||||
"mammoth": "^1.5.1",
|
"mammoth": "^1.5.1",
|
||||||
"mathlive": "^0.104.0",
|
"mathlive": "^0.104.0",
|
||||||
|
|||||||
@@ -1,402 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="crumbs">
|
|
||||||
<el-breadcrumb separator="/">
|
|
||||||
<el-breadcrumb-item>{{ $t('sidebar.tools') }}</el-breadcrumb-item>
|
|
||||||
<el-breadcrumb-item>{{ $t('sidebar.scholarCrawlers') }}</el-breadcrumb-item>
|
|
||||||
</el-breadcrumb>
|
|
||||||
</div>
|
|
||||||
<div class="container">
|
|
||||||
<el-card class="box-card">
|
|
||||||
<el-form
|
|
||||||
ref="searchForm"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
label-width="80px"
|
|
||||||
:inline="false"
|
|
||||||
class="search-form"
|
|
||||||
@submit.native.prevent
|
|
||||||
>
|
|
||||||
<div class="search-bar">
|
|
||||||
<el-form-item label="Keyword" prop="keyword" class="search-input-item">
|
|
||||||
<el-input
|
|
||||||
v-model="form.keyword"
|
|
||||||
placeholder="Please input keyword"
|
|
||||||
clearable
|
|
||||||
@keyup.enter.native="handleSearch"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<div class="search-actions">
|
|
||||||
<el-button type="primary" icon="el-icon-search" :loading="loading" @click="handleSearch">
|
|
||||||
Search
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
type="success"
|
|
||||||
icon="el-icon-download"
|
|
||||||
:loading="exportLoading"
|
|
||||||
:disabled="!form.keyword"
|
|
||||||
@click="handleExport"
|
|
||||||
>
|
|
||||||
Export Excel
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
<el-card
|
|
||||||
v-if="hasSearched"
|
|
||||||
class="box-card"
|
|
||||||
style="margin-top: 20px"
|
|
||||||
>
|
|
||||||
<div class="total-bar">
|
|
||||||
Total: <span class="total-number">{{ total }}</span>
|
|
||||||
</div>
|
|
||||||
<el-table
|
|
||||||
v-loading="loading"
|
|
||||||
:data="tableData"
|
|
||||||
border
|
|
||||||
stripe
|
|
||||||
style="width: 100%;"
|
|
||||||
class="table"
|
|
||||||
header-cell-class-name="table-header"
|
|
||||||
empty-text="No data, please search first"
|
|
||||||
>
|
|
||||||
<el-table-column type="index" label="No." width="60" align="center" :index="tableIndex" />
|
|
||||||
<el-table-column
|
|
||||||
v-for="col in columns"
|
|
||||||
:key="col"
|
|
||||||
:prop="col"
|
|
||||||
:label="formatColumnLabel(col)"
|
|
||||||
:min-width="getColumnWidth(col)"
|
|
||||||
:width="getColumnFixedWidth(col)"
|
|
||||||
/>
|
|
||||||
<el-table-column label="Paper Count" width="140" align="center">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<div class="paper-count-cell">
|
|
||||||
<span class="paper-count-number">{{ scope.row.paperCount }}</span>
|
|
||||||
<el-button
|
|
||||||
v-if="scope.row.paperCount"
|
|
||||||
type="primary"
|
|
||||||
size="mini"
|
|
||||||
plain
|
|
||||||
@click="showPapers(scope.row)"
|
|
||||||
>
|
|
||||||
Detail
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<div class="pagination">
|
|
||||||
<el-pagination
|
|
||||||
background
|
|
||||||
layout="total, sizes, prev, pager, next"
|
|
||||||
:total="total"
|
|
||||||
:current-page="page"
|
|
||||||
:page-sizes="[10, 20, 50, 100]"
|
|
||||||
:page-size="per_page"
|
|
||||||
@current-change="handlePageChange"
|
|
||||||
@size-change="handleSizeChange"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
<el-dialog title="Papers" :visible.sync="papersDialogVisible" width="70vw">
|
|
||||||
<div class="paper-expert-info">
|
|
||||||
<div><strong>Name:</strong> {{ currentExpert.name || currentExpert.realname }}</div>
|
|
||||||
<div><strong>Email:</strong> {{ currentExpert.email }}</div>
|
|
||||||
<div><strong>Affiliation:</strong> {{ currentExpert.affiliation }}</div>
|
|
||||||
</div>
|
|
||||||
<el-table :data="currentPapers" border stripe style="width: 100%">
|
|
||||||
<el-table-column type="index" label="No." width="60" align="center" />
|
|
||||||
<el-table-column prop="article_id" label="Article ID" width="180" />
|
|
||||||
<el-table-column prop="journal" label="Journal" width="340" />
|
|
||||||
<el-table-column prop="title" label="Title" />
|
|
||||||
</el-table>
|
|
||||||
<span slot="footer" class="dialog-footer">
|
|
||||||
<el-button @click="papersDialogVisible = false">Close</el-button>
|
|
||||||
</span>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'scholarCrawlers',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
form: {
|
|
||||||
keyword: '',
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
keyword: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: 'Please input keyword',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
tableData: [],
|
|
||||||
columns: [],
|
|
||||||
loading: false,
|
|
||||||
exportLoading: false,
|
|
||||||
papersDialogVisible: false,
|
|
||||||
currentPapers: [],
|
|
||||||
currentExpert: {},
|
|
||||||
total: 0,
|
|
||||||
page: 1,
|
|
||||||
per_page: 20,
|
|
||||||
hasSearched: false,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
tableIndex(index) {
|
|
||||||
return (this.page - 1) * this.per_page + index + 1;
|
|
||||||
},
|
|
||||||
handlePageChange(val) {
|
|
||||||
this.page = val;
|
|
||||||
this.doSearch();
|
|
||||||
},
|
|
||||||
handleSizeChange(val) {
|
|
||||||
this.per_page = val;
|
|
||||||
this.page = 1;
|
|
||||||
this.doSearch();
|
|
||||||
},
|
|
||||||
doSearch() {
|
|
||||||
this.loading = true;
|
|
||||||
this.hasSearched = true;
|
|
||||||
this.$api
|
|
||||||
.post('/api/expert_finder/search', {
|
|
||||||
keyword: this.form.keyword,
|
|
||||||
page: this.page,
|
|
||||||
per_page: this.per_page,
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
if (res && res.code === 0 && res.data) {
|
|
||||||
const list =
|
|
||||||
Array.isArray(res.data.experts) && res.data.experts.length
|
|
||||||
? res.data.experts
|
|
||||||
: [];
|
|
||||||
const listWithCount = list.map((item) => ({
|
|
||||||
...item,
|
|
||||||
paperCount: Array.isArray(item.papers)
|
|
||||||
? item.papers.length
|
|
||||||
: item.paper_count || item.paperCount || 0,
|
|
||||||
}));
|
|
||||||
this.tableData = listWithCount;
|
|
||||||
this.total = res.data.total != null ? Number(res.data.total) : listWithCount.length;
|
|
||||||
this.columns = listWithCount.length
|
|
||||||
? Object.keys(listWithCount[0]).filter(
|
|
||||||
(key) =>
|
|
||||||
key !== 'papers' &&
|
|
||||||
key !== 'paperCount' &&
|
|
||||||
key !== 'paper_count'
|
|
||||||
)
|
|
||||||
: [];
|
|
||||||
} else {
|
|
||||||
this.tableData = [];
|
|
||||||
this.columns = [];
|
|
||||||
this.total = 0;
|
|
||||||
if (res && res.msg) {
|
|
||||||
this.$message.error(res.msg);
|
|
||||||
} else {
|
|
||||||
this.$message.error('No expert found, please try again');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
this.tableData = [];
|
|
||||||
this.columns = [];
|
|
||||||
this.total = 0;
|
|
||||||
this.$message.error('Request error, please try again');
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
this.loading = false;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
handleSearch() {
|
|
||||||
this.$refs.searchForm.validate((valid) => {
|
|
||||||
if (!valid) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.page = 1;
|
|
||||||
this.doSearch();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
async handleExport() {
|
|
||||||
if (!this.form.keyword) {
|
|
||||||
this.$message.warning('Please input keyword first');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.exportLoading = true;
|
|
||||||
try {
|
|
||||||
const res = await this.$api.post('/api/expert_finder/export', {
|
|
||||||
keyword: this.form.keyword,
|
|
||||||
page: this.page,
|
|
||||||
per_page: this.per_page,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (res && (res.code === 0 || res.status === 1)) {
|
|
||||||
const url =
|
|
||||||
(res.data && (res.data.url || res.data.link)) ||
|
|
||||||
res.url ||
|
|
||||||
(typeof res.data === 'string' ? res.data : '');
|
|
||||||
|
|
||||||
if (!url) {
|
|
||||||
this.$message.error('No download url returned from server');
|
|
||||||
} else {
|
|
||||||
const link = document.createElement('a');
|
|
||||||
link.href = url;
|
|
||||||
const parts = url.split('/');
|
|
||||||
link.download = parts[parts.length - 1] || `scholar_${this.form.keyword}.xlsx`;
|
|
||||||
link.target = '_blank';
|
|
||||||
document.body.appendChild(link);
|
|
||||||
link.click();
|
|
||||||
document.body.removeChild(link);
|
|
||||||
this.$message.success('Export success');
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.$message.error((res && res.msg) || 'Export failed, please try again');
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
this.$message.error('Request error, please try again');
|
|
||||||
} finally {
|
|
||||||
this.exportLoading = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
formatColumnLabel(key) {
|
|
||||||
if (!key) return '';
|
|
||||||
return key
|
|
||||||
.split('_')
|
|
||||||
.map((word) => (word ? word.charAt(0).toUpperCase() + word.slice(1) : ''))
|
|
||||||
.join(' ');
|
|
||||||
},
|
|
||||||
getColumnWidth(key) {
|
|
||||||
if (!key) return 140;
|
|
||||||
const lower = key.toLowerCase();
|
|
||||||
if (lower === 'name' || lower === 'realname') {
|
|
||||||
return 180;
|
|
||||||
}
|
|
||||||
if (lower === 'affiliation' || lower === 'organization' || lower === 'institution') {
|
|
||||||
return 420;
|
|
||||||
}
|
|
||||||
if (lower === 'email') {
|
|
||||||
return 300;
|
|
||||||
}
|
|
||||||
return 140;
|
|
||||||
},
|
|
||||||
getColumnFixedWidth(key) {
|
|
||||||
if (!key) return null;
|
|
||||||
const lower = key.toLowerCase();
|
|
||||||
if (lower === 'name' || lower === 'realname') {
|
|
||||||
return 180;
|
|
||||||
}
|
|
||||||
if (lower === 'email') {
|
|
||||||
return 300;
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
showPapers(row) {
|
|
||||||
const papers = Array.isArray(row.papers) ? row.papers : [];
|
|
||||||
if (!papers.length) {
|
|
||||||
this.$message.info('No papers found');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.currentExpert = row;
|
|
||||||
this.currentPapers = papers;
|
|
||||||
this.papersDialogVisible = true;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.container {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box-card {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-form {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-bar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input-item {
|
|
||||||
flex: 1;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input-item .el-form-item__content {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input-item .el-input {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-actions {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 10px;
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.paper-count-cell {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.paper-count-number {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #006699;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table .cell {
|
|
||||||
white-space: normal;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.paper-expert-info {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
padding: 10px 12px;
|
|
||||||
background-color: #f5f7fa;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.paper-expert-info > div + div {
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.total-bar {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #666;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.total-number {
|
|
||||||
font-weight: 600;
|
|
||||||
color: #006699;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination {
|
|
||||||
margin-top: 16px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@@ -165,7 +165,14 @@
|
|||||||
<el-menu-item index="mailboxCollect">
|
<el-menu-item index="mailboxCollect">
|
||||||
{{ $t('sidebar.mailboxCollect') }}
|
{{ $t('sidebar.mailboxCollect') }}
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
|
<el-menu-item index="mailboxMould">
|
||||||
|
{{ $t('sidebar.emailTemplates') }}
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="mailboxStyle">
|
||||||
|
{{ $t('sidebar.emailStyles') }}
|
||||||
|
</el-menu-item>
|
||||||
</el-submenu>
|
</el-submenu>
|
||||||
|
|
||||||
<el-submenu index="tools">
|
<el-submenu index="tools">
|
||||||
<template slot="title"> <i class="el-icon-paperclip"></i> {{ $t('sidebar.tools') }} </template>
|
<template slot="title"> <i class="el-icon-paperclip"></i> {{ $t('sidebar.tools') }} </template>
|
||||||
<el-menu-item index="RejectedArticles">
|
<el-menu-item index="RejectedArticles">
|
||||||
|
|||||||
@@ -268,6 +268,8 @@ const en = {
|
|||||||
mailbox1: 'Mailbox send',
|
mailbox1: 'Mailbox send',
|
||||||
mailbox2: 'Mailbox list',
|
mailbox2: 'Mailbox list',
|
||||||
mailbox3: 'Mailbox template',
|
mailbox3: 'Mailbox template',
|
||||||
|
emailTemplates: 'Email Templates',
|
||||||
|
emailStyles: 'Email Styles',
|
||||||
tools: 'Assistant tools',
|
tools: 'Assistant tools',
|
||||||
mailboxManagement: 'Mailbox Management',
|
mailboxManagement: 'Mailbox Management',
|
||||||
mailboxConfig: 'Mailbox config',
|
mailboxConfig: 'Mailbox config',
|
||||||
@@ -350,6 +352,109 @@ const en = {
|
|||||||
rulesImapPort: 'Please enter IMAP port',
|
rulesImapPort: 'Please enter IMAP port',
|
||||||
rulesIsPrimary: 'Please set primary or not',
|
rulesIsPrimary: 'Please set primary or not',
|
||||||
},
|
},
|
||||||
|
mailboxMould: {
|
||||||
|
title: 'Email Templates',
|
||||||
|
subtitle: 'Manage and customize your journal email templates.',
|
||||||
|
searchPlaceholder: 'Search by title or scene...',
|
||||||
|
journalPlaceholder: 'Journal',
|
||||||
|
scenePlaceholder: 'Scene',
|
||||||
|
all: 'All',
|
||||||
|
inviteSubmission: 'Invite Submission',
|
||||||
|
promoteCitation: 'Promote Citation',
|
||||||
|
generalThanks: 'General Thanks',
|
||||||
|
languagePlaceholder: 'Language',
|
||||||
|
searchBtn: 'Search',
|
||||||
|
createTemplate: 'Create Template',
|
||||||
|
colTitle: 'Subject',
|
||||||
|
colSubject: 'Mail title',
|
||||||
|
colScene: 'Scene',
|
||||||
|
colLanguage: 'Language',
|
||||||
|
colVersion: 'Version',
|
||||||
|
colStatus: 'Status',
|
||||||
|
colActions: 'Actions',
|
||||||
|
active: 'Active',
|
||||||
|
inactive: 'Inactive',
|
||||||
|
confirm: 'Confirm',
|
||||||
|
cancel: 'Cancel',
|
||||||
|
deleteConfirm: 'Delete this template?',
|
||||||
|
deleteSuccess: 'Deleted successfully',
|
||||||
|
deleteFail: 'Delete failed',
|
||||||
|
previewTitle: 'Template preview',
|
||||||
|
previewClose: 'Close',
|
||||||
|
},
|
||||||
|
mailboxStyle: {
|
||||||
|
title: 'Email Styles',
|
||||||
|
subtitle: 'Manage email header and footer styles.',
|
||||||
|
searchPlaceholder: 'Search by name or description...',
|
||||||
|
journalPlaceholder: 'Journal',
|
||||||
|
scenePlaceholder: 'Scene',
|
||||||
|
languagePlaceholder: 'Language',
|
||||||
|
searchBtn: 'Refresh',
|
||||||
|
createStyle: 'Create Style',
|
||||||
|
colName: 'Style name',
|
||||||
|
colDescription: 'Style description',
|
||||||
|
},
|
||||||
|
mailboxStyleDetail: {
|
||||||
|
back: 'Back',
|
||||||
|
createStyle: 'Create style',
|
||||||
|
editStyle: 'Edit style',
|
||||||
|
cancel: 'Cancel',
|
||||||
|
save: 'Save',
|
||||||
|
loading: 'Loading',
|
||||||
|
name: 'Style name',
|
||||||
|
namePlaceholder: 'Enter style name',
|
||||||
|
description: 'Style description',
|
||||||
|
descriptionPlaceholder: 'Enter style description',
|
||||||
|
headerHtml: 'Header HTML',
|
||||||
|
footerHtml: 'Footer HTML',
|
||||||
|
rulesName: 'Please enter style name',
|
||||||
|
rulesDescription: 'Please enter style description',
|
||||||
|
rulesHeaderHtml: 'Please enter header HTML',
|
||||||
|
rulesFooterHtml: 'Please enter footer HTML',
|
||||||
|
saveSuccess: 'Saved successfully',
|
||||||
|
saveFail: 'Save failed',
|
||||||
|
},
|
||||||
|
mailboxMouldDetail: {
|
||||||
|
back: 'Back',
|
||||||
|
createTemplate: 'Create template',
|
||||||
|
editTemplate: 'Edit template',
|
||||||
|
cancel: 'Cancel',
|
||||||
|
save: 'Save',
|
||||||
|
loading: 'Loading',
|
||||||
|
rulesJournal: 'Please select journal',
|
||||||
|
rulesScene: 'Please select template type',
|
||||||
|
rulesLanguage: 'Please select language',
|
||||||
|
rulesTitle: 'Please enter template title',
|
||||||
|
rulesSubject: 'Please enter email subject',
|
||||||
|
rulesBody: 'Please enter email body',
|
||||||
|
rulesVersion: 'Please enter version',
|
||||||
|
basicInfo: 'Basic info',
|
||||||
|
templateTitle: 'Template title',
|
||||||
|
templateTitlePlaceholder: 'Enter title',
|
||||||
|
emailSubject: 'Email subject',
|
||||||
|
emailSubjectPlaceholder: 'Email subject',
|
||||||
|
emailBody: 'Email body',
|
||||||
|
journal: 'Journal',
|
||||||
|
templateType: 'Template type',
|
||||||
|
sceneInviteSubmission: 'Invite submission',
|
||||||
|
scenePromoteCitation: 'Promote citation',
|
||||||
|
sceneGeneralThanks: 'General thanks',
|
||||||
|
languageConfig: 'Language',
|
||||||
|
version: 'Version',
|
||||||
|
versionControl: 'Version',
|
||||||
|
versionPlaceholder: '1.0.0',
|
||||||
|
bodyEdit: 'Body editor',
|
||||||
|
activeStatus: 'Active',
|
||||||
|
variablesJson: 'Variables (JSON)',
|
||||||
|
variablesPlaceholder: '{"name": "string"}',
|
||||||
|
previewTab: 'Preview',
|
||||||
|
subjectLabel: 'Subject:',
|
||||||
|
receiverLabel: 'Receiver:',
|
||||||
|
previewRendering: 'Live preview',
|
||||||
|
saveSuccess: 'Saved successfully',
|
||||||
|
saveFail: 'Save failed',
|
||||||
|
saveSuccessMock: 'Template saved (mock)',
|
||||||
|
},
|
||||||
mailboxCollect: {
|
mailboxCollect: {
|
||||||
inboxTab: 'Mail received',
|
inboxTab: 'Mail received',
|
||||||
outboxTab: 'Mail sent',
|
outboxTab: 'Mail sent',
|
||||||
@@ -360,6 +465,7 @@ const en = {
|
|||||||
searchBtn: 'Search',
|
searchBtn: 'Search',
|
||||||
syncBtn: 'Sync remote mail',
|
syncBtn: 'Sync remote mail',
|
||||||
writeBtn: 'Write letter',
|
writeBtn: 'Write letter',
|
||||||
|
receiveBtn: 'Sync inbox',
|
||||||
email: 'Email',
|
email: 'Email',
|
||||||
account: 'Account',
|
account: 'Account',
|
||||||
time: 'Time',
|
time: 'Time',
|
||||||
@@ -386,6 +492,8 @@ const en = {
|
|||||||
syncSuccess: 'Sync succeeded',
|
syncSuccess: 'Sync succeeded',
|
||||||
syncFail: 'Sync failed',
|
syncFail: 'Sync failed',
|
||||||
operation: 'Operation',
|
operation: 'Operation',
|
||||||
|
loadingMore: 'Loading more...',
|
||||||
|
noMore: 'No more',
|
||||||
},
|
},
|
||||||
mailboxSend: {
|
mailboxSend: {
|
||||||
title: 'Write mail',
|
title: 'Write mail',
|
||||||
@@ -413,6 +521,10 @@ const en = {
|
|||||||
cancel: 'Cancel',
|
cancel: 'Cancel',
|
||||||
save: 'Save',
|
save: 'Save',
|
||||||
saveDraft: 'Save draft',
|
saveDraft: 'Save draft',
|
||||||
|
sourceMode: 'Source code',
|
||||||
|
richTextMode: 'Rich text',
|
||||||
|
exitSourceMode: 'Exit source mode',
|
||||||
|
sourcePlaceholder: 'Paste or edit full HTML here (DOCTYPE, html, head, body supported)',
|
||||||
editorPlaceholder: 'Please enter...',
|
editorPlaceholder: 'Please enter...',
|
||||||
validateTo: 'Please add at least one addressee',
|
validateTo: 'Please add at least one addressee',
|
||||||
validateSubject: 'Please enter mail subject',
|
validateSubject: 'Please enter mail subject',
|
||||||
|
|||||||
@@ -253,6 +253,8 @@ const zh = {
|
|||||||
mailbox1: '发邮件',
|
mailbox1: '发邮件',
|
||||||
mailbox2: '邮件列表',
|
mailbox2: '邮件列表',
|
||||||
mailbox3: '模板管理',
|
mailbox3: '模板管理',
|
||||||
|
emailTemplates: '邮件模板',
|
||||||
|
emailStyles: '邮件风格',
|
||||||
tools: '辅助工具',
|
tools: '辅助工具',
|
||||||
mailboxManagement: '邮箱管理',
|
mailboxManagement: '邮箱管理',
|
||||||
mailboxConfig: '邮箱配置管理',
|
mailboxConfig: '邮箱配置管理',
|
||||||
@@ -336,6 +338,109 @@ const zh = {
|
|||||||
rulesImapPort: '请输入 IMAP 端口',
|
rulesImapPort: '请输入 IMAP 端口',
|
||||||
rulesIsPrimary: '请选择是否主邮箱',
|
rulesIsPrimary: '请选择是否主邮箱',
|
||||||
},
|
},
|
||||||
|
mailboxMould: {
|
||||||
|
title: '邮件模板',
|
||||||
|
subtitle: '管理并自定义期刊邮件模板。',
|
||||||
|
searchPlaceholder: '按标题或场景搜索...',
|
||||||
|
journalPlaceholder: '期刊',
|
||||||
|
scenePlaceholder: '场景',
|
||||||
|
all: '全部',
|
||||||
|
inviteSubmission: '邀请投稿',
|
||||||
|
promoteCitation: '论文推送',
|
||||||
|
generalThanks: '通用感谢',
|
||||||
|
languagePlaceholder: '语言',
|
||||||
|
searchBtn: '搜索',
|
||||||
|
createTemplate: '新建模板',
|
||||||
|
colTitle: '主题',
|
||||||
|
colSubject: '邮件标题',
|
||||||
|
colScene: '场景',
|
||||||
|
colLanguage: '语言',
|
||||||
|
colVersion: '版本',
|
||||||
|
colStatus: '状态',
|
||||||
|
colActions: '操作',
|
||||||
|
active: '启用',
|
||||||
|
inactive: '停用',
|
||||||
|
confirm: '确定',
|
||||||
|
cancel: '取消',
|
||||||
|
deleteConfirm: '确定删除该模板？',
|
||||||
|
deleteSuccess: '删除成功',
|
||||||
|
deleteFail: '删除失败',
|
||||||
|
previewTitle: '模板预览',
|
||||||
|
previewClose: '关闭',
|
||||||
|
},
|
||||||
|
mailboxStyle: {
|
||||||
|
title: '邮件风格',
|
||||||
|
subtitle: '管理邮件头部和尾部样式。',
|
||||||
|
searchPlaceholder: '按名称或描述搜索...',
|
||||||
|
journalPlaceholder: '期刊',
|
||||||
|
scenePlaceholder: '场景',
|
||||||
|
languagePlaceholder: '语言',
|
||||||
|
searchBtn: '刷新',
|
||||||
|
createStyle: '新建风格',
|
||||||
|
colName: '风格名称',
|
||||||
|
colDescription: '风格描述',
|
||||||
|
},
|
||||||
|
mailboxStyleDetail: {
|
||||||
|
back: '返回',
|
||||||
|
createStyle: '新建风格',
|
||||||
|
editStyle: '编辑风格',
|
||||||
|
cancel: '取消',
|
||||||
|
save: '保存',
|
||||||
|
loading: '加载中',
|
||||||
|
name: '风格名称',
|
||||||
|
namePlaceholder: '请输入风格名称',
|
||||||
|
description: '风格描述',
|
||||||
|
descriptionPlaceholder: '请输入风格描述',
|
||||||
|
headerHtml: 'Header HTML',
|
||||||
|
footerHtml: 'Footer HTML',
|
||||||
|
rulesName: '请输入风格名称',
|
||||||
|
rulesDescription: '请输入风格描述',
|
||||||
|
rulesHeaderHtml: '请输入 Header HTML',
|
||||||
|
rulesFooterHtml: '请输入 Footer HTML',
|
||||||
|
saveSuccess: '保存成功',
|
||||||
|
saveFail: '保存失败',
|
||||||
|
},
|
||||||
|
mailboxMouldDetail: {
|
||||||
|
back: '返回',
|
||||||
|
createTemplate: '新建模板',
|
||||||
|
editTemplate: '编辑模板',
|
||||||
|
cancel: '取消',
|
||||||
|
save: '保存',
|
||||||
|
loading: '加载中',
|
||||||
|
rulesJournal: '请选择所属期刊',
|
||||||
|
rulesScene: '请选择模版类型',
|
||||||
|
rulesLanguage: '请选择语言',
|
||||||
|
rulesTitle: '请输入模板标题',
|
||||||
|
rulesSubject: '请输入邮件主题',
|
||||||
|
rulesBody: '请输入邮件正文',
|
||||||
|
rulesVersion: '请输入版本号',
|
||||||
|
basicInfo: '基本信息',
|
||||||
|
templateTitle: '模板标题',
|
||||||
|
templateTitlePlaceholder: '输入标题',
|
||||||
|
emailSubject: '邮件主题',
|
||||||
|
emailSubjectPlaceholder: '邮件主题',
|
||||||
|
emailBody: '邮件正文',
|
||||||
|
journal: '所属期刊',
|
||||||
|
templateType: '模版类型',
|
||||||
|
sceneInviteSubmission: '邀请投稿',
|
||||||
|
scenePromoteCitation: '论文推送',
|
||||||
|
sceneGeneralThanks: '通用感谢',
|
||||||
|
languageConfig: '语言配置',
|
||||||
|
version: '版本',
|
||||||
|
versionControl: '版本控制',
|
||||||
|
versionPlaceholder: '1.0.0',
|
||||||
|
bodyEdit: '正文编辑',
|
||||||
|
activeStatus: '激活状态',
|
||||||
|
variablesJson: '动态变量 (JSON)',
|
||||||
|
variablesPlaceholder: '{"name": "string"}',
|
||||||
|
previewTab: '预览窗口',
|
||||||
|
subjectLabel: 'Subject:',
|
||||||
|
receiverLabel: 'Receiver:',
|
||||||
|
previewRendering: '实时预览渲染中',
|
||||||
|
saveSuccess: '保存成功',
|
||||||
|
saveFail: '保存失败',
|
||||||
|
saveSuccessMock: '模板已保存（模拟）',
|
||||||
|
},
|
||||||
mailboxCollect: {
|
mailboxCollect: {
|
||||||
inboxTab: '收件箱',
|
inboxTab: '收件箱',
|
||||||
outboxTab: '发件箱',
|
outboxTab: '发件箱',
|
||||||
@@ -346,6 +451,7 @@ const zh = {
|
|||||||
searchBtn: '搜索',
|
searchBtn: '搜索',
|
||||||
syncBtn: '同步远程邮箱',
|
syncBtn: '同步远程邮箱',
|
||||||
writeBtn: '写邮件',
|
writeBtn: '写邮件',
|
||||||
|
receiveBtn: '收信',
|
||||||
email: '邮箱',
|
email: '邮箱',
|
||||||
account: '账户',
|
account: '账户',
|
||||||
time: '时间',
|
time: '时间',
|
||||||
@@ -372,6 +478,8 @@ const zh = {
|
|||||||
syncSuccess: '同步成功',
|
syncSuccess: '同步成功',
|
||||||
syncFail: '同步失败',
|
syncFail: '同步失败',
|
||||||
operation: '操作',
|
operation: '操作',
|
||||||
|
loadingMore: '加载更多...',
|
||||||
|
noMore: '没有更多了',
|
||||||
},
|
},
|
||||||
mailboxSend: {
|
mailboxSend: {
|
||||||
title: '写邮件',
|
title: '写邮件',
|
||||||
@@ -399,6 +507,10 @@ const zh = {
|
|||||||
cancel: '取消',
|
cancel: '取消',
|
||||||
save: '保存',
|
save: '保存',
|
||||||
saveDraft: '保存草稿',
|
saveDraft: '保存草稿',
|
||||||
|
sourceMode: '源代码编辑',
|
||||||
|
richTextMode: '富文本编辑',
|
||||||
|
exitSourceMode: '退出源码编辑',
|
||||||
|
sourcePlaceholder: '在此粘贴或编辑完整 HTML，支持 <!DOCTYPE>、<html>、<head>、<body> 等',
|
||||||
editorPlaceholder: '请输入邮件内容...',
|
editorPlaceholder: '请输入邮件内容...',
|
||||||
validateTo: '请至少添加一个收件人',
|
validateTo: '请至少添加一个收件人',
|
||||||
validateSubject: '请输入邮件主题',
|
validateSubject: '请输入邮件主题',
|
||||||
|
|||||||
167
src/components/page/components/email/CkeditorMail.vue
Normal file
167
src/components/page/components/email/CkeditorMail.vue
Normal file
@@ -0,0 +1,167 @@
|
|||||||
|
<template>
|
||||||
|
<div class="tinymce-container editor-container">
|
||||||
|
<textarea class="tinymce-textarea" :id="tinymceId"></textarea>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'TinyEditor',
|
||||||
|
props: {
|
||||||
|
value: { type: String, default: '' },
|
||||||
|
id: { type: String, default: () => 'tiny-' + +new Date() }
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tinymceId: this.id,
|
||||||
|
editor: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value(val) {
|
||||||
|
if (!this.editor) return;
|
||||||
|
const next = val || '';
|
||||||
|
const current = this.editor.getContent() || '';
|
||||||
|
if (next !== current) {
|
||||||
|
this.editor.setContent(next);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initTiny();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 自动化行内样式转换工具 (高兼容性版)
|
||||||
|
* @param {String} htmlContent 原始 HTML 字符串
|
||||||
|
* @returns {String} 转换后的 HTML 字符串
|
||||||
|
*/
|
||||||
|
autoInlineStyles(htmlContent) {
|
||||||
|
if (!htmlContent) return "";
|
||||||
|
|
||||||
|
const parser = new DOMParser();
|
||||||
|
// 使用 text/html 解析，会自动补全 html/body 结构
|
||||||
|
const doc = parser.parseFromString(htmlContent, "text/html");
|
||||||
|
const styleTags = doc.querySelectorAll("style");
|
||||||
|
|
||||||
|
styleTags.forEach((tag) => {
|
||||||
|
let rules = [];
|
||||||
|
try {
|
||||||
|
// 1. 尝试从浏览器引擎直接获取解析好的 CSS 规则
|
||||||
|
if (tag.sheet && tag.sheet.cssRules && tag.sheet.cssRules.length > 0) {
|
||||||
|
rules = Array.from(tag.sheet.cssRules);
|
||||||
|
} else {
|
||||||
|
// 2. 兜底：如果 sheet 为空（通常因为手动插入 DOM 还没渲染），则进行手动正则解析
|
||||||
|
const cssText = tag.textContent.replace(/\/\*[\s\S]*?\*\//g, ""); // 移除注释
|
||||||
|
const ruleRegex = /([^{]+)\s*\{\s*([^}]+)\s*\}/g;
|
||||||
|
let match;
|
||||||
|
while ((match = ruleRegex.exec(cssText)) !== null) {
|
||||||
|
rules.push({
|
||||||
|
selectorText: match[1].trim(),
|
||||||
|
styleText: match[2].trim(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.warn("CSS 解析失败，跳过该 Style 标签", e);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 遍历每一条 CSS 规则
|
||||||
|
rules.forEach((rule) => {
|
||||||
|
try {
|
||||||
|
const selector = rule.selectorText;
|
||||||
|
|
||||||
|
// 过滤邮件不支持的复杂规则（伪类 :hover, @media 等）
|
||||||
|
if (selector.includes(":") || selector.includes("@")) return;
|
||||||
|
|
||||||
|
// 使用 querySelectorAll 找到所有匹配的元素
|
||||||
|
const elements = doc.querySelectorAll(selector);
|
||||||
|
|
||||||
|
elements.forEach((el) => {
|
||||||
|
// 获取当前规则的样式文本
|
||||||
|
const newStyleText = rule.style ? rule.style.cssText : rule.styleText;
|
||||||
|
|
||||||
|
// 获取元素已有的行内样式
|
||||||
|
const existingStyle = el.getAttribute("style") || "";
|
||||||
|
|
||||||
|
// 合并样式：
|
||||||
|
// 注意：CSS 的顺序决定优先级，后面定义的会覆盖前面的
|
||||||
|
// 为了简单起见，我们直接追加在后面，浏览器会自动应用最后一个声明
|
||||||
|
const mergedStyle = existingStyle +
|
||||||
|
(existingStyle && !existingStyle.endsWith(";") ? "; " : " ") +
|
||||||
|
newStyleText;
|
||||||
|
|
||||||
|
el.setAttribute("style", mergedStyle.trim());
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
// 忽略无法解析的选择器 (例如某些 AI 写的非法选择器)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 转换完成后移除 style 标签，避免干扰邮件客户端
|
||||||
|
tag.remove();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 针对邮件模板的特殊处理：确保 meta 编码正确
|
||||||
|
const meta = doc.querySelector('meta[charset]');
|
||||||
|
if (!meta) {
|
||||||
|
const charsetMeta = doc.createElement('meta');
|
||||||
|
charsetMeta.setAttribute('charset', 'UTF-8');
|
||||||
|
doc.head.insertBefore(charsetMeta, doc.head.firstChild);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 返回包含声明的完整内容
|
||||||
|
return "<!DOCTYPE html>\n" + doc.documentElement.outerHTML;
|
||||||
|
},
|
||||||
|
initTiny() {
|
||||||
|
window.tinymce.init({
|
||||||
|
selector: `#${this.tinymceId}`,
|
||||||
|
language: 'zh_CN', // 记得下载语言包，没有就删掉这行
|
||||||
|
height: 500,
|
||||||
|
// 核心配置：允许所有 HTML 标签和样式，这对比邮件模板至关重要
|
||||||
|
valid_children: '+body[style],+p[style],+div[style]',
|
||||||
|
extended_valid_elements: 'style,meta,title',
|
||||||
|
custom_elements: 'style,meta,title',
|
||||||
|
verify_html: false, // 关闭 HTML 校验，防止自动删掉你的邮件结构
|
||||||
|
|
||||||
|
// 插件需要包含这些，否则工具栏按钮不会显示
|
||||||
|
plugins: 'code link image table lists fullscreen directionality codesample preview charmap autolink nonbreaking',
|
||||||
|
|
||||||
|
// 按照图片布局精准排序：
|
||||||
|
toolbar: 'undo redo | code preview | fontselect fontsizeselect | formatselect | bold italic underline strikethrough | forecolor backcolor | bullist numlist | lineheight outdent indent | alignleft aligncenter alignright alignjustify | image table link | fullscreen',
|
||||||
|
|
||||||
|
// 补充：让字体和字号选择器更有序
|
||||||
|
fontsize_formats: '12px 14px 16px 18px 24px 36px 48px',
|
||||||
|
font_formats: '系统默认=System Default; 微软雅黑=Microsoft YaHei; 宋体=SimSun; 黑体=SimHei; Arial=arial,helvetica,sans-serif; Times New Roman=times new roman,times;',
|
||||||
|
branding: false,
|
||||||
|
promotion: false,
|
||||||
|
// 邮件编辑优化：允许在源码中看到完整的 html 结构
|
||||||
|
fullpage_enabled: true,
|
||||||
|
init_instance_callback: (editor) => {
|
||||||
|
this.editor = editor;
|
||||||
|
if (this.value) {
|
||||||
|
editor.setContent(this.value);
|
||||||
|
}
|
||||||
|
// 监听内容变化
|
||||||
|
editor.on('NodeChange Change KeyUp SetContent', () => {
|
||||||
|
this.$emit('input', editor.getContent());
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 获取经过行内样式转换后的内容
|
||||||
|
getInlinedContent() {
|
||||||
|
if (!this.editor) return '';
|
||||||
|
const rawHtml = this.editor.getContent();
|
||||||
|
// 调用我们之前的 autoInlineStyles 方法
|
||||||
|
return this.autoInlineStyles(rawHtml);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
// 销毁编辑器防止内存泄漏
|
||||||
|
if (window.tinymce.get(this.tinymceId)) {
|
||||||
|
window.tinymce.get(this.tinymceId).destroy();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@@ -2,9 +2,10 @@
|
|||||||
<div class="mail-detail-container">
|
<div class="mail-detail-container">
|
||||||
<div class="detail-toolbar">
|
<div class="detail-toolbar">
|
||||||
<div class="toolbar-left">
|
<div class="toolbar-left">
|
||||||
<el-tooltip content="回复" placement="bottom"><i class="el-icon-chat-line-square action-icon"></i></el-tooltip>
|
<!-- <el-tooltip content="回复" placement="bottom"><i class="el-icon-chat-line-square action-icon"></i></el-tooltip>
|
||||||
<el-tooltip content="转发" placement="bottom"><i class="el-icon-position action-icon"></i></el-tooltip>
|
<el-tooltip content="转发" placement="bottom"><i class="el-icon-position action-icon"></i></el-tooltip>
|
||||||
<el-tooltip content="删除" placement="bottom"><i class="el-icon-delete action-icon" style="color: #fb2c36;"></i></el-tooltip>
|
<el-tooltip content="删除" placement="bottom"><i class="el-icon-delete action-icon" style="color: #fb2c36;"></i></el-tooltip>
|
||||||
|
-->
|
||||||
</div>
|
</div>
|
||||||
<div class="toolbar-right">
|
<div class="toolbar-right">
|
||||||
<!-- <i class="el-icon-star-off action-icon"></i> -->
|
<!-- <i class="el-icon-star-off action-icon"></i> -->
|
||||||
|
|||||||
@@ -1,21 +1,28 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="mail-container">
|
<div class="mail-container">
|
||||||
<div class="mail-sidebar">
|
<div class="mail-sidebar">
|
||||||
<div class="p-20">
|
<div class="p-10" style="padding-left: 0px;padding-right: 0px;">
|
||||||
<el-button type="primary" icon="el-icon-plus" class="write-btn" @click="handleWrite">
|
<div class="sidebar-top-actions">
|
||||||
{{ $t('mailboxCollect.writeBtn') }}
|
<el-button type="primary" icon="el-icon-plus" class="write-btn" @click="handleWrite">
|
||||||
</el-button>
|
{{ $t('mailboxCollect.writeBtn') }}
|
||||||
|
</el-button>
|
||||||
|
<el-button type="success" icon="el-icon-refresh" class="receive-btn" :loading="syncLoading" @click="handleSyncInbox">
|
||||||
|
{{ $t('mailboxCollect.receiveBtn') }}
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ul class="folder-list">
|
<ul class="folder-list">
|
||||||
<li :class="{ active: currentFolder === 'inbox' }" @click="switchFolder('inbox')">
|
<li :class="{ active: currentFolder === 'inbox' }" @click="switchFolder('inbox')">
|
||||||
<i class="el-icon-message"></i> {{ $t('mailboxCollect.inboxTab') }}
|
<i class="el-icon-message"></i> {{ $t('mailboxCollect.inboxTab') }}
|
||||||
<span class="badge" v-if="queryIn.num > 0">{{ queryIn.num }}</span>
|
<span class="badge" v-if="queryIn.num > 0">{{ queryIn.num }}</span>
|
||||||
</li>
|
</li>
|
||||||
<li :class="{ active: currentFolder === 'sent' }" @click="switchFolder('sent')">
|
<!-- <li :class="{ active: currentFolder === 'sent' }" @click="switchFolder('sent')">
|
||||||
<i class="el-icon-position"></i><span style="font-size: 14px;">{{ $t('mailboxCollect.outboxTab')}}</span>
|
<i class="el-icon-position"></i><span style="font-size: 14px;">{{ $t('mailboxCollect.outboxTab')}}</span>
|
||||||
</li>
|
</li>
|
||||||
<li @click="notImplemented"><i class="el-icon-document"></i> <span style="font-size: 14px;">{{ $t('mailboxCollect.draftsTab')}}</span> </li>
|
<li @click="notImplemented"><i class="el-icon-document"></i> <span style="font-size: 14px;">{{ $t('mailboxCollect.draftsTab')}}</span> </li>
|
||||||
<li @click="notImplemented"><i class="el-icon-delete"></i> <span style="font-size: 14px;">{{ $t('mailboxCollect.deletedTab')}}</span> </li>
|
<li @click="notImplemented"><i class="el-icon-delete"></i> <span style="font-size: 14px;">{{ $t('mailboxCollect.deletedTab')}}</span> </li>
|
||||||
|
-->
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div class="sidebar-footer">
|
<div class="sidebar-footer">
|
||||||
@@ -41,10 +48,10 @@
|
|||||||
clearable
|
clearable
|
||||||
@change="handleSearch"
|
@change="handleSearch"
|
||||||
></el-input>
|
></el-input>
|
||||||
<el-button icon="el-icon-refresh" circle :loading="syncLoading" @click="handleSyncInbox" style="margin-left: 10px;"></el-button>
|
<!-- <el-button icon="el-icon-refresh" circle :loading="syncLoading" @click="handleSyncInbox" style="margin-left: 10px;"></el-button> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="list-scroll-area">
|
<div ref="listScrollArea" class="list-scroll-area" @scroll="onListScroll">
|
||||||
<template v-if="displayList.length > 0">
|
<template v-if="displayList.length > 0">
|
||||||
<div
|
<div
|
||||||
v-for="item in displayList"
|
v-for="item in displayList"
|
||||||
@@ -70,8 +77,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<div v-if="inboxLoadingMore" class="load-more-tip">
|
||||||
<div v-else class="empty-list-container">
|
<i class="el-icon-loading"></i> {{ $t('mailboxCollect.loadingMore') || '加载更多...' }}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="displayList.length > 0 && inboxPage >= inboxTotalPages" class="load-more-tip no-more">
|
||||||
|
{{ $t('mailboxCollect.noMore') || '没有更多了' }}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="displayList.length === 0" class="empty-list-container">
|
||||||
<div class="empty-wrapper">
|
<div class="empty-wrapper">
|
||||||
<i class="el-icon-message"></i>
|
<i class="el-icon-message"></i>
|
||||||
<p>{{ $t('mailboxCollect.emptyText') }}</p>
|
<p>{{ $t('mailboxCollect.emptyText') }}</p>
|
||||||
@@ -101,10 +113,23 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-dialog :title="$t('mailboxCollect.selectAccountTitle')" :visible.sync="accountDialogVisible" width="600px" append-to-body>
|
<el-dialog
|
||||||
|
:title="$t('mailboxCollect.selectAccountTitle')"
|
||||||
|
:visible.sync="accountDialogVisible"
|
||||||
|
width="600px"
|
||||||
|
append-to-body
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
:show-close="false"
|
||||||
|
:before-close="handleAccountDialogBeforeClose"
|
||||||
|
>
|
||||||
<el-form inline style="margin-bottom: 10px;">
|
<el-form inline style="margin-bottom: 10px;">
|
||||||
<el-form-item :label="$t('mailboxCollect.journal')">
|
<el-form-item :label="$t('mailboxCollect.journal')">
|
||||||
<el-select v-model="accountJournalId" style="width: 260px;" @change="loadAccountsForJournal">
|
<el-select
|
||||||
|
v-model="accountJournalId"
|
||||||
|
style="width: 260px;"
|
||||||
|
:loading="journalLoading"
|
||||||
|
@change="loadAccountsForJournal"
|
||||||
|
>
|
||||||
<el-option v-for="item in journalList" :key="item.journal_id" :label="item.title" :value="item.journal_id" />
|
<el-option v-for="item in journalList" :key="item.journal_id" :label="item.title" :value="item.journal_id" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@@ -128,7 +153,7 @@
|
|||||||
const API = {
|
const API = {
|
||||||
getInboxList: 'api/email_client/getInboxList',
|
getInboxList: 'api/email_client/getInboxList',
|
||||||
getEmailDetail: 'api/email_client/getEmailDetail',
|
getEmailDetail: 'api/email_client/getEmailDetail',
|
||||||
receiveMail: 'api/Mail/receiveMail',
|
syncInbox: 'api/email_client/syncInbox',
|
||||||
getAccounts: 'api/email_client/getAccounts',
|
getAccounts: 'api/email_client/getAccounts',
|
||||||
getOneEmail: 'api/email_client/getOneEmail',
|
getOneEmail: 'api/email_client/getOneEmail',
|
||||||
getAllJournal: 'api/Journal/getAllJournal',
|
getAllJournal: 'api/Journal/getAllJournal',
|
||||||
@@ -145,12 +170,18 @@ export default {
|
|||||||
tableData_out: [],
|
tableData_out: [],
|
||||||
detailMail: {},
|
detailMail: {},
|
||||||
queryIn: { num: 0 },
|
queryIn: { num: 0 },
|
||||||
|
inboxPage: 1,
|
||||||
|
inboxPerPage: 20,
|
||||||
|
inboxTotalPages: 1,
|
||||||
|
inboxTotal: 0,
|
||||||
|
inboxLoadingMore: false,
|
||||||
listWidth: 350,
|
listWidth: 350,
|
||||||
minWidth: 260,
|
minWidth: 260,
|
||||||
maxWidth: 600,
|
maxWidth: 600,
|
||||||
selectedAccount: null,
|
selectedAccount: null,
|
||||||
accountDialogVisible: false,
|
accountDialogVisible: false,
|
||||||
journalList: [],
|
journalList: [],
|
||||||
|
journalLoading: false,
|
||||||
accountJournalId: null,
|
accountJournalId: null,
|
||||||
accountList: [],
|
accountList: [],
|
||||||
accountLoading: false,
|
accountLoading: false,
|
||||||
@@ -201,32 +232,73 @@ export default {
|
|||||||
this.openAccountDialog();
|
this.openAccountDialog();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
loadDefaultAccount() {
|
||||||
|
this.$api.post(API.getAllJournal, {}).then(res => {
|
||||||
|
const journals = (res && res.data && res.data.journals) || res.data || [];
|
||||||
|
const list = (Array.isArray(journals) ? journals : []).map(i => ({
|
||||||
|
journal_id: i.journal_id || i.id,
|
||||||
|
title: i.title || i.name || ''
|
||||||
|
}));
|
||||||
|
this.journalList = list;
|
||||||
|
if (!list.length) {
|
||||||
|
this.openAccountDialog();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const firstJournalId = list[0].journal_id;
|
||||||
|
this.accountJournalId = firstJournalId;
|
||||||
|
this.accountLoading = true;
|
||||||
|
this.$api.post(API.getAccounts, { journal_id: firstJournalId }).then(accRes => {
|
||||||
|
this.accountLoading = false;
|
||||||
|
const accounts = accRes && accRes.data ? accRes.data : [];
|
||||||
|
if (Array.isArray(accounts) && accounts.length > 0) {
|
||||||
|
this.selectedAccount = accounts[0];
|
||||||
|
this.fetchData();
|
||||||
|
} else {
|
||||||
|
this.accountList = accounts || [];
|
||||||
|
this.openAccountDialog();
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
this.accountLoading = false;
|
||||||
|
this.openAccountDialog();
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
this.openAccountDialog();
|
||||||
|
});
|
||||||
|
},
|
||||||
loadAccountById(jEmailId) {
|
loadAccountById(jEmailId) {
|
||||||
this.$api.post(API.getOneEmail, { j_email_id: jEmailId }).then(res => {
|
this.$api.post(API.getOneEmail, { j_email_id: jEmailId }).then(res => {
|
||||||
const email = res.data.email;
|
const email = res.data.email;
|
||||||
if (res.code === 0 && email) {
|
if (res.code === 0 && email) {
|
||||||
this.selectedAccount = email;
|
this.selectedAccount = email;
|
||||||
this.fetchData();
|
this.fetchData();
|
||||||
} else {
|
|
||||||
this.openAccountDialog();
|
|
||||||
}
|
}
|
||||||
}).catch(() => this.openAccountDialog());
|
}).catch(() => {});
|
||||||
},
|
},
|
||||||
openAccountDialog() {
|
openAccountDialog() {
|
||||||
this.accountDialogVisible = true;
|
this.accountDialogVisible = true;
|
||||||
this.loadJournals();
|
this.loadJournals();
|
||||||
if (this.selectedAccount.journal_id) {
|
if (this.selectedAccount && this.selectedAccount.journal_id) {
|
||||||
this.accountJournalId = this.selectedAccount.journal_id;
|
this.accountJournalId = this.selectedAccount.journal_id;
|
||||||
this.loadAccountsForJournal(this.selectedAccount.journal_id);
|
this.loadAccountsForJournal(this.selectedAccount.journal_id);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
loadJournals() {
|
loadJournals() {
|
||||||
this.$api.post(API.getAllJournal, {}).then(res => {
|
this.journalLoading = true;
|
||||||
this.journalList = (res.data.journals || res.data || []).map(i => ({
|
this.$api
|
||||||
journal_id: i.journal_id || i.id,
|
.post(API.getAllJournal, {})
|
||||||
title: i.title || i.name || ''
|
.then(res => {
|
||||||
}));
|
this.journalList = (res.data.journals || res.data || []).map(i => ({
|
||||||
});
|
journal_id: i.journal_id || i.id,
|
||||||
|
title: i.title || i.name || ''
|
||||||
|
}));
|
||||||
|
if (!this.accountJournalId && this.journalList.length > 0) {
|
||||||
|
this.accountJournalId = this.journalList[0].journal_id;
|
||||||
|
this.loadAccountsForJournal(this.accountJournalId);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.journalLoading = false;
|
||||||
|
});
|
||||||
},
|
},
|
||||||
loadAccountsForJournal(id) {
|
loadAccountsForJournal(id) {
|
||||||
this.accountLoading = true;
|
this.accountLoading = true;
|
||||||
@@ -239,28 +311,65 @@ export default {
|
|||||||
this.selectedAccount = row;
|
this.selectedAccount = row;
|
||||||
this.accountDialogVisible = false;
|
this.accountDialogVisible = false;
|
||||||
this.closeDetail();
|
this.closeDetail();
|
||||||
|
// 回填到地址栏
|
||||||
|
const q = Object.assign({}, this.$route.query, {
|
||||||
|
j_email_id: row.j_email_id,
|
||||||
|
journal_id: row.journal_id
|
||||||
|
});
|
||||||
|
this.$router.replace({ path: this.$route.path, query: q });
|
||||||
this.fetchData();
|
this.fetchData();
|
||||||
},
|
},
|
||||||
fetchData() {
|
handleAccountDialogBeforeClose(done) {
|
||||||
|
const hasAccount = this.selectedAccount || this.$route.query.j_email_id;
|
||||||
|
if (hasAccount) {
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
// 没选账号时不允许关闭
|
||||||
|
},
|
||||||
|
// 拉取收件列表，支持分页：page=1 时替换列表，page>1 时追加；接口返回 total、page、per_page、total_pages
|
||||||
|
fetchData(page) {
|
||||||
if (!this.selectedAccount) return;
|
if (!this.selectedAccount) return;
|
||||||
|
const isFirstPage = page === 1 || page == null;
|
||||||
|
if (isFirstPage) {
|
||||||
|
this.inboxPage = 1;
|
||||||
|
}
|
||||||
const params = {
|
const params = {
|
||||||
j_email_id: this.selectedAccount.j_email_id,
|
j_email_id: this.selectedAccount.j_email_id,
|
||||||
journal_id: this.selectedAccount.journal_id,
|
journal_id: this.selectedAccount.journal_id,
|
||||||
keyword: this.searchKeyword || ''
|
// keyword: this.searchKeyword || '',
|
||||||
|
page: isFirstPage ? 1 : page,
|
||||||
|
per_page: this.inboxPerPage
|
||||||
};
|
};
|
||||||
|
if (isFirstPage) {
|
||||||
|
// 第一页不显示 loadingMore，仅翻页时显示
|
||||||
|
} else {
|
||||||
|
this.inboxLoadingMore = true;
|
||||||
|
}
|
||||||
this.$api.post(API.getInboxList, params).then(res => {
|
this.$api.post(API.getInboxList, params).then(res => {
|
||||||
const list = (res && res.data && (res.data.list || res.data)) || [];
|
const data = res && res.data ? res.data : {};
|
||||||
this.tableData_in = (Array.isArray(list) ? list : []).map(item => ({
|
const list = Array.isArray(data.list) ? data.list : (Array.isArray(data) ? data : []);
|
||||||
|
const rows = list.map(item => ({
|
||||||
id: item.inbox_id || item.id,
|
id: item.inbox_id || item.id,
|
||||||
inbox_id: item.inbox_id || item.id,
|
inbox_id: item.inbox_id || item.id,
|
||||||
email: item.from_email,
|
email: item.from_email,
|
||||||
from_name: item.from_name,
|
from_name: item.from_name,
|
||||||
subject: item.subject,
|
subject: item.subject,
|
||||||
email_date: item.email_date,
|
email_date: item.email_date,
|
||||||
content: item.content_html || item.content_text || '',
|
content: item.content_html || item.content_text || '',
|
||||||
state: item.is_read === 1 ? 0 : 1
|
state: item.is_read === 1 ? 0 : 1
|
||||||
}));
|
}));
|
||||||
this.queryIn.num = this.tableData_in.length;
|
if (isFirstPage) {
|
||||||
|
this.tableData_in = rows;
|
||||||
|
} else {
|
||||||
|
this.tableData_in = this.tableData_in.concat(rows);
|
||||||
|
}
|
||||||
|
this.inboxPage = data.page != null ? Number(data.page) : (isFirstPage ? 1 : this.inboxPage);
|
||||||
|
this.inboxTotalPages = data.total_pages != null ? Number(data.total_pages) : 1;
|
||||||
|
this.inboxTotal = data.total != null ? Number(data.total) : this.tableData_in.length;
|
||||||
|
this.queryIn.num = this.inboxTotal;
|
||||||
|
this.inboxLoadingMore = false;
|
||||||
|
}).catch(() => {
|
||||||
|
this.inboxLoadingMore = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
switchFolder(f) { this.currentFolder = f; this.activeMailId = null; },
|
switchFolder(f) { this.currentFolder = f; this.activeMailId = null; },
|
||||||
@@ -281,12 +390,26 @@ export default {
|
|||||||
this.detailLoading = false;
|
this.detailLoading = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
// 同步收件箱：api/email_client/syncInbox 参数 j_email_id、journal_id（均为 String），完成后重新拉取 displayList
|
||||||
handleSyncInbox() {
|
handleSyncInbox() {
|
||||||
|
if (!this.selectedAccount) return;
|
||||||
this.syncLoading = true;
|
this.syncLoading = true;
|
||||||
this.$api.post(API.receiveMail, { j_email_id: this.selectedAccount.j_email_id }).then(() => {
|
const params = {
|
||||||
|
j_email_id: String(this.selectedAccount.j_email_id),
|
||||||
|
journal_id: String(this.selectedAccount.journal_id),
|
||||||
|
};
|
||||||
|
this.$api.post(API.syncInbox, params).then((res) => {
|
||||||
this.syncLoading = false;
|
this.syncLoading = false;
|
||||||
this.fetchData();
|
if (res && res.code === 0) {
|
||||||
}).catch(() => this.syncLoading = false);
|
this.$message.success(this.$t('mailboxCollect.syncSuccess'));
|
||||||
|
this.fetchData();
|
||||||
|
} else {
|
||||||
|
this.$message.error((res && res.msg) || this.$t('mailboxCollect.syncFail'));
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
this.syncLoading = false;
|
||||||
|
this.$message.error(this.$t('mailboxCollect.syncFail'));
|
||||||
|
});
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 格式化邮件显示时间
|
* 格式化邮件显示时间
|
||||||
@@ -347,7 +470,16 @@ export default {
|
|||||||
this.selectedAccount.j_email_id
|
this.selectedAccount.j_email_id
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
handleSearch() { this.fetchData(); },
|
handleSearch() { this.fetchData(1); },
|
||||||
|
onListScroll(e) {
|
||||||
|
const el = e.target;
|
||||||
|
if (!el || this.currentFolder !== 'inbox' || this.inboxLoadingMore) return;
|
||||||
|
if (this.inboxPage >= this.inboxTotalPages) return;
|
||||||
|
const threshold = 80;
|
||||||
|
if (el.scrollHeight - el.scrollTop - el.clientHeight <= threshold) {
|
||||||
|
this.fetchData(this.inboxPage + 1);
|
||||||
|
}
|
||||||
|
},
|
||||||
notImplemented() { this.$message.info('开发中...'); }
|
notImplemented() { this.$message.info('开发中...'); }
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -370,8 +502,11 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
.p-10 { padding: 10px; }
|
||||||
.p-20 { padding: 20px; }
|
.p-20 { padding: 20px; }
|
||||||
.write-btn { width: 100%; border-radius: 8px; font-weight: bold; }
|
.sidebar-top-actions { display: flex; gap: 10px; }
|
||||||
|
.write-btn { flex: 1; width: auto; border-radius: 8px; font-weight: bold;padding-left: 0px;padding-right: 0px; }
|
||||||
|
.receive-btn { flex: 1; width: auto; border-radius: 8px; font-weight: bold;margin-left: 0px;padding-left: 0px;padding-right: 0px; }
|
||||||
.folder-list { list-style: none; padding: 0; margin: 0; flex: 1; }
|
.folder-list { list-style: none; padding: 0; margin: 0; flex: 1; }
|
||||||
.folder-list li {
|
.folder-list li {
|
||||||
padding: 12px 20px;
|
padding: 12px 20px;
|
||||||
@@ -413,7 +548,9 @@ export default {
|
|||||||
.send-time { font-size: 12px; color: #909399; flex-shrink: 0; }
|
.send-time { font-size: 12px; color: #909399; flex-shrink: 0; }
|
||||||
.row-two { margin-bottom: 4px; }
|
.row-two { margin-bottom: 4px; }
|
||||||
.mail-subject { font-size: 13px; color: #6a7282; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
.mail-subject { font-size: 13px; color: #6a7282; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||||
.mail-excerpt { font-size: 12px; color: #606266; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
.mail-excerpt { font-size: 12px; color: #606266; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
||||||
|
.load-more-tip { text-align: center; padding: 12px; font-size: 12px; color: #909399; }
|
||||||
|
.load-more-tip.no-more { color: #c0c4cc; }
|
||||||
|
|
||||||
/* 拖拽条 */
|
/* 拖拽条 */
|
||||||
.list-resizer { width: 4px; cursor: col-resize; border-left: 1px solid #eaeaea; transition: background 0.2s; }
|
.list-resizer { width: 4px; cursor: col-resize; border-left: 1px solid #eaeaea; transition: background 0.2s; }
|
||||||
|
|||||||
@@ -24,17 +24,18 @@
|
|||||||
<!-- <el-table-column prop="journal_name" :label="$t('mailboxConfig.journal')" min-width="140"></el-table-column> -->
|
<!-- <el-table-column prop="journal_name" :label="$t('mailboxConfig.journal')" min-width="140"></el-table-column> -->
|
||||||
<el-table-column prop="account" :label="$t('mailboxConfig.account')" min-width="160"></el-table-column>
|
<el-table-column prop="account" :label="$t('mailboxConfig.account')" min-width="160"></el-table-column>
|
||||||
<el-table-column prop="smtp_from_name" :label="$t('mailboxConfig.smtpFromName')" min-width="120"></el-table-column>
|
<el-table-column prop="smtp_from_name" :label="$t('mailboxConfig.smtpFromName')" min-width="120"></el-table-column>
|
||||||
<el-table-column prop="smtp_host" :label="$t('mailboxConfig.smtpHost')" min-width="120"></el-table-column>
|
<!-- <el-table-column prop="smtp_host" :label="$t('mailboxConfig.smtpHost')" min-width="120"></el-table-column> -->
|
||||||
<el-table-column prop="smtp_port" :label="$t('mailboxConfig.smtpPort')" width="100" align="center"></el-table-column>
|
<!-- <el-table-column prop="smtp_port" :label="$t('mailboxConfig.smtpPort')" width="100" align="center"></el-table-column> -->
|
||||||
<el-table-column prop="imap_host" :label="$t('mailboxConfig.imapHost')" min-width="120"></el-table-column>
|
<!-- <el-table-column prop="imap_host" :label="$t('mailboxConfig.imapHost')" min-width="120"></el-table-column> -->
|
||||||
<el-table-column prop="imap_port" :label="$t('mailboxConfig.imapPort')" width="100" align="center"></el-table-column>
|
<!-- <el-table-column prop="imap_port" :label="$t('mailboxConfig.imapPort')" width="100" align="center"></el-table-column> -->
|
||||||
<el-table-column prop="today_sent" :label="$t('mailboxConfig.todaySent')" width="95" align="center"></el-table-column>
|
<el-table-column prop="today_sent" :label="$t('mailboxConfig.todaySent')" width="95" align="center"></el-table-column>
|
||||||
<el-table-column prop="remaining_today" :label="$t('mailboxConfig.remainingToday')" width="130" align="center"></el-table-column>
|
<el-table-column prop="remaining_today" :label="$t('mailboxConfig.remainingToday')" width="130" align="center"></el-table-column>
|
||||||
<!-- <el-table-column prop="state" :label="$t('mailboxConfig.state')" width="80" align="center"></el-table-column> -->
|
<!-- <el-table-column prop="state" :label="$t('mailboxConfig.state')" width="80" align="center"></el-table-column> -->
|
||||||
<el-table-column :label="$t('mailboxConfig.operation')" width="220" align="center" fixed="right">
|
<el-table-column label="" width="380" align="center" fixed="right">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-button size="mini" type="primary" plain icon="el-icon-edit" @click="handleEdit(scope.row)">{{ $t('mailboxConfig.edit') }}</el-button>
|
<el-button size="mini" type="primary" plain icon="el-icon-edit" @click="handleEdit(scope.row)">{{ $t('mailboxConfig.edit') }}</el-button>
|
||||||
<el-button size="mini" type="success" plain icon="el-icon-message" @click="handleMailManage(scope.row)">{{ $t('mailboxConfig.mailManage') }}</el-button>
|
<el-button size="mini" type="success" plain icon="el-icon-message" @click="handleMailManage(scope.row)">{{ $t('mailboxConfig.mailManage') }}</el-button>
|
||||||
|
<el-button size="mini" type="danger" plain icon="el-icon-delete" @click="handleDelete(scope.row)">{{ $t('mailboxConfig.delete') }}</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@@ -89,7 +90,7 @@
|
|||||||
getAccounts: 'api/email_client/getAccounts',
|
getAccounts: 'api/email_client/getAccounts',
|
||||||
addAccount: 'api/email_client/addAccount',
|
addAccount: 'api/email_client/addAccount',
|
||||||
updateAccount: 'api/email_client/updateAccount',
|
updateAccount: 'api/email_client/updateAccount',
|
||||||
deleteEmailAccount: 'api/Mail/deleteEmailAccount',
|
deleteAccount: 'api/email_client/deleteAccount',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -313,6 +314,26 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
// 删除邮箱配置：接口 api/email_client/deleteAccount，传参 j_email_id
|
||||||
|
handleDelete(row) {
|
||||||
|
const self = this;
|
||||||
|
this.$confirm(self.$t('mailboxConfig.deleteConfirm'), self.$t('mailboxConfig.title'), {
|
||||||
|
confirmButtonText: self.$t('mailboxConfig.confirm'),
|
||||||
|
cancelButtonText: self.$t('mailboxConfig.cancel'),
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
self.$api.post(API.deleteAccount, { j_email_id: row.j_email_id }).then((res) => {
|
||||||
|
if (res && res.code === 0) {
|
||||||
|
self.$message.success(self.$t('mailboxConfig.deleteSuccess'));
|
||||||
|
self.getList();
|
||||||
|
} else {
|
||||||
|
self.$message.error((res && res.msg) || self.$t('mailboxConfig.deleteFail'));
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
self.$message.error(self.$t('mailboxConfig.deleteFail'));
|
||||||
|
});
|
||||||
|
}).catch(() => {});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,163 +1,260 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="admin-container">
|
||||||
<div class="crumbs">
|
<h2>{{ $t('mailboxMould.title') }}</h2>
|
||||||
<el-breadcrumb separator="/">
|
<p class="subtitle">{{ $t('mailboxMould.subtitle') }}</p>
|
||||||
<el-breadcrumb-item>
|
|
||||||
<i class="el-icon-message"></i> Mailbox template list
|
|
||||||
</el-breadcrumb-item>
|
|
||||||
</el-breadcrumb>
|
|
||||||
</div>
|
|
||||||
<div class="container">
|
|
||||||
<div>
|
|
||||||
<quill-editor ref="myTextEditor" v-model="tempForm.content" :options="editorOption"></quill-editor>
|
|
||||||
<el-upload class="avatar-uploader" :action="baseUrl+'api/Suggest/upImg'" name="img" :show-file-list="false"
|
|
||||||
:on-success="uploadSuccess">
|
|
||||||
</el-upload>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
<div class="toolbar">
|
||||||
|
<el-select
|
||||||
|
v-model="filters.journalId"
|
||||||
|
:placeholder="$t('mailboxMould.journalPlaceholder')"
|
||||||
|
style="width: 300px; margin-right: 10px;"
|
||||||
|
@change="fetchList"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="j in journalList"
|
||||||
|
:key="j.journal_id"
|
||||||
|
:label="j.title"
|
||||||
|
:value="String(j.journal_id)"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
|
||||||
|
<el-select
|
||||||
|
v-model="filters.scene"
|
||||||
|
:placeholder="$t('mailboxMould.scenePlaceholder')"
|
||||||
|
clearable
|
||||||
|
style="width: 200px; margin-right: 10px;"
|
||||||
|
@change="fetchList"
|
||||||
|
@clear="fetchList"
|
||||||
|
>
|
||||||
|
<el-option :label="$t('mailboxMould.inviteSubmission')" value="invite_submission"></el-option>
|
||||||
|
<el-option :label="$t('mailboxMould.promoteCitation')" value="promote_citation"></el-option>
|
||||||
|
<el-option :label="$t('mailboxMould.generalThanks')" value="general_thanks"></el-option>
|
||||||
|
</el-select>
|
||||||
|
|
||||||
|
<el-select
|
||||||
|
v-model="filters.language"
|
||||||
|
:placeholder="$t('mailboxMould.languagePlaceholder')"
|
||||||
|
clearable
|
||||||
|
style="width: 120px; margin-right: 10px;"
|
||||||
|
@change="fetchList"
|
||||||
|
@clear="fetchList"
|
||||||
|
>
|
||||||
|
<el-option label="EN" value="en"></el-option>
|
||||||
|
<el-option label="ZH" value="zh"></el-option>
|
||||||
|
</el-select>
|
||||||
|
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="fetchList" style="margin-right: 10px;">
|
||||||
|
{{ $t('mailboxMould.searchBtn') }}
|
||||||
|
</el-button>
|
||||||
|
|
||||||
|
<div class="right-actions">
|
||||||
|
<el-button type="primary" plain icon="el-icon-plus" @click="handleCreate">{{ $t('mailboxMould.createTemplate') }}</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table :data="tableData" border style="width: 100%; margin-top: 20px;" v-loading="loading">
|
||||||
|
<el-table-column prop="title" :label="$t('mailboxMould.colTitle')" min-width="220">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div class="title-cell">
|
||||||
|
<strong>{{ scope.row.title }}</strong>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="subject" :label="$t('mailboxMould.colSubject')" min-width="220">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ scope.row.subject || '-' }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="scene" :label="$t('mailboxMould.colScene')">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag size="small" type="info">{{ scope.row.scene }}</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="language" :label="$t('mailboxMould.colLanguage')" width="100">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{ String(scope.row.language || '').toUpperCase() }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="version" :label="$t('mailboxMould.colVersion')" width="100"></el-table-column>
|
||||||
|
<el-table-column :label="$t('mailboxMould.colStatus')" width="120">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span :class="['status-dot', scope.row.status]"></span>
|
||||||
|
{{ scope.row.status === 'active' ? $t('mailboxMould.active') : $t('mailboxMould.inactive') }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column width="160">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" icon="el-icon-view" @click="handlePreview(scope.row)"></el-button>
|
||||||
|
<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
|
||||||
|
<el-button type="text" icon="el-icon-delete" class="delete-btn" @click="handleDelete(scope.row)"></el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
:title="$t('mailboxMould.previewTitle')"
|
||||||
|
:visible.sync="previewVisible"
|
||||||
|
width="80%"
|
||||||
|
>
|
||||||
|
<div class="preview-body" v-html="previewContent"></div>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="previewVisible = false">{{ $t('mailboxMould.previewClose') }}</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 引入富文本quill-editor相关组件依赖
|
const API = {
|
||||||
import {
|
listTemplates: 'api/mail_template/listTemplates',
|
||||||
quillEditor,
|
getAllJournal: 'api/Journal/getAllJournal',
|
||||||
Quill
|
deleteTemplate: 'api/mail_template/deleteTemplate'
|
||||||
} from 'vue-quill-editor'
|
};
|
||||||
// import {
|
|
||||||
// container,
|
|
||||||
// QuillWatch
|
|
||||||
// } from 'quill-image-extend-module'
|
|
||||||
// import ImageResize from 'quill-image-resize-module' // 引用，调整图片大小
|
|
||||||
// Quill.register('modules/imageResize', ImageResize)
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
baseUrl: this.Common.baseUrl,
|
searchQuery: '',
|
||||||
mediaUrl: this.Common.mediaUrl,
|
loading: false,
|
||||||
tempForm: {
|
journalList: [],
|
||||||
content: ''
|
filters: {
|
||||||
},
|
journalId: '',
|
||||||
editorOption: {
|
scene: '',
|
||||||
placeholder: 'Please enter...',
|
language: ''
|
||||||
modules: {
|
},
|
||||||
toolbar: {
|
tableData: [],
|
||||||
container: [
|
previewVisible: false,
|
||||||
['bold', 'italic', 'underline', 'strike'],
|
previewContent: ''
|
||||||
['blockquote', 'code-block'],
|
};
|
||||||
[{
|
},
|
||||||
'header': 1
|
created() {
|
||||||
}, {
|
this.loadJournals();
|
||||||
'header': 2
|
},
|
||||||
}],
|
methods: {
|
||||||
[{
|
loadJournals() {
|
||||||
'list': 'ordered'
|
this.$api
|
||||||
}, {
|
.post(API.getAllJournal, {})
|
||||||
'list': 'bullet'
|
.then(res => {
|
||||||
}],
|
const list = (res && res.data && res.data.journals) || res.data || [];
|
||||||
[{
|
const mapped = (Array.isArray(list) ? list : []).map(j => ({
|
||||||
'script': 'sub'
|
journal_id: j.journal_id || j.id,
|
||||||
}, {
|
title: j.title || j.name || ''
|
||||||
'script': 'super'
|
}));
|
||||||
}],
|
this.journalList = mapped;
|
||||||
[{
|
if (mapped.length > 0) {
|
||||||
'indent': '-1'
|
this.filters.journalId = String(mapped[0].journal_id);
|
||||||
}, {
|
}
|
||||||
'indent': '+1'
|
this.fetchList();
|
||||||
}],
|
})
|
||||||
[{
|
.catch(() => {
|
||||||
'direction': 'rtl'
|
this.journalList = [];
|
||||||
}],
|
});
|
||||||
[{
|
},
|
||||||
'size': ['small', false, 'large', 'huge']
|
fetchList() {
|
||||||
}],
|
this.loading = true;
|
||||||
[{
|
const params = {
|
||||||
'header': [1, 2, 3, 4, 5, 6, false]
|
journal_id: this.filters.journalId || '',
|
||||||
}],
|
scene: this.filters.scene || '',
|
||||||
[{
|
language: this.filters.language || ''
|
||||||
'color': []
|
};
|
||||||
}, {
|
this.$api
|
||||||
'background': []
|
.post(API.listTemplates, params)
|
||||||
}],
|
.then(res => {
|
||||||
[{
|
this.loading = false;
|
||||||
'font': []
|
const list = (res && res.data && res.data.list) || [];
|
||||||
}],
|
this.tableData = (Array.isArray(list) ? list : []).map(item => ({
|
||||||
[{
|
id: item.template_id || item.id,
|
||||||
'align': []
|
template_id: item.template_id || item.id,
|
||||||
}],
|
title: item.title,
|
||||||
['link', 'image']
|
subject: item.subject,
|
||||||
],
|
body_html: item.body_html,
|
||||||
// 工具栏
|
description: item.description || '',
|
||||||
handlers: {
|
scene: item.scene,
|
||||||
image: function(value) {
|
language: item.language,
|
||||||
if (value) {
|
version: item.version,
|
||||||
// upload点击上传事件
|
status: item.status || 'active'
|
||||||
document.querySelector('.avatar-uploader input').click()
|
}));
|
||||||
} else {
|
})
|
||||||
this.quill.format('image', false)
|
.catch(() => {
|
||||||
}
|
this.loading = false;
|
||||||
}
|
this.tableData = [];
|
||||||
}
|
});
|
||||||
},
|
},
|
||||||
// 调整图片大小
|
handleCreate() {
|
||||||
// imageResize: {
|
this.$router.push({ path: '/mailboxMouldDetail' });
|
||||||
// displayStyles: {
|
},
|
||||||
// backgroundColor: 'black',
|
handleEdit(row) {
|
||||||
// border: 'none',
|
console.log('Editing:', row);
|
||||||
// color: 'white'
|
// 跳转到详情页，后续可带上模板 ID
|
||||||
// },
|
const templateId = row && (row.template_id || row.id);
|
||||||
// modules: ['Resize', 'DisplaySize', 'Toolbar']
|
this.$router.push({ path: '/mailboxMouldDetail', query: templateId ? { template_id: String(templateId) } : {} });
|
||||||
// }
|
},
|
||||||
}
|
handlePreview(row) {
|
||||||
},
|
this.previewContent = row && row.body_html ? row.body_html : (row && row.body ? row.body : '');
|
||||||
};
|
this.previewVisible = true;
|
||||||
},
|
},
|
||||||
created() {
|
handleDelete(row) {
|
||||||
this.getDate();
|
const templateId = row && (row.template_id || row.id);
|
||||||
},
|
if (!templateId) return;
|
||||||
// components: {
|
this.$confirm(this.$t('mailboxMould.deleteConfirm'), this.$t('mailboxMould.colActions'), {
|
||||||
// quillEditor
|
confirmButtonText: this.$t('mailboxMould.confirm'),
|
||||||
// },
|
cancelButtonText: this.$t('mailboxMould.cancel'),
|
||||||
methods: {
|
type: 'warning'
|
||||||
// 获取编辑列表数据
|
}).then(() => {
|
||||||
getDate() {
|
this.$api.post(API.deleteTemplate, { template_id: String(templateId) }).then(res => {
|
||||||
|
if (res && res.code === 0) {
|
||||||
},
|
this.$message.success(this.$t('mailboxMould.deleteSuccess'));
|
||||||
|
this.fetchList();
|
||||||
// 富文本编辑器
|
} else {
|
||||||
onEditorChange({
|
this.$message.error((res && res.msg) || this.$t('mailboxMould.deleteFail'));
|
||||||
editor,
|
}
|
||||||
html,
|
}).catch(() => {
|
||||||
text
|
this.$message.error(this.$t('mailboxMould.deleteFail'));
|
||||||
}) {
|
});
|
||||||
this.content = html;
|
}).catch(() => {});
|
||||||
},
|
}
|
||||||
|
}
|
||||||
// 上传成功
|
};
|
||||||
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)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.avatar-uploader {
|
.admin-container {
|
||||||
height: 0;
|
padding: 20px;
|
||||||
}
|
background: #fff;
|
||||||
|
}
|
||||||
.avatar-uploader .el-upload--text {
|
.subtitle {
|
||||||
height: 0 !important;
|
color: #666;
|
||||||
border: 0;
|
font-size: 14px;
|
||||||
}
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.right-actions {
|
||||||
|
margin-left: auto;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.status-dot {
|
||||||
|
display: inline-block;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.status-dot.active {
|
||||||
|
background-color: #52c41a;
|
||||||
|
}
|
||||||
|
.delete-btn {
|
||||||
|
color: #f5222d !important;
|
||||||
|
}
|
||||||
|
.preview-body {
|
||||||
|
max-height: 70vh;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
360
src/components/page/mailboxMouldDetail.vue
Normal file
360
src/components/page/mailboxMouldDetail.vue
Normal file
@@ -0,0 +1,360 @@
|
|||||||
|
<template>
|
||||||
|
<div class="detail-container">
|
||||||
|
<header class="action-bar">
|
||||||
|
<div class="left">
|
||||||
|
<el-button type="text" icon="el-icon-back" @click="goBack" class="back-btn">{{ $t('mailboxMouldDetail.back') }}</el-button>
|
||||||
|
<el-divider direction="vertical"></el-divider>
|
||||||
|
<span class="page-title">{{ isEditMode ? $t('mailboxMouldDetail.editTemplate') : $t('mailboxMouldDetail.createTemplate') }}</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<el-button size="mini" @click="goBack">{{ $t('mailboxMouldDetail.cancel') }}</el-button>
|
||||||
|
<el-button type="primary" size="mini" icon="el-icon-document-checked" @click="handleSave">{{ $t('mailboxMouldDetail.save') }}</el-button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="editor-layout" v-loading="journalLoading" :element-loading-text="$t('mailboxMouldDetail.loading')">
|
||||||
|
<aside class="config-aside scroll-panel" v-show="!journalLoading">
|
||||||
|
<el-form ref="detailForm" label-position="top" :model="form" :rules="rules" size="mini" class="compact-form">
|
||||||
|
<div class="section-title"><i class="el-icon-setting"></i> {{ $t('mailboxMouldDetail.basicInfo') }}</div>
|
||||||
|
|
||||||
|
<el-form-item prop="title" :label="$t('mailboxMouldDetail.templateTitle')">
|
||||||
|
<el-input v-model="form.title" :placeholder="$t('mailboxMouldDetail.templateTitlePlaceholder')"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item prop="journalId" :label="$t('mailboxMouldDetail.journal')">
|
||||||
|
<el-select v-model="form.journalId" filterable style="width: 100%">
|
||||||
|
<el-option v-for="j in journalList" :key="j.journal_id" :label="j.title" :value="String(j.journal_id)" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item prop="scene" :label="$t('mailboxMouldDetail.templateType')">
|
||||||
|
<el-select v-model="form.scene" style="width: 100%">
|
||||||
|
<el-option :label="$t('mailboxMouldDetail.sceneInviteSubmission')" value="invite_submission"></el-option>
|
||||||
|
<el-option :label="$t('mailboxMouldDetail.scenePromoteCitation')" value="promote_citation"></el-option>
|
||||||
|
<el-option :label="$t('mailboxMouldDetail.sceneGeneralThanks')" value="general_thanks"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-row :gutter="8">
|
||||||
|
<el-col :span="14">
|
||||||
|
<el-form-item prop="lang" :label="$t('mailboxMouldDetail.languageConfig')">
|
||||||
|
<el-radio-group v-model="form.lang" class="full-width-radio">
|
||||||
|
<el-radio-button label="en">EN</el-radio-button>
|
||||||
|
<el-radio-button label="zh">ZH</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="10">
|
||||||
|
<el-form-item prop="version" :label="$t('mailboxMouldDetail.version')">
|
||||||
|
<el-input v-model="form.version" :placeholder="$t('mailboxMouldDetail.versionPlaceholder')"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-divider></el-divider>
|
||||||
|
|
||||||
|
<div class="section-title"><i class="el-icon-cpu"></i> {{ $t('mailboxMouldDetail.variablesJson') }}</div>
|
||||||
|
<el-form-item class="no-m-b">
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
:rows="6"
|
||||||
|
v-model="form.variables"
|
||||||
|
class="dark-json-input"
|
||||||
|
:placeholder="$t('mailboxMouldDetail.variablesPlaceholder')"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<div class="status-box">
|
||||||
|
<span>{{ $t('mailboxMouldDetail.activeStatus') }}</span>
|
||||||
|
<el-switch v-model="form.is_active" :active-value="1" :inactive-value="0"></el-switch>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<section class="main-editor" v-show="!journalLoading">
|
||||||
|
<el-card shadow="never" class="editor-card">
|
||||||
|
<div class="subject-input-wrapper">
|
||||||
|
<div class="subject-label">{{ $t('mailboxMouldDetail.emailSubject') }}:</div>
|
||||||
|
<el-input
|
||||||
|
v-model="form.subject"
|
||||||
|
size="small"
|
||||||
|
:placeholder="$t('mailboxMouldDetail.emailSubjectPlaceholder')"
|
||||||
|
class="subject-inner-input"
|
||||||
|
></el-input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="body-editor-container">
|
||||||
|
<div class="subject-label" style="margin-bottom: 10px;">{{ $t('mailboxMouldDetail.emailBody') }}:</div>
|
||||||
|
<CkeditorMail v-model="form.body" />
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CkeditorMail from '@/components/page/components/email/CkeditorMail.vue';
|
||||||
|
|
||||||
|
const API = {
|
||||||
|
getAllJournal: 'api/Journal/getAllJournal',
|
||||||
|
getTemplate: 'api/mail_template/getTemplate',
|
||||||
|
saveTemplate: 'api/mail_template/saveTemplate'
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'mailboxMouldDetail',
|
||||||
|
components: { CkeditorMail },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
journalLoading: true,
|
||||||
|
journalList: [],
|
||||||
|
rules: {
|
||||||
|
journalId: [{ required: true, message: this.$t('mailboxMouldDetail.rulesJournal'), trigger: 'change' }],
|
||||||
|
scene: [{ required: true, message: this.$t('mailboxMouldDetail.rulesScene'), trigger: 'change' }],
|
||||||
|
lang: [{ required: true, message: this.$t('mailboxMouldDetail.rulesLanguage'), trigger: 'change' }],
|
||||||
|
title: [{ required: true, message: this.$t('mailboxMouldDetail.rulesTitle'), trigger: 'blur' }],
|
||||||
|
version: [{ required: true, message: this.$t('mailboxMouldDetail.rulesVersion'), trigger: 'blur' }]
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
journalId: '',
|
||||||
|
scene: 'invite_submission',
|
||||||
|
lang: 'en',
|
||||||
|
version: '1.0.0',
|
||||||
|
title: '',
|
||||||
|
subject: '',
|
||||||
|
body: '',
|
||||||
|
variables: '',
|
||||||
|
is_active: 1
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isEditMode() {
|
||||||
|
const q = this.$route && this.$route.query ? this.$route.query : {};
|
||||||
|
return !!(q.template_id || q.id);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.loadJournals();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadJournals() {
|
||||||
|
this.journalLoading = true;
|
||||||
|
this.$api
|
||||||
|
.post(API.getAllJournal, {})
|
||||||
|
.then(res => {
|
||||||
|
const list = (res && res.data && res.data.journals) || res.data || [];
|
||||||
|
const mapped = (Array.isArray(list) ? list : []).map(j => ({
|
||||||
|
journal_id: j.journal_id || j.id,
|
||||||
|
title: j.title || j.name || ''
|
||||||
|
}));
|
||||||
|
this.journalList = mapped;
|
||||||
|
if (!this.form.journalId && mapped.length > 0) {
|
||||||
|
this.form.journalId = String(mapped[0].journal_id);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.journalList = [];
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
const q = this.$route && this.$route.query ? this.$route.query : {};
|
||||||
|
const templateId = q.template_id || q.id || '';
|
||||||
|
if (templateId) {
|
||||||
|
return this.loadTemplate(String(templateId));
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.journalLoading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
loadTemplate(templateId) {
|
||||||
|
return this.$api.post(API.getTemplate, { template_id: String(templateId) }).then(res => {
|
||||||
|
if (!res || res.code !== 0) return;
|
||||||
|
const data = (res && res.data) || {};
|
||||||
|
const t = data.template || data.detail || data || {};
|
||||||
|
if (t.journal_id != null) this.form.journalId = String(t.journal_id);
|
||||||
|
if (t.scene != null) this.form.scene = String(t.scene);
|
||||||
|
if (t.language != null) this.form.lang = String(t.language).toLowerCase();
|
||||||
|
if (t.title != null) this.form.title = String(t.title);
|
||||||
|
if (t.subject != null) this.form.subject = String(t.subject);
|
||||||
|
if (t.variables_json != null) this.form.variables = String(t.variables_json);
|
||||||
|
if (t.version != null) this.form.version = String(t.version);
|
||||||
|
if (t.is_active != null) this.form.is_active = Number(t.is_active) === 1 ? 1 : 0;
|
||||||
|
const bodyHtml = t.body_html != null ? t.body_html : (t.body != null ? t.body : '');
|
||||||
|
this.form.body = String(bodyHtml || '');
|
||||||
|
});
|
||||||
|
},
|
||||||
|
goBack() {
|
||||||
|
this.$router.push({ path: '/mailboxMould' });
|
||||||
|
},
|
||||||
|
handleSave() {
|
||||||
|
const formRef = this.$refs.detailForm;
|
||||||
|
const validatePromise = formRef && formRef.validate ? new Promise(resolve => formRef.validate(ok => resolve(ok))) : Promise.resolve(true);
|
||||||
|
validatePromise.then(ok => {
|
||||||
|
if (!ok) return;
|
||||||
|
if (!this.form.subject) {
|
||||||
|
this.$message.warning(this.$t('mailboxMouldDetail.rulesSubject'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!this.form.body) {
|
||||||
|
this.$message.warning(this.$t('mailboxMouldDetail.rulesBody'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const q = this.$route.query;
|
||||||
|
const templateId = q.template_id || q.id || '';
|
||||||
|
const bodyHtml = this.form.body || '';
|
||||||
|
const bodyText = bodyHtml.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim();
|
||||||
|
const params = {
|
||||||
|
journal_id: String(this.form.journalId || ''),
|
||||||
|
scene: String(this.form.scene || 'invite_submission'),
|
||||||
|
language: String(this.form.lang || 'en'),
|
||||||
|
title: String(this.form.title || ''),
|
||||||
|
subject: String(this.form.subject || ''),
|
||||||
|
body_html: bodyHtml,
|
||||||
|
body_text: bodyText || '',
|
||||||
|
variables_json: String(this.form.variables || ''),
|
||||||
|
version: String(this.form.version || '1.0.0'),
|
||||||
|
is_active: this.form.is_active === 1 ? '1' : '0'
|
||||||
|
};
|
||||||
|
if (templateId) params.template_id = String(templateId);
|
||||||
|
this.$api.post(API.saveTemplate, params).then(res => {
|
||||||
|
if (res && res.code === 0) {
|
||||||
|
this.$message.success(this.$t('mailboxMouldDetail.saveSuccess'));
|
||||||
|
this.goBack();
|
||||||
|
} else {
|
||||||
|
this.$message.error((res && res.msg) || this.$t('mailboxMouldDetail.saveFail'));
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message.error(this.$t('mailboxMouldDetail.saveFail'));
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 容器锁定 */
|
||||||
|
.detail-container { height: 100vh; display: flex; flex-direction: column; background: #f0f2f5; overflow: hidden; }
|
||||||
|
|
||||||
|
/* 顶部栏高度压缩 */
|
||||||
|
.action-bar {
|
||||||
|
height: 40px;
|
||||||
|
background: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 15px;
|
||||||
|
border-bottom: 1px solid #dcdfe6;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.action-bar .left { display: flex; align-items: center; min-width: 0; }
|
||||||
|
.page-title { font-size: 13px; font-weight: bold; color: #333; }
|
||||||
|
.page-subject {
|
||||||
|
margin-left: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
max-width: 520px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-layout { flex: 1; display: flex; overflow: hidden; background: #f0f2f5; }
|
||||||
|
|
||||||
|
/* 左侧边栏 - 占比 2 (约 20%-25%) */
|
||||||
|
.config-aside {
|
||||||
|
width: 280px;
|
||||||
|
background: #fff;
|
||||||
|
border-right: 1px solid #dcdfe6;
|
||||||
|
padding: 15px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title { font-size: 12px; font-weight: bold; color: #409EFF; margin-bottom: 12px; display: flex; align-items: center; gap: 5px; }
|
||||||
|
.el-divider--horizontal { margin: 15px 0; }
|
||||||
|
|
||||||
|
/* 右侧编辑区 - 占比 8 */
|
||||||
|
.main-editor {
|
||||||
|
flex: 1;
|
||||||
|
padding: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-card {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
.editor-card /deep/ .el-card__body {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0 !important;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 邮件主题行优化 */
|
||||||
|
.subject-input-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 15px;
|
||||||
|
background: #fafafa;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.subject-label { font-size: 12px; font-weight: bold; color: #666; white-space: nowrap; }
|
||||||
|
.subject-inner-input{
|
||||||
|
border: 1px solid #dcdfe6;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.subject-inner-input /deep/ .el-input__inner { border: transparent; background: transparent; font-weight: 500; font-size: 14px; }
|
||||||
|
.subject-inner-input /deep/ .el-input__inner:focus { background: #fff; border-color: #dcdfe6; }
|
||||||
|
|
||||||
|
/* 编辑器容器撑满 */
|
||||||
|
.body-editor-container { flex: 1; overflow: hidden; padding: 10px 15px; }
|
||||||
|
.body-editor-container /deep/ .ck-editor { height: 100%; display: flex; flex-direction: column; }
|
||||||
|
.body-editor-container /deep/ .ck-editor__main { flex: 1; overflow: auto; }
|
||||||
|
|
||||||
|
/* 状态切换栏 */
|
||||||
|
.status-box {
|
||||||
|
margin-top: auto;
|
||||||
|
padding-top: 15px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 黑色背景 JSON 输入框 */
|
||||||
|
.dark-json-input /deep/ .el-textarea__inner {
|
||||||
|
background: #1e1e1e;
|
||||||
|
color: #9cdcfe;
|
||||||
|
font-family: 'Consolas', 'Monaco', monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
border: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 滚动条 */
|
||||||
|
.scroll-panel { overflow-y: auto; }
|
||||||
|
.scroll-panel::-webkit-scrollbar { width: 4px; }
|
||||||
|
.scroll-panel::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }
|
||||||
|
|
||||||
|
/* 表单紧凑微调 */
|
||||||
|
.detail-container /deep/ .el-form-item--mini.el-form-item { margin-bottom: 12px; }
|
||||||
|
.detail-container /deep/ .el-form--label-top .el-form-item__label { padding: 0 0 4px; font-size: 12px; color: #999; }
|
||||||
|
</style>
|
||||||
@@ -11,7 +11,7 @@
|
|||||||
</el-breadcrumb>
|
</el-breadcrumb>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container" style="padding-top: 0px;">
|
||||||
<div class="mail_shuru" style="position: relative; display: flex; align-items: center;">
|
<div class="mail_shuru" style="position: relative; display: flex; align-items: center;">
|
||||||
<span class="mail_tit">{{ $t('mailboxSend.to') }}</span>
|
<span class="mail_tit">{{ $t('mailboxSend.to') }}</span>
|
||||||
|
|
||||||
@@ -51,15 +51,15 @@
|
|||||||
</el-autocomplete>
|
</el-autocomplete>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<span class="sel_liby" @click="handleSetLibrary" style="position: static; margin-left: 10px;">
|
<!-- <span class="sel_liby" @click="handleSetLibrary" style="position: static; margin-left: 10px;">
|
||||||
<i class="el-icon-plus"></i>{{ $t('mailboxSend.selectFromLibrary') }}
|
<i class="el-icon-plus"></i>{{ $t('mailboxSend.selectFromLibrary') }}
|
||||||
</span>
|
</span> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="mail_shuru">
|
<div class="mail_shuru">
|
||||||
<span class="mail_tit">{{ $t('mailboxSend.subject') }}</span>
|
<span class="mail_tit">{{ $t('mailboxSend.subject') }}</span>
|
||||||
<el-input v-model="queryMail.sendtitle" class="mail_inp" ></el-input>
|
<el-input v-model="queryMail.sendtitle" class="mail_inp" ></el-input>
|
||||||
</div>
|
</div>
|
||||||
<div class="mail_shuru" style="position: relative; display: flex; align-items: center;">
|
<!-- <div class="mail_shuru" style="position: relative; display: flex; align-items: center;">
|
||||||
<span class="mail_tit">{{ $t('mailboxSend.cc') }}</span>
|
<span class="mail_tit">{{ $t('mailboxSend.cc') }}</span>
|
||||||
<div style="flex: 1; display: flex; flex-wrap: wrap; align-items: center;">
|
<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;">
|
<div class="selected-tags" v-if="ccList && ccList.length" style="display: inline-block;">
|
||||||
@@ -93,14 +93,20 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-autocomplete>
|
</el-autocomplete>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<div style="margin: 20px 0 0 0;">
|
<div class="mail-editor-wrap" 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>
|
|
||||||
|
|
||||||
|
|
||||||
|
<emailCkeditor
|
||||||
|
ref="myTextEditor"
|
||||||
|
v-model="queryMail.content"
|
||||||
|
:is-source-mode="isSourceMode"
|
||||||
|
:source-content.sync="sourceContent"
|
||||||
|
:source-rows="16"
|
||||||
|
:source-placeholder="$t('mailboxSend.sourcePlaceholder')"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="mail-footer-bar" :style="{ left: footerBarLeft }">
|
<div class="mail-footer-bar" :style="{ left: footerBarLeft }">
|
||||||
<div class="sender-info">
|
<div class="sender-info">
|
||||||
@@ -170,17 +176,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 引入富文本quill-editor相关组件依赖
|
import emailCkeditor from '@/components/page/components/email/CkeditorMail.vue'
|
||||||
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'
|
||||||
import 'multi-items-input/dist/multi-items-input.css'
|
import 'multi-items-input/dist/multi-items-input.css'
|
||||||
import bus from '../common/bus'
|
import bus from '../common/bus'
|
||||||
@@ -217,78 +214,10 @@
|
|||||||
Templatebox: false,
|
Templatebox: false,
|
||||||
Librarybox: false,
|
Librarybox: false,
|
||||||
link_TotalLibry: 0,
|
link_TotalLibry: 0,
|
||||||
editorOption: {
|
isSourceMode: false,
|
||||||
placeholder: this.$t('mailboxSend.editorPlaceholder'),
|
// 源码模式下的完整 HTML（保留 DOCTYPE、html、行内样式等），发送时若在源码模式则用此项
|
||||||
modules: {
|
sourceContent: '',
|
||||||
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']
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
toInput: '',
|
toInput: '',
|
||||||
toSelecting: false,
|
toSelecting: false,
|
||||||
nextToUid: 1,
|
nextToUid: 1,
|
||||||
@@ -301,6 +230,9 @@
|
|||||||
saveDraftLoading: false,
|
saveDraftLoading: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
emailCkeditor,
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
footerBarLeft() {
|
footerBarLeft() {
|
||||||
const collapsed = this.collapseValue === true || this.collapseValue === 'true';
|
const collapsed = this.collapseValue === true || this.collapseValue === 'true';
|
||||||
@@ -327,6 +259,25 @@
|
|||||||
bus.$off('collapse-content');
|
bus.$off('collapse-content');
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 切换富文本 / 源代码编辑模式（源码用 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;
|
||||||
|
},
|
||||||
// 返回收件箱（邮箱列表），带上 journal_id 和 j_email_id
|
// 返回收件箱（邮箱列表），带上 journal_id 和 j_email_id
|
||||||
goBackInbox() {
|
goBackInbox() {
|
||||||
const q = this.$route.query;
|
const q = this.$route.query;
|
||||||
@@ -533,11 +484,13 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.sendLoading = true;
|
this.sendLoading = true;
|
||||||
|
// 优先发送完整 HTML（sourceContent），这样富文本编辑后也能保持 head/style/table 等结构（像阿里邮箱）
|
||||||
|
const bodyContent = this.sourceContent || (this.queryMail.content || '');
|
||||||
const params = {
|
const params = {
|
||||||
journal_id: journalId,
|
journal_id: journalId,
|
||||||
to_email: toList.join(','),
|
to_email: toList.join(','),
|
||||||
subject: this.queryMail.sendtitle,
|
subject: this.queryMail.sendtitle,
|
||||||
content: this.queryMail.content || '',
|
content: bodyContent,
|
||||||
};
|
};
|
||||||
const self = this;
|
const self = this;
|
||||||
this.$api.post('api/email_client/sendOne', params).then((res) => {
|
this.$api.post('api/email_client/sendOne', params).then((res) => {
|
||||||
@@ -548,6 +501,7 @@
|
|||||||
self.queryMail.sendcc = '';
|
self.queryMail.sendcc = '';
|
||||||
self.ccList = [];
|
self.ccList = [];
|
||||||
self.queryMail.content = '';
|
self.queryMail.content = '';
|
||||||
|
self.sourceContent = '';
|
||||||
self.fileL_atta = [];
|
self.fileL_atta = [];
|
||||||
self.goBackInbox();
|
self.goBackInbox();
|
||||||
} else {
|
} else {
|
||||||
@@ -906,4 +860,32 @@
|
|||||||
box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
|
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>
|
</style>
|
||||||
|
|||||||
205
src/components/page/mailboxStyle.vue
Normal file
205
src/components/page/mailboxStyle.vue
Normal file
@@ -0,0 +1,205 @@
|
|||||||
|
<template>
|
||||||
|
<div class="admin-container">
|
||||||
|
<h2>{{ $t('mailboxStyle.title') }}</h2>
|
||||||
|
<p class="subtitle">{{ $t('mailboxStyle.subtitle') }}</p>
|
||||||
|
|
||||||
|
<div class="toolbar">
|
||||||
|
|
||||||
|
<div class="right-actions">
|
||||||
|
<el-button type="primary" icon="el-icon-refresh" @click="fetchList">{{ $t('mailboxStyle.searchBtn') }}</el-button>
|
||||||
|
<el-button type="primary" plain icon="el-icon-plus" @click="handleCreate">{{ $t('mailboxStyle.createStyle') }}</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table :data="tableData" border style="width: 100%; margin-top: 20px;" v-loading="loading">
|
||||||
|
<el-table-column prop="name" :label="$t('mailboxStyle.colName')" min-width="220">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div class="title-cell">
|
||||||
|
<strong>{{ scope.row.title }}</strong>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="description" :label="$t('mailboxStyle.colDescription')" min-width="220">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ scope.row.description || '-' }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
|
||||||
|
<el-table-column width="160">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" icon="el-icon-view" @click="handlePreview(scope.row)"></el-button>
|
||||||
|
<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
|
||||||
|
<el-button type="text" icon="el-icon-delete" class="delete-btn" @click="handleDelete(scope.row)"></el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
:title="$t('mailboxMould.previewTitle')"
|
||||||
|
:visible.sync="previewVisible"
|
||||||
|
width="80%"
|
||||||
|
>
|
||||||
|
<div class="preview-body" v-html="previewContent"></div>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="previewVisible = false">{{ $t('mailboxMould.previewClose') }}</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const API = {
|
||||||
|
listStyles: 'api/mail_template/listStyles',
|
||||||
|
getAllJournal: 'api/Journal/getAllJournal',
|
||||||
|
deleteStyle: 'api/mail_template/deleteStyle'
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'mailboxStyle',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchQuery: '',
|
||||||
|
loading: false,
|
||||||
|
journalList: [],
|
||||||
|
filters: {
|
||||||
|
journalId: '',
|
||||||
|
scene: '',
|
||||||
|
language: ''
|
||||||
|
},
|
||||||
|
tableData: [],
|
||||||
|
previewVisible: false,
|
||||||
|
previewContent: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.loadJournals();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadJournals() {
|
||||||
|
this.$api
|
||||||
|
.post(API.getAllJournal, {})
|
||||||
|
.then(res => {
|
||||||
|
const list = (res && res.data && res.data.journals) || res.data || [];
|
||||||
|
const mapped = (Array.isArray(list) ? list : []).map(j => ({
|
||||||
|
journal_id: j.journal_id || j.id,
|
||||||
|
title: j.title || j.name || ''
|
||||||
|
}));
|
||||||
|
this.journalList = mapped;
|
||||||
|
if (mapped.length > 0) {
|
||||||
|
this.filters.journalId = String(mapped[0].journal_id);
|
||||||
|
}
|
||||||
|
this.fetchList();
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.journalList = [];
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fetchList() {
|
||||||
|
this.loading = true;
|
||||||
|
const params = {
|
||||||
|
journal_id: this.filters.journalId || '',
|
||||||
|
scene: this.filters.scene || '',
|
||||||
|
language: this.filters.language || ''
|
||||||
|
};
|
||||||
|
this.$api
|
||||||
|
.post(API.listStyles, params)
|
||||||
|
.then(res => {
|
||||||
|
this.loading = false;
|
||||||
|
const list = (res && res.data && res.data.list) || [];
|
||||||
|
this.tableData = (Array.isArray(list) ? list : []).map(item => ({
|
||||||
|
id: item.style_id || item.id,
|
||||||
|
style_id: item.style_id || item.id,
|
||||||
|
title: item.name,
|
||||||
|
|
||||||
|
header_html: item.header_html,
|
||||||
|
footer_html: item.footer_html,
|
||||||
|
description: item.description || '',
|
||||||
|
|
||||||
|
}));
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.loading = false;
|
||||||
|
this.tableData = [];
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleCreate() {
|
||||||
|
this.$router.push({ path: '/mailboxStyleDetail' });
|
||||||
|
},
|
||||||
|
handleEdit(row) {
|
||||||
|
const styleId = row && (row.style_id || row.id);
|
||||||
|
// TODO: 跳转到“风格详情”页，并带上 style_id
|
||||||
|
this.$router.push({ path: '/mailboxStyleDetail', query: styleId ? { style_id: String(styleId) } : {} });
|
||||||
|
},
|
||||||
|
handlePreview(row) {
|
||||||
|
const header = (row && row.header_html) || '';
|
||||||
|
const footer = (row && row.footer_html) || '';
|
||||||
|
this.previewContent = `${header}${footer}`;
|
||||||
|
this.previewVisible = true;
|
||||||
|
},
|
||||||
|
handleDelete(row) {
|
||||||
|
const styleId = row && (row.style_id || row.id);
|
||||||
|
if (!styleId) return;
|
||||||
|
this.$confirm(this.$t('mailboxMould.deleteConfirm'), this.$t('mailboxMould.colActions'), {
|
||||||
|
confirmButtonText: this.$t('mailboxMould.confirm'),
|
||||||
|
cancelButtonText: this.$t('mailboxMould.cancel'),
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
this.$api.post(API.deleteStyle, { style_id: String(styleId) }).then(res => {
|
||||||
|
if (res && res.code === 0) {
|
||||||
|
this.$message.success(this.$t('mailboxMould.deleteSuccess'));
|
||||||
|
this.fetchList();
|
||||||
|
} else {
|
||||||
|
this.$message.error((res && res.msg) || this.$t('mailboxMould.deleteFail'));
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message.error(this.$t('mailboxMould.deleteFail'));
|
||||||
|
});
|
||||||
|
}).catch(() => {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.admin-container {
|
||||||
|
padding: 20px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.right-actions {
|
||||||
|
margin-left: auto;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.status-dot {
|
||||||
|
display: inline-block;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.status-dot.active {
|
||||||
|
background-color: #52c41a;
|
||||||
|
}
|
||||||
|
.delete-btn {
|
||||||
|
color: #f5222d !important;
|
||||||
|
}
|
||||||
|
.preview-body {
|
||||||
|
max-height: 70vh;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
156
src/components/page/mailboxStyleDetail.vue
Normal file
156
src/components/page/mailboxStyleDetail.vue
Normal file
@@ -0,0 +1,156 @@
|
|||||||
|
<template>
|
||||||
|
<div class="detail-container">
|
||||||
|
<header class="action-bar">
|
||||||
|
<div class="left">
|
||||||
|
<el-button type="text" icon="el-icon-back" @click="goBack" class="back-btn">{{ $t('mailboxStyleDetail.back') }}</el-button>
|
||||||
|
<el-divider direction="vertical"></el-divider>
|
||||||
|
<span class="page-title">{{ isEditMode ? $t('mailboxStyleDetail.editStyle') : $t('mailboxStyleDetail.createStyle') }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<el-button size="mini" @click="goBack">{{ $t('mailboxStyleDetail.cancel') }}</el-button>
|
||||||
|
<el-button type="primary" size="mini" icon="el-icon-document-checked" @click="handleSave">{{ $t('mailboxStyleDetail.save') }}</el-button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="editor-layout" v-loading="loading" :element-loading-text="$t('mailboxStyleDetail.loading')">
|
||||||
|
<section class="scroll-panel edit-section">
|
||||||
|
<el-form ref="styleForm" label-position="top" :model="form" :rules="rules" size="mini" class="compact-form">
|
||||||
|
<el-form-item prop="name" :label="$t('mailboxStyleDetail.name')">
|
||||||
|
<el-input v-model="form.name" :placeholder="$t('mailboxStyleDetail.namePlaceholder')"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item prop="description" :label="$t('mailboxStyleDetail.description')">
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
:rows="2"
|
||||||
|
v-model="form.description"
|
||||||
|
:placeholder="$t('mailboxStyleDetail.descriptionPlaceholder')"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item prop="header_html" :label="$t('mailboxStyleDetail.headerHtml')">
|
||||||
|
<CkeditorMail v-model="form.header_html" />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item prop="footer_html" :label="$t('mailboxStyleDetail.footerHtml')">
|
||||||
|
<CkeditorMail v-model="form.footer_html" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CkeditorMail from '@/components/page/components/email/CkeditorMail.vue';
|
||||||
|
|
||||||
|
const API = {
|
||||||
|
getStyle: 'api/mail_template/getStyle',
|
||||||
|
saveStyle: 'api/mail_template/saveStyle'
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'mailboxStyleDetail',
|
||||||
|
components: { CkeditorMail },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
form: {
|
||||||
|
style_id: '',
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
header_html: '',
|
||||||
|
footer_html: ''
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
name: [{ required: true, message: this.$t('mailboxStyleDetail.rulesName'), trigger: 'blur' }],
|
||||||
|
description: [{ required: true, message: this.$t('mailboxStyleDetail.rulesDescription'), trigger: 'blur' }],
|
||||||
|
header_html: [{ required: true, message: this.$t('mailboxStyleDetail.rulesHeaderHtml'), trigger: 'change' }],
|
||||||
|
footer_html: [{ required: true, message: this.$t('mailboxStyleDetail.rulesFooterHtml'), trigger: 'change' }]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isEditMode() {
|
||||||
|
const q = this.$route && this.$route.query ? this.$route.query : {};
|
||||||
|
return !!(q.style_id || q.id);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
const q = this.$route && this.$route.query ? this.$route.query : {};
|
||||||
|
const styleId = q.style_id || q.id || '';
|
||||||
|
if (styleId) {
|
||||||
|
this.loadDetail(String(styleId));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadDetail(styleId) {
|
||||||
|
this.loading = true;
|
||||||
|
this.$api
|
||||||
|
.post(API.getStyle, { style_id: styleId })
|
||||||
|
.then(res => {
|
||||||
|
const data = (res && res.data) || {};
|
||||||
|
const s = data.style || data.detail || data || {};
|
||||||
|
this.form.style_id = styleId;
|
||||||
|
if (s.name != null) this.form.name = String(s.name);
|
||||||
|
if (s.description != null) this.form.description = String(s.description);
|
||||||
|
if (s.header_html != null) this.form.header_html = String(s.header_html);
|
||||||
|
if (s.footer_html != null) this.form.footer_html = String(s.footer_html);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
goBack() {
|
||||||
|
this.$router.push({ path: '/mailboxStyle' });
|
||||||
|
},
|
||||||
|
handleSave() {
|
||||||
|
const formRef = this.$refs.styleForm;
|
||||||
|
const validatePromise =
|
||||||
|
formRef && formRef.validate ? new Promise(resolve => formRef.validate(ok => resolve(ok))) : Promise.resolve(true);
|
||||||
|
validatePromise.then(ok => {
|
||||||
|
if (!ok) return;
|
||||||
|
this.loading = true;
|
||||||
|
const q = this.$route && this.$route.query ? this.$route.query : {};
|
||||||
|
const styleId = q.style_id || q.id || '';
|
||||||
|
const params = {
|
||||||
|
style_id: styleId ? String(styleId) : '',
|
||||||
|
name: this.form.name || '',
|
||||||
|
description: this.form.description || '',
|
||||||
|
header_html: this.form.header_html || '',
|
||||||
|
footer_html: this.form.footer_html || ''
|
||||||
|
};
|
||||||
|
this.$api
|
||||||
|
.post(API.saveStyle, params)
|
||||||
|
.then(res => {
|
||||||
|
if (res && res.code === 0) {
|
||||||
|
this.$message.success(this.$t('mailboxStyleDetail.saveSuccess'));
|
||||||
|
this.goBack();
|
||||||
|
} else {
|
||||||
|
this.$message.error((res && res.msg) || this.$t('mailboxStyleDetail.saveFail'));
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.$message.error(this.$t('mailboxStyleDetail.saveFail'));
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.detail-container { height: 100vh; display: flex; flex-direction: column; background: #f4f6f8; overflow: hidden; }
|
||||||
|
.action-bar { height: 40px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid #dcdfe6; flex-shrink: 0; }
|
||||||
|
.page-title { font-size: 13px; font-weight: bold; color: #333; }
|
||||||
|
.back-btn { font-size: 13px; }
|
||||||
|
|
||||||
|
.editor-layout { flex: 1; display: flex; padding: 12px; gap: 12px; overflow: hidden; }
|
||||||
|
.edit-section { flex: 1; background: #fff; border: 1px solid #ebeef5; border-radius: 4px; padding: 15px; overflow-y: auto; }
|
||||||
|
|
||||||
|
.compact-form /deep/ .el-form-item__label { padding-bottom: 4px; font-size: 12px; color: #999; }
|
||||||
|
.compact-form /deep/ .el-form-item--mini.el-form-item { margin-bottom: 12px; }
|
||||||
|
</style>
|
||||||
@@ -1046,7 +1046,34 @@ export default new Router({
|
|||||||
path: '/mailboxMould', //邮箱系统-模板
|
path: '/mailboxMould', //邮箱系统-模板
|
||||||
component: () => import('../components/page/mailboxMould'),
|
component: () => import('../components/page/mailboxMould'),
|
||||||
meta: {
|
meta: {
|
||||||
title: 'Mailbox template'
|
title: 'Mailbox template',
|
||||||
|
titleKey: 'sidebar.emailTemplates'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/mailboxMouldDetail', // 邮箱系统-模板详情
|
||||||
|
component: () => import('../components/page/mailboxMouldDetail'),
|
||||||
|
meta: {
|
||||||
|
title: 'Mailbox template detail',
|
||||||
|
hideSidebar: true,
|
||||||
|
hideJournal: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/mailboxStyle', // 邮箱系统-邮件风格
|
||||||
|
component: () => import('../components/page/mailboxStyle'),
|
||||||
|
meta: {
|
||||||
|
title: 'Email styles',
|
||||||
|
titleKey: 'sidebar.emailStyles'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/mailboxStyleDetail', // 邮箱系统-邮件风格详情
|
||||||
|
component: () => import('../components/page/mailboxStyleDetail'),
|
||||||
|
meta: {
|
||||||
|
title: 'Email style detail',
|
||||||
|
hideSidebar: true,
|
||||||
|
hideJournal: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user