<template>
|
<div class="app-container">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span class="card-title">发票申请详情</span>
|
<el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
|
</div>
|
|
<el-descriptions :column="2" border>
|
<!-- 基本信息 -->
|
<el-descriptions-item label="发票ID">{{ invoice.invoiceId }}</el-descriptions-item>
|
<el-descriptions-item label="服务单号">{{ invoice.serviceCode || invoice.legacyServiceOrderId || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="开票类型">
|
<el-tag :type="invoice.invoiceType === 2 ? 'success' : 'info'" size="small">
|
{{ invoice.invoiceType === 2 ? '企业' : '个人' }}
|
</el-tag>
|
</el-descriptions-item>
|
|
<el-descriptions-item label="申请状态">
|
<el-tag :type="invoice.status === 1 ? 'success' : (invoice.status === 2 ? 'danger' : 'warning')" size="small">
|
{{ statusFormat(invoice.status) }}
|
</el-tag>
|
</el-descriptions-item>
|
|
<!-- 发票信息 -->
|
<el-descriptions-item label="发票抬头" :span="2">{{ invoice.invoiceName }}</el-descriptions-item>
|
<el-descriptions-item label="发票金额">
|
<span class="text-price">¥{{ formatMoney(invoice.invoiceMoney) }}</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="发票编号">{{ invoice.invoiceNo || '-' }}</el-descriptions-item>
|
|
<!-- 联系信息 -->
|
<el-descriptions-item label="联系人">{{ invoice.contactName || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="联系电话">{{ invoice.contactPhone || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="联系邮箱" :span="2">{{ invoice.contactEmail || '-' }}</el-descriptions-item>
|
|
<!-- 企业信息（仅企业类型显示） -->
|
<template v-if="invoice.invoiceType === 2">
|
<el-descriptions-item label="注册地址" :span="2">{{ invoice.companyAddress || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="开户银行">{{ invoice.companyBank || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="银行账号">{{ invoice.companyBankNo || '-' }}</el-descriptions-item>
|
</template>
|
|
<!-- 邮寄信息 -->
|
<el-descriptions-item label="邮寄地址" :span="2">{{ invoice.mailAddress || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="邮编">{{ invoice.zipCode || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="备注" :span="2">{{ invoice.invoiceRemarks || '-' }}</el-descriptions-item>
|
|
<!-- 时间信息 -->
|
<el-descriptions-item label="申请时间">{{ parseTime(invoice.applyTime) }}</el-descriptions-item>
|
<el-descriptions-item label="审核时间">{{ parseTime(invoice.auditTime) || '-' }}</el-descriptions-item>
|
|
<!-- 审核信息 -->
|
<el-descriptions-item label="审核备注" :span="2">
|
<span :class="invoice.status === 2 ? 'text-danger' : ''">{{ invoice.auditRemarks || '-' }}</span>
|
</el-descriptions-item>
|
|
<!-- 同步状态 -->
|
<el-descriptions-item label="同步状态">
|
<el-tag
|
:type="invoice.syncStatus === 1 ? 'success' : (invoice.syncStatus === 2 ? 'danger' : 'info')"
|
size="small"
|
>
|
{{ syncStatusFormat(invoice.syncStatus) }}
|
</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item label="旧系统发票ID">
|
<span v-if="invoice.legacyInvoiceId">{{ invoice.legacyInvoiceId }}</span>
|
<span v-else class="text-gray">未同步</span>
|
</el-descriptions-item>
|
|
<!-- 发票文件 -->
|
<el-descriptions-item label="发票文件" :span="2" v-if="invoice.invoiceUrl">
|
<el-link type="primary" :href="getFullUrl(invoice.invoiceUrl)" target="_blank" icon="el-icon-view">
|
查看发票文件
|
</el-link>
|
<el-link type="success" :href="getFullUrl(invoice.invoiceUrl)" :download="getFileName(invoice.invoiceUrl)" icon="el-icon-download" style="margin-left: 10px;">
|
下载发票
|
</el-link>
|
</el-descriptions-item>
|
</el-descriptions>
|
|
<!-- 操作按钮 -->
|
<div class="action-bar" style="margin-top: 20px; text-align: center;">
|
<el-button @click="goBack">返回列表</el-button>
|
<el-button
|
type="primary"
|
v-if="invoice.status === 0"
|
@click="handleAudit"
|
v-hasPermi="['system:invoice:edit']"
|
>
|
审核
|
</el-button>
|
<el-button
|
type="success"
|
v-if="invoice.invoiceUrl"
|
@click="handleDownload"
|
icon="el-icon-download"
|
>
|
下载发票
|
</el-button>
|
<!-- 同步按钮：只有已通过且未同步或同步失败时显示 -->
|
<el-button
|
type="warning"
|
v-if="invoice.status === 1 && (!invoice.legacyInvoiceId || invoice.syncStatus === 2)"
|
@click="handleSync"
|
:loading="syncing"
|
icon="el-icon-refresh"
|
v-hasPermi="['system:invoice:edit']"
|
>
|
{{ syncing ? '同步中...' : '同步到旧系统' }}
|
</el-button>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import { getInvoice, syncInvoiceToLegacy } from "@/api/system/invoice";
|
|
export default {
|
name: "InvoiceDetail",
|
data() {
|
return {
|
// 发票详情数据
|
invoice: {
|
invoiceId: null,
|
serviceOrderId: null,
|
legacyServiceOrderId: null,
|
serviceCode: null,
|
invoiceType: null,
|
invoiceName: null,
|
invoiceMoney: null,
|
invoiceRemarks: null,
|
companyAddress: null,
|
companyBank: null,
|
companyBankNo: null,
|
zipCode: null,
|
mailAddress: null,
|
contactName: null,
|
contactPhone: null,
|
contactEmail: null,
|
status: null,
|
invoiceNo: null,
|
invoiceUrl: null,
|
applyTime: null,
|
auditTime: null,
|
auditRemarks: null,
|
syncStatus: null,
|
legacyInvoiceId: null
|
},
|
// 同步状态
|
syncing: false
|
};
|
},
|
created() {
|
const invoiceId = this.$route.params.invoiceId || this.$route.query.invoiceId;
|
if (invoiceId) {
|
this.getDetail(invoiceId);
|
} else {
|
this.$modal.msgError("缺少发票ID参数");
|
this.goBack();
|
}
|
},
|
methods: {
|
/** 获取发票详情 */
|
getDetail(invoiceId) {
|
getInvoice(invoiceId).then(response => {
|
this.invoice = response.data;
|
}).catch(() => {
|
this.$modal.msgError("获取发票详情失败");
|
this.goBack();
|
});
|
},
|
|
/** 状态格式化 */
|
statusFormat(status) {
|
const map = { 0: "待审核", 1: "已通过", 2: "已驳回" };
|
return map[status] || "未知";
|
},
|
|
/** 金额格式化 */
|
formatMoney(money) {
|
if (money === null || money === undefined) return '0.00';
|
return Number(money).toFixed(2);
|
},
|
|
/** 同步状态格式化 */
|
syncStatusFormat(status) {
|
const map = { 0: "未同步", 1: "已同步", 2: "同步失败" };
|
return map[status] || "未知";
|
},
|
|
/** 获取完整的文件URL */
|
getFullUrl(url) {
|
if (!url) return '';
|
if (url.startsWith('http')) {
|
return url;
|
}
|
return process.env.VUE_APP_BASE_API + url;
|
},
|
|
/** 获取文件名 */
|
getFileName(url) {
|
if (!url) return '发票文件';
|
const parts = url.split('/');
|
return parts[parts.length - 1] || '发票文件';
|
},
|
|
/** 返回列表 */
|
goBack() {
|
this.$tab.closePage();
|
},
|
|
/** 跳转到审核页面 */
|
handleAudit() {
|
this.$router.push({
|
path: '/system/invoice/audit',
|
query: { invoiceId: this.invoice.invoiceId }
|
});
|
},
|
|
/** 下载发票 */
|
handleDownload() {
|
const url = this.getFullUrl(this.invoice.invoiceUrl);
|
window.open(url);
|
},
|
|
/** 同步到旧系统 */
|
handleSync() {
|
this.$modal.confirm('确认将该发票申请同步到旧系统吗？').then(() => {
|
this.syncing = true;
|
syncInvoiceToLegacy(this.invoice.invoiceId).then(response => {
|
this.$modal.msgSuccess('同步成功');
|
// 重新加载详情
|
this.getDetail(this.invoice.invoiceId);
|
}).catch(() => {
|
this.$modal.msgError('同步失败');
|
}).finally(() => {
|
this.syncing = false;
|
});
|
}).catch(() => {});
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.card-title {
|
font-size: 18px;
|
font-weight: bold;
|
color: #303133;
|
}
|
|
.text-price {
|
color: #F56C6C;
|
font-size: 16px;
|
font-weight: bold;
|
}
|
|
.text-danger {
|
color: #F56C6C;
|
}
|
|
.text-gray {
|
color: #909399;
|
}
|
|
.action-bar {
|
border-top: 1px solid #EBEEF5;
|
padding-top: 20px;
|
}
|
|
::v-deep .el-descriptions-item__label {
|
font-weight: bold;
|
width: 120px;
|
}
|
</style>
|
