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

package/src/ProTableForm/TableFormCell.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-form-item
+    :prop="prop"
+    class="ecp-pro-table-form__cell-item"
+  >
+    <!-- slot 列：完全透传给父级 -->
+    <slot
+      v-if="col.component === 'slot' && col.slotName"
+      :name="'cell-' + col.slotName"
+      :column="col"
+      :row="row"
+      :value="value"
+      :update-value="updateValue"
+    />
+    <!-- 内置组件 -->
+    <component
+      v-else
+      :is="cellComponent(col)"
+      :value="value"
+      v-bind="cellBind(col)"
+      :placeholder="col.placeholder || placeholder"
+      @input="updateValue"
+    />
+  </el-form-item>
+</template>
+
+<script setup lang="ts">
+import type { ProTableFormColumn } from './types'
+
+interface Props {
+  col: ProTableFormColumn
+  row: TableRow
+  prop: string
+  value: unknown
+  updateValue: (v: unknown) => void
+  cellComponent: (col: ProTableFormColumn) => unknown
+  cellBind: (col: ProTableFormColumn) => Record<string, unknown>
+  placeholder?: string
+}
+
+defineProps<Props>()
+
+type TableRow =
+  | { _type: 'fixed'; rowKey: string; rowLabel: string }
+  | { _type: 'competitor'; _index: number }
+</script>

package/src/ProTableForm/index.ts

@@ -1,9 +1,8 @@
 import ProTableForm from './ProTableForm.vue'
-export { ProTableForm }
-export type {
-  ProTableFormColumn,
-  ProTableFormFixedRow,
-  ProTableFormProps,
-  ProTableFormActionColumn,
-} from './types'
+import { useProTableForm } from './useProTableForm'
+
+export { ProTableForm, useProTableForm }
+export type { ProTableFormColumn, ProTableFormColumnChild } from '../types'
+export type { ProTableFormBuiltInComponent, ProTableFormProps, ProTableFormActionType } from '../types'
+
 export default ProTableForm

package/src/ProTableForm/types.ts

@@ -1,72 +1,12 @@
-/** 指标列（或含友商名称等任意 key） */
-export interface ProTableFormColumn {
-  /** 对应 model 中对象字段名 */
-  key: string
-  title: string
-  required?: boolean
-  /**
-   * 单元格渲染方式：
-   * - input / formatted-number：内置
-   * - slot：使用具名插槽 `cell-{slotName}` 完全自定义
-   */
-  component?: 'input' | 'formatted-number' | 'slot'
-  /**
-   * component 为 slot 时必填，对应插槽名为 `cell-{slotName}`（如 slotName: 'score' → #cell-score）
-   */
-  slotName?: string
-  placeholder?: string
-  width?: number
-  minWidth?: number
-  /**
-   * 透传给单元格组件。`component === 'formatted-number'` 时在此传入
-   * `integerDigits`、`decimalPlaces`、`rounding`、`inputLimit` 等（与 FormattedNumberInput / ProForm 一致）。
-   */
-  componentProps?: Record<string, unknown>
-  /** 覆盖该列默认必填规则（与 Element 表单 rules 一致） */
-  rules?: unknown[]
-}
-
-/** 固定行（首列为文案，不可删） */
-export interface ProTableFormFixedRow {
-  rowKey: string
-  label: string
-}
-
-/** 操作列配置（showActionColumn 为 true 时生效） */
-export interface ProTableFormActionColumn {
-  width?: number
-  minWidth?: number
-  align?: 'left' | 'center' | 'right'
-  fixed?: boolean | 'left' | 'right'
-  /** 表头文案，使用默认「新增」按钮时显示在按钮左侧，可留空 */
-  title?: string
-}
-
-export interface ProTableFormProps {
-  modelValue?: Record<string, unknown>
-  columns: ProTableFormColumn[]
-  fixedRows: ProTableFormFixedRow[]
-  competitorsKey?: string
-  /** 友商行「名称」字段，默认 name */
-  competitorNameKey?: string
-  firstColumnTitle?: string
-  competitorNamePlaceholder?: string
-  metricPlaceholder?: string
-  addCompetitorText?: string
-  minCompetitors?: number
-  rules?: Record<string, unknown>
-  labelWidth?: string
-  bordered?: boolean
-  firstColMinWidth?: number
-  /**
-   * 是否展示首列（维度/友商）。存在 fixedRows 时强制为 true。
-   * 无固定行且为 false 时隐藏首列，需在 columns 中自行配置名称等字段。
-   */
-  showFirstColumn?: boolean
-  /** 是否展示操作列，默认 true */
-  showActionColumn?: boolean
-  /** 操作列宽度（showActionColumn 时） */
-  actionWidth?: number
-  /** 操作列详细配置 */
-  actionColumn?: ProTableFormActionColumn
-}
+// Re-export all ProTableForm types from the centralized types registry
+export type {
+  ProTableFormColumn,
+  ProTableFormColumnChild,
+  ProTableFormActionColumn,
+  ProTableFormProps,
+  ProTableFormBuiltInComponent,
+  TableActionButton,
+  TableActionRender,
+  ProTableFormActionType,
+  ProTableFormRowType,
+} from '../types'

package/src/ProTableForm/useProTableForm.ts

@@ -0,0 +1,442 @@
+import { computed, ref } from 'vue'
+import type { Ref, ComputedRef } from 'vue'
+import type {
+  ProTableFormActionType,
+  ProTableFormColumn,
+  ProTableFormColumnChild,
+  ProTableFormProps,
+  FormInstance,
+} from '../types'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface ProTableFormOptions {
+  props: Readonly<ProTableFormProps>
+  emit: (event: 'update:modelValue', value: Record<string, unknown>[]) => void
+  /** 新增行事件 */
+  emitAddRow?: () => void
+  /** 删除行事件 */
+  emitRemoveRow?: (index: number) => void
+}
+
+/** useProTableForm 返回 */
+export interface UseProTableFormReturn {
+  // --- 注册 ---
+  register: (formAction: ProTableFormActionType) => void
+
+  // --- el-form 绑定 ---
+  currentModelValue: ComputedRef<Record<string, unknown>[]>
+  formModelRef: ComputedRef<{ rows: Record<string, unknown>[] }>
+  mergedRules: ComputedRef<Record<string, unknown[]>>
+
+  // --- el-table 绑定 ---
+  tableRows: ComputedRef<TableRow[]>
+  rowKeyFn: (row: TableRow) => string
+  spanMethodAdapter: (params: {
+    row: TableRow
+    column: { property: string; label: string }
+    rowIndex: number
+    columnIndex: number
+  }) => [number, number] | { rowspan: number; colspan: number } | void
+  allLeafColumnKeys: ComputedRef<string[]>
+
+  // --- ref ---
+  formRef: Ref<FormInstance | null>
+  /** 获取 el-form 实例 */
+  getFormRef: () => FormInstance | null
+
+  // --- 单元格渲染辅助 ---
+  cellComponent: (col: ProTableFormColumn | ProTableFormColumnChild) => unknown
+  cellBind: (col: ProTableFormColumn | ProTableFormColumnChild) => Record<string, unknown>
+  slotUpdateHandler: (slotProps: { row: TableRow }, col: ProTableFormColumn, childKey?: string) => (v: unknown) => void
+  getCellProp: (tableRow: TableRow, col: ProTableFormColumn, childKey?: string) => string
+
+  // --- 单元格值读写 ---
+  getCellValue: (row: TableRow, col: ProTableFormColumn, childKey?: string) => unknown
+  setCellValue: (tableRow: TableRow, col: ProTableFormColumn, childKey: string | undefined, val: unknown) => void
+
+  // --- 行操作 ---
+  handleAddRow: () => void
+  handleRemoveRow: (index: number) => void
+
+  // --- el-form 实例方法 ---
+  validate: () => Promise<boolean>
+  clearValidate: (propsArg?: string | string[]) => void
+}
+
+// ---------------------------------------------------------------------------
+// Composable
+// ---------------------------------------------------------------------------
+
+type TableRow = { _index: number }
+
+export function useProTableForm(options: ProTableFormOptions): UseProTableFormReturn {
+  const { props, emit, emitAddRow, emitRemoveRow } = options
+
+  // ---------------------------------------------------------------------------
+  // 注册机制（与 useForm 一致）
+  // ---------------------------------------------------------------------------
+
+  const formActionRef = ref<ProTableFormActionType | null>(null)
+
+  const register = (action: ProTableFormActionType) => {
+    formActionRef.value = action
+  }
+
+  // ---------------------------------------------------------------------------
+  // el-form ref
+  // ---------------------------------------------------------------------------
+
+  const formRef = ref<FormInstance | null>(null)
+
+  // ---------------------------------------------------------------------------
+  // 受控 / 非受控双轨（与 ProForm 一致）
+  // ---------------------------------------------------------------------------
+
+  const controlledModelValue = computed(() => props.modelValue)
+  const isControlled = computed(() => controlledModelValue.value !== undefined)
+  const currentModelValue = computed<Record<string, unknown>[]>(() => {
+    return isControlled.value ? (controlledModelValue.value ?? []) : []
+  })
+
+  /**
+   * 传给 el-form :model 的包装对象。
+   * el-form 要求 model 为 Object，直接传入数组会触发 Element UI 的 prop type 校验报错。
+   * 这里包装为 { rows: [...] }，el-form-item 的 prop 路径相应改为 rows.${index}.${key}。
+   */
+  const formModelRef = computed(() => ({ rows: currentModelValue.value }))
+
+  // ---------------------------------------------------------------------------
+  // Table rows
+  // ---------------------------------------------------------------------------
+
+  const tableRows = computed<TableRow[]>(() => {
+    return currentModelValue.value.map((item, i) => ({ ...item, _index: i }))
+  })
+
+  function rowKeyFn(row: TableRow) {
+    return `r-${row._index}`
+  }
+
+  // ---------------------------------------------------------------------------
+  // 工具函数
+  // ---------------------------------------------------------------------------
+
+  function cloneRows(): Record<string, unknown>[] {
+    return JSON.parse(JSON.stringify(currentModelValue.value)) as Record<string, unknown>[]
+  }
+
+  function emptyRow(): Record<string, unknown> {
+    const o: Record<string, unknown> = {}
+    for (const c of props.columns) {
+      if (c.children && c.children.length > 0) {
+        for (const child of c.children) {
+          o[child.key] = ''
+        }
+      } else {
+        o[c.key] = ''
+      }
+    }
+    return o
+  }
+
+  // ---------------------------------------------------------------------------
+  // Value getters / setters
+  // ---------------------------------------------------------------------------
+
+  function emitNext(next: Record<string, unknown>[]) {
+    emit('update:modelValue', next)
+  }
+
+  function getCell(row: TableRow): Record<string, unknown> {
+    return currentModelValue.value[row._index] ?? {}
+  }
+
+  function getCellValue(row: TableRow, col: ProTableFormColumn, childKey?: string): unknown {
+    if (childKey) {
+      const colVal = getCell(row)[col.key]
+      // Support both nested ({ economy: { costReduction: '' } }) and flat ({ costReduction: '' }) models
+      if (colVal && typeof colVal === 'object') {
+        return (colVal as Record<string, unknown>)[childKey] ?? ''
+      }
+      return getCell(row)[childKey] ?? ''
+    }
+    return getCell(row)[col.key] ?? ''
+  }
+
+  function setCellValue(row: TableRow, col: ProTableFormColumn, childKey: string | undefined, val: unknown) {
+    const next = cloneRows()
+    const target = { ...next[row._index] }
+    if (childKey) {
+      const colVal = target[col.key]
+      // Support both nested and flat models for grouped columns
+      if (colVal && typeof colVal === 'object') {
+        const nested = { ...(colVal as Record<string, unknown>) }
+        nested[childKey] = val
+        target[col.key] = nested
+      } else {
+        target[childKey] = val
+      }
+    } else {
+      target[col.key] = val
+    }
+    next[row._index] = target
+    emitNext(next)
+  }
+
+  // ---------------------------------------------------------------------------
+  // Row operations
+  // ---------------------------------------------------------------------------
+
+  function handleAddRow() {
+    emitAddRow?.()
+    const next = cloneRows()
+    next.push(emptyRow())
+    emitNext(next)
+  }
+
+  function handleRemoveRow(index: number) {
+    if (!canDeleteRow.value) return
+    emitRemoveRow?.(index)
+    const next = cloneRows()
+    next.splice(index, 1)
+    emitNext(next)
+  }
+
+  const canDeleteRow = computed(() => {
+    return currentModelValue.value.length > (props.minRows ?? 0)
+  })
+
+  // ---------------------------------------------------------------------------
+  // Prop paths
+  // ---------------------------------------------------------------------------
+
+  function getCellProp(tableRow: TableRow, col: ProTableFormColumn, childKey?: string): string {
+    // Use the leaf key directly so the prop path matches the flat data model
+    // (e.g. rows.0.costReduction, not rows.0.economy.costReduction)
+    return childKey
+      ? `rows.${tableRow._index}.${childKey}`
+      : `rows.${tableRow._index}.${col.key}`
+  }
+
+  // ---------------------------------------------------------------------------
+  // Validation rules
+  // ---------------------------------------------------------------------------
+
+  // Stable rules object — we mutate it in place and only replace the reference
+  // when the top-level keys or their array identities actually change.
+  const rulesResult: Record<string, unknown[]> = {}
+
+  /** Signature of a rules array (compares content, not function identity) */
+  function rulesSig(arr: unknown[]): string {
+    return JSON.stringify(arr.map((r) => {
+      if (r == null || typeof r !== 'object') return String(r)
+      const o = r as Record<string, unknown>
+      return {
+        required: o.required,
+        type: o.type,
+        message: o.message,
+        pattern: String(o.pattern ?? ''),
+        min: o.min,
+        max: o.max,
+        trigger: Array.isArray(o.trigger) ? [...o.trigger] : o.trigger,
+        hasValidator: typeof o.validator === 'function',
+        hasAsyncValidator: typeof o.asyncValidator === 'function',
+      }
+    }))
+  }
+
+  const mergedRules = computed(() => {
+    const req = (title: string): unknown[] => [
+      { required: true, message: `请输入${title}`, trigger: 'change' },
+    ]
+
+    let anyChange = false
+
+    // Build the new rules snapshot
+    const newSnapshot: Record<string, unknown[]> = {}
+
+    currentModelValue.value.forEach((row, i) => {
+      for (const col of props.columns) {
+        const process = (key: string, colOrChild: ProTableFormColumn | ProTableFormColumnChild, value: unknown) => {
+          const path = `rows.${i}.${key}`
+          let rules: unknown[] = []
+
+          if ('dynamicRules' in colOrChild && colOrChild.dynamicRules !== undefined) {
+            rules = typeof colOrChild.dynamicRules === 'function'
+              ? colOrChild.dynamicRules({ row, value, column: colOrChild as never }) as unknown[]
+              : (colOrChild.dynamicRules as unknown[])
+          } else if ('rules' in colOrChild && colOrChild.rules !== undefined) {
+            rules = colOrChild.rules as unknown[]
+          } else if (colOrChild.required) {
+            rules = req(colOrChild.title)
+          }
+
+          // Only create a new array reference if content actually changed
+          const sig = rulesSig(rules)
+          const prevArr = rulesResult[path]
+          const prevSig = (prevArr as unknown as { __sig?: string } & unknown[])?.__sig
+          const arr = (prevSig === sig && prevArr) ? prevArr : rules
+          ;(arr as unknown as { __sig: string } & unknown[]).__sig = sig
+          newSnapshot[path] = arr
+          if (arr !== prevArr) anyChange = true
+        }
+
+        if (col.children && col.children.length > 0) {
+          for (const child of col.children) {
+            const value = getCellValue({ _index: i } as TableRow, col, child.key)
+            process(child.key, child, value)
+          }
+        } else {
+          const value = getCellValue({ _index: i } as TableRow, col)
+          process(col.key, col, value)
+        }
+      }
+    })
+
+    // Check props.rules keys
+    const extraRules = props.rules || {}
+    for (const key of Object.keys(extraRules)) {
+      const arr = extraRules[key] as unknown[]
+      newSnapshot[key] = arr
+      if (arr !== rulesResult[key]) anyChange = true
+    }
+
+    // Only replace rulesResult when something actually changed
+    if (anyChange || Object.keys(newSnapshot).length !== Object.keys(rulesResult).length) {
+      Object.keys(rulesResult).forEach((k) => { delete rulesResult[k] })
+      Object.assign(rulesResult, newSnapshot)
+    }
+
+    return rulesResult as Record<string, unknown[]>
+  })
+
+  // ---------------------------------------------------------------------------
+  // el-form 实例方法
+  // ---------------------------------------------------------------------------
+
+  function validate(): Promise<boolean> {
+    return new Promise((resolve) => {
+      const f = formRef.value
+      if (!f || typeof f.validate !== 'function') {
+        resolve(true)
+        return
+      }
+      f.validate((valid: boolean) => resolve(valid))
+    })
+  }
+
+  function clearValidate(propsArg?: string | string[]) {
+    formRef.value?.clearValidate?.(propsArg)
+  }
+
+  // ---------------------------------------------------------------------------
+  // Cell rendering helpers
+  // ---------------------------------------------------------------------------
+
+  function cellComponent(col: ProTableFormColumn | ProTableFormColumnChild): unknown {
+    return col.component === 'formatted-number' ? 'ecp-formatted-number-input' : 'el-input'
+  }
+
+  function cellBind(col: ProTableFormColumn | ProTableFormColumnChild): Record<string, unknown> {
+    const cp = col.componentProps || {}
+    // Separate event handlers (onXxx) from regular props, so they don't get v-bound
+    // as fake attrs and bypass the @update flow. Match Vue camelCase convention.
+    const result: Record<string, unknown> = {}
+    for (const [key, val] of Object.entries(cp)) {
+      if (/^on[A-Za-z]/.test(key) && typeof val === 'function') continue
+      result[key] = val
+    }
+    if (col.component === 'formatted-number') {
+      return { integerDigits: 5, decimalPlaces: 6, rounding: 'round', inputLimit: true, ...result }
+    }
+    return result
+  }
+
+  function slotUpdateHandler(slotProps: { row: TableRow }, col: ProTableFormColumn, childKey?: string) {
+    return (v: unknown) => setCellValue(slotProps.row, col, childKey, v)
+  }
+
+  // ---------------------------------------------------------------------------
+  // Span method
+  // ---------------------------------------------------------------------------
+
+  const allLeafColumnKeys = computed<string[]>(() => {
+    const keys: string[] = []
+    for (const col of props.columns) {
+      if (col.children && col.children.length > 0) {
+        for (const child of col.children) {
+          keys.push(`${col.key}.${child.key}`)
+        }
+      } else if (!col.hideInTable) {
+        keys.push(col.key)
+      }
+    }
+    return keys
+  })
+
+  const spanMethodAdapter = ({
+    rowIndex,
+    column,
+    columnIndex,
+    row,
+  }: {
+    row: TableRow
+    column: { property: string; label: string }
+    rowIndex: number
+    columnIndex: number
+  }): [number, number] | { rowspan: number; colspan: number } | void => {
+    if (!props.spanMethod) return
+    const colKey = allLeafColumnKeys.value[columnIndex]
+    return props.spanMethod({
+      row,
+      column: { ...column, property: colKey ?? column.property },
+      rowIndex,
+      columnIndex,
+    })
+  }
+
+  // ---------------------------------------------------------------------------
+  // Return
+  // ---------------------------------------------------------------------------
+
+  return {
+    // 注册
+    register,
+
+    // el-form 绑定（formModelRef 包装了数组，满足 el-form :model Object 类型要求）
+    formModelRef,
+    currentModelValue,
+    mergedRules,
+
+    // el-table 绑定
+    tableRows,
+    rowKeyFn,
+    spanMethodAdapter,
+    allLeafColumnKeys,
+
+    // ref
+    formRef,
+    getFormRef: () => formRef.value,
+
+    // 单元格渲染
+    cellComponent,
+    cellBind,
+    slotUpdateHandler,
+    getCellProp,
+
+    // 单元格值读写
+    getCellValue,
+    setCellValue,
+
+    // 行操作
+    handleAddRow,
+    handleRemoveRow,
+
+    // el-form 实例方法
+    validate,
+    clearValidate,
+  }
+}

package/src/index.ts

@@ -5,6 +5,7 @@ import ProDescriptions from './ProDescriptions'
 import CollapseContainer from './CollapseContainer'
 import { ProTableForm } from './ProTableForm'
 import { useForm } from './ProForm/useForm'
+import { useProTableForm } from './ProTableForm/useProTableForm'
 import { useDescription } from './ProDescriptions/useDescription'
 import { useProTable } from './ProTable/useProTable'
 import { useComponentSetting } from './useComponentSetting'
@@ -13,13 +14,14 @@ export { ProForm, ProFormItem, FormActions, FormattedNumberInput, useForm }
 export { ProTable, useProTable, TableAction }
 export { ProDescriptions, useDescription }
 export { CollapseContainer }
-export { ProTableForm }
+export { ProTableForm, useProTableForm }
 export type {
   ProTableFormColumn,
-  ProTableFormFixedRow,
+  ProTableFormColumnChild,
   ProTableFormProps,
-  ProTableFormActionColumn,
-} from './ProTableForm/types'
+  ProTableFormBuiltInComponent,
+  ProTableFormActionType,
+} from './types'
 export { useComponentSetting }
 export type { UseComponentSettingReturn } from './useComponentSetting'
 export type { UseProTableReturn, UseProTablePropsReactive } from './ProTable/useProTable'