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/wel/shemi.vue | 137 +++++++++++++++++++++++++++++++++++++++++----
1 files changed, 124 insertions(+), 13 deletions(-)
diff --git a/src/views/wel/shemi.vue b/src/views/wel/shemi.vue
index 4104de4..769f460 100644
--- a/src/views/wel/shemi.vue
+++ b/src/views/wel/shemi.vue
@@ -124,11 +124,21 @@
<el-dialog title="绋嬪簭瑙ｉ攣" append-to-body v-model="unlockBox">
<avue-form :option="unlockOption" v-model="unlockForm" @submit="unlockSubmit" @reset-change="unlockCancel" />
</el-dialog>
- <avue-tabs :option="tabsOption" @change="tabsHandleChange" style="margin-top: 30px;" v-if="isShowTabs"></avue-tabs>
+ <avue-tabs ref="tabs" :option="tabsOption" @change="tabsHandleChange" style="margin-top: 30px;" v-if="isShowTabs"></avue-tabs>
<avue-form v-if="tabsType == 'tab1'" :option="tabsFormOption" v-model="tabsForm"></avue-form>
<!--<span v-else-if="tabsType == 'tab2'">鐗堟湰淇℃伅</span>-->
<template v-else-if="tabsType == 'tab3'">
- <div v-html="convertToHtml(fileContent)" class="convertToHtml"></div>
+ <div v-if="txtShow" v-html="convertToHtml(fileContent)" class="convertToHtml"></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>
+ <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>
</template>
<template v-else-if="tabsType == 'tab4'">
<!--
@@ -210,6 +220,7 @@
<script>
import { Delete, Edit, Search, Share, Upload ,Lock,Unlock} from '@element-plus/icons-vue'
+import {getFileLink } from '@/api/flow/todolist';
import debounce from 'lodash/debounce';
import NProgress from 'nprogress';
import { downloadXls } from '@/utils/util';
@@ -309,10 +320,23 @@
content2: "",
codeDiffFileName1: "",
codeDiffFileName2: "",
+
+
+
selectionList: [],
targetRow: {},
file: null,
fileContent: "",
+ imgUrl:'', //鍥剧墖棰勮鍦板潃
+ pdfUrl:'',
+ docUrl:'',
+ xlsUrl:'',
+ imgShow: false,//鍥剧墖棰勮鏄惁鏄剧ず
+ pdfShow:false, //pdf鏄剧ず妗�
+ txtShow: true, //绋嬪簭鍐呭鏄惁鏄剧ず
+ docShow: false,
+ xlsShow: false,
+
isShowTabs: true,
nodeTypeList: [],
@@ -351,6 +375,7 @@
prop: 'tab4'
}]
},
+ //currentTab : 'tab1',
hisFileViewModel: false,//鍘嗗彶鏂囦欢鍒楄〃瀵硅瘽妗�
hisFileTableData:[], //鍘嗗彶鏂囦欢鍒楄〃鏁版嵁
hisFileContent:'',//鍘嗗彶鏂囦欢鍐呭
@@ -981,11 +1006,14 @@
if (this.tabsForm.nodeType == 60) {
//鍖呭悕鑺傜偣
this.tabsOption = this.tabsOptionPackage;
+ this.currentNodeType ='package';
//鑾峰彇鍘嗗彶璁板綍
this.getHistory(row.id);
} else if (this.tabsForm.nodeType == 70){
//鏂囦欢鑺傜偣
this.tabsOption = this.tabsOption2;
+ //TODO 鍒囨崲鍒颁箣鍓嶇殑绫诲瀷锛屽鏋滆妭鐐圭被鍨嬩笌涔嬪墠鐩稿悓銆�
+ this.currentNodeType ='file';
//鑾峰彇鏂囦欢鍐呭
this.getFile(row.id);
@@ -995,9 +1023,19 @@
}else{
this.tabsOption = this.tabsOption1;
}
+ this.isShowTabs = true;
this.$nextTick(() => {
- this.tabsType = 'tab1';
- this.isShowTabs = true;
+ var prop = 'tab1';
+ var tabIndex = 0;
+ for(var i =0;i<this.tabsOption.column.length;i++){
+ if(this.tabsOption.column[i].prop == this.tabsType){
+ prop = this.tabsType;
+ tabIndex = i;
+ break;
+ }
+ }
+ this.$refs.tabs.changeTabs(tabIndex);
+ this.tabsType = prop;
})
},
tabsHandleChange(tabs) {
@@ -1005,18 +1043,75 @@
},
getFile(id) { //鏌ョ湅鏂囦欢鍐呭
- this.loading = true;
- axios({
- url: '/blade-mdm/program/nodehis/content-by-nodeid',
+ //this.loading = true;
+
+ this.getFileLinkByNode(id).then(res=>{
+ let fileLink = res.data.data;
+ let lowerName = fileLink.toLowerCase();
+ 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;
+
+ this.imgUrl = fileLink;
+
+ //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.docShow = false;
+ this.xlsShow = false;
+
+ this.pdfUrl = fileLink
+
+ }else if(lowerName.endsWith(".docx")){
+ this.imgShow = false;
+ this.pdfShow = false;
+ this.txtShow = false;
+ this.docShow = true;
+ this.xlsShow = false;
+
+ this.docUrl = fileLink
+
+ }else if(lowerName.endsWith(".xlsx")){
+ this.imgShow = false;
+ this.pdfShow = false;
+ this.txtShow = false;
+ this.docShow = false;
+ this.xlsShow = true;
+
+ this.xlsUrl = fileLink
+ }else{
+ axios({
+ url: '/blade-mdm/program/nodehis/content-by-nodeid',
+ method: 'get',
+ params: { nodeId: id },
+ }).then(
+ res => {
+ this.loading = false;
+ this.fileContent = res.data.data;
+ }
+ );
+ }
+ });
+
+
+ },
+
+ getFileLinkByNode(id){
+
+ return axios({
+ url: '/blade-mdm/program/nodehis/link-by-nodeid',
method: 'get',
params: { nodeId: id },
- }).then(
- res => {
- this.loading = false;
- this.fileContent = res.data.data;
- }
- );
+ });
},
+
getHistory(id) { //鏌ョ湅鍘嗗彶璁板綍
this.loading = true;
axios({
@@ -1241,4 +1336,20 @@
.marginR12 label {
margin-right: 12px;
}
+
+.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>
\ No newline at end of file
--
Gitblit v1.9.3