Calculation/app/view/revise/modal.ejs

<!--弹出新建台账修订-->
<div class="modal fade" id="add-bg" data-backdrop="static">
    <form class="modal-dialog" role="document" action="<%- preUrl + '/revise/add' %>" method="post" onsubmit="return dbClick();">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">新建修订</h5>
            </div>
            <div class="modal-body">
                <h5>创建修订后，本期计量将暂时锁定，锁定后本期计量无法计量和上报，需修订完成后，才能解锁。</h5>
            </div>
            <div class="modal-footer">
                <input type="hidden" name="_csrf_j" value="<%= ctx.csrf %>" />
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
                <button id="add-ok" type="submit" class="btn btn-primary btn-sm">确定新建</button>
            </div>
        </div>
    </form>
</div>
<div class="modal fade" id="add-bg-hint" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">新增修订</h5>
            </div>
            <div class="modal-body">
                <h6>标段已在审批中，无法创建修订，请在待上报或者审批完成后再进行。</h6>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="add-bg-hint2" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">新增修订</h5>
            </div>
            <div class="modal-body">
                <h6>修订会影响审批中的变更令（包含新增部位），请审批完成后再创建台账修订。</h6>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--审批流程/结果-->
<div class="modal fade" id="sp-list" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">审批流程</h5>
            </div>
            <div class="modal-body">
                <div class="modal-height-500 scroll-y" style="overflow: auto" id="audit-list">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<% if (ledgerRevise.length > 0 && (ledgerRevise[0].status === auditConst.status.uncheck || ledgerRevise[0].status === auditConst.status.checkNo) && ctx.session.sessionUser.accountId === ledgerRevise[0].uid) { %>
<!--弹出作废-->
<div class="modal fade" id="remove" data-backdrop="static">
    <form class="modal-dialog" role="document" action="<%- preUrl + '/revise/cancel' %>" method="post" onsubmit="return $.trim($('#cancel-confirm').val()) === '修订作废';">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">作废修订</h5>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger">
                    修订 已有数据，请谨慎操作；
                    <br>作废后，数据无法恢复，请谨慎操作；
                    <br>确认作废，请在以下输入框输入"&nbsp;&nbsp;&nbsp;<b>修订作废</b>&nbsp;&nbsp;&nbsp;"，再点击“确认作废”按钮。
                </div>
                <div class="form-group">
                    <input class="form-control form-control-sm" placeholder="" type="text" id="cancel-confirm">
                </div>
            </div>
            <div class="modal-footer">
                <input type="hidden" name="_csrf_j" value="<%= ctx.csrf %>" />
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal" >取消</button>
                <button type="submit" class="btn btn-danger btn-sm">确认作废</button>
            </div>
        </div>
    </form>
</div>
<% } %>

<script>
    const auditType = JSON.parse('<%- JSON.stringify(auditType) %>');
    let dbClickFlag = true;
    function dbClick() {
        if(dbClickFlag){
            dbClickFlag = false;
            return true;
        }
        return dbClickFlag;
    }
    const auditConst = JSON.parse('<%- auditConst2 %>');

    $(function () {
        const getAuditTypeText = function (type) {
            if (type === auditType.key.common) return '';
            return `<span class="text-${auditType.info[type].class}">${auditType.info[type].long}</span>`;
        };
        const loadStageHistory = function (result, auditConst2) {
            const { auditHistory, user } = result;
            let historyHTML = [];
            auditHistory.forEach((his, idx) => {
                if (idx === auditHistory.length - 1 && auditHistory.length !== 1) {
                    historyHTML.push(`<div class="text-right"><a href="javascript: void(0);" id="fold-btn" data-target="show">展开历史审批流程</a></div>`);
                }
                historyHTML.push(`<div class="${idx < auditHistory.length - 1 ? 'fold-card' : ''}">`);
                historyHTML.push(`<div class="text-center text-muted">${idx+1}#</div>`);
                historyHTML.push(`<ul class="timeline-list list-unstyled mt-2 pr-1 ${ idx === auditHistory.length - 1 && auditHistory.length !== 1 ? 'last-auditor-list' : '' }">`);
                his.forEach((group, index) => {
                    if (index === 0) {
                        historyHTML.push(`<li class="timeline-list-item pb-2">
                                            <div class="timeline-item-date">
                                                ${group.beginYear}
                                                <span>${group.beginDate}</span>
                                                <span>${group.beginTime}</span>

                                            </div>
                                            <div class="timeline-item-tail"></div>
                                            <div class="timeline-item-icon bg-success text-light"><i class="fa fa-caret-down"></i></div>
                                            <div class="timeline-item-content">
                                                <div class="py-1">
                                                    <span class="text-black-50">原报</span>
                                                    <span class="pull-right text-success">${idx !== 0 ? '重新' : '' }上报审批</span>
                                                </div>
                                                <div class="card">
                                                    <div class="card-body px-3 py-0">
                                                        <div class="card-text p-2 py-3 row">
                                                            <div class="col">
                                                                <span class="h6">${user.name}</span>
                                                                <span class="text-muted ml-1">${user.role}</span>
                                                            </div>
                                                            <div class="col">
                                                                <span class="pull-right text-success"><i class="fa fa-check-circle"></i></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>`);
                    }
                    historyHTML.push(`<li class="timeline-list-item pb-2 ${ group.status === auditConst2.status.uncheck && idx === auditHistory.length - 1 && auditHistory.length !== 1 ? 'is_uncheck' : ''}">`);
                    if (group.endYear) {
                        historyHTML.push(`<div class="timeline-item-date">${group.endYear}<span>${group.endDate}</span><span>${group.endTime}</span></div>`);
                    }
                    if (index < his.length - 1) {
                        historyHTML.push('<div class="timeline-item-tail"></div>');
                    }
                    if (group.status === auditConst2.status.checked) {
                        historyHTML.push('<div class="timeline-item-icon bg-success text-light"><i class="fa fa-check"></i></div>');
                    } else if (group.status === auditConst2.status.checkNo || group.status === auditConst2.status.checkNoPre || group.status === auditConst2.status.checkCancel) {
                        historyHTML.push('<div class="timeline-item-icon bg-warning text-light"><i class="fa fa-level-up"></i></div>');
                    } else if (group.status === auditConst2.status.checking) {
                        historyHTML.push('<div class="timeline-item-icon bg-warning text-light"><i class="fa fa-ellipsis-h"></i></div>');
                    } else if(group.status === auditConst2.status.checkAgain) {
                        historyHTML.push('<div class="timeline-item-icon bg-warning text-light"><i class="fa fa-check"></i></div>');
                    }  else {
                        historyHTML.push('<div class="timeline-item-icon bg-secondary text-light"></div>');
                    }

                    historyHTML.push('<div class="timeline-item-content">');
                    const statuStr = group.status !== auditConst2.status.uncheck ?
                        `<span class="pull-right ${auditConst2.auditStringClass[group.status]}">${auditConst2.statusString[group.status]}</span>` : '';
                    historyHTML.push(`<div class="py-1">
                        <span class="text-black-50">
                        ${ !group.is_final ? group.audit_order + '' : '终' }审 ${getAuditTypeText(group.audit_type)}
                        </span>
                        ${statuStr}
                    </div>`);
                    historyHTML.push('<div class="card"><div class="card-body px-3 py-0">');
                    for (const [i, auditor] of group.auditors.entries()) {
                        historyHTML.push(`<div class="card-text p-2 py-3 row ${ ( i > 0 ? 'border-top' : '') }">`);
                        historyHTML.push(`<div class="col"><span class="h6">${auditor.name}</span><span class="text-muted ml-1">${auditor.role}</span></div>`);
                        historyHTML.push('<div class="col">');
                        if (auditor.status === auditConst2.status.checked) {
                            historyHTML.push('<span class="pull-right text-success"><i class="fa fa-check-circle"></i></span>');
                        } if (auditor.status === auditConst2.status.checkNo || auditor.status === auditConst2.status.checkNoPre || auditor.status === auditConst2.status.checkCancel) {
                            historyHTML.push('<span class="pull-right text-warning"><i class="fa fa-share-square fa-rotate-270"></i></span>');
                        } else if (auditor.status === auditConst2.status.checking) {
                            historyHTML.push('<span class="pull-right text-warning"><i class="fa fa-commenting"></i></span>');
                        }  else if (auditor.status === auditConst2.status.checkAgain) {
                            historyHTML.push('<span class="pull-right text-warning"><i class="fa fa-check-circle"></i></span>');
                        }
                        historyHTML.push('</div>');
                        if (auditor.opinion) {
                            historyHTML.push(`<div class="col-12 py-1 bg-light"><i class="fa fa-commenting-o mr-1"></i>${auditor.opinion}</div>`);
                        }
                        historyHTML.push('</div>');
                    }
                    historyHTML.push('</div></div>');
                    historyHTML.push('</div>');
                    historyHTML.push('</li>');
                });
                historyHTML.push('</div>');
                historyHTML.push('</ul>');
            });
            $('#audit-list').empty();
            $('#audit-list').append(historyHTML.join(''));
        }
        // 获取审批流程
        $('a[data-target="#sp-list"]').on('click', function () {
            const data = {
                id: $(this).attr('lr-id'),
            };
            postData('<%- preUrl + "/revise/auditors" %>', data, function (result) {
                loadStageHistory(result, auditConst)
            })
        });
    });
    function formatDate(date) {
        if (!date) return '';
        date = new Date(date)
        const year = date.getFullYear();
        let mon = date.getMonth() + 1;
        let day = date.getDate();
        let hour = date.getHours();
        let minute = date.getMinutes();
        let scond = date.getSeconds();
        if (mon < 10) {
            mon = '0' + mon.toString();
        }
        if (day < 10) {
            day = '0' + day.toString();
        }
        if (hour < 10) {
            hour = '0' + hour.toString();
        }
        if (minute < 10) {
            minute = '0' + minute.toString();
        }
        if (scond < 10) {
            scond = '0' + scond.toString();
        }
        return `${year}<span>${mon}-${day}</span><span>${hour}:${minute}:${scond}</span>`;
    };

    $('#audit-list').on('click', 'a', function() {
        const type = $(this).data('target')
        const auditCard = $(this).parent().parent()
        console.log('auditCard', auditCard)
        if (type === 'show') {
            $(this).data('target', 'hide')
            auditCard.find('.fold-card').slideDown('swing', () => {
                auditCard.find('#fold-btn').text('收起历史审核记录')
            })
        } else {
            $(this).data('target', 'show')
            auditCard.find('.fold-card').slideUp('swing', () => {
                auditCard.find('#fold-btn').text('展开历史审核记录')
            })
        }
    });
</script>