ADD: 修改个人密码
This commit is contained in:
贾同学
@@ -22,10 +22,10 @@
|
||||
<el-icon><Sunny /></el-icon>
|
||||
{{ t('header.changeTheme') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click="openDialog('infoRef')">
|
||||
<!-- <el-dropdown-item @click="openDialog('infoRef')">
|
||||
<el-icon><User /></el-icon>
|
||||
{{ t('header.personalData') }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-item>-->
|
||||
<el-dropdown-item @click="openDialog('passwordRef')">
|
||||
<el-icon><Edit /></el-icon>
|
||||
{{ t('header.changePassword') }}
|
||||
|
||||
@@ -1,22 +1,171 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" title="修改密码" width="500px" draggable>
|
||||
<span>This is Password</span>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-dialog v-model="dialogVisible" title="修改密码" width="500px" draggable>
|
||||
<div>
|
||||
<el-form :model="formContent" ref="dialogFormRef" :rules="rules">
|
||||
<el-form-item label="原密码" prop="oldPassword" :label-width="100">
|
||||
<el-input
|
||||
type="oldPassword"
|
||||
v-model="formContent.oldPassword"
|
||||
show-password
|
||||
placeholder="请输入原密码"
|
||||
autocomplete="off"
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPassword" :label-width="100">
|
||||
<el-input
|
||||
type="newPassword"
|
||||
v-model="formContent.newPassword"
|
||||
show-password
|
||||
placeholder="请输入新密码"
|
||||
autocomplete="off"
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="surePassword" :label-width="100">
|
||||
<el-input
|
||||
type="surePassword"
|
||||
v-model="formContent.surePassword"
|
||||
show-password
|
||||
placeholder="请再次输入确认密码"
|
||||
autocomplete="off"
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="close()">取消</el-button>
|
||||
<el-button type="primary" @click="save()">保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
<script lang="ts" setup>
|
||||
import { ref, type Ref } from 'vue'
|
||||
import { ElMessage, type FormItemRule } from 'element-plus'
|
||||
import { updatePassWord } from '@/api/user/user'
|
||||
import { type User } from '@/api/user/interface/user'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
import { useAuthStore } from '@/stores/modules/auth'
|
||||
import { useDictStore } from '@/stores/modules/dict'
|
||||
import { logoutApi } from '@/api/user/login'
|
||||
import { LOGIN_URL } from '@/config'
|
||||
import { useAppSceneStore, useModeStore } from '@/stores/modules/mode'
|
||||
import { UserState } from '@/stores/interface'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const dialogVisible = ref(false);
|
||||
const openDialog = () => {
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
const userStore = useUserStore()
|
||||
const dictStore = useDictStore()
|
||||
const authStore = useAuthStore()
|
||||
const modeStore = useModeStore()
|
||||
const AppSceneStore = useAppSceneStore()
|
||||
const router = useRouter()
|
||||
// 定义弹出组件元信息
|
||||
const dialogFormRef = ref()
|
||||
function useMetaInfo() {
|
||||
const dialogVisible = ref(false)
|
||||
const formContent = ref<User.ResPassWordUser>({
|
||||
id: '', //用户ID，作为唯一标识
|
||||
oldPassword: '', //密码
|
||||
newPassword: '', //
|
||||
surePassword: ''
|
||||
})
|
||||
return { dialogVisible, formContent }
|
||||
}
|
||||
|
||||
defineExpose({ openDialog });
|
||||
const { dialogVisible, formContent } = useMetaInfo()
|
||||
// 清空formContent
|
||||
const resetFormContent = () => {
|
||||
formContent.value = {
|
||||
id: '', //用户ID，作为唯一标识
|
||||
oldPassword: '', //密码
|
||||
newPassword: '', //
|
||||
surePassword: ''
|
||||
}
|
||||
}
|
||||
|
||||
// 定义规则
|
||||
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
|
||||
oldPassword: [{ required: true, message: '原密码必填！', trigger: 'blur' }],
|
||||
newPassword: [
|
||||
{ required: true, message: '新密码必填！', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{8,16}$/,
|
||||
message: '密码长度为8-16，需包含特殊字符',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
surePassword: [
|
||||
{ required: true, message: '确认密码必填！', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule: FormItemRule, value: string, callback: Function) => {
|
||||
if (value !== formContent.value.newPassword) {
|
||||
callback(new Error('两次输入的密码不一致！'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 关闭弹窗
|
||||
const close = () => {
|
||||
dialogVisible.value = false
|
||||
// 清空dialogForm中的值
|
||||
resetFormContent()
|
||||
// 重置表单
|
||||
dialogFormRef.value?.resetFields()
|
||||
}
|
||||
|
||||
// 保存数据
|
||||
const save = () => {
|
||||
try {
|
||||
dialogFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
if (formContent.value.id) {
|
||||
await updatePassWord(formContent.value)
|
||||
ElMessage.success('修改密码成功，请重新登录！')
|
||||
setTimeout(async () => {
|
||||
// 1.执行退出登录接口
|
||||
await logoutApi()
|
||||
// 2.清除 Token
|
||||
userStore.setAccessToken('')
|
||||
userStore.setRefreshToken('')
|
||||
userStore.setExp(0)
|
||||
userStore.setUserInfo({ id: '', name: '' } as UserState['userInfo'])
|
||||
userStore.setIsRefreshToken(false)
|
||||
dictStore.setDictData([])
|
||||
modeStore.setCurrentMode('')
|
||||
AppSceneStore.setCurrentMode('')
|
||||
//重置菜单/导航栏权限
|
||||
await authStore.resetAuthStore()
|
||||
await router.push(LOGIN_URL)
|
||||
}, 2000)
|
||||
}
|
||||
close()
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('验证过程中出现错误', err)
|
||||
}
|
||||
}
|
||||
|
||||
// 打开弹窗是编辑
|
||||
const openDialog = async () => {
|
||||
// 重置表单
|
||||
dialogFormRef.value?.resetFields()
|
||||
dialogVisible.value = true
|
||||
formContent.value.id = userStore.userInfo.id
|
||||
}
|
||||
|
||||
// 对外映射
|
||||
defineExpose({ openDialog })
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user