gi-component 0.0.5 → 0.0.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gi-component",
   "type": "module",
-  "version": "0.0.5",
+  "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/hooks/useTable.ts

@@ -1,6 +1,6 @@
 
 import { ElMessageBox } from 'element-plus'
-import { reactive, ref, type Ref } from 'vue'
+import { reactive, ref, getCurrentInstance, type Ref } from 'vue'
 
 interface Options<T, U> {
   onSuccess?: () => void
@@ -20,12 +20,18 @@ interface PageResult<T> {
   total: number
 }
 
-type Api<T> = (params: PaginationParams) => Promise<ApiResult<PageResult<T[]>>> | Promise<ApiResult<T[]>>
+export interface UseTablePaginationParams { page: number; size: number; }
 
-interface PaginationParams { page: number; size: number; }
-export function useTable<T extends U, U = T>(api: Api<T>, options: Options<T, U>) {
+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([])
 

package/packages/index.ts

@@ -63,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;
   }