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

yangys

2025-11-27 f97351a6f1fdc679f4956030d179dca843bbeb0c

 src/views/flow/components/TodolistLeft.vue

@@ -1,52 +1,134 @@
<!--
 * @Date: 2025-07-01 20:45:15
 * @LastEditors: gaoshp
 * @LastEditTime: 2025-08-17 11:50:24
 * @LastEditTime: 2025-08-27 20:48:41
 * @FilePath: /mdmweb/src/views/flow/components/TodolistLeft.vue
-->
<template>
    <basic-container>
        <div class="tool" v-show="['programmingTask','cureProgramTask','repalceProgrammingTask'].includes(row.taskDefinitionKey)">
             <el-button type="primary" plain @click="addApp">添加文件
                </el-button>
        <!--'cureProgramTask', 固化编制能添加文件0916-->
        <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="工艺编制" />
            &nbsp;
            <el-button type="primary" :disabled="programOnMachine" plain @click="addProgram">添加程序
            </el-button>
        </div>
        <el-table :data="tableData" border @row-click="showContent" max-height="200" highlight-current-row>
            <!-- <el-table-column prop="machineCode" label="加工机床">
            </el-table-column> -->
         <el-table-column type="index" label="#" width="40" align="center"/>
         <el-text type="danger" v-if="row.variables.curedLocked === 'Y'">固化程序已锁定，请谨慎使用。锁定原因：{{ remark }}<br/></el-text>
         <el-text type="danger" v-if="row.processDefinitionKey === 'program-unlock'">程序已锁定，锁定原因：{{ remark }}<br/></el-text>
         <el-text type="primary" v-if="row.processDefinitionKey === 'program-unlock'"><br/>解锁原因：</el-text>
         <el-text type="warning">{{row.variables.unlockReason}}</el-text>
         <el-text type="danger" v-if="row.variables.hasCuredProgram==='Y' && row.variables.isProcessEditionSame=='N' && row.variables.cureProgramUseable==undefined">已固化程序工序版次不一致，派工版次:{{row.variables.processEdition}},已固化版次：{{row.variables.curedProcessEdition}}</el-text>
         <el-text type="danger" v-if="row.variables.programOnMachine=='Y'">现场编制</el-text>
        <el-table :data="tableDataProgram" 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>
                        <el-icon v-if="row.fileType ==='other'"><FolderOpened /></el-icon>
                        <img v-else src="./app.jpg" alt="" width="16" height="16">
                        <!--
                        <el-icon>
                            <el-tooltip class="box-item" effect="light" content="程序文件"  placement="right">
                                <Tickets/>
                            </el-tooltip>
                        </el-icon>
                        -->
                    </div>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100" align="center">
            <template #default="scope" >
                <a style="color: blue;margin-right: 4px;cursor: pointer;font-size: 12px;" v-show="['programmingTask','cureProgramTask','repalceProgrammingTask'].includes(row.taskDefinitionKey)" type="text" size="small" @click.stop="del(scope.$index,scope.row)">删除</a>
                <a style="color: blue;cursor: pointer;font-size: 12px;" type="text" size="small" @click.stop="downloadFile(scope.$index,scope.row)">下载</a>
            </template>
            <el-table-column fixed="right" label="操作" width="150" align="center">
                <template #default="scope">
                    <!--'cureProgramTask', 固化编制，不能删除和上传-->
                    <a style="color: blue;margin-right: 4px;cursor: pointer;font-size: 12px;"
                        v-show="['programmingTask', '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>
        <h4>程序内容</h4>
        <div v-html="appContent" class="app-content">
        <el-divider></el-divider>
        <div class="tool" v-show="['programmingTask','cureProgramTask', 'replaceProgrammingTask','appendProgrammingTask'].includes(row.taskDefinitionKey)">
           
            <el-button type="primary" :disabled="programOnMachine" plain @click="addOtherFile">添加文件
            </el-button>
        </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>
            <!-- <div slot="footer" class="dialog-footer">
                <el-button @click="appDialog = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</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">
                    <!--'cureProgramTask', 固化编制，不能删除和上传-->
                    <a style="color: blue;margin-right: 4px;cursor: pointer;font-size: 12px;"
                        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>
                    
                </template>
            </el-table-column>
        </el-table>
        <!--
        <el-collapse>
            <el-collapse-item :title="`固化旧版本: 零组件号: ${row.variables.drawingNo} 工序号: ${row.variables.processNo } 工序版次: ${ row.variables.processEdition }`" name="1">
                <el-table :data="fileData" border @row-click="showContent" max-height="200" 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>{{ 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;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>
            </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"/>
        
        </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>
        <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>

        <el-dialog title="文件比对" v-model="diffDialog" width="80%">
            <code-diff :old-string="this.content1" :new-string="this.content2" output-format="side-by-side"
                :hideStat="true" :filename="codeDiffFileName1" :newFilename="codeDiffFileName2" />
        </el-dialog>
    </basic-container>
</template>

<script setup>
import VuePdfEmbed from 'vue-pdf-embed';
</script>
<script>
import { getAppList,getSelectedAppList,getContent,removeAtt} 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';
@@ -67,27 +149,23 @@
    },
    data() {
        return {
            diffDialog: false,
            content1: '',
            content2: '',
            codeDiffFileName1: '回传版本',
            codeDiffFileName2: '下发版本',
            showContentId: '',
            programOnMachine:false,//是否现场编制
            attForm: {
                att: '',
                fileType: 'program'
            }, //程序上传表单
            attOption: {
            programOption: {//程序文件上传
                submitBtn: false,
                emptyBtn: false,
                menu: false,
                column: [
                    {
                        label: '文件类型',
                        prop: 'fileType',
                        type: 'select',
                        span: 24,
                        clearable: false,
                        dicData: [
                            { label: '程序文件', value: 'program' },
                            { label: '其他文件', value: 'other' },
                        ],
                    },
                    
                    {
                        label: '添加文件',
                        prop: 'att',
@@ -101,10 +179,41 @@
                        },
                    }
                ]
            }, //程序上传
            }, 
            otherFileOption: {//其他文件上传
                submitBtn: false,
                emptyBtn: false,
                menu: false,
                column: [
                    
                    {
                        label: '添加文件',
                        prop: 'att',
                        type: 'upload',
                        multiple: true,
                        action: '/api/blade-mdm/flow/mgr/ncupload',
                        span: 24,
                        data: {
                            processInstanceId: this.row.processInstanceId,
                            fileType: 'other',
                        },
                    }
                ]
            },
            tableData: [],//已选程序
            tableDataProgram:[], //程序文件：tableData子集
            tableDataAttatch:[], //其他文件：tableData子集
            appContent: '',//程序内容
            appDialog: false,
            imgUrl:'', //图片预览地址
            pdfUrl:'',
            imgShow: false,//图片预览是否显示
            pdfShow:false, //pdf显示框
            txtShow: true, //程序内容是否显示

            //appDialog: false,
            programDialog: false, //程序文件上传对话框model
            otherFileDialog: false, //其他文件上传对话框model

            form: {},
            page: {
                page: 1,
@@ -113,6 +222,7 @@
            },
            appData: [],
            selectionList: [],
            fileData: [],//已选文件
            optionApp: {
                menu: false,
                gridBtn: false,
@@ -145,13 +255,63 @@
                    // },
                ],
            },

            remark:'',//锁定原因
        }
    },
    mounted() {
        this.getAttList();
        this.getFileData();
        this.getLockRemark();//获取锁定原因
        this.onLoad(this.page);
        
    },
    methods: {
        getFileData () {
            getFileData(this.row.processInstanceId).then(res => {
                if (res.data.code !== 200) {
                    this.$message.error(res.data.msg || '获取文件失败');
                    return;
                } else {
                    this.fileData = res.data.data || [];
                }
            })
        },
        getLockRemark () {
            //获取锁定原因
            let nodeId = this.row.variables.nodeId;
            if(!nodeId){
                nodeId = this.row.variables.curedNodeId;
            }
            if(nodeId){
                queryLockRemark(nodeId).then(res => {
                    if (res.data.code == 200) {
                        this.remark = res.data.data || '';
                    } else {
                        this.remark = '';
                    }
                });
            }
        },
        diffFile(index, row) {
            //console.log(row)
            axios({
                url: '/blade-mdm/blade-mdm/flow/file/compare-with-try',
                method: 'get',
                params: { fileId: row.id },
            }).then(
                res => {
                    if(res.data.success) {
                        this.diffDialog = true;
                        this.content1 = res.data.data.content1;
                        this.content2 = res.data.data.content2;
                    } else {
                        this.$message.error(res.data.msg || '比对失败');
                    }
                    
                }
            );
        },
        uploadAfter(res, done, loading, column) {
            if (res.code === 200) {
                this.getAttList();
@@ -166,19 +326,37 @@
                done()
            }
        },
        getAttList () {
        getAttList() {
            getSelectedAppList(this.row.processInstanceId).then(res => {
                if (res.data.code !== 200) {
                    this.$message.error('获取已选程序失败');
                    this.$message.error('获取程序列表失败');
                    return;
                } else {
                    this.tableData = 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)
            })
        },
        addApp() {
            this.appDialog = true;
        sortTable(data) {
           data.sort(function(a,b){
                if(a.program === b.program){//如果program相同，按照name的降序
                    //return a.name - b.name
                    return a.name.localeCompare(b.name)
                }else{
                    return b.program - a.program
                }
            });
            return data;
        },
        
        addProgram() {
            this.programDialog = true;
        },
        addOtherFile() {
            this.otherFileDialog = true;
        },
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
@@ -190,42 +368,77 @@
            this.selectionList = list;
        },
        onLoad(page, params = {}) {
            const query = {}
            getAppList(page.currentPage, page.pageSize, Object.assign(query, params)).then(res => {
                const data = res.data.data;
                this.page.total = data.total;
                this.appData = data.records;
            });
        },
        add () {
        add() {
            console.log('add')
            this.tableData = this.tableData.concat(this.selectionList.filter(item => {
                return !this.tableData.some(existingItem => existingItem.id === item.id);
            }));
            this.appDialog = false;
            this.$emit('selection-change',this.tableData)
            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 = '程序内容加载失败'
        showContent(row, column, event) {
            //图片
            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) {
        
        del(index, row) {
            if (row.id === this.showContentId) {
                this.showContentId = '';
                this.showContent(null, null, null);
            }
            removeAtt(row.id).then(res => {
                if(res.data.code === 200) {
                if (res.data.code === 200) {
                    this.$message.success('删除成功');
                    this.getAttList();
                } else {
@@ -233,15 +446,15 @@
                }
            })
        },
        downloadFile(index,row) {
        downloadFile(index, row) {
            NProgress.start();
            exportBlob(
                `/blade-mdm/flow/mgr/down-flow-file?id=${row.id}`
            ).then(res => {
                console.log(res)
                if(res.status !== 200) {
                if (res.status !== 200) {
                    return this.$message.error(res.msg);
                } 
                }
                downloadXls(res.data, `${row.name}`);
                NProgress.done();
            });
@@ -252,6 +465,7 @@

<style lang="scss" scoped>
.tool {
    margin-top:0px;
    text-align: right;
    margin-bottom: 10px;
}
@@ -259,6 +473,7 @@
.dialog-footer {
    text-align: center;
}

.app-content {
    background-color: #fffee1;
    padding: 10px 30px;
@@ -267,15 +482,30 @@
    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 {
        .el-form-item--default {
            margin-bottom: 0;
        }
        .avue-form__menu--center {
            display: none;
        }
.att-box {
    .el-form-item--default {
        margin-bottom: 0;
    }

    .avue-form__menu--center {
        display: none;
    }
}
</style>