foggy-data-viewer 1.0.1-beta.0

package/src/components/composables/useTableSummary.test.ts

@@ -0,0 +1,341 @@
+import { describe, it, expect } from 'vitest'
+import { ref } from 'vue'
+import { useTableSummary } from './useTableSummary'
+import type { ColumnSchema } from '@/types'
+
+describe('useTableSummary', () => {
+  const mockColumns = ref<ColumnSchema[]>([
+    { name: 'id', type: 'INTEGER', title: 'ID' },
+    { name: 'name', type: 'TEXT', title: '名称' },
+    { name: 'amount', type: 'MONEY', title: '金额' },
+    { name: 'count', type: 'NUMBER', title: '数量' },
+    { name: 'status', type: 'TEXT', title: '状态' }
+  ])
+
+  describe('measureColumns', () => {
+    it('should identify measure columns correctly', () => {
+      const { measureColumns } = useTableSummary(mockColumns)
+
+      expect(measureColumns.value).toHaveLength(3)  // id, amount, count
+      expect(measureColumns.value[0].name).toBe('id')
+      expect(measureColumns.value[1].name).toBe('amount')
+      expect(measureColumns.value[2].name).toBe('count')
+    })
+
+    it('should handle columns without type', () => {
+      const columnsWithoutType = ref<ColumnSchema[]>([
+        { name: 'col1', type: '', title: 'Column 1' },
+        { name: 'col2', type: 'MONEY', title: 'Column 2' }
+      ])
+
+      const { measureColumns } = useTableSummary(columnsWithoutType)
+
+      expect(measureColumns.value).toHaveLength(1)
+      expect(measureColumns.value[0].name).toBe('col2')
+    })
+
+    it('should recognize all measure types', () => {
+      const measureTypeColumns = ref<ColumnSchema[]>([
+        { name: 'col1', type: 'NUMBER', title: 'Number' },
+        { name: 'col2', type: 'MONEY', title: 'Money' },
+        { name: 'col3', type: 'BIGDECIMAL', title: 'BigDecimal' },
+        { name: 'col4', type: 'INTEGER', title: 'Integer' },
+        { name: 'col5', type: 'BIGINT', title: 'BigInt' },
+        { name: 'col6', type: 'LONG', title: 'Long' },
+        { name: 'col7', type: 'TEXT', title: 'Text' }
+      ])
+
+      const { measureColumns } = useTableSummary(measureTypeColumns)
+
+      expect(measureColumns.value).toHaveLength(6)
+      expect(measureColumns.value.map(c => c.name)).toEqual([
+        'col1', 'col2', 'col3', 'col4', 'col5', 'col6'
+      ])
+    })
+  })
+
+  describe('calculateSelectedSummary', () => {
+    it('should calculate summary for selected rows', () => {
+      const { calculateSelectedSummary } = useTableSummary(mockColumns)
+
+      const selectedRows = [
+        { id: 1, name: 'Test 1', amount: 100, count: 5 },
+        { id: 2, name: 'Test 2', amount: 200, count: 10 },
+        { id: 3, name: 'Test 3', amount: 300, count: 15 }
+      ]
+
+      const summary = calculateSelectedSummary(selectedRows)
+
+      expect(summary._count).toBe(3)
+      expect(summary.id).toBe(6)  // 1 + 2 + 3
+      expect(summary.amount).toBe(600)
+      expect(summary.count).toBe(30)
+    })
+
+    it('should handle empty selection', () => {
+      const { calculateSelectedSummary } = useTableSummary(mockColumns)
+
+      const summary = calculateSelectedSummary([])
+
+      expect(summary._count).toBe(0)
+      expect(summary.id).toBe(0)
+      expect(summary.amount).toBe(0)
+      expect(summary.count).toBe(0)
+    })
+
+    it('should handle null/undefined values', () => {
+      const { calculateSelectedSummary } = useTableSummary(mockColumns)
+
+      const selectedRows = [
+        { id: 1, name: 'Test 1', amount: null, count: 5 },
+        { id: 2, name: 'Test 2', amount: undefined, count: 10 },
+        { id: 3, name: 'Test 3', amount: 100, count: null }
+      ]
+
+      const summary = calculateSelectedSummary(selectedRows)
+
+      expect(summary._count).toBe(3)
+      expect(summary.id).toBe(6)
+      expect(summary.amount).toBe(100)
+      expect(summary.count).toBe(15)
+    })
+
+    it('should handle non-numeric values', () => {
+      const { calculateSelectedSummary } = useTableSummary(mockColumns)
+
+      const selectedRows = [
+        { id: 1, name: 'Test 1', amount: 'abc', count: 5 },
+        { id: 2, name: 'Test 2', amount: 100, count: 'xyz' }
+      ]
+
+      const summary = calculateSelectedSummary(selectedRows)
+
+      expect(summary._count).toBe(2)
+      expect(summary.id).toBe(3)
+      expect(summary.amount).toBe(100)
+      expect(summary.count).toBe(5)
+    })
+  })
+
+  describe('formatValue', () => {
+    it('should format MONEY type', () => {
+      const { formatValue } = useTableSummary(mockColumns)
+
+      expect(formatValue(1234.5, 'MONEY')).toBe('1,234.50')
+      expect(formatValue(1000000, 'MONEY')).toBe('1,000,000.00')
+    })
+
+    it('should format NUMBER type', () => {
+      const { formatValue } = useTableSummary(mockColumns)
+
+      expect(formatValue(1234.567, 'NUMBER')).toBe('1,234.57')
+    })
+
+    it('should format BIGDECIMAL type', () => {
+      const { formatValue } = useTableSummary(mockColumns)
+
+      expect(formatValue(9999.99, 'BIGDECIMAL')).toBe('9,999.99')
+    })
+
+    it('should format INTEGER type without decimals', () => {
+      const { formatValue } = useTableSummary(mockColumns)
+
+      expect(formatValue(1234, 'INTEGER')).toBe('1,234')
+    })
+
+    it('should handle null/undefined values', () => {
+      const { formatValue } = useTableSummary(mockColumns)
+
+      expect(formatValue(null, 'MONEY')).toBe('')
+      expect(formatValue(undefined, 'MONEY')).toBe('')
+    })
+
+    it('should handle non-numeric values', () => {
+      const { formatValue } = useTableSummary(mockColumns)
+
+      expect(formatValue('text', 'MONEY')).toBe('text')
+    })
+
+    it('should format zero correctly', () => {
+      const { formatValue } = useTableSummary(mockColumns)
+
+      expect(formatValue(0, 'MONEY')).toBe('0.00')
+      expect(formatValue(0, 'INTEGER')).toBe('0')
+    })
+  })
+
+  describe('generateFooterData', () => {
+    it('should generate footer data with two rows', () => {
+      const { generateFooterData, setServerSummary } = useTableSummary(mockColumns)
+
+      setServerSummary({ total: 100, amount: 10000, count: 500 })
+
+      const visibleColumns = [
+        { field: undefined },  // checkbox column
+        { field: 'id', type: 'INTEGER' },
+        { field: 'amount', type: 'MONEY' },
+        { field: 'count', type: 'NUMBER' }
+      ]
+
+      const selectedSummary = { _count: 3, amount: 600, count: 30 }
+
+      const footerData = generateFooterData(visibleColumns, selectedSummary)
+
+      expect(footerData).toHaveLength(2)
+      expect(footerData[0]).toHaveLength(4)  // 选中行
+      expect(footerData[1]).toHaveLength(4)  // 全量汇总
+    })
+
+    it('should show labels in first column', () => {
+      const { generateFooterData, setServerSummary } = useTableSummary(mockColumns)
+
+      setServerSummary({ total: 100 })
+
+      const visibleColumns = [{ field: undefined }]
+      const selectedSummary = { _count: 3 }
+
+      const footerData = generateFooterData(visibleColumns, selectedSummary)
+
+      expect(footerData[0][0]).toBe('选中')
+      expect(footerData[1][0]).toBe('合计')
+    })
+
+    it('should show count in second column', () => {
+      const { generateFooterData, setServerSummary } = useTableSummary(mockColumns)
+
+      setServerSummary({ total: 100 })
+
+      const visibleColumns = [
+        { field: undefined },
+        { field: 'id', type: 'INTEGER' }
+      ]
+      const selectedSummary = { _count: 5 }
+
+      const footerData = generateFooterData(visibleColumns, selectedSummary)
+
+      expect(footerData[0][1]).toBe('5 条')
+      expect(footerData[1][1]).toBe('100 条')
+    })
+
+    it('should show measure values in other columns', () => {
+      const { generateFooterData, setServerSummary } = useTableSummary(mockColumns)
+
+      setServerSummary({ total: 100, amount: 10000 })
+
+      const visibleColumns = [
+        { field: undefined },
+        { field: 'id', type: 'INTEGER' },
+        { field: 'amount', type: 'MONEY' }
+      ]
+      const selectedSummary = { _count: 3, amount: 600 }
+
+      const footerData = generateFooterData(visibleColumns, selectedSummary)
+
+      expect(footerData[0][2]).toBe('600.00')
+      expect(footerData[1][2]).toBe('10,000.00')
+    })
+
+    it('should show null for non-measure columns', () => {
+      const { generateFooterData, setServerSummary } = useTableSummary(mockColumns)
+
+      setServerSummary({ total: 100 })
+
+      const visibleColumns = [
+        { field: undefined },
+        { field: 'id', type: 'INTEGER' },
+        { field: 'name', type: 'TEXT' }  // non-measure
+      ]
+      const selectedSummary = { _count: 3 }
+
+      const footerData = generateFooterData(visibleColumns, selectedSummary)
+
+      expect(footerData[0][2]).toBeNull()
+      expect(footerData[1][2]).toBeNull()
+    })
+
+    it('should handle zero counts', () => {
+      const { generateFooterData, setServerSummary } = useTableSummary(mockColumns)
+
+      setServerSummary({ total: 0 })
+
+      const visibleColumns = [
+        { field: undefined },
+        { field: 'id', type: 'INTEGER' }
+      ]
+      const selectedSummary = { _count: 0 }
+
+      const footerData = generateFooterData(visibleColumns, selectedSummary)
+
+      expect(footerData[0][1]).toBe('0 条')
+      expect(footerData[1][1]).toBe('0 条')
+    })
+  })
+
+  describe('setServerSummary', () => {
+    it('should set server summary data', () => {
+      const { serverSummary, setServerSummary } = useTableSummary(mockColumns)
+
+      const summaryData = { total: 100, amount: 10000 }
+      setServerSummary(summaryData)
+
+      expect(serverSummary.value).toEqual(summaryData)
+    })
+
+    it('should handle null server summary', () => {
+      const { serverSummary, setServerSummary } = useTableSummary(mockColumns)
+
+      setServerSummary(null)
+
+      expect(serverSummary.value).toBeNull()
+    })
+
+    it('should update existing server summary', () => {
+      const { serverSummary, setServerSummary } = useTableSummary(mockColumns)
+
+      setServerSummary({ total: 50 })
+      expect(serverSummary.value?.total).toBe(50)
+
+      setServerSummary({ total: 100 })
+      expect(serverSummary.value?.total).toBe(100)
+    })
+  })
+
+  describe('Integration', () => {
+    it('should work together for complete workflow', () => {
+      const {
+        measureColumns,
+        calculateSelectedSummary,
+        generateFooterData,
+        setServerSummary
+      } = useTableSummary(mockColumns)
+
+      // 1. 识别度量列
+      expect(measureColumns.value).toHaveLength(3)  // id, amount, count
+
+      // 2. 设置服务端汇总
+      setServerSummary({ total: 100, amount: 50000, count: 1000 })
+
+      // 3. 计算选中行汇总
+      const selectedRows = [
+        { id: 1, amount: 100, count: 5 },
+        { id: 2, amount: 200, count: 10 }
+      ]
+      const selectedSummary = calculateSelectedSummary(selectedRows)
+
+      expect(selectedSummary._count).toBe(2)
+      expect(selectedSummary.amount).toBe(300)
+
+      // 4. 生成 footer 数据
+      const visibleColumns = [
+        { field: undefined },
+        { field: 'id', type: 'INTEGER' },
+        { field: 'amount', type: 'MONEY' }
+      ]
+      const footerData = generateFooterData(visibleColumns, selectedSummary)
+
+      expect(footerData).toHaveLength(2)
+      expect(footerData[0][1]).toBe('2 条')
+      expect(footerData[1][1]).toBe('100 条')
+    })
+  })
+})

package/src/components/composables/useTableSummary.ts

@@ -0,0 +1,129 @@
+import { ref, computed, type Ref } from 'vue'
+import type { ColumnSchema } from '@/types'
+
+/** 度量类型列表 */
+const MEASURE_TYPES = ['NUMBER', 'MONEY', 'BIGDECIMAL', 'INTEGER', 'BIGINT', 'LONG']
+
+/**
+ * 表格汇总数据计算逻辑
+ */
+export function useTableSummary(columns: Ref<ColumnSchema[]>) {
+  /** 后端返回的全量汇总 */
+  const serverSummary = ref<Record<string, unknown> | null>(null)
+
+  /** 度量列（用于汇总计算） */
+  const measureColumns = computed(() => {
+    return columns.value.filter(col =>
+      MEASURE_TYPES.includes(col.type?.toUpperCase() || '')
+    )
+  })
+
+  /**
+   * 计算选中行的汇总
+   */
+  function calculateSelectedSummary(
+    selectedRows: Record<string, unknown>[]
+  ): Record<string, unknown> {
+    const summary: Record<string, unknown> = {
+      _count: selectedRows.length
+    }
+
+    for (const col of measureColumns.value) {
+      summary[col.name] = selectedRows.reduce((sum, row) => {
+        const val = row[col.name]
+        return sum + (typeof val === 'number' ? val : 0)
+      }, 0)
+    }
+
+    return summary
+  }
+
+  /**
+   * 格式化数值用于显示
+   */
+  function formatValue(value: unknown, type?: string): string {
+    if (value == null) return ''
+    if (typeof value !== 'number') return String(value)
+
+    const upperType = type?.toUpperCase()
+    if (upperType === 'MONEY' || upperType === 'NUMBER' || upperType === 'BIGDECIMAL') {
+      return value.toLocaleString('zh-CN', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      })
+    }
+    return value.toLocaleString('zh-CN')
+  }
+
+  /**
+   * 生成 footer 数据（二维数组）
+   * @param visibleColumns 可见列配置（包含 checkbox 列）
+   * @param selectedSummary 选中行汇总
+   * @returns footer 数据，第一行选中汇总，第二行全量汇总
+   */
+  function generateFooterData(
+    visibleColumns: { field?: string; type?: string }[],
+    selectedSummary: Record<string, unknown>
+  ): (string | number | null)[][] {
+    const row1: (string | number | null)[] = []  // 选中汇总
+    const row2: (string | number | null)[] = []  // 全量汇总
+
+    for (let i = 0; i < visibleColumns.length; i++) {
+      const col = visibleColumns[i]
+      const field = col.field
+
+      // 第一列（checkbox 列）显示标签
+      if (i === 0) {
+        row1.push('选中')
+        row2.push('合计')
+        continue
+      }
+
+      // 第二列显示记录数
+      if (i === 1) {
+        const selectedCount = selectedSummary._count as number || 0
+        const totalCount = serverSummary.value?.total as number || 0
+        row1.push(`${selectedCount} 条`)
+        row2.push(`${totalCount} 条`)
+        continue
+      }
+
+      // 其他列：如果是度量列则显示汇总值
+      if (field) {
+        const colSchema = columns.value.find(c => c.name === field)
+        const isMeasure = colSchema && MEASURE_TYPES.includes(colSchema.type?.toUpperCase() || '')
+
+        if (isMeasure) {
+          const selectedVal = selectedSummary[field]
+          const serverVal = serverSummary.value?.[field]
+          row1.push(formatValue(selectedVal, colSchema?.type))
+          row2.push(formatValue(serverVal, colSchema?.type))
+        } else {
+          row1.push(null)
+          row2.push(null)
+        }
+      } else {
+        row1.push(null)
+        row2.push(null)
+      }
+    }
+
+    return [row1, row2]
+  }
+
+  /**
+   * 设置服务端汇总数据
+   */
+  function setServerSummary(data: Record<string, unknown> | null) {
+    serverSummary.value = data
+  }
+
+  return {
+    serverSummary,
+    measureColumns,
+    calculateSelectedSummary,
+    generateFooterData,
+    setServerSummary,
+    formatValue
+  }
+}

package/src/components/filters/BoolFilter.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import type { SliceRequestDef } from '@/types'
+
+interface Props {
+  field: string
+  modelValue?: SliceRequestDef[] | null
+  trueLabel?: string
+  falseLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  trueLabel: '是',
+  falseLabel: '否'
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: SliceRequestDef[] | null): void
+}>()
+
+const selectedValue = ref<boolean | null>(null)
+
+// 从 modelValue 初始化
+watch(() => props.modelValue, (slices) => {
+  if (!slices || slices.length === 0) {
+    selectedValue.value = null
+    return
+  }
+
+  const slice = slices[0]
+  if (slice.op === '=') {
+    selectedValue.value = slice.value === true || slice.value === 'true' || slice.value === 1
+  } else {
+    selectedValue.value = null
+  }
+}, { immediate: true })
+
+function select(val: boolean | null) {
+  selectedValue.value = val
+  if (val === null) {
+    emit('update:modelValue', null)
+  } else {
+    emit('update:modelValue', [{
+      field: props.field,
+      op: '=',
+      value: val
+    }])
+  }
+}
+</script>
+
+<template>
+  <div class="filter-bool">
+    <button
+      :class="{ active: selectedValue === null }"
+      @click="select(null)"
+    >
+      全部
+    </button>
+    <button
+      :class="{ active: selectedValue === true }"
+      @click="select(true)"
+    >
+      {{ trueLabel }}
+    </button>
+    <button
+      :class="{ active: selectedValue === false }"
+      @click="select(false)"
+    >
+      {{ falseLabel }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.filter-bool {
+  display: flex;
+  gap: 4px;
+}
+
+.filter-bool button {
+  height: 26px;
+  padding: 0 8px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: white;
+  font-size: 11px;
+  color: #606266;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.filter-bool button:hover {
+  border-color: #409eff;
+  color: #409eff;
+}
+
+.filter-bool button.active {
+  background: #409eff;
+  border-color: #409eff;
+  color: white;
+}
+</style>