gi-component 0.0.26 → 0.0.28

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

@@ -1,84 +1,84 @@
-import type * as El from 'element-plus'
-import type { FormProps as ElFormProps } from 'element-plus'
-import type { VNode } from 'vue'
-import type { MergeMultiple } from '../../../types/tool'
-import type { GridItemProps, GridProps } from '../../grid/src/interface'
-import type { InputSearchInstance } from '../../input-search'
-
-export type FormColumnType
-  = | 'input'
-  | 'textarea'
-  | 'input-number'
-  | 'input-tag'
-  | 'input-search'
-  | 'select'
-  | 'select-v2'
-  | 'tree-select'
-  | 'cascader'
-  | 'slider'
-  | 'switch'
-  | 'rate'
-  | 'checkbox-group'
-  | 'checkbox'
-  | 'radio-group'
-  | 'radio'
-  | 'date-picker'
-  | 'time-picker'
-  | 'time-select'
-  | 'color-picker'
-  | 'transfer'
-  | 'autocomplete'
-  | 'upload'
-  | 'title'
-  | 'slot'
-
-/**
- * 表单列属性类型，根据组件类型使用对应的属性类型
- */
-export type FormColumnProps = MergeMultiple<[El.InputProps, El.InputNumberProps, El.InputTagProps, El.SelectProps, El.SelectV2Props, El.TreeInstance['$props'], El.CascaderProps, El.SliderProps, El.SwitchProps, El.RateProps, El.CheckboxGroupProps, El.CheckboxProps, El.RadioGroupProps, El.RadioProps, El.DatePickerProps, El.TimePickerDefaultProps, El.TimeSelectProps, El.ColorPickerProps, El.TransferProps, El.AutocompleteProps, El.UploadProps, InputSearchInstance['$props']]>
-
-export type FormColumnItemHide<F> = boolean | ((form: F) => boolean)
-
-/**
- * 表单列插槽类型，根据组件类型使用对应的插槽类型
- */
-export type FormColumnSlots = Partial<
-  El.InputInstance['$slots']
-  | El.InputNumberInstance['$slots']
-  | El.InputTagInstance['$slots']
-  | El.AutocompleteInstance['$slots']
-  | El.CascaderInstance['$slots']
-  | El.DatePickerInstance['$slots']
->
-
-export interface FormColumnItem<F = any> {
-  type: FormColumnType
-  label?: string
-  labelRender?: () => VNode
-  field: string
-  fieldName?: string
-  span?: number | GridItemProps['span']
-  props?: FormColumnProps
-  formItemProps?: El.FormItemProps
-  gridItemProps?: any
-  required?: boolean
-  rules?: El.FormItemRule[]
-  hide?: FormColumnItemHide<F> // 是否隐藏
-  tip?: string
-  dictCode?: string // 字典编码
-  slotName?: string
-  slots?: FormColumnSlots
-  extra?: string | (() => VNode) // 右侧额外内容
-}
-
-export interface FormProps extends Partial<ElFormProps> {
-  modelValue: any
-  columns?: FormColumnItem[]
-  fc?: Record<string, { disabled?: boolean, hidden?: boolean, required?: boolean }> // 表单控制
-  gridProps?: GridProps // grid默认配置
-  gridItemProps?: GridItemProps // grid-item默认配置
-  search?: boolean
-  searchText?: string
-  hideFoldBtn?: boolean
-  defaultCollapsed?: boolean | undefined
-}
+import type * as El from 'element-plus'
+import type { FormProps as ElFormProps } from 'element-plus'
+import type { VNode } from 'vue'
+import type { MergeMultiple } from '../../../types/tool'
+import type { GridItemProps, GridProps } from '../../grid/src/interface'
+import type { InputSearchInstance } from '../../input-search'
+
+export type FormColumnType
+  = | 'input'
+  | 'textarea'
+  | 'input-number'
+  | 'input-tag'
+  | 'input-search'
+  | 'select'
+  | 'select-v2'
+  | 'tree-select'
+  | 'cascader'
+  | 'slider'
+  | 'switch'
+  | 'rate'
+  | 'checkbox-group'
+  | 'checkbox'
+  | 'radio-group'
+  | 'radio'
+  | 'date-picker'
+  | 'time-picker'
+  | 'time-select'
+  | 'color-picker'
+  | 'transfer'
+  | 'autocomplete'
+  | 'upload'
+  | 'title'
+  | 'slot'
+
+/**
+ * 表单列属性类型，根据组件类型使用对应的属性类型
+ */
+export type FormColumnProps = MergeMultiple<[El.InputProps, El.InputNumberProps, El.InputTagProps, El.SelectProps, El.SelectV2Props, El.TreeInstance['$props'], El.CascaderProps, El.SliderProps, El.SwitchProps, El.RateProps, El.CheckboxGroupProps, El.CheckboxProps, El.RadioGroupProps, El.RadioProps, El.DatePickerProps, El.TimePickerDefaultProps, El.TimeSelectProps, El.ColorPickerProps, El.TransferProps, El.AutocompleteProps, El.UploadProps, InputSearchInstance['$props']]>
+
+export type FormColumnItemHide<F> = boolean | ((form: F) => boolean)
+
+/**
+ * 表单列插槽类型，根据组件类型使用对应的插槽类型
+ */
+export type FormColumnSlots = Partial<
+  El.InputInstance['$slots']
+  | El.InputNumberInstance['$slots']
+  | El.InputTagInstance['$slots']
+  | El.AutocompleteInstance['$slots']
+  | El.CascaderInstance['$slots']
+  | El.DatePickerInstance['$slots']
+>
+
+export interface FormColumnItem<F = any> {
+  type: FormColumnType
+  label?: string
+  labelRender?: () => VNode
+  field: string
+  fieldName?: string
+  span?: number | GridItemProps['span']
+  props?: FormColumnProps
+  formItemProps?: El.FormItemProps
+  gridItemProps?: any
+  required?: boolean
+  rules?: El.FormItemRule[]
+  hide?: FormColumnItemHide<F> // 是否隐藏
+  tip?: string
+  dictCode?: string // 字典编码
+  slotName?: string
+  slots?: FormColumnSlots
+  extra?: string | (() => VNode) // 右侧额外内容
+}
+
+export interface FormProps extends Partial<ElFormProps> {
+  modelValue: any
+  columns?: FormColumnItem[]
+  fc?: Record<string, { disabled?: boolean, hidden?: boolean, required?: boolean }> // 表单控制
+  gridProps?: GridProps // grid默认配置
+  gridItemProps?: GridItemProps // grid-item默认配置
+  search?: boolean
+  searchText?: string
+  hideFoldBtn?: boolean
+  defaultCollapsed?: boolean | undefined
+}

package/packages/hooks/index.ts

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

package/packages/index.ts

@@ -1,8 +1,8 @@
-import type { App } from 'vue'
+import type { App, Component } from 'vue'
 
 import Button from './components/button'
 import Card from './components/card'
-import Dialog from './components/dialog'
+import DialogComponent from './components/dialog'
 import Dot from './components/dot'
 import Drawer from './components/drawer'
 import EditTable from './components/edit-table'
@@ -38,11 +38,11 @@ const components = {
   GridItem,
   Form,
   PageLayout,
-  Dialog,
+  Dialog: DialogComponent,
   EditTable,
   Table,
   TreeTransfer
-}
+} as unknown as Record<string, Component>
 
 // 导出Gi前缀的组件并添加明确类型注解
 export const GiButton: typeof Button = Button
@@ -56,7 +56,7 @@ export const GiGrid: typeof Grid = Grid
 export const GiGridItem: typeof GridItem = GridItem
 export const GiForm: typeof Form = Form
 export const GiPageLayout: typeof PageLayout = PageLayout
-export const GiDialog: typeof Dialog = Dialog
+export const GiDialog: typeof DialogComponent = DialogComponent
 export const GiEditTable: typeof EditTable = EditTable
 export const GiTable: typeof Table = Table
 export const GiTreeTransfer: typeof TreeTransfer = TreeTransfer

package/packages/styles/index.scss

@@ -2,8 +2,10 @@
 @use './el.scss';
 
 body {
+  // 主要作用于页面
   --padding: 14px;
   --margin: 14px;
+  // 主要作用于内置组件（不建议使用）
   --padding-x: 14px;
   --padding-x-small: 10px;
   --padding-y: 12px;
@@ -144,4 +146,8 @@ body {
 
 .gi-flex-column {
   flex-direction: column;
+}
+
+.gi-tool {
+  gap: 8px;
 }

package/packages/utils/createSelectDialog.ts

@@ -1,48 +1,55 @@
 import type { Component } from 'vue'
 import type { DialogOptions } from '../index'
 import { ElMessage } from 'element-plus'
-import { h, ref } from 'vue'
+import { h, ref } from 'vue'
 import { Dialog } from '../index'
 
+// 创建选择弹窗的参数
 interface CreateSelectDialogParams extends Omit<DialogOptions, 'content' | 'onOk' | 'onBeforeOk'> {
-  component: Component
-  componentProps?: Record<string, any>
-  tip?: string
+  component: Component // 内容组件
+  componentProps?: Record<string, any> // 内容组件属性
+  tip?: string // 提示信息
 };
 
-interface DefOption {
-  queryParams: Record<string, any>
+// 默认选项
+interface DefaultOption {
+  queryParams?: Record<string, any>
+  componentProps?: Record<string, any>
 }
 
-type DialogOption<T, Q extends DefOption = DefOption> = {
-  title?: string
-  multiple?: boolean
-  queryParams?: Q['queryParams']
-  onOk?: (data: T) => void
-  onBeforeOk?: (data: T) => Promise<boolean>
+// 打开选择弹窗的选项
+type DialogOption<T, Q extends DefaultOption = DefaultOption> = {
+  title?: string // 标题
+  multiple?: boolean // 是否多选
+  queryParams?: (Q extends { queryParams: infer P } ? P : DefaultOption['queryParams']) // 查询参数
+  componentProps?: (Q extends { componentProps: infer P } ? P : DefaultOption['componentProps']) // 组件属性
+  onOk?: (data: T) => void // 确定回调
+  onBeforeOk?: (data: T) => Promise<boolean> // 确定前的回调
 }
 
 /**
  * 创建选择弹窗
  * @description component组件必须暴露一个getSelectedData方法
  */
-export const createSelectDialog = <T, Q extends DefOption = DefOption>(
+export const createSelectDialog = <T, Q extends DefaultOption = DefaultOption>(
   params: CreateSelectDialogParams
 ) => {
   return function (options: DialogOption<T, Q>) {
-    const { multiple = false, onOk, onBeforeOk, queryParams } = options
+    const { multiple = false, onOk, onBeforeOk, queryParams, componentProps } = options
     const DialogTableRef = ref<any>()
+    const { component, componentProps: componentPropsFromParams, tip, ...restParams } = params
 
     Dialog.open({
       bodyClass: 'gi-p0',
-      ...{ ...params, component: undefined, componentProps: undefined, tip: undefined },
+      ...restParams,
       title: params.title || options.title,
       content: () =>
         h(params.component, {
           ref: (e: any) => (DialogTableRef.value = e),
           multiple,
           queryParams,
-          ...params.componentProps
+          ...params.componentProps,
+          ...componentProps
         }),
       style: { maxWidth: '1000px', ...params.style },
       onBeforeOk: async () => {

package/packages/hooks/useTable.ts

@@ -1,100 +0,0 @@
-import type { Ref } from 'vue'
-import { reactive, ref } from 'vue'
-
-interface Options<T, U> {
-  onSuccess?: () => void
-  onError?: (error: Error) => 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, onError, 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?.()
-    } catch (error) {
-      onError?.(error as Error)
-    } finally {
-      loading.value = false
-    }
-  }
-
-  // 是否立即触发请求
-  immediate && getTableData()
-
-  function search() {
-    pagination.currentPage = 1
-    getTableData()
-  }
-
-  function refresh() {
-    getTableData()
-  }
-
-  return {
-    /** 表格数据 */
-    tableData,
-    /** 获取表格数据 */
-    getTableData,
-    /** 分页数据 */
-    pagination,
-    /** 加载状态 */
-    loading,
-    /** 搜索 */
-    search,
-    /** 刷新 */
-    refresh
-  }
-}