Calculation/app/public/js/payment_list.js

$(function () {
    autoFlashHeight();

    let timer = null;
    let oldSearchVal = null;
    $('body').on('input propertychange', '.gr-search', function(e) {
        oldSearchVal = e.target.value;
        timer && clearTimeout(timer);
        timer = setTimeout(() => {
            const newVal = $(this).val();
            const code = $(this).attr('data-code');
            let html = '';
            if (newVal && newVal === oldSearchVal) {
                accountList.filter(item => item && (item.name.indexOf(newVal) !== -1 || (item.mobile && item.mobile.indexOf(newVal) !== -1))).forEach(item => {
                    html += `<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>`
                });
                $('#' + code + '_dropdownMenu .book-list').empty();
                $('#' + code + '_dropdownMenu .book-list').append(html);
            } else {
                if (!$('#' + code + '_dropdownMenu .acc-btn').length) {
                    accountGroup.forEach((group, idx) => {
                        if (!group) return;
                        html += `<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 => {
                            html += `<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>`;
                        });
                        html += '</div>';
                    });
                    $('#' + code + '_dropdownMenu .book-list').empty();
                    $('#' + code + '_dropdownMenu .book-list').append(html);
                }
            }
        }, 400);
    });

    // 添加审批流程按钮逻辑
    $('body').on('click', '.book-list dt', function () {
        const idx = $(this).find('.acc-btn').attr('data-groupid');
        const type = $(this).find('.acc-btn').attr('data-type');
        if (type === 'hide') {
            $(this).parent().find(`div[data-toggleid="${idx}"]`).show(() => {
                $(this).children().find('i').removeClass('fa-plus-square').addClass('fa-minus-square-o');
                $(this).find('.acc-btn').attr('data-type', 'show');

            })
        } else {
            $(this).parent().find(`div[data-toggleid="${idx}"]`).hide(() => {
                $(this).children().find('i').removeClass('fa-minus-square-o').addClass('fa-plus-square');
                $(this).find('.acc-btn').attr('data-type', 'hide');
            })
        }
        return false;
    });

    // 选中审批人
    $('body').on('click', 'dl dd', function () {
        const id = parseInt($(this).attr('data-id'));
        if (!id) return;
        const this_code = $(this).parents('.dropdown').data('code');
        if (_.findIndex(rpt_audit, { uid: id }) !== -1) {
            toastr.error('该表单角色已存在，请勿重复添加');
            return;
        }
        const user = _.find(accountList, function (item) {
            return item.id === id;
        });
        $('#' + this_code + '_user').html(`<span>${user.name}</span><i role="button" class="fa fa-close text-danger remove-audit stamp-img" data-code="${this_code}"></i>`);
        $(this).parents('.select-audit').hide();
        $('#' + this_code + '_user').show();
        rpt_audit[this_code].uid = id;
        rpt_audit[this_code].name = user.name;
        console.log(rpt_audit);
    });

    // 移除审批人
    $('body').on('click', '.remove-audit', function () {
        const this_code = parseInt($(this).attr('data-code'));
        $('#' + this_code + '_user').html(``);
        $('#' + this_code + '_user').hide();
        $('#' + this_code + '_user').siblings('.select-audit').show();
        rpt_audit[this_code].uid = null;
        delete rpt_audit[this_code].name;
        console.log(rpt_audit);
    });

    // 重新加载角色数据
    $('#set-bdjs').on('show.bs.modal', function () {
        if (old_rpt_audit) {
            for (const [i, r] of old_rpt_audit.entries()) {
                if (r.uid) {
                    $('#' + i + '_user').html(`<span>${r.name}</span><i role="button" class="fa fa-close text-danger remove-audit stamp-img" data-code="${i}"></i>`);
                    $('#' + i + '_user').show();
                    $('#' + i + '_user').siblings('.select-audit').hide();
                } else {
                    $('#' + i + '_user').html(``);
                    $('#' + i + '_user').hide();
                    $('#' + i + '_user').siblings('.select-audit').show();
                }
            }
        }
        rpt_audit = _.cloneDeep(old_rpt_audit);
    });

    // 绑定表单角色
    $('#bind_rpt_audit_btn').click(function () {
        if (!is_first) {
            if (_.findIndex(rpt_audit, { uid: null }) !== -1) {
                toastr.error('请绑定所有表单角色再提交');
                return;
            }
        }
        postData('/payment/' + tenderId + '/list/' + trId + '/save', { type: 'rpt_audit', rpt_audit }, function (result) {
            toastr.success('设置成功');
            old_rpt_audit = _.cloneDeep(rpt_audit);
            if (result.is_first) {
                $('#first_msg').show();
            } else {
                $('#first_msg').hide();
            }
            $('#set-bdjs').modal('hide');
        });
    });

    $('#show-add-btn').click(function () {
        if (_.findIndex(old_rpt_audit, { uid: null }) !== -1) {
            toastr.error('未配置好表单角色无法新建表单');
            $('#set-bdjs').modal('show');
        } else {
            if (emptySign) {
                $('#add-tips').modal('show');
            } else {
                $('#add-catalogue').modal('show');
            }
        }
    });

    $('#add-detail-btn').click(function () {
        if (_.trim($('#add-detail-code').val()) === '') {
            toastr.error('请输入编号');
            return false;
        }
        if ($('#add-detail-time').val() === '') {
            toastr.error('请输入日期');
            return false;
        }
        console.log($('#add-detail-time').val());
        postData('/payment/' + tenderId + '/list/' + trId + '/save', { type: 'add-detail', code: _.trim($('#add-detail-code').val()), s_time: $('#add-detail-time').val() }, function (result) {
            if (result.type) {
                window.location.href = '/payment/' + tenderId + '/safe/' + result.id + '/bills';
            } else {
                window.location.href = '/payment/' + tenderId + '/detail/' + result.id;
            }
        });
    });

    // 获取审批流程
    $('a[data-target="#sp-list" ]').on('click', function () {
        const data = {
            order: $(this).attr('m-order'),
        };
        postData('/payment/' + tenderId + '/list/'+ trId + '/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)
            const leftAuditors = auditors;
            auditHistory.forEach((auditors, idx) => {
                if(idx === auditHistory.length - 1 && auditHistory.length !== 1) {
                    historyHTML += `<div class="text-right"><a href="javascript: void(0);" id="fold-btn" data-target="show"
                    >展开历史审批流程</a></div>`
                }
                historyHTML += `<div class="${idx < auditHistory.length - 1 ? 'fold-card' : ''}">
                <div class="text-center text-muted">${idx + 1}#</div>
                <ul class="timeline-list list-unstyled mt-2">`
                auditors.forEach((auditor, index) => {
                    if (index === 0) {
                        historyHTML += `<li class="timeline-list-item pb-2">
                            <div class="timeline-item-date">
                                ${formatDate(auditor.begin_time)}
                            </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.find(item => item.sort === auditor.sort-1).name : ''}
                                        </span>
                                    </p>
                                    <p class="text-muted mb-0">${auditor.role}</p>
                                </div>
                            </div>`

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

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

    class srObject {
        constructor() {
            const self = this;
            this.selectTree = null;
            const srSpreadSetting = {
                cols: [
                    {title: '选择', field: 'selected', hAlign: 1, width: 40, formatter: '@', cellType: 'checkbox'},
                    {title: '名称', field: 'name', hAlign: 0, width: 300, formatter: '@', cellType: 'tree'},
                ],
                emptyRows: 0,
                headRows: 1,
                headRowHeight: [32],
                defaultRowHeight: 21,
                headerFont: '12px 微软雅黑',
                font: '12px 微软雅黑',
                headColWidth: [30],
                selectedBackColor: '#fffacd',
                readOnly: true,
            };
            this.spread = SpreadJsObj.createNewSpread($('#sr-spread')[0]);
            this.sheet = this.spread.getActiveSheet();
            SpreadJsObj.initSheet(this.sheet, srSpreadSetting);

            this.spread.bind(spreadNS.Events.ButtonClicked, function (e, info) {
                if (!info.sheet.zh_setting) return;

                const col = info.sheet.zh_setting.cols[info.col];
                if (col.field !== 'selected') return;

                const node = SpreadJsObj.getSelectObject(info.sheet);
                self.selectNode(node, !node[col.field]);
                SpreadJsObj.reloadColData(info.sheet, 0);
            });

            $('#sync-attr-ok').click(() => {
                const select = self.getSelects();
                if (select.length === 0) return;
                if (!select[0].measure_type) {
                    toastr.warning(`标段[${select[0].name}]未填写任何内容，请选择其他标段`);
                    return;
                }

                postData(`/tender/${select[0].tid}/load`, { filter: 'tender_info' }, function (result) {
                    property.deal_info = result.tender_info.deal_info;
                    property.construction_unit = result.tender_info.construction_unit;
                    property.tech_param = result.tender_info.tech_param;
                    loadCommonProperty(property);
                    $('#sync-attr').modal('hide');
                });
            });
        }
        selectNode(node, select) {
            if (node.children && node.children.length > 0) return;
            if (select) {
                this.selectTree.nodes.forEach(x => { x.selected = false });
            }
            node.selected = select;
        }
        getSelects() {
            const select = [];
            for (const n of this.selectTree.nodes) {
                if ((!n.children || n.children.length === 0) && n.selected) select.push(n);
            }
            return select;
        }
        init() {
            const self = this;
            postData(`/list/load2`, { type: 'all'}, result => {
                self.selectTree = Tender2Tree.convert(category, result.tenders);
                SpreadJsObj.loadSheetData(this.sheet, SpreadJsObj.DataType.Tree, this.selectTree);
            });
        }
    }
    let srSelect;
    $('#sync-attr').on('shown.bs.modal', () => {
        if (!srSelect) srSelect = new srObject();
        srSelect.init();
    });

    $('#bd-attr').on('show.bs.modal', function () {
        loadCommonProperty();
    });
});

// 标段属性相关
function loadCommonProperty () {
    // 合同信息
    $('#build-name').val(property.deal_info.buildName);
    $('#deal-code').val(property.deal_info.dealCode);
    $('#deal-name').val(property.deal_info.dealName);
    $('#project-type').val(property.deal_info.projectType);
    $('#deal-type').val(property.deal_info.dealType);
    $('#final-code').val(property.deal_info.finalCode);

    // 参建单位
    // 建设单位
    $('#build-company').val(property.construction_unit.build.company);
    $('#build-corporation').val(property.construction_unit.build.corporation);
    $('#build-date').val(property.construction_unit.build.date);
    // 承包单位1
    $('#contract1-company').val(property.construction_unit.contract1.company);
    $('#contract1-corporation').val(property.construction_unit.contract1.corporation);
    $('#contract1-date').val(property.construction_unit.contract1.date);
    $('#contract1-management').val(property.construction_unit.contract1.management);
    // 承包单位2
    $('#contract2-company').val(property.construction_unit.contract2.company);
    $('#contract2-corporation').val(property.construction_unit.contract2.corporation);
    $('#contract2-date').val(property.construction_unit.contract2.date);
    // 监理单位1
    $('#supervision1-company').val(property.construction_unit.supervision1.company);
    $('#supervision1-corporation').val(property.construction_unit.supervision1.corporation);
    $('#supervision1-date').val(property.construction_unit.supervision1.date);
    // 监理单位2
    $('#supervision2-company').val(property.construction_unit.supervision2.company);
    $('#supervision2-corporation').val(property.construction_unit.supervision2.corporation);
    $('#supervision2-date').val(property.construction_unit.supervision2.date);
    // 检测单位
    $('#detect-company').val(property.construction_unit.detect.company);
    $('#detect-corporation').val(property.construction_unit.detect.corporation);
    $('#detect-date').val(property.construction_unit.detect.date);

    // 技术参数
    $('#load-level').find("option:contains('" + property.tech_param.loadLevel + "')").attr("selected",true);
    $('#length').val(property.tech_param.loadLength);
    $('#start-peg').val(property.tech_param.startPeg);
    $('#end-peg').val(property.tech_param.endPeg);
    $('#lane-count').val(property.tech_param.laneCount);
    $('#deal-period').val(property.tech_param.dealPeriod);
    $('#start-date').val(property.tech_param.startDate);
    $('#plan-end-date').val(property.tech_param.planEndDate);
    $('#real-start-date').val(property.tech_param.realStartDate);
    $('#real-end-date').val(property.tech_param.realEndDate);
    $('#structure-scale').val(property.tech_param.structureScale);
}

function postAttr () {
    const info = {
        deal_info: {
            buildName: $('#build-name').val(),
            dealCode: $('#deal-code').val(),
            dealName: $('#deal-name').val(),
            projectType: $('#project-type').val(),
            dealType: $('#deal-type').val(),
            finalCode: $('#final-code').val(),
        },
        construction_unit: {
            build: {
                company: $('#build-company').val(),
                corporation: $('#build-corporation').val(),
                date: $('#build-date').val(),
            },
            contract1: {
                company: $('#contract1-company').val(),
                corporation: $('#contract1-corporation').val(),
                date: $('#contract1-date').val(),
                management: $('#contract1-management').val(),
            },
            contract2: {
                company: $('#contract2-company').val(),
                corporation: $('#contract2-corporation').val(),
                date: $('#contract2-date').val(),
            },
            supervision1: {
                company: $('#supervision1-company').val(),
                corporation: $('#supervision1-corporation').val(),
                date: $('#supervision1-date').val(),
            },
            supervision2: {
                company: $('#supervision2-company').val(),
                corporation: $('#supervision2-corporation').val(),
                date: $('#supervision2-date').val(),
            },
            detect: {
                company: $('#detect-company').val(),
                corporation: $('#detect-corporation').val(),
                date: $('#detect-date').val(),
            },
        },
        tech_param: {
            loadLevel: $('#load-level').find("option:selected").text(),
            loadLength: _.toNumber($('#length').val()),
            startPeg: $('#start-peg').val(),
            endPeg: $('#end-peg').val(),
            laneCount: _.toNumber($('#lane-count').val()),
            dealPeriod: $('#deal-period').val(),
            startDate: $('#start-date').val(),
            planEndDate: $('#plan-end-date').val(),
            realStartDate: $('#real-start-date').val(),
            realEndDate: $('#real-end-date').val(),
            structureScale: $('#structure-scale').val(),
        },
    };
    const tenderId = window.location.pathname.split('/')[2];
    postData('/payment/info/save', { type: 'info', postData: { id: tenderId, info} }, function (data) {
        property.deal_info = info.deal_info;
        property.construction_unit = info.construction_unit;
        property.tech_param = info.tech_param;
        $('#bd-attr').modal('hide');
    });
}