@aspire-ui/element-component-pro 1.0.25 → 1.0.27

package/src/types/index.ts

@@ -285,3 +285,244 @@ export interface DescriptionActionType {
   setData: (data: Record<string, unknown>) => Promise<void>
   getData: () => Record<string, unknown>
 }
+
+// ---------------------------------------------------------------------------
+// ProTableForm
+// ---------------------------------------------------------------------------
+
+/** el-form 实例 */
+export interface FormInstance {
+  validate?(cb?: (valid: boolean) => void): Promise<unknown> | void
+  clearValidate?(props?: string | string[]): void
+  resetFields?(): void
+  scrollToField?(name: string): void
+}
+
+/** 指标列单元格渲染方式 */
+export type ProTableFormBuiltInComponent =
+  | 'input'
+  | 'input-number'
+  | 'formatted-number'
+  | 'select'
+  | 'api-select'
+  | 'tree-select'
+  | 'date-picker'
+  | 'date-range'
+  | 'switch'
+  | 'cascader'
+  | 'checkbox'
+  | 'radio'
+  | 'slot'
+
+/** 自定义渲染函数，返回文本或 VNode；参数为 { row, value, column } */
+export type ProTableFormColumnRender = (params: {
+  row: Record<string, unknown>
+  value: unknown
+  column: ProTableFormColumn | ProTableFormColumnChild
+}) => string | VNode
+
+/** 指标列（或含友商名称等任意 key） */
+export interface ProTableFormColumn {
+  /** 对应 model 中对象字段名 */
+  key: string
+  title: string
+  required?: boolean
+  /** 单元格渲染方式：input / formatted-number / slot */
+  component?: ProTableFormBuiltInComponent
+  /** component 为 slot 时必填，对应插槽名为 `cell-{slotName}` */
+  slotName?: string
+  /**
+   * 自定义渲染，返回 string（文本）或 VNode（组件）。
+   * 若返回 string 且不为纯数字，单元格自动包裹 `el-form-item` 做校验；
+   * 若返回 VNode 则直接渲染，不包裹 form-item（适合纯展示列）。
+   */
+  render?: ProTableFormColumnRender
+  placeholder?: string
+  /** 列宽（优先级低于 minWidth） */
+  width?: number
+  /** 列最小宽度 */
+  minWidth?: number
+  /**
+   * 透传给单元格组件。`component === 'formatted-number'` 时在此传入
+   * `integerDigits`、`decimalPlaces`、`rounding`、`inputLimit` 等（与 FormattedNumberInput 一致）。
+   * 支持函数形式，参数为 { row, value, column }，返回要合并到组件上的属性。
+   */
+  /**
+   * 透传给单元格组件。`component === 'formatted-number'` 时在此传入
+   * `integerDigits`、`decimalPlaces`、`rounding`、`inputLimit` 等。
+   * 支持函数形式，参数为 { row, value, column, action }，返回要合并到组件上的属性。
+   */
+  componentProps?: Record<string, unknown> | ((params: CellComponentPropsParams) => Record<string, unknown>)
+  /** 动态校验规则 */
+  dynamicRules?: unknown[] | ((params: {
+    row: Record<string, unknown>
+    value: unknown
+    column: ProTableFormColumn
+  }) => unknown[])
+  /** 列级校验规则（会与 dynamicRules/required 合并） */
+  rules?: unknown[]
+  /**
+   * 多级表头子列。
+   * 配置后本列作为分组标题行，不渲染数据单元格，子列渲染数据。
+   */
+  children?: ProTableFormColumnChild[]
+  /**
+   * 本列是否渲染单元格（默认 true）。children 存在时自动为 false。
+   */
+  hideInTable?: boolean
+  /** 单元格对齐方式 */
+  align?: 'left' | 'center' | 'right'
+  /** 表头对齐方式 */
+  headerAlign?: 'left' | 'center' | 'right'
+  /** 是否固定列 */
+  fixed?: boolean | 'left' | 'right'
+  /** 单元格样式 */
+  cellStyle?: Record<string, string | number>
+  /** 表头单元格样式 */
+  headerCellStyle?: Record<string, string | number>
+  /** 单元格 className */
+  cellClassName?: string
+  /** 表头单元格 className */
+  headerCellClassName?: string
+  /** 是否可排序 */
+  sortable?: boolean
+  /** 是否可拖拽调整宽度 */
+  resizable?: boolean
+}
+
+/** 多级表头子列 */
+export interface ProTableFormColumnChild {
+  key: string
+  title: string
+  required?: boolean
+  component?: ProTableFormBuiltInComponent
+  slotName?: string
+  /** 自定义渲染，返回 string（文本）或 VNode（组件） */
+  render?: ProTableFormColumnRender
+  placeholder?: string
+  /** 列宽（优先级低于 minWidth） */
+  width?: number
+  /** 列最小宽度 */
+  minWidth?: number
+  /**
+   * 透传给单元格组件。`component === 'formatted-number'` 时在此传入
+   * `integerDigits`、`decimalPlaces`、`rounding`、`inputLimit` 等。
+   * 支持函数形式，参数为 { row, value, column, action }，返回要合并到组件上的属性。
+   */
+  componentProps?: Record<string, unknown> | ((params: CellComponentPropsParams) => Record<string, unknown>)
+  rules?: unknown[]
+  /** 动态校验规则 */
+  dynamicRules?: unknown[] | ((params: {
+    row: Record<string, unknown>
+    value: unknown
+    column: ProTableFormColumnChild
+  }) => unknown[])
+  hideInTable?: boolean
+  /** 单元格对齐方式 */
+  align?: 'left' | 'center' | 'right'
+  /** 表头对齐方式 */
+  headerAlign?: 'left' | 'center' | 'right'
+  /** 是否固定列 */
+  fixed?: boolean | 'left' | 'right'
+  /** 单元格样式 */
+  cellStyle?: Record<string, string | number>
+  /** 表头单元格样式 */
+  headerCellStyle?: Record<string, string | number>
+  /** 单元格 className */
+  cellClassName?: string
+  /** 表头单元格 className */
+  headerCellClassName?: string
+  /** 是否可排序 */
+  sortable?: boolean
+  /** 是否可拖拽调整宽度 */
+  resizable?: boolean
+}
+
+/** ProTableForm Props */
+export interface ProTableFormProps {
+  modelValue?: Record<string, unknown>[]
+  columns: ProTableFormColumn[]
+  metricPlaceholder?: string
+  minRows?: number
+  rules?: Record<string, unknown>
+  labelWidth?: string
+  bordered?: boolean
+  /**
+   * 表格合并单元格函数，参数同 Element UI el-table span-method。
+   * column.property 格式：叶子列 `{colKey}` 或 `{colKey}.{childKey}`；分组列 `{colKey}`。
+   */
+  spanMethod?: (params: {
+    row: Record<string, unknown>
+    column: { property: string; label: string }
+    rowIndex: number
+    columnIndex: number
+  }) => [number, number] | { rowspan: number; colspan: number } | void
+  // ─── el-form 原生配置 ───────────────────────────────────────────────────────
+  /** 表单尺寸 */
+  formSize?: 'medium' | 'small' | 'large'
+  /** 标签位置 */
+  labelPosition?: 'left' | 'right' | 'top'
+  /** 表单禁用态 */
+  disabled?: boolean
+  // ─── el-table 原生配置 ───────────────────────────────────────────────────────
+  /** 斑马纹 */
+  stripe?: boolean
+  /** 表格尺寸 */
+  size?: 'medium' | 'small' | 'large'
+  /** 表格最大高度 */
+  maxHeight?: number | string
+  /** 表格固定高度 */
+  height?: number | string
+  /** 行 ClassName */
+  rowClassName?: string | ((params: { row: Record<string, unknown>; rowIndex: number }) => string)
+  /** 展开行 Keys（树形数据） */
+  expandRowKeys?: (string | number)[]
+  /** 默认展开所有行 */
+  defaultExpandAll?: boolean
+  /** 行点击事件 */
+  onRowClick?: (row: Record<string, unknown>, event: Event) => void
+  /** 行双击事件 */
+  onRowDblclick?: (row: Record<string, unknown>, event: Event) => void
+  /** 排序变化事件 */
+  onSortChange?: (sortInfo: { prop: string; order: string }) => void
+  /** 展开变化事件 */
+  onExpandChange?: (row: Record<string, unknown>, expanded: boolean) => void
+  /** 透传给 el-table 的额外属性（所有上面未覆盖的 el-table 属性均可通过此传入） */
+  tableProps?: Record<string, unknown>
+  /** 透传给 el-form 的额外属性 */
+  formProps?: Record<string, unknown>
+}
+
+/** ProTableForm 操作实例类型 */
+export interface ProTableFormActionType {
+  /** 表单校验 */
+  validate: () => Promise<boolean>
+  /** 清除校验 */
+  clearValidate: (props?: string | string[]) => void
+  /** 新增行 */
+  addRow: () => void
+  /** 删除行 */
+  removeRow: (index: number) => void
+  /** 获取行列表 */
+  getRows: () => Record<string, unknown>[]
+  /** 获取 el-table 实例 */
+  getTable: () => { clearSelection: () => void } | null
+  /** 获取当前行数 */
+  getRowCount: () => number
+  /** 获取整个 modelValue */
+  getModelValue: () => Record<string, unknown>[]
+  /** 设置整个 modelValue（触发 update:modelValue） */
+  setModelValue: (val: Record<string, unknown>[]) => void
+  /** 获取 el-form 实例（可用于滚动、聚焦等高级操作） */
+  getFormRef: () => FormInstance | null
+}
+
+/** componentProps 函数的参数类型 */
+export interface CellComponentPropsParams {
+  row: Record<string, unknown>
+  value: unknown
+  column: ProTableFormColumn | ProTableFormColumnChild
+  /** ProTableForm 操作实例，可调用 validate、addRow、removeRow 等 */
+  action: ProTableFormActionType
+}
+