137 lines
4.6 KiB
Vue
137 lines
4.6 KiB
Vue
<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>
|