gi-component 0.0.4 → 0.0.5

package/dist/index.d.ts

@@ -20,7 +20,6 @@ import { PublicProps } from 'vue';
 import { Ref } from 'vue';
 import { Slots } from 'vue';
 import { SplitterPanelProps } from 'element-plus';
-import { TableColumnCtx } from 'element-plus';
 import { TableColumnInstance } from 'element-plus';
 import { TableProps as TableProps_2 } from 'element-plus';
 import { TabPaneName } from 'element-plus';
@@ -257,6 +256,15 @@ declare type __VLS_WithTemplateSlots_6<T, S> = T & {
     };
 };
 
+declare type Api<T> = (params: PaginationParams) => Promise<ApiResult<PageResult<T[]>>> | Promise<ApiResult<T[]>>;
+
+declare interface ApiResult<T> {
+    code: number;
+    data: T;
+    message: string;
+    success: boolean;
+}
+
 declare interface ButtonProps extends Partial<Omit<ButtonProps_2, 'type'>> {
     type?: 'add' | 'edit' | 'delete' | 'search' | 'reset' | 'upload' | 'download' | 'print' | '' | ButtonProps_2['type'];
 }
@@ -509,6 +517,8 @@ suffix: boolean;
 
 declare const _default_9: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
 
+declare type DefaultRow = Record<PropertyKey, any>;
+
 declare interface DefOption {
     queryParams: Record<string, any>;
 }
@@ -672,6 +682,12 @@ declare interface InputSearchProps {
 
 declare const model: ModelRef<string | undefined, string, string | undefined, string | undefined>;
 
+declare interface Options<T, U> {
+    onSuccess?: () => void;
+    immediate?: boolean;
+    rowKey?: keyof T;
+}
+
 declare interface PageLayoutProps {
     size?: SplitterPanelProps['size'];
     bordered?: boolean;
@@ -682,6 +698,16 @@ declare interface PageLayoutProps {
     bodyStyle?: CSSProperties;
 }
 
+declare interface PageResult<T> {
+    list: T[];
+    total: number;
+}
+
+declare interface PaginationParams {
+    page: number;
+    size: number;
+}
+
 declare interface ResponsiveValue {
     /**
      * @zh >= 1600px 响应式配置
@@ -715,10 +741,15 @@ declare interface ResponsiveValue {
     xs?: number;
 }
 
-export declare interface TableColumnItem extends Omit<TableColumnInstance['$props'], never> {
+export declare 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 declare type TableInstance = InstanceType<typeof default_4>;
@@ -728,13 +759,15 @@ export declare interface TableProps extends ExtractPropTypes<TableProps_2<Record
     pagination?: Partial<PaginationProps>;
 }
 
-declare type TabsOptionItem = {
+export declare type TabsInstance = InstanceType<typeof _default_4>;
+
+export declare type TabsOptionItem = {
     label: string;
     name: string;
     disabled?: boolean;
 };
 
-declare interface TabsProps extends Partial<Pick<TabsProps_2, 'type' | 'stretch'>> {
+export declare interface TabsProps extends Partial<Pick<TabsProps_2, 'type' | 'stretch'>> {
     type?: TabsProps_2['type'];
     options?: TabsOptionItem[];
     size?: 'small' | 'medium';
@@ -745,6 +778,27 @@ export declare function useBemClass(): {
     b: (name?: string) => string;
 };
 
+export declare function useTable<T extends U, U = T>(api: Api<T>, options: Options<T, U>): {
+    /** 表格数据 */
+    tableData: Ref<U[], U[]>;
+    /** 获取表格数据 */
+    getTableData: () => Promise<void>;
+    /** 分页数据 */
+    pagination: {
+        currentPage: number;
+        pageSize: number;
+        total: number;
+        onCurrentChange: (size: number) => void;
+        onSizeChange: (size: number) => void;
+    };
+    /** 加载状态 */
+    loading: Ref<boolean, boolean>;
+    /** 搜索 */
+    search: () => void;
+    /** 刷新 */
+    refresh: () => void;
+};
+
 declare const visible: ModelRef<boolean, string, boolean, boolean>;
 
 export { }

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, createElementBlock, openBlock, createElementVNode, getCurrentInstance, useAttrs, computed, resolveComponent, createBlock, mergeProps, unref, withCtx, renderSlot, createTextVNode, toDisplayString, useSlots, normalizeClass, createCommentVNode, normalizeStyle, mergeModels, useModel, ref, createSlots, resolveDynamicComponent, createVNode, createApp, h, Fragment, renderList, watch, onMounted, onUpdated, onUnmounted, inject, toRefs, watchEffect, reactive, provide, toRaw, normalizeProps, guardReactiveProps, useTemplateRef } from "vue";
+import { defineComponent, createElementBlock, openBlock, createElementVNode, getCurrentInstance, ref, reactive, useAttrs, computed, resolveComponent, createBlock, mergeProps, unref, withCtx, renderSlot, createTextVNode, toDisplayString, useSlots, normalizeClass, createCommentVNode, normalizeStyle, mergeModels, useModel, createSlots, resolveDynamicComponent, createVNode, createApp, h, Fragment, renderList, watch, onMounted, onUpdated, onUnmounted, inject, toRefs, watchEffect, provide, toRaw, normalizeProps, guardReactiveProps, useTemplateRef } from "vue";
 import * as El from "element-plus";
 import El__default, { ElMessage } from "element-plus";
 /*! Element Plus Icons Vue v2.3.2 */
@@ -194,6 +194,62 @@ function useBemClass() {
   const b = (name = "") => `${prefix}-${name ? `${name}` : ""}`;
   return { b };
 }
+function useTable(api, options) {
+  const { onSuccess, immediate = true, rowKey = "id" } = options || {};
+  const loading = ref(false);
+  const tableData = ref([]);
+  const pagination = reactive({
+    currentPage: 1,
+    pageSize: 20,
+    total: 0,
+    onCurrentChange: (size) => {
+      pagination.currentPage = size;
+      getTableData();
+    },
+    onSizeChange: (size) => {
+      pagination.pageSize = size;
+      getTableData();
+    }
+  });
+  function setTotal(total) {
+    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;
+      const total = !Array.isArray(res.data) ? res.data.total : data.length;
+      setTotal(total);
+      onSuccess == null ? void 0 : onSuccess();
+    } finally {
+      loading.value = false;
+    }
+  }
+  immediate && getTableData();
+  function search() {
+    pagination.currentPage = 1;
+    getTableData();
+  }
+  function refresh() {
+    getTableData();
+  }
+  return {
+    /** 表格数据 */
+    tableData,
+    /** 获取表格数据 */
+    getTableData,
+    /** 分页数据 */
+    pagination,
+    /** 加载状态 */
+    loading,
+    /** 搜索 */
+    search,
+    /** 刷新 */
+    refresh
+  };
+}
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "button",
   props: {
@@ -1928,7 +1984,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         _ctx.column.render ? {
           name: "default",
           fn: withCtx((scope) => [
-            (openBlock(), createBlock(resolveDynamicComponent(_ctx.column.render(scope))))
+            typeof _ctx.column.render(scope) === "string" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              createTextVNode(toDisplayString(_ctx.column.render(scope)), 1)
+            ], 64)) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.column.render(scope)), { key: 1 }))
           ]),
           key: "0"
         } : _ctx.column.slotName ? {
@@ -2246,6 +2304,7 @@ export {
   createDialog,
   createSelectDialog,
   index as default,
-  useBemClass
+  useBemClass,
+  useTable
 };
 //# sourceMappingURL=index.es.js.map