<!-- 费用报销：详情只读面板 -->
|
<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="费用类型">{{ expenseCategoryLabel(row.expenseCategory) }}</el-descriptions-item>
|
<el-descriptions-item label="申请时间">{{ row.applyTime || row.createTime || "—" }}</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.applyAmount != null ? `${row.applyAmount} 元` : "—" }}</el-descriptions-item>
|
<el-descriptions-item label="收款人">{{ row.payee || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="收款账号">{{ row.payeeAccount || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="开户支行">{{ row.bankBranch || "—" }}</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 { expenseCategoryLabel, expenseSubjectLabel, statusLabel, statusTagType } from "../costReimburseUtils.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>
|
