增加pdf，xlsx，docx文件预览功能

yangys

2025-12-03 fdb0ed498f295b50c072c4b3652c08e2d60a747a

 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:[], //程序文件：tableData子集
            tableDataAttatch:[], //其他文件：tableData子集
            appContent: '',//程序内容
            appDialog: false,
            imgUrl:'', //图片预览地址
            pdfUrl:'',
            docUrl:'',
            xlsUrl:'',
            imgShow: false,//图片预览是否显示
            pdfShow:false, //pdf显示框
            txtShow: true, //程序内容是否显示
            docShow: false,
            xlsShow: false,
            //appDialog: false,
            programDialog: false, //程序文件上传对话框model
            otherFileDialog: false, //其他文件上传对话框model

            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 {