Calculation/app/view/tender/modal.ejs

<!--弹出添加标段-->
<div class="modal fade" id="add-bd" 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="form-group">
                    <label>标段名称<b class="text-danger">*</b></label>
                    <input class="form-control form-control-sm"  placeholder="输入标段名称" type="text" name="name">
                </div>
                <div class="form-group">
                    <style>
                        .tooltip-inner {
                            max-width: initial;
                        }
                    </style>
                    <label ><b class="text-danger">*</b>计价标准<a style="" href="javascript:void(0)" data-toggle="tooltip" data-placement="right" title="" data-original-title="用于初始化新建模板、项目节、标准清单" class="ml-2"><i class="fa fa-info-circle"></i></a></label>
                    <div>
                        <% for (const [i, v] of valuations.entries()) { %>
                        <div class="form-check form-check-inline mt-2">
                            <input class="form-check-input" name="valuation" type="radio" id="valuation<%- v.id %>" value="<%- v.id %>" <% if (i === 0) { %>checked<% } %>>
                            <label class="form-check-label" for="valuation<%- v.id %>"><%- v.name %></label>
                        </div>
                        <% } %>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary btn-sm" id="add-bd-ok">确定添加</button>
            </div>
        </div>
    </div>
</div>
<!--弹出分类设置-->
<div class="modal fade" id="cate-set" 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-300">
                    <ul id="treeLevel" class="ztree"></ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary btn-sm" id="set-cate-ok">确定</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="cate-set-self" 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-300">
                    <ul id="treeLevel-self" class="ztree"></ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-sm" id="set-cate-self-reset">重置</button>
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary btn-sm" id="set-cate-self-ok">确定</button>
            </div>
        </div>
    </div>
</div>
<!--弹出计量模式选择-->
<div class="modal fade" id="jlms" data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">选择计量模式</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <% for (const mt in measureType) { %>
                    <div class="col-6">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title"><i class="fa fa-bookmark"></i><%- measureType[mt].title %></h5>
                                <p class="card-text"><b><%- measureType[mt].name %></b><%- measureType[mt].hint%></p>
                                <a href="#" mst="<%- measureType[mt].value %>" class="btn btn-primary btn-sm">选择他</a>
                            </div>
                        </div>
                    </div>
                    <% } %>
                </div>
            </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" 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>
<script>
    const auditType = JSON.parse('<%- JSON.stringify(auditConst.auditType) %>');
    $(document).ready(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, auditors2, 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) => {
                    console.log(group);
                    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.beginYear}<span>${group.beginDate}</span><span>${group.beginTime}</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 {
                        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.statusClass[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>');
                        }
                        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(''));
        }
        const loadHistory = function (result, auditConst2) {
            const dayMode = true;
            const { auditHistory, auditors, user } = result
            let historyHTML = ''
            const leftAuditors = auditors;
            const darkHTML = !dayMode ? 'bg-dark border-secondary text-white' : '';
            auditHistory.forEach((auditors, idx) => {
                if(idx === auditHistory.length - 1 && auditHistory.length !== 1) {
                    historyHTML += `<div class="text-right"><a href="javascript: void(0);" id="fold-btn" data-target="show"
                    >展开历史审批流程</a></div>`
                }
                historyHTML += `<div class="${idx < auditHistory.length - 1 ? 'fold-card' : ''}">
                <div class="text-center text-muted">${idx + 1}#</div>
                <ul class="timeline-list list-unstyled mt-2">`
                auditors.forEach((auditor, index) => {
                    if (index === 0) {
                        historyHTML += `<li class="timeline-list-item pb-2">
                            <div class="timeline-item-date">
                                ${formatDate(auditor.begin_time, !dayMode)}
                            </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="card ${darkHTML}">
                                    <div class="card-body p-3">
                                        <div class="card-text">
                                            <p class="mb-1"><span
                                                    class="h5">${user.name}</span><span
                                                    class="pull-right text-success">${idx !== 0 ? '重新' : ''}上报审批</span>
                                            </p>
                                            <p class="text-muted mb-0">${user.role}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="timeline-list-item pb-2">
                            <div class="timeline-item-date">
                                ${formatDate(auditor.end_time, !dayMode)}
                            </div>`

                        if(index < auditors.length - 1) {
                            historyHTML += `<div class="timeline-item-tail"></div>`
                        }
                        if(auditor.status === auditConst2.status.checked) {
                            historyHTML += `<div class="timeline-item-icon bg-success text-light">
                                    <i class="fa fa-check"></i>
                                </div>`

                        } else if(auditor.status === auditConst2.status.checkNo || auditor.status === auditConst2.status.checkNoPre) {
                            historyHTML += `<div class="timeline-item-icon bg-warning text-light">
                                    <i class="fa fa-level-up"></i>
                                </div>`
                        } else if(auditor.status === auditConst2.status.checking) {
                            historyHTML += `<div class="timeline-item-icon bg-warning text-light">
                                    <i class="fa fa-ellipsis-h"></i>
                                </div>`
                        } else {
                            historyHTML += `<div class="timeline-item-icon bg-secondary text-light"></div>`

                        }
                        historyHTML += `<div class="timeline-item-content">
                                <div class="card ${darkHTML}">
                                    <div class="card-body p-3">
                                        <div class="card-text">
                                            <p class="mb-1"><span class="h5">${auditor.name}</span><span
                                                    class="pull-right ${auditConst2.statusClass[auditor.status]}">${auditConst2.statusString[auditor.status]}</span>
                                            </p>
                                            <p class="text-muted mb-0">${auditor.role}</p>
                                        </div>
                                    </div>`
                        if (auditor.opinion) {
                            historyHTML += `<div class="card-body p-3 border-top">
                                    <p style="margin: 0;">${auditor.opinion}</p>
                                </div>`
                        }
                        historyHTML += `</div></div></li>`
                    } else {
                        historyHTML += `<li class="timeline-list-item pb-2">
                        <div class="timeline-item-date">
                            ${formatDate(auditor.end_time, !dayMode)}
                        </div>`

                        if(index < auditors.length - 1) {
                            historyHTML += `<div class="timeline-item-tail"></div>`
                        }
                        if(auditor.status === auditConst2.status.checked) {
                            historyHTML += `<div class="timeline-item-icon bg-success text-light">
                                <i class="fa fa-check"></i>
                            </div>`
                        } else if(auditor.status === auditConst2.status.checkNo || auditor.status === auditConst2.status.checkNoPre) {
                            historyHTML += `<div class="timeline-item-icon bg-warning text-light">
                                <i class="fa fa-level-up"></i>
                            </div>`

                        } else if(auditor.status === auditConst2.status.checking) {
                            historyHTML += `<div class="timeline-item-icon bg-warning text-light">
                                <i class="fa fa-ellipsis-h"></i>
                            </div>`
                        } else {
                            historyHTML += `<div class="timeline-item-icon bg-secondary text-light"></div>`
                        }
                        historyHTML += `<div class="timeline-item-content">
                        <div class="card ${darkHTML}">
                            <div class="card-body p-3">
                                <div class="card-text">
                                    <p class="mb-1"><span class="h5">${auditor.name}</span>
                                        <span
                                            class="pull-right
                                                            ${auditConst2.statusClass[auditor.status]}">${auditor.status !== auditConst2.status.uncheck ? auditConst2.statusString[auditor.status] : ''}
                                            ${auditor.status === auditConst2.status.checkNo ? user.name : ''}
                                            ${auditor.status === auditConst2.status.checkNoPre && auditor.sort - 1 > 0 ? _.find(auditors, { sort: auditor.sort - 1 }).name : ''}
                                        </span>
                                    </p>
                                    <p class="text-muted mb-0">${auditor.role}</p>
                                </div>
                            </div>`

                        if (auditor.opinion) {
                            historyHTML += `<div class="card-body p-3 border-top">
                            <p style="margin: 0;">${auditor.opinion} </p>
                        </div>`
                        }
                        historyHTML += `</div></div></li>`
                    }
                })
                historyHTML += '</ul></div>'

            })
            $('#audit-list').empty()
            $('#audit-list').append(historyHTML)
        }
        // 获取审批流程
        $('a[data-target="#sp-list" ]').on('click', function () {
            const type = $(this).attr('data-type');
            const data = {
                order: $(this).attr('data-order'),
            };
            const tenderId = $(this).attr('data-tender');
            let url = '';
            let auditConst2 = '';
            if (type === 'stage') {
                url = '/tender/' + tenderId + '/measure/stage/auditors';
                auditConst2 = JSON.parse('<%- JSON.stringify(auditConst.stage) %>');
            } else if (type === 'ledger') {
                url = '/tender/' + tenderId + '/measure/ledger/auditors';
                auditConst2 = JSON.parse('<%- JSON.stringify(auditConst.ledger) %>');
            } else if (type === 'material') {
                url = '/tender/' + tenderId + '/measure/material/auditors';
                auditConst2 = JSON.parse('<%- JSON.stringify(auditConst.material) %>');
            }
            postData(url, data, function (result) {
                if (type === 'stage') {
                    loadStageHistory(result, auditConst2);
                } else {
                    loadHistory(result, auditConst2);
                }
            });
        });

        // 展开/收起历史审核记录
        $('#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('展开历史审核记录')
                })
            }
        });

        function formatDate(date, dayMode) {
            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 class="${dayMode ? 'text-light' : ''}">${mon}-${day}</span><span class="${dayMode ? 'text-light' : ''}">${hour}:${minute}:${scond}</span>`;
        };
    })
</script>