feat(finance): 实现发票管理页面与子页面

apps/web-antd/src/views/finance/invoice/components/InvoiceDetailDrawer.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+/**
+ * 文件职责：发票记录详情抽屉。
+ */
+import type { FinanceInvoiceRecordDetailDto } from '#/api/finance';
+
+import { Button, Drawer, Empty, Spin, Tag } from 'ant-design-vue';
+
+import {
+  formatCurrency,
+  resolveInvoiceStatusTagColor,
+  resolveInvoiceTypeTagColor,
+} from '../composables/invoice-page/helpers';
+
+interface Props {
+  detail: FinanceInvoiceRecordDetailDto | null;
+  loading: boolean;
+  open: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+}>();
+</script>
+
+<template>
+  <Drawer
+    :open="props.open"
+    width="620"
+    :title="`发票详情 ${props.detail?.invoiceNo ?? ''}`"
+    @close="emit('close')"
+  >
+    <Spin :spinning="props.loading">
+      <template v-if="props.detail">
+        <div class="fi-section">
+          <div class="fi-section-title">基本信息</div>
+          <div class="fi-info-grid">
+            <div>
+              <span class="label">发票号码：</span>
+              <span class="fi-mono">{{ props.detail.invoiceNo }}</span>
+            </div>
+            <div>
+              <span class="label">状态：</span>
+              <Tag :color="resolveInvoiceStatusTagColor(props.detail.status)">
+                {{ props.detail.statusText }}
+              </Tag>
+            </div>
+            <div>
+              <span class="label">申请人：</span>
+              <span>{{ props.detail.applicantName || '--' }}</span>
+            </div>
+            <div>
+              <span class="label">发票类型：</span>
+              <Tag :color="resolveInvoiceTypeTagColor(props.detail.invoiceType)">
+                {{ props.detail.invoiceTypeText || '--' }}
+              </Tag>
+            </div>
+            <div class="full">
+              <span class="label">公司抬头：</span>
+              <span>{{ props.detail.companyName || '--' }}</span>
+            </div>
+            <div>
+              <span class="label">纳税人识别号：</span>
+              <span class="fi-mono">{{ props.detail.taxpayerNumber || '--' }}</span>
+            </div>
+            <div>
+              <span class="label">开票金额：</span>
+              <span class="fi-amount-strong">{{ formatCurrency(props.detail.amount) }}</span>
+            </div>
+            <div class="full">
+              <span class="label">关联订单：</span>
+              <span class="fi-mono">{{ props.detail.orderNo || '--' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="fi-section">
+          <div class="fi-section-title">联系信息</div>
+          <div class="fi-info-grid">
+            <div>
+              <span class="label">接收邮箱：</span>
+              <span>{{ props.detail.contactEmail || '--' }}</span>
+            </div>
+            <div>
+              <span class="label">联系电话：</span>
+              <span>{{ props.detail.contactPhone || '--' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="fi-section">
+          <div class="fi-section-title">状态记录</div>
+          <div class="fi-timeline">
+            <div class="fi-timeline-item">
+              <span class="text">提交申请</span>
+              <span class="time">{{ props.detail.appliedAt }}</span>
+            </div>
+            <div v-if="props.detail.issuedAt" class="fi-timeline-item">
+              <span class="text">开票完成</span>
+              <span class="time">{{ props.detail.issuedAt }}</span>
+            </div>
+            <div v-if="props.detail.voidedAt" class="fi-timeline-item">
+              <span class="text">发票作废</span>
+              <span class="time">{{ props.detail.voidedAt }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="fi-section">
+          <div class="fi-section-title">备注信息</div>
+          <div class="fi-remark-box">
+            <div class="fi-remark-line">
+              <span class="label">申请备注：</span>
+              <span>{{ props.detail.applyRemark || '无' }}</span>
+            </div>
+            <div class="fi-remark-line">
+              <span class="label">开票备注：</span>
+              <span>{{ props.detail.issueRemark || '无' }}</span>
+            </div>
+            <div class="fi-remark-line">
+              <span class="label">作废原因：</span>
+              <span>{{ props.detail.voidReason || '无' }}</span>
+            </div>
+          </div>
+        </div>
+      </template>
+      <Empty v-else description="暂无发票详情" />
+    </Spin>
+
+    <template #footer>
+      <Button @click="emit('close')">关闭</Button>
+    </template>
+  </Drawer>
+</template>