Skip to content

S
saas-manage
Commit 65d2a8c7 by wusiyi
Options

feat: 安全设置页面

parent 88360d46
Showing with 287 additions and 702 deletions
src/views/system/sysSecuritySettings.vue
<template> <template>
<div class="wraper" v-loading="loading"> <div class="wraper" v-loading="loading">
<!-- list -->
<div v-if="!loading" class="card-content"> <div v-if="!loading" class="card-content">
<el-row class="input-group" align="middle" :gutter="20"> <el-row class="input-group" align="middle" :gutter="20">
<el-col :span="6" class="input-label">手机号</el-col> <el-col :span="6" class="input-label">手机号</el-col>
<el-col :span="12" class="input-value">{{ formData.phone }}</el-col> <el-col :span="12" class="input-value">{{ securityData.phone }}</el-col>
<el-col :span="6" class="action"> <el-col :span="6" class="action">
<span v-if="formData.phone"> <span v-if="securityData.phone">
<el-button type="text" @click="disConnect('phone')">解绑</el-button> <el-button type="text" @click="openDialog('phone', 'unbind')">
<el-button type="text" @click="reConnect('phone', 'change')"> 解绑
</el-button>
<el-button type="text" @click="openDialog('phone', 'change')">
换绑 换绑
</el-button> </el-button>
</span> </span>
<span v-else> <span v-else>
<el-button type="text" style="color: orange" @click="bind('phone')"> <el-button
type="text"
style="color: orange"
@click="openDialog('phone', 'bind')">
绑定手机号 绑定手机号
</el-button> </el-button>
</span> </span>
...@@ -23,14 +27,14 @@ ...@@ -23,14 +27,14 @@
<el-row class="input-group" align="middle" :gutter="20"> <el-row class="input-group" align="middle" :gutter="20">
<el-col :span="6" class="input-label">邮箱</el-col> <el-col :span="6" class="input-label">邮箱</el-col>
<el-col :span="12" class="input-value"> <el-col :span="12" class="input-value">
{{ formData.mailbox }} {{ securityData.mailbox }}
</el-col> </el-col>
<el-col :span="6" class="action"> <el-col :span="6" class="action">
<span v-if="formData.mailbox"> <span v-if="securityData.mailbox">
<el-button type="text" @click="disConnect('mailbox')"> <el-button type="text" @click="openDialog('mailbox', 'unbind')">
解绑 解绑
</el-button> </el-button>
<el-button type="text" @click="reConnect('mailbox', 'change')"> <el-button type="text" @click="openDialog('mailbox', 'change')">
换绑 换绑
</el-button> </el-button>
</span> </span>
...@@ -38,7 +42,7 @@ ...@@ -38,7 +42,7 @@
<el-button <el-button
type="text" type="text"
style="color: orange" style="color: orange"
@click="bind('mailbox')"> @click="openDialog('mailbox', 'bind')">
绑定邮箱 绑定邮箱
</el-button> </el-button>
</span> </span>
...@@ -49,56 +53,57 @@ ...@@ -49,56 +53,57 @@
<el-col :span="6" class="input-label">超级密码</el-col> <el-col :span="6" class="input-label">超级密码</el-col>
<el-col :span="12"></el-col> <el-col :span="12"></el-col>
<el-col :span="6" class="action"> <el-col :span="6" class="action">
<el-button type="text" @click="disConnect('superPassword')"> <el-button
type="text"
@click="openDialog('superPassword', 'password')">
修改超级密码 修改超级密码
</el-button> </el-button>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<!-- 解绑弹窗 -->
<el-dialog <el-dialog
:visible.sync="disconnectDialog" :visible.sync="dialogVisible"
:title="'解绑' + currentTargetName" :title="dialogTitle"
width="400px" width="400px"
class="disconnectDialog" class="dialog"
:destroy-on-close="true" :destroy-on-close="true"
@close="resetForm"> @close="resetForm">
<el-form <el-form
:model="bindForm" :model="dialogForm"
:rules="bindRules" :rules="dialogRules"
ref="bindForm" ref="dialogForm"
label-width="80px"> :label-width="dialogType === 'password' ? '110px' : '80px'">
<el-form-item <el-form-item
v-if="currentMethod === 'phone'"
label="手机号" label="手机号"
prop="phone" prop="phone">
v-if="currentMethod === 'phone'">
<el-input <el-input
v-model="bindForm.phone" v-model="dialogForm.phone"
placeholder="请输入手机号" placeholder="请输入手机号"
:disabled="dialogType !== 'bind'"
clearable clearable
disabled
maxlength="11" maxlength="11"
size="small" /> size="small" />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="currentMethod === 'mailbox'"
label="邮箱" label="邮箱"
prop="mailbox" prop="mailbox">
v-if="currentMethod === 'mailbox'">
<el-input <el-input
v-model="bindForm.mailbox" v-model="dialogForm.mailbox"
placeholder="请输入邮箱" placeholder="请输入邮箱"
:disabled="dialogType !== 'bind'"
clearable clearable
disabled
size="small" /> size="small" />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="currentMethod !== 'superPassword'"
label="验证码" label="验证码"
prop="code" prop="code">
v-if="currentMethod !== 'superPassword'">
<div style="display: flex; align-items: center; gap: 10px"> <div style="display: flex; align-items: center; gap: 10px">
<el-input <el-input
v-model="bindForm.code" v-model="dialogForm.code"
placeholder="请输入验证码" placeholder="请输入验证码"
clearable clearable
maxlength="6" maxlength="6"
...@@ -112,292 +117,50 @@ ...@@ -112,292 +117,50 @@
</div> </div>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="超级密码" v-if="currentMethod === 'superPassword'"
prop="superPassword" :label="dialogType === 'password' ? '原超级密码' : '超级密码'"
v-if="currentMethod === 'superPassword'"> prop="superPassword">
<el-input <el-input
v-model="bindForm.superPassword" v-model="dialogForm.superPassword"
placeholder="请输入超级密码" :placeholder="
dialogType === 'password' ? '请输入原超级密码' : '请输入超级密码'
"
clearable clearable
show-password show-password
size="small" /> size="small" />
</el-form-item> </el-form-item>
</el-form>
<div v-if="dialogType !== 'change'" slot="footer" class="dialog-footer">
<el-button @click="disconnectDialog = false" size="small">
取消
</el-button>
<el-button type="primary" @click="submitUnbind" size="small">
确定
</el-button>
</div>
</el-dialog>
<!-- 换绑弹窗 -->
<el-dialog
:visible.sync="reconnectDialog"
:title="'换绑' + currentTargetName"
width="400px"
class="disconnectDialog"
:destroy-on-close="true"
@close="resetForm">
<el-form
:model="bindForm"
:rules="bindRules"
ref="bindForm"
label-width="80px">
<el-form-item
label="手机号"
prop="phone"
v-if="currentMethod === 'phone'">
<el-input
v-model="bindForm.phone"
placeholder="请输入手机号"
clearable
disabled
maxlength="11"
size="small" />
</el-form-item>
<el-form-item
label="邮箱"
prop="mailbox"
v-if="currentMethod === 'mailbox'">
<el-input
v-model="bindForm.mailbox"
placeholder="请输入邮箱"
clearable
disabled
size="small" />
</el-form-item>
<el-form-item <el-form-item
label="验证码" v-if="dialogType === 'password'"
prop="code" label="新超级密码"
v-if="currentMethod !== 'superPassword'"> prop="newSuperPassword1">
<div style="display: flex; align-items: center; gap: 10px">
<el-input
v-model="bindForm.code"
placeholder="请输入验证码"
clearable
maxlength="6"
size="small" />
<el-button
size="small"
@click="sendCode"
:loading="sendCodeLoading">
{{ sendCodeLoading ? `${countdown}s后重发` : '发送验证码' }}
</el-button>
</div>
</el-form-item>
<el-form-item
label="超级密码"
prop="superPassword"
v-if="currentMethod === 'superPassword'">
<el-input <el-input
v-model="bindForm.superPassword" v-model="dialogForm.newSuperPassword1"
placeholder="请输入超级密码"
clearable
show-password
size="small" />
</el-form-item>
</el-form>
<div>
<el-divider>其他验证方式</el-divider>
<div
style="
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 80%;
margin: 0 auto;
">
<el-button
icon="el-icon-mobile-phone"
type="warning"
size="small"
v-if="currentMethod !== 'phone' && formData.phone"
@click="currentMethod = 'phone'"
style="width: 100%">
手机验证
</el-button>
<el-button
icon="el-icon-message"
type="success"
size="small"
v-if="currentMethod !== 'mailbox' && formData.mailbox"
@click="currentMethod = 'mailbox'"
style="width: 100%">
邮箱验证
</el-button>
<el-button
icon="el-icon-lock"
type="info"
size="small"
v-if="currentMethod !== 'superPassword'"
@click="currentMethod = 'superPassword'"
style="width: 100%">
超级密码验证
</el-button>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="check" size="small">下一步</el-button>
</div>
</el-dialog>
<!-- 绑定弹窗 -->
<el-dialog
:visible.sync="bindDialog"
:title="'绑定' + currentTargetName"
width="400px"
class="disconnectDialog"
:destroy-on-close="true"
@close="resetForm">
<el-form
:model="bindForm"
:rules="bindRules"
ref="bindForm"
label-width="100px">
<el-form-item label="手机号" prop="phone">
<el-input
v-model="bindForm.phone"
placeholder="请输入手机号"
clearable
maxlength="11"
size="small" />
</el-form-item>
<el-form-item label="邮箱" prop="mailbox">
<el-input
v-model="bindForm.mailbox"
placeholder="请输入邮箱"
clearable
size="small" />
</el-form-item>
<el-form-item label="验证码" prop="code">
<div style="display: flex; align-items: center; gap: 10px">
<el-input
v-model="bindForm.code"
placeholder="请输入验证码"
clearable
maxlength="6"
size="small" />
<el-button
size="small"
@click="sendCode"
:loading="sendCodeLoading">
{{ sendCodeLoading ? `${countdown}s后重发` : '发送验证码' }}
</el-button>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="bindDialog = false" size="small">取消</el-button>
<el-button type="primary" @click="submitBind" size="small">
确定
</el-button>
</div>
</el-dialog>
<!-- 修改超级密码弹窗 -->
<el-dialog
:visible.sync="resetPasswordDialog"
title="修改超级密码"
width="400px"
class="resetPasswordDialog"
:destroy-on-close="true"
@close="resetForm">
<el-form
:model="bindForm"
:rules="bindRules"
ref="bindForm"
label-width="110px">
<el-form-item
label="手机号"
prop="phone"
v-if="currentMethod === 'phone'">
<el-input
v-model="bindForm.phone"
placeholder="请输入手机号"
clearable
disabled
maxlength="11"
size="small" />
</el-form-item>
<el-form-item
label="邮箱"
prop="mailbox"
v-if="currentMethod === 'mailbox'">
<el-input
v-model="bindForm.mailbox"
placeholder="请输入邮箱"
clearable
disabled
size="small" />
</el-form-item>
<el-form-item
label="验证码"
prop="code"
v-if="currentMethod !== 'superPassword'">
<div style="display: flex; align-items: center; gap: 10px">
<el-input
v-model="bindForm.code"
placeholder="请输入验证码"
clearable
maxlength="6"
size="small" />
<el-button
size="small"
@click="sendCode"
:loading="sendCodeLoading">
{{ sendCodeLoading ? `${countdown}s后重发` : '发送验证码' }}
</el-button>
</div>
</el-form-item>
<el-form-item
label="原超级密码"
prop="superPassword"
v-if="currentMethod === 'superPassword'">
<el-input
v-model="bindForm.superPassword"
placeholder="请输入原超级密码"
clearable
show-password
size="small" />
</el-form-item>
<el-form-item label="新超级密码" prop="newSuperPassword1">
<el-input
v-model="bindForm.newSuperPassword1"
placeholder="请输入新超级密码" placeholder="请输入新超级密码"
clearable clearable
show-password show-password
size="small" /> size="small" />
</el-form-item> </el-form-item>
<el-form-item label="确认超级密码" prop="newSuperPassword2"> <el-form-item
v-if="dialogType === 'password'"
label="确认超级密码"
prop="newSuperPassword2">
<el-input <el-input
v-model="bindForm.newSuperPassword2" v-model="dialogForm.newSuperPassword2"
placeholder="请再次输入新超级密码" placeholder="请再次输入新超级密码"
clearable clearable
show-password show-password
size="small" /> size="small" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-divider>其他验证方式</el-divider> <el-divider v-if="dialogType === 'change' || dialogType === 'password'">
<div 其他验证方式
style=" </el-divider>
display: flex; <div v-if="dialogType !== 'bind'" class="check">
flex-direction: column;
align-items: center;
gap: 10px;
width: 80%;
margin: 0 auto;
">
<el-button <el-button
icon="el-icon-mobile-phone" icon="el-icon-mobile-phone"
type="warning" type="warning"
size="small" size="small"
v-if="currentMethod !== 'phone' && bindForm.phone" v-if="currentMethod !== 'phone' && securityData.phone"
@click="currentMethod = 'phone'" @click="currentMethod = 'phone'"
style="width: 100%"> style="width: 100%">
手机验证 手机验证
...@@ -406,7 +169,7 @@ ...@@ -406,7 +169,7 @@
icon="el-icon-message" icon="el-icon-message"
type="success" type="success"
size="small" size="small"
v-if="currentMethod !== 'mailbox' && bindForm.mailbox" v-if="currentMethod !== 'mailbox' && securityData.mailbox"
@click="currentMethod = 'mailbox'" @click="currentMethod = 'mailbox'"
style="width: 100%"> style="width: 100%">
邮箱验证 邮箱验证
...@@ -421,13 +184,10 @@ ...@@ -421,13 +184,10 @@
超级密码验证 超级密码验证
</el-button> </el-button>
</div> </div>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="resetPasswordDialog = false" size="small"> <el-button @click="dialogVisible = false" size="small">取消</el-button>
取消 <el-button type="primary" @click="handleSubmit" size="small">
</el-button> {{ dialogType === 'change' ? '下一步' : '确定' }}
<el-button type="primary" @click="submitPassword" size="small">
确定
</el-button> </el-button>
</div> </div>
</el-dialog> </el-dialog>
...@@ -436,48 +196,24 @@ ...@@ -436,48 +196,24 @@
<script> <script>
import axios from '../../common/api/axios' import axios from '../../common/api/axios'
export default { export default {
name: 'sysSecuritySettings', name: 'sysSecuritySettings',
computed: {
// 获取当前解绑/换绑方式配置
currentMethodConfig() {
return this.currentMethod && this.methodMap[this.currentMethod]
? this.methodMap[this.currentMethod]
: {}
},
// 获取当前解绑/换绑对象名称
currentTargetName() {
return this.currentTarget && this.methodMap[this.currentTarget]
? this.methodMap[this.currentTarget].name
: ''
}
},
data() { data() {
return { return {
// list展示 securityData: {
formData: {
phone: '', phone: '',
mailbox: '', mailbox: '',
superPassword: '' superPassword: ''
}, },
loading: true, // 页面loading loading: true,
sendCodeLoading: false, // 发送验证码loading dialogVisible: false,
countdown: 0, // 倒计时秒数 sendCodeLoading: false,
disconnectDialog: false, // 解绑弹窗 countdown: 0,
bindDialog: false, // 绑定弹窗 currentTarget: '',
reconnectDialog: false, currentMethod: '',
resetPasswordDialog: false, // 修改超级密码弹窗 dialogType: '',
code: '', // 验证码 dialogForm: {
inputValue: '', // 输入的邮箱/手机号
currentTarget: '', // 当前解绑/换绑对象
currentMethod: '', // 当前解绑/换绑方式
dialogType: 'unbind', // 对话框类型
// 换绑方式map
methodMap: {
phone: { name: '手机号', method: '手机' },
mailbox: { name: '邮箱', method: '邮箱' }
},
bindForm: {
phone: '', phone: '',
mailbox: '', mailbox: '',
code: '', code: '',
...@@ -485,411 +221,250 @@ export default { ...@@ -485,411 +221,250 @@ export default {
newSuperPassword1: '', newSuperPassword1: '',
newSuperPassword2: '' newSuperPassword2: ''
}, },
bindRules: { methodMap: {
phone: { name: '手机号', method: '手机' },
mailbox: { name: '邮箱', method: '邮箱' }
},
dialogRules: {
phone: [], phone: [],
mailbox: [], mailbox: [],
code: [ code: [],
{ required: true, message: '请输入验证码', trigger: 'blur' }, superPassword: [],
{ newSuperPassword1: [],
pattern: /^[0-9]{6}$/, newSuperPassword2: []
message: '请输入6位数字验证码',
trigger: 'blur'
}
],
superPassword: [
{ required: true, message: '请输入超级密码', trigger: 'blur' }
],
newSuperPassword1: [
{ required: true, message: '请输入新超级密码', trigger: 'blur' }
],
newSuperPassword2: [
{ required: true, message: '请再次输入新超级密码', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value !== this.bindForm.newSuperPassword1) {
callback(new Error('两次输入的密码不一致'))
} else {
callback()
}
},
trigger: 'blur'
}
]
},
bindRulesForBind: {
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{
pattern: /^1[3-9]\d{9}$/,
message: '请输入正确的手机号',
trigger: 'blur'
}
],
mailbox: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }
],
code: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
{
pattern: /^[0-9]{6}$/,
message: '请输入6位数字验证码',
trigger: 'blur'
}
],
superPassword: [
{ required: true, message: '请输入超级密码', trigger: 'blur' }
],
newSuperPassword1: [
{ required: true, message: '请输入新超级密码', trigger: 'blur' }
],
newSuperPassword2: [
{ required: true, message: '请再次输入新超级密码', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value !== this.bindForm.newSuperPassword1) {
callback(new Error('两次输入的密码不一致'))
} else {
callback()
}
},
trigger: 'blur'
}
]
},
bindRulesForPassword: {
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{
pattern: /^1[3-9]\d{9}$/,
message: '请输入正确的手机号',
trigger: 'blur'
}
],
mailbox: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }
],
code: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
{
pattern: /^[0-9]{6}$/,
message: '请输入6位数字验证码',
trigger: 'blur'
}
],
superPassword: [
{ required: true, message: '请输入原超级密码', trigger: 'blur' }
],
newSuperPassword1: [
{ required: true, message: '请输入新超级密码', trigger: 'blur' }
],
newSuperPassword2: [
{ required: true, message: '请再次输入新超级密码', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value !== this.bindForm.newSuperPassword1) {
callback(new Error('两次输入的密码不一致'))
} else {
callback()
}
},
trigger: 'blur'
}
]
} }
} }
}, },
computed: {
dialogTitle() {
const targetName = this.methodMap[this.currentTarget]?.name || '超级密码'
return `${
this.dialogType === 'bind'
? '绑定'
: this.dialogType === 'unbind'
? '解绑'
: this.dialogType === 'change'
? '换绑'
: '修改超级密码'
}${this.dialogType !== 'password' ? targetName : ''}`
}
},
mounted() { mounted() {
this.getList() this.getList()
}, },
methods: { methods: {
// 获取数据 validateNewPassword(rule, value, callback) {
if (value !== this.dialogForm.newSuperPassword1) {
callback(new Error('两次输入的密码不一致'))
} else {
callback()
}
},
async getList() { async getList() {
this.loading = true this.loading = true
axios try {
.post('sysSecuritySettings/list_page', { const res = await axios.post('sysSecuritySettings/list_page', {
pageSize: 100, pageSize: 100,
currentPage: 1 currentPage: 1
}) })
.then((res) => { if (res.code === 200 && res.data.records?.length > 0) {
if ( this.securityData = { ...res.data.records[0] }
res.code === 200 &&
res.data.records &&
res.data.records.length > 0
) {
this.formData = { ...res.data.records[0] }
}
this.loading = false
})
.catch(() => {
this.loading = false
})
},
// 提交修改
async submitAndUpdate() {
const url = '/sysSecuritySettings/update'
try {
const res = await axios.post(url, this.formData)
if (res.code !== 200) {
return
} }
this.getList()
this.$message.success('保存成功')
} catch (error) { } catch (error) {
console.log(error) console.error(error)
} finally {
this.loading = false
} }
}, },
// 解绑 openDialog(method, type) {
disConnect(method, type = 'unbind') {
this.currentMethod = method this.currentMethod = method
this.currentTarget = method this.currentTarget = method
this.dialogType = type this.dialogType = type
// 重置表单 this.dialogForm = {
this.bindForm = { phone: type === 'bind' ? '' : this.securityData.phone || '',
phone: this.formData.phone, mailbox: type === 'bind' ? '' : this.securityData.mailbox || '',
mailbox: this.formData.mailbox,
code: '', code: '',
superPassword: '', superPassword: '',
newSuperPassword1: '', newSuperPassword1: '',
newSuperPassword2: '' newSuperPassword2: ''
} }
if (method === 'superPassword') { // 动态设置验证规则，仅为可见字段应用规则
// 切换为修改超级密码的校验规则 this.dialogRules = {
this.bindRules = { ...this.bindRulesForPassword } phone:
this.resetPasswordDialog = true type === 'bind' && method === 'phone'
} else { ? [
// 解绑/换绑校验规则 { required: true, message: '请输入手机号', trigger: 'blur' },
this.bindRules = { {
phone: [], pattern: /^1[3-9]\d{9}$/,
mailbox: [], message: '请输入正确的手机号',
code: this.bindRulesForBind.code trigger: 'blur'
} }
this.disconnectDialog = true ]
} : [],
this.sendCodeLoading = false mailbox:
this.countdown = 0 type === 'bind' && method === 'mailbox'
}, ? [
// 换绑 { required: true, message: '请输入邮箱', trigger: 'blur' },
reConnect(method, type = 'unbind') { {
this.currentMethod = method pattern: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
this.currentTarget = method message: '请输入正确的邮箱',
this.dialogType = type trigger: 'blur'
// 重置表单 }
this.bindForm = { ]
phone: this.formData.phone, : [],
mailbox: this.formData.mailbox, code:
code: '', method !== 'superPassword' && method !== 'password'
superPassword: '' ? [
} { required: true, message: '请输入验证码', trigger: 'blur' },
// 切换为换绑校验规则（不校验手机号和邮箱） {
this.bindRules = { pattern: /^[0-9]{6}$/,
phone: [], message: '请输入6位数字验证码',
mailbox: [], trigger: 'blur'
code: this.bindRulesForBind.code }
// 其他规则可按需补充 ]
} : [],
this.sendCodeLoading = false superPassword:
this.countdown = 0 type !== 'bind'
this.reconnectDialog = true ? [
}, {
// 绑定 required: true,
bind(method) { message: `请输入${
this.bindDialog = true type === 'password' ? '原超级密码' : '超级密码'
this.currentMethod = method }`,
this.currentTarget = method trigger: 'blur'
// 重置表单 }
this.bindForm = { ]
phone: '', : [],
mailbox: '', newSuperPassword1:
code: '' type === 'password'
? [{ required: true, message: '请输入新超级密码', trigger: 'blur' }]
: [],
newSuperPassword2:
type === 'password'
? [
{
required: true,
message: '请再次输入新超级密码',
trigger: 'blur'
},
{ validator: this.validateNewPassword, trigger: 'blur' }
]
: []
} }
// 切换为绑定校验规则
this.bindRules = { ...this.bindRulesForBind }
this.sendCodeLoading = false this.sendCodeLoading = false
this.countdown = 0 this.countdown = 0
this.dialogVisible = true
// 延迟清除验证状态，防止初始验证
this.$nextTick(() => {
this.$refs.dialogForm.clearValidate()
})
}, },
// 发送验证码
async sendCode() { async sendCode() {
// 校验格式 this.$refs.dialogForm.validateField(this.currentMethod, async (error) => {
this.$refs.bindForm.validateField( if (error) return
this.currentMethod, this.sendCodeLoading = true
async (errorMessage) => { this.countdown = 60
if (errorMessage) { this.$message.success('验证码发送成功')
return
}
// 开始loading
this.sendCodeLoading = true
this.countdown = 60
this.$message.success('验证码发送成功')
// 开始倒计时 const countdown = () => {
const timer = setInterval(() => { if (this.countdown > 0) {
this.countdown-- this.countdown--
if (this.countdown <= 0) { setTimeout(countdown, 1000)
clearInterval(timer) } else {
this.sendCodeLoading = false this.sendCodeLoading = false
} }
}, 1000) }
countdown()
// 发送验证码请求
try {
if (this.currentMethod === 'phone') {
const url = '/sysSecuritySettings/sendPhoneCode'
const res = await axios.post(url, {
phone: this.bindForm.phone
})
if (res.code !== 200) {
this.sendCodeLoading = false
this.countdown = 0
return
}
} else {
const url = 'sysSecuritySettings/sendEmailCode?email='
const res = await axios.get(url + this.bindForm.mailbox)
if (res.code !== 200) { try {
this.sendCodeLoading = false const url =
this.countdown = 0 this.currentMethod === 'phone'
return ? '/sysSecuritySettings/sendPhoneCode'
} : '/sysSecuritySettings/sendEmailCode?email=' +
} this.dialogForm.mailbox
} catch (error) { const res = await axios({
method: this.currentMethod === 'phone' ? 'post' : 'get',
url,
data:
this.currentMethod === 'phone'
? { phone: this.dialogForm.phone }
: null
})
if (res.code !== 200) {
this.sendCodeLoading = false this.sendCodeLoading = false
this.countdown = 0 this.countdown = 0
} }
} catch (error) {
this.sendCodeLoading = false
this.countdown = 0
} }
) })
}, },
// 绑定 async handleSubmit() {
async submitBind() { this.$refs.dialogForm.validate(async (valid) => {
this.$refs.bindForm.validate(async (valid) => { if (!valid) return
if (valid) { try {
try { const filteredForm = Object.fromEntries(
const filteredForm = Object.fromEntries( Object.entries(this.dialogForm).filter(
Object.entries(this.bindForm).filter( ([_, v]) => v !== '' && v !== null && v !== undefined
([_, v]) => v !== '' && v !== null && v !== undefined
)
) )
const url = '/sysSecuritySettings/changeBinding' )
const res = await axios.post(url, { let url, successMessage
...filteredForm, switch (this.dialogType) {
checkType: this.currentMethod, case 'bind':
unbindType: this.currentTarget url = '/sysSecuritySettings/changeBinding'
}) successMessage = '绑定成功'
if (res.code !== 200) { break
return case 'unbind':
} url = '/sysSecuritySettings/unbind'
this.getList() successMessage = '解绑成功'
this.$message.success('绑定成功') break
this.bindDialog = false case 'change':
} catch (error) { url = '/sysSecuritySettings/check'
console.log(error) successMessage = '验证成功'
break
case 'password':
url = '/sysSecuritySettings/updatePassword'
successMessage = '密码修改成功'
break
} }
} const res = await axios.post(url, {
}) ...filteredForm,
}, checkType: this.currentMethod,
// 解绑 unbindType: this.currentTarget
async submitUnbind() { })
this.$refs.bindForm.validate(async (valid) => { if (res.code !== 200) {
if (valid) { this.$message.error(
try { successMessage
const url = ? `${successMessage.replace('成功', '失败')}`
this.dialogType === 'change' : '操作失败'
? '/sysSecuritySettings/changeBinding' )
: '/sysSecuritySettings/unbind' return
const res = await axios.post(url, { }
...this.bindForm, if (successMessage) {
checkType: this.currentMethod, this.$message.success(successMessage)
unbindType: this.currentTarget if (this.dialogType !== 'change') {
}) this.getList()
if (res.code !== 200) {
this.$message.error(
this.dialogType === 'change' ? '换绑失败' : '解绑失败'
)
} else {
this.$message.success(
this.dialogType === 'change' ? '换绑成功' : '解绑成功'
)
} }
this.getList()
this.disconnectDialog = false
} catch (error) {
console.log(error)
} }
this.dialogVisible = false
if (this.dialogType === 'change') {
this.openDialog(this.currentTarget, 'bind')
}
} catch (error) {
console.error(error)
} }
}) })
}, },
resetForm() { resetForm() {
this.bindForm = { this.$refs.dialogForm.resetFields()
phone: '', Object.keys(this.dialogForm).forEach((key) => {
mailbox: '', this.dialogForm[key] = ''
code: '', })
superPassword: '',
newSuperPassword1: '',
newSuperPassword2: ''
}
this.sendCodeLoading = false this.sendCodeLoading = false
this.countdown = 0 this.countdown = 0
},
// 修改超级密码
async submitPassword() {
this.$refs.bindForm.validate(async (valid) => {
if (valid) {
try {
const filteredForm = Object.fromEntries(
Object.entries(this.bindForm).filter(
([_, v]) => v !== '' && v !== null && v !== undefined
)
)
const url = '/sysSecuritySettings/updatePassword'
const res = await axios.post(url, {
...filteredForm,
checkType: this.currentMethod
})
if (res.code !== 200) {
return
}
this.getList()
this.$message.success('密码修改成功')
this.resetPasswordDialog = false
} catch (error) {
console.log(error)
}
}
})
},
// 换绑校验验证码
async check() {
this.$refs.bindForm.validate(async (valid) => {
if (valid) {
try {
const filteredForm = Object.fromEntries(
Object.entries(this.bindForm).filter(
([_, v]) => v !== '' && v !== null && v !== undefined
)
)
const url = '/sysSecuritySettings/check'
const res = await axios.post(url, {
...filteredForm,
checkType: this.currentMethod,
unbindType: this.currentTarget
})
if (res.code !== 200) {
return
}
this.reconnectDialog = false
this.bindDialog = true
} catch (error) {
console.log(error)
}
}
})
} }
}, }
watch: {}
} }
</script> </script>
...@@ -921,14 +496,6 @@ export default { ...@@ -921,14 +496,6 @@ export default {
.action { .action {
text-align: right; text-align: right;
} }
::v-deep .el-divider {
background-color: #dcdfe6c2;
}
.card-content ::v-deep .el-divider--horizontal {
margin: 5px;
}
.card-content { .card-content {
flex: 1; flex: 1;
display: flex; display: flex;
...@@ -940,21 +507,39 @@ export default { ...@@ -940,21 +507,39 @@ export default {
box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.12), box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.12),
0 1.5px 6px 0 rgba(0, 0, 0, 0.08); 0 1.5px 6px 0 rgba(0, 0, 0, 0.08);
} }
::v-deep .el-divider {
background-color: #dcdfe6c2;
}
.card-content ::v-deep .el-divider--horizontal {
margin: 5px;
}
::v-deep .el-dialog { ::v-deep .el-dialog {
padding: 20px 10px; padding: 20px 15px 20px 10px;
border-radius: 5px; border-radius: 5px;
} }
.dialog ::v-deep .el-divider--horizontal {
.disconnectDialog ::v-deep .el-divider--horizontal {
margin-top: 30px; margin-top: 30px;
width: 80%; width: 80%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.disconnectDialog ::v-deep .el-divider__text { .dialog ::v-deep .el-divider__text {
color: #8b8a8a; color: #8b8a8a;
} }
.dialog-footer { .dialog-footer {
margin-top: 10px; margin-top: 10px;
} }
.check {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 80%;
margin: 0 auto;
}
.check ::v-deep .el-button + .el-button,
.el-button + .el-dropdown {
margin-left: 0px;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment