gi-component 0.0.4 → 0.0.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gi-component",
   "type": "module",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Vue3中基于Element Plus二次封装基础组件库",
   "author": "lin",
   "license": "MIT",

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

@@ -2,7 +2,8 @@
   <el-table-column v-bind="columnProps">
     <!-- 处理render函数 -->
     <template v-if="column.render" v-slot="scope">
-      <component :is="column.render(scope)" />
+      <template v-if="typeof column.render(scope) === 'string'">{{ column.render(scope) }}</template>
+      <component v-else :is="column.render(scope)" />
     </template>
 
     <!-- 处理插槽内容 -->
@@ -12,17 +13,9 @@
 
     <!-- 递归渲染子列 -->
     <template v-if="column.children && column.children.length > 0">
-      <TableColumn
-        v-for="child in column.children"
-        :key="child.prop || child.label"
-        :column="child"
-      >
+      <TableColumn v-for="child in column.children" :key="child.prop || child.label" :column="child">
         <!-- 将所有插槽传递给子组件 -->
-        <template
-          v-for="(_, slotName) in $slots"
-          :key="slotName"
-          #[slotName]="scope"
-        >
+        <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="scope">
           <slot :name="slotName" v-bind="scope" />
         </template>
       </TableColumn>

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

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

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';