diff --git a/gpt-vue/projects/vue-admin/src/components/SimpleTable/SimpleTable.vue b/gpt-vue/projects/vue-admin/src/components/SimpleTable/SimpleTable.vue new file mode 100644 index 00000000..e235a986 --- /dev/null +++ b/gpt-vue/projects/vue-admin/src/components/SimpleTable/SimpleTable.vue @@ -0,0 +1,67 @@ + + + diff --git a/gpt-vue/projects/vue-admin/src/components/SimpleTable/useAsyncTable.ts b/gpt-vue/projects/vue-admin/src/components/SimpleTable/useAsyncTable.ts new file mode 100644 index 00000000..73b5addd --- /dev/null +++ b/gpt-vue/projects/vue-admin/src/components/SimpleTable/useAsyncTable.ts @@ -0,0 +1,43 @@ +import { computed, onMounted, reactive, unref } from "vue"; +import type { TableInstance } from "@arco-design/web-vue"; +import type { BaseResponse } from "@gpt-vue/packages/type"; + +export type TableOriginalProps = TableInstance["$props"]; +export type TableRequest> = ( + params?: any +) => Promise>; +export type TableReturn = [TableOriginalProps, () => Promise]; +function useAsyncTable>( + request: TableRequest, + params?: Record +): TableReturn { + const tableState = reactive<{ loading: Boolean; data: T[] }>({ + loading: false, + data: [], + }); + + const tableConfig = computed(() => { + return { + ...tableState, + rowKey: "id", + }; + }); + + const getTableData = async () => { + tableState.loading = true; + try { + const { data } = await request({ + ...unref(params ?? {}), + }); + tableState.data = data as any; + } finally { + tableState.loading = false; + } + }; + + onMounted(getTableData); + + return [tableConfig, getTableData] as TableReturn; +} + +export default useAsyncTable;