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 | 159 ++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 139 insertions(+), 20 deletions(-)
diff --git a/src/views/wel/shemi.vue b/src/views/wel/shemi.vue
index 4ec79b4..769f460 100644
--- a/src/views/wel/shemi.vue
+++ b/src/views/wel/shemi.vue
@@ -36,14 +36,14 @@
style="margin-right: 6px;">
<Delete />
</el-icon>娓呯┖</el-button>
- <el-button type="danger" @click="refresh()">閲嶇疆琛ㄦ牸</el-button>
+ <el-button type="danger" @click="refresh()">杩斿洖鐩綍</el-button>
</el-col>
</el-row>
</template>
<template #name="{ row }">
<span>{{ row.name }}</span>
- <el-tag v-if="row.nodeType == 60" size="mini" effect="plain">v{{ row.versionNumber }}</el-tag>
+ <el-tag v-if="row.nodeType == 60" style="margin-left:5px" size="mini" effect="plain">v{{ row.versionNumber }}</el-tag>
<el-button icon="el-icon-download" @click="handleDownload(row)" class="treebtn" v-if="row.nodeType == 70" :size="size" text title="涓嬭浇"></el-button>
<el-button class="treebtn" :size="size" text v-if="permission.replace_button && row.nodeType == 60 && row.parentIds.indexOf('0,1,') > -1"
icon="el-icon-switch" type="primary" @click="replacement(row)" placeholder="鏇挎崲" title="鏇挎崲"></el-button>
@@ -93,7 +93,7 @@
style="margin-right: 6px;">
<Delete />
</el-icon>娓呯┖</el-button>
- <el-button type="danger" @click="refresh()">閲嶇疆琛ㄦ牸</el-button>
+ <el-button type="danger" @click="refresh()">杩斿洖鐩綍</el-button>
</el-col>
</el-row>
</template>
@@ -102,7 +102,7 @@
</template> -->
<template #name="{ row }">
<span>{{ row.name }}</span>
- <el-tag v-if="row.nodeType == 60" size="mini" effect="plain">v{{ row.versionNumber }}</el-tag>
+ <el-tag v-if="row.nodeType == 60" style="margin-left:5px" size="mini" effect="plain">v{{ row.versionNumber }}</el-tag>
<el-button icon="el-icon-download" @click="handleDownload(row)" class="treebtn" v-if="row.nodeType == 70" :size="size" text title="涓嬭浇"></el-button>
<!-- 鏇挎崲 v-if="permission.auto_dispatch"-->
<el-button class="treebtn" :size="size" text v-if="permission.replace_button && row.nodeType == 60 && row.parentIds.indexOf('0,1,') > -1"
@@ -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'">
<!--
@@ -148,6 +158,9 @@
<el-table-column prop="name" label="绋嬪簭鍖呭悕">
</el-table-column>
<el-table-column prop="versionNumber" label="绋嬪簭鐗堟湰">
+ <template #default="{ row }">
+ <span style="margin-left: 8px;">v{{ row.versionNumber }}</span>
+ </template>
</el-table-column>
<el-table-column prop="createTime" label="鍒涘缓鏃堕棿">
</el-table-column>
@@ -207,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';
@@ -306,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: [],
@@ -348,6 +375,7 @@
prop: 'tab4'
}]
},
+ //currentTab : 'tab1',
hisFileViewModel: false,//鍘嗗彶鏂囦欢鍒楄〃瀵硅瘽妗�
hisFileTableData:[], //鍘嗗彶鏂囦欢鍒楄〃鏁版嵁
hisFileContent:'',//鍘嗗彶鏂囦欢鍐呭
@@ -641,7 +669,7 @@
handleDownload(row){
NProgress.start();
exportBlob(
- `/blade-mdm/program/node/download-by-nodeid?nodeId=${row.id}`
+ `/blade-mdm/program/nodehis/download-by-nodeid?nodeId=${row.id}`
).then(res => {
if (res.status !== 200) {
return this.$message.error(res.msg);
@@ -804,7 +832,12 @@
res => {
if(res.data.code === 200) {
- this.hisFileTableData = res.data.data
+ this.hisFileTableData = res.data.data;
+ if(this.hisFileTableData.length > 0){
+ this.showHisContent(this.hisFileTableData[0])
+ this.$refs.hisFilesTable.setCurrentRow(this.hisFileTableData[0]);
+ }
+
} else {
this.$message.error('绋嬪簭鍐呭鍔犺浇澶辫触');
}
@@ -818,7 +851,7 @@
params: {nodeId: row.id}
}).then(
res => {
- console.log(res)
+
if(res.data.code === 200) {
this.hisFileContent = res.data.data;
} else {
@@ -973,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);
@@ -987,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) {
@@ -997,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({
@@ -1233,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