Calculation/app/view/advance/detail.ejs

<% include ../tender/tender_sub_menu.ejs %>
<div class="panel-content">
    <div class="panel-title">
        <div class="title-main d-flex justify-content-between">
            <div>
                <div class="d-inline-block">
                    第<%- advance.order %>期
                </div>
            </div>
            <div id="au-btn">
                <% include ./audit_btn.ejs %>
            </div>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-body">
            <div class="sjs-height-0">
                <div class="col-xl-8 mx-auto">
                    <h4 class="mt-3 text-center mb-3">第<%- advance.order %>期
                        <%- advance.type === auditConst.type.start ? '开工' : '材料' %>预付款</h4>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th colspan="4" class="text-center">
                                    签约<%- advance.type === auditConst.type.start ? '开工' : '材料' %>预付款：<%- ctx.helper.formatMoney(advancePayTotal) %>
                                    元
                                </th>
                            </tr>
                        </thead>
                        <tbody id="pay-content">
                            <% if(isEdited && ctx.session.sessionUser.accountId === ctx.advance.uid) { %>
                            <tr>
                                <th width="150">支付比例</th>
                                <td class="text-right">
                                    <div class="input-group input-group-sm">
                                        <input type="number" class="pay-input form-control nospin text-right"
                                            max="<%- max_pr %>" min="1" placeholder="请填写支付比例，将自动计算本期金额" data-type="0"
                                            value="<%- advance.cur_amount && ctx.helper.mul(ctx.helper.div(advance.cur_amount, advancePayTotal), 100, 2) || 0 %>">
                                        <div class="input-group-append"><span class="input-group-text">%</span></div>
                                    </div>
                                </td>
                                <th width="150">本期金额</th>
                                <td class="text-right">
                                    <div class="input-group input-group-sm">
                                        <input type="number" class="pay-input form-control nospin text-right" min="1"
                                            placeholder="请填写本期金额，将自动计算支付比例" data-type="1"
                                            value="<%- advance.cur_amount && advance.cur_amount.toFixed(decimal) %>">
                                        <div class="input-group-append"><span class="input-group-text">元</span></div>
                                    </div>
                                </td>
                            </tr>
                            <% } else {%>
                            <tr>
                                <th width="150">支付比例</th>
                                <td class="text-right">
                                    <%- advance.cur_amount && ctx.helper.mul(ctx.helper.div(advance.cur_amount, advancePayTotal), 100, 2) || 0 %>%
                                </td>
                                <th width="150">本期金额</th>
                                <td class="text-right">
                                    <%- ctx.helper.formatMoney((advance.cur_amount || 0), ',', decimal) %>
                                </td>
                            </tr>
                            <% } %>
                            <tr>
                                <th>截止上期</th>
                                <td class="text-right" id="p_total1">
                                    <%- ctx.helper.formatMoney((prevAdvance && prevAdvance.prev_total_amount || 0), ',', decimal) %>
                                </td>
                                <th>截止本期金额</th>
                                <td class="text-right" id="p_total2">
                                    <%- ctx.helper.formatMoney((prevAdvance && prevAdvance.prev_total_amount + advance.cur_amount || (advance.cur_amount || 0)), ',', decimal) %>
                                </td>
                            </tr>
                            <tr>
                                <th>备注</th>
                                <td colspan="3">
                                    <textarea id="ad-remark" class="form-control form-control-sm"
                                        <%- isEdited && ctx.session.sessionUser.accountId === ctx.advance.uid ? '' : 'disabled' %>></textarea>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <table class="table table-bordered mt-3">
                        <thead>
                            <tr>
                                <th colspan="3" class="text-center">附件</th>
                            </tr>
                        </thead>
                        <tbody id="file-content">
                        </tbody>
                    </table>
                    <% if(isEdited && ctx.session.sessionUser.accountId === ctx.advance.uid) { %>
                    <table class="table table-bordered mt-3">
                        <thead>
                            <tr>
                                <th colspan="2" class="text-center">审批流程</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td width="30%">
                                    <div class="card">
                                        <ul class="list-group list-group-flush" id="auditors2">
                                            <% auditors.forEach((item, idx) => { %>
                                            <% if (idx === 0) { %>
                                            <li class="list-group-item" data-auditorId="<%- item.audit_id %>">
                                                <i class="fa fa fa-play-circle fa-rotate-90"></i> <%- item.name %>
                                                <small class="text-muted"><%- item.role %></small>
                                            </li>
                                            <% } else if(idx === auditors.length -1 && idx !== 0) { %>
                                            <li class="list-group-item" data-auditorId="<%- item.audit_id %>">
                                                <i class="fa fa fa-stop-circle"></i> <%- item.name %>
                                                <small class="text-muted"><%- item.role %></small>
                                            </li>
                                            <% } else {%>
                                            <li class="list-group-item" data-auditorId="<%- item.audit_id %>">
                                                <i class="fa fa-chevron-circle-down"></i> <%- item.name %>
                                                <small class="text-muted"><%- item.role %></small>
                                            </li>
                                            <% } %>
                                            <% }) %>
                                        </ul>
                                    </div>
                                </td>
                                <td width="70%">
                                    <div class="dropdown">
                                        <button class="btn btn-outline-primary btn-sm dropdown-toggle" type="button"
                                            id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false">
                                            添加审批流程
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"
                                            style="width:220px">
                                            <div class="mb-2 p-2"><input class="form-control form-control-sm"
                                                    placeholder="姓名/手机 检索" id="gr-search"></div>
                                            <dl class="list-unstyled book-list">
                                                <% accountGroup.forEach((group, idx) => { %>
                                                    <dt><a href="javascript: void(0);" class="acc-btn" data-groupid="<%- idx %>" data-type="hide"><i class="fa fa-plus-square"></i></a> <%- group.groupName %></dt>
                                                    <div class="dd-content" data-toggleid="<%- idx %>">
                                                        <% group.groupList.forEach(item => { %>
                                                            <dd class="border-bottom p-2 mb-0 " data-id="<%- item.id %>" >
                                                                <p class="mb-0 d-flex"><span class="text-primary"><%- item.name %></span><span
                                                                        class="ml-auto"><%- item.mobile %></span></p>
                                                                <span class="text-muted"><%- item.role %></span>
                                                            </dd>
                                                        <% });%>
                                                    </div>
                                                <% }) %>
                                            </dl>
                                        </div>
                                    </div>

                                    <div class="card mt-3">
                                        <div class="card-header">
                                            审批流程
                                        </div>
                                        <ul class="list-group list-group-flush" id="auditors">
                                            <% ctx.advance.auditors && ctx.advance.auditors.forEach((item, idx) => { %>
                                            <li class="list-group-item" auditorId="<%- item.audit_id %>">
                                                <a href="" class="text-danger pull-right">移除</a><%- idx+1 %>
                                                <%- item.name %>
                                                <small class="text-muted"><%- item.role %> </small>
                                                <p class="m-0 ml-2">
                                                    <small class="text-muted"><%- item.company %></small>
                                                </p>
                                            </li>
                                            <% }) %>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <% } else {%>
                    <table class="table table-bordered mt-3">
                        <thead>
                            <tr>
                                <th colspan="2" class="text-center">审批流程</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td width="30%">
                                    <div class="card">
                                        <ul class="list-group list-group-flush">
                                            <% auditors.forEach((item, idx) => { %>
                                            <% if (idx === 0) { %>
                                            <li class="list-group-item" data-auditorId="<%- item.audit_id %>">
                                                <i class="fa fa fa-play-circle fa-rotate-90"></i> <%- item.name %>
                                                <small class="text-muted"><%- item.role %></small>
                                                <span class="pull-right">原报</span>
                                            </li>
                                            <% } else if(idx === auditors.length -1 && idx !== 0) { %>
                                            <li class="list-group-item" data-auditorId="<%- item.audit_id %>">
                                                <i class="fa fa fa-stop-circle"></i> <%- item.name %>
                                                <small class="text-muted"><%- item.role %></small>
                                                <span class="pull-right">终审</span>
                                            </li>
                                            <% } else {%>
                                            <li class="list-group-item" data-auditorId="<%- item.audit_id %>">
                                                <i class="fa fa-chevron-circle-down"></i> <%- item.name %>
                                                <small class="text-muted"><%- item.role %></small>
                                                <span
                                                    class="pull-right"><%= ctx.helper.transFormToChinese(idx) %>审</span>
                                            </li>
                                            <% } %>
                                            <% }) %>
                                        </ul>
                                    </div>
                                </td>
                                <td width="70%">
                                    <% auditHistory.forEach((auditors, idx) => { %>
                                    <div class="<%- idx < auditHistory.length - 1 ? 'fold-card' : '' %>">
                                        <div class="text-center text-muted"
                                            <%- idx === auditHistory.length - 1 ? `id="end-target"` : "" %>>
                                            <%- idx === auditHistory.length - 1 ? 1 : idx+1 %>#</div>
                                        <ul class="timeline-list list-unstyled mt-2">
                                            <% auditors.forEach((auditor, index) => { %>
                                            <% if (index === 0) { %>
                                            <li class="timeline-list-item pb-2">
                                                <div class="timeline-item-date">
                                                    <%- ctx.helper.formatDate(auditor.create_time) %>
                                                </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">
                                                        <div class="card-body p-3">
                                                            <div class="card-text">
                                                                <p class="mb-1"><span
                                                                        class="h5"><%- advance.user.name %></span><span
                                                                        class="pull-right text-success"><%- idx !== 0 ? '重新' : '' %>上报审批</span>
                                                                </p>
                                                                <p class="text-muted mb-0"><%- advance.user.role %></p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="timeline-list-item pb-2">
                                                <div class="timeline-item-date">
                                                    <%- ctx.helper.formatDate(auditor.end_time) %>
                                                </div>
                                                <% if(index < auditors.length - 1) { %>
                                                <div class="timeline-item-tail"></div>
                                                <% } %>
                                                <% if(auditor.status === auditConst.status.checked) { %>
                                                <div class="timeline-item-icon bg-success text-light">
                                                    <i class="fa fa-check"></i>
                                                </div>
                                                <% } else if(auditor.status === auditConst.status.checkNo || auditor.status === auditConst.status.checkNoPre) {%>
                                                <div class="timeline-item-icon bg-warning text-light">
                                                    <i class="fa fa-level-up"></i>
                                                </div>
                                                <% } else if(auditor.status === auditConst.status.checking) { %>
                                                <div class="timeline-item-icon bg-warning text-light">
                                                    <i class="fa fa-ellipsis-h"></i>
                                                </div>
                                                <% } else {%>
                                                <div class="timeline-item-icon bg-secondary text-light">
                                                </div>
                                                <% } %>
                                                <div class="timeline-item-content">
                                                    <div class="card">
                                                        <div class="card-body p-3">
                                                            <div class="card-text">
                                                                <p class="mb-1"><span
                                                                        class="h5"><%- auditor.name %></span><span
                                                                        class="pull-right <%- auditConst.statusClass[auditor.status] %>"><%- auditConst.statusString[auditor.status] %></span>
                                                                </p>
                                                                <p class="text-muted mb-0"><%- auditor.role %></p>
                                                            </div>
                                                        </div>
                                                        <!--审批意见-->
                                                        <% if (auditor.opinion) { %>
                                                        <div class="card-body p-3 border-top">
                                                            <p style="margin: 0;"><%- auditor.opinion %></p>
                                                        </div>
                                                        <% } %>
                                                    </div>
                                                </div>
                                            </li>
                                            <% } else {%>
                                            <li class="timeline-list-item pb-2">
                                                <div class="timeline-item-date">
                                                    <%- ctx.helper.formatDate(auditor.end_time) %>
                                                </div>
                                                <% if(index < auditors.length - 1) { %>
                                                <div class="timeline-item-tail"></div>
                                                <% } %>
                                                <% if(auditor.status === auditConst.status.checked) { %>
                                                <div class="timeline-item-icon bg-success text-light">
                                                    <i class="fa fa-check"></i>
                                                </div>
                                                <% } else if(auditor.status === auditConst.status.checkNo || auditor.status === auditConst.status.checkNoPre) {%>
                                                <div class="timeline-item-icon bg-warning text-light">
                                                    <i class="fa fa-level-up"></i>
                                                </div>
                                                <% } else if(auditor.status === auditConst.status.checking) { %>
                                                <div class="timeline-item-icon bg-warning text-light">
                                                    <i class="fa fa-ellipsis-h"></i>
                                                </div>
                                                <% } else { %>
                                                <div class="timeline-item-icon bg-secondary text-light">
                                                </div>
                                                <% } %>
                                                <div class="timeline-item-content">
                                                    <div class="card">
                                                        <div class="card-body p-3">
                                                            <div class="card-text">
                                                                <p class="mb-1"><span
                                                                        class="h5"><%- auditor.name %></span>
                                                                    <span
                                                                        class="pull-right
                                                                                    <%- auditConst.statusClass[auditor.status] %>"><%- auditor.status !== auditConst.status.uncheck ? auditConst.statusString[auditor.status] : ''%>
                                                                        <%- auditor.status === auditConst.status.checkNo ? advance.user.name : '' %>
                                                                        <%- auditor.status === auditConst.status.checkNoPre ? auditors[index-1].name : '' %>
                                                                    </span>
                                                                </p>
                                                                <p class="text-muted mb-0"><%- auditor.role %></p>
                                                            </div>
                                                        </div>
                                                        <!--审批意见-->
                                                        <% if (auditor.opinion) { %>
                                                        <div class="card-body p-3 border-top">
                                                            <p style="margin: 0;"><%- auditor.opinion %></p>
                                                        </div>
                                                        <% } %>
                                                    </div>
                                                </div>
                                            </li>
                                            <% } %>
                                            <% }) %>
                                        </ul>
                                    </div>
                                    <!-- 展开/收起历史流程 -->
                                    <% if(idx === auditHistory.length - 1 && auditHistory.length !== 1) { %>
                                    <div class="text-right"><a href="javascript: void(0);" id="fold-btn"
                                            data-target="show" data-idx="<%- idx + 1 %>">展开历史审批流程</a></div>
                                    <% } %>
                                    <% }) %>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <% } %>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    const cur_uid = parseInt('<%- ctx.session.sessionUser.accountId %>');
    const decimal = parseInt('<%- decimal %>');
    const auditConst = JSON.parse('<%- JSON.stringify(auditConst) %>');
    const advance = JSON.parse('<%- JSON.stringify(advance) %>');
    const prevAdvance = JSON.parse('<%- JSON.stringify(prevAdvance) %>');
    const isEdited = JSON.parse('<%- isEdited %>');
    const advancePayTotal = parseFloat('<%- advancePayTotal %>');
    const preUrl = '<%- preUrl %>';
    const fileList = JSON.parse('<%- JSON.stringify(fileList) %>') || [];
    const whiteList = JSON.parse('<%- JSON.stringify(whiteList) %>');
    const curAuditor = JSON.parse('<%- JSON.stringify(ctx.advance.curAuditor) %>');

    // 展开历史审核记录
    $('td #fold-btn').click(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('展开历史审核记录')
            })
        }
    });
    // 处理换行
    advance.remark && $('#ad-remark').html(advance.remark.replace(/<br\/>/g, '\n').replace(/' '/, '\s'));
</script>
<% if(isEdited && ctx.session.sessionUser.accountId === ctx.advance.uid) { %>
<script>
    const accountList = JSON.parse('<%- JSON.stringify(accountList) %>');
    const accountGroup = JSON.parse('<%- JSON.stringify(accountGroup) %>');
</script>
<% } %>
<style>
    .fold-card {
        display: none;
    }
    .dd-content {
        display: none;
    }
</style>