feat(ui):simpleTable

gpt-vue/projects/vue-admin/src/components/SimpleTable/SimpleTable.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { computed, ref, onActivated } from "vue";
+import useAsyncTable from "./useAsyncTable";
+import { useTableScroll } from "@/components/SearchTable/utils";
+import { Message } from "@arco-design/web-vue";
+import type { TableRequest, TableOriginalProps } from "./useAsyncTable";
+
+export interface SimpleTable extends TableOriginalProps {
+  request: TableRequest<Record<string, unknown>>;
+  params: Record<string, unknown>;
+}
+
+const props = defineProps<SimpleTable>();
+const tableContainerRef = ref<HTMLElement>();
+
+// 表格请求参数
+const [tableConfig, getList] = useAsyncTable(props.request, props.params);
+
+const _columns = computed(() => {
+  return props.columns?.map((item) => ({
+    ellipsis: true,
+    tooltip: true,
+    ...item,
+  }));
+});
+
+const handleSearch = async (tips?: boolean) => {
+  tips && Message.success("操作成功");
+  await getList();
+};
+
+onActivated(handleSearch);
+</script>
+<template>
+  <div class="search-table">
+    <div ref="tableContainerRef" class="search-table-container">
+      <ATable
+        v-bind="{
+          ...$attrs,
+          ...tableConfig,
+          ...props,
+          scroll: useTableScroll(_columns || [], tableContainerRef as HTMLElement),
+          columns: _columns
+        }"
+      >
+        <template v-for="slot in Object.keys($slots)" #[slot]="config">
+          <slot :name="slot" v-bind="{ ...config, reload: handleSearch }" />
+        </template>
+      </ATable>
+    </div>
+  </div>
+</template>
+<style scoped>
+.search-table {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.search-table-container {
+  flex: 1;
+}
+.search-table-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+</style>

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<T extends Record<string, unknown>> = (
+  params?: any
+) => Promise<BaseResponse<T[]>>;
+export type TableReturn = [TableOriginalProps, () => Promise<void>];
+function useAsyncTable<T extends Record<string, unknown>>(
+  request: TableRequest<T>,
+  params?: Record<string, unknown>
+): TableReturn {
+  const tableState = reactive<{ loading: Boolean; data: T[] }>({
+    loading: false,
+    data: [],
+  });
+
+  const tableConfig = computed<TableOriginalProps>(() => {
+    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;