Calculation/app/public/js/phase_pay_list.js

'use strict';

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

    const getGroupAuditHtml = function (group) {
        return group.map(u => { return `<small class="d-inline-block text-dark mx-1" title="${u.role}" data-auditorId="${u.aid}">${u.name}</small>`; }).join('');
    };
    const getAuditTypeHtml = function (type) {
        if (type === auditType.key.common) return '';
        return `<div class="li-subscript"><span class="badge badge-pill badge-${auditType.info[type].class} p-1 badge-bg-small"><small>${auditType.info[type].short}</small></span></div>`;
    };
    const getAuditTypeText = function (type) {
        if (type === auditType.key.common) return '';
        return `<span class="text-${auditType.info[type].class}">${auditType.info[type].long}</span>`;
    };
    const getAuditorsHtml = function (auditors) {
        const auditorsHTML = [];
        auditors.forEach((group, idx) => {
            if (idx === 0) {
                auditorsHTML.push(`<li class="list-group-item d-flex justify-content-between align-items-center">
                    <span class="mr-1"><i class="fa fa fa-play-circle fa-rotate-90"></i></span>
                <span class="text-muted">${getGroupAuditHtml(group)}</span>
                <span class="badge badge-light badge-pill ml-auto"><small>原报</small></span>
                </li>`);
            } else if(idx === auditors.length -1 && idx !== 0) {
                auditorsHTML.push(`<li class="list-group-item d-flex justify-content-between align-items-center">
                    <span class="mr-1"><i class="fa fa fa-stop-circle fa-rotate-90"></i></span>
                <span class="text-muted">${getGroupAuditHtml(group)}</span>
                <div class="d-flex ml-auto">
                ${getAuditTypeHtml(group[0].audit_type)}
                <span class="badge badge-light badge-pill ml-auto"><small>终审</small></span>
                </div>
                </li>`);
            } else {
                auditorsHTML.push(`<li class="list-group-item d-flex justify-content-between align-items-center">
                    <span class="mr-1"><i class="fa fa fa-chevron-circle-down"></i></span>
                <span class="text-muted">${getGroupAuditHtml(group)}</span>
                <div class="d-flex ml-auto">
                ${getAuditTypeHtml(group[0].audit_type)}
                <span class="badge badge-light badge-pill"><small>${transFormToChinese(idx)}审</small></span>
                </div>
                </li>`);
            }
        });
        return auditorsHTML;
    }
    const getAuditHistroyHtml = function (auditHistory) {
        const 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 ${ idx === auditHistory.length - 1 && auditHistory.length !== 1 ? 'last-auditor-list' : '' }">`);
            his.forEach((group) => {
                historyHTML.push(`<li class="timeline-list-item pb-2 ${ group.audit_status === auditConst.status.uncheck && idx === auditHistory.length - 1 && auditHistory.length !== 1 ? 'is_uncheck' : ''}">`);
                if (group.auditYear) {
                    historyHTML.push(`<div class="timeline-item-date">${group.auditYear}<span>${group.auditDate}</span><span>${group.auditTime}</span></div>`);
                }
                if (group.audit_order < his.length - 1) {
                    historyHTML.push('<div class="timeline-item-tail"></div>');
                }
                if (group.audit_status === auditConst.status.checked) {
                    historyHTML.push('<div class="timeline-item-icon bg-success text-light"><i class="fa fa-check"></i></div>');
                } else if (group.audit_status === auditConst.status.checkNo || group.audit_status === auditConst.status.checkNoPre || group.status === auditConst.status.checkCancel) {
                    historyHTML.push('<div class="timeline-item-icon bg-warning text-light"><i class="fa fa-level-up"></i></div>');
                } else if (group.audit_status === auditConst.status.checking) {
                    historyHTML.push('<div class="timeline-item-icon bg-warning text-light"><i class="fa fa-ellipsis-h"></i></div>');
                } else {
                    historyHTML.push('<div class="timeline-item-icon bg-secondary text-light"></div>');
                }

                historyHTML.push('<div class="timeline-item-content">');
                if (group.audit_order > 0) {
                    const statuStr = group.audit_status !== auditConst.status.uncheck ?
                        `<span class="pull-right ${auditConst.info[group.audit_status].class}">${auditConst.info[group.audit_status].title}</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>`);
                } else {
                    historyHTML.push(` <div class="py-1">
                        <span class="text-black-50">原报</span>
                        <span class="pull-right text-success">${idx !== 0 ? '重新' : '' }上报审批</span>
                    </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.audit_status === auditConst.status.checked) {
                        historyHTML.push('<span class="pull-right text-success"><i class="fa fa-check-circle"></i></span>');
                    } if (auditor.audit_status === auditConst.status.checkNo || auditor.audit_status === auditConst.status.checkNoPre || auditor.audit_status === auditConst.status.checkCancel) {
                        historyHTML.push('<span class="pull-right text-warning"><i class="fa fa-share-square fa-rotate-270"></i></span>');
                    }
                    historyHTML.push('</div>');
                    if (group.audit_order > 0 && 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>');
        });
        return historyHTML.join('');
    }
    // 获取审批流程
    $('a[data-target="#sp-list" ]').on('click', function () {
        postData('pay/auditors', { order: $(this).attr('phase-order') }, function (result) {
            $('#auditor-list').html(getAuditorsHtml(result.hisUserGroup));
            $('#audit-list').html(getAuditHistroyHtml(result.auditHistory));
        });
    });

    $.subMenu({
        menu: '#sub-menu', miniMenu: '#sub-mini-menu', miniMenuList: '#mini-menu-list',
        toMenu: '#to-menu', toMiniMenu: '#to-mini-menu',
        key: 'menu.1.0.0',
        miniHint: '#sub-mini-hint', hintKey: 'menu.hint.1.0.1',
        callback: function (info) {
            if (info.mini) {
                $('.panel-title').addClass('fluid');
                $('#sub-menu').removeClass('panel-sidebar');
            } else {
                $('.panel-title').removeClass('fluid');
                $('#sub-menu').addClass('panel-sidebar');
            }
            autoFlashHeight();
        }
    });
});