添加修改密码的功能

.env.dev

@@ -13,6 +13,7 @@ VITE_ROUTER_HISTORY=hash
 
 # api
 VITE_API_BASIC=https://zh.shibeitong.com
+# VITE_API_BASIC=http://10.10.1.6:8070
 VITE_API_HTTP=/api/v1/
 # storage
 VITE_STORAGE_NAMESPACE = gin-admin_local_

src/apis/modules/user.js

@@ -8,6 +8,6 @@ export const getUserDetail = () => request.basic.get('/api/v1/current/user')
 export const updateUser = (_, params) => request.basic.put(`/api/v1/current/user`, params)
 
 // 更新用户密码
-export const updatePassword = (_, params) => request.basic.put(`/api/v1/current/password`, params)
+export const updatePassword = (params) => request.basic.put(`/api/v1/current/password`, params)
 // 用户权限菜单
 export const getUserMenu = () => request.basic.get('/api/v1/current/menus')

src/layouts/components/BasicHeader.vue

@@ -1,18 +1,11 @@
 <template>
-    <a-layout-header
+    <a-layout-header class="basic-header" :class="cpClassNames" :style="cpStyles">
-        class="basic-header"
-        :class="cpClassNames"
-        :style="cpStyles">
         <!-- 左侧 -->
-        <div
+        <div v-if="cpShowLeftSlot" class="basic-header__left">
-            v-if="cpShowLeftSlot"
-            class="basic-header__left">
             <slot name="left"></slot>
         </div>
         <!-- 中间 -->
-        <div
+        <div v-if="cpShowDefaultSlot" class="basic-header__center">
-            v-if="cpShowDefaultSlot"
-            class="basic-header__center">
             <slot></slot>
         </div>
         <!-- 右侧 -->
@@ -28,10 +21,7 @@
                     <a-spin />
                     <template #overlay>
                         <a-menu v-model:selectedKeys="current">
-                            <a-menu-item
+                            <a-menu-item v-for="(item, key) in langData" :key="key" @click="handleLang(key)">
-                                v-for="(item, key) in langData"
-                                :key="key"
-                                @click="handleLang(key)">
                                 {{ item.icon }} {{ item.label }}
                             </a-menu-item>
                         </a-menu>
@@ -40,9 +30,7 @@
 
                 <a-dropdown :trigger="['click']">
                     <action-button :style="{ height: '44px' }">
-                        <a-avatar
+                        <a-avatar class="mr-8-1 display-inline-flex justify-content-center" :size="24"
-                            class="mr-8-1 display-inline-flex justify-content-center"
-                            :size="24"
                             :src="userInfo?.avatar">
                         </a-avatar>
                         <span>{{ userInfo?.name }}</span>
@@ -50,15 +38,11 @@
                     <a-spin />
                     <template #overlay>
                         <a-menu>
-                            <a-menu-item
+                            <a-menu-item key="edit" @click="handleOpen">
-                                key="edit"
-                                @click="handleOpen">
                                 <edit-outlined />
-                                {{ $t('component.RightContent.profile') }}
+                                修改密码
                             </a-menu-item>
-                            <a-menu-item
+                            <a-menu-item key="logout" @click="handleLogout">
-                                key="logout"
-                                @click="handleLogout">
                                 <login-outlined></login-outlined>
                                 {{ $t('component.RightContent.logout') }}
                             </a-menu-item>
@@ -68,10 +52,36 @@
             </a-space>
         </div>
     </a-layout-header>
+    <a-modal v-model:open="open" title="修改密码" @ok="handleOk">
+        <a-form ref="formRef" :model="pwdFormData" :rules="pwdFormRules">
+            <a-card class="mb-8-2">
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item :label="'原密码'" name="oldPwd">
+                            <a-input-password :placeholder="'请输入原密码'"
+                                v-model:value="pwdFormData.oldPwd"></a-input-password>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="24">
+                        <a-form-item :label="'新密码'" name="newPwd">
+                            <a-input-password :placeholder="'请输入新密码'"
+                                v-model:value="pwdFormData.newPwd"></a-input-password>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="24">
+                        <a-form-item :label="'确认密码'" name="confirmPwd">
+                            <a-input-password :placeholder="'确认密码'"
+                                v-model:value="pwdFormData.confirmPwd"></a-input-password>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-card>
+        </a-form>
+    </a-modal>
 </template>
 
 <script setup>
-import { Modal } from 'ant-design-vue'
+import { message, Modal } from 'ant-design-vue'
 import { storeToRefs } from 'pinia'
 import { computed, useSlots, ref } from 'vue'
 import { useRouter } from 'vue-router'
@@ -82,7 +92,10 @@ import { theme as antTheme } from 'ant-design-vue'
 import { config as conf } from '@/config'
 import { useI18n } from 'vue-i18n'
 import storage from '@/utils/storage'
+import apis from '@/apis'
 
+import { useForm, useModal, useSpining } from '@/hooks'
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
 const { locale, t } = useI18n()
 defineOptions({
     name: 'BasicHeader',
@@ -99,7 +112,7 @@ const props = defineProps({
 const emit = defineEmits(['config'])
 
 const slots = useSlots(['default', 'left', 'right'])
-
+const formRef = ref(null)
 const userStore = useUserStore()
 const appStore = useAppStore()
 
@@ -107,7 +120,13 @@ const router = useRouter()
 const { config } = storeToRefs(appStore)
 const { userInfo } = storeToRefs(userStore)
 const { token } = antTheme.useToken()
-
+const pwdFormData = ref({})
+const pwdFormRules = {
+    oldPwd: [{ required: true, message: '请输原密码' }],
+    newPwd: [{ required: true, message: '请输入新密码' }],
+    confirmPwd: [{ required: true, message: '请确认新密码' }],
+}
+const open = ref(false)
 const cpClassNames = computed(() => ({
     [`basic-header--${props.theme}`]: true,
 }))
@@ -164,9 +183,7 @@ function handleLogout() {
  */
 
 function handleOpen() {
-    router.push({
+    open.value = true
-        name: 'setting',
-    })
 }
 
 /**
@@ -185,6 +202,35 @@ function handleLang(lang) {
 function handleConfig() {
     emit('config')
 }
+function handleOk() {
+    formRef.value.validateFields().then(async (values) => {
+        console.log(pwdFormData.value)
+        if (pwdFormData.value.newPwd !== pwdFormData.value.confirmPwd) {
+            return message.error('两次密码不一致')
+        }
+        try {
+            console.log(pwdFormData.value)
+            showLoading()
+            const params = {
+                new_password: pwdFormData.value.newPwd,
+                old_password: pwdFormData.value.oldPwd
+            }
+            const result = await apis.user.updatePassword(params)
+            if (conf('http.code.success') === result?.success) {
+                hideModal()
+                hideLoading()
+                userStore.logout().then(() => {
+                    router.push({
+                        name: 'login',
+                    })
+                })
+            }
+        } catch (error) {
+            message.error({ content: error.message })
+            hideLoading()
+        }
+    })
+}
 </script>
 
 <style lang="less" scoped>

src/router/routes/admin.js

@@ -1,4 +1,3 @@
-import { active } from "sortablejs";
 
 export default [
     {

src/router/routes/index.js

@@ -4,7 +4,7 @@ import list from './list'
 import profile from './profile'
 import result from './result'
 import exception from './exception'
-// import admin from './admin'
+import admin from './admin'
 import system from './system'
 import link from './link'
 import iframe from './iframe'
@@ -27,7 +27,7 @@ export default [
     ...profile,
     ...result,
     ...exception,
-    // ...admin,
+    ...admin,
     ...system,
     ...link,
     ...iframe,

src/views/admin/setting/index.vue

@@ -0,0 +1,14 @@
+<template>
+    <a-row :gutter="8" :wrap="false">
+          <a-col flex="auto">
+            <a-card type="flex">
+                
+            </a-card>
+            </a-col>
+        </a-row>
+</template>
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+
+</script>

src/views/system/user/index.vue

@@ -226,7 +226,6 @@ function handleResetSearch() {
  * 编辑完成
  */
 async function onOk() {
-    message.success(t('component.message.success.delete'))
     await getPageList()
 }
 </script>