feat(all): 修改分页

packages/editor/src/views/home/dataCenter/DataSet.vue

@@ -27,16 +27,21 @@
 
 		<div class="flex-1">
 			<div class="flex justify-between mb-3">
-                <n-input :placeholder="t('prompt.Please enter a name for the dataset')" class="max-w-64" show-count
+				<n-input
-                    :maxlength="25" @update:value="handleSearch">
+					:placeholder="t('prompt.Please enter a name for the dataset')"
+					class="max-w-64"
+					show-count
+					:maxlength="25"
+					@update:value="handleSearch"
+				>
 					<template #prefix>
 						<n-icon :component="Search" />
 					</template>
 				</n-input>
 
-                <n-button type="primary" @click="handleAddDataSet">{{ t('home.Add data set') }}</n-button>
+				<n-button type="primary" @click="handleAddDataSet">{{ t("home.Add data set") }}</n-button>
 			</div>
-            <n-data-table :columns="dataSetColumns" :data="dataSets" :pagination="pagination" :loading="tableLoading" />
+			<n-data-table :columns="dataSetColumns" :data="dataSets" :pagination="pagination" :loading="tableLoading" remote />
 		</div>
 	</n-flex>
 
@@ -45,92 +50,111 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, h, onMounted } from 'vue';
+	import { ref, reactive, h, onMounted } from "vue";
-import { NButton, NPopconfirm } from 'naive-ui';
+	import { NButton, NPopconfirm } from "naive-ui";
-import { Search } from '@vicons/carbon';
+	import { Search } from "@vicons/carbon";
 	import { t } from "@/language";
 	import { fetchDataSetDetail, fetchDataSetPage, fetchDeleteDataSet } from "@/http/api/dataSet";
 	import DataSetModal from "./DataSetModal.vue";
 	import DataSetGroup from "./DataSetGroup.vue";
 
-const dataSets = ref<IDataSet.Item[]>([])
+	const dataSets = ref<IDataSet.Item[]>([]);
 	const tableLoading = ref(false);
-const showDataSetModal = ref(false)
+	const showDataSetModal = ref(false);
 	const searchName = ref("");
 	const selectedGroupId = ref<IDataSet.IGroup["id"] | null>(null);
 	const defaultDataSet: IDataSet.Item = {
-    id: '',
+		id: "",
-    groupId: '',
+		groupId: "",
-    name: '',
+		name: "",
-    type: 'API',
+		type: "API",
-    method: 'GET',
+		method: "GET",
-    api: '',
+		api: "",
-    dataSourceId: '',
+		dataSourceId: "",
-    sql: '',
+		sql: "",
-    json: ''
+		json: "",
 	};
 	const currentDataSet = reactive<IDataSet.Item>({
-    ...defaultDataSet
+		...defaultDataSet,
-})
+	});
 	const dataSetColumns = [
 		{
 			title: t("home.Data set name"),
-        key: 'name',
+			key: "name",
-        defaultSortOrder: 'ascend',
+			defaultSortOrder: "ascend",
-        sorter: 'default',
+			sorter: "default",
 			resizable: true,
 			minWidth: 120,
 			maxWidth: 400,
 			ellipsis: {
-            tooltip: true
+				tooltip: true,
 			},
 			filter(value, row) {
 				return ~row.name.indexOf(value);
-        }
+			},
 		},
 		{
 			title: t("home.Data set type"),
-        key: 'type',
+			key: "type",
-        defaultSortOrder: 'ascend',
+			defaultSortOrder: "ascend",
-        sorter: 'default',
+			sorter: "default",
 			resizable: true,
 			width: 180,
 			minWidth: 120,
-        maxWidth: 260
+			maxWidth: 260,
 		},
 		{
 			title: t("other.Action"),
-        key: 'actions',
+			key: "actions",
 			resizable: true,
 			minWidth: 120,
 			maxWidth: 300,
-        render: (row) => h('div', [
+			render: row =>
-            h(NButton, {
+				h("div", [
-                size: 'small',
+					h(
+						NButton,
+						{
+							size: "small",
 							onClick: () => editDataSet(row),
-                style: { marginRight: '0.4rem' }
+							style: { marginRight: "0.4rem" },
-            }, t("layout.sider.script.Edit")),
+						},
-            h(NPopconfirm, {
+						t("layout.sider.script.Edit")
-                onPositiveClick: () => deleteDataSet(row)
+					),
-            }, {
+					h(
+						NPopconfirm,
+						{
+							onPositiveClick: () => deleteDataSet(row),
+						},
+						{
 							default: () => t("prompt.Are you sure you want to delete it?"),
-                trigger: () => h(NButton, {
+							trigger: () =>
-                    size: 'small'
+								h(
-                }, t("home.Delete"))
+									NButton,
-            })
+									{
-        ])
+										size: "small",
+									},
+									t("home.Delete")
+								),
 						}
-]
+					),
+				]),
+		},
+	];
 	// 分页配置
 	const pagination = reactive({
 		page: 1,
 		pageSize: 10,
 		pageCount: 1,
-    "on-update:page": (page: number) => {
+		onChange: (page: number) => {
 			pagination.page = page;
 			getList();
-    }
+		},
-})
+		onUpdatePageSize: (pageSize: number) => {
+			pagination.pageSize = pageSize;
+			pagination.page = 1;
+			getList();
+		},
+	});
 
 	function resetCurrentDataSet(data?: Partial<IDataSet.Item>) {
 		Object.assign(currentDataSet, defaultDataSet, data || {});
@@ -142,7 +166,7 @@ async function getList() {
 			page: pagination.page,
 			pageSize: pagination.pageSize,
 			name: searchName.value || undefined,
-        groupId: selectedGroupId.value ?? undefined
+			groupId: selectedGroupId.value ?? undefined,
 		});
 		tableLoading.value = false;
 		dataSets.value = res.data?.items || [];
@@ -166,7 +190,7 @@ function handleGroupSelect(group: IDataSet.IGroup | null) {
 
 	function handleAddDataSet() {
 		resetCurrentDataSet({
-        groupId: selectedGroupId.value ?? ""
+			groupId: selectedGroupId.value ?? "",
 		});
 		showDataSetModal.value = true;
 	}
@@ -179,9 +203,9 @@ async function editDataSet(item) {
 		const detail = (res.data || item) as any;
 		resetCurrentDataSet({
 			...detail,
-        dataSourceId: detail.dataSourceId || detail.dataSource ? String(detail.dataSourceId || detail.dataSource) : ""
+			dataSourceId: detail.dataSourceId || detail.dataSource ? String(detail.dataSourceId || detail.dataSource) : "",
 		});
-    showDataSetModal.value = true
+		showDataSetModal.value = true;
 	}
 
 	async function deleteDataSet(item) {
@@ -195,5 +219,5 @@ async function deleteDataSet(item) {
 
 	onMounted(() => {
 		getList();
-})
+	});
 </script>