feat(all): 修改分页
This commit is contained in:
plum
parent
a8947696af
commit
37e1e58883
@ -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>
|
||||||
Loading…
Reference in New Issue
Block a user