feat(系统): 添加修改密码功能

src/api/sys/model/userModel.ts

@@ -40,3 +40,9 @@ export interface GetUserInfoModel {
   desc?: string;
   homePath?: string;
 }
+
+export interface ChangePasswordParams {
+  oldPassword: string;
+  newPassword: string;
+  newPasswordConfirm: string;
+}

src/api/sys/user.ts

@@ -1,5 +1,10 @@
 import { ApiServiceEnum, defHttp } from '@/utils/http/axios';
-import { GetUserInfoModel, LoginParams, LoginResultModel } from './model/userModel';
+import {
+  ChangePasswordParams,
+  GetUserInfoModel,
+  LoginParams,
+  LoginResultModel,
+} from './model/userModel';
 
 import { ErrorMessageMode } from '#/axios';
 
@@ -9,6 +14,7 @@ enum Api {
   GetUserInfo = '/getUserInfo',
   GetPermCode = '/getPermCode',
   TestRetry = '/testRetry',
+  changePassword = 'sys/auth/changePassword',
 }
 
 /**
@@ -54,3 +60,15 @@ export function testRetry() {
     },
   );
 }
+
+/**
+ * 修改密码
+ * @param params 参数
+ */
+export const changePasswordApi = (params: ChangePasswordParams) => {
+  return defHttp.post({
+    service: ApiServiceEnum.SMART_SYSTEM,
+    url: Api.changePassword,
+    data: params,
+  });
+};

src/layouts/default/header/components/user-dropdown/ChangePasswordModal.vue

@@ -0,0 +1,92 @@
+<template>
+  <BasicModal
+    @register="registerModal"
+    :title="$t('layout.header.changePassword')"
+    @ok="handleChangePassword"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import type { ChangePasswordParams } from '@/api/sys/model/userModel';
+
+  import { useModalInner, BasicModal } from '@/components/Modal';
+  import { useForm, BasicForm } from '@/components/Form';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { useUserStore } from '@/store/modules/user';
+  import { successMessage } from '@/utils/message/SystemNotice';
+
+  const { t } = useI18n();
+
+  const [registerModal, { changeOkLoading, closeModal }] = useModalInner(() => {
+    resetFields();
+  });
+
+  const handleChangePassword = async () => {
+    try {
+      changeOkLoading(true);
+      const model = (await validate()) as ChangePasswordParams;
+      const { changePassword } = useUserStore();
+      await changePassword(model);
+      successMessage({
+        message: t('app.changePassword.successMessage'),
+      });
+      closeModal();
+    } finally {
+      changeOkLoading(false);
+    }
+  };
+
+  const [registerForm, { validate, resetFields }] = useForm({
+    showActionButtonGroup: false,
+    colon: true,
+    baseColProps: {
+      span: 24,
+    },
+    labelCol: {
+      span: 6,
+    },
+    wrapperCol: {
+      span: 17,
+    },
+    schemas: [
+      {
+        label: t('app.changePassword.oldPassword'),
+        field: 'oldPassword',
+        component: 'InputPassword',
+        required: true,
+      },
+      {
+        label: t('app.changePassword.newPassword'),
+        field: 'newPassword',
+        component: 'StrengthMeter',
+        required: true,
+      },
+      {
+        label: t('app.changePassword.newPasswordConfirm'),
+        field: 'newPasswordConfirm',
+        component: 'InputPassword',
+        dynamicRules: ({ model }) => {
+          return [
+            {
+              required: true,
+              validator: (rule, value) => {
+                const { newPassword } = model;
+                if (!newPassword) {
+                  return Promise.resolve();
+                }
+                if (newPassword !== value) {
+                  return Promise.reject('密码不一致');
+                }
+                return Promise.resolve();
+              },
+            },
+          ];
+        },
+      },
+    ],
+  });
+</script>
+
+<style scoped></style>

src/layouts/default/header/components/user-dropdown/index.vue

@@ -24,6 +24,11 @@
           :text="t('layout.header.dropdownChangeApi')"
           icon="ant-design:swap-outlined"
         />
+        <MenuItem
+          key="changePassword"
+          :text="t('layout.header.changePassword')"
+          icon="ant-design:key-outlined"
+        />
         <MenuItem
           v-if="getUseLockPage"
           key="lock"
@@ -40,6 +45,7 @@
   </Dropdown>
   <LockAction @register="register" />
   <ChangeApi @register="registerApi" />
+  <ChangePasswordModal @register="registerChangePasswordModal" />
 </template>
 <script lang="ts" setup>
   import { Dropdown, Menu } from 'ant-design-vue';
@@ -55,8 +61,9 @@
   import { propTypes } from '@/utils/propTypes';
   import { openWindow } from '@/utils';
   import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
+  import ChangePasswordModal from './ChangePasswordModal.vue';
 
-  type MenuEvent = 'logout' | 'doc' | 'lock' | 'api';
+  type MenuEvent = 'logout' | 'doc' | 'lock' | 'api' | 'changePassword';
 
   const MenuItem = createAsyncComponent(() => import('./DropMenuItem.vue'));
   const LockAction = createAsyncComponent(() => import('../lock/LockModal.vue'));
@@ -113,8 +120,16 @@
       case 'api':
         handleApi();
         break;
+      case 'changePassword':
+        handleChangePassword();
+        break;
     }
   }
+
+  const [registerChangePasswordModal, { openModal: openChangePasswordModal }] = useModal();
+  const handleChangePassword = () => {
+    openChangePasswordModal(true, { open: true });
+  };
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-header-user-dropdown';

src/locales/lang/en/layout.json

@@ -15,7 +15,8 @@
     "lockScreenPassword": "Lock screen password",
     "lockScreen": "Lock screen",
     "lockScreenBtn": "Locking",
-    "home": "Home"
+    "home": "Home",
+    "changePassword": "Change password"
   },
   "multipleTab": {
     "reload": "Refresh current",

src/locales/lang/zh-CN/layout.json

@@ -15,7 +15,8 @@
     "lockScreenPassword": "锁屏密码",
     "lockScreen": "锁定屏幕",
     "lockScreenBtn": "锁定",
-    "home": "首页"
+    "home": "首页",
+    "changePassword": "修改密码"
   },
   "multipleTab": {
     "reload": "重新加载",

src/store/modules/user.ts

@@ -5,9 +5,14 @@ import { store } from '@/store';
 import { RoleEnum } from '@/enums/roleEnum';
 import { PageEnum } from '@/enums/pageEnum';
 import { ROLES_KEY, TOKEN_KEY, USER_INFO_KEY } from '@/enums/cacheEnum';
-import { getAuthCache, setAuthCache } from '@/utils/auth';
-import { GetUserInfoModel, LoginParams, LoginResultModel } from '@/api/sys/model/userModel';
-import { doLogout, loginApi } from '@/api/sys/user';
+import { createPassword, getAuthCache, setAuthCache } from '@/utils/auth';
+import {
+  ChangePasswordParams,
+  GetUserInfoModel,
+  LoginParams,
+  LoginResultModel,
+} from '@/api/sys/model/userModel';
+import { changePasswordApi, doLogout, loginApi } from '@/api/sys/user';
 import { useI18n } from '@/hooks/web/useI18n';
 import { useMessage } from '@/hooks/web/useMessage';
 import { router } from '@/router';
@@ -192,6 +197,19 @@ export const useUserStore = defineStore({
         },
       });
     },
+    /**
+     * 修改密码
+     * @param parameter 参数
+     */
+    changePassword({ oldPassword, newPassword, newPasswordConfirm }: ChangePasswordParams) {
+      const { username } = this.getUserInfo;
+      console.log(oldPassword, newPassword);
+      return changePasswordApi({
+        oldPassword: createPassword(username, oldPassword),
+        newPassword: createPassword(username, newPassword),
+        newPasswordConfirm: createPassword(username, newPasswordConfirm),
+      });
+    },
   },
 });