<!-- 差旅报销：详情只读面板 -->
|
<template>
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="报销单号">{{ row.reimburseNo || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="状态">
|
<el-tag :type="statusTagType(row.approvalResult)" size="small">{{ statusLabel(row.approvalResult) }}</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item label="员工编号">{{ row.employeeNo || row.applicantNo || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="员工姓名">{{ row.employeeName || row.applicantName || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="报销原因" :span="2">{{ row.reimburseReason || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="出差开始">{{ row.travelStartTime || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="出差结束">{{ row.travelEndTime || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="出差地">{{ row.departurePlace || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="目的地">{{ row.destination || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="酒店标准">{{ row.hotelStandard != null ? `${row.hotelStandard} 元/晚` : "—" }}</el-descriptions-item>
|
<el-descriptions-item label="住宿天数">{{ row.hotelDays ?? "—" }}</el-descriptions-item>
|
<el-descriptions-item label="生活补贴">{{ row.livingSubsidy != null ? `${row.livingSubsidy} 元` : "—" }}</el-descriptions-item>
|
<el-descriptions-item label="申请金额">{{ row.applyAmount != null ? `${row.applyAmount} 元` : "—" }}</el-descriptions-item>
|
<el-descriptions-item label="收款人">{{ row.payee || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="特批">
|
<el-tag :type="row.needSpecialApproval ? 'danger' : 'info'" size="small">
|
{{ row.needSpecialApproval ? "超支需特批" : "标准内" }}
|
</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item v-if="row.rejectReason" label="驳回原因" :span="2">
|
<span class="reject-text">{{ row.rejectReason }}</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="创建时间" :span="2">{{ row.createTime || "—" }}</el-descriptions-item>
|
</el-descriptions>
|
|
<el-divider content-position="left">报销明细</el-divider>
|
<el-table v-if="row.expenseDetails?.length" :data="row.expenseDetails" border size="small">
|
<el-table-column type="index" label="序号" width="55" align="center" />
|
<el-table-column prop="invoiceDate" label="发票日期" width="120" />
|
<el-table-column label="费用科目" width="100">
|
<template #default="{ row: d }">{{ expenseSubjectLabel(d.expenseSubject) }}</template>
|
</el-table-column>
|
<el-table-column prop="amount" label="金额" width="100" />
|
<el-table-column prop="description" label="描述" min-width="140" show-overflow-tooltip />
|
</el-table>
|
<el-empty v-else description="暂无明细" :image-size="48" />
|
|
<el-divider content-position="left">发票附件</el-divider>
|
<template v-if="attachmentFiles.length">
|
<el-tag v-for="(f, i) in attachmentFiles" :key="i" class="file-tag" type="info" @click="openFile(f)">
|
{{ f.name }}
|
</el-tag>
|
</template>
|
<el-empty v-else description="暂无附件" :image-size="48" />
|
</template>
|
|
<script setup>
|
import { computed } from "vue";
|
import { expenseSubjectLabel, statusLabel, statusTagType } from "../travelReimburseUtils.js";
|
|
const props = defineProps({
|
row: { type: Object, default: () => ({}) },
|
});
|
|
const attachmentFiles = computed(() => {
|
const list = props.row?.attachmentList?.length
|
? props.row.attachmentList
|
: props.row?.invoiceAttachments;
|
return Array.isArray(list) ? list : [];
|
});
|
|
function openFile(f) {
|
const url = f?.url || f?.downloadURL || f?.previewURL;
|
if (url) window.open(url, "_blank");
|
}
|
</script>
|
|
<style scoped>
|
.reject-text {
|
color: var(--el-color-danger);
|
}
|
.file-tag {
|
margin: 0 8px 8px 0;
|
cursor: pointer;
|
}
|
</style>
|
