<template>
|
<el-dialog
|
:model-value="dialogViewVisible"
|
@update:model-value="$emit('update:dialogViewVisible', $event)"
|
:title="title"
|
width="1000px"
|
:close-on-click-modal="false"
|
>
|
<div class="invoice-view">
|
<!-- 基本信息 -->
|
<el-card class="basic-info" shadow="never">
|
<template #header>
|
<div class="card-header">
|
<span>基本信息</span>
|
</div>
|
</template>
|
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="发票号码">{{ form.invoiceNo || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="发票代码">{{ form.invoiceCode || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="开票日期">{{ form.invoiceDate || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="开票状态">
|
<el-tag :type="getStatusType(form.status)">
|
{{ getStatusText(form.status) }}
|
</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item label="税控平台状态">
|
<el-tag :type="getTaxControlStatusType(form.taxControlStatus)">
|
{{ getTaxControlStatusText(form.taxControlStatus) }}
|
</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item label="创建时间">{{ form.createTime || '-' }}</el-descriptions-item>
|
</el-descriptions>
|
</el-card>
|
|
<!-- 购买方信息 -->
|
<el-card class="buyer-info" shadow="never">
|
<template #header>
|
<div class="card-header">
|
<span>购买方信息</span>
|
</div>
|
</template>
|
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="购买方名称">{{ form.buyerName || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="纳税人识别号">{{ form.buyerTaxNo || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="地址电话">{{ form.buyerAddress || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="开户行及账号">{{ form.buyerBankAccount || '-' }}</el-descriptions-item>
|
</el-descriptions>
|
</el-card>
|
|
<!-- 销售方信息 -->
|
<el-card class="seller-info" shadow="never">
|
<template #header>
|
<div class="card-header">
|
<span>销售方信息</span>
|
</div>
|
</template>
|
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="销售方名称">{{ form.sellerName || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="纳税人识别号">{{ form.sellerTaxNo || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="地址电话">{{ form.sellerAddress || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="开户行及账号">{{ form.sellerBankAccount || '-' }}</el-descriptions-item>
|
</el-descriptions>
|
</el-card>
|
|
<!-- 商品明细 -->
|
<el-card class="items-info" shadow="never">
|
<template #header>
|
<div class="card-header">
|
<span>商品明细</span>
|
</div>
|
</template>
|
|
<el-table :data="form.items || []" border style="width: 100%">
|
<el-table-column label="商品名称" prop="name" width="200" />
|
<el-table-column label="规格型号" prop="specification" width="150" />
|
<el-table-column label="单位" prop="unit" width="100" />
|
<el-table-column label="数量" prop="quantity" width="100" />
|
<el-table-column label="单价" prop="unitPrice" width="120">
|
<template #default="scope">
|
{{ scope.row.unitPrice }} 元
|
</template>
|
</el-table-column>
|
<el-table-column label="金额" prop="amount" width="120">
|
<template #default="scope">
|
{{ (scope.row.amount || 0).toFixed(2) }} 元
|
</template>
|
</el-table-column>
|
<el-table-column label="税率" prop="taxRate" width="100">
|
<template #default="scope">
|
{{ (parseFloat(scope.row.taxRate || 0) * 100).toFixed(0) }}%
|
</template>
|
</el-table-column>
|
<el-table-column label="税额" prop="taxAmount" width="120">
|
<template #default="scope">
|
{{ (scope.row.taxAmount || 0).toFixed(2) }} 元
|
</template>
|
</el-table-column>
|
<el-table-column label="价税合计" prop="totalAmount" width="120">
|
<template #default="scope">
|
{{ (scope.row.totalAmount || 0).toFixed(2) }} 元
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 合计信息 -->
|
<div class="summary-info">
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<span class="summary-label">金额合计：</span>
|
<span class="summary-value">{{ getTotalAmount().toFixed(2) }} 元</span>
|
</el-col>
|
<el-col :span="6">
|
<span class="summary-label">税额合计：</span>
|
<span class="summary-value">{{ getTotalTaxAmount().toFixed(2) }} 元</span>
|
</el-col>
|
<el-col :span="6">
|
<span class="summary-label">价税合计：</span>
|
<span class="summary-value">{{ getTotalTotalAmount().toFixed(2) }} 元</span>
|
</el-col>
|
</el-row>
|
</div>
|
</el-card>
|
|
<!-- 备注信息 -->
|
<el-card class="remark-info" shadow="never">
|
<template #header>
|
<div class="card-header">
|
<span>备注信息</span>
|
</div>
|
</template>
|
|
<div class="remark-content">
|
{{ form.remark || '无' }}
|
</div>
|
</el-card>
|
</div>
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="handleClose">关闭</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { computed } from "vue";
|
|
// Props
|
const props = defineProps({
|
dialogViewVisible: {
|
type: Boolean,
|
default: false
|
},
|
form: {
|
type: Object,
|
default: () => ({})
|
},
|
title: {
|
type: String,
|
default: ""
|
}
|
});
|
|
// Emits
|
const emit = defineEmits(['update:dialogViewVisible']);
|
|
// 获取状态类型
|
const getStatusType = (status) => {
|
const statusMap = {
|
draft: "",
|
pending: "warning",
|
issuing: "warning",
|
issued: "success",
|
failed: "danger",
|
cancelled: "info"
|
};
|
return statusMap[status] || "";
|
};
|
|
// 获取状态文本
|
const getStatusText = (status) => {
|
const statusMap = {
|
draft: "草稿",
|
pending: "待开票",
|
issuing: "开票中",
|
issued: "已开票",
|
failed: "开票失败",
|
cancelled: "已作废"
|
};
|
return statusMap[status] || status;
|
};
|
|
// 获取税控平台状态类型
|
const getTaxControlStatusType = (status) => {
|
const statusMap = {
|
pending: "warning",
|
syncing: "warning",
|
synced: "success",
|
failed: "danger"
|
};
|
return statusMap[status] || "";
|
};
|
|
// 获取税控平台状态文本
|
const getTaxControlStatusText = (status) => {
|
const statusMap = {
|
pending: "待同步",
|
syncing: "同步中",
|
synced: "已同步",
|
failed: "同步失败"
|
};
|
return statusMap[status] || status;
|
};
|
|
// 计算总金额
|
const getTotalAmount = () => {
|
return (props.form.items || []).reduce((sum, item) => sum + (item.amount || 0), 0);
|
};
|
|
// 计算总税额
|
const getTotalTaxAmount = () => {
|
return (props.form.items || []).reduce((sum, item) => sum + (item.taxAmount || 0), 0);
|
};
|
|
// 计算总价税合计
|
const getTotalTotalAmount = () => {
|
return (props.form.items || []).reduce((sum, item) => sum + (item.totalAmount || 0), 0);
|
};
|
|
// 关闭对话框
|
const handleClose = () => {
|
emit('update:dialogViewVisible', false);
|
};
|
</script>
|
|
<style scoped>
|
.invoice-view {
|
padding: 20px 0;
|
}
|
|
.basic-info,
|
.buyer-info,
|
.seller-info,
|
.items-info,
|
.remark-info {
|
margin-bottom: 20px;
|
}
|
|
.card-header {
|
font-weight: bold;
|
font-size: 16px;
|
}
|
|
.summary-info {
|
margin-top: 15px;
|
padding: 15px;
|
background-color: #f5f7fa;
|
border-radius: 4px;
|
}
|
|
.summary-label {
|
font-weight: bold;
|
margin-right: 10px;
|
}
|
|
.summary-value {
|
color: #409eff;
|
font-size: 16px;
|
font-weight: bold;
|
}
|
|
.remark-content {
|
padding: 15px;
|
background-color: #f5f7fa;
|
border-radius: 4px;
|
min-height: 60px;
|
line-height: 1.6;
|
}
|
|
.dialog-footer {
|
text-align: right;
|
}
|
|
.el-table {
|
margin-top: 10px;
|
}
|
</style>
|
