adtec-core-package 3.1.6 → 3.1.8

package/src/components/upload/ExcelJsViewer.vue

@@ -0,0 +1,444 @@
+<template>
+  <div class="excel-js-viewer">
+    <div ref="scrollRef" class="excel-grid-scroll">
+      <div v-if="loading" class="excel-loading">正在解析表格…</div>
+      <div v-else-if="sheets.length === 0" class="excel-empty">表格为空或无法解析</div>
+      <div v-else class="excel-scale-host" :style="scaleHostStyle">
+        <table class="excel-table" :style="tableStyle">
+          <thead>
+            <tr>
+              <th class="excel-corner" />
+              <th
+                v-for="col in columnHeaders"
+                :key="col"
+                class="excel-col-header"
+                :style="{ minWidth: `${getColWidth(col)}px`, width: `${getColWidth(col)}px` }"
+              >
+                {{ toExcelColumnLabel(col) }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(row, rowIndex) in activeSheet?.rows || []" :key="rowIndex">
+              <th class="excel-row-header">{{ (row[0]?.row ?? rowIndex) + 1 }}</th>
+              <td
+                v-for="cell in row"
+                :key="`${cell.row}-${cell.col}`"
+                :rowspan="cell.rowSpan"
+                :colspan="cell.colSpan"
+                :data-row="cell.row"
+                :data-col="cell.col"
+                :class="cellClass(cell)"
+                :style="cellInlineStyle(cell)"
+                @click="selectCell(cell)"
+              >
+                {{ cell.value }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div v-if="sheets.length > 1" class="excel-sheet-tabs">
+      <button
+        v-for="(sheet, index) in sheets"
+        :key="sheet.name + index"
+        type="button"
+        class="excel-sheet-tab"
+        :class="{ 'is-active': currentSheet === index + 1 }"
+        @click="switchSheet(index + 1)"
+      >
+        {{ sheet.name }}
+      </button>
+    </div>
+
+    <div v-if="sheets.length > 0 && !loading" class="excel-zoom-float">
+      <button type="button" class="excel-zoom-btn" title="放大" @click="emit('zoom-in')">+</button>
+      <button type="button" class="excel-zoom-btn" title="缩小" @click="emit('zoom-out')">−</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, shallowRef, watch } from 'vue'
+import {
+  type ExcelPreviewCell,
+  type ExcelPreviewSheet,
+  type ExcelSearchMatch,
+  cellStyleToCss,
+  parseExcelWorkbook,
+  searchExcelSheets,
+  toExcelColumnLabel,
+} from '../../utils/excelPreviewUtil.ts'
+
+const props = withDefaults(
+  defineProps<{
+    src?: Blob | ArrayBuffer
+    scale?: number
+  }>(),
+  { scale: 1 },
+)
+
+const emit = defineEmits<{
+  loaded: []
+  error: [err?: unknown]
+  'page-change': [page: number]
+  'zoom-in': []
+  'zoom-out': []
+}>()
+
+const scrollRef = ref<HTMLElement | null>(null)
+const sheets = shallowRef<ExcelPreviewSheet[]>([])
+const loading = ref(false)
+const currentSheet = ref(1)
+const searchMatches = ref<ExcelSearchMatch[]>([])
+const activeMatchIndex = ref(-1)
+const selectedCell = ref<{ row: number; col: number } | null>(null)
+
+const totalPages = ref(0)
+const activeSheet = computed(() => sheets.value[currentSheet.value - 1])
+
+const columnHeaders = computed(() => {
+  const sheet = activeSheet.value
+  if (!sheet) return []
+  const cols: number[] = []
+  for (let c = sheet.startCol; c <= sheet.endCol; c++) cols.push(c)
+  return cols
+})
+
+const userScale = computed(() => props.scale ?? 1)
+const tableStyle = computed(() => ({
+  transform: `scale(${userScale.value})`,
+  transformOrigin: 'top left',
+}))
+const scaleHostStyle = computed(() => {
+  const sheet = activeSheet.value
+  if (!sheet) return {}
+  const rowCount = sheet.rows.length || 1
+  const colCount = columnHeaders.value.length || 1
+  const baseWidth = columnHeaders.value.reduce((sum, col) => sum + getColWidth(col), 42)
+  const baseHeight = rowCount * 24 + 28
+  return {
+    width: `${Math.max(baseWidth, colCount * 72 + 42) * userScale.value}px`,
+    height: `${baseHeight * userScale.value}px`,
+  }
+})
+
+const activeMatch = computed(() =>
+  activeMatchIndex.value >= 0 ? searchMatches.value[activeMatchIndex.value] : null,
+)
+
+const getColWidth = (col: number) => activeSheet.value?.colWidths[col] ?? 72
+
+const cellClass = (cell: ExcelPreviewCell) => {
+  const classes: string[] = []
+  const hasMatch = searchMatches.value.some(
+    (m) => m.sheetIndex === currentSheet.value - 1 && m.row === cell.row && m.col === cell.col,
+  )
+  if (hasMatch) classes.push('excel-cell--match')
+  if (
+    activeMatch.value &&
+    activeMatch.value.sheetIndex === currentSheet.value - 1 &&
+    activeMatch.value.row === cell.row &&
+    activeMatch.value.col === cell.col
+  ) {
+    classes.push('excel-cell--active')
+  }
+  if (
+    selectedCell.value &&
+    selectedCell.value.row === cell.row &&
+    selectedCell.value.col === cell.col
+  ) {
+    classes.push('excel-cell--selected')
+  }
+  return classes.length > 0 ? classes : undefined
+}
+
+const cellInlineStyle = (cell: ExcelPreviewCell) => {
+  const css = cellStyleToCss(cell.style)
+  if (cell.width) {
+    css.minWidth = `${cell.width}px`
+    css.width = `${cell.width}px`
+    css.maxWidth = `${Math.max(cell.width, 280)}px`
+  }
+  return css
+}
+
+const selectCell = (cell: ExcelPreviewCell) => {
+  selectedCell.value = { row: cell.row, col: cell.col }
+}
+
+const switchSheet = async (sheetIndex: number) => {
+  await scrollToPage(sheetIndex)
+}
+
+const resetViewer = () => {
+  sheets.value = []
+  totalPages.value = 0
+  currentSheet.value = 1
+  searchMatches.value = []
+  activeMatchIndex.value = -1
+  selectedCell.value = null
+  loading.value = false
+}
+
+const loadWorkbook = async (src: Blob | ArrayBuffer) => {
+  loading.value = true
+  try {
+    sheets.value = await parseExcelWorkbook(src)
+    totalPages.value = sheets.value.length
+    currentSheet.value = 1
+    selectedCell.value = null
+    emit('page-change', 1)
+    emit('loaded')
+  } catch (err) {
+    emit('error', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+const scrollToCell = async (match: ExcelSearchMatch) => {
+  const targetSheet = match.sheetIndex + 1
+  if (currentSheet.value !== targetSheet) {
+    currentSheet.value = targetSheet
+    emit('page-change', targetSheet)
+  }
+  await nextTick()
+  const container = scrollRef.value
+  const cellEl = container?.querySelector(
+    `td[data-row="${match.row}"][data-col="${match.col}"]`,
+  ) as HTMLElement | null
+  if (!container || !cellEl) return
+  const top = cellEl.offsetTop - container.clientHeight * 0.3
+  const left = cellEl.offsetLeft - container.clientWidth * 0.2
+  container.scrollTo({ top: Math.max(0, top), left: Math.max(0, left), behavior: 'smooth' })
+}
+
+const scrollToPage = async (pageNum: number) => {
+  const target = Math.min(Math.max(1, pageNum), totalPages.value || 1)
+  currentSheet.value = target
+  selectedCell.value = null
+  emit('page-change', target)
+  await nextTick()
+  scrollRef.value?.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+}
+
+const runSearch = async (query: string) => {
+  const matches = searchExcelSheets(sheets.value, query)
+  searchMatches.value = matches
+  if (matches.length === 0) {
+    activeMatchIndex.value = -1
+    return { total: 0, index: -1 }
+  }
+  activeMatchIndex.value = 0
+  await scrollToCell(matches[0])
+  return { total: matches.length, index: 0 }
+}
+
+const clearSearch = () => {
+  searchMatches.value = []
+  activeMatchIndex.value = -1
+}
+
+const gotoSearchMatch = async (direction: 1 | -1) => {
+  if (searchMatches.value.length === 0) return { total: 0, index: -1 }
+  const total = searchMatches.value.length
+  let next = activeMatchIndex.value + direction
+  if (next < 0) next = total - 1
+  if (next >= total) next = 0
+  activeMatchIndex.value = next
+  await scrollToCell(searchMatches.value[next])
+  return { total, index: next }
+}
+
+const refitLayout = () => {
+  scrollRef.value?.scrollTo({ top: 0, left: 0 })
+}
+
+watch(
+  () => props.src,
+  (src) => {
+    resetViewer()
+    if (src) void loadWorkbook(src)
+  },
+  { immediate: true },
+)
+
+defineExpose({
+  totalPages,
+  scrollToPage,
+  runSearch,
+  clearSearch,
+  gotoSearchMatch,
+  refitLayout,
+})
+</script>
+
+<style scoped lang="scss">
+.excel-js-viewer {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0;
+  background: #e6e6e6;
+}
+
+.excel-grid-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: #e6e6e6;
+}
+
+.excel-scale-host {
+  display: inline-block;
+  min-width: 100%;
+  padding: 0;
+}
+
+.excel-table {
+  border-collapse: separate;
+  border-spacing: 0;
+  background: #fff;
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.excel-corner,
+.excel-col-header,
+.excel-row-header {
+  position: sticky;
+  z-index: 2;
+  background: #f0f0f0;
+  color: #444;
+  font-weight: 400;
+  text-align: center;
+  user-select: none;
+}
+
+.excel-corner {
+  top: 0;
+  left: 0;
+  z-index: 4;
+  width: 42px;
+  min-width: 42px;
+  border-right: 1px solid #c7c7c7;
+  border-bottom: 1px solid #c7c7c7;
+}
+
+.excel-col-header {
+  top: 0;
+  z-index: 3;
+  min-width: 72px;
+  height: 22px;
+  padding: 2px 6px;
+  border-right: 1px solid #d4d4d4;
+  border-bottom: 1px solid #c7c7c7;
+}
+
+.excel-row-header {
+  left: 0;
+  z-index: 2;
+  width: 42px;
+  min-width: 42px;
+  padding: 2px 4px;
+  border-right: 1px solid #c7c7c7;
+  border-bottom: 1px solid #d4d4d4;
+}
+
+.excel-table td {
+  min-width: 72px;
+  max-width: 320px;
+  padding: 2px 6px;
+  border-right: 1px solid #d4d4d4;
+  border-bottom: 1px solid #d4d4d4;
+  color: #111827;
+  vertical-align: middle;
+  word-break: break-word;
+  white-space: pre-wrap;
+  background: #fff;
+  cursor: cell;
+}
+
+.excel-cell--selected {
+  box-shadow: inset 0 0 0 2px #217346 !important;
+}
+
+.excel-cell--match {
+  background: rgba(255, 214, 0, 0.35) !important;
+}
+
+.excel-cell--active {
+  background: rgba(255, 87, 34, 0.45) !important;
+  box-shadow: inset 0 0 0 2px rgba(255, 87, 34, 0.75);
+}
+
+.excel-sheet-tabs {
+  display: flex;
+  gap: 2px;
+  align-items: stretch;
+  min-height: 30px;
+  padding: 0 6px;
+  overflow-x: auto;
+  background: #f0f0f0;
+  border-top: 1px solid #c7c7c7;
+}
+
+.excel-sheet-tab {
+  flex-shrink: 0;
+  padding: 4px 14px;
+  border: none;
+  border-top: 2px solid transparent;
+  background: #e2e2e2;
+  color: #333;
+  font-size: 12px;
+  cursor: pointer;
+
+  &.is-active {
+    background: #fff;
+    border-top-color: #217346;
+    font-weight: 600;
+  }
+}
+
+.excel-zoom-float {
+  position: absolute;
+  right: 16px;
+  bottom: 42px;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.excel-zoom-btn {
+  width: 34px;
+  height: 34px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  color: #333;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+
+  &:hover {
+    background: #fff;
+  }
+}
+
+.excel-loading,
+.excel-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 240px;
+  color: #6b7280;
+  font-size: 14px;
+}
+</style>