From 823230cb2dc2cae3bf0779d66a479d5fb0a30cd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wei=5F=E4=BD=B3?= <weijia.svip@gmail.com>
Date: Thu, 27 Nov 2025 11:06:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=8F=91=E7=A5=A8?=
 =?UTF-8?q?=E9=80=80=E6=AC=BE=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=8F=91=E7=A5=A8=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=92=8C=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/api/index.js                          |  2 +
 .../transaction/invoice/InvoiceModal.vue      | 17 +---
 web/src/views/transaction/invoice/index.vue   | 99 ++++++++++++++++---
 .../audit/components/CertificateModal.vue     | 16 ---
 4 files changed, 88 insertions(+), 46 deletions(-)

diff --git a/web/src/api/index.js b/web/src/api/index.js
index 2ac5b1c..76b785e 100644
--- a/web/src/api/index.js
+++ b/web/src/api/index.js
@@ -52,6 +52,8 @@ export default {
   getInvoiceById: (params = {}) => request.get(`/transactions/receipts/${params.id}`, { params }),
   // 后端接口要求请求体包裹在 data 字段下
   sendInvoice: (data = {}) => request.post('/transactions/send-email', { data }),
+  // 退款
+  refundInvoice: (data = {}) => request.post('/invoice/update-status', data),
   // invoice headers
   getInvoiceHeaders: (params = {}) => request.get('/invoice/list', { params }),
   // valuation (估值评估)
diff --git a/web/src/views/transaction/invoice/InvoiceModal.vue b/web/src/views/transaction/invoice/InvoiceModal.vue
index 7e46ba0..ce01ab2 100644
--- a/web/src/views/transaction/invoice/InvoiceModal.vue
+++ b/web/src/views/transaction/invoice/InvoiceModal.vue
@@ -172,18 +172,16 @@ const modalTitle = props.mode === 'invoice' ? '开票' : '查看发票'
         <div style="width: 100%">
           <NUpload
             v-model:file-list="fileList"
-            multiple
-            :max="2"
+            :max="3"
             list-type="image-card"
             :action="uploadUrl"
             :headers="uploadHeaders"
             :before-upload="beforeUpload"
             @finish="handleUploadFinish"
             :disabled="mode === 'view'"
+            show-preview-button
+            show-download-button
           >
-            <div class="upload-trigger">
-              <div class="upload-icon">+</div>
-            </div>
           </NUpload>
         </div>
       </NFormItem>
@@ -223,13 +221,4 @@ const modalTitle = props.mode === 'invoice' ? '开票' : '查看发票'
   color: #d9d9d9;
 }
 
-:deep(.n-upload-file-list) {
-  display: flex;
-  gap: 8px;
-}
-
-:deep(.n-upload-trigger) {
-  width: 100px;
-  height: 100px;
-}
 </style>
diff --git a/web/src/views/transaction/invoice/index.vue b/web/src/views/transaction/invoice/index.vue
index af2da5d..cc1a6eb 100644
--- a/web/src/views/transaction/invoice/index.vue
+++ b/web/src/views/transaction/invoice/index.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'
 import dayjs from 'dayjs'
-import { NButton, NInput, NTag, NSelect, NDatePicker } from 'naive-ui'
+import { NButton, NInput, NTag, NSelect, NDatePicker, useMessage, useDialog } from 'naive-ui'
 
 import CommonPage from '@/components/page/CommonPage.vue'
 import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
@@ -16,6 +16,8 @@ defineOptions({ name: '开票记录' })
 const $table = ref(null)
 const queryItems = ref({})
 const vPermission = resolveDirective('permission')
+const $message = useMessage()
+const dialog = useDialog()
 
 // 开票/查看弹窗相关状态
 const invoiceModalVisible = ref(false)
@@ -190,23 +192,60 @@ const columns = [
   {
     title: '操作',
     key: 'actions',
-    width: 80,
+    width: 150,
     align: 'center',
     fixed: 'right',
     render(row) {
-      const editable = row.status === 'pending'
-      return withDirectives(
-        h(
-          NButton,
-          {
-            size: 'small',
-            type: editable ? 'primary' : 'default',
-            onClick: () => handleInvoice(row),
-          },
-          { default: () => '开票' }
-        ),
-        [[vPermission, 'post/api/v1/transactions/send-email']]
-      )
+      const buttons = []
+      
+      if (row.status === 'pending') {
+        // 未开票：显示"开票"和"退款"按钮
+        buttons.push(
+          withDirectives(
+            h(
+              NButton,
+              {
+                size: 'small',
+                type: 'primary',
+                onClick: () => handleInvoice(row),
+              },
+              { default: () => '开票' }
+            ),
+            [[vPermission, 'post/api/v1/transactions/send-email']]
+          )
+        )
+        buttons.push(
+          withDirectives(
+            h(
+              NButton,
+              {
+                size: 'small',
+                type: 'warning',
+                onClick: () => handleRefund(row),
+                style: { marginLeft: '8px' },
+              },
+              { default: () => '退款' }
+            ),
+            [[vPermission, 'post/api/v1/invoice/update-status']]
+          )
+        )
+      } else if (row.status === 'invoiced') {
+        // 已开票：显示"查看"按钮
+        buttons.push(
+          h(
+            NButton,
+            {
+              size: 'small',
+              type: 'default',
+              onClick: () => handleInvoice(row),
+            },
+            { default: () => '查看' }
+          )
+        )
+      }
+      // 已退款状态不显示任何按钮
+      
+      return h('div', { style: 'display: flex; gap: 8px; justify-content: center;' }, buttons)
     },
   },
 ]
@@ -219,7 +258,35 @@ function handleInvoice(row) {
   invoiceModalVisible.value = true
 }
 
-// 确认发送邮件
+// 退款处理
+function handleRefund(row) {
+  dialog.warning({
+    title: '确认退款',
+    content: `确定要将此订单标记为已退款吗？`,
+    positiveText: '确定',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      try {
+        const invoiceId = row.invoice_id
+        if (!invoiceId) {
+          $message.error('无法获取发票ID')
+          return
+        }
+        
+        await api.refundInvoice({
+          id: invoiceId,
+          status: 'refunded',
+        })
+        $message.success('退款成功')
+        $table.value?.handleSearch()
+      } catch (error) {
+        console.error(error)
+        $message.error(error?.message || '退款失败')
+      }
+    },
+  })
+}
+
 // 确认发送邮件
 async function handleInvoiceConfirm(formData) {
   try {
diff --git a/web/src/views/valuation/audit/components/CertificateModal.vue b/web/src/views/valuation/audit/components/CertificateModal.vue
index 441aec4..3b96e65 100644
--- a/web/src/views/valuation/audit/components/CertificateModal.vue
+++ b/web/src/views/valuation/audit/components/CertificateModal.vue
@@ -409,22 +409,6 @@ const handlePreview = (file) => {
   gap: 12px;
 }
 
-/* 缩略图上传组件样式 */
-:deep(.n-upload) {
-  width: 100%;
-}
-
-:deep(.n-upload-file-list) {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-  gap: 8px;
-}
-
-:deep(.n-upload-file-card) {
-  aspect-ratio: 1;
-  border-radius: 6px;
-  overflow: hidden;
-}
 
 /* 响应式调整 */
 @media (max-width: 768px) {