From 6a37c8d9022734489d862fb57f77cebe627cd838 Mon Sep 17 00:00:00 2001
From: comma <coward@mrx.ltd>
Date: Mon, 20 May 2024 20:09:25 +0800
Subject: [PATCH] =?UTF-8?q?:art:=E4=B8=80=E4=BA=9B=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user.ts                               |  5 +
 .../lay-navbar/component/change-password.vue  | 95 +++++++++++++++++++
 src/layout/components/lay-navbar/index.vue    | 49 +++++++++-
 3 files changed, 147 insertions(+), 2 deletions(-)
 create mode 100644 src/layout/components/lay-navbar/component/change-password.vue

diff --git a/src/api/user.ts b/src/api/user.ts
index cb3fafa..0f54116 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -25,3 +25,8 @@ export const editUser = (data?: object) => {
 export const deleteUser = (userId: string) => {
   return http.request("delete", baseUri("/user/delete/" + userId));
 };
+
+// 修改密码
+export const changePassword = (data?: object) => {
+  return http.request("post", baseUri("/user/change-password"), { data });
+};
diff --git a/src/layout/components/lay-navbar/component/change-password.vue b/src/layout/components/lay-navbar/component/change-password.vue
new file mode 100644
index 0000000..d88f7ac
--- /dev/null
+++ b/src/layout/components/lay-navbar/component/change-password.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { FormInstance } from "element-plus";
+
+// 声明 props 类型
+export interface ChangePwdFormProps {
+  formInline: {
+    id: string;
+    originPassword: string;
+    newPassword: string;
+    confirmPassword: string;
+  };
+}
+
+// 声明 props 默认值
+// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
+const props = withDefaults(defineProps<ChangePwdFormProps>(), {
+  formInline: () => ({
+    id: "",
+    originPassword: "",
+    newPassword: "",
+    confirmPassword: ""
+  })
+});
+
+// vue 规定所有的 prop 都遵循着单向绑定原则，直接修改 prop 时，Vue 会抛出警告。此处的写法仅仅是为了消除警告。
+// 因为对一个 reactive 对象执行 ref，返回 Ref 对象的 value 值仍为传入的 reactive 对象，
+// 即 newFormInline === props.formInline 为 true，所以此处代码的实际效果，仍是直接修改 props.formInline。
+// 但该写法仅适用于 props.formInline 是一个对象类型的情况，原始类型需抛出事件
+// 推荐阅读：https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
+const changePwdForm = ref(props.formInline);
+const changePwdFormRef = ref<FormInstance>();
+
+function getUserChangePwdFormRef() {
+  return changePwdFormRef.value;
+}
+
+// 密码对比校验
+const passConfirm = (rule: any, value: any, callback: any) => {
+  if (value === "") {
+    callback(new Error("确认密码不能为空"));
+  } else if (value !== changePwdForm.value.newPassword) {
+    callback(new Error("两次密码不一致"));
+  } else {
+    callback();
+  }
+};
+
+defineExpose({ getUserChangePwdFormRef });
+</script>
+
+<template>
+  <el-form ref="changePwdFormRef" :model="changePwdForm" label-width="20%">
+    <el-form-item
+      prop="originPassword"
+      label="原密码"
+      :rules="[{ required: true, message: '原密码不能为空', trigger: 'blur' }]"
+    >
+      <el-input
+        v-model="changePwdForm.originPassword"
+        show-password
+        class="!w-[220px]"
+        placeholder="原密码"
+      />
+    </el-form-item>
+    <el-form-item
+      prop="newPassword"
+      label="新密码"
+      :rules="[
+        { required: true, message: '新密码不能为空', trigger: 'blur' },
+        { min: 6, message: '密码最低6位', trigger: 'blur' },
+        { max: 32, message: '密码最长32位', trigger: 'blur' }
+      ]"
+    >
+      <el-input
+        v-model="changePwdForm.newPassword"
+        show-password
+        class="!w-[220px]"
+        placeholder="新密码"
+      />
+    </el-form-item>
+    <el-form-item
+      prop="confirmPassword"
+      label="确认密码"
+      :rules="[{ validator: passConfirm, trigger: 'blur' }]"
+    >
+      <el-input
+        v-model="changePwdForm.confirmPassword"
+        show-password
+        class="!w-[220px]"
+        placeholder="确认密码"
+      />
+    </el-form-item>
+  </el-form>
+</template>
diff --git a/src/layout/components/lay-navbar/index.vue b/src/layout/components/lay-navbar/index.vue
index e9bfc7f..3bf2a9b 100644
--- a/src/layout/components/lay-navbar/index.vue
+++ b/src/layout/components/lay-navbar/index.vue
@@ -6,15 +6,22 @@ import LayNavMix from "../lay-sidebar/NavMix.vue";
 import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
 import LaySidebarBreadCrumb from "../lay-sidebar/components/SidebarBreadCrumb.vue";
 import LaySidebarTopCollapse from "../lay-sidebar/components/SidebarTopCollapse.vue";
-
 import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
 import Setting from "@iconify-icons/ri/settings-3-line";
 import { h, ref } from "vue";
 import { addDialog } from "@/components/ReDialog/index";
-import { editUser as editUserApi, getUser, userList } from "@/api/user";
+import {
+  changePassword,
+  editUser as editUserApi,
+  getUser,
+  userList
+} from "@/api/user";
 import { storageLocal } from "@pureadmin/utils";
 import { setUser, userKey } from "@/utils/auth";
 import forms, { type FormProps } from "./component/user.vue";
+import changePwdForms, {
+  type ChangePwdFormProps
+} from "./component/change-password.vue";
 import { useRouter } from "vue-router";
 import useGetGlobalProperties from "@/hooks/useGetGlobalProperties";
 
@@ -34,6 +41,7 @@ const { $bus } = useGetGlobalProperties();
 
 const router = useRouter();
 const userEditFormRef = ref();
+const changePwdFormRef = ref();
 // eslint-disable-next-line vue/valid-define-emits
 const emit = defineEmits();
 
@@ -85,6 +93,34 @@ const openUserInfoDialog = () => {
     }
   });
 };
+
+const openChangePasswordDialog = () => {
+  const loginUser = storageLocal().getItem(userKey);
+  addDialog({
+    width: "20%",
+    title: loginUser.name,
+    contentRenderer: () => h(changePwdForms, { ref: changePwdFormRef }),
+    props: {
+      formInline: {
+        id: loginUser.id,
+        originPassword: "",
+        newPassword: "",
+        confirmPassword: ""
+      }
+    },
+    beforeSure: (done, { options }) => {
+      const FormRef = changePwdFormRef.value.getUserChangePwdFormRef();
+      FormRef.validate(valid => {
+        if (!valid) return;
+        changePassword(options.props.formInline).then(res => {
+          if (res.code === 200) {
+            done();
+          }
+        });
+      });
+    }
+  });
+};
 </script>
 
 <template>
@@ -126,6 +162,15 @@ const openUserInfoDialog = () => {
               个人信息
             </el-dropdown-item>
           </el-dropdown-menu>
+          <el-dropdown-menu class="logout">
+            <el-dropdown-item @click="openChangePasswordDialog">
+              <IconifyIconOnline
+                icon="ic:baseline-lock-person"
+                style="margin: 5px"
+              />
+              修改密码
+            </el-dropdown-item>
+          </el-dropdown-menu>
           <el-dropdown-menu class="logout">
             <el-dropdown-item @click="logout">
               <IconifyIconOffline