From 5135afdaccbf0769271dc99bd9528307c2ec8039 Mon Sep 17 00:00:00 2001 From: zeelatan Date: Fri, 27 Mar 2026 22:21:30 +0800 Subject: [PATCH] feat: improve original table selection workflow --- frontend/src/new/stores/quotationStore.ts | 6 + .../src/new/views/DocumentRecognition.vue | 490 +++++++++++++++++- 2 files changed, 472 insertions(+), 24 deletions(-) diff --git a/frontend/src/new/stores/quotationStore.ts b/frontend/src/new/stores/quotationStore.ts index 8443590..3c6c870 100644 --- a/frontend/src/new/stores/quotationStore.ts +++ b/frontend/src/new/stores/quotationStore.ts @@ -46,6 +46,12 @@ export interface DocumentRecognitionState { visibleColumns: string[] isUploadSectionCollapsed: boolean columnMappings?: Record + sourceSelectionRange?: { + startRow: number + endRow: number + startCol: number + endCol: number + } | null selectedQuotationType?: string hasData: boolean } diff --git a/frontend/src/new/views/DocumentRecognition.vue b/frontend/src/new/views/DocumentRecognition.vue index 2572a37..89f3b38 100644 --- a/frontend/src/new/views/DocumentRecognition.vue +++ b/frontend/src/new/views/DocumentRecognition.vue @@ -355,8 +355,26 @@
-

原始表格 已识别 {{ originalTableData.length }} 项

-
+
+
+

原始表格 已识别 {{ originalTableData.length }} 项

+

{{ originalSelectionSummary }}

+
+
+ + + +
+
+
@@ -367,7 +385,15 @@ - @@ -445,7 +471,7 @@
{{ originalHeader }}
请先上传Excel文件 @@ -564,8 +590,10 @@
table_view - 识别结果 - 共 {{ originalTableData.length }} 项 + {{ fullscreenModalMode === 'original-selection' ? '原始表格选区' : '识别结果' }} + + {{ fullscreenModalMode === 'original-selection' ? `共 ${originalTableData.length} 行` : `共 ${originalTableData.length} 项` }} +
+ +
+
+
+
+ {{ row[header] || '' }}
+ + + + + + + + + + +
{{ header }}
+ {{ row[header] || '' }} +
+
+
+
+
-

- 原始表格 - 已识别 {{ originalTableData.length }} 项 -

-
+
+
+

+ 原始表格 + 已识别 {{ originalTableData.length }} 项 +

+

{{ originalSelectionSummary }}

+
+
+ + +
+
+
@@ -595,7 +682,17 @@ - +
{{ row[header] || '' }} + {{ row[header] || '' }} +
@@ -674,7 +771,7 @@
{{ originalHeader }}
-
+
请先上传Excel文件
@@ -748,19 +845,23 @@
总项数 - {{ originalTableData.length }} + {{ fullscreenModalMode === 'original-selection' ? activeOriginalRowCount : originalTableData.length }}
- 总数量 - {{ totalQuantity }} + {{ fullscreenModalMode === 'original-selection' ? '当前选区' : '总数量' }} + {{ fullscreenModalMode === 'original-selection' ? originalSelectionSummary : totalQuantity }}
- + @@ -856,6 +957,8 @@ onMounted(() => { loadRecentUploads() restorePageStateOnMount() window.addEventListener('keydown', handleKeyDown) + window.addEventListener('mouseup', stopOriginalSelection) + window.addEventListener('mousemove', handleWindowMouseMove) // 如果是维保服务报价且没有数据，初始化手动输入表格 if (selectedQuotationType.value === '维保服务报价' && originalTableData.value.length === 0 && convertedTableData.value.length === 0) { initManualEntryTable(5) @@ -864,11 +967,14 @@ onMounted(() => { onUnmounted(() => { window.removeEventListener('keydown', handleKeyDown) + window.removeEventListener('mouseup', stopOriginalSelection) + window.removeEventListener('mousemove', handleWindowMouseMove) }) // 全屏模态框状态 const isFullscreenModalOpen = ref(false) const isModalMaximized = ref(false) +const fullscreenModalMode = ref<'full' | 'original-selection'>('full') const modalRef = ref(null) const modalPosition = ref({ x: 100, y: 50 }) const modalSize = ref({ width: 1200, height: 700 }) @@ -883,6 +989,23 @@ const originalTableData = shallowRef([]) const originalHeaders = ref([]) const convertedTableData = shallowRef([]) +interface OriginalSelectionRange { + startRow: number + endRow: number + startCol: number + endCol: number +} + +const originalSelectionStart = ref<{ row: number; col: number } | null>(null) +const originalSelectionEnd = ref<{ row: number; col: number } | null>(null) +const isOriginalSelecting = ref(false) +const appliedOriginalSelection = ref(null) +const originalTableWrapperRef = ref(null) +const modalOriginalTableWrapperRef = ref(null) +const originalSelectionContainer = ref(null) +const originalPointerPosition = ref<{ x: number; y: number } | null>(null) +let originalAutoScrollFrame: number | null = null + // Multi-sheet support const workbookRef = ref(null) // Store the workbook object const sheetNames = ref([]) // All sheet names @@ -915,6 +1038,244 @@ const historyIndex = ref(-1) // 当前历史记录索引 const initialTableData = ref([]) // 初始表格数据（用于重置） const maxHistorySize = 50 // 最大历史记录数 +function normalizeOriginalSelectionRange( + start: { row: number; col: number }, + end: { row: number; col: number } +): OriginalSelectionRange { + return { + startRow: Math.min(start.row, end.row), + endRow: Math.max(start.row, end.row), + startCol: Math.min(start.col, end.col), + endCol: Math.max(start.col, end.col) + } +} + +function getCurrentOriginalSelectionRange(): OriginalSelectionRange | null { + if (!originalSelectionStart.value || !originalSelectionEnd.value) return null + return normalizeOriginalSelectionRange(originalSelectionStart.value, originalSelectionEnd.value) +} + +function clearOriginalSelectionVisual() { + originalSelectionStart.value = null + originalSelectionEnd.value = null + isOriginalSelecting.value = false + originalPointerPosition.value = null + originalSelectionContainer.value = null + if (originalAutoScrollFrame !== null) { + cancelAnimationFrame(originalAutoScrollFrame) + originalAutoScrollFrame = null + } +} + +function clearOriginalSelectionAndRestoreFullTable() { + appliedOriginalSelection.value = null + clearOriginalSelectionVisual() + if (originalTableData.value.length > 0 && originalHeaders.value.length > 0) { + convertData(originalTableData.value, originalHeaders.value) + } +} + +function getActiveOriginalSource() { + if (!appliedOriginalSelection.value || originalHeaders.value.length === 0) { + return { + headers: originalHeaders.value, + data: originalTableData.value + } + } + + const range = appliedOriginalSelection.value + const selectedColumns = originalHeaders.value.slice(range.startCol, range.endCol + 1) + const selectedRows = originalTableData.value.slice(range.startRow, range.endRow + 1) + + if (selectedColumns.length === 0 || selectedRows.length === 0) { + return { headers: [], data: [] } + } + + const shouldUseFirstRowAsHeaders = selectedRows.length > 1 + + if (shouldUseFirstRowAsHeaders) { + const headerRow = selectedRows[0] + const usedHeaders = new Set() + const inferredHeaders = selectedColumns.map((columnKey, index) => { + const rawHeader = String(headerRow?.[columnKey] ?? '').trim() + const fallbackHeader = `列${index + 1}` + let nextHeader = rawHeader || fallbackHeader + + if (usedHeaders.has(nextHeader)) { + let duplicateIndex = 2 + while (usedHeaders.has(`${nextHeader}_${duplicateIndex}`)) { + duplicateIndex += 1 + } + nextHeader = `${nextHeader}_${duplicateIndex}` + } + + usedHeaders.add(nextHeader) + return nextHeader + }) + + const data = selectedRows.slice(1).map((row) => { + const filteredRow: Record = {} + selectedColumns.forEach((columnKey, index) => { + filteredRow[inferredHeaders[index]] = row?.[columnKey] ?? '' + }) + return filteredRow + }) + + if (data.length > 0) { + return { headers: inferredHeaders, data } + } + } + + const data = selectedRows.map((row) => { + const filteredRow: Record = {} + selectedColumns.forEach((header) => { + filteredRow[header] = row?.[header] ?? '' + }) + return filteredRow + }) + + return { headers: selectedColumns, data } +} + +const hasOriginalSelection = computed(() => !!getCurrentOriginalSelectionRange()) +const hasAppliedOriginalSelection = computed(() => !!appliedOriginalSelection.value) +const activeOriginalRowCount = computed(() => getActiveOriginalSource().data.length) +const activeOriginalHeaders = computed(() => getActiveOriginalSource().headers) + +const originalSelectionSummary = computed(() => { + const range = appliedOriginalSelection.value || getCurrentOriginalSelectionRange() + if (!range) return '未选择区域，默认使用整张原始表格' + + const rowCount = range.endRow - range.startRow + 1 + const colCount = range.endCol - range.startCol + 1 + const modeLabel = appliedOriginalSelection.value ? '已应用选区' : '当前选区' + return `${modeLabel}: ${rowCount} 行 × ${colCount} 列` +}) + +function isOriginalCellSelected(row: number, col: number) { + const range = getCurrentOriginalSelectionRange() + if (!range) return false + return row >= range.startRow && row <= range.endRow && col >= range.startCol && col <= range.endCol +} + +function getOriginalCellClass(row: number, col: number) { + const classes = ['original-cell'] + if (isOriginalCellSelected(row, col)) classes.push('selected') + if ( + appliedOriginalSelection.value && + row >= appliedOriginalSelection.value.startRow && + row <= appliedOriginalSelection.value.endRow && + col >= appliedOriginalSelection.value.startCol && + col <= appliedOriginalSelection.value.endCol + ) { + classes.push('applied') + } + return classes.join(' ') +} + +function updateOriginalSelectionFromPointer(clientX: number, clientY: number) { + const target = document.elementFromPoint(clientX, clientY) as HTMLElement | null + const cell = target?.closest('[data-original-row][data-original-col]') as HTMLElement | null + if (!cell) return + + const row = Number(cell.dataset.originalRow) + const col = Number(cell.dataset.originalCol) + if (!Number.isFinite(row) || !Number.isFinite(col)) return + + originalSelectionEnd.value = { row, col } +} + +function stepOriginalAutoScroll() { + if (!isOriginalSelecting.value || !originalSelectionContainer.value || !originalPointerPosition.value) { + originalAutoScrollFrame = null + return + } + + const container = originalSelectionContainer.value + const { x, y } = originalPointerPosition.value + const rect = container.getBoundingClientRect() + const threshold = 36 + const maxStep = 22 + + let deltaX = 0 + let deltaY = 0 + + if (x < rect.left + threshold) { + deltaX = -Math.min(maxStep, rect.left + threshold - x) + } else if (x > rect.right - threshold) { + deltaX = Math.min(maxStep, x - (rect.right - threshold)) + } + + if (y < rect.top + threshold) { + deltaY = -Math.min(maxStep, rect.top + threshold - y) + } else if (y > rect.bottom - threshold) { + deltaY = Math.min(maxStep, y - (rect.bottom - threshold)) + } + + if (deltaX !== 0 || deltaY !== 0) { + container.scrollLeft += deltaX + container.scrollTop += deltaY + updateOriginalSelectionFromPointer(x, y) + } + + originalAutoScrollFrame = requestAnimationFrame(stepOriginalAutoScroll) +} + +function ensureOriginalAutoScroll() { + if (originalAutoScrollFrame === null) { + originalAutoScrollFrame = requestAnimationFrame(stepOriginalAutoScroll) + } +} + +function handleWindowMouseMove(event: MouseEvent) { + if (!isOriginalSelecting.value) return + originalPointerPosition.value = { x: event.clientX, y: event.clientY } + updateOriginalSelectionFromPointer(event.clientX, event.clientY) + ensureOriginalAutoScroll() +} + +function handleOriginalCellMouseDown(row: number, col: number, event: MouseEvent) { + event.preventDefault() + originalSelectionStart.value = { row, col } + originalSelectionEnd.value = { row, col } + isOriginalSelecting.value = true + originalPointerPosition.value = { x: event.clientX, y: event.clientY } + originalSelectionContainer.value = + ((event.currentTarget as HTMLElement | null)?.closest('.original-table-wrapper, .modal-table-wrapper') as HTMLElement | null) + ensureOriginalAutoScroll() +} + +function handleOriginalCellMouseEnter(row: number, col: number) { + if (!isOriginalSelecting.value || !originalSelectionStart.value) return + originalSelectionEnd.value = { row, col } +} + +function stopOriginalSelection() { + if (!isOriginalSelecting.value) return + isOriginalSelecting.value = false + if (originalAutoScrollFrame !== null) { + cancelAnimationFrame(originalAutoScrollFrame) + originalAutoScrollFrame = null + } +} + +function applyOriginalSelection() { + const range = getCurrentOriginalSelectionRange() + if (!range) { + ElMessage.warning('请先在原始表格中框选有效数据区域') + return + } + + appliedOriginalSelection.value = range + const source = getActiveOriginalSource() + if (source.data.length === 0 || source.headers.length === 0) { + ElMessage.warning('当前选区无法生成有效的转换后表格，请扩大选区并包含表头行') + return + } + convertData(source.data, source.headers) + ElMessage.success(`已按选区生成转换后表格，共 ${source.data.length} 行，使用 ${source.headers.length} 列`) +} + // Recent uploads history interface UploadRecord { id: string @@ -945,6 +1306,7 @@ function restorePageStateOnMount() { isUploadSectionCollapsed.value = savedState.isUploadSectionCollapsed || false // 恢复列映射状态 columnMappings.value = savedState.columnMappings || {} + appliedOriginalSelection.value = savedState.sourceSelectionRange || null // 恢复报价类型选择 selectedQuotationType.value = savedState.selectedQuotationType || '' } @@ -961,6 +1323,7 @@ function getCurrentState(): DocumentRecognitionState { visibleColumns: [], isUploadSectionCollapsed: isUploadSectionCollapsed.value, columnMappings: columnMappings.value, + sourceSelectionRange: appliedOriginalSelection.value, selectedQuotationType: selectedQuotationType.value, hasData: convertedTableData.value.length > 0 } @@ -1647,6 +2010,11 @@ const navigateToQuotationGeneration = () => { // 流程推进：保存当前状态并进入下一步（由"下一步"按钮调用） const goToSmartMatching = () => { + if (hasOriginalSelection.value && !hasAppliedOriginalSelection.value) { + ElMessage.warning('已框选原始表格区域，请先点击“按选区生成”后再进入下一步') + return + } + // 保存当前页面状态 savePageState(PAGE_STATE_KEYS.DOC_RECOGNITION, getCurrentState()) // 保存流程数据供下一页面使用 @@ -1951,6 +2319,8 @@ function loadSheetData(sheetName: string) { originalHeaders.value = headers originalTableData.value = jsonData + appliedOriginalSelection.value = null + clearOriginalSelectionVisual() // Convert data convertData(jsonData, headers) @@ -1968,6 +2338,8 @@ function loadParsedSheetData(sheetName: string) { originalHeaders.value = sheet.headers originalTableData.value = sheet.data + appliedOriginalSelection.value = null + clearOriginalSelectionVisual() // 复用已有的字段转换逻辑 convertData(sheet.data, sheet.headers) @@ -2052,11 +2424,12 @@ function convertData(jsonData: any[], headers: string[]) { // 根据映射关系重新生成转换后数据 // changedColumn: 手动修改映射的列名，只更新这一列的数据 function remapDataUsingMappings(changedColumn?: string) { - if (originalTableData.value.length === 0) return + const { data: sourceData } = getActiveOriginalSource() + if (sourceData.length === 0) return // 如果是初次转换（没有指定变化的列），则生成完整数据 if (!changedColumn) { - convertedTableData.value = originalTableData.value.map((row, index) => { + convertedTableData.value = sourceData.map((row, index) => { const convertedRow: any = {} // 初始化所有列为空 @@ -2085,7 +2458,7 @@ function remapDataUsingMappings(changedColumn?: string) { const sourceHeader = columnMappings.value[changedColumn] if (sourceHeader) { convertedTableData.value.forEach((row, index) => { - const originalRow = originalTableData.value[index] + const originalRow = sourceData[index] if (originalRow && originalRow[sourceHeader] !== undefined) { row[changedColumn] = originalRow[sourceHeader].toString() } else { @@ -2760,7 +3133,8 @@ const modalStyle = computed(() => { }) // 打开全屏模态框 -const openFullscreenModal = () => { +const openFullscreenModal = (mode: 'full' | 'original-selection' = 'full') => { + fullscreenModalMode.value = mode isFullscreenModalOpen.value = true // 居中显示 const viewportWidth = window.innerWidth @@ -2775,6 +3149,7 @@ const openFullscreenModal = () => { const closeFullscreenModal = () => { isFullscreenModalOpen.value = false isModalMaximized.value = false + fullscreenModalMode.value = 'full' } // 切换最大化 @@ -2861,6 +3236,8 @@ const resetData = () => { originalTableData.value = [] originalHeaders.value = [] convertedTableData.value = [] + appliedOriginalSelection.value = null + clearOriginalSelectionVisual() currentFileName.value = '' currentFileBase64.value = '' // 清除文件base64数据 // Clear multi-sheet state @@ -4324,6 +4701,24 @@ const getTotalAmount = () => { margin-bottom: 0.75rem; } +.original-table-header, +.modal-original-header { + align-items: flex-start; +} + +.selection-summary { + margin: -0.25rem 0 0; + font-size: 0.75rem; + color: #6b7280; +} + +.original-selection-actions { + display: flex; + align-items: center; + gap: 0.5rem; + flex-shrink: 0; +} + .excel-toolbar { display: flex; align-items: center; @@ -4362,6 +4757,22 @@ const getTotalAmount = () => { font-size: 1.125rem; } +.toolbar-btn.primary { + width: auto; + gap: 0.375rem; + padding: 0 0.625rem; + background: rgba(19, 91, 236, 0.12); + color: #bfdbfe; +} + +.toolbar-btn.text-btn { + width: auto; + height: 1.75rem; + gap: 0.375rem; + padding: 0 0.625rem; + white-space: nowrap; +} + .toolbar-btn.reset-btn:hover:not(:disabled) { background: rgba(239, 68, 68, 0.2); color: #ef4444; @@ -4418,6 +4829,21 @@ const getTotalAmount = () => { font-size: 0.8125rem; } +.original-cell { + cursor: crosshair; + transition: background-color 0.15s, box-shadow 0.15s; +} + +.original-cell.selected { + background: rgba(19, 91, 236, 0.18); + box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.45); +} + +.original-cell.applied { + background: rgba(34, 197, 94, 0.12); + box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.3); +} + .excel-cell.selected { background: rgba(19, 91, 236, 0.15) !important; border-color: #135bec; @@ -5303,6 +5729,22 @@ const getTotalAmount = () => { font-size: 1rem; } +.modal-toolbar-btn.primary { + width: auto; + gap: 0.25rem; + padding: 0 0.5rem; + background: rgba(19, 91, 236, 0.16); + color: #bfdbfe; +} + +.modal-toolbar-btn.text-btn { + width: auto; + min-width: fit-content; + gap: 0.25rem; + padding: 0 0.5rem; + white-space: nowrap; +} + .modal-toolbar-btn.reset-btn:hover:not(:disabled) { background: rgba(239, 68, 68, 0.2); color: #ef4444;