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

yangys

2025-12-03 fdb0ed498f295b50c072c4b3652c08e2d60a747a

 src/views/flow/components/TodolistLeft.vue

@@ -7,7 +7,7 @@
<template>
    <basic-container>
        <!--'cureProgramTask', 固化编制能添加文件0916-->
        <div class="tool" v-show="['programmingTask','cureProgramTask', 'replaceProgrammingTask','appendProgrammingTask'].includes(row.taskDefinitionKey)">
        <div class="tool" v-show="['programmingTask','replaceProgrammingTask','appendProgrammingTask'].includes(row.taskDefinitionKey)">
           
            <!--无固化的情况才显示该开关-->
            <el-switch v-if="row.variables.hasCuredProgram!=='Y'" v-model="programOnMachine" active-text="现场编制" inactive-text="工艺编制" />
@@ -63,13 +63,6 @@
                <template #default="{ row }">
                    <div style="display: flex;align-items: center;">
                        <span style="margin-right: 8px;">{{ row.name }}</span>
                        <!--
                        <el-icon>
                            <el-tooltip class="box-item" effect="light" content="其他文件"  placement="right">
                            <FolderOpened />
                            </el-tooltip>
                        </el-icon>
                        -->
                    </div>
                </template>
            </el-table-column>
@@ -77,13 +70,11 @@
                <template #default="scope">
                    <!--'cureProgramTask', 固化编制，不能删除和上传-->
                    <a style="color: blue;margin-right: 4px;cursor: pointer;font-size: 12px;"
                        v-show="['programmingTask', 'replaceProgrammingTask','appendProgrammingTask'].includes(row.taskDefinitionKey)"
                        v-show="['programmingTask','cureProgramTask', 'replaceProgrammingTask','appendProgrammingTask'].includes(row.taskDefinitionKey)"
                        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>
                    <a style="color: blue;cursor: pointer;font-size: 12px;" type="text" size="small"
                        v-show="['program-cure'].includes(row.processDefinitionKey)"
                        @click.stop="diffFile(scope.$index, scope.row)">比对</a>
                    
                </template>
            </el-table-column>
        </el-table>
@@ -108,10 +99,22 @@
                </el-table>
            </el-collapse-item>
        </el-collapse>
         
        -->
        <h5>程序内容</h5>
        <div v-html="appContent" class="app-content">
        <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"/>
        </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>
@@ -127,24 +130,33 @@
</template>

<script>
import { getFileData, getSelectedAppList, getContent, removeAtt,queryLockRemark } from '@/api/flow/todolist';

</script>
<script>
//上面的script增加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 {
@@ -203,6 +215,15 @@
            tableDataProgram:[], //程序文件：tableData子集
            tableDataAttatch:[], //其他文件：tableData子集
            appContent: '',//程序内容
            imgUrl:'', //图片预览地址
            pdfUrl:'',
            docUrl:'',
            xlsUrl:'',
            imgShow: false,//图片预览是否显示
            pdfShow:false, //pdf显示框
            txtShow: true, //程序内容是否显示
            docShow: false,
            xlsShow: false,
            //appDialog: false,
            programDialog: false, //程序文件上传对话框model
            otherFileDialog: false, //其他文件上传对话框model
@@ -287,7 +308,7 @@
            }
        },
        diffFile(index, row) {
            console.log(row)
            //console.log(row)
            axios({
                url: '/blade-mdm/blade-mdm/flow/file/compare-with-try',
                method: 'get',
@@ -310,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 {
@@ -363,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);
            }));
@@ -371,19 +392,96 @@
            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;
                this.docShow = false;
                this.xlsShow = false;
                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) {
                this.showContentId = '';
@@ -434,6 +532,21 @@
    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 {