@aspire-ui/element-component-pro 1.0.13 → 1.0.15

package/src/ProTableForm/ProTableForm.vue

@@ -0,0 +1,555 @@
+<template>
+  <div class="ecp-pro-table-form">
+    <el-form
+      ref="formRef"
+      :model="modelValue"
+      :rules="mergedRules"
+      :label-width="labelWidth"
+      class="ecp-pro-table-form__form"
+    >
+      <el-table
+        :data="tableRows"
+        :border="bordered"
+        :row-key="rowKeyFn"
+        header-cell-class-name="ecp-pro-table-form__header-cell"
+        class="ecp-pro-table-form__table"
+      >
+        <!-- 首列：维度 / 友商名称（可插槽自定义） -->
+        <el-table-column
+          v-if="showFirstColumnComputed"
+          :min-width="firstColMinWidth"
+          :fixed="firstColumnFixed"
+        >
+          <template #header>
+            <slot name="firstColumnHeader">
+              <span class="ecp-pro-table-form__th-text">
+                <span class="ecp-pro-table-form__req">*</span>{{ firstColumnTitle }}
+              </span>
+            </slot>
+          </template>
+          <template #default="slotProps">
+            <slot name="firstColumn" v-bind="firstColumnScope(slotProps)">
+              <template v-if="slotProps.row._type === 'fixed'">
+                <span class="ecp-pro-table-form__fixed-label">{{ slotProps.row.rowLabel }}</span>
+              </template>
+              <el-form-item
+                v-else
+                :prop="competitorNameProp(slotProps.row._index)"
+                class="ecp-pro-table-form__cell-item"
+              >
+                <el-input
+                  :value="getCompetitorName(slotProps.row._index)"
+                  :placeholder="competitorNamePlaceholder"
+                  @input="setCompetitorName(slotProps.row._index, $event)"
+                />
+              </el-form-item>
+            </slot>
+          </template>
+        </el-table-column>
+
+        <!-- 数据列：内置 input / formatted-number 或插槽 cell-{slotName} -->
+        <el-table-column
+          v-for="col in columns"
+          :key="col.key"
+          :min-width="col.minWidth || col.width || 120"
+          :width="col.width"
+        >
+          <template #header>
+            <slot :name="'header-' + col.key" :column="col">
+              <span class="ecp-pro-table-form__th-text">
+                <span v-if="col.required" class="ecp-pro-table-form__req">*</span>{{ col.title }}
+              </span>
+            </slot>
+          </template>
+          <template #default="slotProps">
+            <!-- 完全自定义列 -->
+            <template v-if="col.component === 'slot' && col.slotName">
+              <el-form-item
+                v-if="slotProps.row._type === 'fixed'"
+                :prop="fixedMetricProp(slotProps.row.rowKey, col.key)"
+                class="ecp-pro-table-form__cell-item"
+              >
+                <slot
+                  :name="'cell-' + col.slotName"
+                  :column="col"
+                  :row="slotProps.row"
+                  :value="getCellValue(slotProps.row, col)"
+                  :update-value="slotUpdateHandler(slotProps, col)"
+                />
+              </el-form-item>
+              <el-form-item
+                v-else
+                :prop="competitorMetricProp(slotProps.row._index, col.key)"
+                class="ecp-pro-table-form__cell-item"
+              >
+                <slot
+                  :name="'cell-' + col.slotName"
+                  :column="col"
+                  :row="slotProps.row"
+                  :value="getCellValue(slotProps.row, col)"
+                  :update-value="slotUpdateHandler(slotProps, col)"
+                />
+              </el-form-item>
+            </template>
+            <!-- 内置组件 -->
+            <template v-else>
+              <el-form-item
+                v-if="slotProps.row._type === 'fixed'"
+                :prop="fixedMetricProp(slotProps.row.rowKey, col.key)"
+                class="ecp-pro-table-form__cell-item"
+              >
+                <component
+                  :is="cellComponent(col)"
+                  :value="getFixedMetric(slotProps.row.rowKey, col.key)"
+                  v-bind="cellBind(col)"
+                  :placeholder="col.placeholder || metricPlaceholder"
+                  @input="setFixedMetric(slotProps.row.rowKey, col.key, $event)"
+                />
+              </el-form-item>
+              <el-form-item
+                v-else
+                :prop="competitorMetricProp(slotProps.row._index, col.key)"
+                class="ecp-pro-table-form__cell-item"
+              >
+                <component
+                  :is="cellComponent(col)"
+                  :value="getCompetitorMetric(slotProps.row._index, col.key)"
+                  v-bind="cellBind(col)"
+                  :placeholder="col.placeholder || metricPlaceholder"
+                  @input="setCompetitorMetric(slotProps.row._index, col.key, $event)"
+                />
+              </el-form-item>
+            </template>
+          </template>
+        </el-table-column>
+
+        <!-- 操作列：表头 / 行内均可插槽 -->
+        <el-table-column v-if="showActionColumn" v-bind="actionColumnBind">
+          <template #header>
+            <slot name="actionHeader">
+              <span v-if="actionColumn?.title" class="ecp-pro-table-form__action-title">{{ actionColumn.title }}</span>
+              <el-button type="text" class="ecp-pro-table-form__add-btn" @click="addCompetitor">
+                {{ addCompetitorText }}
+              </el-button>
+            </slot>
+          </template>
+          <template #default="slotProps">
+            <slot
+              name="action"
+              :row="slotProps.row"
+              :can-delete="canDeleteCompetitor"
+              :add-competitor="addCompetitor"
+              :remove-competitor="removeCompetitor"
+            >
+              <el-button
+                v-if="slotProps.row._type === 'competitor'"
+                type="text"
+                class="ecp-pro-table-form__del-btn"
+                :disabled="!canDeleteCompetitor"
+                @click="removeCompetitor(slotProps.row._index)"
+              >
+                删除
+              </el-button>
+              <el-button v-else type="text" class="ecp-pro-table-form__del-btn" disabled>
+                删除
+              </el-button>
+            </slot>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts">
+/**
+ * Vue 2 默认 v-model 绑定 value + input；本组件使用 modelValue（与 Vue 3 一致），需显式声明 model。
+ */
+export default {
+  name: 'ProTableForm',
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import FormattedNumberInput from '../ProForm/FormattedNumberInput.vue'
+import type { ProTableFormActionColumn, ProTableFormColumn, ProTableFormFixedRow } from './types'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: Record<string, unknown>
+    columns: ProTableFormColumn[]
+    fixedRows: ProTableFormFixedRow[]
+    competitorsKey?: string
+    competitorNameKey?: string
+    firstColumnTitle?: string
+    competitorNamePlaceholder?: string
+    metricPlaceholder?: string
+    addCompetitorText?: string
+    minCompetitors?: number
+    rules?: Record<string, unknown>
+    labelWidth?: string
+    bordered?: boolean
+    firstColMinWidth?: number
+    actionWidth?: number
+    showFirstColumn?: boolean
+    showActionColumn?: boolean
+    actionColumn?: ProTableFormActionColumn
+  }>(),
+  {
+    modelValue: () => ({}),
+    competitorsKey: 'competitors',
+    competitorNameKey: 'name',
+    firstColumnTitle: '维度/友商',
+    competitorNamePlaceholder: '请输入友商名称',
+    metricPlaceholder: '请输入',
+    addCompetitorText: '+新增友商',
+    minCompetitors: 0,
+    labelWidth: '0',
+    bordered: true,
+    firstColMinWidth: 160,
+    actionWidth: 120,
+    showFirstColumn: true,
+    showActionColumn: true,
+  }
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Record<string, unknown>): void
+}>()
+
+const formRef = ref<{ validate: (cb?: (valid: boolean) => void) => Promise<unknown> | void; clearValidate: (p?: string | string[]) => void } | null>(null)
+
+const ck = () => props.competitorsKey ?? 'competitors'
+const nk = () => props.competitorNameKey ?? 'name'
+
+/** 有固定行时必须保留首列 */
+const showFirstColumnComputed = computed(() => {
+  if (props.fixedRows.length > 0) return true
+  return props.showFirstColumn !== false
+})
+
+const firstColumnFixed = computed(() => 'left' as const)
+
+const actionColumnBind = computed(() => {
+  const ac = props.actionColumn
+  return {
+    width: ac?.width ?? props.actionWidth,
+    minWidth: ac?.minWidth,
+    align: ac?.align ?? 'center',
+    fixed: ac?.fixed === undefined ? 'right' : ac.fixed,
+  }
+})
+
+function rowKeyFn(row: TableRow) {
+  return row._type === 'fixed' ? `f-${row.rowKey}` : `c-${row._index}`
+}
+
+type TableRow =
+  | { _type: 'fixed'; rowKey: string; rowLabel: string }
+  | { _type: 'competitor'; _index: number }
+
+const tableRows = computed<TableRow[]>(() => {
+  const rows: TableRow[] = []
+  props.fixedRows.forEach((fr) => {
+    rows.push({
+      _type: 'fixed',
+      rowKey: fr.rowKey,
+      rowLabel: fr.label,
+    })
+  })
+  const mv = props.modelValue
+  const list = (mv && typeof mv === 'object' ? (mv[ck()] as Record<string, unknown>[] | undefined) : undefined) ?? []
+  list.forEach((_, i) => {
+    rows.push({ _type: 'competitor', _index: i })
+  })
+  return rows
+})
+
+const canDeleteCompetitor = computed(() => {
+  const mv = props.modelValue
+  const n = ((mv && typeof mv === 'object' ? (mv[ck()] as unknown[]) : undefined) ?? []).length
+  return n > props.minCompetitors
+})
+
+function cloneModel(): Record<string, unknown> {
+  const m = props.modelValue
+  if (!m || typeof m !== 'object') {
+    return {}
+  }
+  return JSON.parse(JSON.stringify(m)) as Record<string, unknown>
+}
+
+function ensureFixedBlock(rowKey: string): Record<string, unknown> {
+  const mv = props.modelValue
+  if (!mv || typeof mv !== 'object') {
+    const o: Record<string, unknown> = {}
+    for (const c of props.columns) {
+      o[c.key] = ''
+    }
+    return o
+  }
+  const m = mv[rowKey]
+  if (m && typeof m === 'object' && !Array.isArray(m)) return m as Record<string, unknown>
+  const o: Record<string, unknown> = {}
+  for (const c of props.columns) {
+    o[c.key] = ''
+  }
+  return o
+}
+
+function emitNext(next: Record<string, unknown>) {
+  emit('update:modelValue', next)
+}
+
+function getFixedMetric(rowKey: string, key: string): unknown {
+  const block = ensureFixedBlock(rowKey)
+  return block[key] ?? ''
+}
+
+function setFixedMetric(rowKey: string, key: string, val: unknown) {
+  const next = cloneModel()
+  const b = { ...((next[rowKey] as Record<string, unknown>) || {}) }
+  b[key] = val
+  next[rowKey] = b
+  emitNext(next)
+}
+
+function competitorList(): Record<string, unknown>[] {
+  const mv = props.modelValue
+  if (!mv || typeof mv !== 'object') {
+    return []
+  }
+  const list = mv[ck()]
+  if (!Array.isArray(list)) return []
+  return list as Record<string, unknown>[]
+}
+
+function getCompetitorName(index: number): string {
+  const row = competitorList()[index]
+  const key = nk()
+  return row ? String(row[key] ?? '') : ''
+}
+
+function setCompetitorName(index: number, val: string) {
+  const next = cloneModel()
+  const list = [...competitorList()]
+  const row = { ...(list[index] || {}) }
+  row[nk()] = val
+  list[index] = row
+  next[ck()] = list
+  emitNext(next)
+}
+
+function getCompetitorMetric(index: number, key: string): unknown {
+  const row = competitorList()[index]
+  return row ? row[key] ?? '' : ''
+}
+
+function setCompetitorMetric(index: number, key: string, val: unknown) {
+  const next = cloneModel()
+  const list = [...competitorList()]
+  const row = { ...(list[index] || {}) }
+  row[key] = val
+  list[index] = row
+  next[ck()] = list
+  emitNext(next)
+}
+
+function getCellValue(tableRow: TableRow, col: ProTableFormColumn): unknown {
+  if (tableRow._type === 'fixed') {
+    return getFixedMetric(tableRow.rowKey, col.key)
+  }
+  return getCompetitorMetric(tableRow._index, col.key)
+}
+
+function setCellValue(tableRow: TableRow, col: ProTableFormColumn, val: unknown) {
+  if (tableRow._type === 'fixed') {
+    setFixedMetric(tableRow.rowKey, col.key, val)
+  } else {
+    setCompetitorMetric(tableRow._index, col.key, val)
+  }
+}
+
+/** 供插槽列 update-value 绑定，避免模板内箭头参数隐式 any */
+function slotUpdateHandler(slotProps: { row: TableRow }, col: ProTableFormColumn) {
+  return (v: unknown) => setCellValue(slotProps.row, col, v)
+}
+
+function emptyCompetitorRow(): Record<string, unknown> {
+  const o: Record<string, unknown> = { [nk()]: '' }
+  for (const c of props.columns) {
+    o[c.key] = ''
+  }
+  return o
+}
+
+function addCompetitor() {
+  const next = cloneModel()
+  const list = [...competitorList()]
+  list.push(emptyCompetitorRow())
+  next[ck()] = list
+  emitNext(next)
+}
+
+function removeCompetitor(index: number) {
+  if (!canDeleteCompetitor.value) return
+  const next = cloneModel()
+  const list = [...competitorList()]
+  list.splice(index, 1)
+  next[ck()] = list
+  emitNext(next)
+}
+
+function fixedMetricProp(rowKey: string, key: string) {
+  return `${rowKey}.${key}`
+}
+
+function competitorNameProp(index: number) {
+  return `${ck()}.${index}.${nk()}`
+}
+
+function competitorMetricProp(index: number, key: string) {
+  return `${ck()}.${index}.${key}`
+}
+
+function cellComponent(col: ProTableFormColumn) {
+  return col.component === 'formatted-number' ? FormattedNumberInput : 'el-input'
+}
+
+function cellBind(col: ProTableFormColumn): Record<string, unknown> {
+  const cp = col.componentProps || {}
+  if (col.component === 'formatted-number') {
+    return {
+      integerDigits: 5,
+      decimalPlaces: 6,
+      rounding: 'round',
+      inputLimit: true,
+      ...cp,
+    }
+  }
+  return { ...cp }
+}
+
+function firstColumnScope(slotProps: { row: TableRow }) {
+  const r = slotProps.row
+  if (r._type === 'fixed') {
+    return {
+      row: r,
+      rowType: 'fixed' as const,
+      rowKey: r.rowKey,
+      rowLabel: r.rowLabel,
+    }
+  }
+  const idx = r._index
+  return {
+    row: r,
+    rowType: 'competitor' as const,
+    rowIndex: idx,
+    value: getCompetitorName(idx),
+    updateValue: (v: string) => setCompetitorName(idx, v),
+  }
+}
+
+const mergedRules = computed(() => {
+  const r: Record<string, unknown[]> = {}
+  const req = (title: string) => [{ required: true, message: `请输入${title}`, trigger: 'blur' }]
+
+  for (const fr of props.fixedRows) {
+    for (const col of props.columns) {
+      if (col.rules) {
+        r[`${fr.rowKey}.${col.key}`] = col.rules as unknown[]
+      } else if (col.required) {
+        r[`${fr.rowKey}.${col.key}`] = req(col.title)
+      }
+    }
+  }
+  const list = competitorList()
+  list.forEach((_, i) => {
+    r[`${ck()}.${i}.${nk()}`] = req('友商名称')
+    for (const col of props.columns) {
+      if (col.rules) {
+        r[`${ck()}.${i}.${col.key}`] = col.rules as unknown[]
+      } else if (col.required) {
+        r[`${ck()}.${i}.${col.key}`] = req(col.title)
+      }
+    }
+  })
+  return { ...r, ...(props.rules || {}) }
+})
+
+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)
+}
+
+defineExpose({
+  validate,
+  clearValidate,
+  addCompetitor,
+  removeCompetitor,
+})
+</script>
+
+<style scoped>
+.ecp-pro-table-form__form :deep(.el-form-item) {
+  margin-bottom: 0;
+}
+.ecp-pro-table-form__cell-item {
+  width: 100%;
+}
+.ecp-pro-table-form__cell-item :deep(.el-form-item__content) {
+  margin-left: 0 !important;
+  line-height: normal;
+}
+.ecp-pro-table-form__fixed-label {
+  color: #303133;
+  font-size: 14px;
+}
+.ecp-pro-table-form__req {
+  color: #f56c6c;
+  margin-right: 2px;
+}
+.ecp-pro-table-form__th-text {
+  font-weight: 500;
+  color: #606266;
+}
+.ecp-pro-table-form__action-title {
+  margin-right: 8px;
+  font-size: 13px;
+  color: #606266;
+}
+.ecp-pro-table-form__add-btn {
+  padding: 0;
+  font-size: 14px;
+}
+.ecp-pro-table-form__del-btn {
+  padding: 0;
+  color: #909399;
+}
+.ecp-pro-table-form__del-btn:not(:disabled) {
+  color: #409eff;
+}
+</style>
+
+<style>
+.ecp-pro-table-form .ecp-pro-table-form__header-cell {
+  background: #f5f7fa !important;
+}
+</style>

package/src/ProTableForm/index.ts

@@ -0,0 +1,9 @@
+import ProTableForm from './ProTableForm.vue'
+export { ProTableForm }
+export type {
+  ProTableFormColumn,
+  ProTableFormFixedRow,
+  ProTableFormProps,
+  ProTableFormActionColumn,
+} from './types'
+export default ProTableForm

package/src/ProTableForm/types.ts

@@ -0,0 +1,72 @@
+/** 指标列（或含友商名称等任意 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
+}

package/src/index.ts

@@ -2,6 +2,7 @@ import type { VueConstructor } from 'vue'
 import ProTable, { TableAction } from './ProTable'
 import ProForm, { ProFormItem, FormActions, FormattedNumberInput } from './ProForm'
 import ProDescriptions from './ProDescriptions'
+import { ProTableForm } from './ProTableForm'
 import { useForm } from './ProForm/useForm'
 import { useDescription } from './ProDescriptions/useDescription'
 import { useProTable } from './ProTable/useProTable'
@@ -10,6 +11,13 @@ import { useComponentSetting } from './useComponentSetting'
 export { ProForm, ProFormItem, FormActions, FormattedNumberInput, useForm }
 export { ProTable, useProTable, TableAction }
 export { ProDescriptions, useDescription }
+export { ProTableForm }
+export type {
+  ProTableFormColumn,
+  ProTableFormFixedRow,
+  ProTableFormProps,
+  ProTableFormActionColumn,
+} from './ProTableForm/types'
 export { useComponentSetting }
 export type { UseComponentSettingReturn } from './useComponentSetting'
 export type { UseProTableReturn, UseProTablePropsReactive } from './ProTable/useProTable'
@@ -26,6 +34,7 @@ const components = [
   { name: 'FormActions', component: FormActions },
   { name: 'FormattedNumberInput', component: FormattedNumberInput },
   { name: 'ProDescriptions', component: ProDescriptions },
+  { name: 'ProTableForm', component: ProTableForm },
 ]
 
 export function install(Vue: VueConstructor) {
@@ -41,4 +50,5 @@ export default {
   ProDescriptions,
   TableAction,
   FormattedNumberInput,
+  ProTableForm,
 }