feat(报销/拨款详情): 发票明细内联附件下载,移除独立单据区块

- 发票明细表格新增「附件」列,同一文件只在首行显示下载按钮
- 移除独立的「报销/拨款单据」区块,文件通过明细行直接下载
- 无发票明细的老记录保留附件兜底展示

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-08 18:28:19 +08:00
parent 7f9ae18022
commit 5672b1c07a
2 changed files with 56 additions and 22 deletions

View File

@@ -24,28 +24,39 @@
</el-descriptions> </el-descriptions>
</el-card> </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"> <template v-if="detail.invoiceItems && detail.invoiceItems.length">
<div class="block-title">发票明细</div> <div class="block-title">发票明细</div>
<el-card class="inner-card" shadow="never"> <el-card class="inner-card" shadow="never">
<el-table :data="detail.invoiceItems" border size="small" style="width:100%"> <el-table :data="detail.invoiceItems" border size="small" style="width:100%">
<el-table-column type="index" label="序号" width="55" align="center" /> <el-table-column type="index" label="序号" width="55" align="center" />
<el-table-column prop="itemName" label="项目名称" min-width="140" /> <el-table-column prop="itemName" label="项目名称" min-width="120" />
<el-table-column prop="reason" label="事由" min-width="180" /> <el-table-column prop="reason" label="事由" min-width="160" />
<el-table-column prop="amount" label="金额(元)" width="120" align="right"> <el-table-column prop="amount" label="金额(元)" width="110" align="right">
<template slot-scope="{ row }">¥{{ row.amount }}</template> <template slot-scope="{ row }">¥{{ row.amount }}</template>
</el-table-column> </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-table>
</el-card> </el-card>
</template> </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> <div class="block-title">拨款理由说明</div>
<el-card class="inner-card" shadow="never"> <el-card class="inner-card" shadow="never">
@@ -340,6 +351,12 @@ export default {
const p = n => (n < 10 ? `0${n}` : n) const p = n => (n < 10 ? `0${n}` : n)
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}` 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) { getActionText (action) {
const map = { const map = {
'submit': '提交申请', 'submit': '提交申请',

View File

@@ -15,28 +15,39 @@
</el-descriptions> </el-descriptions>
</el-card> </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"> <template v-if="detail.invoiceItems && detail.invoiceItems.length">
<div class="block-title">发票明细</div> <div class="block-title">发票明细</div>
<el-card class="inner-card" shadow="never"> <el-card class="inner-card" shadow="never">
<el-table :data="detail.invoiceItems" border size="small" style="width:100%"> <el-table :data="detail.invoiceItems" border size="small" style="width:100%">
<el-table-column type="index" label="序号" width="55" align="center" /> <el-table-column type="index" label="序号" width="55" align="center" />
<el-table-column prop="itemName" label="项目名称" min-width="140" /> <el-table-column prop="itemName" label="项目名称" min-width="120" />
<el-table-column prop="reason" label="事由" min-width="180" /> <el-table-column prop="reason" label="事由" min-width="160" />
<el-table-column prop="amount" label="金额(元)" width="120" align="right"> <el-table-column prop="amount" label="金额(元)" width="110" align="right">
<template slot-scope="{ row }">¥{{ row.amount }}</template> <template slot-scope="{ row }">¥{{ row.amount }}</template>
</el-table-column> </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-table>
</el-card> </el-card>
</template> </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> <div class="block-title">报销理由说明</div>
<el-card class="inner-card" shadow="never"> <el-card class="inner-card" shadow="never">
@@ -81,6 +92,12 @@ export default {
const p = n => (n < 10 ? `0${n}` : n) const p = n => (n < 10 ? `0${n}` : n)
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}` 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> </script>