@veltra/sheet 2.0.1 → 2.2.0

package/src/components/report/designer/cell-coords.ts

@@ -0,0 +1,94 @@
+import type { CellAddress, SheetGrid } from '@veltra/sheet-core'
+
+export interface CellOverlayRect {
+  left: number
+  top: number
+  right: number
+  bottom: number
+  width: number
+  height: number
+  centerX: number
+  centerY: number
+}
+
+export interface GridOverlayLayout {
+  offsetX: number
+  offsetY: number
+  viewW: number
+  viewH: number
+}
+
+/** VTable 坐标 = 模型地址 + 行号列/列头偏移（通常 +1） */
+export const TABLE_ADDR_OFFSET = 1
+
+export function resolveGridOverlayLayout(
+  host: HTMLElement
+): { gridEl: HTMLElement; layout: GridOverlayLayout } | null {
+  const gridEl = host.querySelector('.u-sheet__grid-instance') as HTMLElement | null
+  if (!gridEl) return null
+
+  const hostBox = host.getBoundingClientRect()
+  const gridBox = gridEl.getBoundingClientRect()
+
+  return {
+    gridEl,
+    layout: {
+      offsetX: gridBox.left - hostBox.left,
+      offsetY: gridBox.top - hostBox.top,
+      viewW: gridEl.clientWidth,
+      viewH: gridEl.clientHeight
+    }
+  }
+}
+
+/** 将屏幕坐标换算为网格落点地址（用于字段拖拽 bind） */
+export function resolveGridDropAddress(
+  grid: SheetGrid,
+  gridEl: HTMLElement,
+  clientX: number,
+  clientY: number
+): CellAddress | null {
+  const rect = gridEl.getBoundingClientRect()
+  return grid.hitTestSheetAddr(clientX - rect.left, clientY - rect.top) ?? null
+}
+
+export function getCellOverlayRect(
+  grid: SheetGrid,
+  cell: CellAddress,
+  layout: GridOverlayLayout
+): CellOverlayRect | null {
+  const table = grid.getTable()
+  let cellRect: { left: number; top: number; right: number; bottom: number }
+  try {
+    cellRect = table.getCellRelativeRect(
+      cell.col + TABLE_ADDR_OFFSET,
+      cell.row + TABLE_ADDR_OFFSET
+    ) as { left: number; top: number; right: number; bottom: number }
+  } catch {
+    return null
+  }
+
+  const left = layout.offsetX + cellRect.left
+  const top = layout.offsetY + cellRect.top
+  const right = layout.offsetX + cellRect.right
+  const bottom = layout.offsetY + cellRect.bottom
+
+  const outOfView =
+    cellRect.bottom < 0 ||
+    cellRect.right < 0 ||
+    cellRect.top > layout.viewH ||
+    cellRect.left > layout.viewW
+
+  if (outOfView) return null
+
+  return {
+    left,
+    top,
+    right,
+    bottom,
+    width: right - left,
+    height: bottom - top,
+    centerX: (left + right) / 2,
+    centerY: (top + bottom) / 2
+  }
+}

package/src/components/report/designer/col-widths.ts

@@ -0,0 +1,33 @@
+import type { ReportColWidthEntry } from '../../../report/export-xlsx'
+import { TABLE_ADDR_OFFSET } from './cell-coords'
+
+/** 列宽读写目标：SheetGrid.getTable() 的最小接口（headless 测试可桩）。
+ *  sheet-core 列宽未进 SheetSnapshot，只能经 VTable 运行时 set/getColWidth。 */
+export type ColWidthTarget = {
+  getTable: () => {
+    setColWidth: (col: number, width: number) => void
+    getColWidth: (col: number) => number
+  }
+}
+
+/** 经 SheetGrid → VTable 写入指定列宽 */
+export function applyGridColWidths(
+  grid: ColWidthTarget | undefined | null,
+  widths: ReadonlyArray<ReportColWidthEntry>
+): void {
+  if (!grid) return
+  const table = grid.getTable()
+  for (const [sheetCol, width] of widths) {
+    table.setColWidth(sheetCol + TABLE_ADDR_OFFSET, width)
+  }
+}
+
+/** 从当前网格读取指定模型列宽度；网格未就绪时返回 null */
+export function readGridColWidths(
+  grid: ColWidthTarget | undefined | null,
+  cols: ReadonlyArray<number>
+): Array<[number, number]> | null {
+  if (!grid) return null
+  const table = grid.getTable()
+  return cols.map((sheetCol) => [sheetCol, table.getColWidth(sheetCol + TABLE_ADDR_OFFSET)])
+}

package/src/components/report/designer/conditional-rules/helpers.ts

@@ -0,0 +1,186 @@
+import type { ConditionalOperator, ConditionalRule, DatasetField } from '../../../../report/types'
+
+export interface DraftRuleItem {
+  id: string
+  rule: ConditionalRule
+}
+
+export const OPERATOR_LABELS: Record<ConditionalOperator, string> = {
+  gt: '大于',
+  gte: '大于等于',
+  lt: '小于',
+  lte: '小于等于',
+  eq: '等于',
+  between: '介于',
+  contains: '包含'
+}
+
+export const RULE_SCOPE_OPTIONS = [
+  { value: 'cell' as const, label: '本格' },
+  { value: 'row' as const, label: '整行' }
+]
+
+/** 求值字段下拉：缺省项表示本格绑定字段 */
+export function ruleEvalFieldOptions(
+  bindingField: string,
+  datasetFields: readonly DatasetField[]
+): Array<{ value: string | undefined; label: string }> {
+  return [
+    { value: undefined, label: '本格字段' },
+    ...datasetFields
+      .filter((field) => field.name !== bindingField)
+      .map((field) => ({ value: field.name, label: field.label || field.name }))
+  ]
+}
+
+/** 按规则所选求值字段解析字段类型（运算符映射用） */
+export function resolveEvalFieldType(
+  rule: ConditionalRule,
+  bindingField: string,
+  datasetFields: readonly DatasetField[]
+): DatasetField['type'] {
+  const fieldName = rule.field ?? bindingField
+  return datasetFields.find((field) => field.name === fieldName)?.type ?? 'number'
+}
+
+const NUMERIC_OPERATORS: ConditionalOperator[] = ['gt', 'gte', 'lt', 'lte', 'eq', 'between']
+const STRING_OPERATORS: ConditionalOperator[] = ['eq', 'contains']
+
+let draftIdSeq = 0
+
+function nextDraftId(): string {
+  draftIdSeq += 1
+  return `rule-${draftIdSeq}`
+}
+
+/** 按字段类型返回可用运算符 */
+export function operatorsForFieldType(
+  fieldType: DatasetField['type']
+): Array<{ value: ConditionalOperator; label: string }> {
+  const ops = fieldType === 'string' ? STRING_OPERATORS : NUMERIC_OPERATORS
+  return ops.map((value) => ({ value, label: OPERATOR_LABELS[value] }))
+}
+
+export function isNumericFieldType(fieldType: DatasetField['type']): boolean {
+  return fieldType === 'number' || fieldType === 'date'
+}
+
+export function defaultRuleValue(
+  operator: ConditionalOperator,
+  fieldType: DatasetField['type']
+): unknown {
+  if (operator === 'between') {
+    return isNumericFieldType(fieldType) ? [0, 100] : ['', '']
+  }
+  if (operator === 'contains' || (operator === 'eq' && fieldType === 'string')) {
+    return ''
+  }
+  return 0
+}
+
+export function defaultRuleStyle(): ConditionalRule['style'] {
+  return { fill: { color: '#FEE2E2' }, font: { color: '#DC2626' } }
+}
+
+export function createDraftItem(
+  rule?: ConditionalRule,
+  fieldType: DatasetField['type'] = 'number',
+  _bindingField?: string
+): DraftRuleItem {
+  if (rule) {
+    return { id: nextDraftId(), rule: cloneRule(rule) }
+  }
+  const operator = operatorsForFieldType(fieldType)[0]?.value ?? 'eq'
+  return {
+    id: nextDraftId(),
+    rule: { operator, value: defaultRuleValue(operator, fieldType), style: defaultRuleStyle() }
+  }
+}
+
+export function initDraftFromRules(
+  rules: readonly ConditionalRule[],
+  fieldType: DatasetField['type'],
+  bindingField?: string
+): DraftRuleItem[] {
+  if (rules.length === 0) return []
+  return rules.map((rule) => createDraftItem(rule, fieldType, bindingField))
+}
+
+export function cloneRule(rule: ConditionalRule): ConditionalRule {
+  return {
+    operator: rule.operator,
+    value: cloneRuleValue(rule.value),
+    field: rule.field,
+    scope: rule.scope,
+    style: {
+      ...rule.style,
+      fill: rule.style.fill ? { ...rule.style.fill } : undefined,
+      font: rule.style.font ? { ...rule.style.font } : undefined
+    }
+  }
+}
+
+function cloneRuleValue(value: unknown): unknown {
+  if (Array.isArray(value)) return [...value]
+  return value
+}
+
+export function cloneRulesFromDraft(items: readonly DraftRuleItem[]): ConditionalRule[] {
+  return items.map((item) => cloneRule(item.rule))
+}
+
+/** 运算符切换时重置比较值为合理缺省 */
+export function coerceValueForOperator(
+  operator: ConditionalOperator,
+  fieldType: DatasetField['type'],
+  current: unknown
+): unknown {
+  if (operator === 'between') {
+    if (Array.isArray(current) && current.length === 2) return [...current]
+    return defaultRuleValue('between', fieldType)
+  }
+  if (operator === 'contains') {
+    return typeof current === 'string' ? current : ''
+  }
+  if (isNumericFieldType(fieldType)) {
+    const n = typeof current === 'number' && Number.isFinite(current) ? current : Number(current)
+    return Number.isFinite(n) ? n : 0
+  }
+  return typeof current === 'string' ? current : ''
+}
+
+function toDisplayString(value: unknown): string {
+  if (typeof value === 'string') return value
+  if (typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint') {
+    return String(value)
+  }
+  return ''
+}
+
+export function readBetweenValue(
+  value: unknown,
+  index: 0 | 1,
+  fieldType: DatasetField['type']
+): number | string {
+  const pair =
+    Array.isArray(value) && value.length === 2 ? value : defaultRuleValue('between', fieldType)
+  const raw = (pair as [unknown, unknown])[index]
+  if (isNumericFieldType(fieldType)) {
+    const n = typeof raw === 'number' ? raw : Number(raw)
+    return Number.isFinite(n) ? n : 0
+  }
+  return typeof raw === 'string' ? raw : toDisplayString(raw)
+}
+
+export function writeBetweenValue(
+  value: unknown,
+  index: 0 | 1,
+  next: number | string,
+  fieldType: DatasetField['type']
+): [unknown, unknown] {
+  const current = readBetweenValue(value, 0, fieldType)
+  const currentEnd = readBetweenValue(value, 1, fieldType)
+  const pair: [unknown, unknown] = [current, currentEnd]
+  pair[index] = next
+  return pair
+}

package/src/components/report/designer/drop-highlight-overlay.vue

@@ -0,0 +1,74 @@
+<template>
+  <div v-if="cell && visible" :class="cls.b" :style="highlightStyle" aria-hidden="true" />
+  <div v-else-if="showFallback" :class="cls.e('fallback')" role="status">
+    松开将绑定到当前选区 {{ fallbackLabel }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { CellAddress, SheetGrid } from '@veltra/sheet-core'
+import { bem } from '@veltra/utils'
+import { computed, ref, toRef } from 'vue'
+
+import { readCellOverlayRect, useGridOverlaySync } from './use-grid-overlay'
+
+defineOptions({ name: 'UReportDropHighlightOverlay' })
+
+const props = defineProps<{
+  cell: CellAddress | null
+  hostEl: HTMLElement | null
+  getGrid: () => SheetGrid | undefined
+  /** 字段拖拽进行中（dragover 时为 true） */
+  dragging: boolean
+  /** hit-test 落空时提示回退的选区标签（如 A1） */
+  fallbackLabel: string
+}>()
+
+const cls = bem('report-drop-highlight')
+
+const hostEl = toRef(props, 'hostEl')
+
+const rectLeft = ref(0)
+const rectTop = ref(0)
+const rectWidth = ref(0)
+const rectHeight = ref(0)
+const inView = ref(false)
+
+const visible = computed(() => !!props.cell && inView.value)
+const showFallback = computed(() => props.dragging && !props.cell)
+
+const highlightStyle = computed(() => ({
+  left: `${rectLeft.value}px`,
+  top: `${rectTop.value}px`,
+  width: `${rectWidth.value}px`,
+  height: `${rectHeight.value}px`
+}))
+
+function updateHighlight(): void {
+  const cell = props.cell
+  const host = props.hostEl
+  if (!cell || !host) {
+    inView.value = false
+    return
+  }
+
+  const rect = readCellOverlayRect(cell, host, props.getGrid)
+  if (!rect) {
+    inView.value = false
+    return
+  }
+
+  inView.value = true
+  rectLeft.value = Math.round(rect.left)
+  rectTop.value = Math.round(rect.top)
+  rectWidth.value = Math.round(rect.width)
+  rectHeight.value = Math.round(rect.height)
+}
+
+useGridOverlaySync({
+  hostEl,
+  getGrid: () => props.getGrid(),
+  watchSources: () => [props.cell?.row, props.cell?.col, props.hostEl, props.dragging] as const,
+  update: updateHighlight
+})
+</script>