v1.2 版本发布,代码同步后端v1.2版本
This commit is contained in:
郑杰
35
src/views/tools/email/index.vue
Normal file
35
src/views/tools/email/index.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" style="padding-left: 5px;" @tab-click="handleClick">
|
||||
<el-tab-pane label="邮箱配置" name="first">
|
||||
<Config/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="邮件测试" name="second">
|
||||
<Send/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="使用说明" name="third">
|
||||
<Description/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Config from './module/config'
|
||||
import Send from './module/send'
|
||||
import Description from './module/description'
|
||||
export default {
|
||||
components: { Config, Send, Description },
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
89
src/views/tools/email/module/config.vue
Normal file
89
src/views/tools/email/module/config.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="100px">
|
||||
<el-form-item label="发件人邮箱" prop="fromUser">
|
||||
<el-input v-model="form.fromUser" style="width: 40%"/>
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">Sender mailbox</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="发件用户名" prop="user">
|
||||
<el-input v-model="form.user" style="width: 40%;"/>
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">Sender usernamex</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱密码" prop="pass">
|
||||
<el-input v-model="form.pass" type="password" style="width: 40%;"/>
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">email Password</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="SMTP地址" prop="host">
|
||||
<el-input v-model="form.host" style="width: 40%;"/>
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">SMTP address</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="SMTP端口" prop="port">
|
||||
<el-input v-model="form.port" style="width: 40%;"/>
|
||||
<span style="color: #C0C0C0;margin-left: 10px;">SMTP port</span>
|
||||
</el-form-item>
|
||||
<el-button :loading="loading" style="margin-left:5%;" size="medium" type="success" @click="doSubmit">保存配置</el-button>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { get, update } from '@/api/email'
|
||||
export default {
|
||||
name: 'Config',
|
||||
data() {
|
||||
return {
|
||||
loading: false, form: { id: 1, fromUser: '', user: '', pass: '', host: '', port: '', sslEnable: '' },
|
||||
rules: {
|
||||
fromUser: [
|
||||
{ required: true, message: '请输入发件人邮箱', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
|
||||
],
|
||||
user: [
|
||||
{ required: true, message: '请输入发件用户名', trigger: 'blur' }
|
||||
],
|
||||
pass: [
|
||||
{ required: true, message: '密码不能为空', trigger: 'blur' }
|
||||
],
|
||||
host: [
|
||||
{ required: true, message: 'SMTP地址不能为空', trigger: 'blur' }
|
||||
],
|
||||
port: [
|
||||
{ required: true, message: 'SMTP端口不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
get().then(res => {
|
||||
this.form = res
|
||||
})
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
update(this.form).then(res => {
|
||||
this.$notify({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
40
src/views/tools/email/module/description.vue
Normal file
40
src/views/tools/email/module/description.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
<blockquote class="my-blockquote">注意</blockquote>
|
||||
<pre class="my-code">
|
||||
邮件服务器必须支持并打开SMTP协议，详细请查看相关帮助说明
|
||||
配置文件的样例中提供的是我测试邮件功能注册的sina.com邮箱
|
||||
帐号密码公开，供测试使用，存入数据库的密码会加密处理，请文明测试</pre>
|
||||
<blockquote class="my-blockquote"> 邮件服务器配置</blockquote>
|
||||
<pre class="my-code">
|
||||
# 邮件服务器的SMTP地址，可选，默认为smtp
|
||||
# 邮件服务器的SMTP端口，可选，默认465或者25
|
||||
# 发件人（必须正确，否则发送失败）
|
||||
# 用户名，默认为发件人邮箱前缀
|
||||
# 密码（注意，某些邮箱需要为SMTP服务单独设置密码，如QQ和163等等）
|
||||
# 是否开启ssl，默认开启</pre>
|
||||
<blockquote class="my-blockquote">发送邮箱</blockquote>
|
||||
<pre class="my-code">
|
||||
MailAccount account = new MailAccount();
|
||||
account.setHost("smtp.sina.com");
|
||||
account.setPort("465");
|
||||
account.setAuth(true);
|
||||
account.setFrom("auaur@sina.com");
|
||||
account.setUser("eladmin");
|
||||
account.setPass("pass");
|
||||
# 倒数第二个参数：是否为http格式
|
||||
MailUtil.send(account, CollUtil.newArrayList("zhengjie@tom.com"), "测试", "邮件来自eladmin测试", true，file...);</pre>
|
||||
<blockquote class="my-blockquote">更多帮助</blockquote>
|
||||
<pre class="my-code">更多帮助请查看文档：<a style="color:#009688" href="http://hutool.mydoc.io/#text_319499" target="_black">hutool工具包</a></pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@/styles/description.scss'
|
||||
export default {
|
||||
name: 'Description'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
131
src/views/tools/email/module/send.vue
Normal file
131
src/views/tools/email/module/send.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="100px">
|
||||
<el-form-item label="邮件标题" prop="subject">
|
||||
<el-input v-model="form.subject" style="width: 40%"/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-for="(domain, index) in tos"
|
||||
:label="'收件邮箱' + (index === 0 ? '': index)"
|
||||
:key="domain.key">
|
||||
<el-input v-model="domain.value" style="width: 31%"/>
|
||||
<el-button icon="el-icon-plus" @click="addDomain" />
|
||||
<el-button style="margin-left:0px;" icon="el-icon-minus" @click.prevent="removeDomain(domain)"/>
|
||||
</el-form-item>
|
||||
<div ref="editor" class="editor"/>
|
||||
<el-button :loading="loading" style="margin-left:2%;" size="medium" type="success" @click="doSubmit">发送邮件</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import { send } from '@/api/email'
|
||||
import { validatEmail } from '@/utils/validate'
|
||||
import E from 'wangeditor'
|
||||
export default {
|
||||
name: 'Index',
|
||||
data() {
|
||||
return {
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + getToken()
|
||||
},
|
||||
loading: false, form: { subject: '', tos: [], content: '' },
|
||||
tos: [{
|
||||
value: ''
|
||||
}],
|
||||
rules: {
|
||||
subject: [
|
||||
{ required: true, message: '标题不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'imagesUploadApi'
|
||||
])
|
||||
},
|
||||
mounted() {
|
||||
var editor = new E(this.$refs.editor)
|
||||
editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
|
||||
// 不可修改
|
||||
editor.customConfig.uploadImgHeaders = this.headers
|
||||
// 自定义文件名，不可修改，修改后会上传失败
|
||||
editor.customConfig.uploadFileName = 'file'
|
||||
editor.customConfig.uploadImgServer = this.imagesUploadApi // 上传图片到服务器
|
||||
editor.customConfig.onchange = (html) => {
|
||||
this.form.content = html
|
||||
}
|
||||
editor.create()
|
||||
},
|
||||
methods: {
|
||||
removeDomain(item) {
|
||||
var index = this.tos.indexOf(item)
|
||||
if (index !== -1 && this.tos.length !== 1) {
|
||||
this.tos.splice(index, 1)
|
||||
} else {
|
||||
this.$message({
|
||||
message: '请至少保留一位联系人',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
},
|
||||
addDomain() {
|
||||
this.tos.push({
|
||||
value: '',
|
||||
key: Date.now()
|
||||
})
|
||||
},
|
||||
doSubmit() {
|
||||
const _this = this
|
||||
this.$refs['form'].validate((valid) => {
|
||||
this.form.tos = []
|
||||
if (valid) {
|
||||
let sub = false
|
||||
this.tos.forEach(function(data, index) {
|
||||
if (data.value === '') {
|
||||
_this.$message({
|
||||
message: '收件邮箱不能为空',
|
||||
type: 'warning'
|
||||
})
|
||||
sub = true
|
||||
} else if (validatEmail(data.value)) {
|
||||
_this.form.tos.push(data.value)
|
||||
} else {
|
||||
_this.$message({
|
||||
message: '收件邮箱格式错误',
|
||||
type: 'warning'
|
||||
})
|
||||
sub = true
|
||||
}
|
||||
})
|
||||
if (sub) { return false }
|
||||
this.loading = true
|
||||
send(this.form).then(res => {
|
||||
this.$notify({
|
||||
title: '发送成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
this.loading = false
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.editor{
|
||||
text-align:left;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user