huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

password optimized

zhangrenyuan/feature-20250714163943-金币前端二期
zry 3 weeks ago
parent
7ce01541a0
commit
037b13674b
2 changed files with 138 additions and 139 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 168
      src/components/changePassword.vue
  2. 51
      src/views/home.vue

168
src/components/changePassword.vue
View File

@ -1,82 +1,4 @@
<template>
<div class="form-container">
<el-form
ref="passwdFormRef"
:model="passwd"
:rules="rules"
label-width="100px"
class="password-form"
>
<h3 class="form-title">修改密码</h3>
<!-- 原密码 -->
<el-form-item prop="oldPassword" label="原密码">
<el-input
v-model.trim="passwd.oldPassword"
type="password"
placeholder="请输入原密码"
show-password
/>
</el-form-item>
<!-- 新密码 -->
<el-form-item prop="newPassword" label="新密码">
<el-input
v-model.trim="passwd.newPassword"
type="password"
placeholder="请输入新密码"
show-password
/>
</el-form-item>
<!-- 重复密码 -->
<el-form-item prop="againPassword" label="重复密码">
<el-input
v-model.trim="passwd.againPassword"
type="password"
placeholder="请再次输入新密码"
show-password
/>
</el-form-item>
<!-- 密码规则提示 -->
<div class="rule-tips">
<div :class="isLengthValid ? 'tip pass' : 'tip neutral'">
<el-icon>
<component :is="isLengthValid ? SuccessFilled : SuccessFilled"/>
</el-icon>
密码由8-16位数字、字母或符号组成
</div>
<div :class="isComplexValid ? 'tip pass' : 'tip neutral'">
<el-icon>
<component :is="isComplexValid ? SuccessFilled : SuccessFilled"/>
</el-icon>
至少含2种以上字符
</div>
<div v-if="errorMsg" class="tip fail">
<el-icon>
<CircleCloseFilled/>
</el-icon>
{{ errorMsg }}
</div>
</div>
<!-- 按钮 -->
<div class="button-group">
<el-button
type="primary"
@click="onSubmit"
style="width: 300px"
:loading="loading"
:disabled="!isLengthValid || !isComplexValid"
>
{{ loading ? '修改中...' : '确定' }}
</el-button>
</div>
</el-form>
</div>
</template>
<script setup> <script setup>
import {ref, reactive, computed, watch, onMounted} from 'vue' import {ref, reactive, computed, watch, onMounted} from 'vue'
@ -191,7 +113,7 @@ const changePassword = async function () {
// 延迟跳转，确保用户看到成功消息 // 延迟跳转，确保用户看到成功消息
setTimeout(() => { setTimeout(() => {
router.push('/PasswordSuccess'); router.push('/PasswordSuccess');
}, 1500);
}, 1000);
}else if (result.code === 0){ }else if (result.code === 0){
ElMessage.error('原密码错误') ElMessage.error('原密码错误')
passwd.oldPassword = ''; passwd.oldPassword = '';
@ -221,6 +143,10 @@ const resetFields = () => {
} }
errorMsg.value = '' errorMsg.value = ''
} }
// 暴露 resetFields 方法给父组件调用
defineExpose({
resetFields
})
// 修改提交方法 // 修改提交方法
const onSubmit = () => { const onSubmit = () => {
@ -248,6 +174,90 @@ onMounted(() => {
</script> </script>
<template>
<div class="form-container">
<el-form
ref="passwdFormRef"
:model="passwd"
:rules="rules"
label-width="100px"
class="password-form"
>
<h3 class="form-title">修改密码</h3>
<!-- 原密码 -->
<el-form-item prop="oldPassword" label="原密码">
<el-input
v-model.trim="passwd.oldPassword"
type="password"
placeholder="请输入原密码"
show-password
/>
</el-form-item>
<!-- 新密码 -->
<el-form-item prop="newPassword" label="新密码">
<el-input
v-model.trim="passwd.newPassword"
type="password"
placeholder="请输入新密码"
show-password
/>
</el-form-item>
<!-- 重复密码 -->
<el-form-item prop="againPassword" label="重复密码">
<el-input
v-model.trim="passwd.againPassword"
type="password"
placeholder="请再次输入新密码"
show-password
/>
</el-form-item>
<!-- 密码规则提示 -->
<div class="rule-tips">
<div :class="isLengthValid ? 'tip pass' : 'tip neutral'">
<el-icon>
<component :is="isLengthValid ? SuccessFilled : SuccessFilled"/>
</el-icon>
密码由8-16位数字、字母或符号组成
</div>
<div :class="isComplexValid ? 'tip pass' : 'tip neutral'">
<el-icon>
<component :is="isComplexValid ? SuccessFilled : SuccessFilled"/>
</el-icon>
至少含2种以上字符
</div>
<div v-if="errorMsg" class="tip fail">
<el-icon>
<CircleCloseFilled/>
</el-icon>
{{ errorMsg }}
</div>
</div>
<!-- 按钮 -->
<div class="button-group">
<el-button
type="primary"
@click="onSubmit"
style="width: 300px"
:loading="loading"
:disabled="!isLengthValid || !isComplexValid"
>
{{ loading ? '修改中...' : '确定' }}
</el-button>
</div>
</el-form>
</div>
</template>
<style scoped> <style scoped>
.form-container { .form-container {
justify-content: center; justify-content: center;

51
src/views/home.vue
View File

@ -202,6 +202,12 @@ const openExportList = () => {
const openChangePassword = () => { const openChangePassword = () => {
showPasswordDialog.value = true showPasswordDialog.value = true
} }
// 關閉修改密碼的清空邏輯
const changePasswordRef = ref(null)
const handleClosePasswordDialog = () => {
changePasswordRef.value?.resetFields()
}
</script> </script>
<template> <template>
@ -223,37 +229,26 @@ const openChangePassword = () => {
</div> </div>
<el-card style="min-height: 90%;"> <el-card style="min-height: 90%;">
<el-menu
:router="true"
class="el-menu-vertical-demo"
:default-active="$route.path"
>
<el-menu :router="true" class="el-menu-vertical-demo" :default-active="$route.path">
<!-- 递归渲染菜单层级 --> <!-- 递归渲染菜单层级 -->
<template v-for="menu in menuList" :key="menu.id"> <template v-for="menu in menuList" :key="menu.id">
<!-- 有子菜单的父级菜单（menuType=2 且存在children） --> <!-- 有子菜单的父级菜单（menuType=2 且存在children） -->
<el-sub-menu
v-if="menu.children && menu.children.length > 0"
:index="menu.id.toString()"
>
<el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.id.toString()">
<template #title> <template #title>
<el-icon><Folder /></el-icon>
<el-icon>
<Folder />
</el-icon>
<span>{{ menu.menuName }}</span> <span>{{ menu.menuName }}</span>
</template> </template>
<!-- 子菜单 --> <!-- 子菜单 -->
<template v-for="child in menu.children" :key="child.id"> <template v-for="child in menu.children" :key="child.id">
<!-- 子菜单为叶子节点（无children） --> <!-- 子菜单为叶子节点（无children） -->
<el-menu-item
v-if="!child.children || child.children.length === 0"
:index="getRoutePath(child)"
>
<el-menu-item v-if="!child.children || child.children.length === 0" :index="getRoutePath(child)">
<span>{{ child.menuName }}</span> <span>{{ child.menuName }}</span>
</el-menu-item> </el-menu-item>
<!-- 子菜单有下级 --> <!-- 子菜单有下级 -->
<el-sub-menu
v-else
:index="child.id.toString()"
>
<el-sub-menu v-else :index="child.id.toString()">
<template #title> <template #title>
<span>{{ child.menuName }}</span> <span>{{ child.menuName }}</span>
</template> </template>
@ -268,11 +263,10 @@ const openChangePassword = () => {
</el-sub-menu> </el-sub-menu>
<!-- 无子菜单的一级菜单 --> <!-- 无子菜单的一级菜单 -->
<el-menu-item
v-else
:index="getRoutePath(menu)"
>
<el-icon><Folder /></el-icon>
<el-menu-item v-else :index="getRoutePath(menu)">
<el-icon>
<Folder />
</el-icon>
<span>{{ menu.menuName }}</span> <span>{{ menu.menuName }}</span>
</el-menu-item> </el-menu-item>
</template> </template>
@ -337,16 +331,11 @@ const openChangePassword = () => {
</template> </template>
</el-dialog> </el-dialog>
<!-- 自定义密码修改弹窗组件 -->
<el-dialog
v-model="showPasswordDialog"
:center="true"
width="470px"
>
<ChangePassword @confirm="showPasswordDialog = false"/>
<!-- 自定义密码修改弹窗组件 父組件和子組件通信-->
<el-dialog v-model="showPasswordDialog" :center="true" width="470px" @close="handleClosePasswordDialog">
<ChangePassword ref="changePasswordRef" @confirm="showPasswordDialog = false" />
</el-dialog> </el-dialog>
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save