优化更新

src/pages/system/area/index.vue

@@ -1,11 +1,10 @@
 <template>
 	<div class="system-area">
 		<sc-table ref="tableRef" :columns="columns" :data-source="dataSource" :loading="loading"
-			:pagination="pagination" @refresh="loadData" @change="handleTableChange"
-			@selection-change="handleSelectionChange" :show-action-column="true"
-			:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: handleSelectionChange }">
+			:pagination="pagination" @refresh="loadData" @change="handleTableChange" :row-selection="rowSelection"
+			:show-action="true" :actions="actions" :show-index="true" :show-striped="true">
 			<!-- 工具栏左侧 -->
-			<template #toolbar-left>
+			<template #toolLeft>
 				<a-button type="primary" @click="handleAdd">
 					<template #icon>
 						<PlusOutlined />
@@ -31,16 +30,6 @@
 			<template #level="{ text }">
 				<a-tag color="blue">{{ getLevelText(text) }}</a-tag>
 			</template>
-
-			<!-- 操作列 -->
-			<template #action="{ record }">
-				<a-button size="small" type="link" @click="handleEdit(record)">
-					{{ $t('common.edit') }}
-				</a-button>
-				<a-button size="small" type="link" danger @click="handleDelete(record)">
-					{{ $t('common.delete') }}
-				</a-button>
-			</template>
 		</sc-table>
 
 		<!-- 添加/编辑弹窗 -->
@@ -50,9 +39,9 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, computed } from 'vue'
 import { message, Modal } from 'ant-design-vue'
-import { EnvironmentOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'
 import { useI18n } from 'vue-i18n'
 import systemApi from '@/api/system'
 import ScTable from '@/components/scTable/index.vue'
@@ -71,15 +60,7 @@ const dataSource = ref([])
 const loading = ref(false)
 
 // 分页
-const pagination = reactive({
-	current: 1,
-	pageSize: 10,
-	total: 0,
-	showSizeChanger: true,
-	showQuickJumper: true,
-	showTotal: (total) => `共 ${total} 条`,
-	pageSizeOptions: ['10', '20', '50', '100'],
-})
+const pagination = reactive(false)
 
 // 选中的行
 const selectedRowKeys = ref([])
@@ -89,8 +70,25 @@ const modalVisible = ref(false)
 const isEdit = ref(false)
 const currentData = ref({})
 
-// 行操作配置
-const rowActions = ref([])
+// 行选择配置
+const rowSelection = computed(() => ({
+	selectedRowKeys: selectedRowKeys.value,
+	onChange: (selectedKeys) => {
+		selectedRowKeys.value = selectedKeys
+	},
+}))
+
+// 操作列配置
+const actions = computed(() => [
+	{
+		label: t('common.edit'),
+		onClick: handleEdit,
+	},
+	{
+		label: t('common.delete'),
+		onClick: handleDelete,
+	},
+])
 
 // 添加
 const handleAdd = () => {
@@ -112,14 +110,6 @@ const getLevelText = (level) => {
 
 // 列配置
 const columns = ref([
-	{
-		title: 'ID',
-		dataIndex: 'id',
-		key: 'id',
-		width: 80,
-		fixed: 'left',
-		sorter: true,
-	},
 	{
 		title: t('common.areaName'),
 		dataIndex: 'title',
@@ -165,11 +155,10 @@ const loadData = async () => {
 	try {
 		loading.value = true
 		const params = {
-			page: pagination.current,
-			pageSize: pagination.pageSize,
+			is_tree: 1,
 		}
 		const res = await systemApi.area.list.get(params)
-		if (res.code === 200 || res.code === 1) {
+		if (res.code === 1) {
 			dataSource.value = res.data.list || res.data || []
 			pagination.total = res.data.total || 0
 		}
@@ -182,17 +171,12 @@ const loadData = async () => {
 }
 
 // 表格变化处理
-const handleTableChange = (params) => {
-	if (params.current) pagination.current = params.current
-	if (params.pageSize) pagination.pageSize = params.pageSize
+const handleTableChange = ({ pagination: newPagination }) => {
+	if (newPagination.current) pagination.current = newPagination.current
+	if (newPagination.pageSize) pagination.pageSize = newPagination.pageSize
 	loadData()
 }
 
-// 行选择变化处理
-const handleSelectionChange = (selectedKeys) => {
-	selectedRowKeys.value = selectedKeys
-}
-
 // 编辑
 const handleEdit = (record) => {
 	isEdit.value = true
@@ -225,21 +209,6 @@ const handleDelete = (record) => {
 	})
 }
 
-// 初始化行操作配置（必须在 handleEdit 和 handleDelete 定义之后）
-rowActions.value = [
-	{
-		key: 'edit',
-		label: t('common.edit'),
-		handler: handleEdit,
-	},
-	{
-		key: 'delete',
-		label: t('common.delete'),
-		danger: true,
-		handler: handleDelete,
-	},
-]
-
 // 批量删除
 const handleBatchDelete = () => {
 	if (selectedRowKeys.value.length === 0) {