feat: 修改密码

src/api/auth.ts

+import { BaseRespData } from '@/types/api'
 import axios from './axios'
 import axios from './axios'
 import { LoginReq, LoginResp } from '@/types/api/auth'
 import { LoginReq, LoginResp } from '@/types/api/auth'
 
 
 export function loginApi(data: LoginReq) {
 export function loginApi(data: LoginReq) {
   return axios.post<never, LoginResp>('/factory/login', data)
   return axios.post<never, LoginResp>('/factory/login', data)
 }
 }
+
+// 修改密码
+export function changePasswordApi(data: {
+  oldPwd: string
+  newPwd: string
+}) {
+  return axios.post<never, BaseRespData<never>>(
+    'factory/factoryUser/updatePassword',
+    data,
+  )
+}

src/components/navMenu.vue

@@ -46,12 +46,58 @@
         </span>
         </span>
         <template #dropdown>
         <template #dropdown>
           <el-dropdown-menu>
           <el-dropdown-menu>
+            <el-dropdown-item @click="resetPassword">修改密码</el-dropdown-item>
             <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
             <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
           </el-dropdown-menu>
           </el-dropdown-menu>
         </template>
         </template>
       </el-dropdown>
       </el-dropdown>
     </div>
     </div>
   </div>
   </div>
+  <el-dialog
+    v-model="dialogVisible"
+    title="修改密码"
+    width="30%"
+    :close-on-click-modal="false"
+    @opened="onPasswordDialogOpened"
+  >
+    <ElForm
+      ref="passwordFormRef"
+      :model="passwordForm"
+      :rules="rules"
+      label-width="80px"
+    >
+      <ElFormItem label="原密码" prop="oldPwd">
+        <ElInput
+          v-model="passwordForm.oldPwd"
+          type="password"
+          clearable
+          placeholder="请输入原密码"
+        />
+      </ElFormItem>
+      <ElFormItem label="新密码" prop="newPwd">
+        <ElInput
+          v-model="passwordForm.newPwd"
+          type="password"
+          clearable
+          placeholder="请输入新密码"
+        />
+      </ElFormItem>
+      <ElFormItem label="确认密码" prop="confirmPwd">
+        <ElInput
+          v-model="passwordForm.confirmPwd"
+          type="password"
+          clearable
+          placeholder="请再次输入密码"
+        />
+      </ElFormItem>
+    </ElForm>
+    <template #footer>
+      <span class="dialog-footer">
+        <ElButton @click="dialogVisible = false">取消</ElButton>
+        <ElButton type="primary" @click="submitForm">确定</ElButton>
+      </span>
+    </template>
+  </el-dialog>
 </template>
 </template>
 <script setup lang="ts">
 <script setup lang="ts">
 import { User, ArrowDown } from '@element-plus/icons-vue'
 import { User, ArrowDown } from '@element-plus/icons-vue'
@@ -59,17 +105,88 @@ import { ref, reactive } from 'vue'
 import { useRoute } from 'vue-router'
 import { useRoute } from 'vue-router'
 import Menu from '@/router/menu'
 import Menu from '@/router/menu'
 import userUserStore from '@/store/user'
 import userUserStore from '@/store/user'
+import type { FormRules } from 'element-plus'
+import { useValue } from '@/utils/hooks/useValue'
+import { showError } from '@/utils/ui'
+import { changePasswordApi } from '@/api/auth'
+interface PasswordForm {
+  oldPwd: string
+  newPwd: string
+  confirmPwd?: string
+}
 const route = useRoute()
 const route = useRoute()
 const defaultActive = ref(route.path)
 const defaultActive = ref(route.path)
 const menuList = reactive(Menu)
 const menuList = reactive(Menu)
 
 
 const userStore = userUserStore()
 const userStore = userUserStore()
 const userInfo = userStore.user
 const userInfo = userStore.user
+const dialogVisible = ref(false)
+// 密码form
+const [passwordForm, resetPasswordForm] = useValue<PasswordForm>({} as PasswordForm)
+const passwordFormRef = ref()
+const rules = reactive<FormRules<PasswordForm>>({
+  oldPwd: [
+    {
+      required: true,
+      message: '请输入原密码',
+    },
+  ],
+  newPwd: [
+    {
+      required: true,
+      message: '请输入新密码',
+    },
+  ],
+  confirmPwd: [
+    {
+      required: true,
+      message: '请再次输入密码',
+    },
+    {
+      validator: (rule, value, callback) => {
+        if (value !== passwordForm.value.newPwd) {
+          callback(new Error('两次密码不一致'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur',
+    },
+  ],
+})
 
 
 const logout = () => {
 const logout = () => {
   userStore.logout()
   userStore.logout()
   window.location.reload()
   window.location.reload()
 }
 }
+const resetPassword = () => {
+  dialogVisible.value = true
+  resetPasswordForm()
+}
+const onPasswordDialogOpened = () => {
+  passwordFormRef.value.clearValidate()
+}
+
+const submitForm = async () => {
+  try {
+    await passwordFormRef.value.validate()
+  } catch {
+    return
+  }
+  try {
+     const res = await changePasswordApi(passwordForm.value)
+     ElMessage({
+       message: res.message,
+       type: 'success',
+       offset: window.innerHeight / 2,
+     })
+     dialogVisible.value = false
+     userStore.logout()
+     window.location.reload()
+  } catch (e) {
+    showError(e)
+  }
+}
 </script>
 </script>
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .nav-menu {
 .nav-menu {