password optimized

3 weeks ago · 037b13674b
2 changed files with 138 additions and 139 deletions
--- 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;
--- 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,37 +229,26 @@ const openChangePassword = () => {
        </div>
        <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">
              <!-- 有子菜单的父级菜单（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>
-                <el-icon><Folder /></el-icon>
+                  <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)"
-                >
+                  <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()"
-                >
+                  <el-sub-menu v-else :index="child.id.toString()">
                    <template #title>
                      <span>{{ child.menuName }}</span>
                    </template>
@ -268,11 +263,10 @@ const openChangePassword = () => {
              </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>
              </el-menu-item>
            </template>
@ -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>