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'" /> @@ -145,6 +146,7 @@ const modalTitle = props.mode === 'invoice' ? '开票' : '查看发票' placeholder="请输入文案内容" :rows="4" clearable + :disabled="mode === 'view'" /> @@ -158,6 +160,7 @@ const modalTitle = props.mode === 'invoice' ? '开票' : '查看发票' :before-upload="beforeUpload" @change="handleUploadChange" @remove="handleRemove" + :disabled="mode === 'view'" >
+
@@ -166,20 +169,17 @@ const modalTitle = props.mode === 'invoice' ? '开票' : '查看发票'
- -
- - ps:最多上传两张 - -
-
+ @@ -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" > @@ -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" > @@ -239,24 +267,56 @@ const isUploadMode = computed(() => props.mode === 'upload') 暂无证书文件
-
- -
- {{ file.name?.split('.').pop()?.toUpperCase() || 'FILE' }} + +
+
+ +
+ {{ file.name?.split('.').pop()?.toUpperCase() || 'FILE' }} +
+
+
+ + 预览 + + + 不支持预览 + + + 下载 + +
-
+
@@ -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;