From 3df814d71801e446fecbe01133bf2df81996d557 Mon Sep 17 00:00:00 2001
From: gaoxq <376340421@qq.com>
Date: Tue, 3 Mar 2026 17:47:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E9=A1=B5=E9=9D=A2=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Layout/components/editPswd.vue | 187 ++++++++++++++++++
 1 file changed, 187 insertions(+)
 create mode 100644 screen-vue/src/components/Layout/components/editPswd.vue

diff --git a/screen-vue/src/components/Layout/components/editPswd.vue b/screen-vue/src/components/Layout/components/editPswd.vue
new file mode 100644
index 0000000..2c2e8a2
--- /dev/null
+++ b/screen-vue/src/components/Layout/components/editPswd.vue
@@ -0,0 +1,187 @@
+<template>
+  <div class="edit-pwd-container">
+    <el-form ref="pwdFormRef" :model="pwdForm" :rules="pwdRules" label-width="80px" class="pwd-form">
+      <el-form-item label="原密码" prop="oldPassword">
+        <el-input v-model="pwdForm.oldPassword" type="password" placeholder="请输入原密码" show-password size="default" maxlength="20"></el-input>
+      </el-form-item>
+      <el-form-item label="新密码" prop="newPassword">
+        <el-input v-model="pwdForm.newPassword" type="password" placeholder="请输入新密码" show-password size="default" maxlength="20"></el-input>
+      </el-form-item>
+      <el-form-item label="确认密码" prop="confirmPassword">
+        <el-input v-model="pwdForm.confirmPassword" type="password" placeholder="请确认新密码" show-password size="default" maxlength="20"></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onUnmounted, nextTick } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+const emit = defineEmits(['success'])
+const pwdFormRef = ref(null)
+const isMounted = ref(true)
+let submitPromise = null
+
+const pwdForm = reactive({
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: ''
+})
+
+const pwdRules = reactive({
+  oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
+  newPassword: [
+    { required: true, message: '请输入新密码', trigger: 'blur' },
+  ],
+  confirmPassword: [
+    { required: true, message: '请确认新密码', trigger: 'blur' },
+    {
+      validator: (rule, value, callback) => {
+        if (!isMounted.value) return callback()
+        if (value === '') {
+          callback(new Error('请确认新密码'))
+        } else if (value !== pwdForm.newPassword) {
+          callback(new Error('两次输入的密码不一致'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur'
+    }
+  ]
+})
+
+const submitForm = async () => {
+  if (!isMounted.value || !pwdFormRef.value) return
+  if (submitPromise) {
+    submitPromise = null
+    return
+  }
+
+  submitPromise = new Promise(async (resolve) => {
+    try {
+      let valid = true
+      await pwdFormRef.value.validate().catch(() => {
+        valid = false
+        ElMessage.error('表单验证失败，请检查输入内容')
+      })
+
+      if (!valid || !isMounted.value) {
+        submitPromise = null
+        return resolve(false)
+      }
+
+      let confirmResult = false
+      await nextTick(async () => {
+        if (!isMounted.value) return
+        try {
+          await ElMessageBox.confirm(
+            '确认要修改密码吗?',
+            '温馨提示',
+            { 
+              confirmButtonText: '确认', 
+              cancelButtonText: '取消', 
+              type: 'warning',
+              closeOnClickModal: false,
+              showClose: false,
+              timeout: 0
+            }
+          )
+          confirmResult = true
+        } catch {
+          confirmResult = false
+        }
+      })
+
+      if (!confirmResult || !isMounted.value) {
+        submitPromise = null
+        return resolve(false)
+      }
+
+      await new Promise(res => setTimeout(res, 800))
+      if (isMounted.value) {
+        ElMessage.success('密码修改成功')
+        emit('success')
+        resolve(true)
+      }
+    } catch (error) {
+      if (isMounted.value) {
+        ElMessage.error(error.message || '密码修改失败，请稍后重试')
+      }
+      resolve(false)
+    } finally {
+      submitPromise = null
+    }
+  })
+
+  return submitPromise
+}
+
+const resetForm = () => {
+  if (!isMounted.value || !pwdFormRef.value) return
+  pwdFormRef.value.resetFields()
+}
+
+onUnmounted(() => {
+  isMounted.value = false
+  submitPromise = null
+})
+
+defineExpose({ submitForm, resetForm })
+</script>
+
+<style scoped>
+.edit-pwd-container {
+  border: none !important;
+  background: transparent !important;
+  padding: 0 !important;
+  box-shadow: none !important;
+}
+
+.pwd-form {
+  width: 100%;
+}
+
+:deep(.el-form-item) {
+  margin-bottom: 16px;
+}
+
+:deep(.el-form-item:last-child) {
+  margin-bottom: 0;
+}
+
+:deep(.el-input) {
+  --el-input-height: 32px !important;
+  width: 100%;
+  --el-input-border-radius: 4px;
+}
+
+:deep(.el-form-item__label) {
+  font-size: 13px;
+  color: #303133;
+  font-weight: 500;
+}
+
+:deep(.el-input__wrapper) {
+  padding: 0 10px;
+  height: 32px !important;
+}
+
+:deep(.el-input__inner) {
+  height: 32px !important;
+  line-height: 32px !important;
+  font-size: 13px;
+}
+
+:deep(.el-input__suffix-inner) {
+  height: 32px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:deep(.el-icon) {
+  font-size: 14px !important;
+}
+</style>
\ No newline at end of file