@veltra/sheet 2.1.1 → 2.3.0

package/src/components/report/designer/rule-row.vue

@@ -0,0 +1,252 @@
+<template>
+  <div :class="cls.b">
+    <span :class="cls.e('handle')" title="拖拽排序">⋮⋮</span>
+
+    <div :class="cls.e('main')">
+      <div :class="cls.e('when')">
+        <span :class="cls.e('lead')">当</span>
+        <u-select
+          size="small"
+          :class="cls.e('field-select')"
+          :model-value="rule.field ?? SELF_FIELD_VALUE"
+          :options="fieldOptions"
+          @update:model-value="onEvalField"
+        />
+        <u-select
+          size="small"
+          :class="cls.e('operator')"
+          :model-value="rule.operator"
+          :options="operatorOptions"
+          @update:model-value="onOperator"
+        />
+        <div :class="cls.e('value')">
+          <template v-if="rule.operator === 'between'">
+            <u-number-input
+              v-if="numericField"
+              size="small"
+              :class="cls.e('between-input')"
+              :model-value="betweenStart as number"
+              @update:model-value="(v) => patchBetween(0, v ?? 0)"
+            />
+            <u-input
+              v-else
+              size="small"
+              :class="cls.e('between-input')"
+              :model-value="String(betweenStart)"
+              @update:model-value="(v) => patchBetween(0, String(v ?? ''))"
+            />
+            <span :class="cls.e('between-sep')">至</span>
+            <u-number-input
+              v-if="numericField"
+              size="small"
+              :class="cls.e('between-input')"
+              :model-value="betweenEnd as number"
+              @update:model-value="(v) => patchBetween(1, v ?? 0)"
+            />
+            <u-input
+              v-else
+              size="small"
+              :class="cls.e('between-input')"
+              :model-value="String(betweenEnd)"
+              @update:model-value="(v) => patchBetween(1, String(v ?? ''))"
+            />
+          </template>
+
+          <u-input
+            v-else-if="rule.operator === 'contains' || (!numericField && rule.operator === 'eq')"
+            size="small"
+            :class="cls.e('scalar-input')"
+            :model-value="String(rule.value ?? '')"
+            placeholder="比较值"
+            @update:model-value="(v) => patchValue(String(v ?? ''))"
+          />
+
+          <u-number-input
+            v-else
+            size="small"
+            :class="cls.e('scalar-input')"
+            :model-value="scalarNumber"
+            @update:model-value="(v) => patchValue(v ?? 0)"
+          />
+        </div>
+        <span :class="cls.e('lead')">时</span>
+      </div>
+
+      <div :class="cls.e('then')">
+        <span :class="cls.e('lead')">样式</span>
+        <span title="背景">
+          <u-palette
+            size="small"
+            :model-value="rule.style.fill?.color ?? ''"
+            @update:model-value="patchFillColor"
+          />
+        </span>
+        <span title="文字">
+          <u-palette
+            size="small"
+            :model-value="rule.style.font?.color ?? ''"
+            @update:model-value="patchFontColor"
+          />
+        </span>
+        <u-button-group>
+          <u-button
+            size="small"
+            :class="cls.e('toggle')"
+            :type="rule.style.font?.bold ? 'primary' : undefined"
+            plain
+            title="加粗"
+            @click="toggleBold"
+          >
+            B
+          </u-button>
+          <u-button
+            size="small"
+            :class="cls.e('toggle')"
+            :type="rule.style.font?.italic ? 'primary' : undefined"
+            plain
+            title="斜体"
+            @click="toggleItalic"
+          >
+            I
+          </u-button>
+        </u-button-group>
+        <u-report-rule-preview :class="cls.e('preview')" :rule="rule" />
+
+        <span :class="cls.e('lead')">应用到</span>
+        <u-button-group>
+          <u-button
+            v-for="option in RULE_SCOPE_OPTIONS"
+            :key="option.value"
+            size="small"
+            plain
+            :type="(rule.scope ?? 'cell') === option.value ? 'primary' : undefined"
+            :title="
+              option.value === 'row' ? '染满物理输出行（交叉表会盖住同行所有列）' : '只改本格'
+            "
+            @click="onScope(option.value)"
+          >
+            {{ option.label }}
+          </u-button>
+        </u-button-group>
+      </div>
+    </div>
+
+    <u-button size="small" text type="danger" :class="cls.e('remove')" @click="emit('remove')">
+      删除
+    </u-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UButton, UButtonGroup, UInput, UNumberInput, UPalette, USelect } from '@veltra/desktop'
+import { bem } from '@veltra/utils'
+import { computed } from 'vue'
+
+import type { ConditionalOperator, ConditionalRule, DatasetField } from '../../../report/types'
+import {
+  coerceValueForOperator,
+  isNumericFieldType,
+  operatorsForFieldType,
+  readBetweenValue,
+  resolveEvalFieldType,
+  RULE_SCOPE_OPTIONS,
+  ruleEvalFieldOptions,
+  SELF_FIELD_VALUE,
+  writeBetweenValue
+} from './conditional-rules/helpers'
+import UReportRulePreview from './rule-preview.vue'
+
+defineOptions({ name: 'UReportRuleRow' })
+
+const props = defineProps<{
+  rule: ConditionalRule
+  bindingField: string
+  datasetFields: readonly DatasetField[]
+}>()
+
+const emit = defineEmits<{ 'update:rule': [rule: ConditionalRule]; remove: [] }>()
+
+const cls = bem('report-rule-row')
+
+const evalFieldType = computed(() =>
+  resolveEvalFieldType(props.rule, props.bindingField, props.datasetFields)
+)
+const operatorOptions = computed(() => operatorsForFieldType(evalFieldType.value))
+const numericField = computed(() => isNumericFieldType(evalFieldType.value))
+const fieldOptions = computed(() => ruleEvalFieldOptions(props.bindingField, props.datasetFields))
+
+const betweenStart = computed(() => readBetweenValue(props.rule.value, 0, evalFieldType.value))
+const betweenEnd = computed(() => readBetweenValue(props.rule.value, 1, evalFieldType.value))
+
+const scalarNumber = computed((): number => {
+  const raw = props.rule.value
+  if (typeof raw === 'number' && Number.isFinite(raw)) return raw
+  const parsed = Number(raw)
+  return Number.isFinite(parsed) ? parsed : 0
+})
+
+function patchRule(patch: Partial<ConditionalRule>): void {
+  emit('update:rule', { ...props.rule, ...patch })
+}
+
+function onEvalField(field: string | undefined): void {
+  const next: Partial<ConditionalRule> = {}
+  if (!field) {
+    next.field = undefined
+  } else {
+    next.field = field
+  }
+  const nextType = resolveEvalFieldType(
+    { ...props.rule, ...next },
+    props.bindingField,
+    props.datasetFields
+  )
+  const operator = operatorsForFieldType(nextType)[0]?.value ?? props.rule.operator
+  next.operator = operator
+  next.value = coerceValueForOperator(operator, nextType, props.rule.value)
+  patchRule(next)
+}
+
+function onScope(scope: 'cell' | 'row'): void {
+  patchRule({ scope: scope === 'cell' ? undefined : scope })
+}
+
+function onOperator(operator: ConditionalOperator): void {
+  patchRule({
+    operator,
+    value: coerceValueForOperator(operator, evalFieldType.value, props.rule.value)
+  })
+}
+
+function patchValue(value: unknown): void {
+  patchRule({ value })
+}
+
+function patchBetween(index: 0 | 1, next: number | string): void {
+  patchRule({ value: writeBetweenValue(props.rule.value, index, next, evalFieldType.value) })
+}
+
+function patchFillColor(color: string): void {
+  patchRule({ style: { ...props.rule.style, fill: color ? { color } : undefined } })
+}
+
+function patchFontColor(color: string): void {
+  patchRule({
+    style: { ...props.rule.style, font: { ...props.rule.style.font, color: color || undefined } }
+  })
+}
+
+function toggleBold(): void {
+  const bold = !props.rule.style.font?.bold
+  patchRule({
+    style: { ...props.rule.style, font: { ...props.rule.style.font, bold: bold || undefined } }
+  })
+}
+
+function toggleItalic(): void {
+  const italic = !props.rule.style.font?.italic
+  patchRule({
+    style: { ...props.rule.style, font: { ...props.rule.style.font, italic: italic || undefined } }
+  })
+}
+</script>

package/src/components/report/designer/rules-dialog.vue

@@ -0,0 +1,110 @@
+<template>
+  <u-dialog
+    v-model="visible"
+    title="条件样式"
+    style="width: min(600px, 92vw); max-height: 85vh"
+    @close="onClose"
+  >
+    <div :class="cls.b">
+      <p :class="cls.e('hint')">规则按顺序叠加。整行高亮适合明细表，交叉表会染满整行。</p>
+
+      <ul v-if="draftItems.length" ref="parentRef" :class="cls.e('list')">
+        <li v-for="(item, index) in draftItems" :key="item.id" :class="cls.e('item')">
+          <u-report-rule-row
+            :rule="item.rule"
+            :binding-field="bindingField"
+            :dataset-fields="datasetFields"
+            @update:rule="item.rule = $event"
+            @remove="removeRule(index)"
+          />
+        </li>
+      </ul>
+      <p v-else :class="cls.e('empty')">还没有规则。</p>
+
+      <u-button size="small" plain @click="addRule">添加规则</u-button>
+    </div>
+
+    <template #footer>
+      <u-button size="small" @click="visible = false">取消</u-button>
+      <u-button size="small" type="primary" @click="confirm">确定</u-button>
+    </template>
+  </u-dialog>
+</template>
+
+<script lang="ts" setup>
+import { animations, useDnD } from '@veltra/compositions'
+import { UButton, UDialog } from '@veltra/desktop'
+import { bem } from '@veltra/utils'
+import { computed, ref, watch } from 'vue'
+
+import type { ConditionalRule, DatasetField } from '../../../report/types'
+import {
+  cloneRulesFromDraft,
+  createDraftItem,
+  initDraftFromRules,
+  type DraftRuleItem
+} from './conditional-rules/helpers'
+import UReportRuleRow from './rule-row.vue'
+
+defineOptions({ name: 'UReportRulesDialog' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    rules: ConditionalRule[]
+    bindingField: string
+    datasetFields?: readonly DatasetField[]
+    /** @deprecated 使用 datasetFields + resolveEvalFieldType */
+    fieldType?: DatasetField['type']
+  }>(),
+  { datasetFields: () => [], fieldType: 'number' }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  save: [rules: ConditionalRule[]]
+}>()
+
+const cls = bem('report-rules-dialog')
+
+const draftItems = ref<DraftRuleItem[]>([])
+
+const { parentRef } = useDnD<DraftRuleItem>({
+  values: draftItems,
+  dragHandle: '.u-report-rule-row__handle',
+  plugins: [animations()]
+})
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit('update:modelValue', value)
+})
+
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (!open) return
+    draftItems.value = initDraftFromRules(props.rules, props.fieldType, props.bindingField)
+  }
+)
+
+function addRule(): void {
+  draftItems.value = [
+    ...draftItems.value,
+    createDraftItem(undefined, props.fieldType, props.bindingField)
+  ]
+}
+
+function removeRule(index: number): void {
+  draftItems.value = draftItems.value.filter((_, i) => i !== index)
+}
+
+function confirm(): void {
+  emit('save', cloneRulesFromDraft(draftItems.value))
+  visible.value = false
+}
+
+function onClose(): void {
+  visible.value = false
+}
+</script>

package/src/components/report/designer/topology-overlay.vue

@@ -0,0 +1,127 @@
+<template>
+  <svg v-if="visible" :class="cls.b" :width="svgWidth" :height="svgHeight" aria-hidden="true">
+    <defs>
+      <marker
+        :id="rowArrowMarkerId"
+        markerWidth="8"
+        markerHeight="8"
+        refX="6"
+        refY="4"
+        orient="auto"
+        markerUnits="strokeWidth"
+      >
+        <path d="M0,0 L8,4 L0,8 Z" fill="var(--u-color-primary, #2563eb)" />
+      </marker>
+      <marker
+        :id="colArrowMarkerId"
+        markerWidth="8"
+        markerHeight="8"
+        refX="6"
+        refY="4"
+        orient="auto"
+        markerUnits="strokeWidth"
+      >
+        <path d="M0,0 L8,4 L0,8 Z" fill="var(--u-color-warning, #d97706)" />
+      </marker>
+    </defs>
+    <path
+      v-for="(item, index) in arcPaths"
+      :key="index"
+      :class="[cls.e('arc'), cls.em('arc', item.direction)]"
+      :d="item.path"
+      :marker-end="`url(#${item.direction === 'row' ? rowArrowMarkerId : colArrowMarkerId})`"
+    />
+  </svg>
+</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 type { ReportBinding } from '../../../report/types'
+import {
+  buildTopologyArcPath,
+  collectTopologyLinks,
+  type TopologyBindingEntry,
+  type TopologyLinkDirection
+} from './topology'
+import { readCellOverlayRect, readGridOverlaySize, useGridOverlaySync } from './use-grid-overlay'
+
+defineOptions({ name: 'UReportTopologyOverlay' })
+
+const props = defineProps<{
+  cell: CellAddress | null
+  binding: ReportBinding | null
+  entries: TopologyBindingEntry[]
+  metaTick: number
+  hostEl: HTMLElement | null
+  getGrid: () => SheetGrid | undefined
+  getBindingAt: (addr: CellAddress) => ReportBinding | undefined
+}>()
+
+const cls = bem('report-topology')
+
+const instanceId = Math.random().toString(36).slice(2, 8)
+const rowArrowMarkerId = `u-report-topology-row-arrow-${instanceId}`
+const colArrowMarkerId = `u-report-topology-col-arrow-${instanceId}`
+
+const hostEl = toRef(props, 'hostEl')
+
+const svgWidth = ref(0)
+const svgHeight = ref(0)
+const arcPaths = ref<Array<{ path: string; direction: TopologyLinkDirection }>>([])
+const inView = ref(false)
+
+const visible = computed(
+  () => !!props.binding && !!props.cell && inView.value && arcPaths.value.length > 0
+)
+
+function updateOverlay(): void {
+  const cell = props.cell
+  const binding = props.binding
+  const host = props.hostEl
+  if (!cell || !binding || !host) {
+    inView.value = false
+    arcPaths.value = []
+    return
+  }
+
+  const size = readGridOverlaySize(host)
+  if (!size) {
+    inView.value = false
+    arcPaths.value = []
+    return
+  }
+
+  svgWidth.value = size.width
+  svgHeight.value = size.height
+
+  const links = collectTopologyLinks(cell, binding, props.entries, props.getBindingAt)
+  const paths: Array<{ path: string; direction: TopologyLinkDirection }> = []
+
+  for (const link of links) {
+    const fromRect = readCellOverlayRect(link.from, host, props.getGrid)
+    const toRect = readCellOverlayRect(link.to, host, props.getGrid)
+    if (!fromRect || !toRect) continue
+    paths.push({
+      direction: link.direction,
+      path: buildTopologyArcPath(
+        { x: fromRect.centerX, y: fromRect.centerY },
+        { x: toRect.centerX, y: toRect.centerY }
+      )
+    })
+  }
+
+  arcPaths.value = paths
+  inView.value = paths.length > 0
+}
+
+useGridOverlaySync({
+  hostEl,
+  getGrid: () => props.getGrid(),
+  watchSources: () =>
+    [props.cell?.row, props.cell?.col, props.binding, props.metaTick, props.hostEl] as const,
+  update: updateOverlay
+})
+</script>

package/src/components/report/designer/topology.ts

@@ -0,0 +1,124 @@
+import type { CellAddress } from '@veltra/sheet-core'
+
+import type { ReportBinding } from '../../../report/types'
+
+export type TopologyLinkDirection = 'row' | 'col'
+
+export interface TopologyLink {
+  /** 子格（依赖方） */
+  from: CellAddress
+  /** 父绑定格 */
+  to: CellAddress
+  /** 连线方向：行方向父格 / 列方向父格 */
+  direction: TopologyLinkDirection
+}
+
+export interface TopologyBindingEntry {
+  addr: CellAddress
+  binding: ReportBinding
+}
+
+function linkKey(from: CellAddress, to: CellAddress, direction: TopologyLinkDirection): string {
+  return `${direction}:${from.row},${from.col}->${to.row},${to.col}`
+}
+
+function sameAddress(a: CellAddress, b: CellAddress): boolean {
+  return a.row === b.row && a.col === b.col
+}
+
+function pushLink(
+  links: TopologyLink[],
+  seen: Set<string>,
+  from: CellAddress,
+  to: CellAddress,
+  direction: TopologyLinkDirection
+): void {
+  const key = linkKey(from, to, direction)
+  if (seen.has(key)) return
+  links.push({ from, to, direction })
+  seen.add(key)
+}
+
+/** 查找将指定格作为行方向父格的绑定格 */
+export function findCellsWithRowParent(
+  parent: CellAddress,
+  entries: readonly TopologyBindingEntry[]
+): CellAddress[] {
+  const children: CellAddress[] = []
+  for (const { addr, binding } of entries) {
+    if (binding.rowParent && sameAddress(binding.rowParent, parent)) {
+      children.push(addr)
+    }
+  }
+  return children
+}
+
+/** 查找将指定格作为列方向父格的绑定格 */
+export function findCellsWithColParent(
+  parent: CellAddress,
+  entries: readonly TopologyBindingEntry[]
+): CellAddress[] {
+  const children: CellAddress[] = []
+  for (const { addr, binding } of entries) {
+    if (binding.colParent && sameAddress(binding.colParent, parent)) {
+      children.push(addr)
+    }
+  }
+  return children
+}
+
+/** 收集选中格相关的拓扑连线：沿 rowParent / colParent 链上行、下行到直接子绑定 */
+export function collectTopologyLinks(
+  cell: CellAddress,
+  binding: ReportBinding,
+  entries: readonly TopologyBindingEntry[],
+  getBindingAt: (addr: CellAddress) => ReportBinding | undefined
+): TopologyLink[] {
+  const links: TopologyLink[] = []
+  const seen = new Set<string>()
+
+  let rowCursor = cell
+  let rowBinding: ReportBinding | undefined = binding
+  while (rowBinding?.rowParent) {
+    const parent = rowBinding.rowParent
+    pushLink(links, seen, rowCursor, parent, 'row')
+    rowCursor = parent
+    rowBinding = getBindingAt(parent)
+  }
+
+  let colCursor = cell
+  let colBinding: ReportBinding | undefined = binding
+  while (colBinding?.colParent) {
+    const parent = colBinding.colParent
+    pushLink(links, seen, colCursor, parent, 'col')
+    colCursor = parent
+    colBinding = getBindingAt(parent)
+  }
+
+  for (const child of findCellsWithRowParent(cell, entries)) {
+    pushLink(links, seen, child, cell, 'row')
+  }
+
+  for (const child of findCellsWithColParent(cell, entries)) {
+    pushLink(links, seen, child, cell, 'col')
+  }
+
+  return links
+}
+
+/** @deprecated 05 将删除；暂保留别名 */
+export const findCellsWithLeftParent = findCellsWithRowParent
+
+/** 子格 → 父格的二次贝塞尔弧线路径 */
+export function buildTopologyArcPath(
+  from: { x: number; y: number },
+  to: { x: number; y: number }
+): string {
+  const dx = to.x - from.x
+  const dy = to.y - from.y
+  const distance = Math.hypot(dx, dy) || 1
+  const lift = Math.min(48, Math.max(16, distance * 0.35))
+  const cx = (from.x + to.x) / 2
+  const cy = (from.y + to.y) / 2 - lift * Math.sign(dy || -1)
+  return `M ${from.x} ${from.y} Q ${cx} ${cy} ${to.x} ${to.y}`
+}