Merge: feat(详情) 发票明细内联附件下载
This commit is contained in:
@@ -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': '提交申请',
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user