添加修改登录密码功能

src/packages/pc/components/layouts/header/components/modify/index.vue

@@ -0,0 +1,87 @@
+<!-- 系统公告 -->
+<template>
+    <app-drawer class="app-notice" title="修改登录密码" :width="400" v-model:show="show" :loading="loading" :refresh="refresh">
+        <el-form ref="formRef" label-width="100px" :model="formData" :rules="formRules">
+            <el-form-item label="原密码" prop="OldPwd">
+                <el-input placeholder="请输入原密码" show-password v-model="formData.OldPwd" />
+            </el-form-item>
+            <el-form-item label="新密码" prop="NewPwd">
+                <el-input placeholder="请输入新密码" show-password v-model="formData.NewPwd" />
+            </el-form-item>
+            <el-form-item label="确认密码" prop="Confirmpassword">
+                <el-input placeholder="请重新输入新密码" show-password v-model="Confirmpassword" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button type="info" @click="onCancel(false)">取消</el-button>
+            <el-button type="danger" @click="onSubmit">修改密码</el-button>
+        </template>
+    </app-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { useAccountPassword } from '@/business/user'
+import eventBus from '@/services/bus'
+import { validateRules } from '@/constants/regex'
+import AppDrawer from '@pc/components/base/drawer/index.vue'
+
+const { formData, loading, formSubmit } = useAccountPassword(1)
+const show = ref(true)
+const refresh = ref(false)
+const formRef = ref<FormInstance>()
+const Confirmpassword = ref('')
+
+const formRules: FormRules = {
+    OldPwd: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
+    NewPwd: [{
+        required: true,
+        validator: (rule, value, callback) => {
+            if (validateRules.password.validate(value)) {
+                callback()
+            } else {
+                callback(new Error(validateRules.password.message))
+            }
+        },
+        trigger: 'blur'
+    }],
+    Confirmpassword: [
+        {
+            required: true,
+            validator: (rule, value, callback) => {
+                if (value === formData.NewPwd) {
+                    callback()
+                } else {
+                    callback(new Error('密码输入不一致！'))
+                }
+            },
+            trigger: 'blur'
+        },
+    ],
+}
+
+const onCancel = (isRefresh = false) => {
+    show.value = false
+    refresh.value = isRefresh
+}
+
+const onSubmit = () => {
+    formRef.value?.validate((valid) => {
+        console.log('xxxx', formRef);
+        if (valid) {
+            
+            
+            formSubmit().then(() => {
+                ElMessage.success('密码修改成功').then.then(() => {
+                    eventBus.$emit('LogoutNotify')
+                })
+            }).catch((err) => {
+                ElMessage.error('提交失败：' + err)
+            })
+        }
+    })
+}
+
+</script>

src/packages/pc/components/layouts/header/index.vue

@@ -21,6 +21,8 @@
                 </span>
                 <template #dropdown>
                     <el-dropdown-menu>
+                        <el-dropdown-item :icon="Unlock"
+                            @click="openComponent('modify')">修改密码</el-dropdown-item>
                         <el-dropdown-item :icon="SwitchButton"
                             @click="eventBus.$emit('LogoutNotify')">退出登录</el-dropdown-item>
                     </el-dropdown-menu>
@@ -33,7 +35,7 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, computed, defineAsyncComponent } from 'vue'
-import { SwitchButton } from '@element-plus/icons-vue'
+import { SwitchButton, Unlock } from '@element-plus/icons-vue'
 import { getFileUrl } from '@/filters'
 import { useComponent } from '@/hooks/component'
 import { useUserStore, useGlobalStore, useNoticeStore } from '@/stores'
@@ -42,6 +44,7 @@ import AppIcon from '@pc/components/base/icon/index.vue'
 
 const componentMap = new Map<string, unknown>([
     ['notice', defineAsyncComponent(() => import('./components/notice/index.vue'))],
+    ['modify', defineAsyncComponent(() => import('./components/modify/index.vue'))],
 ])
 
 const { componentId, openComponent, closeComponent } = useComponent()