修改用户密码

src/api/userManagementPage.ts

@@ -51,6 +51,14 @@ export function resetPasswords(ids: number[]) {
   );
 }
 
+/** 用户自行修改密码 */
+export function changePassword(password: string) {
+  return httpApp.post(
+    `/api/ess/user/password`,
+    new URLSearchParams([["password", password]])
+  );
+}
+
 /** 导入用户 */
 export function importUsers(rootOrgId: number, file: File) {
   const f = new FormData();

src/components/Layout.vue

@@ -65,26 +65,65 @@
           >
         </div>
         <div class="tw-flex tw-items-center tw-cursor-pointer tw-gap-2 tw-mr-2">
-          <div>{{ store.userInfo.displayName }}</div>
+          <div class="tw-cursor-pointer" @click="visible = true">
+            {{ store.userInfo.displayName }}
+          </div>
 
           <div class="logout-icon" @click="doLogout"></div>
         </div>
       </div>
       <router-view class="tw-m-8"></router-view>
     </div>
+
+    <a-modal
+      v-model:visible="visible"
+      title="修改密码"
+      @ok="handleOk"
+      ok-text="确定"
+      cancel-text="取消"
+    >
+      <a-form :labelCol="{ span: 6 }">
+        <a-form-item label="新密码">
+          <a-input-password v-model:value="newPassword"></a-input-password>
+        </a-form-item>
+        <a-form-item label="重复输入新密码">
+          <a-input-password v-model:value="newPasswordCopy"></a-input-password>
+        </a-form-item>
+      </a-form>
+    </a-modal>
   </div>
 </template>
 
 <script setup lang="ts">
 import { logout } from "@/api/loginPage";
+import { changePassword } from "@/api/userManagementPage";
 import { routeLogout } from "@/router";
 import { useMainStore } from "@/store";
+import { message } from "ant-design-vue";
 
 const store = useMainStore();
 
 async function doLogout() {
   logout().then(() => routeLogout({ cause: "主动退出", redirectTo: "/" }));
 }
+
+let visible = $ref(false);
+let newPassword = $ref("");
+let newPasswordCopy = $ref("");
+
+async function handleOk() {
+  if (newPassword.length < 6) {
+    message.error({ content: "密码长度必须至少大于6位" });
+    return;
+  }
+  if (newPassword !== newPasswordCopy) {
+    message.error({ content: "两次输入的密码不一致" });
+    return;
+  }
+  await changePassword(newPassword);
+  message.success("密码修改成功");
+  visible = false;
+}
 </script>
 
 <style scoped>