<!-- 用户管理页面 -->
|
<template>
|
<div class="user-page art-full-height">
|
<UserSearch
|
v-model="searchForm"
|
:dept-tree-options="deptTreeOptions"
|
:role-options="roleOptions"
|
@search="handleSearch"
|
@reset="handleReset"
|
/>
|
|
<ElCard class="art-table-card">
|
<ArtTableHeader v-model:columns="columnChecks" :loading="loading" @refresh="refreshData">
|
<template #left>
|
<ElSpace wrap>
|
<ElButton v-auth="'add'" @click="showDialog('add')" v-ripple>新增用户</ElButton>
|
<ElButton
|
v-auth="'delete'"
|
type="danger"
|
:disabled="selectedRows.length === 0"
|
@click="handleBatchDelete"
|
v-ripple
|
>
|
批量删除
|
</ElButton>
|
<ElButton v-auth="'query'" :loading="exportLoading" @click="handleExport" v-ripple
|
>导出</ElButton
|
>
|
</ElSpace>
|
</template>
|
</ArtTableHeader>
|
|
<ArtTable
|
:loading="loading"
|
:data="data"
|
:columns="columns"
|
:pagination="pagination"
|
@selection-change="handleSelectionChange"
|
@pagination:size-change="handleSizeChange"
|
@pagination:current-change="handleCurrentChange"
|
/>
|
|
<UserDialog
|
v-model:visible="dialogVisible"
|
:type="dialogType"
|
:user-data="currentUserData"
|
:role-options="roleOptions"
|
:dept-tree-options="deptTreeOptions"
|
@submit="handleDialogSubmit"
|
/>
|
|
<UserDetailDrawer
|
v-model:visible="detailDrawerVisible"
|
:loading="detailLoading"
|
:user-data="detailUserData"
|
/>
|
</ElCard>
|
</div>
|
</template>
|
|
<script setup>
|
import request from '@/utils/http'
|
import { guardRequestWithMessage } from '@/utils/sys/requestGuard'
|
import { useUserStore } from '@/store/modules/user'
|
import {
|
fetchDeleteUser,
|
fetchExportUserReport,
|
fetchGetDeptTree,
|
fetchGetRoleOptions,
|
fetchGetUserDetail,
|
fetchResetUserPassword,
|
fetchSaveUser,
|
fetchUpdateUser,
|
fetchUpdateUserStatus
|
} from '@/api/system-manage'
|
import { useTable } from '@/hooks/core/useTable'
|
import { useAuth } from '@/hooks/core/useAuth'
|
import ArtButtonTable from '@/components/core/forms/art-button-table/index.vue'
|
import { ElMessage, ElMessageBox, ElSwitch, ElTag } from 'element-plus'
|
import UserSearch from './modules/user-search.vue'
|
import UserDialog from './modules/user-dialog.vue'
|
import UserDetailDrawer from './modules/user-detail-drawer.vue'
|
import {
|
buildUserDialogModel,
|
buildUserPageQueryParams,
|
buildUserSavePayload,
|
buildUserSearchParams,
|
createUserSearchState,
|
getUserPaginationKey,
|
getUserStatusMeta,
|
mergeUserDetailRecord,
|
normalizeDeptTreeOptions,
|
normalizeRoleOptions,
|
normalizeUserListRow,
|
formatUserRoleNames
|
} from './userPage.helpers'
|
|
defineOptions({ name: 'User' })
|
|
const searchForm = ref(createUserSearchState())
|
const dialogType = ref('add')
|
const dialogVisible = ref(false)
|
const currentUserData = ref(buildUserDialogModel())
|
const detailDrawerVisible = ref(false)
|
const detailLoading = ref(false)
|
const detailUserData = ref({})
|
const selectedRows = ref([])
|
const roleOptions = ref([])
|
const deptTreeOptions = ref([])
|
const exportLoading = ref(false)
|
const RESET_PASSWORD = '123456'
|
const { hasAuth } = useAuth()
|
const userStore = useUserStore()
|
|
const fetchUserPage = (params = {}) => {
|
return request.post({
|
url: '/user/page',
|
params: buildUserPageQueryParams(params)
|
})
|
}
|
|
const {
|
columns,
|
columnChecks,
|
data,
|
loading,
|
pagination,
|
getData,
|
replaceSearchParams,
|
resetSearchParams,
|
handleSizeChange,
|
handleCurrentChange,
|
refreshData,
|
refreshCreate,
|
refreshUpdate,
|
refreshRemove
|
} = useTable({
|
core: {
|
apiFn: fetchUserPage,
|
apiParams: buildUserPageQueryParams(searchForm.value),
|
paginationKey: getUserPaginationKey(),
|
columnsFactory: () => [
|
{
|
type: 'selection',
|
width: 52,
|
fixed: 'left',
|
align: 'center'
|
},
|
{
|
prop: 'username',
|
label: '用户名',
|
minWidth: 140,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'nickname',
|
label: '昵称',
|
minWidth: 120,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'deptLabel',
|
label: '部门',
|
minWidth: 140,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'phone',
|
label: '手机号',
|
minWidth: 130
|
},
|
{
|
prop: 'email',
|
label: '邮箱',
|
minWidth: 180,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'roleNames',
|
label: '角色',
|
minWidth: 180,
|
showOverflowTooltip: true,
|
formatter: (row) => formatUserRoleNames(row.roles) || row.roleNames || '-'
|
},
|
{
|
prop: 'status',
|
label: '状态',
|
width: 180,
|
formatter: (row) => {
|
const statusMeta = getUserStatusMeta(row.statusBool ?? row.status)
|
if (!hasAuth('edit')) {
|
return h(ElTag, { type: statusMeta.type, effect: 'light' }, () => statusMeta.text)
|
}
|
return h('div', { class: 'flex items-center gap-2' }, [
|
h(ElSwitch, {
|
modelValue: row.statusBool ?? statusMeta.bool,
|
loading: row._statusLoading,
|
'onUpdate:modelValue': (value) => handleStatusChange(row, value)
|
}),
|
h(ElTag, { type: statusMeta.type, effect: 'light' }, () => statusMeta.text)
|
])
|
}
|
},
|
{
|
prop: 'updateTimeText',
|
label: '更新时间',
|
minWidth: 180,
|
sortable: true,
|
formatter: (row) => row.updateTimeText || '-'
|
},
|
{
|
prop: 'createTimeText',
|
label: '创建时间',
|
minWidth: 180,
|
sortable: true,
|
formatter: (row) => row.createTimeText || '-'
|
},
|
{
|
prop: 'operation',
|
label: '操作',
|
width: 220,
|
fixed: 'right',
|
formatter: (row) => {
|
const buttons = []
|
|
if (hasAuth('query')) {
|
buttons.push(
|
h(ArtButtonTable, {
|
type: 'view',
|
onClick: () => openDetail(row)
|
})
|
)
|
}
|
|
if (hasAuth('edit')) {
|
buttons.push(
|
h(ArtButtonTable, {
|
type: 'edit',
|
onClick: () => openEditDialog(row)
|
}),
|
h(ArtButtonTable, {
|
icon: 'ri:key-2-line',
|
iconClass: 'bg-warning/12 text-warning',
|
onClick: () => handleResetPassword(row)
|
})
|
)
|
}
|
|
if (hasAuth('delete')) {
|
buttons.push(
|
h(ArtButtonTable, {
|
type: 'delete',
|
onClick: () => handleDelete(row)
|
})
|
)
|
}
|
|
return h('div', buttons)
|
}
|
}
|
]
|
},
|
transform: {
|
dataTransformer: (records) => {
|
if (!Array.isArray(records)) {
|
return []
|
}
|
return records.map((item) => normalizeUserListRow(item))
|
}
|
}
|
})
|
|
const loadLookups = async () => {
|
try {
|
const lookupPayload = await guardRequestWithMessage(
|
Promise.all([fetchGetRoleOptions({}), fetchGetDeptTree({})]),
|
null,
|
{
|
timeoutMessage: '用户页字典加载超时，已停止等待'
|
}
|
)
|
if (!lookupPayload) {
|
roleOptions.value = []
|
deptTreeOptions.value = []
|
return
|
}
|
const [roles, depts] = lookupPayload
|
roleOptions.value = normalizeRoleOptions(roles)
|
deptTreeOptions.value = normalizeDeptTreeOptions(depts)
|
} catch (error) {
|
console.error('加载用户页字典失败', error)
|
}
|
}
|
|
onMounted(() => {
|
loadLookups()
|
})
|
|
const handleSearch = (params) => {
|
replaceSearchParams(buildUserSearchParams(params))
|
getData()
|
}
|
|
const handleSelectionChange = (rows) => {
|
selectedRows.value = Array.isArray(rows) ? rows : []
|
}
|
|
const handleReset = () => {
|
Object.assign(searchForm.value, createUserSearchState())
|
resetSearchParams()
|
}
|
|
const showDialog = (type, row) => {
|
dialogType.value = type
|
currentUserData.value = type === 'edit' ? buildUserDialogModel(row) : buildUserDialogModel()
|
dialogVisible.value = true
|
}
|
|
const loadUserDetail = async (id) => {
|
detailLoading.value = true
|
try {
|
return await fetchGetUserDetail(id)
|
} finally {
|
detailLoading.value = false
|
}
|
}
|
|
const openEditDialog = async (row) => {
|
try {
|
const detail = await loadUserDetail(row.id)
|
currentUserData.value = buildUserDialogModel(mergeUserDetailRecord(detail, row))
|
dialogType.value = 'edit'
|
dialogVisible.value = true
|
} catch (error) {
|
ElMessage.error(error?.message || '获取用户详情失败')
|
}
|
}
|
|
const openDetail = async (row) => {
|
detailDrawerVisible.value = true
|
try {
|
detailUserData.value = mergeUserDetailRecord(await loadUserDetail(row.id), row)
|
} catch (error) {
|
detailDrawerVisible.value = false
|
detailUserData.value = {}
|
ElMessage.error(error?.message || '获取用户详情失败')
|
}
|
}
|
|
const handleDialogSubmit = async (formData) => {
|
const payload = buildUserSavePayload(formData)
|
try {
|
if (dialogType.value === 'edit') {
|
await fetchUpdateUser(payload)
|
ElMessage.success('修改成功')
|
dialogVisible.value = false
|
currentUserData.value = buildUserDialogModel()
|
await refreshUpdate()
|
return
|
}
|
await fetchSaveUser(payload)
|
ElMessage.success('新增成功')
|
dialogVisible.value = false
|
currentUserData.value = buildUserDialogModel()
|
await refreshCreate()
|
} catch (error) {
|
ElMessage.error(error?.message || '提交失败')
|
}
|
}
|
|
const handleDelete = async (row) => {
|
try {
|
await ElMessageBox.confirm(
|
`确定要删除用户「${row.username || row.nickname || row.id}」吗？`,
|
'删除确认',
|
{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}
|
)
|
await fetchDeleteUser(row.id)
|
ElMessage.success('删除成功')
|
await refreshRemove()
|
} catch (error) {
|
if (error !== 'cancel') {
|
ElMessage.error(error?.message || '删除失败')
|
}
|
}
|
}
|
|
const handleBatchDelete = async () => {
|
if (!selectedRows.value.length) return
|
const ids = selectedRows.value
|
.map((item) => item?.id)
|
.filter((id) => id !== void 0 && id !== null)
|
|
if (!ids.length) return
|
|
try {
|
await ElMessageBox.confirm(`确定要批量删除选中的 ${ids.length} 个用户吗？`, '批量删除确认', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
await fetchDeleteUser(ids.join(','))
|
ElMessage.success('批量删除成功')
|
selectedRows.value = []
|
await refreshRemove()
|
} catch (error) {
|
if (error !== 'cancel') {
|
ElMessage.error(error?.message || '批量删除失败')
|
}
|
}
|
}
|
|
const handleResetPassword = async (row) => {
|
try {
|
await ElMessageBox.confirm(
|
`确定将用户「${row.username || row.nickname || row.id}」的密码重置为 ${RESET_PASSWORD} 吗？`,
|
'重置密码',
|
{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}
|
)
|
await fetchResetUserPassword({
|
id: row.id,
|
password: RESET_PASSWORD
|
})
|
ElMessage.success(`密码已重置为 ${RESET_PASSWORD}`)
|
await refreshUpdate()
|
} catch (error) {
|
if (error !== 'cancel') {
|
ElMessage.error(error?.message || '重置密码失败')
|
}
|
}
|
}
|
|
const handleStatusChange = async (row, checked) => {
|
const previousStatus = row.status
|
const previousStatusBool = row.statusBool
|
const nextStatus = checked ? 1 : 0
|
row._statusLoading = true
|
row.status = nextStatus
|
row.statusBool = checked
|
|
try {
|
await fetchUpdateUserStatus({
|
id: row.id,
|
status: nextStatus
|
})
|
ElMessage.success('状态已更新')
|
await refreshUpdate()
|
} catch (error) {
|
row.status = previousStatus
|
row.statusBool = previousStatusBool
|
ElMessage.error(error?.message || '状态更新失败')
|
} finally {
|
row._statusLoading = false
|
}
|
}
|
|
const handleExport = async () => {
|
exportLoading.value = true
|
try {
|
const response = await guardRequestWithMessage(
|
fetchExportUserReport(buildUserSearchParams(searchForm.value), {
|
headers: {
|
Authorization: userStore.accessToken || ''
|
}
|
}),
|
null,
|
{
|
timeoutMessage: '用户导出超时，已停止等待'
|
}
|
)
|
if (!response) {
|
return
|
}
|
if (!response.ok) {
|
throw new Error(`导出失败，状态码：${response.status}`)
|
}
|
const blob = await response.blob()
|
const downloadUrl = window.URL.createObjectURL(blob)
|
const link = document.createElement('a')
|
link.href = downloadUrl
|
link.download = 'user.xlsx'
|
document.body.appendChild(link)
|
link.click()
|
link.remove()
|
window.URL.revokeObjectURL(downloadUrl)
|
ElMessage.success('导出成功')
|
} catch (error) {
|
ElMessage.error(error?.message || '导出失败')
|
} finally {
|
exportLoading.value = false
|
}
|
}
|
</script>
|
