gi-component 0.0.4 → 0.0.6

package/package.json

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

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

@@ -10,6 +10,7 @@
             <template v-if="column.slotName">
               <slot :name="column.slotName" v-bind="scope"></slot>
             </template>
+            <template v-else-if="!column.type">{{ scope.row[column.prop] }}</template>
             <component :is="COMP_MAP[column.type] || column.type" v-else v-bind="getComponentBindProps(column)"
               v-model="scope.row[column.prop]" class="w-full" :disabled="isDisabled(scope)">
             </component>

package/packages/components/form/src/form.vue

@@ -1,49 +1,22 @@
 <template>
-  <el-form
-    ref="formRef"
-    :class="getClass"
-    v-bind="formProps"
-    :model="props.modelValue"
-  >
-    <Grid
-      class="w-full"
-      :col-gap="12"
-      v-bind="props.gridProps"
-      :collapsed="collapsed"
-    >
+  <el-form ref="formRef" :class="getClass" v-bind="formProps" :model="props.modelValue">
+    <Grid class="w-full" :col-gap="12" v-bind="props.gridProps" :collapsed="collapsed">
       <template v-for="(item, index) in props.columns">
-        <GridItem
-          v-if="item.type === 'title'"
-          :key="`title${index}`"
-          :span="100"
-        >
+        <GridItem v-if="item.type === 'title'" :key="`title${index}`" :span="100">
           <el-form-item label-width="0">
-            <GiCard
-              :title="typeof item.label === 'string' ? item.label : ''"
-              :header-style="{ padding: 0 }"
-              :body-style="{ display: 'none' }"
-            ></GiCard>
+            <GiCard :title="typeof item.label === 'string' ? item.label : ''" :header-style="{ padding: 0 }"
+              :body-style="{ display: 'none' }"></GiCard>
           </el-form-item>
         </GridItem>
 
         <template v-else>
-          <GridItem
-            v-if="!isHide(item)"
-            :key="item.field + index"
-            v-bind="item.gridItemProps || props.gridItemProps"
-            :span="
-              item.span ||
+          <GridItem v-if="!isHide(item)" :key="item.field + index" v-bind="item.gridItemProps || props.gridItemProps"
+            :span="item.span ||
               item.gridItemProps?.span ||
               props?.gridItemProps?.span
-            "
-          >
-            <el-form-item
-              :key="item.field + index"
-              :prop="item.field"
-              :label="item.label"
-              :rules="getFormItemRules(item)"
-              v-bind="item.formItemProps"
-            >
+              ">
+            <el-form-item :key="item.field + index" :prop="item.field" :label="item.label"
+              :rules="getFormItemRules(item)" v-bind="item.formItemProps">
               <template v-if="item?.labelRender" #label>
                 <component :is="item.labelRender"></component>
               </template>
@@ -53,21 +26,10 @@
               <template v-else>
                 <div :class="b('form-item__content')">
                   <div :class="b('form-item__component')">
-                    <component
-                      :is="CompMap[item.type] || item.type"
-                      :disabled="isDisabled(item)"
-                      class="w-full"
-                      v-bind="getComponentBindProps(item)"
-                      :model-value="
-                        props.modelValue[item.fieldName || item.field]
-                      "
-                      @update:model-value="updateModelValue($event, item)"
-                    >
-                      <template
-                        v-for="(slotValue, slotKey) in item?.slots || {}"
-                        :key="slotKey"
-                        #[slotKey]="scope"
-                      >
+                    <component :is="CompMap[item.type] || item.type" :disabled="isDisabled(item)" class="w-full"
+                      v-bind="getComponentBindProps(item)" :model-value="props.modelValue[item.fieldName || item.field]
+                        " @update:model-value="updateModelValue($event, item)">
+                      <template v-for="(slotValue, slotKey) in item?.slots || {}" :key="slotKey" #[slotKey]="scope">
                         <template v-if="typeof slotValue === 'string'">
                           {{ slotValue }}
                         </template>
@@ -76,12 +38,7 @@
                         </template>
                       </template>
                     </component>
-                    <el-text
-                      v-if="item.tip"
-                      :class="b('form-item__tip')"
-                      type="info"
-                      size="small"
-                    >
+                    <el-text v-if="item.tip" :class="b('form-item__tip')" type="info" size="small">
                       {{ item.tip }}
                     </el-text>
                   </div>
@@ -90,7 +47,7 @@
                     <template v-if="typeof item.extra === 'string'">
                       <el-text type="info" size="small">{{
                         item.extra
-                      }}</el-text>
+                        }}</el-text>
                     </template>
                     <template v-else-if="item.extra">
                       <component :is="item.extra"></component>
@@ -103,25 +60,14 @@
         </template>
       </template>
 
-      <GridItem
-        v-if="props.search"
-        :suffix="props.search"
-        :span="props?.gridItemProps?.span"
-      >
+      <GridItem v-if="props.search" :suffix="props.search" :span="props?.gridItemProps?.span">
         <el-space :class="b('form__search-btns')">
           <el-button type="primary" @click="emit('search')">
             {{ searchText }}
           </el-button>
           <el-button @click="emit('reset')"> 重置 </el-button>
-          <el-button
-            v-if="!props.hideFoldBtn"
-            class="form__fold-btn"
-            type="primary"
-            :icon="collapsed ? ArrowDown : ArrowUp"
-            text
-            size="small"
-            @click="collapsed = !collapsed"
-          >
+          <el-button v-if="!props.hideFoldBtn" class="form__fold-btn" type="primary"
+            :icon="collapsed ? ArrowDown : ArrowUp" text size="small" @click="collapsed = !collapsed">
             {{ collapsed ? '展开' : '收起' }}
           </el-button>
         </el-space>
@@ -376,7 +322,7 @@ function isHide(item: FormColumnItem) {
 /** 禁用表单项 */
 function isDisabled(item: FormColumnItem) {
   if (item?.props?.disabled !== undefined) return item?.props?.disabled;
-  if (props.fc?.[item.field]?.edit === false) return true;
+  if (props.fc?.[item.field]?.disabled === true) return true;
   return false;
 }
 
@@ -417,6 +363,7 @@ defineExpose({ formRef });
 }
 
 :deep(.hide-label) {
+
   // 隐藏el-form-item__label才能完整占满插槽宽度
   .el-form-item__label {
     display: none;

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

@@ -88,7 +88,7 @@ export interface FormColumnItem<F = any> {
 export interface FormProps extends Partial<ElFormProps> {
   modelValue: any;
   columns?: FormColumnItem[];
-  fc?: Record<string, { edit: boolean; hidden?: boolean; required?: boolean }>; // 表单控制
+  fc?: Record<string, { disabled?: boolean; hidden?: boolean; required?: boolean }>; // 表单控制
   gridProps?: GridProps; // grid默认配置
   gridItemProps?: GridItemProps; // grid-item默认配置
   search?: boolean;

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,98 @@
-export function useTable() {
 
+import { ElMessageBox } from 'element-plus'
+import { reactive, ref, getCurrentInstance, 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
+}
+
+export interface UseTablePaginationParams { page: number; size: number; }
+
+export interface UseTableApi<T> {
+  (params: UseTablePaginationParams): Promise<ApiResult<PageResult<T[]>>> | Promise<ApiResult<T[]>>
+}
+
+export function useTable<T extends U, U = T>(api: UseTableApi<T>, options: Options<T, U>) {
+  const { onSuccess, immediate = true, rowKey = 'id' } = options || {}
+
+  // const instance = getCurrentInstance();
+  // const globalConfig = instance?.appContext.config.globalProperties?.$config || {};
+
+  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';
 
@@ -62,8 +63,12 @@ function capitalizeWord(word: string) {
 // 全局默认配置
 export interface Config {
   prefix?: string; // 组件前缀
-  clearable?: boolean; // 输入框是否可清除
-  dictRequest?: () => Promise<any>; // 字典请求方法
+  /** 输入框是否可清除 */
+  clearable?: boolean;
+  /** 字典请求方法 */
+  dictRequest?: () => Promise<any>;
+  /** 格式化响应数据, 用于useTable */
+  // formatResponse?: (data: any) => any;
 }
 
 export default {

package/packages/styles/index.scss

@@ -5,8 +5,8 @@ body {
   --margin: 14px;
   --padding-x: 14px;
   --padding-x-small: 10px;
-  --padding-y: 10px;
-  --padding-y-small: 6px;
+  --padding-y: 12px;
+  --padding-y-small: 8px;
 }
 
 .gi-card-title {
@@ -170,6 +170,7 @@ body {
   .el-dialog__header {
     border-bottom: none;
   }
+
   .el-dialog__footer {
     border-top: none;
   }