easybill-ui 1.3.2 → 1.3.5

package/components/CurdForm/src/CurdForm.vue

@@ -40,19 +40,20 @@
           <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']">
@@ -67,7 +68,7 @@
 import { ElForm, 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 +98,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 +212,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 +232,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 +249,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,6 +264,11 @@ const rules = computed(() => {
       })
     }
   })
+  walkBuiltInFormItems(getRegisteredFormItems(), (formItem) => {
+    if (formItem.prop && formItem.rules) {
+      mergedRules[formItem.prop] = formItem.rules
+    }
+  })
 
   return mergedRules
 })
@@ -220,29 +278,18 @@ const rules = computed(() => {
  * @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 +304,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 +403,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 +435,10 @@ defineExpose({
   getFormItemStyle,
   getFormItemProps,
   validate,
+  findFormItem,
+  hasFormItem,
+  registerFormItems,
+  refreshFormItems,
   loadOptions,
   setOptions,
   onChange,

package/components/CurdForm/src/components/schema-form-cascader.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-cascader v-model="model" :options="options" v-bind="props" v-on="eventObject"></el-cascader>
+  <el-cascader v-model="model" :options="options" v-bind="props.props" v-on="props.eventObject"></el-cascader>
 </template>
 <script lang="ts" setup>
 import { type CascaderOption, type CascaderValue } from "element-plus"

package/components/CurdForm/src/components/schema-form-select.vue

@@ -9,7 +9,7 @@
       </el-option>
     </template>
     <template v-for="(item, key) in props?.slots" :key="key" #[key]>
-      <component :is="item" v-model="model" :form-item="props.formItem" :form-model="props.formModel" :props="props" :event-object="eventObject" />
+      <component :is="item" v-model="model" :formItem="formItem" :formModel="formModel" :props="props" :event-object="eventObject" />
     </template>
   </el-select>
 </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="props.formItem" :form-model="props.formModel" :props="formItemProps" :event-object="eventObject" />
+      <component :is="item" v-model="model" :form-item="formItem" :form-model="formModel" :props="formItemProps" :event-object="eventObject" />
     </template>
   </el-time-picker>
 </template>

package/components/CurdForm/src/types.ts

@@ -71,13 +71,17 @@ export interface TooltipProps {
   trigger: TooltipTriggerType
 }
 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,6 +96,16 @@ 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
 // }

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/FormDialog/src/types.ts

@@ -1,6 +1,6 @@
-import type { CurdGroupFormSchema } from "../../CurdGroupForm/types"
 import type { DialogProps, StepProps } from "element-plus"
 import type { Fields, FormContext, FormSchema } from "../../CurdForm"
+import type { CurdGroupFormSchema } from "../../CurdGroupForm/types"
 import type { StepItem } from "./hooks/useStepList"
 
 export interface FormDialogOptions extends Partial<DialogProps> {
@@ -18,6 +18,7 @@ export interface FormDialogOptions extends Partial<DialogProps> {
   cancelBtnText?: string
   stepComponent?: object
   footerComponent?: object
+  mode?: "dialog" | "drawer"
 }
 
 export interface FormDialogContext {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easybill-ui",
-  "version": "1.3.2",
+  "version": "1.3.5",
   "description": "A component library for easybill",
   "author": "tuchongyang <779311998@qq.com>",
   "private": false,

package/utils/hooks/useGlobalConfig.ts

@@ -30,7 +30,7 @@ const mergeConfig = (a: GlobalConfig, b: Partial<GlobalConfig>) => {
 }
 
 export interface GlobalConfig {
-  size: "default" | "small" | "large"
+  size?: "default" | "small" | "large"
   form?: FormConfig
   locale?: Language
 }