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

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

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+/**
+ * 文件职责：发票开票抽屉。
+ */
+import type {
+  FinanceInvoiceRecordDetailDto,
+  FinanceInvoiceRecordListItemDto,
+} from '#/api/finance';
+import type { FinanceInvoiceIssueFormState } from '../types';
+
+import { Button, Drawer, Form, Input, Spin, Tag } from 'ant-design-vue';
+
+import {
+  formatCurrency,
+  resolveInvoiceTypeTagColor,
+} from '../composables/invoice-page/helpers';
+
+interface Props {
+  detail: FinanceInvoiceRecordDetailDto | null;
+  form: FinanceInvoiceIssueFormState;
+  loadingDetail: boolean;
+  open: boolean;
+  submitting: boolean;
+  targetRecord: FinanceInvoiceRecordListItemDto | null;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+  (event: 'submit'): void;
+  (event: 'update:contactEmail', value: string): void;
+  (event: 'update:issueRemark', value: string): void;
+}>();
+
+function toStringValue(value: string | undefined) {
+  return String(value ?? '');
+}
+</script>
+
+<template>
+  <Drawer
+    :open="props.open"
+    width="560"
+    title="发票开票"
+    @close="emit('close')"
+  >
+    <Spin :spinning="props.loadingDetail">
+      <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.targetRecord?.invoiceNo || '--' }}</span>
+          </div>
+          <div>
+            <span class="label">发票类型：</span>
+            <Tag
+              :color="resolveInvoiceTypeTagColor(props.targetRecord?.invoiceType || '')"
+            >
+              {{ props.targetRecord?.invoiceTypeText || '--' }}
+            </Tag>
+          </div>
+          <div>
+            <span class="label">申请人：</span>
+            <span>{{ props.targetRecord?.applicantName || '--' }}</span>
+          </div>
+          <div>
+            <span class="label">开票金额：</span>
+            <span class="fi-amount-strong">{{ formatCurrency(Number(props.targetRecord?.amount || 0)) }}</span>
+          </div>
+          <div class="full">
+            <span class="label">公司抬头：</span>
+            <span>{{ props.targetRecord?.companyName || '--' }}</span>
+          </div>
+          <div class="full">
+            <span class="label">关联订单：</span>
+            <span class="fi-mono">{{ props.targetRecord?.orderNo || '--' }}</span>
+          </div>
+          <div class="full">
+            <span class="label">纳税人识别号：</span>
+            <span class="fi-mono">{{ props.detail?.taxpayerNumber || '--' }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="fi-section">
+        <div class="fi-section-title">开票补充信息</div>
+        <Form layout="vertical">
+          <Form.Item label="接收邮箱">
+            <Input
+              :value="props.form.contactEmail"
+              placeholder="请输入开票接收邮箱"
+              @update:value="(value) => emit('update:contactEmail', toStringValue(value))"
+            />
+          </Form.Item>
+
+          <Form.Item label="开票备注">
+            <Input.TextArea
+              :value="props.form.issueRemark"
+              placeholder="请输入开票备注（选填）"
+              :maxlength="200"
+              :rows="4"
+              show-count
+              @update:value="(value) => emit('update:issueRemark', toStringValue(value))"
+            />
+          </Form.Item>
+        </Form>
+      </div>
+    </Spin>
+
+    <template #footer>
+      <div class="fi-drawer-footer">
+        <Button @click="emit('close')">取消</Button>
+        <Button type="primary" :loading="props.submitting" @click="emit('submit')">
+          确认开票
+        </Button>
+      </div>
+    </template>
+  </Drawer>
+</template>