From 037b13674b02a0f06a84b1441aa503dcac564823 Mon Sep 17 00:00:00 2001
From: zry <18990852002@163.com>
Date: Thu, 24 Jul 2025 16:38:41 +0800
Subject: [PATCH] password optimized

---
 src/components/changePassword.vue | 168 ++++++++++++++++++++------------------
 src/views/home.vue                | 109 +++++++++++--------------
 2 files changed, 138 insertions(+), 139 deletions(-)

diff --git a/src/components/changePassword.vue b/src/components/changePassword.vue
index ff0d4a0..44954b2 100644
--- a/src/components/changePassword.vue
+++ b/src/components/changePassword.vue
@@ -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>
 import {ref, reactive, computed, watch, onMounted} from 'vue'
@@ -191,7 +113,7 @@ const changePassword = async function () {
       // 延迟跳转，确保用户看到成功消息
        setTimeout(() => {
          router.push('/PasswordSuccess');
-       }, 1500);
+       }, 1000);
     }else if (result.code === 0){
       ElMessage.error('原密码错误')
       passwd.oldPassword = '';
@@ -221,6 +143,10 @@ const resetFields = () => {
   }
   errorMsg.value = ''
 }
+// 暴露 resetFields 方法给父组件调用
+defineExpose({
+  resetFields
+})
 
 // 修改提交方法
 const onSubmit = () => {
@@ -248,6 +174,90 @@ onMounted(() => {
 
 </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>
 .form-container {
   justify-content: center;
diff --git a/src/views/home.vue b/src/views/home.vue
index 2c4c54e..9f6d8ef 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -202,6 +202,12 @@ const openExportList = () => {
 const openChangePassword = () => {
   showPasswordDialog.value = true
 }
+// 關閉修改密碼的清空邏輯
+const changePasswordRef = ref(null)
+const handleClosePasswordDialog = () => {
+  changePasswordRef.value?.resetFields()
+}
+
 </script>
 
 <template>
@@ -223,59 +229,47 @@ const openChangePassword = () => {
         </div>
         <el-card style="min-height: 90%;">
 
-          <el-menu
-              :router="true"
-              class="el-menu-vertical-demo"
-              :default-active="$route.path"
-          >
-          <!-- 递归渲染菜单层级 -->
-          <template v-for="menu in menuList" :key="menu.id">
-            <!-- 有子菜单的父级菜单（menuType=2 且存在children） -->
-            <el-sub-menu
-                v-if="menu.children && menu.children.length > 0"
-                :index="menu.id.toString()"
-            >
-              <template #title>
-                <el-icon><Folder /></el-icon>
-                <span>{{ menu.menuName }}</span>
-              </template>
-              <!-- 子菜单 -->
-              <template v-for="child in menu.children" :key="child.id">
-                <!-- 子菜单为叶子节点（无children） -->
-                <el-menu-item
-                    v-if="!child.children || child.children.length === 0"
-                    :index="getRoutePath(child)"
-                >
-                  <span>{{ child.menuName }}</span>
-                </el-menu-item>
-
-                <!-- 子菜单有下级 -->
-                <el-sub-menu
-                    v-else
-                    :index="child.id.toString()"
-                >
-                  <template #title>
+          <el-menu :router="true" class="el-menu-vertical-demo" :default-active="$route.path">
+            <!-- 递归渲染菜单层级 -->
+            <template v-for="menu in menuList" :key="menu.id">
+              <!-- 有子菜单的父级菜单（menuType=2 且存在children） -->
+              <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.id.toString()">
+                <template #title>
+                  <el-icon>
+                    <Folder />
+                  </el-icon>
+                  <span>{{ menu.menuName }}</span>
+                </template>
+                <!-- 子菜单 -->
+                <template v-for="child in menu.children" :key="child.id">
+                  <!-- 子菜单为叶子节点（无children） -->
+                  <el-menu-item v-if="!child.children || child.children.length === 0" :index="getRoutePath(child)">
                     <span>{{ child.menuName }}</span>
-                  </template>
-                  <!-- 嵌归 下一级-->
-                  <template v-for="grandChild in child.children" :key="grandChild.id">
-                    <el-menu-item :index="getRoutePath(grandChild)">
-                      <span>{{ grandChild.menuName }}</span>
-                    </el-menu-item>
-                  </template>
-                </el-sub-menu>
-              </template>
-            </el-sub-menu>
-
-            <!-- 无子菜单的一级菜单 -->
-            <el-menu-item
-                v-else
-                :index="getRoutePath(menu)"
-            >
-              <el-icon><Folder /></el-icon>
-              <span>{{ menu.menuName }}</span>
-            </el-menu-item>
-          </template>
+                  </el-menu-item>
+
+                  <!-- 子菜单有下级 -->
+                  <el-sub-menu v-else :index="child.id.toString()">
+                    <template #title>
+                      <span>{{ child.menuName }}</span>
+                    </template>
+                    <!-- 嵌归 下一级-->
+                    <template v-for="grandChild in child.children" :key="grandChild.id">
+                      <el-menu-item :index="getRoutePath(grandChild)">
+                        <span>{{ grandChild.menuName }}</span>
+                      </el-menu-item>
+                    </template>
+                  </el-sub-menu>
+                </template>
+              </el-sub-menu>
+
+              <!-- 无子菜单的一级菜单 -->
+              <el-menu-item v-else :index="getRoutePath(menu)">
+                <el-icon>
+                  <Folder />
+                </el-icon>
+                <span>{{ menu.menuName }}</span>
+              </el-menu-item>
+            </template>
           </el-menu>
 
         </el-card>
@@ -337,16 +331,11 @@ const openChangePassword = () => {
       </template>
     </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>
 
-
   </div>
 </template>