审批界面增加pdf，图片预览功能

yangys

2025-11-27 f97351a6f1fdc679f4956030d179dca843bbeb0c

 src/views/flow/components/TodolistLeft.vue

@@ -99,9 +99,15 @@
                </el-table>
            </el-collapse-item>
        </el-collapse>
         v-if="pdfShow"
        -->
        <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>
        <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>
@@ -117,8 +123,12 @@
    </basic-container>
</template>

<script setup>
import VuePdfEmbed from 'vue-pdf-embed';
</script>
<script>
import { getFileData, getSelectedAppList, getContent, removeAtt,queryLockRemark } from '@/api/flow/todolist';

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';
@@ -194,6 +204,12 @@
            tableDataProgram:[], //程序文件：tableData子集
            tableDataAttatch:[], //其他文件：tableData子集
            appContent: '',//程序内容
            imgUrl:'', //图片预览地址
            pdfUrl:'',
            imgShow: false,//图片预览是否显示
            pdfShow:false, //pdf显示框
            txtShow: true, //程序内容是否显示

            //appDialog: false,
            programDialog: false, //程序文件上传对话框model
            otherFileDialog: false, //其他文件上传对话框model
@@ -278,7 +294,7 @@
            }
        },
        diffFile(index, row) {
            console.log(row)
            //console.log(row)
            axios({
                url: '/blade-mdm/blade-mdm/flow/file/compare-with-try',
                method: 'get',
@@ -362,19 +378,60 @@
            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")){
                this.imgShow = true;
                this.pdfShow = false;
                this.txtShow = 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.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{
                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) {
                this.showContentId = '';
@@ -425,6 +482,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 {