报销/拨款发票明细增加预览功能

审核员点击发票明细行的"预览"按钮即可直接查看PDF/图片内容,复用已有的
Folder全局预览组件,无需下载。

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-02 14:24:08 +08:00
parent 5544056833
commit 598f88b03a
2 changed files with 57 additions and 14 deletions

View File

@@ -35,15 +35,21 @@
<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">
<el-table-column label="附件" width="130" align="center">
<template slot-scope="scope">
<template v-if="scope.row.ossId && isFirstRowOfFile(detail.invoiceItems, scope.$index, scope.row.ossId)">
<el-button
type="text" size="mini" title="预览附件"
@click="previewOss(scope.row.ossId)">
<i class="el-icon-view"></i> 预览
</el-button>
<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>
</template>
</el-table-column>
</el-table>
</el-card>
@@ -92,6 +98,7 @@ export default {
FilePreview,
BizDetailContainer
},
inject: ['$folder'],
data () {
return {
loading: false,
@@ -357,6 +364,20 @@ export default {
downloadOss (ossId) {
this.$download.oss(ossId)
},
async previewOss (ossId) {
try {
const res = await listByIds([ossId])
const file = (res.data || [])[0]
if (!file) {
this.$message.warning('文件不存在')
return
}
this.$folder().previewSimple(file)
} catch (e) {
console.error('预览失败:', e)
this.$message.error('预览失败')
}
},
getActionText (action) {
const map = {
'submit': '提交申请',

View File

@@ -26,15 +26,21 @@
<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">
<el-table-column label="附件" width="130" align="center">
<template slot-scope="scope">
<template v-if="scope.row.ossId && isFirstRowOfFile(detail.invoiceItems, scope.$index, scope.row.ossId)">
<el-button
type="text" size="mini" title="预览附件"
@click="previewOss(scope.row.ossId)">
<i class="el-icon-view"></i> 预览
</el-button>
<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>
</template>
</el-table-column>
</el-table>
</el-card>
@@ -66,6 +72,7 @@
</template>
<script>
import { listByIds } from "@/api/system/oss";
import FilePreview from "@/components/FilePreview/index.vue";
import BizDetailContainer from '@/views/hrm/components/BizDetailContainer/index.vue';
@@ -80,6 +87,7 @@ export default {
BizDetailContainer,
FilePreview
},
inject: ['$folder'],
computed: {
currentBizId () {
return this.bizId || this.$route?.params?.bizId || this.$route?.query?.bizId || this.$route?.params?.id
@@ -97,6 +105,20 @@ export default {
},
downloadOss (ossId) {
this.$download.oss(ossId)
},
async previewOss (ossId) {
try {
const res = await listByIds([ossId])
const file = (res.data || [])[0]
if (!file) {
this.$message.warning('文件不存在')
return
}
this.$folder().previewSimple(file)
} catch (e) {
console.error('预览失败:', e)
this.$message.error('预览失败')
}
}
}
}