init

src/components/table/table-base.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import type { PaginationProps } from 'naive-ui';
+import { type TableBaseColumns, type TableFetchData, transformColumns, transformHeaderColumns } from '.';
+
+const props = defineProps<{
+  fetchData: TableFetchData;
+  columns: TableBaseColumns;
+  showHeaderOperation?: boolean;
+}>();
+const emit = defineEmits<{
+  (e: 'add'): void;
+  (e: 'refresh'): void;
+  (e: 'delete'): void;
+}>();
+
+const tableData = ref<any[]>([]);
+const dataTableColumns = transformColumns(props.columns);
+const headerTableColumns = transformHeaderColumns(props.columns);
+const pagination = ref<PaginationProps>({
+  page: 1,
+  pageSize: 10,
+  itemCount: 0,
+  showSizePicker: true,
+  pageSizes: [10, 20, 50, 100]
+});
+
+async function loadData() {
+  const page = pagination.value.page || 1;
+  const pageSize = pagination.value.pageSize || 10;
+  const { data } = await props.fetchData({
+    limit: pageSize,
+    offset: (page - 1) * pageSize
+  });
+
+  tableData.value = (data.value as any).data;
+  pagination.value.itemCount = (data.value as any).pagination.total;
+}
+
+function handlePageChange(curPage: number) {
+  pagination.value.page = curPage;
+  loadData();
+}
+
+onMounted(() => {
+  loadData();
+});
+
+defineExpose({
+  reload: loadData
+});
+</script>
+
+<template>
+  <div class="space-y-5">
+    <TableHeaderOperation
+      v-if="showHeaderOperation"
+      :columns="headerTableColumns"
+      @add="emit('add')"
+      @refresh="emit('refresh')"
+      @delete="emit('delete')"
+    />
+    <NDataTable
+      :columns="dataTableColumns"
+      :data="tableData"
+      :pagination="pagination"
+      :bordered="false"
+      :on-update:page="handlePageChange"
+    />
+  </div>
+</template>
+
+<style lang="css" scoped></style>