Skip to content

类型声明

RuleItem / FormRules

字段校验规则类型。

ts
export type RuleType =
  | 'required'
  | 'min'
  | 'max'
  | 'pattern'
  | 'builtin'
  | 'enum'
  | 'custom'
  | 'jsExpr'

export type RuleItem = {
  type?: RuleType
  value?: any
  message?: string
  trigger?: 'blur' | 'change'
}

export type FormRules = RuleItem[]

FormLinkage

表单项联动配置(值联动 / 属性联动)。

ts
type FormLinkage = {
  target: string
  condition?: any
  type: 'attr' | 'data'
  value?: any
  path?: string
  customPath?: string
}

FormItemType

JsonSchema 的单个表单项。

ts
interface FormItemType {
  label?: string
  labelWidth?: number
  labelAlign?: 'top' | 'left' | 'right'
  size?: 'default' | 'small' | 'large'
  name: string
  required?: boolean
  help?: string
  alert?: string
  items?: FormItemType[]
  when?: boolean | string
  show?: boolean | string
  rules?: FormRules
  class?: any
  style?: any
  linkages?: FormLinkage[]
  component: string
  componentProps?: Record<string, any>
  defaultValue?: any
  designKey?: string
}

FormSchema

JsonSchema 的表单级配置。

ts
type FormSchema = {
  labelWidth?: number
  labelAlign?: 'top' | 'left' | 'right'
  colon?: boolean
  size?: 'default' | 'small' | 'large'
  disabled?: boolean
  hideRequiredAsterisk?: boolean
  scrollToError?: boolean
  initialValues?: Record<string, any>
  items?: FormItemType[]
  style?: any
  styleBlock?: string
  formId?: string
  submitBtn?: boolean
  resetBtn?: boolean
}

FormElement

表单设计器的组件配置(扩展组件时使用)。

ts
type FormElement = {
  title: string
  component: string
  render: string | VNode | Component
  icon: string | VNode | Component
  type: 'assist' | 'layout' | 'basic' | 'high'
  order: number
  modelName?: string
  attrSchema: FormSchema
}

TemplateData

设计器的左侧模版数据

ts
type TemplateData = { name: string; schema: FormSchema; id?: string }[]

FormRenderProps

ts
export interface FormRenderProps {
  schema: FormSchema
  schemaContext?: Record<string, any>
  design?: boolean
  read?: boolean
}

FormRenderEmits

ts
export interface FormRenderEmits {
  change: [values: Record<string, any>]
  finish: [values: Record<string, any>]
  failed: [
    errors: {
      message?: string
      fieldValue?: any
      field?: string
    }[]
  ]
  reset: []
  fieldChange: [path: string, value: any]
}

FormInstance

表单实例(FormRender 暴露能力)。

ts
interface FormInstance {
  getSchema: () => FormSchema
  getSchemaContext: () => Record<string, any> | undefined
  getDesign: () => boolean | undefined
  getRead: () => boolean | undefined
  getSelectData: () => Record<string, Record<string, any>>
  getContext: () => Record<string, any>
  getValues: () => Record<string, any>
  setValues: (values: Record<string, any>) => void
  getFieldValue: (path: string) => any
  setFieldValue: (path: string, value: any) => void
  updateSelectData: (key: string, value: Record<string, any>) => void
  setFieldAttr: (name: string, path: string, value: any) => void
  validate: () => FormValidationResult | undefined
  resetFields: (names?: string[]) => void
  submit: () => void
}