feat: 计量、材料首页审核弹窗改版

app/controller/material_controller.js

@@ -98,9 +98,11 @@ module.exports = app => {
                 responseData.data.auditHistory = auditHistory;
                 // 获取审批流程中左边列表
                 responseData.data.auditors = await ctx.service.materialAudit.getAuditGroupByList(materialInfo.id, times);
+
+                responseData.data.user = await ctx.service.projectAccount.getAccountInfoById(materialInfo.user_id);
                 // 获取原报信息
-                const materialAuditor = await ctx.service.projectAccount.getAccountInfoById(materialInfo.user_id);
-                responseData.data.materialAuditor = materialAuditor;
+                // const materialAuditor = await ctx.service.projectAccount.getAccountInfoById(materialInfo.user_id);
+                // responseData.data.materialAuditor = materialAuditor;
                 ctx.body = responseData;
             } catch (error) {
                 this.log(error);

app/controller/measure_controller.js

@@ -34,7 +34,7 @@ module.exports = app => {
         /**
          * 期列表(Get)
          * @param ctx
-         * @returns {Promise<void>}
+         * @return {Promise<void>}
          */
         async stage(ctx) {
             try {
@@ -64,7 +64,7 @@ module.exports = app => {
         /**
          * 期审批流程(Get)
          * @param ctx
-         * @returns {Promise<void>}
+         * @return {Promise<void>}
          */
         async stageAuditors(ctx) {
             try {
@@ -84,10 +84,12 @@ module.exports = app => {
                 }
                 responseData.data.auditHistory = auditHistory;
                 // 获取审批流程中左边列表
-                responseData.data.auditors = await ctx.service.stageAudit.getAuditGroupByList(stageInfo.id, times);
+                responseData.data.auditors = await ctx.service.stageAudit.getAuditGroupByListWithOwner(stageInfo.id, times);
+
+                responseData.data.user = await ctx.service.projectAccount.getAccountInfoById(stageInfo.user_id);
                 // 获取原报信息
-                const stageAuditor = await ctx.service.projectAccount.getAccountInfoById(stageInfo.user_id);
-                responseData.data.stageAuditor = stageAuditor;
+                // const stageAuditor = await ctx.service.projectAccount.getAccountInfoById(stageInfo.user_id);
+                // responseData.data.stageAuditor = stageAuditor;
                 ctx.body = responseData;
             } catch (error) {
                 this.log(error);
@@ -98,7 +100,7 @@ module.exports = app => {
         /**
          * 新增期(Post)
          * @param ctx
-         * @returns {Promise<void>}
+         * @return {Promise<void>}
          */
         async add(ctx) {
             try {
@@ -117,14 +119,14 @@ module.exports = app => {
                 ctx.redirect('/tender/' + ctx.tender.id + '/measure/stage/' + newStage.order);
             } catch (err) {
                 this.log(err);
-                ctx.redirect(ctx.request.header.referer)
+                ctx.redirect(ctx.request.header.referer);
             }
         }
 
         /**
          * 编辑期(Post)
          * @param ctx
-         * @returns {Promise<void>}
+         * @return {Promise<void>}
          */
         async save(ctx) {
             try {
@@ -157,7 +159,7 @@ module.exports = app => {
         /**
          * 多期汇总 (Get)
          * @param ctx
-         * @returns {Promise<void>}
+         * @return {Promise<void>}
          */
         async gather(ctx) {
             try {
@@ -165,7 +167,7 @@ module.exports = app => {
                     tender: ctx.tender.data,
                     tenderMenu: this.menu.tenderMenu,
                     preUrl: '/tender/' + ctx.tender.id,
-                }
+                };
                 await this.layout('measure/gather.ejs', renderData);
             } catch (err) {
                 this.log(err);
@@ -176,7 +178,7 @@ module.exports = app => {
         /**
          * 多期比较(Get)
          * @param ctx
-         * @returns {Promise<void>}
+         * @return {Promise<void>}
          */
         async compare(ctx) {
             try {
@@ -186,7 +188,7 @@ module.exports = app => {
                     preUrl: '/tender/' + ctx.tender.id,
                 };
                 renderData.stages = await ctx.service.stage.getAllDataByCondition({
-                    where: {tid: ctx.tender.id, status: auditConst.status.checked},
+                    where: { tid: ctx.tender.id, status: auditConst.status.checked },
                     orders: [['order', 'asc']],
                 });
                 renderData.jsFiles = this.app.jsFiles.common.concat(this.app.jsFiles.measure.compare);
@@ -200,30 +202,30 @@ module.exports = app => {
         /**
          * 多期比较 - 获取数据(Ajax)
          * @param ctx
-         * @returns {Promise<void>}
+         * @return {Promise<void>}
          */
         async loadCompareData(ctx) {
             try {
                 const data = JSON.parse(ctx.request.body.data);
                 const result = {
                     main: null,
-                    stages: []
+                    stages: [],
                 };
                 if (data.main) {
                     result.main = {};
                     result.main.ledger = await ctx.service.ledger.getData(ctx.tender.id);
-                    result.main.pos = await ctx.service.pos.getPosData({tid: ctx.tender.id});
+                    result.main.pos = await ctx.service.pos.getPosData({ tid: ctx.tender.id });
                 }
                 if (data.stages) {
                     for (const order of data.stages) {
-                        const data = { order: order, bills: [], pos: [] };
-                        const stage = await this.ctx.service.stage.getDataByCondition({tid: ctx.tender.id, order: order});
+                        const data = { order, bills: [], pos: [] };
+                        const stage = await this.ctx.service.stage.getDataByCondition({ tid: ctx.tender.id, order });
                         data.bills = await ctx.service.stageBills.getLastestStageData(ctx.tender.id, stage.id);
                         data.pos = await ctx.service.stagePos.getLastestStageData2(ctx.tender.id, stage.id);
                         result.stages.push(data);
                     }
                 }
-                ctx.body = {err: 0, msg: '', data: result};
+                ctx.body = { err: 0, msg: '', data: result };
             } catch (err) {
                 this.log(err);
                 ctx.body = this.ajaxErrorBody(err, '获取数据错误');
@@ -233,7 +235,7 @@ module.exports = app => {
         /**
          * 删除期(Post)
          * @param ctx
-         * @returns {Promise<void>}
+         * @return {Promise<void>}
          */
         async delete(ctx) {
             try {

app/public/js/measure_material.js

@@ -14,79 +14,210 @@ $(function () {
             order: $(this).attr('m-order'),
         };
         postData('/tender/' + tenderId + '/measure/material/auditors', data, function (result) {
-            const materialAuditor = result.materialAuditor;
-            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> '+ materialAuditor.name +'  <small class="text-muted">'+ materialAuditor.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> '+ materialAuditor.name +' <small class="text-muted">'+ materialAuditor.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>');
-                        righthtml.push('</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 ? ' ' + materialAuditor.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 ? ' ' + materialAuditor.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 ? ' ' + materialAuditor.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)
         });
     });
 
+    // 展开/收起历史审核记录
+    $('#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('#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) {
+        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>`;
+    };
+
     // 计量期选中
     $('.select-stage-order').on('click', function () {
         const stageList = $('.select-stage-order:checked');

app/public/js/measure_stage.js

@@ -10,82 +10,196 @@
 
 // 获取审批流程
 $('a[data-target="#sp-list" ]').on('click', function () {
-   const data = {
-       order: $(this).attr('s-order'),
-   };
-   postData('/tender/' + tenderId + '/measure/stage/auditors', data, function (result) {
-       const stageAuditor = result.stageAuditor;
-       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> '+ stageAuditor.name +'  <small class="text-muted">'+ stageAuditor.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>');
-           } 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>');
-           }
-       }
-       $('#auditor-list').html(lefthtml.join(''));
+    const data = {
+        order: $(this).attr('s-order'),
+    };
+    postData('/tender/' + tenderId + '/measure/stage/auditors', data, function (result) {
+        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 {
+                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').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>`
+
+                        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]}">${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>`
+                        }
+                        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>`
+                    }
+                    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>`
+            }
+        })
+        $('#audit-list').empty()
+        $('#audit-list').append(historyHTML)
+    })
 
-       // 生成右边列表流程
-       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> '+ stageAuditor.name +' <small class="text-muted">'+ stageAuditor.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 HH:mm:ss') : '') + '</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 || ah[iA].status === auditConst.status.checkNoPre) {
-                           timeHtml = '<small>'+ (ah[iA].end_time ? moment(ah[iA].end_time).format('YYYY-MM-DD HH:mm:ss') : '') +'</small> ';
-                       }
-                       righthtml.push('<span class="' + auditConst.statusClass[ah[iA].status] +'">'+ timeHtml + auditConst.statusString[ah[iA].status] + (ah[iA].status === auditConst.status.checkNo ? ' ' + stageAuditor.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 || ah[iA].status === auditConst.status.checkNoPre) {
-                           timeHtml = '<small>'+ (ah[iA].end_time ? moment(ah[iA].end_time).format('YYYY-MM-DD HH:mm:ss') : '') +'</small> ';
-                       }
-                       righthtml.push('<span class="' + auditConst.statusClass[ah[iA].status] +'">' + timeHtml + auditConst.statusString[ah[iA].status] + (ah[iA].status === auditConst.status.checkNo ? ' ' + stageAuditor.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 || ah[iA].status === auditConst.status.checkNoPre) {
-                           timeHtml = '<small>'+ (ah[iA].end_time ? moment(ah[iA].end_time).format('YYYY-MM-DD HH:mm:ss') : '') +'</small> ';
-                       }
-                       righthtml.push('<span class="' + auditConst.statusClass[ah[iA].status] +'">'+ timeHtml + auditConst.statusString[ah[iA].status] + (ah[iA].status === auditConst.status.checkNo ? ' ' + stageAuditor.name : '') + '</span>');
-                   }
-                   righthtml.push('<p class="card-text">'+ (ah[iA].opinion !== null ? ah[iA].opinion : '') +'</p></div>');
-                   righthtml.push('</li>');
-               }
-           }
-           righthtml.push('</ul></div>');
-       }
-       $('#auditor-list2').html(righthtml.join(''));
-   })
 });
 
+
+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>`;
+};
+
 function checkValidForm() {
     if ($('#add-qi input[name="date"]').val() === '') {
         toastr.error('请选择计量年月');

app/view/advance/audit_btn.ejs

@@ -6,25 +6,19 @@
         <a id="sp-done-btn" href="javascript: void(0);" data-toggle="modal" data-target="#sp-done" class="btn btn-success btn-sm">审批通过</a>
         <a href="#sp-back" data-toggle="modal" data-target="#sp-back" class="btn btn-warning btn-sm">审批退回</a>
     <% } else { %>
-        <a href="#sp-list" data-toggle="modal" data-target="#sp-list" class="btn btn-outline-secondary btn-sm">审批中</a>
+        <a href="#sp-list" data-type="hide" data-toggle="modal" data-target="#sp-list" class="btn btn-outline-secondary btn-sm sp-list-btn">审批中</a>
     <% } %>
 <% } else if (ctx.advance.status === auditConst.status.checked) { %>
-    <a href="#sp-list" data-toggle="modal" data-target="#sp-list" class="btn btn-outline-secondary btn-sm">审批完成</a>
+    <a href="#sp-list" data-type="hide" data-toggle="modal" data-target="#sp-list" class="btn btn-outline-secondary btn-sm sp-list-btn">审批完成</a>
 <% } else if (ctx.advance.status === auditConst.status.checkNo) { %>
-    <a href="#sp-list" data-toggle="modal" data-target="#sp-list" class="btn btn-outline-warning btn-sm text-muted">审批退回</a>
+    <a href="#sp-list" data-type="hide" data-toggle="modal" data-target="#sp-list" class="btn btn-outline-warning btn-sm text-muted sp-list-btn">审批退回</a>
     <% if (ctx.session.sessionUser.accountId === ctx.advance.uid) { %>
-        <a id="sp-list2-btn" href="javascript: void(0);" data-toggle="modal" data-target="#sp-list2" class="btn btn-primary btn-sm">重新上报</a>
+        <a data-type="show" href="#sp-list" data-toggle="modal" data-target="#sp-list" class="btn btn-primary btn-sm sp-list-btn">重新上报</a>
     <% } %>
 <% } else if (ctx.advance.status === auditConst.status.checkNoPre) { %>
-    <a href="#sp-list" data-toggle="modal" data-target="#sp-list" class="btn btn-outline-warning btn-sm text-muted">审批退回</a>
+    <a href="#sp-list" data-type="hide" data-toggle="modal" data-target="#sp-list" class="btn btn-outline-warning btn-sm text-muted sp-list-btn">审批退回</a>
     <% if (ctx.session.sessionUser.accountId === ctx.advance.curAuditor.audit_id) { %>
         <a id="sp-done-btn" href="javascript: void(0);" data-toggle="modal" data-target="#sp-done" class="btn btn-success btn-sm">审批通过</a>
         <a href="#sp-back" data-toggle="modal" data-target="#sp-back" class="btn btn-warning btn-sm">审批退回</a>
     <% } %>
 <% } %>
-<!-- <% if (ctx.advance.auditors !== undefined && ctx.advance.auditors.length !== 0 && ctx.advance.auditors[ctx.advance.auditors.length-1].audit_id === ctx.session.sessionUser.accountId && ctx.advance.status === auditConst.status.checked && ctx.advance.order === ctx.advance.highOrder) { %>
-    <a href="javascript: void(0);" data-toggle="modal" data-target="#sp-down-back" class="btn btn-warning btn-sm">重新审批</a>
-<% } %>
-<% if (ctx.advance.uid === ctx.session.sessionUser.accountId && ctx.advance.order === ctx.advance.highOrder && (ctx.advance.status === auditConst.status.checkNo || ctx.advance.status === auditConst.status.uncheck)) { %>
-    <a href="#del-qi" data-toggle="modal" data-target="#del-qi" class="btn btn-outline-danger btn-sm mt-5">删除本期</a>
-<% } %> -->

app/view/advance/modal.ejs

@@ -44,17 +44,11 @@
         </div>
     </div>
 </div>
-<style>
-    .fold-card {
-        display: none;
-    }
-</style>
 <script>
     // 展开历史审核记录
     $('#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', () => {
@@ -68,22 +62,5 @@
                 auditCard.find('#fold-btn').text('展开历史审核记录')
             })
         }
-    })
-    // $('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-btn').slideDown('swing', () => {
-    //             auditCard.find('#end-target').text($(this).data('idx') + '#')
-    //             auditCard.find('#fold-btn').text('收起历史审核记录')
-    //         })
-    //     } else {
-    //         $(this).data('target', 'show')
-    //         auditCard.find('.fold-btn').slideUp('swing', () => {
-    //             auditCard.find('#end-target').text('1#')
-    //             auditCard.find('#fold-btn').text('展开历史审核记录')
-    //         })
-    //     }
-    // });
+    });
 </script>

app/view/advance/modal_audit.ejs

@@ -649,6 +649,17 @@
 <% } %>
 
 <script>
+    $('.sp-list-btn').click(function () {
+        const type = $(this).data('type')
+        if (type === 'hide') {
+            $('.sp-list-item').hide()
+            $('.modal-title').text('审批流程')
+        } else {
+            $('.sp-list-item').show()
+            $('.modal-title').text('重新上报')
+        }
+    });
+
     function auditCheck(i) {
         const inlineRadio1 = $('#inlineRadio1:checked').val()
         const inlineRadio2 = $('#inlineRadio2:checked').val()

app/view/material/audit_modal.ejs

@@ -718,4 +718,15 @@
             })
         }
     });
+
+    $('.sp-list-btn').click(function () {
+        const type = $(this).data('type')
+        if (type === 'hide') {
+            $('.sp-list-item').hide()
+            $('.modal-title').text('审批流程')
+        } else {
+            $('.sp-list-item').show()
+            $('.modal-title').text('重新上报')
+        }
+    });
 </script>

app/view/material/modal.ejs

@@ -70,67 +70,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>

app/view/measure/stage_modal.ejs

@@ -42,67 +42,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>
@@ -172,13 +115,32 @@
             toastr.error('请选择开始-截止日期');
             return false;
         }
-    }
+    };
     <% } %>
     $('.datepicker-here').datepicker({
         autoClose: true,
     });
     const tenderId = '<%- ctx.tender.id %>';
     const auditConst = JSON.parse('<%- auditConst2 %>');
+
+    $('#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('#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('展开历史审核记录')
+        })
+    }
+});
 </script>
 <script src="/public/js/moment/moment.min.js"></script>
 <script src="/public/js/measure_stage.js"></script>

app/view/revise/modal.ejs

@@ -82,7 +82,7 @@
 
     $(function () {
         // 获取审批流程
-        $('a[data-target="#sp-list" ]').on('click', function () {
+        $('a[data-target="#sp-list"]').on('click', function () {
             const data = {
                 id: $(this).attr('lr-id'),
             };
@@ -270,4 +270,23 @@
         }
         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('#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('展开历史审核记录')
+            })
+        }
+    });
 </script>