ljq/TkAstral3D
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(all): 修改分页

Browse Source
This commit is contained in:
plum 2026-04-17 12:44:21 +08:00
parent a8947696af
commit 37e1e58883
1 changed files with 185 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

346
packages/editor/src/views/home/dataCenter/DataSet.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<!-- <n-split direction="horizontal" :default-size="0.2" :max="0.8" :min="0.2" style="height: 100%" class="h-full"> <!-- <n-split direction="horizontal" :default-size="0.2" :max="0.8" :min="0.2" style="height: 100%" class="h-full">
<template #1> <template #1>
<DataSetGroup /> <DataSetGroup />
</template> </template>
@ -20,180 +20,204 @@
</template> </template>
</n-split> --> </n-split> -->
<n-flex class="h-full w-full"> <n-flex class="h-full w-full">
<DataSetGroup class="w-50 min-w-300px max-w-500px" @select="handleGroupSelect" /> <DataSetGroup class="w-50 min-w-300px max-w-500px" @select="handleGroupSelect" />
<n-divider vertical class="!h-full" /> <n-divider vertical class="!h-full" />
<div class="flex-1"> <div class="flex-1">
<div class="flex justify-between mb-3"> <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')"
<template #prefix> class="max-w-64"
<n-icon :component="Search" /> show-count
</template> :maxlength="25"
</n-input> @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> </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> </div>
</n-flex> </n-flex>
<!-- 数据集模态框 --> <!-- 数据集模态框 -->
<DataSetModal v-model:show="showDataSetModal" :model="currentDataSet" @refresh="getList" /> <DataSetModal v-model:show="showDataSetModal" :model="currentDataSet" @refresh="getList" />
</template> </template>
<script lang="ts" setup> <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 { t } from "@/language";
import { fetchDataSetDetail, fetchDataSetPage, fetchDeleteDataSet } from "@/http/api/dataSet"; import { fetchDataSetDetail, fetchDataSetPage, fetchDeleteDataSet } from "@/http/api/dataSet";
import DataSetModal from "./DataSetModal.vue"; import DataSetModal from "./DataSetModal.vue";
import DataSetGroup from "./DataSetGroup.vue"; import DataSetGroup from "./DataSetGroup.vue";
const dataSets = ref<IDataSet.Item[]>([]) const dataSets = ref<IDataSet.Item[]>([]);
const tableLoading = ref(false); const tableLoading = ref(false);
const showDataSetModal = ref(false) const showDataSetModal = ref(false);
const searchName = ref(""); const searchName = ref("");
const selectedGroupId = ref<IDataSet.IGroup["id"] | null>(null); const selectedGroupId = ref<IDataSet.IGroup["id"] | null>(null);
const defaultDataSet: IDataSet.Item = { 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>({ const currentDataSet = reactive<IDataSet.Item>({
...defaultDataSet ...defaultDataSet,
}) });
const dataSetColumns = [ const dataSetColumns = [
{ {
title: t("home.Data set name"), title: t("home.Data set name"),
key: 'name', key: "name",
defaultSortOrder: 'ascend', defaultSortOrder: "ascend",
sorter: 'default', sorter: "default",
resizable: true, resizable: true,
minWidth: 120, minWidth: 120,
maxWidth: 400, maxWidth: 400,
ellipsis: { ellipsis: {
tooltip: true tooltip: true,
}, },
filter(value, row) { filter(value, row) {
return ~row.name.indexOf(value); return ~row.name.indexOf(value);
} },
}, },
{ {
title: t("home.Data set type"), title: t("home.Data set type"),
key: 'type', key: "type",
defaultSortOrder: 'ascend', defaultSortOrder: "ascend",
sorter: 'default', sorter: "default",
resizable: true, resizable: true,
width: 180, width: 180,
minWidth: 120, minWidth: 120,
maxWidth: 260 maxWidth: 260,
}, },
{ {
title: t("other.Action"), title: t("other.Action"),
key: 'actions', key: "actions",
resizable: true, resizable: true,
minWidth: 120, minWidth: 120,
maxWidth: 300, maxWidth: 300,
render: (row) => h('div', [ render: row =>
h(NButton, { h("div", [
size: 'small', h(
onClick: () => editDataSet(row), NButton,
style: { marginRight: '0.4rem' } {
}, t("layout.sider.script.Edit")), size: "small",
h(NPopconfirm, { onClick: () => editDataSet(row),
onPositiveClick: () => deleteDataSet(row) style: { marginRight: "0.4rem" },
}, { },
default: () => t("prompt.Are you sure you want to delete it?"), t("layout.sider.script.Edit")
trigger: () => h(NButton, { ),
size: 'small' h(
}, t("home.Delete")) NPopconfirm,
}) {
]) onPositiveClick: () => deleteDataSet(row),
} },
] {
// 分页配置 default: () => t("prompt.Are you sure you want to delete it?"),
const pagination = reactive({ trigger: () =>
page: 1, h(
pageSize: 10, NButton,
pageCount: 1, {
"on-update:page": (page: number) => { size: "small",
pagination.page = page; },
getList(); t("home.Delete")
} ),
}) }
),
]),
},
];
// 分页配置
const pagination = reactive({
page: 1,
pageSize: 10,
pageCount: 1,
onChange: (page: number) => {
pagination.page = page;
getList();
},
onUpdatePageSize: (pageSize: number) => {
pagination.pageSize = pageSize;
pagination.page = 1;
getList();
},
});
function resetCurrentDataSet(data?: Partial<IDataSet.Item>) { function resetCurrentDataSet(data?: Partial<IDataSet.Item>) {
Object.assign(currentDataSet, defaultDataSet, data || {}); Object.assign(currentDataSet, defaultDataSet, data || {});
} }
async function getList() { async function getList() {
tableLoading.value = true; tableLoading.value = true;
const res = await fetchDataSetPage({ const res = await fetchDataSetPage({
page: pagination.page, page: pagination.page,
pageSize: pagination.pageSize, pageSize: pagination.pageSize,
name: searchName.value || undefined, name: searchName.value || undefined,
groupId: selectedGroupId.value ?? undefined groupId: selectedGroupId.value ?? undefined,
}); });
tableLoading.value = false; tableLoading.value = false;
dataSets.value = res.data?.items || []; dataSets.value = res.data?.items || [];
pagination.pageCount = res.data?.pages || 1; pagination.pageCount = res.data?.pages || 1;
if (res.data?.current) { if (res.data?.current) {
pagination.page = res.data.current; pagination.page = res.data.current;
} }
} }
function handleSearch(searchText: string) { function handleSearch(searchText: string) {
searchName.value = searchText; searchName.value = searchText;
pagination.page = 1; pagination.page = 1;
getList(); getList();
} }
function handleGroupSelect(group: IDataSet.IGroup | null) { function handleGroupSelect(group: IDataSet.IGroup | null) {
selectedGroupId.value = group?.id ?? null; selectedGroupId.value = group?.id ?? null;
pagination.page = 1; pagination.page = 1;
getList(); getList();
} }
function handleAddDataSet() { function handleAddDataSet() {
resetCurrentDataSet({ resetCurrentDataSet({
groupId: selectedGroupId.value ?? "" groupId: selectedGroupId.value ?? "",
}); });
showDataSetModal.value = true; showDataSetModal.value = true;
} }
async function editDataSet(item) { async function editDataSet(item) {
const res = await fetchDataSetDetail(item.id); const res = await fetchDataSetDetail(item.id);
if (res.error) { if (res.error) {
return; return;
} }
const detail = (res.data || item) as any; const detail = (res.data || item) as any;
resetCurrentDataSet({ resetCurrentDataSet({
...detail, ...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) { async function deleteDataSet(item) {
const res = await fetchDeleteDataSet(item.id); const res = await fetchDeleteDataSet(item.id);
if (res.error) { if (res.error) {
return; return;
} }
window.$message?.success(t("prompt.Success to delete")); window.$message?.success(t("prompt.Success to delete"));
getList(); getList();
} }
onMounted(() => { onMounted(() => {
getList(); getList();
}) });
</script> </script>