修改密码功能

src/views/Home.vue

@@ -51,14 +51,36 @@
       </el-main>
     </el-container>
   </el-container>
+
+  <el-dialog v-model="changePwdModal" title="修改密码" width="420px" @closed="resetPwdForm">
+    <el-form ref="changePwdForm" :model="changePwdData" :rules="changePwdRules" :label-width="100">
+      <el-form-item label="旧密码" prop="oldPassword">
+        <el-input v-model="changePwdData.oldPassword" type="password" show-password />
+      </el-form-item>
+      <el-form-item label="新密码" prop="newPassword">
+        <el-input v-model="changePwdData.newPassword" type="password" show-password />
+      </el-form-item>
+      <el-form-item label="确认密码" prop="confirmPassword">
+        <el-input v-model="changePwdData.confirmPassword" type="password" show-password />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="changePwdModal = false">取消</el-button>
+        <el-button type="primary" @click="submitChangePassword" :loading="changePwdLoading">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, reactive, computed, nextTick } from 'vue'
 import { useStore } from 'vuex'
 import { useRouter, useRoute } from 'vue-router'
 import menus from '../config/menu'
 import http from '@/utils/http'
+import { ElMessage } from 'element-plus'
+import { VForm } from '@/types'
 
 const store = useStore()
 const router = useRouter()
@@ -69,6 +91,32 @@ const currentYear = new Date().getFullYear()
 const defaultActiveMenuKey = ref<string | null>(null)
 const openMenuNames = ref<string[]>([])
 
+const changePwdModal = ref(false)
+const changePwdLoading = ref(false)
+const changePwdForm = ref<VForm>()
+const changePwdData = reactive({
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: ''
+})
+const changePwdRules = {
+  oldPassword: [
+    { required: true, message: '请输入旧密码', trigger: 'blur' }
+  ],
+  newPassword: [
+    { required: true, message: '请输入新密码', trigger: 'blur' },
+    { min: 8, max: 16, message: '密码长度8~16位', trigger: 'blur' },
+    { pattern: /^(?![\d]+$)(?![a-zA-Z]+$)(?![-=+_.,]+$)[\da-zA-Z-=+_.,]{8,16}$/, message: '密码由字母、数字、特殊字符中的任意两种组成', trigger: 'blur' }
+  ],
+  confirmPassword: [
+    { required: true, message: '请再次输入新密码', trigger: 'blur' },
+    { validator: (_rule: object, value: string, callback: Function) => {
+        value !== changePwdData.newPassword ? callback(new Error('两次输入的密码不一致')) : callback()
+      }, trigger: 'blur'
+    }
+  ]
+}
+
 const realname = computed((): null | string => {
   return store.state.loginInfo.userInfo
     ? store.state.loginInfo.userInfo.realname : null
@@ -103,7 +151,7 @@ function dropdownMenuCommand(command: string): void {
       router.push('/')
       break
     case 'changePassword':
-      // TODO
+      changePwdModal.value = true
       break
     case 'logout':
       store.commit('logout')
@@ -111,6 +159,23 @@ function dropdownMenuCommand(command: string): void {
       break
   }
 }
+function submitChangePassword(): void {
+  changePwdForm.value?.validate(async (valid: boolean) => {
+    if (!valid) return
+    changePwdLoading.value = true
+    await http.post('/api/v2/system/user/changePassword', changePwdData).finally(() => {
+      changePwdLoading.value = false
+    })
+    changePwdModal.value = false
+    ElMessage.success('密码修改成功')
+  })
+}
+function resetPwdForm(): void {
+  changePwdData.oldPassword = ''
+  changePwdData.newPassword = ''
+  changePwdData.confirmPassword = ''
+  nextTick(() => changePwdForm.value?.clearValidate())
+}
 function openMenu(path: string): void {
   router.push(path)
 }

yarn.lock

@@ -3290,11 +3290,6 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@~2.3.2:
-  version "2.3.2"
-  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
-
 function-bind@^1.1.1, function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"