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