Calculation/app/view/payment/detail.ejs

<script type="text/javascript" src="/public/jspdf/jspdf.min.js"></script>
<script type="text/javascript" src="/public/report/js/rpt_public.js"></script>
<script type="text/javascript" src="/public/js/common_ajax.js"></script>
<script type="text/javascript" src="/public/report/js/jpc_output_value_define.js"></script>
<script type="text/javascript" src="/public/report/js/rpt_signature.js"></script>
<script type="text/javascript" src="/public/report/js/jpc_output.js"></script>
<script type="text/javascript" src="/public/report/js/rpt_move_signature.js"></script>
<script type="text/javascript" src="/public/report/js/rpt_jspdf.js"></script>

<div class="panel-content">
    <div class="panel-title fluid">
        <div class="title-main  d-flex justify-content-between">
            <div><a class="mr-2" href="/payment/<%- ctx.paymentTender.id %>/list/<%- trInfo.id %>"><i class="fa fa-chevron-left"></i> 返回</a><%- ctx.paymentTender.name %> / <%- trInfo.rpt_name %> / <%- ctx.detail.code %></div>
            <div>
                <% if ((ctx.detail.status == auditConst.status.uncheck || ctx.detail.status == auditConst.status.checkNo) && trInfo.is_change) { %>
                <span class="text-danger pull-right">报表内容已发生变化，请删除并重新生成详情</span>
                <% } else { %>
                <% include ./audit_btn.ejs %>
                <% if (rptAudit &&
                        ((ctx.detail.status !== auditConst.status.checkNo && ctx.detail.status !== auditConst.status.checked) ||
                        (ctx.detail.status === auditConst.status.checked && !nextDetail) ||
                        (ctx.detail.status === auditConst.status.checkNo && ctx.detail.uid === ctx.session.sessionUser.accountId))
                ) { %>
                <a href="#sub-sp5" data-toggle="modal" data-target="#sub-sp5" class="btn btn-sm btn-primary pull-right mr-2">签字意见</a>
                <% } %>
                <a href="#sign-flow" data-toggle="modal" data-target="#sign-flow" class="btn btn-sm btn-outline-success pull-right mr-2">签署进度</a>
                <% } %>
            </div>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-body">
            <div class="sjs-height-0">
                <div class="row m-0 my-2">
                    <div class="col-5">
                        <div class="sjs-bar-1">
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="content-tab" data-tab="form" data-toggle="tab" href="#content" role="tab" aria-controls="content" aria-selected="true">表单内容</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="annex-tab" data-tab="fujian" data-toggle="tab" href="#annex" role="tab" aria-controls="annex" aria-selected="false">附件</a>
                                </li>
                                <li class="nav-item ml-auto pt-1" id="fujian_btn" style="display:none;">
                                    <!--所有附件 翻页-->
                                    <button  data-toggle="modal" class="btn btn-sm btn-primary" id="bach-download"><i class="fa fa-download "></i> 批量下载</button>
                                    <!-- <a href="javascript: void(0);" data-toggle="modal" class="btn btn-sm btn-primary" id="bach-download"><i class="fa fa-download "></i> 批量下载</a> -->
                                    <a href="javascript:void(0);" class="page-select ml-3" content="pre"><i class="fa fa-chevron-left"></i></a> <span id="currentPage">1</span>/<span id="totalPage">10</span> <a href="javascript:void(0);" class="page-select mr-3" content="next"><i class="fa fa-chevron-right"></i></a>
                                    <% if (ctx.detail.filePermission) { %>
                                        <a href="#addfujian" data-toggle="modal" class="btn btn-sm btn-light text-primary" data-placement="bottom" title="" data-original-title="上传附件"><i class="fa fa-cloud-upload" aria-hidden="true"></i> 上传附件</a>
                                    <% } %>
                                    <a href="javascript: void(0);" id="zipDown" download style="display: none;"></a>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-content mt-2" id="myTabContent">
                            <div class="tab-pane fade show active" id="content" role="tabpanel" aria-labelledby="content-tab">
                                <div id="rpt-form">
                                    <% for (const c of content) { %>
                                    <div>
                                        <h5><%- c.title %>内容</h5>
                                        <% for (const item of c.items) { %>
                                        <div class="form-group">
                                            <label class="d-flex"><%- item.label %>
                                                <% if (item.link !== undefined) { %>
                                                    <div class="dropdown dropup mx-2 show-link-dropdown">
                                                        <% if (ctx.detail.uid === ctx.session.sessionUser.accountId &&
                                                                (ctx.detail.status === auditConst.status.uncheck || ctx.detail.status === auditConst.status.checkNo)) { %>
                                                            <a href="javascript:void(0)" data-toggle="dropdown" title="关联数据" data-target="#link-data1"><i class="fa fa-paperclip"></i></a>
                                                        <% } %>
                                                        <span class="show-link"><% if (item.link !== '') { %>关联数据：<%= ctx.helper._.find(numberList, { index: item.link }) ? ctx.helper._.find(numberList, { index: item.link }).Label : '' %><% } %></span>
                                                        <% if (ctx.detail.uid === ctx.session.sessionUser.accountId &&
                                                                (ctx.detail.status === auditConst.status.uncheck || ctx.detail.status === auditConst.status.checkNo)) { %>
                                                            <div class="link-dropdown dropdown-menu pb-1" aria-labelledby="dropdownMenuButton">
                                                                <div class="px-3">
                                                                    <% if (numberList.length > 0) { %>
                                                                        <% for (const numberInfo of numberList) { %>
                                                                            <div class="form-check py-1">
                                                                                <input class="form form-check-input" type="radio" id="item_<%- item.index %>_number_<%- numberInfo.index %>"
                                                                                       value="<%- numberInfo.index %>" name="radio_<%- item.index %>" <% if (item.link === numberInfo.index) { %>checked<% } %> />
                                                                                <label class="form-check-label" for="item_<%- item.index %>_number_<%- numberInfo.index %>"><%- numberInfo.Label %></label>
                                                                            </div>
                                                                        <% } %>
                                                                    <% } %>
                                                                    <div class="form-check py-1">
                                                                        <input class="form form-check-input" type="radio" id="item_<%- item.index %>_number_" value="" <% if (item.link === '') { %>checked<% } %> name="radio_<%- item.index %>" />
                                                                        <label class="form-check-label" for="item_<%- item.index %>_number_">无</label>
                                                                    </div>
                                                                    <hr class="m-1">
                                                                    <div class="float-right">
                                                                        <button type="button" item-index="<%- item.index %>" old-link="<%- item.link %>" class="btn btn-sm btn-primary change-link">确定</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        <% } %>
                                                    </div>
                                                <% } %>
                                            </label>
                                            <% if (item.type === 'textarea') { %>
                                                <textarea <% if (ctx.detail.readOnly) { %>readonly<% } %> class="form-control form-control-sm" data-index="<%- item.index %>"><%- item.value %></textarea>
                                            <% } else { %>
                                                <input <% if (ctx.detail.readOnly) { %>readonly<% } %> type="<%- item.type %>" value="<%- item.type === 'number' && ctx.helper._.indexOf(item.value, '元') !== -1 ? parseFloat(item.value) : item.value %>" <% if (item.type === 'number') { %>step="0.000001"<% } %>  data-index="<%- item.index %>" class="form-control form-control-sm" placeholder="请输入">
                                            <% } %>
                                        </div>
                                        <% } %>
                                    </div>
                                    <% } %>
                                </div>
                            </div>
                            <!-- 附件 -->
                            <div class="tab-pane fade" id="annex"  role="tabpanel" aria-labelledby="annex-tab">
                                <div class="sjs-sh-1" style="overflow-y: auto;">
                                    <div class="p-2">
                                        <table class="table table-bordered" style="word-break:break-all; table-layout: fixed">
                                            <thead>
                                            <tr>
                                                <td width="25" style="background-color: #e9ecef;"><input type="checkbox" id="check-all-file" ></td>
                                                <th width="40">序号</th>
                                                <th>名称</th>
                                                <th width="130">上传时间/大小</th>
                                                <th width="60">操作</th>
                                            </tr>
                                            </thead>
                                            <tbody id="attList">
                                            <% if (attList !== undefined && attList !== '') { %>
                                                <% for (const [index,att] of attList.entries()) { %>
                                                    <tr>
                                                        <td width="25"><input type="checkbox" class="check-file" file-id=<%- att.id %>></td>
                                                        <td><%- index+1 %></td>
                                                        <td><a href="javascript: void(0);" class="file-atn" f-id="<%- att.id %>"><%- att.filename %><%- att.fileext %></a></td>
                                                        <td><%- moment(att.upload_time).format("YYYY-MM-DD HH:mm:ss") %><br><%- ctx.helper.bytesToSize(att.filesize) %></td>
                                                        <td>
                                                            <a href="/payment/<%- ctx.paymentTender.id %>/detail/<%- ctx.detail.id %>/file/<%- att.id %>/download" class="mr-2" title="下载"><span class="fa fa-download text-primary"></span></a>
                                                            <% if (att.uid === ctx.session.sessionUser.accountId && (ctx.detail.status === auditConst.status.checked ? Boolean(att.extra_upload) : true )) { %>
                                                                <a href="javascript:void(0)" class="mr-2 delete-file" data-attid="<%- att.id %>" title="删除附件"><span class="fa fa-trash text-danger"></span></a>
                                                            <% } %>
                                                        </td>
                                                    </tr>
                                                <% } %>
                                            <% } %>
                                            </tbody>
                                        </table>
                                        <a href="" id="file-upload" target="_blank" style="display: none;"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 ml-5">
                        <div class="d-flex flex-row">
                            <!--<a href="javascript: void(0);" onclick="auditRptPrintHelper.showPage()" class="mr-2" >刷新</a>-->
                            <a href="javascript: void(0);" class="mr-2"  onclick="auditRptPrintHelper.directPDF()">导出pdf</a>
                            <a href="javascript: void(0);" onclick="auditRptPrintHelper.directPrint()">打印</a>
                        </div>
                        <div align="center">
                            <canvas id="auditRptCanvas" height="1200" width="920"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    const accountId = parseInt('<%- ctx.session.sessionUser.accountId %>');
    const tenderId = parseInt('<%- ctx.paymentTender.id %>');
    const detailId = parseInt('<%- ctx.detail.id %>');
    const detailStatus = parseInt('<%- ctx.detail.status %>');
    const trName =  JSON.parse(unescape('<%- escape(JSON.stringify(trInfo.rpt_name)) %>'));
    const detailName =  JSON.parse(unescape('<%- escape(JSON.stringify(ctx.detail.code)) %>'));
    const auditConst = JSON.parse(unescape('<%- escape(JSON.stringify(auditConst)) %>'));
    const rptAudit = JSON.parse(unescape('<%- escape(JSON.stringify(rptAudit)) %>'));
    <% if (rptAudit &&
            ((ctx.detail.status !== auditConst.status.checkNo && ctx.detail.status !== auditConst.status.checked) ||
                    (ctx.detail.status === auditConst.status.checked && !nextDetail) ||
                    (ctx.detail.status === auditConst.status.checkNo && ctx.detail.uid === ctx.session.sessionUser.accountId))
    ) { %>
    let currentStamp = JSON.parse(unescape('<%- escape(JSON.stringify(currentStamp)) %>'));
    <% } %>
    let tesRpttData = JSON.parse(unescape('<%- escape(JSON.stringify(report_json)) %>'));
    console.log(tesRpttData);
    const whiteList = JSON.parse('<%- JSON.stringify(whiteList) %>');
    let attData = JSON.parse(unescape('<%- escape(JSON.stringify(attList)) %>'));
    const uidList = JSON.parse(unescape('<%- escape(JSON.stringify(uidList)) %>'));
    let currPageFileData = [];
    const SCREEN_DPI = [];
    const PAGE_SHOW = {closeWaterMark: 1};
    const current_stage_status = -1;
    const VIEW_CANVAS = document.getElementById("auditRptCanvas");
    const OSS_PATH = '<%- OSS_PATH %>';
    const CUST_CFG = {
        "fonts": [
            {
                "ID": "ReportTitle_Main",
                "Name": "宋体",
                "FontBold": "T",
                "FontHeight": 32,
                "FontItalic": "F",
                "CfgDispName": "表标题",
                "FontUnderline": "F"
            },
            {
                "ID": "Column",
                "Name": "宋体",
                "FontBold": "F",
                "FontHeight": 12,
                "FontItalic": "F",
                "CfgDispName": "列标题",
                "FontUnderline": "F"
            },
            {
                "ID": "Content",
                "Name": "宋体",
                "FontBold": "F",
                "FontHeight": 12,
                "FontItalic": "F",
                "CfgDispName": "正文内容",
                "FontUnderline": "F"
            },
            {
                "ID": "Total",
                "Name": "宋体",
                "FontBold": "F",
                "FontHeight": 12,
                "FontItalic": "F",
                "CfgDispName": "合计",
                "FontUnderline": "F"
            },
            {
                "ID": "Header",
                "Name": "宋体",
                "FontBold": "F",
                "FontHeight": 12,
                "FontItalic": "F",
                "CfgDispName": "表眉/表脚",
                "FontUnderline": "F"
            }
        ],
        "margins": {
            "Top": 12,
            "Left": 15,
            "Right": 15,
            "Bottom": 15
        },
        "fillZero": false,
        "isNarrow": false,
        "borderThick": 2,
        "showVerticalLine": true,
        "closeWarterMark": false,
        "continuousOutput": true
    }

    let zTreeOprObj = {
        _chkPrePayStatus: function() {
            return -1;
        }
    };

    let rptTplObj = {
        pdfFont: {'SmartSimsun': [], 'simhei': [], 'simkai': []},
        isLoading: false,
    };

    let auditRptPrintHelper = {
        currentPageData: null,
        currentDownloadIdx: 0,
        chkPicFeatures: async function(pageData) {
            for (let page of pageData.items) {
                for (let signCell of page.signature_cells) {
                    if (typeof signCell.path === 'string' && signCell.path.length > 10) {
                        let paths = signCell.path.split('!;!');
                        signCell.picFeatures = [];
                        if (!signCell.orgArea) {
                            signCell.orgArea = JSON.parse(JSON.stringify(signCell.area));
                        }
                        signCell.signType = 'mixed';
                        for (let path of paths) {
                            let imgSrc = path;
                            if (path.indexOf(OSS_PATH) < 0 && path[0] !== '/') {
                                imgSrc = OSS_PATH + path;
                            }
                            const picFeature = await getPicFeature(imgSrc);
                            signCell.picFeatures.push(picFeature);
                        }
                    }
                }
            }
        },

        showPage: async function() {
            await auditRptPrintHelper.chkPicFeatures(tesRpttData);
            JpcCanvasOutput.cleanCanvas(VIEW_CANVAS);
            JpcCanvasOutput.drawPageBorder(tesRpttData, VIEW_CANVAS, getScreenDPI());
            JpcCanvasOutput.drawToCanvas(tesRpttData, VIEW_CANVAS, 1, false, true);
        },

        directPrint: function() {
            sessionStorage.report_direct_data = JSON.stringify(tesRpttData);
            sessionStorage.closeWaterMark = 1;
            sessionStorage.pageSize = 'A4';
            sessionStorage.OSS_PATH = OSS_PATH;
            window.open('/printReport/A4');
        },

        _getPdfFontCallback: function(fontProperty) {
            let me = auditRptPrintHelper;
            if (rptTplObj.pdfFont['SmartSimsun'].indexOf(fontProperty) < 0) {
                rptTplObj.pdfFont['SmartSimsun'].push(fontProperty);
            }
            if (rptTplObj.pdfFont['SmartSimsun'].length >= 2) {
                $.bootstrapLoading.end();
                downloadPDFReport([tesRpttData], 'A4', [tesRpttData['打印页面_信息']['报表名称']], [], [], [-1], []);
            }
        },

        directPDF: function() {
            if (rptTplObj.pdfFont['SmartSimsun'].length >= 2) {
                downloadPDFReport([tesRpttData], 'A4', [tesRpttData['打印页面_信息']['报表名称']], [], [], [-1], []);
            } else {
                dynamicLoadJs('https://d2.smartcost.com.cn/cach/SmartSimsun-normal2.js', 'normal', this._getPdfFontCallback);
                dynamicLoadJs('https://d2.smartcost.com.cn/cach/SmartSimsun-bold.js', 'bold', this._getPdfFontCallback);
            }
        },
    };

    // $(document).ready(() => {
    //     autoFlashHeight();
    //     auditRptPrintHelper.showPage();
    //     iniPage();
    // });

    function _getAdhocDummyCells(srcCell, rstCells, controls = null) {
        if (typeof srcCell.path === 'string') {
            let paths = srcCell.path.split('!;!');
            for (let dtlPathIdx = 0; dtlPathIdx < paths.length; dtlPathIdx++) {
                dtlPath = paths[dtlPathIdx];
                // srcCell.picFeatures
                if (dtlPath.length > 10) {
                    let imgSrc = dtlPath;
                    if (dtlPath.indexOf(OSS_PATH) < 0 && dtlPath[0] !== '/') {
                        imgSrc = OSS_PATH + dtlPath;
                    }
                    let couldCreate = true;
                    if (srcCell.picFeatures && srcCell.picFeatures.length === paths.length && (srcCell.picFeatures[dtlPathIdx] === 'not found!')) {
                        couldCreate = false;
                    }
                    if (couldCreate) {
                        let area = srcCell.area;
                        if ((dtlPathIdx === 0) && (srcCell.orgArea)) {
                            area = JSON.parse(JSON.stringify(srcCell.orgArea));
                            let control = srcCell[JV.PROP_CONTROL];
                            if (typeof srcCell[JV.PROP_CONTROL] === "string") {
                                control = controls[srcCell[JV.PROP_CONTROL]];
                            }
                            let tmpArea = srcCell.area;
                            srcCell.area = area;
                            srcCell.isOrgShow = (dtlPathIdx !== 0);
                            let signArea = getProperSignatureArea(srcCell, control, 0, 0, JV);
                            srcCell.area = tmpArea;
                            area[JV.PROP_LEFT] = signArea[0];
                            area[JV.PROP_TOP] = signArea[1];
                            area[JV.PROP_RIGHT] = signArea[2];
                            area[JV.PROP_BOTTOM] = signArea[3];
                        }
                        const newStampCell = {
                            signature_name: 'dummy_pic',
                            control: srcCell.control,
                            // style: srcCell.style,
                            style: (srcCell.style && srcCell.style !== '') ? srcCell.style : 'sign_pic' ,
                            path: imgSrc,
                            isStamp: true,
                            area,
                            isOrgShow: (dtlPathIdx === 0),
                        };
                        rstCells.push(newStampCell);
                    }
                }
            }
        }
    }

    function downloadPDFReport(pageDataArr, pageSize, rpt_names, signatureRelArr, signatureRelInfo, refRptTplIds, STAGE_AUDIT) {
        auditRptPrintHelper.currentDownloadIdx = 0;
        const private_download = function(newPageDataArr, new_rpt_names, dummyCells) {
            if (auditRptPrintHelper.currentDownloadIdx < newPageDataArr.length) {
                let singleSignatureRelArr = [];
                for (let rIdx = 0; rIdx < signatureRelInfo.length; rIdx++) {
                    let rptId = refRptTplIds[auditRptPrintHelper.currentDownloadIdx];
                    if (signatureRelInfo[rIdx].rpt_id === rptId) {
                        singleSignatureRelArr = signatureRelArr[rIdx]; // 有些报表可能没有签名
                        break;
                    }
                }
                let pageData = newPageDataArr[auditRptPrintHelper.currentDownloadIdx];
                let rptName = new_rpt_names[auditRptPrintHelper.currentDownloadIdx];
                auditRptPrintHelper.currentDownloadIdx++;
                JpcJsPDFHelper.outputAsPdf(pageData, pageSize, rptName, singleSignatureRelArr, STAGE_AUDIT, true); // 精确控制签名
                if (auditRptPrintHelper.currentDownloadIdx < newPageDataArr.length) {
                    setTimeout(private_download(newPageDataArr, new_rpt_names), 2000);
                } else {
                    for (let pd of newPageDataArr) {
                        for (let pItem of pd.items) {
                            for (let idx = pItem.signature_cells.length - 1; idx >= 0; idx--) {
                                let pIdx = dummyCells.indexOf(pItem.signature_cells[idx]);
                                if (pIdx >= 0) {
                                    pItem.signature_cells.splice(idx, 1);
                                    dummyCells.splice(pIdx, 1);
                                }
                            }
                        }
                    }
                }
            }
        };
        // 导出PDF审核优化代码
        let picPaths = [], dummyPicAmt = 0, dummyCells = [];
        // 1. 先找有没有dummy
        for (let pageData of pageDataArr) {
            let tmpDummyCells = [];
            let controls = pageData[JV.NODE_CONTROL_COLLECTION];
            for (let page of pageData.items) {
                for (let dCell of page.signature_cells) {
                    _getAdhocDummyCells(dCell, tmpDummyCells, controls);
                }
                if (tmpDummyCells.length > 0) {
                    page.signature_cells = page.signature_cells.concat(tmpDummyCells);
                    dummyCells = dummyCells.concat(tmpDummyCells);
                }
            }
        }
        dummyPicAmt = dummyCells.length;
        if (dummyPicAmt > 0) {
            // 2. 有则一个个请求下载图片，下载完后统一导出PDF
            $.bootstrapLoading.start();
            let handledAmt = 0, exceptionAmt = 0;
            for (let pIdx = 0; pIdx < dummyCells.length; pIdx++) {
                let dCell = dummyCells[pIdx];
                getBlobPublic(dCell.path).then(blob => {
                    if (blob === 'not found!') {
                        exceptionAmt++;
                        if ((handledAmt + exceptionAmt) === dummyPicAmt) {
                            $.bootstrapLoading.end();
                            private_download(pageDataArr, rpt_names, dummyCells);
                        }
                    } else {
                        let oFileReader = new FileReader();
                        oFileReader.onloadend = function (e) {
                            let base64 = e.target.result;
                            dCell.pic = base64;
                            handledAmt++;
                            if ((handledAmt + exceptionAmt) === dummyPicAmt) {
                                $.bootstrapLoading.end();
                                private_download(pageDataArr, rpt_names, dummyCells);
                            }
                        };
                        oFileReader.readAsDataURL(blob);
                    }
                });
            }
        } else {
            // 3. 无则普通导出
            private_download(pageDataArr, rpt_names);
        }
        //*/
    }
</script>