From fdb0ed498f295b50c072c4b3652c08e2d60a747a Mon Sep 17 00:00:00 2001
From: yangys <y_ys79@sina.com>
Date: 星期三, 03 十二月 2025 16:29:57 +0800
Subject: [PATCH] 增加pdf，xlsx，docx文件预览功能
---
src/views/flow/components/TodolistLeft.vue | 82 +++++++++++++++++++++++++++++++++--------
1 files changed, 66 insertions(+), 16 deletions(-)
diff --git a/src/views/flow/components/TodolistLeft.vue b/src/views/flow/components/TodolistLeft.vue
index 2d597dd..e35e273 100644
--- a/src/views/flow/components/TodolistLeft.vue
+++ b/src/views/flow/components/TodolistLeft.vue
@@ -99,16 +99,22 @@
</el-table>
</el-collapse-item>
</el-collapse>
- v-if="pdfShow"
+
-->
<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"/>
-
+ <vue-pdf-embed v-if="pdfShow" :source="pdfUrl"/>
</div>
+ <div v-if="docShow" class="pdf-content">
+ <vue-office-docx :src="docUrl"/>
+ </div>
+ <div v-if="xlsShow" class="pdf-content">
+ <vue-office-excel :src="xlsUrl"/>
+ </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>
</el-dialog>
@@ -123,29 +129,34 @@
</basic-container>
</template>
-<script setup>
-import VuePdfEmbed from 'vue-pdf-embed';
-</script>
<script>
+</script>
+<script>
+//涓婇潰鐨剆cript澧炲姞setup灏变笉鑳芥彁浜ゅ鎵逛簡
+//import VuePdfEmbed from 'vue-pdf-embed'; setup
+//import VueOfficeDocx from '@vue-office/docx';
+//import VueOfficeExcel from '@vue-office/excel';
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';
import { downloadXls } from '@/utils/util';
export default {
+ //components: { VueOfficeDocx,VueOfficeExcel },
props: {
row: {
type: Object,
}
},
watch: {
+ /*
'attForm.fileType': {
handler(newVal) {
this.attOption.column[1].data.fileType = newVal;
},
immediate: true,
- },
+ },*/
},
data() {
return {
@@ -206,10 +217,13 @@
appContent: '',//绋嬪簭鍐呭
imgUrl:'', //鍥剧墖棰勮鍦板潃
pdfUrl:'',
+ docUrl:'',
+ xlsUrl:'',
imgShow: false,//鍥剧墖棰勮鏄惁鏄剧ず
pdfShow:false, //pdf鏄剧ず妗�
txtShow: true, //绋嬪簭鍐呭鏄惁鏄剧ず
-
+ docShow: false,
+ xlsShow: false,
//appDialog: false,
programDialog: false, //绋嬪簭鏂囦欢涓婁紶瀵硅瘽妗唌odel
otherFileDialog: false, //鍏朵粬鏂囦欢涓婁紶瀵硅瘽妗唌odel
@@ -317,7 +331,7 @@
this.getAttList();
this.$message.success(res.msg || '涓婁紶鎴愬姛');
this.attForm.att = '';
- this.attForm.fileType = 'program'
+ //this.attForm.fileType = 'program'
this.appDialog = false
return done();
} else {
@@ -370,7 +384,7 @@
onLoad(page, params = {}) {
},
add() {
- console.log('add')
+ //console.log('add')
this.tableData = this.tableData.concat(this.selectionList.filter(item => {
return !this.tableData.some(existingItem => existingItem.id === item.id);
}));
@@ -378,12 +392,15 @@
this.$emit('selection-change', this.tableData)
},
showContent(row, column, event) {
- //鍥剧墖
+
let lowerName = row.name.toLowerCase();
- if(lowerName.endsWith(".png") || lowerName.endsWith(".jpg")){
+ if(lowerName.endsWith(".png") || lowerName.endsWith(".jpg") || lowerName.endsWith(".jpeg") || lowerName.endsWith(".bmp")){
+ //鍥剧墖
this.imgShow = true;
this.pdfShow = false;
this.txtShow = false;
+ this.docShow = false;
+ this.xlsShow = false;
getFileLink(row.ossName).then(res => {
if (res.data.code === 200) {
this.imgUrl = res.data.data
@@ -399,11 +416,12 @@
this.imgShow = false;
this.pdfShow = true;
this.txtShow = false;
-
+ this.docShow = false;
+ this.xlsShow = false;
//this.pdfUrl = "http://localhost:84/mdmfiles/mdm/upload/20251017/00cd6de10dcbea0338edb6e2315164dc.pdf";
- this.pdfUrl = "http://localhost:84/mdmfiles/mdm/upload/20251017/test.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
@@ -411,12 +429,44 @@
//杩炴帴鍦板潃鍔犺浇澶辫触
this.pdfUrl = "";
}
- })*/
+ })
+ }else if(lowerName.endsWith(".docx")){
+ this.imgShow = false;
+ this.pdfShow = false;
+ this.txtShow = false;
+ this.docShow = true;
+ this.xlsShow = false;
+
+ getFileLink(row.ossName).then(res => {
+ if (res.data.code === 200) {
+ this.docUrl = res.data.data
+ } else {
+ //杩炴帴鍦板潃鍔犺浇澶辫触
+ this.docUrl = "";
+ }
+ })
+ }else if(lowerName.endsWith(".xlsx")){
+ this.imgShow = false;
+ this.pdfShow = false;
+ this.txtShow = false;
+ this.docShow = false;
+ this.xlsShow = true;
+
+ getFileLink(row.ossName).then(res => {
+ if (res.data.code === 200) {
+ this.xlsUrl = res.data.data
+ } else {
+ //杩炴帴鍦板潃鍔犺浇澶辫触
+ this.xlsUrl = "";
+ }
+ })
}else{
this.imgShow = false;
this.pdfShow = false;
this.txtShow = true;
+ this.docShow = false;
+ this.xlsShow = false;
if (!row?.id) {
this.showContentId = ''
return this.appContent = '';
--
Gitblit v1.9.3