From f97351a6f1fdc679f4956030d179dca843bbeb0c Mon Sep 17 00:00:00 2001
From: yangys <y_ys79@sina.com>
Date: 星期四, 27 十一月 2025 14:09:04 +0800
Subject: [PATCH] 审批界面增加pdf，图片预览功能
---
src/views/flow/components/TodolistLeft.vue | 115 ++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 89 insertions(+), 26 deletions(-)
diff --git a/src/views/flow/components/TodolistLeft.vue b/src/views/flow/components/TodolistLeft.vue
index 55a2d3b..2d597dd 100644
--- a/src/views/flow/components/TodolistLeft.vue
+++ b/src/views/flow/components/TodolistLeft.vue
@@ -63,13 +63,6 @@
<template #default="{ row }">
<div style="display: flex;align-items: center;">
<span style="margin-right: 8px;">{{ row.name }}</span>
- <!--
- <el-icon>
- <el-tooltip class="box-item" effect="light" content="鍏朵粬鏂囦欢" placement="right">
- <FolderOpened />
- </el-tooltip>
- </el-icon>
- -->
</div>
</template>
</el-table-column>
@@ -77,13 +70,11 @@
<template #default="scope">
<!--'cureProgramTask', 鍥哄寲缂栧埗锛屼笉鑳藉垹闄ゅ拰涓婁紶-->
<a style="color: blue;margin-right: 4px;cursor: pointer;font-size: 12px;"
- v-show="['programmingTask', 'replaceProgrammingTask','appendProgrammingTask'].includes(row.taskDefinitionKey)"
+ v-show="['programmingTask','cureProgramTask', 'replaceProgrammingTask','appendProgrammingTask'].includes(row.taskDefinitionKey)"
type="text" size="small" @click.stop="del(scope.$index, scope.row)">鍒犻櫎</a>
<a style="color: blue;cursor: pointer;font-size: 12px;margin-right: 4px;" type="text" size="small"
@click.stop="downloadFile(scope.$index, scope.row)">涓嬭浇</a>
- <a style="color: blue;cursor: pointer;font-size: 12px;" type="text" size="small"
- v-show="['program-cure'].includes(row.processDefinitionKey)"
- @click.stop="diffFile(scope.$index, scope.row)">姣斿</a>
+
</template>
</el-table-column>
</el-table>
@@ -108,9 +99,15 @@
</el-table>
</el-collapse-item>
</el-collapse>
+ v-if="pdfShow"
-->
- <h5>绋嬪簭鍐呭</h5>
- <div v-html="appContent" class="app-content">
+ <h5>鏂囦欢鍐呭</h5>
+ <div v-html="appContent" v-if="txtShow" class="app-content">
+ </div>
+ <el-image clsss="preview-content" v-if="imgShow" :src="imgUrl" :fit="fit" />
+ <div v-if="pdfShow" class="pdf-content">
+ <vue-pdf-embed v-if="pdfShow" :source="pdfUrl"/>
+
</div>
<el-dialog title="涓婁紶绋嬪簭鏂囦欢" v-model="programDialog" width="400" v-if="programDialog">
<avue-form :option="programOption" v-model="attForm" :upload-after="uploadAfter" class="att-box"></avue-form>
@@ -126,8 +123,12 @@
</basic-container>
</template>
+<script setup>
+import VuePdfEmbed from 'vue-pdf-embed';
+</script>
<script>
-import { getFileData, getSelectedAppList, getContent, removeAtt,queryLockRemark } from '@/api/flow/todolist';
+
+import { getFileData, getSelectedAppList, getContent,getFileLink,removeAtt,queryLockRemark } from '@/api/flow/todolist';
import { exportBlob } from '@/api/common';
import { getToken } from '@/utils/auth';
import NProgress from 'nprogress';
@@ -203,6 +204,12 @@
tableDataProgram:[], //绋嬪簭鏂囦欢锛歵ableData瀛愰泦
tableDataAttatch:[], //鍏朵粬鏂囦欢锛歵ableData瀛愰泦
appContent: '',//绋嬪簭鍐呭
+ imgUrl:'', //鍥剧墖棰勮鍦板潃
+ pdfUrl:'',
+ imgShow: false,//鍥剧墖棰勮鏄惁鏄剧ず
+ pdfShow:false, //pdf鏄剧ず妗�
+ txtShow: true, //绋嬪簭鍐呭鏄惁鏄剧ず
+
//appDialog: false,
programDialog: false, //绋嬪簭鏂囦欢涓婁紶瀵硅瘽妗唌odel
otherFileDialog: false, //鍏朵粬鏂囦欢涓婁紶瀵硅瘽妗唌odel
@@ -287,7 +294,7 @@
}
},
diffFile(index, row) {
- console.log(row)
+ //console.log(row)
axios({
url: '/blade-mdm/blade-mdm/flow/file/compare-with-try',
method: 'get',
@@ -371,19 +378,60 @@
this.$emit('selection-change', this.tableData)
},
showContent(row, column, event) {
- if (!row?.id) {
- this.showContentId = ''
- return this.appContent = '';
- }
- this.showContentId = row.id
- getContent(row.id).then(res => {
- if (res.data.code === 200) {
- this.appContent = res.data.data
- } else {
- this.appContent = '绋嬪簭鍐呭鍔犺浇澶辫触'
+ //鍥剧墖
+ let lowerName = row.name.toLowerCase();
+ if(lowerName.endsWith(".png") || lowerName.endsWith(".jpg")){
+ this.imgShow = true;
+ this.pdfShow = false;
+ this.txtShow = false;
+ getFileLink(row.ossName).then(res => {
+ if (res.data.code === 200) {
+ this.imgUrl = res.data.data
+ } else {
+ //杩炴帴鍦板潃鍔犺浇澶辫触
+ this.imgUrl = "/img/404.svg";
+ }
+ })
+
+ //this.imgUrl = "http://192.168.56.1:2888/img/bg/img-logo.png"; //鍙互鏄剧ず
+ }else if(lowerName.endsWith(".pdf")){
+ //pdf
+ this.imgShow = false;
+ this.pdfShow = true;
+ this.txtShow = false;
+
+ //this.pdfUrl = "http://localhost:84/mdmfiles/mdm/upload/20251017/00cd6de10dcbea0338edb6e2315164dc.pdf";
+ this.pdfUrl = "http://localhost:84/mdmfiles/mdm/upload/20251017/test.pdf";
+
+ /*
+ getFileLink(row.ossName).then(res => {
+ if (res.data.code === 200) {
+ this.pdfUrl = res.data.data
+ } else {
+ //杩炴帴鍦板潃鍔犺浇澶辫触
+ this.pdfUrl = "";
+ }
+ })*/
+
+ }else{
+ this.imgShow = false;
+ this.pdfShow = false;
+ this.txtShow = true;
+ if (!row?.id) {
+ this.showContentId = ''
+ return this.appContent = '';
}
- })
+ this.showContentId = row.id
+ getContent(row.id).then(res => {
+ if (res.data.code === 200) {
+ this.appContent = res.data.data
+ } else {
+ this.appContent = '绋嬪簭鍐呭鍔犺浇澶辫触'
+ }
+ })
+ }
},
+
del(index, row) {
if (row.id === this.showContentId) {
this.showContentId = '';
@@ -434,6 +482,21 @@
max-height: 400px;
white-space: pre-wrap;
}
+.preview-content {
+ padding: 10px 10px;
+ min-height: 100px;
+ overflow: auto;
+ max-height: 400px;
+}
+
+.pdf-content {
+ background-color: #fffee1;
+ padding: 5px 5px;
+ min-height: 100px;
+ overflow: auto;
+ max-height: 400px;
+ white-space: pre-wrap;
+}
</style>
<style lang="scss">
.att-box {
--
Gitblit v1.9.3