Merge: feat(详情) 发票明细内联附件下载

This commit is contained in:
2026-05-08 18:28:19 +08:00
2 changed files with 56 additions and 22 deletions

View File

@@ -24,28 +24,39 @@
</el-descriptions>
</el-card>
<!-- 拨款单据 -->
<div class="block-title">拨款单据</div>
<el-card class="inner-card" shadow="never">
<div class="hint-text">请上传相关拨款单据发票收据凭证等</div>
<file-preview v-model="detail.accessoryApplyIds"></file-preview>
</el-card>
<!-- 发票明细 -->
<!-- 发票明细含附件下载 -->
<template v-if="detail.invoiceItems && detail.invoiceItems.length">
<div class="block-title">发票明细</div>
<el-card class="inner-card" shadow="never">
<el-table :data="detail.invoiceItems" border size="small" style="width:100%">
<el-table-column type="index" label="序号" width="55" align="center" />
<el-table-column prop="itemName" label="项目名称" min-width="140" />
<el-table-column prop="reason" label="事由" min-width="180" />
<el-table-column prop="amount" label="金额(元)" width="120" align="right">
<el-table-column prop="itemName" label="项目名称" min-width="120" />
<el-table-column prop="reason" label="事由" min-width="160" />
<el-table-column prop="amount" label="金额(元)" width="110" align="right">
<template slot-scope="{ row }">¥{{ row.amount }}</template>
</el-table-column>
<el-table-column label="附件" width="80" align="center">
<template slot-scope="scope">
<el-button
v-if="scope.row.ossId && isFirstRowOfFile(detail.invoiceItems, scope.$index, scope.row.ossId)"
type="text" size="mini" title="下载附件"
@click="downloadOss(scope.row.ossId)">
<i class="el-icon-download"></i> 下载
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</template>
<!-- 单据附件无发票明细时的兜底展示 -->
<template v-else-if="detail.accessoryApplyIds">
<div class="block-title">拨款单据</div>
<el-card class="inner-card" shadow="never">
<file-preview v-model="detail.accessoryApplyIds"></file-preview>
</el-card>
</template>
<!-- 拨款理由说明 -->
<div class="block-title">拨款理由说明</div>
<el-card class="inner-card" shadow="never">
@@ -340,6 +351,12 @@ export default {
const p = n => (n < 10 ? `0${n}` : n)
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
},
isFirstRowOfFile (items, idx, ossId) {
return items.findIndex(it => it.ossId === ossId) === idx
},
downloadOss (ossId) {
this.$download.oss(ossId)
},
getActionText (action) {
const map = {
'submit': '提交申请',

View File

@@ -15,28 +15,39 @@
</el-descriptions>
</el-card>
<!-- 报销单据 -->
<div class="block-title">报销单据</div>
<el-card class="inner-card" shadow="never">
<div class="hint-text">请上传相关报销单据发票收据凭证等</div>
<file-preview v-model="detail.accessoryApplyIds"></file-preview>
</el-card>
<!-- 发票明细 -->
<!-- 发票明细含附件下载 -->
<template v-if="detail.invoiceItems && detail.invoiceItems.length">
<div class="block-title">发票明细</div>
<el-card class="inner-card" shadow="never">
<el-table :data="detail.invoiceItems" border size="small" style="width:100%">
<el-table-column type="index" label="序号" width="55" align="center" />
<el-table-column prop="itemName" label="项目名称" min-width="140" />
<el-table-column prop="reason" label="事由" min-width="180" />
<el-table-column prop="amount" label="金额(元)" width="120" align="right">
<el-table-column prop="itemName" label="项目名称" min-width="120" />
<el-table-column prop="reason" label="事由" min-width="160" />
<el-table-column prop="amount" label="金额(元)" width="110" align="right">
<template slot-scope="{ row }">¥{{ row.amount }}</template>
</el-table-column>
<el-table-column label="附件" width="80" align="center">
<template slot-scope="scope">
<el-button
v-if="scope.row.ossId && isFirstRowOfFile(detail.invoiceItems, scope.$index, scope.row.ossId)"
type="text" size="mini" title="下载附件"
@click="downloadOss(scope.row.ossId)">
<i class="el-icon-download"></i> 下载
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</template>
<!-- 单据附件无发票明细时的兜底展示 -->
<template v-else-if="detail.accessoryApplyIds">
<div class="block-title">报销单据</div>
<el-card class="inner-card" shadow="never">
<file-preview v-model="detail.accessoryApplyIds"></file-preview>
</el-card>
</template>
<!-- 报销理由说明 -->
<div class="block-title">报销理由说明</div>
<el-card class="inner-card" shadow="never">
@@ -81,6 +92,12 @@ export default {
const p = n => (n < 10 ? `0${n}` : n)
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
},
isFirstRowOfFile (items, idx, ossId) {
return items.findIndex(it => it.ossId === ossId) === idx
},
downloadOss (ossId) {
this.$download.oss(ossId)
}
}
}
</script>