406 lines
16 KiB
Vue
406 lines
16 KiB
Vue
<template>
|
||
<div>
|
||
<div class="crumbs">
|
||
<el-breadcrumb separator="/">
|
||
<el-breadcrumb-item><i class="el-icon-setting"></i> {{ $t('sidebar.promotionManagement') }}</el-breadcrumb-item>
|
||
<el-breadcrumb-item>{{ $t('sidebar.mailboxManagement') }}</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
</div>
|
||
<div class="container">
|
||
<div class="handle-box">
|
||
<el-form :inline="true" :model="query" class="filter-form">
|
||
<el-form-item :label="$t('mailboxConfig.journal')">
|
||
<el-select v-model="query.journal_id" :placeholder="$t('mailboxConfig.selectJournal')" style="width: 300px;" @change="getList">
|
||
<el-option v-for="item in journalList" :key="item.journal_id" :label="item.title" :value="item.journal_id"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" icon="el-icon-refresh" @click="getList">{{ $t('mailboxConfig.refresh') }}</el-button>
|
||
<el-button type="primary" plain icon="el-icon-plus" class="add-account-btn" @click="handleAdd">
|
||
{{ $t('mailboxConfig.addAccount') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<el-table
|
||
:data="tableData"
|
||
border
|
||
stripe
|
||
class="table"
|
||
header-cell-class-name="table-header"
|
||
:empty-text="$t('mailboxConfig.noData')"
|
||
v-loading="loading"
|
||
:element-loading-text="$t('mailboxConfig.loading')"
|
||
>
|
||
<!-- <el-table-column prop="journal_name" :label="$t('mailboxConfig.journal')" min-width="140"></el-table-column> -->
|
||
<el-table-column type="index" :label="$t('mailboxConfig.no')" width="70" align="center"></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_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="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="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="state" :label="$t('mailboxConfig.state')" width="80" align="center"></el-table-column> -->
|
||
<el-table-column label="" width="380" align="center" fixed="right">
|
||
<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="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>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
<!-- 添加/编辑 弹窗 -->
|
||
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="580px" :close-on-click-modal="false">
|
||
<el-form ref="formRef" :model="form" :rules="rules" label-width="140px">
|
||
<el-form-item :label="$t('mailboxConfig.journal')" prop="journal_id">
|
||
<el-select :disabled="form.id" v-model="form.journal_id" :placeholder="$t('mailboxConfig.selectJournal')" style="width: 100%;">
|
||
<el-option v-for="item in journalList" :key="item.journal_id" :label="item.title" :value="item.journal_id"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('mailboxConfig.account')" prop="account">
|
||
<el-input v-model="form.account" placeholder="eg: test@tmrjournals.co.nz"></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('mailboxConfig.password')" prop="password">
|
||
<el-input
|
||
v-model="form.password"
|
||
type="password"
|
||
show-password
|
||
clearable
|
||
autocomplete="new-password"
|
||
></el-input>
|
||
<!-- <span class="form-tip">{{ $t('mailboxConfig.passwordTip') }}</span> -->
|
||
</el-form-item>
|
||
<el-form-item :label="$t('mailboxConfig.smtpFromName')" prop="smtp_from_name">
|
||
<el-input v-model="form.smtp_from_name" ></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('mailboxConfig.smtpHost')" prop="smtp_host">
|
||
<el-input v-model="form.smtp_host" :placeholder="$t('mailboxConfig.smtpPlaceholder')"></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('mailboxConfig.smtpPort')" prop="smtp_port">
|
||
<el-input v-model="form.smtp_port" :placeholder="$t('mailboxConfig.smtpPortPlaceholder')" style="width: 100%;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('mailboxConfig.smtpEncryption')" prop="smtp_encryption">
|
||
<el-input v-model="form.smtp_encryption" :placeholder="$t('mailboxConfig.smtpEncryptionPlaceholder')"></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('mailboxConfig.imapHost')" prop="imap_host">
|
||
<el-input v-model="form.imap_host" :placeholder="$t('mailboxConfig.imapPlaceholder')"></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('mailboxConfig.imapPort')" prop="imap_port">
|
||
<el-input v-model="form.imap_port" :placeholder="$t('mailboxConfig.imapPortPlaceholder')" style="width: 100%;"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">{{ $t('mailboxConfig.cancel') }}</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="submitForm"
|
||
:loading="saveLoading"
|
||
:disabled="saveLoading"
|
||
:loading-text="$t('mailboxConfig.loading')"
|
||
>
|
||
{{ $t('mailboxConfig.save') }}
|
||
</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// 期刊邮箱列表：POST api/email_client/getAccounts 参数 journal_id，返回 data[]: j_email_id, journal_id, smtp_host, smtp_port, smtp_user, imap_host, imap_port, daily_limit, today_sent, state, remaining_today 等
|
||
const API = {
|
||
getAllJournal: 'api/Article/getJournal',
|
||
getAccounts: 'api/email_client/getAccounts',
|
||
addAccount: 'api/email_client/addAccount',
|
||
updateAccount: 'api/email_client/updateAccount',
|
||
deleteAccount: 'api/email_client/deleteAccount',
|
||
};
|
||
|
||
export default {
|
||
name: 'mailboxConfig',
|
||
data() {
|
||
return {
|
||
query: {
|
||
journal_id: 0,
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
},
|
||
tableData: [],
|
||
total: 0,
|
||
journalList: [],
|
||
loading: false,
|
||
saveLoading: false,
|
||
saveDebounceTimer: null,
|
||
dialogVisible: false,
|
||
dialogTitle: '',
|
||
form: {
|
||
id: null,
|
||
journal_id: null,
|
||
account: '',
|
||
password: '',
|
||
smtp_from_name: '',
|
||
smtp_host: '',
|
||
smtp_port: '',
|
||
smtp_encryption: '',
|
||
imap_host: '',
|
||
imap_port: '',
|
||
},
|
||
};
|
||
},
|
||
computed: {
|
||
rules() {
|
||
return {
|
||
journal_id: [{ required: true, message: this.$t('mailboxConfig.rulesJournal'), trigger: 'change' }],
|
||
account: [
|
||
{ required: true, message: this.$t('mailboxConfig.rulesAccount'), trigger: 'blur' },
|
||
{
|
||
pattern: /^[-._A-Za-z0-9]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
|
||
message: this.$t('mailboxConfig.rulesAccountFormat'),
|
||
trigger: 'blur',
|
||
},
|
||
],
|
||
password: [{ required: true, message: this.$t('mailboxConfig.rulesPassword'), trigger: 'blur' }],
|
||
smtp_from_name: [{ required: true, message: this.$t('mailboxConfig.rulesSmtpFromName'), trigger: 'blur' }],
|
||
smtp_host: [{ required: true, message: this.$t('mailboxConfig.rulesSmtpHost'), trigger: 'blur' }],
|
||
smtp_encryption: [{ required: true, message: this.$t('mailboxConfig.rulesSmtpEncryption'), trigger: 'blur' }],
|
||
imap_host: [{ required: true, message: this.$t('mailboxConfig.rulesImapHost'), trigger: 'blur' }],
|
||
imap_port: [{ required: true, message: this.$t('mailboxConfig.rulesImapPort'), trigger: 'blur' }],
|
||
};
|
||
},
|
||
},
|
||
created() {
|
||
this.loadJournals();
|
||
},
|
||
beforeDestroy() {
|
||
if (this.saveDebounceTimer) {
|
||
clearTimeout(this.saveDebounceTimer);
|
||
this.saveDebounceTimer = null;
|
||
}
|
||
},
|
||
methods: {
|
||
// 期刊下拉框：调用 api/Article/getJournal 获取列表
|
||
loadJournals() {
|
||
var self = this;
|
||
this.$api.post(API.getAllJournal, {username: localStorage.getItem('U_name')}).then(function(res) {
|
||
var list = [];
|
||
if (res && res.code === 0 && res.data) {
|
||
if (Array.isArray(res.data.journals)) {
|
||
list = res.data.journals;
|
||
} else if (Array.isArray(res.data)) {
|
||
list = res.data;
|
||
}
|
||
} else if (res && Array.isArray(res)) {
|
||
list = res;
|
||
}
|
||
// 统一为 { journal_id, title }，兼容 id/title 等字段
|
||
self.journalList = list.map(function(item) {
|
||
return {
|
||
journal_id: item.journal_id != null ? item.journal_id : item.id,
|
||
title: item.title || item.name || ''
|
||
};
|
||
});
|
||
if (self.journalList.length === 0) {
|
||
self.journalList = [
|
||
{ journal_id: 1, title: 'TMR Clinical Research' },
|
||
{ journal_id: 2, title: 'TMR Theory' }
|
||
];
|
||
}
|
||
// 默认选第一个期刊并拉取邮箱列表
|
||
if (self.journalList.length > 0 && (self.query.journal_id === 0 || self.query.journal_id === null || self.query.journal_id === '')) {
|
||
self.query.journal_id = self.journalList[0].journal_id;
|
||
self.getList();
|
||
}
|
||
}).catch(function() {
|
||
self.journalList = [
|
||
{ journal_id: 1, title: 'TMR Clinical Research' },
|
||
{ journal_id: 2, title: 'TMR Theory' }
|
||
];
|
||
if (self.journalList.length > 0) {
|
||
self.query.journal_id = self.journalList[0].journal_id;
|
||
self.getList();
|
||
}
|
||
});
|
||
},
|
||
getJournalName(journalId) {
|
||
var j = this.journalList.find(function(item) { return item.journal_id === journalId; });
|
||
return j ? j.title : '';
|
||
},
|
||
getList() {
|
||
this.loading = true;
|
||
var journalId = this.query.journal_id;
|
||
var params = {};
|
||
if (journalId !== 0 && journalId !== '' && journalId != null) {
|
||
params.journal_id = String(journalId);
|
||
}
|
||
this.$api.post(API.getAccounts, params).then((res) => {
|
||
if (res && res.code === 0 && Array.isArray(res.data)) {
|
||
var list = res.data.map(function(item) {
|
||
return {
|
||
id: item.j_email_id,
|
||
j_email_id: item.j_email_id,
|
||
journal_id: item.journal_id,
|
||
journal_name: this.getJournalName(item.journal_id),
|
||
account: item.smtp_user,
|
||
smtp_user: item.smtp_user,
|
||
smtp_host: item.smtp_host,
|
||
smtp_port: item.smtp_port,
|
||
smtp_encryption: item.smtp_encryption,
|
||
smtp_from_name: item.smtp_from_name || '',
|
||
imap_host: item.imap_host,
|
||
imap_port: item.imap_port,
|
||
last_uid: item.last_uid,
|
||
daily_limit: item.daily_limit,
|
||
today_sent: item.today_sent,
|
||
state: item.state,
|
||
remaining_today: item.remaining_today,
|
||
};
|
||
}.bind(this));
|
||
this.tableData = list;
|
||
this.total = list.length;
|
||
} else {
|
||
this.tableData = [];
|
||
this.total = 0;
|
||
}
|
||
}).catch(function() {
|
||
this.tableData = [];
|
||
this.total = 0;
|
||
}.bind(this)).finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
handleAdd() {
|
||
this.dialogTitle = this.$t('mailboxConfig.dialogAdd');
|
||
this.form = {
|
||
id: null,
|
||
journal_id: this.query.journal_id || (this.journalList[0] ? this.journalList[0].journal_id : null),
|
||
account: '',
|
||
password: '',
|
||
smtp_from_name: '',
|
||
smtp_host: 'mail.tmrjournals.co.nz',
|
||
smtp_port: '465',
|
||
smtp_encryption: 'ssl',
|
||
imap_host: 'mail.tmrjournals.co.nz',
|
||
imap_port: '993',
|
||
};
|
||
this.dialogVisible = true;
|
||
this.$nextTick(function() { if (this.$refs.formRef) this.$refs.formRef.clearValidate(); }.bind(this));
|
||
},
|
||
handleEdit(row) {
|
||
this.dialogTitle = this.$t('mailboxConfig.dialogEdit');
|
||
this.form = {
|
||
id: row.id,
|
||
journal_id: row.journal_id,
|
||
account: row.account || row.smtp_user || '',
|
||
password: '',
|
||
smtp_from_name: row.smtp_from_name || '',
|
||
smtp_host: row.smtp_host || '',
|
||
smtp_port: row.smtp_port != null && row.smtp_port !== '' ? String(row.smtp_port) : '',
|
||
smtp_encryption: row.smtp_encryption || '',
|
||
imap_host: row.imap_host || '',
|
||
imap_port: row.imap_port != null && row.imap_port !== '' ? String(row.imap_port) : '',
|
||
};
|
||
this.dialogVisible = true;
|
||
this.$nextTick(function() { if (this.$refs.formRef) this.$refs.formRef.clearValidate(); }.bind(this));
|
||
},
|
||
submitForm() {
|
||
// 保存防抖：连续点击只触发一次
|
||
if (this.saveLoading) return;
|
||
if (this.saveDebounceTimer) clearTimeout(this.saveDebounceTimer);
|
||
this.saveDebounceTimer = setTimeout(() => {
|
||
this.saveDebounceTimer = null;
|
||
this._doSubmitForm();
|
||
}, 600);
|
||
},
|
||
_doSubmitForm() {
|
||
var self = this;
|
||
this.$refs.formRef.validate(function(valid) {
|
||
if (!valid) return;
|
||
var isEdit = !!self.form.id;
|
||
var url = isEdit ? API.updateAccount : API.addAccount;
|
||
var payload = {
|
||
journal_id: String(self.form.journal_id),
|
||
smtp_host: String(self.form.smtp_host || ''),
|
||
smtp_port: String(self.form.smtp_port || ''),
|
||
smtp_encryption: String(self.form.smtp_encryption || ''),
|
||
smtp_user: String(self.form.account || ''),
|
||
smtp_from_name: String(self.form.smtp_from_name || ''),
|
||
imap_host: String(self.form.imap_host || ''),
|
||
imap_port: String(self.form.imap_port || ''),
|
||
};
|
||
if (isEdit) {
|
||
payload.j_email_id = String(self.form.id);
|
||
if (self.form.password) payload.smtp_password = String(self.form.password);
|
||
} else {
|
||
payload.smtp_password = String(self.form.password || '');
|
||
}
|
||
|
||
self.saveLoading = true;
|
||
self.$api
|
||
.post(url, payload)
|
||
.then(function(res) {
|
||
if (res && res.code === 0) {
|
||
self.$message.success(isEdit ? self.$t('mailboxConfig.editSuccess') : self.$t('mailboxConfig.addSuccess'));
|
||
self.dialogVisible = false;
|
||
self.getList();
|
||
} else {
|
||
self.$message.error((res && res.msg) || (isEdit ? self.$t('mailboxConfig.editFail') : self.$t('mailboxConfig.addFail')));
|
||
}
|
||
})
|
||
.catch(function() {
|
||
// Mock fallback（保留原逻辑）
|
||
self.$message.success(isEdit ? self.$t('mailboxConfig.editSuccessMock') : self.$t('mailboxConfig.addSuccessMock'));
|
||
self.dialogVisible = false;
|
||
self.getList();
|
||
})
|
||
.finally(function() {
|
||
self.saveLoading = false;
|
||
});
|
||
});
|
||
},
|
||
handleMailManage(row) {
|
||
// 进入邮箱列表前，把当前选择的邮箱账号写入本地，供 mailboxCollect 使用
|
||
if (row && row.j_email_id) {
|
||
localStorage.setItem('mailboxCollect_j_email_id', String(row.j_email_id));
|
||
}
|
||
if (row && row.journal_id) {
|
||
localStorage.setItem('mailboxCollect_journal_id', String(row.journal_id));
|
||
}
|
||
|
||
this.$router.push({
|
||
path: '/mailboxCollect',
|
||
});
|
||
},
|
||
// 删除邮箱配置：接口 api/email_client/deleteAccount，传参 j_email_id
|
||
handleDelete(row) {
|
||
const self = this;
|
||
this.$confirm(self.$t('mailboxConfig.deleteConfirm'), self.$t('mailboxConfig.deleteTitle'), {
|
||
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>
|
||
|
||
<style scoped>
|
||
.handle-box { margin-bottom: 16px; }
|
||
.filter-form { margin: 0; }
|
||
.add-account-btn { margin-left: 10px; }
|
||
.form-tip { font-size: 12px; color: #909399; margin-top: 4px; }
|
||
</style>
|