feat(all): 修改分页
This commit is contained in:
plum
parent
a8947696af
commit
37e1e58883
@ -1,5 +1,5 @@
|
||||
<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>
|
||||
<DataSetGroup />
|
||||
</template>
|
||||
@ -20,180 +20,204 @@
|
||||
</template>
|
||||
</n-split> -->
|
||||
|
||||
<n-flex class="h-full w-full">
|
||||
<DataSetGroup class="w-50 min-w-300px max-w-500px" @select="handleGroupSelect" />
|
||||
<n-flex class="h-full w-full">
|
||||
<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 justify-between mb-3">
|
||||
<n-input :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>
|
||||
<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
|
||||
: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>
|
||||
</div>
|
||||
<n-data-table :columns="dataSetColumns" :data="dataSets" :pagination="pagination" :loading="tableLoading" />
|
||||
</div>
|
||||
</n-flex>
|
||||
<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" remote />
|
||||
</div>
|
||||
</n-flex>
|
||||
|
||||
<!-- 数据集模态框 -->
|
||||
<DataSetModal v-model:show="showDataSetModal" :model="currentDataSet" @refresh="getList" />
|
||||
<!-- 数据集模态框 -->
|
||||
<DataSetModal v-model:show="showDataSetModal" :model="currentDataSet" @refresh="getList" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, h, onMounted } from 'vue';
|
||||
import { NButton, NPopconfirm } from 'naive-ui';
|
||||
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";
|
||||
import { ref, reactive, h, onMounted } from "vue";
|
||||
import { NButton, NPopconfirm } from "naive-ui";
|
||||
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 tableLoading = ref(false);
|
||||
const showDataSetModal = ref(false)
|
||||
const searchName = ref("");
|
||||
const selectedGroupId = ref<IDataSet.IGroup["id"] | null>(null);
|
||||
const defaultDataSet: IDataSet.Item = {
|
||||
id: '',
|
||||
groupId: '',
|
||||
name: '',
|
||||
type: 'API',
|
||||
method: 'GET',
|
||||
api: '',
|
||||
dataSourceId: '',
|
||||
sql: '',
|
||||
json: ''
|
||||
};
|
||||
const currentDataSet = reactive<IDataSet.Item>({
|
||||
...defaultDataSet
|
||||
})
|
||||
const dataSetColumns = [
|
||||
{
|
||||
title: t("home.Data set name"),
|
||||
key: 'name',
|
||||
defaultSortOrder: 'ascend',
|
||||
sorter: 'default',
|
||||
resizable: true,
|
||||
minWidth: 120,
|
||||
maxWidth: 400,
|
||||
ellipsis: {
|
||||
tooltip: true
|
||||
},
|
||||
filter(value, row) {
|
||||
return ~row.name.indexOf(value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: t("home.Data set type"),
|
||||
key: 'type',
|
||||
defaultSortOrder: 'ascend',
|
||||
sorter: 'default',
|
||||
resizable: true,
|
||||
width: 180,
|
||||
minWidth: 120,
|
||||
maxWidth: 260
|
||||
},
|
||||
{
|
||||
title: t("other.Action"),
|
||||
key: 'actions',
|
||||
resizable: true,
|
||||
minWidth: 120,
|
||||
maxWidth: 300,
|
||||
render: (row) => h('div', [
|
||||
h(NButton, {
|
||||
size: 'small',
|
||||
onClick: () => editDataSet(row),
|
||||
style: { marginRight: '0.4rem' }
|
||||
}, t("layout.sider.script.Edit")),
|
||||
h(NPopconfirm, {
|
||||
onPositiveClick: () => deleteDataSet(row)
|
||||
}, {
|
||||
default: () => t("prompt.Are you sure you want to delete it?"),
|
||||
trigger: () => h(NButton, {
|
||||
size: 'small'
|
||||
}, t("home.Delete"))
|
||||
})
|
||||
])
|
||||
}
|
||||
]
|
||||
// 分页配置
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
pageCount: 1,
|
||||
"on-update:page": (page: number) => {
|
||||
pagination.page = page;
|
||||
getList();
|
||||
}
|
||||
})
|
||||
const dataSets = ref<IDataSet.Item[]>([]);
|
||||
const tableLoading = ref(false);
|
||||
const showDataSetModal = ref(false);
|
||||
const searchName = ref("");
|
||||
const selectedGroupId = ref<IDataSet.IGroup["id"] | null>(null);
|
||||
const defaultDataSet: IDataSet.Item = {
|
||||
id: "",
|
||||
groupId: "",
|
||||
name: "",
|
||||
type: "API",
|
||||
method: "GET",
|
||||
api: "",
|
||||
dataSourceId: "",
|
||||
sql: "",
|
||||
json: "",
|
||||
};
|
||||
const currentDataSet = reactive<IDataSet.Item>({
|
||||
...defaultDataSet,
|
||||
});
|
||||
const dataSetColumns = [
|
||||
{
|
||||
title: t("home.Data set name"),
|
||||
key: "name",
|
||||
defaultSortOrder: "ascend",
|
||||
sorter: "default",
|
||||
resizable: true,
|
||||
minWidth: 120,
|
||||
maxWidth: 400,
|
||||
ellipsis: {
|
||||
tooltip: true,
|
||||
},
|
||||
filter(value, row) {
|
||||
return ~row.name.indexOf(value);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t("home.Data set type"),
|
||||
key: "type",
|
||||
defaultSortOrder: "ascend",
|
||||
sorter: "default",
|
||||
resizable: true,
|
||||
width: 180,
|
||||
minWidth: 120,
|
||||
maxWidth: 260,
|
||||
},
|
||||
{
|
||||
title: t("other.Action"),
|
||||
key: "actions",
|
||||
resizable: true,
|
||||
minWidth: 120,
|
||||
maxWidth: 300,
|
||||
render: row =>
|
||||
h("div", [
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
size: "small",
|
||||
onClick: () => editDataSet(row),
|
||||
style: { marginRight: "0.4rem" },
|
||||
},
|
||||
t("layout.sider.script.Edit")
|
||||
),
|
||||
h(
|
||||
NPopconfirm,
|
||||
{
|
||||
onPositiveClick: () => deleteDataSet(row),
|
||||
},
|
||||
{
|
||||
default: () => t("prompt.Are you sure you want to delete it?"),
|
||||
trigger: () =>
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
size: "small",
|
||||
},
|
||||
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>) {
|
||||
Object.assign(currentDataSet, defaultDataSet, data || {});
|
||||
}
|
||||
function resetCurrentDataSet(data?: Partial<IDataSet.Item>) {
|
||||
Object.assign(currentDataSet, defaultDataSet, data || {});
|
||||
}
|
||||
|
||||
async function getList() {
|
||||
tableLoading.value = true;
|
||||
const res = await fetchDataSetPage({
|
||||
page: pagination.page,
|
||||
pageSize: pagination.pageSize,
|
||||
name: searchName.value || undefined,
|
||||
groupId: selectedGroupId.value ?? undefined
|
||||
});
|
||||
tableLoading.value = false;
|
||||
dataSets.value = res.data?.items || [];
|
||||
pagination.pageCount = res.data?.pages || 1;
|
||||
if (res.data?.current) {
|
||||
pagination.page = res.data.current;
|
||||
}
|
||||
}
|
||||
async function getList() {
|
||||
tableLoading.value = true;
|
||||
const res = await fetchDataSetPage({
|
||||
page: pagination.page,
|
||||
pageSize: pagination.pageSize,
|
||||
name: searchName.value || undefined,
|
||||
groupId: selectedGroupId.value ?? undefined,
|
||||
});
|
||||
tableLoading.value = false;
|
||||
dataSets.value = res.data?.items || [];
|
||||
pagination.pageCount = res.data?.pages || 1;
|
||||
if (res.data?.current) {
|
||||
pagination.page = res.data.current;
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch(searchText: string) {
|
||||
searchName.value = searchText;
|
||||
pagination.page = 1;
|
||||
getList();
|
||||
}
|
||||
function handleSearch(searchText: string) {
|
||||
searchName.value = searchText;
|
||||
pagination.page = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
function handleGroupSelect(group: IDataSet.IGroup | null) {
|
||||
selectedGroupId.value = group?.id ?? null;
|
||||
pagination.page = 1;
|
||||
getList();
|
||||
}
|
||||
function handleGroupSelect(group: IDataSet.IGroup | null) {
|
||||
selectedGroupId.value = group?.id ?? null;
|
||||
pagination.page = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
function handleAddDataSet() {
|
||||
resetCurrentDataSet({
|
||||
groupId: selectedGroupId.value ?? ""
|
||||
});
|
||||
showDataSetModal.value = true;
|
||||
}
|
||||
function handleAddDataSet() {
|
||||
resetCurrentDataSet({
|
||||
groupId: selectedGroupId.value ?? "",
|
||||
});
|
||||
showDataSetModal.value = true;
|
||||
}
|
||||
|
||||
async function editDataSet(item) {
|
||||
const res = await fetchDataSetDetail(item.id);
|
||||
if (res.error) {
|
||||
return;
|
||||
}
|
||||
const detail = (res.data || item) as any;
|
||||
resetCurrentDataSet({
|
||||
...detail,
|
||||
dataSourceId: detail.dataSourceId || detail.dataSource ? String(detail.dataSourceId || detail.dataSource) : ""
|
||||
});
|
||||
showDataSetModal.value = true
|
||||
}
|
||||
async function editDataSet(item) {
|
||||
const res = await fetchDataSetDetail(item.id);
|
||||
if (res.error) {
|
||||
return;
|
||||
}
|
||||
const detail = (res.data || item) as any;
|
||||
resetCurrentDataSet({
|
||||
...detail,
|
||||
dataSourceId: detail.dataSourceId || detail.dataSource ? String(detail.dataSourceId || detail.dataSource) : "",
|
||||
});
|
||||
showDataSetModal.value = true;
|
||||
}
|
||||
|
||||
async function deleteDataSet(item) {
|
||||
const res = await fetchDeleteDataSet(item.id);
|
||||
if (res.error) {
|
||||
return;
|
||||
}
|
||||
window.$message?.success(t("prompt.Success to delete"));
|
||||
getList();
|
||||
}
|
||||
async function deleteDataSet(item) {
|
||||
const res = await fetchDeleteDataSet(item.id);
|
||||
if (res.error) {
|
||||
return;
|
||||
}
|
||||
window.$message?.success(t("prompt.Success to delete"));
|
||||
getList();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
})
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user