xiangyuan-app/src/components/dynamic/index.ts

import type { RuleItem } from "async-validator";
import type { FormInstance } from "../form/Form.vue";
import type { FieldProps } from "../form/Field.vue";
import type { Ref } from "vue";

export interface FormDefine {
  /**
   * Todo: page
   */
  type?: 'flat'|'page'|'group',
  props?: any;
  /**
   * 表单属性嵌套类型
   * * flat: 扁平属性，直接在表单对象上定义属性
   * * nest: 嵌套属性，属性值为对象，对象下有子属性
   * * array: 数组属性，属性值为数组，数组下有子属性
   */
  propNestType?: 'flat'|'nest'|'array',
  /**
   * 子条目定义
   */
  items: FormDefineItem[];
}


/**
 * 表单动态属性定义
 */
export declare type IFormItemCallback<T> = {
  /**
   * 预留，暂未使用
   */
  type?: string;
  /**
   * @param model 当前表单条目的值
   * @param rawModel 整个 form 的值 （最常用，当两个关联组件距离较远时，可以从顶层的 rawModel 里获取）
   * @param parentModel 父表单元素的值 （上一级的值，只在列表场景的使用，例如列表某个元素的父级就是整个 item）
   * @param item 当前表单条目信息
   */
  callback: (model: any, rawModel: any, parentModel: any, params: { 
    formGlobalParams: any, 
    item: FormDefineItem
  }) => T;
};
export type IFormItemCallbackAdditionalProps<T> = { [P in keyof T]?: T[P]|IFormItemCallback<T[P]> }

/**
 * 表单动态组件属性定义
 */
export interface FormItemComponentAdditionalDefine {
  /**
   * 组件名称
   */
  name: string,
  /**
   * 是否需要显示右侧箭头
   */
  needArrow?: boolean,
  /**
   * 传递给表单条目的参数
   */
  itemProps?: FieldProps,
  /**
   * 传递给组件的参数
   */
  props?: Record<string, unknown>|unknown,
}

export interface FormDefineItem {
  /**
   * 表单项显示标签
   */
  label?: string|IFormItemCallback<string>;
  /**
   * 属性名称
   */
  name: string;
  fullName?: string;
  /**
   * 表单项组件类型
   */
  type?: string;
  /**
   * 传递给条目组件的参数。（允许动态回调）
   */
  params?: Record<string, unknown|IFormItemCallback<unknown>>|unknown;
  /**
   * 传递给FormItem组件的参数
   */
  itemParams?: any;
  /**
   * 默认值，用于默认数据生成
   */
  defaultValue?: any;
  /**
   * 当前条目的校验规则
   */
  rules?: RuleItem[],
  /**
   * 子条目，在对象中为对象子属性，在数组中为数组条目(单条目按单项控制，多条目按对象看待控制)
   */
  children?: FormDefine,

  //todo：联动

  /**
   * 是否显示。当为undefined时，默认显示。
   */
  show?: boolean|IFormItemCallback<boolean>|undefined,

  /**
   * 当前条目组件加载时发生事件
   * @param topModel 顶层数据对象
   * @param ref 组件实例
   * @returns 
   */
  onMounted?: (topModel: any, ref: any) => void;
  /**
   * 当前条目组件卸载时发生事件
   * @param topModel 顶层数据对象
   * @param ref 组件实例
   * @returns 
   */
  onBeforeUnMount?: (topModel: any, ref: any) => void;
  /**
   * 当前条目数据更改时发生事件
   * @param oldValue 旧值
   * @param newValue 新值
   * @param topModel 顶层数据对象
   * @param ref 组件实例
   * @returns 
   */
  onChange?: (oldValue: any, newValue: any, topModel: any, ref: any) => void;
}
export interface FormExport {
  /**
   * 初始化表单数据对象
   */
  initFormData(data: () => any): void;
  /**
   * 获取表单数据模型
   * @returns 表单数据模型
   */
  getFormModel(): Ref<Record<string, any>>;
  /**
   * 获取表单实例
   * @returns 表单实例
   */
  getFormRef(): FormInstance;
  /**
   * 获取表单数据
   * @returns 表单数据
   */
  getFormData(): Record<string, any>;
  /**
   * 加载表单数据
   * @param value 表单数据
   */
  loadFormData(value?: Record<string, any>): void;
  /**
   * 提交表单
   */
  submitForm<T = Record<string, any>>(): Promise<T|null>;
  /**
   * 重置整个表单数据
   */
  resetForm(): void;
}