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/components/ReplaceLeft.vue | 243 ++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 224 insertions(+), 19 deletions(-)
diff --git a/src/views/wel/components/ReplaceLeft.vue b/src/views/wel/components/ReplaceLeft.vue
index ff53a4f..5afd3b2 100644
--- a/src/views/wel/components/ReplaceLeft.vue
+++ b/src/views/wel/components/ReplaceLeft.vue
@@ -7,9 +7,13 @@
<template>
<basic-container>
<div class="tool">
+ <el-button type="primary" plain @click="addProgram">娣诲姞绋嬪簭
+ </el-button>
+ <!--
<el-button type="primary" plain @click="addApp">娣诲姞鏂囦欢</el-button>
+ -->
</div>
- <el-table :data="tableData" :row-style="{height:'20px'}" :cell-style="{padding:'0px'}" border @row-click="showContent" max-height="380" highlight-current-row>
+ <el-table :data="tableDataProgram" :row-style="{height:'20px'}" :cell-style="{padding:'0px'}" border @row-click="showContent" max-height="380" highlight-current-row>
<el-table-column type="index" label="#" width="40" align="center"/>
<el-table-column prop="name" label="绋嬪簭鍚嶇О">
<template #default="{ row }">
@@ -36,17 +40,61 @@
</template>
</el-table-column>
</el-table>
- <h4>绋嬪簭鍐呭</h4>
- <div v-html="appContent" class="app-content">
+ <el-divider></el-divider>
+ <div class="tool">
+ <el-button type="primary" plain @click="addOtherFile">娣诲姞鏂囦欢
+ </el-button>
</div>
+ <el-table :data="tableDataAttatch" border @row-click="showContent" :row-style="{height:'20px'}" :cell-style="{padding:'0px'}" max-height="380" highlight-current-row>
+ <el-table-column type="index" label="#" width="40" align="center" />
+ <el-table-column prop="name" label="鏂囦欢鍚嶇О">
+ <template #default="{ row }">
+ <div style="display: flex;align-items: center;">
+ <span style="margin-right: 8px;">{{ row.name }}</span>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column fixed="right" label="鎿嶄綔" width="150" align="center">
+ <template #default="scope">
+
+ <a style="color: blue;margin-right: 4px;cursor: pointer;font-size: 12px;"
+ 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>
+
+ </template>
+ </el-table-column>
+ </el-table>
+ <h4>绋嬪簭鍐呭</h4>
+ <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>
+ <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="appDialog" width="400" v-if="appDialog">
<avue-form :option="attOption" v-model="attForm" :upload-after="uploadAfter" class="att-box"></avue-form>
</el-dialog>
+-->
+ <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>
+ <el-dialog title="涓婁紶鍏朵粬鏂囦欢" v-model="otherFileDialog" width="400" v-if="otherFileDialog">
+ <avue-form :option="otherFileOption" v-model="attForm" :upload-after="uploadAfter" class="att-box"></avue-form>
+ </el-dialog>
+
</basic-container>
</template>
<script>
-import {getSelectedAppList,getContent,removeAtt} from '@/api/flow/todolist';
+import {getSelectedAppList,getContent,getFileLink,removeAtt} from '@/api/flow/todolist';
export default {
props: {
row: {
@@ -65,6 +113,52 @@
att: '',
fileType: 'program'
}, //绋嬪簭涓婁紶琛ㄥ崟
+ programOption: {//绋嬪簭鏂囦欢涓婁紶
+ submitBtn: false,
+ emptyBtn: false,
+ menu: false,
+ column: [
+
+ {
+ label: '娣诲姞鏂囦欢',
+ prop: 'att',
+ type: 'upload',
+ multiple: true,
+ action: '/api/blade-mdm/flow/replace/upload',
+ span: 24,
+ data: {
+ drawingNo: this.drawingNo,
+ processNo: this.processNo,
+ processEdition: this.processEdition,
+ processInstanceId: this.replaceDataId,
+ fileType: 'program',
+ },
+ }
+ ]
+ },
+ otherFileOption: {//鍏朵粬鏂囦欢涓婁紶
+ submitBtn: false,
+ emptyBtn: false,
+ menu: false,
+ column: [
+
+ {
+ label: '娣诲姞鏂囦欢',
+ prop: 'att',
+ type: 'upload',
+ multiple: true,
+ action: '/api/blade-mdm/flow/replace/upload',
+ span: 24,
+ data: {
+ drawingNo: this.drawingNo,
+ processNo: this.processNo,
+ processEdition: this.processEdition,
+ processInstanceId: this.replaceDataId,
+ fileType: 'other',
+ },
+ }
+ ]
+ },
attOption: {
submitBtn: false,
emptyBtn: false,
@@ -98,9 +192,23 @@
}
]
},
- tableData: [],//宸查�夌▼搴�
+ tableData: [],//鎵�鏈夋枃浠�
+ tableDataProgram:[], //绋嬪簭鏂囦欢锛歵ableData瀛愰泦
+ tableDataAttatch:[], //鍏朵粬鏂囦欢锛歵ableData瀛愰泦
appContent: '',//绋嬪簭鍐呭
- appDialog: false,
+ imgUrl:'', //鍥剧墖棰勮鍦板潃
+ pdfUrl:'',
+ docUrl:'',
+ xlsUrl:'',
+ imgShow: false,//鍥剧墖棰勮鏄惁鏄剧ず
+ pdfShow:false, //pdf鏄剧ず妗�
+ txtShow: true, //绋嬪簭鍐呭鏄惁鏄剧ず
+ docShow: false,
+ xlsShow: false,
+ //appDialog: false,
+ programDialog: false, //绋嬪簭鏂囦欢涓婁紶瀵硅瘽妗唌odel
+ otherFileDialog: false, //鍏朵粬鏂囦欢涓婁紶瀵硅瘽妗唌odel
+
form: {},
page: {
page: 1,
@@ -162,6 +270,12 @@
addApp() {
this.appDialog = true;
},
+ addProgram() {
+ this.programDialog = true;
+ },
+ addOtherFile() {
+ this.otherFileDialog = true;
+ },
uploadAfter(res, done, loading, column) {
if (res.code === 200) {
this.getAttList();
@@ -183,7 +297,11 @@
this.$message.error('鑾峰彇宸查�夌▼搴忓け璐�');
return;
} else {
- this.tableData = this.sortTable(res.data.data || []);
+ //this.tableData = this.sortTable(res.data.data || []);
+ this.tableData = res.data.data;//this.sortTable(res.data.data || []);
+
+ this.tableDataProgram = this.sortTable(this.tableData.filter(f => f.program==true));
+ this.tableDataAttatch = this.sortTable(this.tableData.filter(f => f.program==false));
}
// this.$emit('selection-change',this.tableData)
})
@@ -222,18 +340,92 @@
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") || 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
+ } 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.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";
+
+
+ getFileLink(row.ossName).then(res => {
+ if (res.data.code === 200) {
+ this.pdfUrl = res.data.data
+ } else {
+ //杩炴帴鍦板潃鍔犺浇澶辫触
+ 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;
+ 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) {
@@ -270,7 +462,20 @@
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