From 941a95ae562d79fff651ed0a96695909675b0de6 Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Thu, 27 Nov 2025 17:39:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8B=9B=E6=A0=87=E8=A7=A3=E6=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/child/DocumentPreviewPanel.vue | 226 +++++++++---------
 src/views/common/DocumentExcel.vue            |  44 +++-
 src/views/common/DocumentSearch.vue           |  46 +++-
 src/views/common/DocumentSearchWord.vue       |  45 +++-
 4 files changed, 222 insertions(+), 139 deletions(-)

diff --git a/src/views/analysis/components/child/DocumentPreviewPanel.vue b/src/views/analysis/components/child/DocumentPreviewPanel.vue
index 9c72c12..135a24e 100644
--- a/src/views/analysis/components/child/DocumentPreviewPanel.vue
+++ b/src/views/analysis/components/child/DocumentPreviewPanel.vue
@@ -1,50 +1,22 @@
 <!-- 文档预览面板 -->
 <template>
     <div class="document-preview-panel">
-        <div class="panel-header">
-            <div class="header-actions">
-                <el-button
-                    type="text"
-                    icon="el-icon-search"
-                    class="search-btn"
-                    @click="handleSearch"
-                ></el-button>
-            </div>
-            <div class="document-switch">
-                <el-button
-                    :type="activeDocType === 'tender' ? 'primary' : 'default'"
-                    class="doc-btn"
-                    @click="switchDocument('tender')"
-                >
-                    招标文件
-                </el-button>
-                <el-button
-                    :type="activeDocType === 'bid' ? 'primary' : 'default'"
-                    class="doc-btn"
-                    @click="switchDocument('bid')"
-                >
-                    标段文件
-                </el-button>
-            </div>
-        </div>
         <div class="panel-content">
-            <div v-if="documentUrl" class="document-viewer">
-                <OnlyOfficeViewer
-                    v-if="showOnlyOffice"
-                    :document-url="documentUrl"
-                    :document-title="documentTitle"
-                    :document-key="documentKey"
-                    :mode="viewMode"
-                    :type="viewType"
-                    @document-ready="handleDocumentReady"
-                    @app-ready="handleAppReady"
-                    @error="handleError"
-                />
+            <div v-if="currentDocument" class="document-viewer">
+                <div v-if="currentDocument.type === 'pdf'" class="embedded-viewer">
+                    <DocumentSearch :file-url="currentDocument.url" />
+                </div>
+                <div v-else-if="currentDocument.type === 'word'" class="embedded-viewer">
+                    <DocumentSearchWord :file-url="currentDocument.url" />
+                </div>
+                <div v-else-if="currentDocument.type === 'excel'" class="embedded-viewer">
+                    <DocumentExcel :file-url="currentDocument.url" />
+                </div>
                 <div v-else class="document-placeholder">
                     <div class="placeholder-content">
                         <i class="el-icon-document placeholder-icon"></i>
-                        <p class="placeholder-text">文档预览</p>
-                        <p class="placeholder-desc">{{ documentTitle || '暂无文档' }}</p>
+                        <p class="placeholder-text">暂不支持的文件类型</p>
+                        <p class="placeholder-desc">{{ currentDocument.title || currentDocument.url }}</p>
                     </div>
                 </div>
             </div>
@@ -57,50 +29,71 @@
 </template>
 
 <script>
-import OnlyOfficeViewer from '@/views/common/OnlyOfficeViewer.vue'
+import DocumentSearch from '@/views/common/DocumentSearch.vue'
+import DocumentSearchWord from '@/views/common/DocumentSearchWord.vue'
+import DocumentExcel from '@/views/common/DocumentExcel.vue'
+
+const WORD_EXTS = ['.doc', '.docx']
+const PDF_EXTS = ['.pdf']
+const EXCEL_EXTS = ['.xls', '.xlsx', '.csv', '.xlsm']
+
+const DEFAULT_DOCUMENTS = [
+    {
+        id: 'sample-pdf',
+        title: '示例 PDF 文档',
+        url: 'http://192.168.0.14:9090/smart-bid/technicalSolutionDatabase/2025/10/30/fe5b46ea37554516a71e7c0c486d3715.pdf',
+        type: 'pdf'
+    },
+    {
+        id: 'sample-excel',
+        title: '示例 Excel 文档',
+        url: 'http://192.168.0.14:9090/smart-bid/technicalSolutionDatabase/2025/11/12/928206a2fdc74c349781f441d9c010f8.xlsx',
+        type: 'excel'
+    },
+    {
+        id: 'sample-word',
+        title: '示例 Word 文档',
+        url: 'http://192.168.0.14:9090/smart-bid/technicalSolutionDatabase/2025/11/11/887b35d28b2149b6a7555fb639be9411.docx',
+        type: 'word'
+    }
+]
 
 export default {
     name: 'DocumentPreviewPanel',
     components: {
-        OnlyOfficeViewer
+        DocumentSearch,
+        DocumentSearchWord,
+        DocumentExcel
     },
     props: {
-        // 招标文件URL
         tenderDocumentUrl: {
             type: String,
             default: ''
         },
-        // 招标文件标题
         tenderDocumentTitle: {
             type: String,
             default: ''
         },
-        // 招标文件Key
         tenderDocumentKey: {
             type: String,
             default: ''
         },
-        // 标段文件URL
         bidDocumentUrl: {
             type: String,
             default: ''
         },
-        // 标段文件标题
         bidDocumentTitle: {
             type: String,
             default: ''
         },
-        // 标段文件Key
         bidDocumentKey: {
             type: String,
             default: ''
         },
-        // 查看模式
         viewMode: {
             type: String,
             default: 'view'
         },
-        // 查看类型
         viewType: {
             type: String,
             default: 'desktop'
@@ -108,50 +101,74 @@ export default {
     },
     data() {
         return {
-            activeDocType: 'tender', // 'tender' 或 'bid'
-            showOnlyOffice: false
+            documents: [],
+            currentIndex: -1
         }
     },
     computed: {
-        documentUrl() {
-            return this.activeDocType === 'tender' ? this.tenderDocumentUrl : this.bidDocumentUrl
-        },
-        documentTitle() {
-            return this.activeDocType === 'tender' ? this.tenderDocumentTitle : this.bidDocumentTitle
-        },
-        documentKey() {
-            return this.activeDocType === 'tender' ? this.tenderDocumentKey : this.bidDocumentKey
+        currentDocument() {
+            return this.documents[this.currentIndex] || null
         }
     },
+    created() {
+        this.buildDocuments()
+    },
     watch: {
-        documentUrl(newVal) {
-            if (newVal) {
-                this.showOnlyOffice = true
-            }
+        tenderDocumentUrl() {
+            this.buildDocuments()
+        },
+        bidDocumentUrl() {
+            this.buildDocuments()
         }
     },
     methods: {
-        switchDocument(type) {
-            this.activeDocType = type
-            this.showOnlyOffice = false
-            this.$nextTick(() => {
-                if (this.documentUrl) {
-                    this.showOnlyOffice = true
-                }
-            })
-            this.$emit('document-switch', type)
-        },
         handleSearch() {
             this.$emit('search')
         },
-        handleDocumentReady() {
-            this.$emit('document-ready')
-        },
-        handleAppReady() {
-            this.$emit('app-ready')
-        },
         handleError(error) {
             this.$emit('error', error)
+        },
+        resolveViewerType(url, title) {
+            const value = (url || title || '').toLowerCase()
+            if (!value) {
+                return 'none'
+            }
+            if (PDF_EXTS.some(ext => value.includes(ext))) {
+                return 'pdf'
+            }
+            if (WORD_EXTS.some(ext => value.includes(ext))) {
+                return 'word'
+            }
+            if (EXCEL_EXTS.some(ext => value.includes(ext))) {
+                return 'excel'
+            }
+            return 'unsupported'
+        },
+        buildDocuments() {
+            const docs = []
+            if (this.tenderDocumentUrl) {
+                docs.push({
+                    id: 'tender',
+                    title: this.tenderDocumentTitle || '招标文件',
+                    url: this.tenderDocumentUrl,
+                    type: this.resolveViewerType(this.tenderDocumentUrl, this.tenderDocumentTitle)
+                })
+            }
+            if (this.bidDocumentUrl) {
+                docs.push({
+                    id: 'bid',
+                    title: this.bidDocumentTitle || '标段文件',
+                    url: this.bidDocumentUrl,
+                    type: this.resolveViewerType(this.bidDocumentUrl, this.bidDocumentTitle)
+                })
+            }
+            if (!docs.length) {
+                DEFAULT_DOCUMENTS.forEach(doc => docs.push({ ...doc }))
+            }
+            this.documents = docs
+            this.currentIndex = docs.length ? 0 : -1
+            const current = this.currentDocument
+            this.$emit('document-switch', current?.id || 'none')
         }
     }
 }
@@ -168,7 +185,7 @@ export default {
 
     .panel-header {
         display: flex;
-        justify-content: space-between;
+        justify-content: flex-end;
         align-items: center;
         padding: 12px 20px;
         border-bottom: 1px solid #EBEEF5;
@@ -185,35 +202,6 @@ export default {
                 }
             }
         }
-
-        .document-switch {
-            display: flex;
-            gap: 8px;
-
-            .doc-btn {
-                padding: 8px 16px;
-                font-size: 14px;
-                border-radius: 4px;
-                transition: all 0.3s;
-
-                &.el-button--primary {
-                    background: #409EFF;
-                    border-color: #409EFF;
-                }
-
-                &.el-button--default {
-                    background: #F5F7FA;
-                    border-color: #DCDFE6;
-                    color: #606266;
-
-                    &:hover {
-                        background: #ECF5FF;
-                        border-color: #B3D8FF;
-                        color: #409EFF;
-                    }
-                }
-            }
-        }
     }
 
     .panel-content {
@@ -225,9 +213,25 @@ export default {
             width: 100%;
             height: 100%;
 
-            ::v-deep .onlyoffice-container {
+            .embedded-viewer {
                 width: 100%;
                 height: 100%;
+                display: flex;
+                flex-direction: column;
+            }
+
+            ::v-deep .embedded-viewer .document-search,
+            ::v-deep .embedded-viewer .document-search-word,
+            ::v-deep .embedded-viewer .document-excel {
+                height: 100%;
+                padding: 0;
+                background: transparent;
+                box-sizing: border-box;
+            }
+
+            ::v-deep .embedded-viewer .viewer-container {
+                min-height: auto;
+                border-radius: 0;
             }
         }
 
diff --git a/src/views/common/DocumentExcel.vue b/src/views/common/DocumentExcel.vue
index 06abde7..ccb5059 100644
--- a/src/views/common/DocumentExcel.vue
+++ b/src/views/common/DocumentExcel.vue
@@ -32,6 +32,12 @@ const DEFAULT_EXCEL_URL = 'http://192.168.0.14:9090/smart-bid/technicalSolutionD
 
 export default {
     name: 'DocumentExcel',
+    props: {
+        fileUrl: {
+            type: String,
+            default: ''
+        }
+    },
     data() {
         return {
             loading: false,
@@ -43,20 +49,27 @@ export default {
     },
     computed: {
         routeExcelUrl() {
-            return this.$route.query.url || this.$route.params.url;
+            return this.$route?.query?.url || this.$route?.params?.url || ''
         }
     },
     watch: {
+        fileUrl: {
+            immediate: true,
+            handler(newVal) {
+                if (newVal) {
+                    this.applyExcelUrl(newVal)
+                } else if (!this.excelUrl && !this.routeExcelUrl) {
+                    this.applyExcelUrl(DEFAULT_EXCEL_URL)
+                }
+            }
+        },
         routeExcelUrl: {
             immediate: true,
-            handler(newUrl) {
-                if (newUrl) {
-                    this.excelUrl = newUrl;
-                    this.loadExcel();
-                } else {
-                    // 如果没有传入URL，使用默认URL
-                    this.excelUrl = DEFAULT_EXCEL_URL;
-                    this.loadExcel();
+            handler(newVal) {
+                if (this.fileUrl) return
+                const target = newVal || DEFAULT_EXCEL_URL
+                if (target && target !== this.excelUrl) {
+                    this.applyExcelUrl(target)
                 }
             }
         }
@@ -69,6 +82,17 @@ export default {
         this.destroyLuckySheet();
     },
     methods: {
+        applyExcelUrl(url) {
+            if (!url || url === this.excelUrl) {
+                this.excelUrl = url
+                if (url) {
+                    this.loadExcel()
+                }
+                return
+            }
+            this.excelUrl = url
+            this.loadExcel()
+        },
         // 加载 Excel 文件
         async loadExcel() {
             if (!this.excelUrl) {
@@ -329,7 +353,7 @@ export default {
 
 <style scoped>
 .document-excel {
-    height: 90vh;
+    height: 100%;
     background: #f5f5f5;
 }
 
diff --git a/src/views/common/DocumentSearch.vue b/src/views/common/DocumentSearch.vue
index 60fe9fa..26dd892 100644
--- a/src/views/common/DocumentSearch.vue
+++ b/src/views/common/DocumentSearch.vue
@@ -66,9 +66,16 @@ if (resolvedWorkerSrc) {
 }
 
 const DEFAULT_SCALE = 1
+const DEFAULT_PDF_URL = 'http://192.168.0.14:9090/smart-bid/technicalSolutionDatabase/2025/10/30/fe5b46ea37554516a71e7c0c486d3715.pdf'
 
 export default {
     name: 'DocumentSearch',
+    props: {
+        fileUrl: {
+            type: String,
+            default: ''
+        }
+    },
     computed: {
         overlayType() {
             if (this.loading) {
@@ -135,9 +142,9 @@ export default {
             }
         }
 
-        this.pdfUrl = this.$route.query.url || 'http://192.168.0.14:9090/smart-bid/technicalSolutionDatabase/2025/10/30/fe5b46ea37554516a71e7c0c486d3715.pdf'
-        if (this.pdfUrl) {
-            this.loadDocument()
+        if (!this.pdfUrl) {
+            const initialUrl = this.fileUrl || this.$route?.query?.url || DEFAULT_PDF_URL
+            this.applyPdfUrl(initialUrl)
         }
     },
     beforeDestroy() {
@@ -145,17 +152,38 @@ export default {
         this.cancelScrollAnimation()
     },
     watch: {
-        '$route.query.url'(newUrl, oldUrl) {
-            if (newUrl !== oldUrl) {
-                this.pdfUrl = newUrl || ''
-                this.resetViewerState()
-                if (this.pdfUrl) {
-                    this.loadDocument()
+        fileUrl: {
+            immediate: true,
+            handler(newVal) {
+                if (newVal) {
+                    this.applyPdfUrl(newVal)
                 }
             }
         },
+        '$route.query.url'(newUrl, oldUrl) {
+            if (this.fileUrl) return
+            if (newUrl !== oldUrl) {
+                const target = newUrl || DEFAULT_PDF_URL
+                this.applyPdfUrl(target)
+            }
+        },
     },
     methods: {
+        applyPdfUrl(url) {
+            const resolved = url || ''
+            if (resolved === this.pdfUrl) {
+                if (resolved) {
+                    this.loadDocument()
+                }
+                return
+            }
+            this.pdfUrl = resolved
+            if (this.pdfUrl) {
+                this.loadDocument()
+            } else {
+                this.resetViewerState()
+            }
+        },
         async loadDocument() {
             if (!this.pdfUrl) return
             this.loading = true
diff --git a/src/views/common/DocumentSearchWord.vue b/src/views/common/DocumentSearchWord.vue
index a140647..fe18466 100644
--- a/src/views/common/DocumentSearchWord.vue
+++ b/src/views/common/DocumentSearchWord.vue
@@ -53,6 +53,12 @@ const DEFAULT_DOC_URL = 'http://192.168.0.14:9090/smart-bid/technicalSolutionDat
 
 export default {
     name: 'DocumentSearchWord',
+    props: {
+        fileUrl: {
+            type: String,
+            default: ''
+        }
+    },
     data() {
         return {
             docUrl: '',
@@ -69,9 +75,9 @@ export default {
         }
     },
     mounted() {
-        this.docUrl = this.$route.query.url || DEFAULT_DOC_URL
-        if (this.docUrl) {
-            this.loadDocument()
+        if (!this.docUrl) {
+            const initialUrl = this.fileUrl || this.$route?.query?.url || DEFAULT_DOC_URL
+            this.applyDocUrl(initialUrl)
         }
     },
     beforeDestroy() {
@@ -79,17 +85,38 @@ export default {
         this.cancelScrollAnimation()
     },
     watch: {
-        '$route.query.url'(newUrl, oldUrl) {
-            if (newUrl !== oldUrl) {
-                this.docUrl = newUrl || DEFAULT_DOC_URL
-                this.resetViewerState()
-                if (this.docUrl) {
-                    this.loadDocument()
+        fileUrl: {
+            immediate: true,
+            handler(newVal) {
+                if (newVal) {
+                    this.applyDocUrl(newVal)
                 }
             }
         },
+        '$route.query.url'(newUrl, oldUrl) {
+            if (this.fileUrl) return
+            if (newUrl !== oldUrl) {
+                const target = newUrl || DEFAULT_DOC_URL
+                this.applyDocUrl(target)
+            }
+        },
     },
     methods: {
+        applyDocUrl(url) {
+            const resolved = url || ''
+            if (resolved === this.docUrl) {
+                if (resolved) {
+                    this.loadDocument()
+                }
+                return
+            }
+            this.docUrl = resolved
+            if (this.docUrl) {
+                this.loadDocument()
+            } else {
+                this.resetViewerState()
+            }
+        },
         cancelFetch() {
             if (this.abortController) {
                 this.abortController.abort()