From 5cf79a3f7eb33a4fe9c3e550c00e1600ad27120f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wei=5F=E4=BD=B3?= <weijia.svip@gmail.com>
Date: Mon, 17 Nov 2025 14:48:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=8F=91=E7=A5=A8?=
 =?UTF-8?q?=E5=92=8C=E8=AF=81=E4=B9=A6=E5=BC=B9=E7=AA=97=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E5=AE=8C=E5=96=84=E6=9F=A5=E7=9C=8B=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E5=92=8C=E6=96=87=E4=BB=B6=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 发票弹窗新增查看模式禁用状态，邮箱、文案和上传组件在查看模式下不可编辑
- 优化发票弹窗底部按钮，查看模式下仅显示"关闭"按钮
- 移除发票弹窗上传提示文案和上传区域样式冗余代码
- 证书弹窗新增图片组预览功能，支持图片文件点击放大查看
- 证书弹窗新增文件下载功能，支持所有文件类型下载
- 优化证书文
---
 .../transaction/invoice/InvoiceModal.vue      |  22 ++--
 .../audit/components/CertificateModal.vue     | 121 ++++++++++++++----
 2 files changed, 105 insertions(+), 38 deletions(-)

diff --git a/web/src/views/transaction/invoice/InvoiceModal.vue b/web/src/views/transaction/invoice/InvoiceModal.vue
index 4b7259e..a973482 100644
--- a/web/src/views/transaction/invoice/InvoiceModal.vue
+++ b/web/src/views/transaction/invoice/InvoiceModal.vue
@@ -135,6 +135,7 @@ const modalTitle = props.mode === 'invoice' ? '开票' : '查看发票'
           v-model:value="formData.email"
           placeholder="请输入邮箱地址"
           clearable
+          :disabled="mode === 'view'"
         />
       </NFormItem>
 
@@ -145,6 +146,7 @@ const modalTitle = props.mode === 'invoice' ? '开票' : '查看发票'
           placeholder="请输入文案内容"
           :rows="4"
           clearable
+          :disabled="mode === 'view'"
         />
       </NFormItem>
 
@@ -158,6 +160,7 @@ const modalTitle = props.mode === 'invoice' ? '开票' : '查看发票'
             :before-upload="beforeUpload"
             @change="handleUploadChange"
             @remove="handleRemove"
+            :disabled="mode === 'view'"
           >
             <div class="upload-trigger">
               <div class="upload-icon">+</div>
@@ -166,20 +169,17 @@ const modalTitle = props.mode === 'invoice' ? '开票' : '查看发票'
         </div>
       </NFormItem>
 
-      <NFormItem>
-        <div style="width: 100%; text-align: left; padding-left: 100px">
-          <NText depth="3" style="font-size: 12px; color: #ff9800">
-            ps：最多上传两张
-          </NText>
-        </div>
-      </NFormItem>
+     
     </NForm>
 
     <template #footer>
-      <div style="display: flex; justify-content: flex-end; gap: 12px">
+      <div v-if="mode !== 'view'" style="display: flex; justify-content: flex-end; gap: 12px">
         <NButton @click="handleClose">取消</NButton>
         <NButton type="primary" @click="handleConfirm">确定</NButton>
       </div>
+      <div v-else style="display: flex; justify-content: flex-end; gap: 12px">
+        <NButton @click="handleClose">关闭</NButton>
+      </div>
     </template>
   </NModal>
 </template>
@@ -192,8 +192,6 @@ const modalTitle = props.mode === 'invoice' ? '开票' : '查看发票'
 .upload-trigger {
   width: 100px;
   height: 100px;
-  border: 2px dashed #d9d9d9;
-  border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -201,10 +199,6 @@ const modalTitle = props.mode === 'invoice' ? '开票' : '查看发票'
   transition: all 0.3s;
 }
 
-.upload-trigger:hover {
-  border-color: #40a9ff;
-}
-
 .upload-icon {
   font-size: 32px;
   color: #d9d9d9;
diff --git a/web/src/views/valuation/audit/components/CertificateModal.vue b/web/src/views/valuation/audit/components/CertificateModal.vue
index fa61132..6fddf18 100644
--- a/web/src/views/valuation/audit/components/CertificateModal.vue
+++ b/web/src/views/valuation/audit/components/CertificateModal.vue
@@ -6,7 +6,8 @@ import {
   NButton,
   NUpload,
   NText,
-  NImage
+  NImage,
+  NImageGroup
 } from 'naive-ui'
 // 临时移除图标导入以解决模块解析问题
 // import { DownloadIcon } from '@vicons/tabler'
@@ -142,13 +143,32 @@ const handleDownloadReport = () => {
 
 // 文件预览
 const handlePreview = (file) => {
-  // 图片和PDF可以直接预览
-  if (file.type?.startsWith('image/') || file.type === 'application/pdf') {
-    window.open(file.url || '', '_blank')
-  } else {
-    console.log('此文件类型不支持预览')
-    // TODO: 添加用户提示
+  // 对于非图片文件，显示提示
+  if (!file.type?.startsWith('image/')) {
+    $message.info('此文件类型不支持预览，请下载查看')
+    return false
   }
+  // 图片文件返回 true，让 NUpload 使用内置预览
+  return true
+}
+
+// 文件下载
+const handleDownload = (file) => {
+  const link = document.createElement('a')
+  link.href = file.url || ''
+  link.download = file.name || 'download'
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+
+// 自定义上传预览
+const customRequest = ({ file, onFinish, onError }) => {
+  // 这里可以实现自定义上传逻辑
+  // 暂时模拟上传成功
+  setTimeout(() => {
+    onFinish()
+  }, 1000)
 }
 
 const modalTitle = computed(() => {
@@ -187,6 +207,10 @@ const isUploadMode = computed(() => props.mode === 'upload')
             :before-upload="beforeUpload"
             @change="handleReportUploadChange"
             @remove="handleRemove"
+            :custom-request="customRequest"
+            show-preview-button
+            show-download-button
+            @download="handleDownload"
           >
           </NUpload>
         </div>
@@ -203,6 +227,10 @@ const isUploadMode = computed(() => props.mode === 'upload')
             :before-upload="beforeUpload"
             @change="handleCertificateUploadChange"
             @remove="handleRemove"
+            :custom-request="customRequest"
+            show-preview-button
+            show-download-button
+            @download="handleDownload"
           >
           </NUpload>
         </div>
@@ -239,24 +267,56 @@ const isUploadMode = computed(() => props.mode === 'upload')
             <NText depth="3">暂无证书文件</NText>
           </div>
           <div v-else class="certificate-display">
-            <div
-              v-for="file in certificateFileList"
-              :key="file.id"
-              class="certificate-image"
-              @click="handlePreview(file)"
-            >
-              <NImage
-                v-if="file.type?.startsWith('image/')"
-                :src="file.url"
-                width="120"
-                height="120"
-                objectFit="cover"
-                preview-disabled
-              />
-              <div v-else class="file-icon">
-                {{ file.name?.split('.').pop()?.toUpperCase() || 'FILE' }}
+            <NImageGroup>
+              <div
+                v-for="file in certificateFileList"
+                :key="file.id"
+                class="certificate-item"
+              >
+                <div class="certificate-image">
+                  <NImage
+                    v-if="file.type?.startsWith('image/')"
+                    :src="file.url"
+                    width="120"
+                    height="120"
+                    object-fit="cover"
+                    :preview-src="file.url"
+                  />
+                  <div v-else class="file-icon" @click="handlePreview(file)">
+                    {{ file.name?.split('.').pop()?.toUpperCase() || 'FILE' }}
+                  </div>
+                </div>
+                <div class="file-actions">
+                  <NButton
+                    v-if="file.type?.startsWith('image/')"
+                    size="small"
+                    type="primary"
+                    text
+                    @click="() => {}"
+                    style="visibility: hidden;"
+                  >
+                    预览
+                  </NButton>
+                  <NButton
+                    v-else
+                    size="small"
+                    type="primary"
+                    text
+                    disabled
+                  >
+                    不支持预览
+                  </NButton>
+                  <NButton
+                    size="small"
+                    type="primary"
+                    text
+                    @click="handleDownload(file)"
+                  >
+                    下载
+                  </NButton>
+                </div>
               </div>
-            </div>
+            </NImageGroup>
           </div>
         </div>
       </div>
@@ -411,6 +471,13 @@ const isUploadMode = computed(() => props.mode === 'upload')
   gap: 16px;
 }
 
+.certificate-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
 .certificate-image {
   cursor: pointer;
   border-radius: 8px;
@@ -424,6 +491,12 @@ const isUploadMode = computed(() => props.mode === 'upload')
   box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
 }
 
+.file-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
 .empty-state {
   padding: 40px 20px;
   text-align: center;