zm/tougao_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tijiao

Browse Source
This commit is contained in:
始于初见
2026-03-11 10:14:57 +08:00
parent 68f52bed67
commit 2c2ef4e6c4
10 changed files with 1694 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

324
src/components/page/mailboxConfig.vue Normal file
View File

@@ -0,0 +1,324 @@
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-setting"></i> {{ $t('mailboxConfig.mailSystem') }}</el-breadcrumb-item>
<el-breadcrumb-item>{{ $t('mailboxConfig.title') }}</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-search" @click="getList">{{ $t('mailboxConfig.query') }}</el-button>
<el-button type="primary" icon="el-icon-plus" @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')">
<!-- <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="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="$t('mailboxConfig.operation')" width="220" 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>
</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 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" ></el-input>
</el-form-item>
<el-form-item :label="$t('mailboxConfig.password')" prop="password">
<el-input v-model="form.password" type="password" show-password 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">{{ $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/Journal/getAllJournal',
getAccounts: 'api/email_client/getAccounts',
addAccount: 'api/email_client/addAccount',
updateAccount: 'api/email_client/updateAccount',
deleteEmailAccount: 'api/Mail/deleteEmailAccount',
};
export default {
name: 'mailboxConfig',
data() {
return {
query: {
journal_id: 0,
pageIndex: 1,
pageSize: 10,
},
tableData: [],
total: 0,
journalList: [],
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();
},
methods: {
// 期刊下拉框：调用 api/Journal/getAllJournal 获取列表
loadJournals() {
var self = this;
this.$api.post(API.getAllJournal, {}).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() {
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));
},
handleAdd() {
this.dialogTitle = this.$t('mailboxConfig.dialogAdd');
this.form = {
id: null,
journal_id: this.journalList[0] ? this.journalList[0].journal_id : null,
account: '',
password: '',
smtp_from_name: '',
smtp_host: '',
smtp_port: '',
smtp_encryption: '',
imap_host: '',
imap_port: '',
};
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() {
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.$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() {
self.$message.success(isEdit ? self.$t('mailboxConfig.editSuccessMock') : self.$t('mailboxConfig.addSuccessMock'));
self.dialogVisible = false;
self.getList();
});
});
},
handleMailManage(row) {
this.$router.push({
path: '/mailboxCollect',
query: {
journal_id: row.journal_id,
j_email_id: row.j_email_id
}
});
},
},
};
</script>
<style scoped>
.handle-box { margin-bottom: 16px; }
.filter-form { margin: 0; }
.form-tip { font-size: 12px; color: #909399; margin-top: 4px; }
</style>