easybill-ui 1.3.3 → 1.4.0

package/components/CurdForm/src/CurdForm.vue

@@ -28,31 +28,24 @@
 
       <!-- 其他类型使用 el-form-item 包裹 -->
       <template v-else>
-        <el-form-item
-          v-if="!$slots[formItem.prop + 'Item']"
-          :required="rules && rules[formItem.prop]?.find((a) => a.hasOwnProperty('required'))?.required"
-          :label="formItem.label"
-          :prop="formItem.prop"
-          :label-width="formItem.labelWidth"
-          :class="getFormItemStyle(formItem)"
-          v-bind="getFormItemProps(formItem)"
-        >
+        <el-form-item v-if="!$slots[formItem.prop + 'Item']" :required="hasRequiredRule(formItem.prop)" :label="formItem.label" :prop="formItem.prop" :label-width="formItem.labelWidth" :class="getFormItemStyle(formItem)" v-bind="getFormItemProps(formItem)">
           <template v-for="(item, key) in getFormItemProps(formItem)?.slots || {}" :key="key" #[key]="row">
             <component :is="item" v-bind="row" />
           </template>
-
+          <component :is="formItem.slots?.top" :formItem="formItem" :formModel="formModel" />
           <slot :name="formItem.prop" :form-item="formItem" :form-model="formModel"></slot>
           <FormItem v-if="!(formItem.prop && $slots[formItem.prop])" :form-item="formItem" :form-model="formModel" @change="onChange">
             <template #prefix>
-              <slot :name="formItem.prop + 'Prefix'" :form-item="formItem" :form-model="formModel"></slot>
+              <slot :name="formItem.prop + 'Prefix'" :formItem="formItem" :formModel="formModel"></slot>
             </template>
             <template #suffix>
-              <slot :name="formItem.prop + 'Suffix'" :form-item="formItem" :form-model="formModel"></slot>
+              <slot :name="formItem.prop + 'Suffix'" :formItem="formItem" :formModel="formModel"></slot>
             </template>
           </FormItem>
-          <slot :name="formItem.prop + 'Bottom'" :form-item="formItem" :form-model="formModel"></slot>
+          <slot :name="formItem.prop + 'Bottom'" :formItem="formItem" :formModel="formModel"></slot>
+          <component :is="formItem.slots?.bottom" :formItem="formItem" :formModel="formModel" />
         </el-form-item>
-        <slot :name="formItem.prop + 'Item'" :form-item="formItem" :form-model="formModel"></slot>
+        <slot :name="formItem.prop + 'Item'" :formItem="formItem" :formModel="formModel"></slot>
       </template>
     </template>
     <template v-if="$slots['operate-button']">
@@ -64,10 +57,10 @@
 </template>
 
 <script lang="ts" setup>
-import { ElForm, type FormRules } from "element-plus"
+import { ElForm, type FormItemRule, type FormRules } from "element-plus"
 import { computed, getCurrentInstance, onMounted, provide, reactive, ref, triggerRef, watch, type PropType } from "vue"
 import FormItem from "./FormItem.vue"
-import type { CurdFormOptionItem, Fields, FormContext, FormItem as FormItemType, FormSchema } from "./types"
+import type { CurdFormOptionItem, Fields, FormContext, FormItemProvider, FormItemSearchResult, FormItem as FormItemType, FormSchema } from "./types"
 import { deepClone } from "./utils/common"
 
 const props = defineProps({
@@ -97,6 +90,101 @@ const sFormSchema = ref(props.formSchema)
 let formModel = reactive<Fields>(props.modelValue || {})
 const curdFormContext = reactive<FormContext>({} as FormContext)
 const instance = getCurrentInstance()
+const formItemProviders = new Map<string | symbol, FormItemProvider["getItems"]>()
+
+const normalizeFormItems = (items?: FormItemType[] | null) => {
+  return Array.isArray(items) ? items : []
+}
+
+const walkBuiltInFormItems = (items: FormItemType[], callback: (item: FormItemType, parent?: FormItemType, path?: string) => void | boolean, parent?: FormItemType, parentPath = "") => {
+  for (const item of normalizeFormItems(items)) {
+    const currentPath = parentPath ? `${parentPath}.${item.prop}` : item.prop
+    const shouldStop = callback(item, parent, currentPath)
+    if (shouldStop) return true
+
+    if (item.type === "choose" && item.options) {
+      for (const option of item.options) {
+        if (option.items?.length && walkBuiltInFormItems(option.items, callback, item, `${currentPath}.${option.value}`)) {
+          return true
+        }
+      }
+    }
+  }
+  return false
+}
+
+const getRegisteredFormItems = (providerId?: string | symbol) => {
+  const items: FormItemType[] = []
+  formItemProviders.forEach((getItems, id) => {
+    if (typeof providerId !== "undefined" && id !== providerId) return
+    items.push(...normalizeFormItems(getItems()))
+  })
+  return items
+}
+
+const collectDefaultValues = (items: FormItemType[]) => {
+  const values: Fields = {}
+  walkBuiltInFormItems(items, (item) => {
+    item.eventObject ??= {}
+    if (typeof item.value !== "undefined" && item.prop && (typeof formModel[item.prop] == "undefined" || formModel[item.prop] === "" || formModel[item.prop] === null)) {
+      values[item.prop] = item.value
+    }
+  })
+  return values
+}
+
+const loadFormItemOptions = async (formItem: FormItemType, option?: unknown) => {
+  if (formItem.asyncOptions && !instance?.isUnmounted) {
+    formItem.loading = true
+    triggerRef(schemaItems)
+    formItem.options =
+      (await formItem
+        .asyncOptions(formModel, formItem, curdFormContext, option)
+        .catch((err) => console.error("loadOptionError", err))
+        .finally(() => (formItem.loading = false))) || []
+    triggerRef(schemaItems)
+    if (!instance?.isUnmounted && formItem.eventObject?.optionLoaded) formItem.eventObject.optionLoaded(formModel, formItem, curdFormContext, option)
+  }
+  return formItem.options || []
+}
+
+const loadAutoloadFormItems = (items: FormItemType[]) => {
+  walkBuiltInFormItems(items, (item) => {
+    if (item.asyncOptions && (item.autoload || typeof item.autoload == "undefined") && item.asyncOptions instanceof Function) {
+      void loadFormItemOptions(item)
+    }
+  })
+}
+
+const findFormItemInItems = (items: FormItemType[], prop: string, providerId?: string | symbol): FormItemSearchResult | undefined => {
+  let result: FormItemSearchResult | undefined
+  walkBuiltInFormItems(items, (item, parent, path) => {
+    if (item.prop == prop) {
+      result = { item, parent, path: path || prop, providerId }
+      return true
+    }
+    return false
+  })
+  return result
+}
+
+const refreshFormItems = (providerId?: string | symbol) => {
+  const registeredItems = getRegisteredFormItems(providerId)
+  Object.assign(formModel, collectDefaultValues(registeredItems))
+  loadAutoloadFormItems(registeredItems)
+  triggerRef(schemaItems)
+  triggerRef(rules)
+}
+
+const registerFormItems = (provider: FormItemProvider) => {
+  formItemProviders.set(provider.id, provider.getItems)
+  refreshFormItems(provider.id)
+  return () => {
+    formItemProviders.delete(provider.id)
+    triggerRef(schemaItems)
+    triggerRef(rules)
+  }
+}
 
 watch(
   () => props.modelValue,
@@ -116,28 +204,7 @@ watch(
   { deep: true },
 )
 // 先从schema中读取默认值
-const schemaValues = sFormSchema.value.formItem.reduce<Fields>((previousValue, currentValue) => {
-  currentValue.eventObject ??= {}
-  if (typeof currentValue.value !== "undefined" && currentValue.prop && (typeof formModel[currentValue.prop] == "undefined" || formModel[currentValue.prop] === "" || formModel[currentValue.prop] === null)) {
-    previousValue[currentValue.prop] = currentValue.value
-  }
-
-  // 处理 choose 类型 items 的默认值
-  if (currentValue.type === "choose" && currentValue.options) {
-    currentValue.options.forEach((option) => {
-      if (option.items) {
-        option.items.forEach((subItem) => {
-          subItem.eventObject ??= {}
-          if (typeof subItem.value !== "undefined" && subItem.prop && (typeof formModel[subItem.prop] == "undefined" || formModel[subItem.prop] === "" || formModel[subItem.prop] === null)) {
-            previousValue[subItem.prop] = subItem.value
-          }
-        })
-      }
-    })
-  }
-
-  return previousValue
-}, {})
+const schemaValues = collectDefaultValues(sFormSchema.value.formItem)
 
 Object.assign(formModel, schemaValues)
 // 如果有默认值，则覆盖
@@ -157,29 +224,7 @@ const schemaItems = computed(() => {
   })
 })
 // 异步设置默认数据
-sFormSchema.value.formItem.forEach(async (item) => {
-  // 异步选项 - 顶层表单项
-  if (item.asyncOptions && (item.autoload || typeof item.autoload == "undefined") && item.asyncOptions instanceof Function) {
-    item.loading = true
-    item.options = await item.asyncOptions(formModel, item, curdFormContext).finally(() => (item.loading = false))
-    if (!instance?.isUnmounted && item.eventObject?.optionLoaded) item.eventObject.optionLoaded(formModel, item, curdFormContext)
-  }
-
-  // 处理 choose 类型的 items 的异步选项
-  if (item.type === "choose" && item.options) {
-    for (const option of item.options) {
-      if (option.items && option.items.length > 0) {
-        for (const subItem of option.items) {
-          if (subItem.asyncOptions && (subItem.autoload || typeof subItem.autoload == "undefined") && subItem.asyncOptions instanceof Function) {
-            subItem.loading = true
-            subItem.options = await subItem.asyncOptions(formModel, subItem, curdFormContext).finally(() => (subItem.loading = false))
-            if (!instance?.isUnmounted && subItem.eventObject?.optionLoaded) subItem.eventObject.optionLoaded(formModel, subItem, curdFormContext)
-          }
-        }
-      }
-    }
-  }
-})
+loadAutoloadFormItems(sFormSchema.value.formItem)
 
 // 生成表单验证规则
 const rules = computed(() => {
@@ -196,7 +241,7 @@ const rules = computed(() => {
     baseRules = sFormSchema.value.rules || {}
   }
 
-  // 合并 choose 类型 items 的验证规则
+  // 合并 choose 类型 items 和自定义组件注册项的验证规则
   const mergedRules: FormRules = { ...baseRules }
   sFormSchema.value.formItem.forEach((formItem) => {
     if (formItem.type === "choose" && formItem.options) {
@@ -211,38 +256,39 @@ const rules = computed(() => {
       })
     }
   })
+  walkBuiltInFormItems(getRegisteredFormItems(), (formItem) => {
+    if (formItem.prop && formItem.rules) {
+      mergedRules[formItem.prop] = formItem.rules
+    }
+  })
 
   return mergedRules
 })
+const normalizeFormItemRules = (rule: FormItemRule | FormItemRule[] | undefined) => {
+  if (!rule) return []
+  return Array.isArray(rule) ? rule : [rule]
+}
+const hasRequiredRule = (prop: string) => {
+  return normalizeFormItemRules(rules.value[prop] as FormItemRule | FormItemRule[] | undefined).some((rule) => Object.prototype.hasOwnProperty.call(rule, "required") && rule.required)
+}
 
 /**
  * 递归查找表单项
  * @param prop 表单项的 prop
  * @returns 找到的表单项对象，包含 parent 信息
  */
-const findFormItem = (prop: string): { item: FormItemType; parent?: FormItemType; path: string } | undefined => {
-  // 先在顶层查找
-  const topLevelItem = sFormSchema.value.formItem.find((a) => a.prop == prop)
-  if (topLevelItem) {
-    return { item: topLevelItem, path: prop }
-  }
+const findFormItem = (prop: string): FormItemSearchResult | undefined => {
+  const schemaResult = findFormItemInItems(sFormSchema.value.formItem, prop)
+  if (schemaResult) return schemaResult
 
-  // 在 choose 类型的 options.items 中递归查找
-  for (const formItem of sFormSchema.value.formItem) {
-    if (formItem.type === "choose" && formItem.options) {
-      for (const option of formItem.options) {
-        if (option.items) {
-          const foundItem = option.items.find((item) => item.prop === prop)
-          if (foundItem) {
-            return { item: foundItem, parent: formItem, path: `${formItem.prop}.${option.value}.${prop}` }
-          }
-        }
-      }
-    }
+  for (const [providerId, getItems] of formItemProviders) {
+    const providerResult = findFormItemInItems(normalizeFormItems(getItems()), prop, providerId)
+    if (providerResult) return providerResult
   }
 
   return undefined
 }
+const hasFormItem = (prop: string) => Boolean(findFormItem(prop))
 
 // 供外部使用
 const validate = (callback: (valid: boolean) => void) => {
@@ -257,18 +303,14 @@ const loadOptions = async (prop: string, option?: unknown) => {
   }
 
   const cur = result.item
-  if (cur.asyncOptions && !instance?.isUnmounted) {
-    cur.loading = true
-    triggerRef(schemaItems)
-    cur.options =
-      (await cur
-        .asyncOptions(formModel, cur, curdFormContext, option)
-        .catch((err) => console.error("loadOptionError", err))
-        .finally(() => (cur.loading = false))) || []
-    triggerRef(schemaItems)
-    if (!instance?.isUnmounted && cur.eventObject?.optionLoaded) cur.eventObject.optionLoaded(formModel, cur, curdFormContext, option)
+  return loadFormItemOptions(cur, option)
+}
+const contextLoadOptions = (prop: string, option?: unknown) => {
+  if (hasFormItem(prop)) {
+    return loadOptions(prop, option)
   }
-  return cur?.options || []
+
+  return props.extendContext?.loadOptions?.(prop, option)
 }
 // 给某个item赋值options
 const setOptions = async (prop: string, options: CurdFormOptionItem[], option?: unknown) => {
@@ -360,13 +402,21 @@ const getFormProps = computed(() => {
   return { ...args }
 })
 
-curdFormContext.loadOptions = loadOptions
+curdFormContext.loadOptions = contextLoadOptions
 curdFormContext.setOptions = setOptions
 curdFormContext.change = onChange
 curdFormContext.formModel = formModel
 curdFormContext.formSchema = props.formSchema
-
-if (props.extendContext) Object.assign(curdFormContext, props.extendContext)
+curdFormContext.findFormItem = findFormItem
+curdFormContext.hasFormItem = hasFormItem
+curdFormContext.registerFormItems = registerFormItems
+curdFormContext.refreshFormItems = refreshFormItems
+
+if (props.extendContext) {
+  const extendContext = { ...props.extendContext }
+  delete extendContext.loadOptions
+  Object.assign(curdFormContext, extendContext)
+}
 
 provide("curdFormContext", curdFormContext)
 onMounted(() => {
@@ -384,6 +434,10 @@ defineExpose({
   getFormItemStyle,
   getFormItemProps,
   validate,
+  findFormItem,
+  hasFormItem,
+  registerFormItems,
+  refreshFormItems,
   loadOptions,
   setOptions,
   onChange,

package/components/CurdForm/src/FormItem.vue

@@ -5,12 +5,12 @@
     <slot name="prefix"></slot>
     <component :is="comp" v-if="comp" v-model="modelRef[props.formItem.prop || '']" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject">
       <template v-for="(item, key) in formItemProps.slots" :key="key" #[key]="slotScope">
-        <component :is="item" v-model="modelRef[props.formItem.prop || '']" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject" />
+        <component :is="item" v-model="modelRef[props.formItem.prop || '']" v-bind="slotScope" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject" />
       </template>
     </component>
     <component :is="props.formItem.type" v-else v-model="modelRef[props.formItem.prop || '']" v-bind="formItemProps" v-on="eventObject">
       <template v-for="(item, key) in formItemProps.slots" :key="key" #[key]="slotScope">
-        <component :is="item" v-model="modelRef[props.formItem.prop || '']" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject" />
+        <component :is="item" v-model="modelRef[props.formItem.prop || '']" v-bind="slotScope" :form-item="props.formItem" :form-model="modelRef" :props="formItemProps" :event-object="eventObject" />
       </template>
     </component>
 

package/components/CurdForm/src/FormTooltip.vue

@@ -10,12 +10,11 @@
 </template>
 <script lang="ts" setup>
 import { Warning } from "@element-plus/icons-vue"
-import { type ElTooltipProps } from "element-plus"
 import { type PropType, computed } from "vue"
-import type { Fields, FormItem } from "./types"
+import type { Fields, FormItem, TooltipProps } from "./types"
 const props = defineProps({
   tooltip: {
-    type: [String, Function] as PropType<string | ((formModel: Fields, formItem: FormItem) => Partial<ElTooltipProps> | string) | Partial<ElTooltipProps>>,
+    type: [String, Function, Object] as PropType<string | ((formModel: Fields, formItem: FormItem) => Partial<TooltipProps> | string) | Partial<TooltipProps>>,
     default: null,
   },
   formItem: {
@@ -40,11 +39,11 @@ const tooltipModel = computed(() => {
   return getTooltip(tooltip)
 })
 // 获取组件tooltip内容
-const getTooltip = (tooltip: Partial<ElTooltipProps> | string): Partial<ElTooltipProps> => {
+const getTooltip = (tooltip: Partial<TooltipProps> | string): Partial<TooltipProps> => {
   if (!tooltip) {
     return { content: "" }
   }
-  let t: Partial<ElTooltipProps> = {}
+  let t: Partial<TooltipProps> = {}
   if (typeof tooltip == "string") {
     t = { content: tooltip }
   } else {

package/components/CurdForm/src/components/schema-form-date-picker.vue

@@ -1,7 +1,7 @@
 <template>
   <el-date-picker v-model="model" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-bind="props" v-on="eventObject">
-    <template v-for="(item, key) in props.props?.slots" :key="key" #[key]="slotScope">
-      <component :is="item" v-model="model" :form-item="props.formItem" :form-model="props.formModel" :props="formItemProps" :event-object="eventObject" />
+    <template v-for="(item, key) in props.slots" :key="key" #[key]="slotScope">
+      <component :is="item" v-model="model" v-bind="slotScope" :form-item="formItem" :form-model="formModel" :props="props" :event-object="eventObject" />
     </template>
   </el-date-picker>
 </template>

package/components/CurdForm/src/components/schema-form-input-number.vue

@@ -1,7 +1,7 @@
 <template>
   <el-input-number v-model="model" v-bind="props.props" v-on="eventObject">
     <template v-for="(item, key) in props.props?.slots" :key="key" #[key]="slotScope">
-      <component :is="item" v-model="model" :form-item="props.formItem" :form-model="props.formModel" :props="props.props" :event-object="eventObject" />
+      <component :is="item" v-model="model" v-bind="slotScope" :form-item="props.formItem" :form-model="props.formModel" :props="props.props" :event-object="eventObject" />
     </template>
   </el-input-number>
 </template>

package/components/CurdForm/src/components/schema-form-time-picker.vue

@@ -1,7 +1,7 @@
 <template>
   <el-time-picker v-model="model" v-bind="props" v-on="eventObject">
-    <template v-for="(item, key) in props.props?.slots" :key="key" #[key]="slotScope">
-      <component :is="item" v-model="model" :form-item="formItem" :form-model="formModel" :props="formItemProps" :event-object="eventObject" />
+    <template v-for="(item, key) in props.slots" :key="key" #[key]="slotScope">
+      <component :is="item" v-model="model" v-bind="slotScope" :form-item="formItem" :form-model="formModel" :props="props" :event-object="eventObject" />
     </template>
   </el-time-picker>
 </template>

package/components/CurdForm/src/types.ts

@@ -1,4 +1,4 @@
-import { ElForm, type FormItemRule, type FormRules, type TooltipTriggerType } from "element-plus"
+import { ElForm, type FormItemRule, type FormRules } from "element-plus"
 import type { Arrayable } from "element-plus/es/utils"
 import { defineComponent, type PropType, type VNode } from "vue"
 import type { OptionItem } from "../../ConstantStatus"
@@ -32,7 +32,7 @@ export interface FormItem {
   hidden?: boolean | ((model: Fields) => boolean)
   rules?: Arrayable<FormItemRule>
   props?: FormItemPropObject | ((formModel: Fields, formItem: FormItem) => FormItemPropObject)
-  formItemProps?: FormItemPropObject | ((formModel: Fields, formItem: FormItem) => void)
+  formItemProps?: FormItemPropObject | ((formModel: Fields, formItem: FormItem) => FormItemPropObject)
   labelWidth?: string | number
   labelPosition?: "left" | "right" | "top" | string
   span?: number
@@ -47,37 +47,41 @@ export interface FormItem {
 export type FormItemTypeEmun = "input" | "select" | "radio" | "checkbox" | "input-number" | "switch" | "file" | "date-picker" | "time-picker" | "color-picker" | "value" | "tree-select" | "autocomplete" | "choose"
 export interface FormItemPropObject extends Fields {
   slots?: Record<string, (props?: FormItemPropObject) => VNode | VNode[] | string | null>
-  all?: boolean | CurdFormOptionItem
+  all?: boolean | OptionItem
   empty?: string | VNode
   noDataText?: string
   style?: Record<string, string> | string
 }
-export interface TooltipProps {
-  effect: "dark" | "light"
-  content: string
-  rawContent: boolean
-  placement: import("element-plus/es/components/popper").Placement
-  disabled: boolean
-  offset: number
-  transition: string
-  popperOptions: unknown
-  showAfter: number
-  showArrow: boolean
-  hideAfter: number
-  autoClose: number
-  popperClass: string
-  enterable: boolean
-  teleported: boolean
-  trigger: TooltipTriggerType
+export interface TooltipProps extends Record<string, unknown> {
+  effect?: "dark" | "light" | string
+  content?: string
+  rawContent?: boolean
+  placement?: string
+  disabled?: boolean
+  offset?: number
+  transition?: string
+  popperOptions?: unknown
+  showAfter?: number
+  showArrow?: boolean
+  hideAfter?: number
+  autoClose?: number
+  popperClass?: string
+  enterable?: boolean
+  teleported?: boolean
+  trigger?: string | string[]
 }
 export interface FormContext {
-  loadOptions: (prop: string, config?: Fields) => void
-  setOptions: (prop: string, options: CurdFormOptionItem[], config?: unknown) => void
+  loadOptions: (prop: string, config?: unknown) => void | Promise<CurdFormOptionItem[]> | CurdFormOptionItem[]
+  setOptions: (prop: string, options: CurdFormOptionItem[], config?: unknown) => void | Promise<void>
   change: (formModel: Fields, formItem: FormItem) => void
   formModel: Fields
   formSchema: FormSchema
   formRef: InstanceType<typeof ElForm> | undefined
   components: Record<string, unknown>
+  findFormItem?: (prop: string) => FormItemSearchResult | undefined
+  hasFormItem?: (prop: string) => boolean
+  registerFormItems?: (provider: FormItemProvider) => () => void
+  refreshFormItems?: (providerId?: string | symbol) => void
 }
 export interface Fields {
   [key: string]: unknown
@@ -92,13 +96,24 @@ export interface CurdFormOptionItem extends OptionItem {
   /** 内联表单项定义，用于 choose 类型 */
   items?: FormItem[]
 }
+export interface FormItemProvider {
+  id: string | symbol
+  getItems: () => FormItem[] | undefined | null
+}
+export interface FormItemSearchResult {
+  item: FormItem
+  parent?: FormItem
+  path: string
+  providerId?: string | symbol
+}
 // interface EventObjectDefault {
 //   change?: (formModel: Fields, formItem: FormItem, proxy: any) => void
 // }
+export type EventObjectHandler = (formModel: Fields, formItem: FormItem, context?: FormContext, ...args: unknown[]) => void | boolean
 export interface EventObject {
-  change?: (formModel: Fields, formItem: FormItem, context: FormContext, ...args: unknown[]) => void | boolean
-  optionLoaded?: (formModel: Fields, formItem: FormItem, context: FormContext, config?: unknown) => void
-  [key: string]: ((formModel: Fields, formItem: FormItem, context: FormContext, config?: unknown) => void) | undefined
+  change?: EventObjectHandler
+  optionLoaded?: EventObjectHandler
+  [key: string]: EventObjectHandler | undefined
 }
 // export interface OptionItem {
 //   label: string
@@ -121,7 +136,7 @@ export const FormItemProps = {
     default: () => ({}),
   },
   eventObject: {
-    type: Object as PropType<Fields & { change: (formModel: Fields, formItem: FormItem) => void | boolean }>,
+    type: Object as PropType<EventObject>,
     default: () => ({}),
   },
   modelValue: {

package/components/CurdGroupForm/src/CurdGroupForm.vue

@@ -70,13 +70,11 @@ const loadOptions = (prop: string, config?: unknown) => {
   let has = false
   for (const index in props.schema.items) {
     const group = props.schema.items[index]
-    const formItem = group.schema.formItem
-    for (const i in formItem) {
-      const item = formItem[i]
-      if (item.prop == prop) {
-        has = true
-        formRef.value[(group.step || "") + group.groupName + index]?.loadOptions(prop, config)
-      }
+    const form = formRef.value[(group.step || "") + group.groupName + index]
+    const hasFormItem = form?.hasFormItem ? form.hasFormItem(prop) : group.schema.formItem.some((item) => item.prop == prop)
+    if (hasFormItem) {
+      has = true
+      form?.loadOptions(prop, config)
     }
   }
   if (!has) {

package/components/CurdGroupForm/src/hooks/useFormHook.ts

@@ -1,21 +1,21 @@
 import { CurdForm } from "easybill-ui"
 import { ref, type Ref } from "vue"
-import type { Schema, SchemaItem } from "../../types"
+import type { CurdGroupFormSchema, CurdGroupFormSchemaItem } from "../../types"
 
 export const useFormHook = (): {
   form: Ref<Record<string, unknown>>
   formRef: Ref<Record<string, InstanceType<typeof CurdForm>>>
   submit: () => void
-  schema: Ref<Schema | undefined>
+  schema: Ref<CurdGroupFormSchema | undefined>
   validate: (callback: (valid: boolean) => void) => void
   loading: Ref<boolean>
-  schemaItemHidden: (item: SchemaItem) => boolean
+  schemaItemHidden: (item: CurdGroupFormSchemaItem) => boolean
 } => {
   const formRef = ref<Record<string, InstanceType<typeof CurdForm>>>({})
   const form = ref<Record<string, unknown>>({})
-  const schema = ref<Schema>()
+  const schema = ref<CurdGroupFormSchema>()
   const loading = ref(false)
-  const schemaItemHidden = (item: SchemaItem) => {
+  const schemaItemHidden = (item: CurdGroupFormSchemaItem) => {
     if (item?.hidden && item?.hidden instanceof Function) {
       return item.hidden(form.value, item)
     }

package/components/CurdTable/src/CurdTable.vue

@@ -21,7 +21,7 @@
           <el-table-column v-else-if="item.type == 'selection'" type="selection" v-bind="item" />
           <STableItem v-else :ref="getTableItemRef(item.prop)" :schema="item" :is-slot="!!$slots[item.prop]" :is-slot-header="!!$slots[item.prop + 'Header']" :option="option" @search="onItemChange">
             <template v-for="(_slot, key) in $slots" :key="key" #[key]="scopeChild">
-              <slot :name="key" v-bind="scopeChild"></slot>
+              <slot :name="key" v-bind="normalizeSlotScope(scopeChild)"></slot>
             </template>
           </STableItem>
         </template>
@@ -133,12 +133,12 @@ const props = defineProps({
   },
   // 自定义创建函数
   fetchCreate: {
-    type: Function as PropType<(formModel: Fields) => Promise<void>>,
+    type: Function as PropType<(formModel: Fields) => void | boolean | Promise<void | boolean>>,
     default: null,
   },
   // 自定义编辑函数
   fetchEdit: {
-    type: Function as PropType<(row: unknown, formItem: unknown, index: number) => Promise<void>>,
+    type: Function as PropType<(formModel: Fields, row: Record<string, unknown>, index?: number) => void | boolean | Promise<void | boolean>>,
 
     default: null,
   },
@@ -248,6 +248,7 @@ const fetchData = async (opt?: FetchDataOpt) => {
   }
 }
 const tableItemRefs: Ref<Record<string, InstanceType<typeof STableItem>>> = ref({})
+const normalizeSlotScope = (scope: unknown) => (scope && typeof scope === "object" ? scope : {})
 const getTableItemRef = (prop: string) => {
   return (el: unknown) => {
     if (el) {
@@ -404,8 +405,10 @@ const create = (row?: Record<string, unknown>, index?: number) => {
     fields: row as Fields,
     width: formAttrs?.width || 600,
     handleOk: async (modelRef: Fields) => {
-      const fun = row ? "fetchEdit" : "fetchCreate"
-      return await (props[fun] && props[fun](modelRef, row, index))
+      if (row) {
+        return await props.fetchEdit?.(modelRef, row, index)
+      }
+      return await props.fetchCreate?.(modelRef)
     },
     ...eoptions,
   })

package/components/CurdTable/src/STableItem.vue

@@ -14,7 +14,7 @@
         <template v-for="item in props.schema.children" :key="item.label">
           <STableItem :ref="(el) => (tableItemRefs[item.prop] = el)" :schema="item" :is-slot="!!$slots[item.prop]" :is-slot-header="!!$slots[item.prop + 'Header']" :option="option" @search="onItemChange">
             <template v-for="(_slot, key) in $slots" :key="key" #[key]="scopeChild">
-              <slot :name="key" v-bind="scopeChild"></slot>
+              <slot :name="key" v-bind="normalizeSlotScope(scopeChild)"></slot>
             </template>
           </STableItem>
         </template>
@@ -44,6 +44,7 @@ import { useLocale } from "easybill-ui"
 import { ElMessage } from "element-plus"
 import { computed, inject, type PropType, ref, type Ref } from "vue"
 import ConstantStatus from "../../ConstantStatus"
+import type { Fields } from "../../CurdForm"
 import type { ParamsItem } from "../../TableFilter"
 import { copy } from "../utils/common"
 import STableItemFilter from "./STableItemFilter.vue"
@@ -72,6 +73,7 @@ const props = defineProps({
     default: () => ({}),
   },
 })
+defineSlots<Record<string, (scope: Record<string, unknown>) => unknown>>()
 const selectParams = inject<Ref<Array<ParamsItem>>>("selectParams")
 const filterSchema = computed(() => {
   let result = selectParams?.value.filter((a) => a.prop == props.schema.filter?.prop || a.prop == props.schema.prop) //getFilterFromColumn(props.schema)
@@ -94,7 +96,7 @@ const copyValue = async (value: unknown) => {
   ElMessage.success(t("el.table.clickCopySuccess"))
 }
 const emits = defineEmits(["search"])
-const search = inject("search")
+const search = inject<Fields>("search", {})
 const getColumnHidden = computed(() => {
   if (props.schema.hidden && props.schema.hidden instanceof Function) {
     return props.schema.hidden(props.schema, search)
@@ -109,6 +111,7 @@ const onSearch = (opt: { listQuery: Record<string, unknown> }) => {
   if (tableItemFilterRef.value) tableItemFilterRef.value.search(opt)
 }
 const tableItemRefs: Ref<Record<string, unknown>> = ref({})
+const normalizeSlotScope = (scope: unknown) => (scope && typeof scope === "object" ? scope : {})
 const onItemChange = (prop: string, value: string) => {
   emits("search", prop, value, filterSchema.value)
 }

package/components/CurdTable/src/types.ts

@@ -8,6 +8,8 @@ import type { EventObject, FormSchema } from "./../../CurdForm/src/types"
 import type { VNode } from "vue"
 import type { FormDialogOptions } from "../../FormDialog/src/types"
 
+export type MaybePromise<T> = T | Promise<T>
+
 export interface CurdTableProps<T = unknown> extends Partial<TableProps<T>> {
   rowKey?: string
   data?: T[]
@@ -15,22 +17,22 @@ export interface CurdTableProps<T = unknown> extends Partial<TableProps<T>> {
   pageOptions?: { pageIndex?: number; pageSize?: number; total?: number } & Fields
   option?: Partial<PropOption>
   fetchData?: (opt: FeachDataParam) => Promise<{ total?: number; list?: T[] } | void>
-  fetchCreate?: (formModel: Fields) => Promise<void>
-  fetchEdit?: (row: T) => Promise<void>
-  fetchRemove?: (row: T) => Promise<void>
+  fetchCreate?: (formModel: Fields) => MaybePromise<void | boolean>
+  fetchEdit?: (formModel: Fields, row: T, index?: number) => MaybePromise<void | boolean>
+  fetchRemove?: (row: T, index: number) => Promise<void>
 }
 // extends Partial<TableColumnCtx<T>>
 export interface ColumnItemCtx<T> extends Partial<TableColumnCtx<T>> {
   prop: string
   label: string
   type?: string
-  hidden?: boolean | ((item: ColumnItemCtx<T>, search: (opt: { listQuery: Record<string, unknown> }) => void) => boolean)
+  hidden?: boolean | ((item: ColumnItemCtx<T>, query: Fields) => boolean)
   neverShow?: boolean // 表示不在列控制器里
   children?: ColumnItem<T>[]
   options?: Array<OptionItem> //数据字典
   asyncOptions?: () => Promise<OptionItem[]>
   eventObject?: EventObject
-  form?: Partial<FormItemType> | ((formItem: FormItemType, row: T, query: Fields) => Partial<FormItemType>)
+  form?: Partial<FormItemType> | ((column: ColumnItemCtx<T>, row: T, query: Fields) => Partial<FormItemType>)
   filter?: ColumnItemFilter
   empty?: string | unknown
   detail?: ColumnItemDetail

package/components/DetailInfo/src/types.ts

@@ -14,8 +14,8 @@ export interface DetailDataItem extends Record<string, unknown> {
   labelWidth?: number | string
   props?: Record<string, string>
   slot?: string
-  tooltip?: string | import("element-plus/es/components/tooltip").ElTooltipProps
-  labelPosition?: "string" | "left" | "right" | "center"
+  tooltip?: string | ElTooltipProps
+  labelPosition?: string | "left" | "right" | "center" | "top"
   labelStyle?: string | Record<string, string | number>
   showOverflowTooltip?: boolean | string | Partial<ElTooltipProps>
   rawContent?: boolean

package/components/FormDialog/src/FormDialog.vue

@@ -28,10 +28,11 @@
 
 <script lang="ts">
 import { CurdForm, CurdGroupForm, type CurdGroupFormSchema, useLocale } from "easybill-ui"
-import { computed, defineComponent, type PropType, provide, reactive, ref, type Ref, toRefs, useAttrs } from "vue"
+import { type Component, computed, defineComponent, type PropType, provide, reactive, ref, type Ref, toRefs, useAttrs } from "vue"
 import { type Fields, type FormSchema } from "../../CurdForm"
 import { useStepList } from "./hooks/useStepList"
 import { useStepNavigation } from "./hooks/useStepNavigation"
+import type { FormDialogHandleOk } from "./types"
 export default defineComponent({
   name: "FormDialog",
   components: {
@@ -69,7 +70,7 @@ export default defineComponent({
     },
     // 点击确定
     handleOk: {
-      type: Function,
+      type: Function as PropType<FormDialogHandleOk>,
       default: null,
     },
     // 关闭的回调,通过类型判断是点取消按钮还是右上角关闭按钮
@@ -99,11 +100,11 @@ export default defineComponent({
       default: "dialog",
     },
     stepComponent: {
-      type: Object,
+      type: Object as PropType<Component>,
       default: null,
     },
     footerComponent: {
-      type: Object,
+      type: Object as PropType<Component>,
       default: null,
     },
   },
@@ -151,7 +152,7 @@ export default defineComponent({
             state.confirmLoading = false
             return
           }
-          const pass = await (props.handleOk && props.handleOk(form.value, state)).finally(() => (state.confirmLoading = false))
+          const pass = await Promise.resolve(props.handleOk?.(form.value, state)).finally(() => (state.confirmLoading = false))
           if (typeof pass == "undefined" || pass) {
             state.visible = false
             onCancel()

package/components/FormDialog/src/types.ts

@@ -1,32 +1,37 @@
 import type { DialogProps, StepProps } from "element-plus"
+import type { Component, Ref } from "vue"
 import type { Fields, FormContext, FormSchema } from "../../CurdForm"
 import type { CurdGroupFormSchema } from "../../CurdGroupForm/types"
 import type { StepItem } from "./hooks/useStepList"
 
+export interface FormDialogState {
+  visible: boolean
+  confirmLoading: boolean
+}
+
+export type FormDialogHandleOk = (modelRef: Fields, state: FormDialogState) => void | boolean | Promise<void | boolean>
+
 export interface FormDialogOptions extends Partial<DialogProps> {
   title?: string
   width?: string | number
   fields?: Fields
   formSchema?: FormSchema
   groupSchema?: CurdGroupFormSchema
-  handleOk?: (modelRef: Fields) => Promise<void>
+  handleOk?: FormDialogHandleOk
   handleClose?: (e: "close" | "cancel") => void
-  setForm?: (form: Fields) => void
+  setForm?: (form: Ref<Fields>) => void
   stepProps?: Partial<StepProps & Fields>
   extendContext?: Partial<FormContext>
   confirmBtnText?: string
   cancelBtnText?: string
-  stepComponent?: object
-  footerComponent?: object
+  stepComponent?: Component
+  footerComponent?: Component
   mode?: "dialog" | "drawer"
 }
 
 export interface FormDialogContext {
   form: Fields
-  state: {
-    visible: boolean
-    confirmLoading: boolean
-  }
+  state: FormDialogState
   stepList: StepItem[]
   activeStep: { value: number }
   loadOptions: (prop: string, config?: unknown) => void

package/components/TableFilter/types.ts

@@ -1,5 +1,5 @@
 import { defineComponent } from "vue"
-import type { FormContext, FormItem, FormItemTypeEmun } from "../CurdForm"
+import type { CurdFormOptionItem, FormContext, FormItem, FormItemTypeEmun } from "../CurdForm"
 export interface ParamsItem extends FormItem {
   type?: FormItemTypeEmun | ReturnType<typeof defineComponent>
   tableKey?: Array<string>
@@ -9,10 +9,16 @@ export interface ParamsItem extends FormItem {
   tagNames?: string
 }
 export type FilterItem = ParamsItem
-export interface TableFilterContext extends FormContext {
+export interface TableFilterContext {
   loadOptions: (prop: string, config?: unknown) => void
+  setOptions: (prop: string, options: CurdFormOptionItem[], config?: unknown) => void
   setValue: (prop: string, value: unknown) => void
   search: () => void
+  formModel: ListQuery
+  components: FormContext["components"]
+  change: FormContext["change"]
+  formRef?: FormContext["formRef"]
+  formSchema?: FormContext["formSchema"]
 }
 
 export interface ListQuery {

package/package.json

@@ -1,11 +1,66 @@
 {
   "name": "easybill-ui",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "A component library for easybill",
   "author": "tuchongyang <779311998@qq.com>",
   "private": false,
   "license": "ISC",
+  "scripts": {
+    "typecheck": "vue-tsc -p tsconfig.typecheck.json --noEmit --skipLibCheck"
+  },
   "main": "index.ts",
+  "types": "index.ts",
+  "exports": {
+    ".": {
+      "types": "./index.ts",
+      "import": "./index.ts",
+      "default": "./index.ts"
+    },
+    "./index": {
+      "types": "./index.ts",
+      "import": "./index.ts",
+      "default": "./index.ts"
+    },
+    "./index.ts": {
+      "types": "./index.ts",
+      "import": "./index.ts",
+      "default": "./index.ts"
+    },
+    "./components/CurdForm/src/types": {
+      "types": "./components/CurdForm/src/types.ts",
+      "import": "./components/CurdForm/src/types.ts",
+      "default": "./components/CurdForm/src/types.ts"
+    },
+    "./components/*": {
+      "types": "./components/*",
+      "import": "./components/*",
+      "default": "./components/*"
+    },
+    "./utils/*": {
+      "types": "./utils/*",
+      "import": "./utils/*",
+      "default": "./utils/*"
+    },
+    "./locale/*": {
+      "types": "./locale/*",
+      "import": "./locale/*",
+      "default": "./locale/*"
+    },
+    "./theme-chalk/*": {
+      "types": "./theme-chalk/*",
+      "import": "./theme-chalk/*",
+      "default": "./theme-chalk/*"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "index.ts",
+    "components",
+    "utils",
+    "locale",
+    "theme-chalk",
+    "README.md"
+  ],
   "peerDependencies": {
     "@element-plus/icons-vue": "^2.0.6",
     "element-plus": "^2.7.0",

package/utils/hooks/useLocal.ts

@@ -1,23 +1,25 @@
-import { computed, isRef, ref, unref, type ComputedRef } from "vue"
+import { computed, isRef, ref, type ComputedRef, type Ref } from "vue"
 import en from "../../locale/lang/en"
 
-import type { MaybeRef } from "@vueuse/core"
 import { useGlobalConfig } from "easybill-ui"
-import type { Ref } from "vue"
 import type { Language } from "../../locale"
 
 export type TranslatorOption = Record<string, string | number> | string[]
 export type Translator = (path: string, option?: TranslatorOption) => string
+export type LocaleSource = Language | Ref<Language> | ComputedRef<Language>
+export type LocaleRef = Ref<Language> | ComputedRef<Language>
 export type LocaleContext = {
-  locale: Ref<Language>
-  lang: Ref<string>
+  locale: LocaleRef
+  lang: ComputedRef<string>
   t: Translator
 }
 
+const resolveLocale = (locale: LocaleSource): Language => (isRef(locale) ? locale.value : locale)
+
 export const buildTranslator =
-  (locale: MaybeRef<Language>): Translator =>
+  (locale: LocaleSource): Translator =>
   (path, option) =>
-    translate(path, option, unref(locale))
+    translate(path, option, resolveLocale(locale))
 
 export const translate = (path: string, option: undefined | TranslatorOption, locale: Language): string => {
   const value = get(locale, path, path) as string
@@ -27,9 +29,9 @@ export const translate = (path: string, option: undefined | TranslatorOption, lo
   return value.replace(/\{(\w+)\}/g, (_, key) => `${option?.[key] ?? `{${key}}`}`)
 }
 
-export const buildLocaleContext = (locale: ComputedRef<Language>): LocaleContext => {
-  const lang = computed(() => unref(locale).name)
-  const localeRef = isRef(locale) ? locale : ref(locale)
+export const buildLocaleContext = (locale: LocaleSource): LocaleContext => {
+  const localeRef = (isRef(locale) ? locale : ref(locale)) as LocaleRef
+  const lang = computed(() => localeRef.value.name)
   return {
     lang,
     locale: localeRef,