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

yangys

2025-12-03 fdb0ed498f295b50c072c4b3652c08e2d60a747a

 src/views/flow/components/TodolistLeft.vue

@@ -99,16 +99,22 @@
                </el-table>
            </el-collapse-item>
        </el-collapse>
         v-if="pdfShow"
         
        -->
        <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"/>
        
            <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>
@@ -123,29 +129,34 @@
    </basic-container>
</template>

<script setup>
import VuePdfEmbed from 'vue-pdf-embed';
</script>
<script>

</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 {
@@ -206,10 +217,13 @@
            appContent: '',//程序内容
            imgUrl:'', //图片预览地址
            pdfUrl:'',
            docUrl:'',
            xlsUrl:'',
            imgShow: false,//图片预览是否显示
            pdfShow:false, //pdf显示框
            txtShow: true, //程序内容是否显示

            docShow: false,
            xlsShow: false,
            //appDialog: false,
            programDialog: false, //程序文件上传对话框model
            otherFileDialog: false, //其他文件上传对话框model
@@ -317,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 {
@@ -370,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);
            }));
@@ -378,12 +392,15 @@
            this.$emit('selection-change', this.tableData)
        },
        showContent(row, column, event) {
            //图片
            
            let lowerName = row.name.toLowerCase();
            if(lowerName.endsWith(".png") || lowerName.endsWith(".jpg")){
            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
@@ -399,11 +416,12 @@
                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";
                //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
@@ -411,12 +429,44 @@
                        //连接地址加载失败
                        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 = '';