mirror of
https://github.com/chansee97/nova-admin.git
synced 2026-07-07 18:11:09 +08:00
132 lines
3.2 KiB
Vue
132 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, ref, watch } from 'vue'
|
|
import { useMessage } from 'naive-ui'
|
|
import { useAuthStore } from '@/store'
|
|
import { updateUser } from '@/api/system/user'
|
|
|
|
const message = useMessage()
|
|
const authStore = useAuthStore()
|
|
const { userInfo } = authStore
|
|
|
|
// 加载状态
|
|
const loading = ref(false)
|
|
|
|
// 表单数据
|
|
const formData = reactive({
|
|
nickName: '',
|
|
email: '',
|
|
phone: '',
|
|
gender: 'unknown' as 'male' | 'female',
|
|
})
|
|
|
|
// 初始化表单数据
|
|
function initFormData() {
|
|
if (userInfo) {
|
|
formData.nickName = userInfo.nickName || ''
|
|
formData.email = userInfo.email || ''
|
|
formData.phone = userInfo.phone || ''
|
|
formData.gender = userInfo.gender
|
|
}
|
|
}
|
|
|
|
// 监听用户信息变化，自动更新表单
|
|
watch(() => userInfo, initFormData, { immediate: true })
|
|
|
|
// 更新个人信息
|
|
async function updateUserInfo() {
|
|
if (!userInfo?.id) {
|
|
message.error('用户信息不完整')
|
|
return
|
|
}
|
|
|
|
loading.value = true
|
|
try {
|
|
await updateUser(userInfo.id, formData)
|
|
|
|
// 刷新个人信息
|
|
await authStore.updataUserInfo()
|
|
message.success('个人信息更新成功')
|
|
}
|
|
catch (error) {
|
|
console.error('更新用户信息失败:', error)
|
|
}
|
|
finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<n-form
|
|
:model="formData"
|
|
label-placement="left"
|
|
label-width="80px"
|
|
>
|
|
<n-grid :cols="1">
|
|
<n-grid-item>
|
|
<n-form-item label="用户名">
|
|
{{ userInfo.username }}
|
|
</n-form-item>
|
|
</n-grid-item>
|
|
<n-grid-item>
|
|
<n-form-item label="昵称">
|
|
<n-input v-model:value="formData.nickName" placeholder="请输入昵称" />
|
|
</n-form-item>
|
|
</n-grid-item>
|
|
<n-grid-item>
|
|
<n-form-item label="性别">
|
|
<n-select
|
|
v-model:value="formData.gender"
|
|
:options="[
|
|
{ label: '男', value: 'male' },
|
|
{ label: '女', value: 'female' },
|
|
]"
|
|
/>
|
|
</n-form-item>
|
|
</n-grid-item>
|
|
<n-grid-item>
|
|
<n-form-item label="邮箱">
|
|
<n-input v-model:value="formData.email" placeholder="请输入邮箱" />
|
|
</n-form-item>
|
|
</n-grid-item>
|
|
<n-grid-item>
|
|
<n-form-item label="手机号">
|
|
<n-input v-model:value="formData.phone" placeholder="请输入手机号" />
|
|
</n-form-item>
|
|
</n-grid-item>
|
|
<n-grid-item>
|
|
<n-form-item label="所属部门">
|
|
{{ userInfo?.dept?.deptName || '-' }}
|
|
</n-form-item>
|
|
</n-grid-item>
|
|
</n-grid>
|
|
|
|
<n-form-item label="拥有角色">
|
|
<n-space>
|
|
<n-tag
|
|
v-for="(role, index) in userInfo?.roles"
|
|
:key="index"
|
|
type="primary"
|
|
size="medium"
|
|
>
|
|
{{ role?.roleName || role?.name || `角色${index + 1}` }}
|
|
</n-tag>
|
|
<n-tag v-if="!userInfo?.roles || userInfo?.roles.length === 0" type="default" size="medium">
|
|
暂无角色
|
|
</n-tag>
|
|
</n-space>
|
|
</n-form-item>
|
|
|
|
<!-- 更新按钮 -->
|
|
<n-form-item label=" ">
|
|
<n-button
|
|
type="primary"
|
|
:loading="loading"
|
|
@click="updateUserInfo"
|
|
>
|
|
更新个人信息
|
|
</n-button>
|
|
</n-form-item>
|
|
</n-form>
|
|
</template>
|