完善开票记录页面功能

web/src/views/transaction/invoice/index.vue

@@ -15,6 +15,7 @@ import CommonPage from '@/components/page/CommonPage.vue'
 import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
 import CrudModal from '@/components/table/CrudModal.vue'
 import CrudTable from '@/components/table/CrudTable.vue'
+import InvoiceModal from './InvoiceModal.vue'
 
 import { formatDate, renderIcon } from '@/utils'
 import { useCRUD } from '@/composables'
@@ -27,6 +28,11 @@ const $table = ref(null)
 const queryItems = ref({})
 const vPermission = resolveDirective('permission')
 
+// 开票/查看弹窗相关状态
+const invoiceModalVisible = ref(false)
+const invoiceModalMode = ref('invoice') // 'invoice' 或 'view'
+const currentInvoice = ref(null)
+
 // 状态选项
 const statusOptions = [
   { label: '全部', value: '' },
@@ -212,25 +218,15 @@ const columns = [
         // 开票按钮 - 未开票状态显示
         row.status === 'pending' &&
           h(
-            NPopconfirm,
+            NButton,
             {
-              onPositiveClick: () => handleUpdateStatus(row, 'invoiced'),
+              size: 'small',
+              type: 'success',
+              style: 'margin-right: 8px;',
+              onClick: () => handleInvoice(row),
             },
             {
-              trigger: () =>
-                h(
-                  NButton,
-                  {
-                    size: 'small',
-                    type: 'success',
-                    style: 'margin-right: 8px;',
-                  },
-                  {
-                    default: () => '开票',
-                    // icon: renderIcon('mdi:receipt-text-outline', { size: 16 }),
-                  }
-                ),
-              default: () => h('div', {}, '确认开票？'),
+              default: () => '开票',
             }
           ),
         // 退款按钮 - 未开票状态显示
@@ -251,7 +247,6 @@ const columns = [
                   },
                   {
                     default: () => '退款',
-                    // icon: renderIcon('mdi:cash-refund', { size: 16 }),
                   }
                 ),
               default: () => h('div', {}, '确认退款？'),
@@ -269,7 +264,6 @@ const columns = [
             },
             {
               default: () => '查看',
-              // icon: renderIcon('mdi:eye-outline', { size: 16 }),
             }
           ),
       ]
@@ -305,14 +299,38 @@ async function handleRefund(row) {
   }
 }
 
+// 开票处理
+function handleInvoice(row) {
+  currentInvoice.value = row
+  invoiceModalMode.value = 'invoice'
+  invoiceModalVisible.value = true
+}
+
 // 查看详情
 function handleView(row) {
-  // 这里可以打开详情弹窗或跳转到详情页面
-  $message.info(`查看开票记录详情 - ID: ${row.id}`)
-  // 实际项目中可以实现为：
-  // modalVisible.value = true
-  // modalAction.value = 'view'
-  // modalForm.value = { ...row }
+  currentInvoice.value = row
+  invoiceModalMode.value = 'view'
+  invoiceModalVisible.value = true
+}
+
+// 确认开票/查看操作
+async function handleInvoiceConfirm(data) {
+  try {
+    if (invoiceModalMode.value === 'invoice') {
+      // 开票操作
+      await api.sendInvoice(data)
+      await api.updateInvoiceStatus({ id: data.id, status: 'invoiced' })
+      $message.success('开票成功')
+    } else {
+      // 查看操作（可能是重新发送）
+      await api.sendInvoice(data)
+      $message.success('发送成功')
+    }
+    invoiceModalVisible.value = false
+    $table.value?.handleSearch()
+  } catch (error) {
+    $message.error('操作失败: ' + error.message)
+  }
 }
 
 const validateForm = {
@@ -473,5 +491,13 @@ const validateForm = {
         </NFormItem>
       </NForm>
     </CrudModal>
+
+    <!-- 开票/查看弹窗 -->
+    <InvoiceModal
+      v-model:visible="invoiceModalVisible"
+      :invoice-data="currentInvoice"
+      :mode="invoiceModalMode"
+      @confirm="handleInvoiceConfirm"
+    />
   </CommonPage>
 </template>