122 lines
3.7 KiB
Vue
122 lines
3.7 KiB
Vue
<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>
|