vueadmin/src/pages/auth/user/index.vue

<template>
	<div class="pages user-page">
		<div class="left-box">
			<div class="header">
				<a-input v-model:value="departmentKeyword" placeholder="搜索部门..." allow-clear @change="handleDeptSearch">
					<template #prefix>
						<search-outlined style="color: rgba(0, 0, 0, 0.45)" />
					</template>
				</a-input>
			</div>
			<div class="body">
				<a-tree v-model:selectedKeys="selectedDeptKeys" :tree-data="filteredDepartmentTree"
					:field-names="{ title: 'title', key: 'id', children: 'children' }" showLine @select="onDeptSelect">
					<template #icon="{ dataRef }">
						<folder-outlined v-if="dataRef.children" />
						<file-outlined v-else />
					</template>
				</a-tree>
			</div>
		</div>
		<div class="right-box">
			<div class="tool-bar">
				<div class="left-panel">
					<a-form layout="inline" :model="searchForm">
						<a-form-item>
							<a-input v-model:value="searchForm.username" placeholder="请输入用户名" allow-clear
								style="width: 160px" />
						</a-form-item>
						<a-form-item>
							<a-input v-model:value="searchForm.nickname" placeholder="请输入姓名" allow-clear
								style="width: 160px" />
						</a-form-item>
						<a-form-item>
							<a-space>
								<a-button type="primary" @click="handleSearch">
									<template #icon><search-outlined /></template>
								</a-button>
							<a-button @click="handleUserReset">
								<template #icon><redo-outlined /></template>
							</a-button>
							</a-space>
						</a-form-item>
					</a-form>
				</div>
				<div class="right-panel">
					<a-button type="primary" @click="handleAdd">
						<template #icon><plus-outlined /></template>
					</a-button>
					<a-button @click="handleExport">
						<template #icon><export-outlined /></template>
					</a-button>
				</div>
			</div>
			<div class="table-content">
			<scTable ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading"
				:pagination="pagination" :row-key="rowKey" @refresh="refreshTable"
				@paginationChange="handlePaginationChange">
					<template #avatar="{ record }">
						<a-avatar :src="record.avatar" :size="32">
							<template #icon><user-outlined /></template>
						</a-avatar>
					</template>
					<template #status="{ record }">
						<a-tag :color="record.status === 1 ? 'success' : 'error'">
							{{ record.status === 1 ? '正常' : '禁用' }}
						</a-tag>
					</template>
					<template #department_title="{ record }">
						{{ record.department?.title }}
					</template>
					<template #roles="{ record }">
						<a-tag v-for="role in record.roles" :key="role.id" color="blue">
							{{ role.title }}
						</a-tag>
					</template>
					<template #action="{ record }">
						<a-space>
							<a-button type="link" size="small" @click="handleView(record)">查看</a-button>
							<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
							<a-button type="link" size="small" @click="handleRole(record)">角色</a-button>
							<a-popconfirm title="确定删除该用户吗？" @confirm="handleDelete(record)">
								<a-button type="link" size="small" danger>删除</a-button>
							</a-popconfirm>
						</a-space>
					</template>
				</scTable>
			</div>
		</div>
	</div>

	<!-- 新增/编辑用户弹窗 -->
	<save-dialog v-if="dialog.save" ref="saveDialogRef" @success="handleSaveSuccess" @closed="dialog.save = false" />

	<!-- 角色设置弹窗 -->
	<role-dialog v-if="dialog.role" ref="roleDialogRef" @success="handleRoleSuccess" @closed="dialog.role = false" />
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import scTable from '@/components/scTable/index.vue'
import saveDialog from './save.vue'
import roleDialog from './role.vue'
import authApi from '@/api/auth'
import { useTable } from '@/hooks/useTable'

defineOptions({
	name: 'authUser'
})

// 使用useTable hooks
const {
	tableRef,
	searchForm,
	tableData,
	loading,
	pagination,
	handleSearch,
	handleReset,
	handlePaginationChange,
	refreshTable
} = useTable({
	api: authApi.users.list.get,
	searchForm: {
		username: '',
		nickname: '',
		department_id: null
	},
	columns: [],
	needPagination: true
})

// 对话框状态
const dialog = reactive({
	save: false,
	role: false
})

// 弹窗引用
const saveDialogRef = ref(null)
const roleDialogRef = ref(null)

// 部门树数据
const departmentTree = ref([])
const filteredDepartmentTree = ref([])
const selectedDeptKeys = ref([])
const departmentKeyword = ref('')

// 行key
const rowKey = 'id'

// 表格列配置
const columns = [
	{ title: '头像', dataIndex: 'avatar', key: 'avatar', width: 80, align: 'center', slot: 'avatar' },
	{ title: '用户名', dataIndex: 'username', key: 'username', width: 150 },
	{ title: '姓名', dataIndex: 'nickname', key: 'nickname', width: 150 },
	{ title: '部门', dataIndex: 'department_title', key: 'department_title', slot: 'department_title', width: 150 },
	{ title: '角色', dataIndex: 'roles', key: 'roles', width: 200, slot: 'roles' },
	{ title: '状态', dataIndex: 'status', key: 'status', width: 100, align: 'center', slot: 'status' },
	{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
	{ title: '操作', dataIndex: 'action', key: 'action', width: 200, align: 'center', slot: 'action', fixed: 'right' }
]

// 加载部门树
const loadDepartmentTree = async () => {
	try {
		const res = await authApi.department.list.get({ is_tree: 1 })
		if (res.code === 1) {
			departmentTree.value = res.data || []
			filteredDepartmentTree.value = res.data || []
		}
	} catch (error) {
		console.error('加载部门树失败:', error)
	}
}

// 部门搜索
const handleDeptSearch = (e) => {
	const keyword = e.target?.value || ''
	departmentKeyword.value = keyword
	if (!keyword) {
		filteredDepartmentTree.value = departmentTree.value
		return
	}

	// 递归过滤部门树
	const filterTree = (nodes) => {
		return nodes.reduce((acc, node) => {
			const isMatch = node.title && node.title.toLowerCase().includes(keyword.toLowerCase())
			const filteredChildren = node.children ? filterTree(node.children) : []

			if (isMatch || filteredChildren.length > 0) {
				acc.push({
					...node,
					children: filteredChildren.length > 0 ? filteredChildren : undefined
				})
			}
			return acc
		}, [])
	}

	filteredDepartmentTree.value = filterTree(departmentTree.value)
}

// 重置 - 覆盖useTable的handleReset以添加额外逻辑
const handleUserReset = () => {
	searchForm.username = ''
	searchForm.nickname = ''
	searchForm.department_id = null
	selectedDeptKeys.value = []
	departmentKeyword.value = ''
	filteredDepartmentTree.value = departmentTree.value
	handleReset()
}

// 部门选择事件
const onDeptSelect = (selectedKeys) => {
	if (selectedKeys && selectedKeys.length > 0) {
		searchForm.department_id = selectedKeys[0]
	} else {
		searchForm.department_id = null
	}
	handleSearch()
}

// 导出数据
const handleExport = () => {
	message.info('导出功能开发中...')
	// TODO: 实现导出功能
	// const params = { ...searchForm }
	// 调用导出API
}

// 新增用户
const handleAdd = () => {
	dialog.save = true
	setTimeout(() => {
		saveDialogRef.value?.open('add')
	}, 0)
}

// 查看用户
const handleView = (record) => {
	dialog.save = true
	setTimeout(() => {
		saveDialogRef.value?.open('show').setData(record)
	}, 0)
}

// 编辑用户
const handleEdit = (record) => {
	dialog.save = true
	setTimeout(() => {
		saveDialogRef.value?.open('edit').setData(record)
	}, 0)
}

// 设置角色
const handleRole = (record) => {
	dialog.role = true
	setTimeout(() => {
		roleDialogRef.value?.open().setData(record)
	}, 0)
}

// 删除用户
const handleDelete = async (record) => {
	try {
		const res = await authApi.users.delete.post({ id: record.id })
		if (res.code === 1) {
			message.success('删除成功')
			refreshTable()
		} else {
			message.error(res.message || '删除失败')
		}
	} catch (error) {
		console.error('删除用户失败:', error)
		message.error('删除失败')
	}
}

// 保存成功回调
const handleSaveSuccess = () => {
	refreshTable()
}

// 角色设置成功回调
const handleRoleSuccess = () => {
	refreshTable()
}

// 初始化
onMounted(() => {
	loadDepartmentTree()
})
</script>

<style scoped lang="scss">
.user-page {
	display: flex;
	flex-direction: row;
	height: 100%;
	padding: 0;

	.left-box {
		width: 260px;
		border-right: 1px solid #f0f0f0;
		display: flex;
		flex-direction: column;
		background: #fff;

		.header {
			padding: 12px 16px;
			font-weight: 500;
			border-bottom: 1px solid #f0f0f0;
			font-size: 14px;
			background: #fafafa;
		}

		.body {
			flex: 1;
			overflow-y: auto;
			padding: 16px;
		}
	}

	.right-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.table-content {
			flex: 1;
			overflow: hidden;
			background: #f5f5f5;
		}
	}
}
</style>