gi-component 0.0.3 → 0.0.5

package/packages/components/table/src/table.vue

@@ -1,89 +1,89 @@
-<template>
-  <div :class="b('table')">
-    <el-table v-bind="tableProps" ref="tableRef" :data="props.data as any[]">
-      <TableColumn v-for="item in props.columns" :key="item.prop || item.label" :column="item">
-        <!-- 将所有插槽传递给子组件 -->
-        <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="scope">
-          <slot :name="slotName" v-bind="scope" />
-        </template>
-      </TableColumn>
-    </el-table>
-
-    <el-row justify="end" :class="b('table-pagination')">
-      <el-pagination v-bind="paginationProps" v-model:current-page="paginationProps.currentPage"
-        v-model:page-size="paginationProps.pageSize" @size-change="handleSizeChange"
-        @current-change="handleCurrentChange" />
-    </el-row>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { TableProps } from './type';
-import { computed, useAttrs, useTemplateRef } from 'vue';
-import { useBemClass } from '../../../hooks';
-import TableColumn from './TableColumn.vue';
-
-const props = withDefaults(defineProps<TableProps>(), {
-  columns: () => [],
-  pagination: () => ({})
-});
-
-const attrs = useAttrs();
-const { b } = useBemClass();
-const tableRef = useTemplateRef('tableRef');
-
-const tableProps = computed(() => {
-  return {
-    ...attrs,
-    ...props,
-    columns: undefined,
-    pagination: undefined
-  };
-});
-
-const paginationProps = computed(() => {
-  return {
-    background: true,
-    layout: 'prev, pager, next, sizes, total',
-    pageSizes: [10, 20, 50, 100],
-    ...props.pagination
-  };
-});
-
-function handleSizeChange(size: number) {
-  // @ts-ignore
-  props.pagination.pageSize = size;
-}
-
-function handleCurrentChange(page: number) {
-  // @ts-ignore
-  props.pagination.currentPage = page;
-}
-
-defineExpose({
-  tableRef
-})
-</script>
-
-<style lang="scss" scoped>
-@use '../../../styles/var.scss' as a;
-
-:deep(.el-pagination__rightwrapper) {
-  flex: auto;
-}
-
-.#{a.$prefix}-table {
-  height: 100%;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-
-  :deep(.el-table) {
-    flex: 1;
-  }
-}
-
-.#{a.$prefix}-table-pagination {
-  margin-top: 10px;
-}
-</style>
+<template>
+  <div :class="b('table')">
+    <el-table v-bind="tableProps" ref="tableRef" :data="props.data as any[]">
+      <TableColumn v-for="item in props.columns" :key="item.prop || item.label" :column="item">
+        <!-- 将所有插槽传递给子组件 -->
+        <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="scope">
+          <slot :name="slotName" v-bind="scope" />
+        </template>
+      </TableColumn>
+    </el-table>
+
+    <el-row justify="end" :class="b('table-pagination')">
+      <el-pagination v-bind="paginationProps" v-model:current-page="paginationProps.currentPage"
+        v-model:page-size="paginationProps.pageSize" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+    </el-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { TableProps } from './type';
+import { computed, useAttrs, useTemplateRef } from 'vue';
+import { useBemClass } from '../../../hooks';
+import TableColumn from './TableColumn.vue';
+
+const props = withDefaults(defineProps<TableProps>(), {
+  columns: () => [],
+  pagination: () => ({})
+});
+
+const attrs = useAttrs();
+const { b } = useBemClass();
+const tableRef = useTemplateRef('tableRef');
+
+const tableProps = computed(() => {
+  return {
+    ...attrs,
+    ...props,
+    columns: undefined,
+    pagination: undefined
+  };
+});
+
+const paginationProps = computed(() => {
+  return {
+    background: true,
+    layout: 'prev, pager, next, sizes, total',
+    pageSizes: [10, 20, 50, 100],
+    ...props.pagination
+  };
+});
+
+function handleSizeChange(size: number) {
+  // @ts-ignore
+  props.pagination.pageSize = size;
+}
+
+function handleCurrentChange(page: number) {
+  // @ts-ignore
+  props.pagination.currentPage = page;
+}
+
+defineExpose({
+  tableRef
+})
+</script>
+
+<style lang="scss" scoped>
+@use '../../../styles/var.scss' as a;
+
+:deep(.el-pagination__rightwrapper) {
+  flex: auto;
+}
+
+.#{a.$prefix}-table {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  :deep(.el-table) {
+    flex: 1;
+  }
+}
+
+.#{a.$prefix}-table-pagination {
+  margin-top: 10px;
+}
+</style>

package/packages/components/table/src/type.ts

@@ -1,22 +1,22 @@
-import type {
-  TableProps as ElTableProps,
-  PaginationProps,
-  TableColumnCtx,
-  TableColumnInstance
-} from 'element-plus';
-import type { ExtractPropTypes, VNode } from 'vue';
-
-export interface TableColumnItem
-  extends Omit<TableColumnInstance['$props'], never> {
-  slotName?: string;
-  children?: TableColumnItem[];
-  render?: (scope: TableColumnCtx<any>) => VNode | VNode[] | string;
-}
-
-export interface TableProps
-  extends ExtractPropTypes<
-    ElTableProps<Record<string | number | symbol, any>>
-  > {
-  columns?: TableColumnItem[];
-  pagination?: Partial<PaginationProps>;
-}
+import type {
+  TableProps as ElTableProps,
+  PaginationProps,
+  TableColumnCtx,
+  TableColumnInstance,
+} from 'element-plus';
+import type { ExtractPropTypes, VNode } from 'vue';
+
+type DefaultRow = Record<PropertyKey, any>
+export interface TableColumnItem<T extends DefaultRow = DefaultRow> extends Omit<TableColumnInstance['$props'], never> {
+  slotName?: string;
+  children?: TableColumnItem[];
+  render?: (scope: { $index: number; cellIndex: number; column: TableColumnItem<T>; row: T }) => VNode | VNode[] | string;
+}
+
+export interface TableProps
+  extends ExtractPropTypes<
+    ElTableProps<Record<string | number | symbol, any>>
+  > {
+  columns?: TableColumnItem[];
+  pagination?: Partial<PaginationProps>;
+}

package/packages/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useBemClass';
+export * from './useTable';

package/packages/hooks/useTable.ts

@@ -1,3 +1,92 @@
-export function useTable() {
 
+import { ElMessageBox } from 'element-plus'
+import { reactive, ref, type Ref } from 'vue'
+
+interface Options<T, U> {
+  onSuccess?: () => void
+  immediate?: boolean
+  rowKey?: keyof T
+}
+
+interface ApiResult<T> {
+  code: number
+  data: T
+  message: string
+  success: boolean
+}
+
+interface PageResult<T> {
+  list: T[]
+  total: number
+}
+
+type Api<T> = (params: PaginationParams) => Promise<ApiResult<PageResult<T[]>>> | Promise<ApiResult<T[]>>
+
+interface PaginationParams { page: number; size: number; }
+export function useTable<T extends U, U = T>(api: Api<T>, options: Options<T, U>) {
+  const { onSuccess, immediate = true, rowKey = 'id' } = options || {}
+
+  const loading = ref(false)
+  const tableData: Ref<U[]> = ref([])
+
+  const pagination = reactive({
+    currentPage: 1,
+    pageSize: 20,
+    total: 0,
+    onCurrentChange: (size: number) => {
+      pagination.currentPage = size
+      getTableData()
+    },
+    onSizeChange: (size: number) => {
+      pagination.pageSize = size
+      getTableData()
+    },
+  })
+
+  function setTotal(total: number) {
+    pagination.total = total
+  }
+
+  async function getTableData() {
+    try {
+      loading.value = true
+      const res = await api({ page: pagination.currentPage, size: pagination.pageSize })
+      // 处理返回的数据结构可能是分页或数组的情况
+      const data = !Array.isArray(res.data) ? res.data.list : res.data
+      tableData.value = data as T[]
+      // 设置总数据量
+      const total = !Array.isArray(res.data) ? res.data.total : data.length
+      setTotal(total)
+      onSuccess?.()
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 是否立即触发请求
+  immediate && getTableData()
+
+  function search() {
+    pagination.currentPage = 1
+    getTableData()
+  }
+
+  function refresh() {
+    getTableData()
+  }
+
+  return {
+    /** 表格数据 */
+    tableData,
+    /** 获取表格数据 */
+    getTableData,
+    /** 分页数据 */
+    pagination,
+    /** 加载状态 */
+    loading,
+    /** 搜索 */
+    search,
+    /** 刷新 */
+    refresh,
+  }
 }

package/packages/index.ts

@@ -18,6 +18,7 @@ export * from './components/dialog';
 export * from './components/edit-table';
 export * from './components/form';
 export * from './components/table';
+export * from './components/tabs';
 export * from './hooks';
 export * from './utils';