优化更新

src/pages/auth/user/index.vue

@@ -35,9 +35,9 @@
 								<a-button type="primary" @click="handleSearch">
 									<template #icon><search-outlined /></template>
 								</a-button>
-								<a-button @click="handleReset">
-									<template #icon><redo-outlined /></template>
-								</a-button>
+							<a-button @click="handleUserReset">
+								<template #icon><redo-outlined /></template>
+							</a-button>
 							</a-space>
 						</a-form-item>
 					</a-form>
@@ -52,9 +52,9 @@
 				</div>
 			</div>
 			<div class="table-content">
-				<scTable ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading"
-					:pagination="pagination" :row-key="rowKey" @refresh="loadData"
-					@paginationChange="handlePaginationChange">
+			<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>
@@ -102,13 +102,33 @@ 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'
 })
 
-// 表格引用
-const tableRef = ref(null)
+// 使用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({
@@ -126,37 +146,9 @@ const filteredDepartmentTree = ref([])
 const selectedDeptKeys = ref([])
 const departmentKeyword = ref('')
 
-// 搜索表单
-const searchForm = reactive({
-	username: '',
-	nickname: '',
-	department_id: null
-})
-
-// 表格数据
-const tableData = ref([])
-const loading = ref(false)
-
-// 分页配置
-const pagination = reactive({
-	current: 1,
-	pageSize: 20,
-	total: 0,
-	showSizeChanger: true,
-	showTotal: (total) => `共 ${total} 条`,
-	pageSizeOptions: ['20', '50', '100', '200']
-})
-
 // 行key
 const rowKey = 'id'
 
-// 分页变化处理
-const handlePaginationChange = ({ page, pageSize }) => {
-	pagination.current = page
-	pagination.pageSize = pageSize
-	loadData()
-}
-
 // 表格列配置
 const columns = [
 	{ title: '头像', dataIndex: 'avatar', key: 'avatar', width: 80, align: 'center', slot: 'avatar' },
@@ -210,34 +202,15 @@ const handleDeptSearch = (e) => {
 	filteredDepartmentTree.value = filterTree(departmentTree.value)
 }
 
-// 加载用户列表数据
-const loadData = async () => {
-	loading.value = true
-	try {
-		const params = {
-			page: pagination.current,
-			limit: pagination.pageSize,
-			...searchForm
-		}
-		const res = await authApi.users.list.get(params)
-		if (res.code === 1) {
-			tableData.value = res.data?.data || []
-			pagination.total = res.data?.total || 0
-		} else {
-			message.error(res.message || '加载数据失败')
-		}
-	} catch (error) {
-		console.error('加载用户列表失败:', error)
-		message.error('加载数据失败')
-	} finally {
-		loading.value = false
-	}
-}
-
-// 表格变化处理（排序、筛选）
-const handleTableChange = (pagination, filters, sorter) => {
-	// 如果需要处理排序或筛选，可以在这里添加逻辑
-	console.log('表格变化:', { pagination, filters, sorter })
+// 重置 - 覆盖useTable的handleReset以添加额外逻辑
+const handleUserReset = () => {
+	searchForm.username = ''
+	searchForm.nickname = ''
+	searchForm.department_id = null
+	selectedDeptKeys.value = []
+	departmentKeyword.value = ''
+	filteredDepartmentTree.value = departmentTree.value
+	handleReset()
 }
 
 // 部门选择事件
@@ -247,31 +220,7 @@ const onDeptSelect = (selectedKeys) => {
 	} else {
 		searchForm.department_id = null
 	}
-	pagination.current = 1
-	loadData()
-}
-
-// 搜索
-const handleSearch = () => {
-	pagination.current = 1
-	loadData()
-}
-
-// 重置
-const handleReset = () => {
-	searchForm.username = ''
-	searchForm.nickname = ''
-	searchForm.department_id = null
-	selectedDeptKeys.value = []
-	departmentKeyword.value = ''
-	filteredDepartmentTree.value = departmentTree.value
-	pagination.current = 1
-	loadData()
-}
-
-// 刷新表格
-const refreshTable = () => {
-	loadData()
+	handleSearch()
 }
 
 // 导出数据
@@ -320,7 +269,7 @@ const handleDelete = async (record) => {
 		const res = await authApi.users.delete.post({ id: record.id })
 		if (res.code === 1) {
 			message.success('删除成功')
-			loadData()
+			refreshTable()
 		} else {
 			message.error(res.message || '删除失败')
 		}
@@ -331,23 +280,18 @@ const handleDelete = async (record) => {
 }
 
 // 保存成功回调
-const handleSaveSuccess = (data, mode) => {
-	if (mode === 'add') {
-		loadData()
-	} else if (mode === 'edit') {
-		loadData()
-	}
+const handleSaveSuccess = () => {
+	refreshTable()
 }
 
 // 角色设置成功回调
 const handleRoleSuccess = () => {
-	loadData()
+	refreshTable()
 }
 
 // 初始化
 onMounted(() => {
 	loadDepartmentTree()
-	loadData()
 })
 </script>