feat: 台账修订首页点击状态栏弹窗改版

app/controller/revise_controller.js

@@ -122,12 +122,13 @@ module.exports = app => {
                         auditHistory.push(await ctx.service.reviseAudit.getAuditors2ReviseList(reviseInfo.id, i));
                     }
                 }
+                responseData.data.user = await ctx.service.projectAccount.getAccountInfoById(reviseInfo.uid);
                 responseData.data.auditHistory = auditHistory;
                 // 获取审批流程中左边列表
                 responseData.data.auditors = await ctx.service.reviseAudit.getAuditorsWithOwner(reviseInfo.id, times);
                 // 获取原报信息
-                const reviseAuditor = await ctx.service.projectAccount.getAccountInfoById(reviseInfo.uid);
-                responseData.data.reviseAuditor = reviseAuditor;
+                // const reviseAuditor = await ctx.service.projectAccount.getAccountInfoById(reviseInfo.uid);
+                // responseData.data.reviseAuditor = reviseAuditor;
                 ctx.body = responseData;
             } catch (error) {
                 this.log(error);

app/public/js/ledger.js

@@ -2810,11 +2810,11 @@ $(document).ready(function() {
     });
 
     $('#hideSp').click(function () {
-        $('#sp-list2').modal('hide');
+        $('#sp-list').modal('hide');
     });
 
     // 多层modal关闭后的滚动bug修复
-    $('#sp-list2').on('hidden.bs.modal', function (e) {
+    $('#sp-list').on('hidden.bs.modal', function (e) {
         $(document.body).addClass('modal-open');
     });
 

app/view/revise/modal.ejs

@@ -28,67 +28,10 @@
                     <div class="col-4">
                         <div class="card mt-3">
                             <ul class="list-group list-group-flush" id="auditor-list">
-                                <li class="list-group-item"><i class="fa fa fa-play-circle fa-rotate-90"></i> 布尔  <small class="text-muted">施工</small></li>
-                                <li class="list-group-item"><i class="fa fa-chevron-circle-down"></i> 张三  <small class="text-muted">监理</small></li>
-                                <li class="list-group-item"><i class="fa fa-chevron-circle-down"></i> 王五 <small class="text-muted">监理</small></li>
-                                <li class="list-group-item"><i class="fa fa fa-stop-circle"></i> 李四 <small class="text-muted">监理</small></li>
                             </ul>
                         </div>
                     </div>
-                    <div class="col-8 modal-height-500" style="overflow: auto" id="auditor-list2">
-                        <div class="card mt-3">
-                            <ul class="list-group list-group-flush">
-                                <li class="list-group-item">
-                                    <span class="text-success pull-right">上报</span>
-                                    <h5 class="card-title"><i class="fa fa-play-circle fa-rotate-90 text-success"></i> 布尔 <small class="text-muted">施工</small></h5>
-                                    <p class="card-text">2017-11-25</p>
-                                </li>
-                                <li class="list-group-item">
-                                    <span class="text-success pull-right">审批通过</span>
-                                    <h5 class="card-title"><i class="fa fa-chevron-circle-down text-success"></i> 张三 <small class="text-muted">监理</small></h5>
-                                    <p class="card-text">审批意见。2017-11-25</p>
-                                </li>
-                                <li class="list-group-item">
-                                    <span class="text-success pull-right">审批通过</span>
-                                    <h5 class="card-title"><i class="fa fa-chevron-circle-down text-success"></i> 王五 <small class="text-muted">监理</small></h5>
-                                    <p class="card-text">审批通过。2017-11-26</p>
-                                </li>
-                                <li class="list-group-item">
-                                    <span class="text-warning pull-right">审批退回 布尔</span>
-                                    <h5 class="card-title"><i class="fa fa-stop-circle text-warning"></i> 李四 <small class="text-muted">监理</small></h5>
-                                    <p class="card-text">审批退回，审批意见文本。2017-11-27</p>
-                                </li>
-                            </ul>
-                        </div>
-                        <!--退回原报重新上报-->
-                        <div class="card mt-3">
-                            <ul class="list-group list-group-flush">
-                                <li class="list-group-item">
-                                    <span class="text-success pull-right">重新上报</span>
-                                    <h5 class="card-title"><i class="fa fa-play-circle fa-rotate-90 text-success"></i> 布尔 <small class="text-muted">施工</small></h5>
-                                    <p class="card-text">2017-12-01</p>
-                                </li>
-                                <li class="list-group-item">
-                                    <span class="text-success pull-right">审批通过</span>
-                                    <h5 class="card-title"><i class="fa fa-chevron-circle-down text-success"></i> 张三 <small class="text-muted">监理</small></h5>
-                                    <p class="card-text">审批通过 2017-12-02</p>
-                                </li>
-                                <li class="list-group-item">
-                                    <span class="text-warning pull-right">审批退回 张三</span>
-                                    <h5 class="card-title"><i class="fa fa-chevron-circle-down text-warning"></i> 王五 <small class="text-muted">监理</small></h5>
-                                    <p class="card-text">审批退回 2017-12-02</p>
-                                </li>
-                                <!--王五退回上一审批人 张三，张三重新审批-->
-                                <li class="list-group-item">
-                                    <span class="pull-right">审批中</span>
-                                    <h5 class="card-title"><i class="fa fa-chevron-circle-down"></i> 张三 <small class="text-muted">监理</small></h5>
-                                    <p class="card-text"></p>
-                                </li>
-                                <li class="list-group-item">
-                                    <h5 class="card-title"><i class="fa fa-stop-circle"></i> 李四 <small class="text-muted">监理</small></h5>
-                                </li>
-                            </ul>
-                        </div>
+                    <div class="col-8 modal-height-500" style="overflow: auto" id="audit-list">
                     </div>
                 </div>
             </div>
@@ -144,76 +87,187 @@
                 id: $(this).attr('lr-id'),
             };
             postData('<%- preUrl + "/revise/auditors" %>', data, function (result) {
-                const reviseAuditor = result.reviseAuditor;
-                const auditors = result.auditors;
-                const auditHistory = result.auditHistory;
-                // 生成左边列表流程
-                const lefthtml = [];
-                lefthtml.push('<li class="list-group-item"><i class="fa fa fa-play-circle fa-rotate-90"></i> '+ reviseAuditor.name +'  <small class="text-muted">'+ reviseAuditor.role +'</small><span class="pull-right">原报</span></li>');
-                for (const [index,a] of auditors.entries()) {
-                    if (index+1 === auditors.length) {
-                        lefthtml.push('<li class="list-group-item"><i class="fa fa-stop-circle"></i> '+ a.name +'  <small class="text-muted">'+ a.role +'</small><span class="pull-right">终审</span></li>');
+                const { auditHistory, auditors, user } = result
+                let auditorsHTML = ''
+                let historyHTML = ''
+                auditors.forEach((auditor, idx) => {
+                    if (idx === 0) {
+                        auditorsHTML += `<li class="list-group-item">
+                            <i class="fa fa fa-play-circle fa-rotate-90"></i> ${auditor.name}
+                            <small class="text-muted">${auditor.role}</small>
+                            <span class="pull-right">原报</span>
+                        </li>`
+                    } else if(idx === auditors.length -1 && idx !== 0) {
+                        auditorsHTML += `<li class="list-group-item">
+                            <i class="fa fa fa-stop-circle"></i> ${auditor.name}
+                            <small class="text-muted">${auditor.role}</small>
+                            <span class="pull-right">终审</span>
+                        </li>`
                     } else {
-                        lefthtml.push('<li class="list-group-item"><i class="fa fa-chevron-circle-down"></i> '+ a.name +'  <small class="text-muted">'+ a.role +'</small><span class="pull-right">' + transFormToChinese(index+1) + '审</span></li>');
+                        auditorsHTML += `<li class="list-group-item">
+                            <i class="fa fa-chevron-circle-down"></i> ${auditor.name}
+                            <small class="text-muted">${auditor.role}</small>
+                            <span class="pull-right">${transFormToChinese(idx)}审</span>
+                        </li>`
                     }
-                }
-                $('#auditor-list').html(lefthtml.join(''));
+                })
+                $('#auditor-list').empty()
+                $('#auditor-list').append(auditorsHTML)
+                auditHistory.forEach((auditors, idx) => {
+                    historyHTML += `<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) {
+                            historyHTML += `<li class="timeline-list-item pb-2">
+                                <div class="timeline-item-date">
+                                    ${formatDate(auditor.begin_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">${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)}
+                                </div>`
 
-                // 生成右边列表流程
-                const righthtml = [];
-                for(const ah of auditHistory) {
-                    righthtml.push('<div class="card mt-3"><ul class="list-group list-group-flush">');
-                    for (let iA = 0; iA < ah.length; iA++) {
-                        if (iA === 0) {
-                            righthtml.push('<li class="list-group-item">');
-                            righthtml.push('<h5 class="card-title">');
-                            righthtml.push('<i class="fa fa-play-circle fa-rotate-90 text-success"></i> '+ reviseAuditor.name +' <small class="text-muted">'+ reviseAuditor.role +'</small><span class="pull-right">原报</span></h5>');
-                            righthtml.push('<div class="ml-3">');
-                            righthtml.push('<span class="text-success"><small>' + (ah[iA].begin_time ? moment(ah[iA].begin_time).format('YYYY-MM-DD') : '') + '</small> '+ (auditHistory.indexOf(ah) > 0 ? '重新' : '') + '上报</span></div></li>');
-                            righthtml.push('<li class="list-group-item">');
-                            righthtml.push('<h5 class="card-title"><i class="fa '+ (iA === ah.length - 1 ? 'fa-stop-circle ' : 'fa-chevron-circle-down ') + auditConst.statusClass[ah[iA].status] +'"></i> '+ ah[iA].name +' <small class="text-muted">'+ ah[iA].role +'</small><span class="pull-right">' + (ah[iA].sort === ah[iA].max_sort ? '终' : transFormToChinese(ah[iA].sort)) + '审</span></h5>');
-                            righthtml.push('<div class="ml-3">');
-                            if (ah[iA].status !== auditConst.status.uncheck) {
-                                let timeHtml = '';
-                                if (ah[iA].status === auditConst.status.checked || ah[iA].status === auditConst.status.checkNo) {
-                                    timeHtml = '<small>'+ (ah[iA].end_time ? moment(ah[iA].end_time).format('YYYY-MM-DD') : '') +'</small> ';
+                                if(index < auditors.length - 1) {
+                                    historyHTML += `<div class="timeline-item-tail"></div>`
                                 }
-                                righthtml.push('<span class="' + auditConst.statusClass[ah[iA].status] +'">'+ timeHtml + auditConst.statusString[ah[iA].status] + (ah[iA].status === auditConst.status.checkNo ? ' ' + reviseAuditor.name : '') + '</span>');
-                            }
-                            righthtml.push('<p class="card-text">'+ (ah[iA].opinion !== null ? ah[iA].opinion : '') +'</p></div>');
-                            righthtml.push('</li>');
-                        } else if (iA === ah.length - 1) {
-                            righthtml.push('<li class="list-group-item">');
-                            righthtml.push('<h5 class="card-title"><i class="fa fa-stop-circle '+ auditConst.statusClass[ah[iA].status] +'"></i> '+ ah[iA].name +' <small class="text-muted">'+ ah[iA].role +'</small><span class="pull-right">终审</span></h5>');
-                            righthtml.push('<div class="ml-3">');
-                            if (ah[iA].status !== auditConst.status.uncheck) {
-                                let timeHtml = '';
-                                if (ah[iA].status === auditConst.status.checked || ah[iA].status === auditConst.status.checkNo) {
-                                    timeHtml = '<small>'+ (ah[iA].end_time ? moment(ah[iA].end_time).format('YYYY-MM-DD') : '') +'</small> ';
+                                if(auditor.status === auditConst.status.checked) {
+                                    historyHTML += `<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) {
+                                    historyHTML += `<div class="timeline-item-icon bg-warning text-light">
+                                        <i class="fa fa-level-up"></i>
+                                    </div>`
+                                } else if(auditor.status === auditConst.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>`
+
                                 }
-                                righthtml.push('<span class="' + auditConst.statusClass[ah[iA].status] +'">' + timeHtml + auditConst.statusString[ah[iA].status] + (ah[iA].status === auditConst.status.checkNo ? ' ' + reviseAuditor.name : '') + '</span>');
-                            }
-                            righthtml.push('<p class="card-text">'+ (ah[iA].opinion !== null ? ah[iA].opinion : '') +'</p></div>');
-                            righthtml.push('</li>');
-                        } else {
-                            righthtml.push('<li class="list-group-item">');
-                            righthtml.push('<h5 class="card-title"><i class="fa '+ (iA === ah.length - 1 ? 'fa-stop-circle ' : 'fa-chevron-circle-down ') + auditConst.statusClass[ah[iA].status] +'"></i> '+ ah[iA].name +' <small class="text-muted">'+ ah[iA].role +'</small><span class="pull-right">' + (ah[iA].sort === ah[iA].max_sort ? '终' : transFormToChinese(ah[iA].sort)) + '审</span></h5>');
-                            righthtml.push('<div class="ml-3">');
-                            if (ah[iA].status !== auditConst.status.uncheck) {
-                                let timeHtml = '';
-                                if (ah[iA].status === auditConst.status.checked || ah[iA].status === auditConst.status.checkNo) {
-                                    timeHtml = '<small>'+ (ah[iA].end_time ? moment(ah[iA].end_time).format('YYYY-MM-DD') : '') +'</small> ';
+                                historyHTML += `<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) {
+                                historyHTML += `<div class="card-body p-3 border-top">
+                                        <p style="margin: 0;">${auditor.opinion}</p>
+                                    </div>`
                                 }
-                                righthtml.push('<span class="' + auditConst.statusClass[ah[iA].status] +'">'+ timeHtml + auditConst.statusString[ah[iA].status] + (ah[iA].status === auditConst.status.checkNo ? ' ' + reviseAuditor.name : '') + '</span>');
+                                historyHTML += `</div></div></li>`
+                        } else {
+                            historyHTML += `<li class="timeline-list-item pb-2">
+                            <div class="timeline-item-date">
+                                ${formatDate(auditor.end_time)}
+                            </div>`
+
+                            if(index < auditors.length - 1) {
+                                historyHTML += `<div class="timeline-item-tail"></div>`
+                            }
+                            if(auditor.status === auditConst.status.checked) {
+                                historyHTML += `<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) {
+                                historyHTML += `<div class="timeline-item-icon bg-warning text-light">
+                                    <i class="fa fa-level-up"></i>
+                                </div>`
+
+                            } else if(auditor.status === auditConst.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">
+                                <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 ? 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) {
+                            historyHTML += `<div class="card-body p-3 border-top">
+                                <p style="margin: 0;">${auditor.opinion} </p>
+                            </div>`
                             }
-                            righthtml.push('<p class="card-text">'+ (ah[iA].opinion !== null ? ah[iA].opinion : '') +'</p></div>');
-                            righthtml.push('</li>');
+                            historyHTML += `</div></div></li>`
                         }
+                    })
+                    historyHTML += '</ul></div>'
+                    if(idx === auditHistory.length - 1 && auditHistory.length !== 1) {
+                        historyHTML += `<div class="text-right"><a href="javascript: void(0);" id="fold-btn" data-target="show"
+                        data-idx="${idx + 1}">展开历史审批流程</a></div>`
                     }
-                    righthtml.push('</ul></div>');
-                }
-                $('#auditor-list2').html(righthtml.join(''));
+                })
+                $('#audit-list').empty()
+                $('#audit-list').append(historyHTML)
             })
         });
-    })
+    });
+    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>`;
+    };
 </script>