task.search.js

// 任务清单条件查询弹窗

// 获取Area
var sid = getQueryVariable('sid');

function getTaskArea() {
    var obj = {};
    awsui.ajax.request({
        type: "POST",
        url: "./jd",
        async: false,
        dataType: 'json',
        data: {
            cmd: "com.awspaas.user.apps.sop_getTaskArea",
            sid: sid
        },
        ok: function(r) {
            //            console.log(r)
            var areaData = r.data.areaList;
            var areaHtml = '';
            for(var i = 0; i < areaData.length; i++) {
                areaHtml += `
                    <div style="display: flex;align-items: center;min-width: 30%;max-width: 65%;margin: 0 5px 10px 0;">
                        <input id="${areaData[i].AREA}" class="awsui-checkbox areaItem" name="areaCheckbox" value="${areaData[i].AREA}" type="checkbox"/>
                        <label class="awsui-checkbox-label" for="${areaData[i].AREA}">${areaData[i].AREA}</label>
                    </div>
                `;
            }
            obj.areaHtml = areaHtml;
            obj.areaLen = areaData.length;
        },
        err: function(e) {
            console.log(e)
        }
    });
    return obj
}
// 通过Area获取Bay
function getTaskBay(area, item) { // area|Array：选中area
    var obj = {};
    awsui.ajax.request({
        type: "POST",
        url: "./jd",
        async: false,
        dataType: 'json',
        data: {
            cmd: "com.awspaas.user.apps.sop_getTaskBay",
            sid: sid,
            area: area.join(',')
        },
        ok: function(r) {
            var bayData = r.data;
            //            console.log(area, bayData)

            // 选中区域
            var bayCheckAllBoxHtml = '';
            for(var i = 0; i < area.length; i++) {
                var bayItemList = bayData[area[i]];
                bayHtml = getItemBayHtml(area[i], bayItemList);
                bayCheckAllBoxHtml += `
                    <div id="bay_${area[i]}_tit" class="bayTitleBox" style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
                        <div style="font-size: 16px;">${area[i]}:</div>
                        <div style="display: flex;">
                            <input id="bay_${area[i]}_checkboxAll" area=${area[i]} class="awsui-checkbox bayCheckAll" name="bayCheckboxAll" value="bay_${area[i]}_checkboxAll" type="checkbox">
                            <label class="awsui-checkbox-label" for="bay_${area[i]}_checkboxAll" style="font-size: 16px;">All</label>
                        </div>
                    </div>
                    <div id="bay_${area[i]}" class="bayCheckAllBox" style="width: 100%;display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 10px 0 0;margin-bottom: 10px;border-bottom: 1px solid #dbd1d1;">
                    ${bayHtml}
                    </div>
                `
            }
            // 渲染选中bay，渲染前清除之前的dom
            var baySelNode = document.getElementById('bay_' + area);
            $(baySelNode).remove();
            $('.bayBox').append(bayCheckAllBoxHtml);

            handleBayBindEvent(item);
            handleBayCheckAllEvent(item);

            // 获取area中选中的bay
            var searchParams = JSON.parse(localStorage.getItem('searchParams'));
            if(searchParams) {
                var bay = searchParams.bay ? searchParams.bay : [];
                var bayAllArr = searchParams.bayAllArr ? searchParams.bayAllArr : [];
                for(var i = 0; i < bay.length; i++) {
                    var bayByArea = bay[i].key; // 所属区域
                    var selBay = bay[i].bayArr; // 选中的bay
                    renderSelBay(bayByArea, selBay);
                }

                // 渲染bayCkeckAll
                for(var i = 0; i < bayAllArr.length; i++) {
                    var selNode = document.getElementById(bayAllArr[i]); // 避免id中包含特殊字符的情况
                    $(selNode).attr('checked', true);
                }
            }

            obj.bayHtml = bayCheckAllBoxHtml;
            obj.bayLen = bayData.length;
        },
        err: function(e) {
            console.log(e)
        }
    });
    return obj;
}
// 通过area匹配其bay数据
function getItemBayHtml(area, bayItemList) { //bayItemList:单个area的bay数据
    var html = '';
    for(var i = 0; i < bayItemList.length; i++) {
        html += `
                    <div class="bayItemBox" style="display: flex;align-items: center;width: 25%;height: 20px;margin-bottom: 10px;">
                        <input id="${area}_${bayItemList[i].bay}" area="${area}" class="awsui-checkbox bayItem" name="bayCheckbox" value="${bayItemList[i].bay}" type="checkbox"/>
                        <label class="awsui-checkbox-label" for="${area}_${bayItemList[i].bay}">${bayItemList[i].bay}</label>
                    </div>
                `
    }
    return html;
}

// 渲染选中的bay的 是否选中状态
function renderSelBay(bayByArea, selBay) {
    for(var i = 0; i < selBay.length; i++) {
        var selNode = document.getElementById(bayByArea + '_' + selBay[i]); // 避免id中包含特殊字符的情况
        $(selNode).attr('checked', true);
    }
}

// 给bay项添加点击事件
//var bayParams = [];

function handleBayBindEvent(item) { // item：popnode   selArea: 当前点击的area
    //    console.log('绑定事件')
    //    debugger;
    // 生成bayHtml后给bay项绑定点击事件
    // bayItem单击事件
    $(item).find('.bayItem').on("click", function(e) {
        // 当前area全选/反选 联动
        var bayId = e.target.id;
        var baySelNode = document.getElementById(bayId);
        // bay所属区域
        var bayArea = $(baySelNode).attr('area');
        var bayBoxNode = document.getElementById('bay_' + bayArea);

        // 选项个数
        var allLen = $(bayBoxNode).find('.bayItem').length
        // 选中个数
        var len = $(bayBoxNode).find("input[name='bayCheckbox']:checked").length

        var bayAllNode = document.getElementById('bay_' + bayArea + '_checkboxAll');
        if(len == allLen) {
            $(bayAllNode).check("check");
        } else {
            $(bayAllNode).check("uncheck");
        }

    });
}
// 给bay checkBoxAll 添加点击事件
function handleBayCheckAllEvent(item) {
    $(item).find('.bayCheckAll').on("click", function(e) {
        //        console.log(666,e.target)
        var bayCheckAllId = e.target.id;
        var bayCheckAllNode = document.getElementById(bayCheckAllId);
        var area = $(bayCheckAllNode).attr('area');
        var selNode = document.getElementById('bay_' + area);

        if(e.target.checked) {
            // 全选
            $(selNode).find('.bayItem').iCheck('check');
        } else {
            // 反选
            $(selNode).find('.bayItem').iCheck('uncheck');
        }
    });
}
// 辅助函数: 将选中的bay添加到其所属area中
// bayArea:bay的所属area   areaCheckBayList：该area中所选中的bay  bayParams:去重后的bayParams
//function updateBayParams(bayArea, areaCheckBayList, bayParams) {
//    console.log(bayArea)
//    console.log(areaCheckBayList)
//    console.log(bayParams)
//
//    var bayStr = '';
//    var bayArr = [];
//    for(var i = 0; i < areaCheckBayList.length; i++) {
//        bayStr += "'" + areaCheckBayList[i] + "'" + ","
//    }
//    bayStr = bayStr.slice(0, -1);
//    for(var i = 0; i < bayParams.length; i++) {
//        if(bayParams[i].key == bayArea) {
//            bayParams[i][bayArea] = bayStr;
//            bayParams[i].bayArr = areaCheckBayList;
//        }
//    }
//    return bayParams;
//}

// 获取所有选中的area
function getCheckAreaList() {
    var areaCheckArr = [];
    $(":checkbox[name='areaCheckbox']:checked").each(function() {
        areaCheckArr.push($(this).val());
    });
    return areaCheckArr;
}
// 获取某个area中的所有选中bay值
function getCheckBayByAreaItem(area) {
    var areaCheckBayArr = []; // ['28', '22', '40']
    var node = document.getElementById('bay_' + area); // 避免id中包含特殊字符的情况
    $(node).find(":checkbox[name='bayCheckbox']:checked").each(function() {
        areaCheckBayArr.push($(this).val());
    });
    return areaCheckBayArr;
}
// 获取bay全选/反选 checkAll
function getBayCheckAllList() {
    var bayCheckAllArr = [];
    $(":checkbox[name='bayCheckboxAll']:checked").each(function() {
        bayCheckAllArr.push($(this).val());
    });
    return bayCheckAllArr;
}

var areaObj = getTaskArea();
$(function() {
    // 定义默认选择状态: 默认打开（只选中上一次存储的选中area和bay）
    localStorage.setItem('checkAllStatus', 'defOpen');
    $(".taskSearchBox").popBox({ // #taskSearch   .taskSearchBox
        //        pId: 'taskSearchPop',
        title: '',
        width: 260,
        height: 'auto',
        delay: 0,
        content: `
            <div class="layui-form-item" style="margin-bottom: 10px;">
                <div class="layui-input-group">
                      <div class="layui-input-prefix" style="width: 60px;padding: 0 10px 0 0;">LOT：</div>
                      <input id="lot" type="text" placeholder="" class="layui-input" style="height: 28px;border-color: #dbd1d1;" autocomplete="off">
                </div>
              </div>
              <div class="layui-form-item" style="margin-bottom: 10px;">
                   <div class="layui-input-group">
                      <div class="layui-input-prefix" style="width: 60px;padding: 0 10px 0 0;">EQP：</div>
                      <input id="eqp" type="text" placeholder="" class="layui-input" style="height: 28px;border-color: #dbd1d1;" autocomplete="off">
                </div>
              </div>
  
            <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 10px;">
                <div style="font-size: 16px;">Area</div>
                <div style="display: flex;">
                    <input id="areaCheckboxAll" class="awsui-checkbox" name="searchCheckboxAll" value="" type="checkbox"/>
                    <label class="awsui-checkbox-label" for="areaCheckboxAll" style="font-size: 16px;">All</label>
                </div>
            </div>
                
            <div class="areaCheckAllBox" style="display: flex;justify-content: flex-start;flex-wrap: wrap;border-top: 1px solid #dbd1d1;padding: 10px 0;border-bottom: 1px solid #dbd1d1;">
                ${areaObj.areaHtml}
            </div>

            <div class="bayBox" style="display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 10px 0;max-height: 390px;overflow-y: auto;"></div>

            <div class="dateBox">
                <div style="display: flex;justify-content: flex-start;align-items: center;">
                <div>기간：</div>
                    <div style="width: 35%;">
                        <input id="beginDate" style="padding-left: 6px;" type="text" placeholder="请选择日期" value="" class="awsui-datepicker awsui-input">
                    </div>
                    <div>&nbsp;&nbsp;~&nbsp;&nbsp;</div>
                    <div style="width: 35%;">
                        <input id="endDate" style="padding-left: 6px;" type="text" placeholder="请选择日期" value="" class="awsui-datepicker awsui-input">
                    </div>
                </div>
            </div>
            
            <div style="display: flex;justify-content: center;margin-top: 20px;">
                <button type="button" id="taskSearchBtn" class="awsui-btn awsui-btn-blue awsui-btn-sm">Confirm</button>
                <button type="button" id="taskResetBtn" class="awsui-btn awsui-btn-sm">Cancel</button>
            </div>`,
        position: 'bottom',
        callback: function(item) {
            //            $('.awsui-popBox').css({
            //                'max-height': '610px',
            //            })
            // 判断查询 待办 or 完成 状态的清单
            var taskListStatus = localStorage.getItem('taskListStatus');
            // 待办任务时：隐藏筛选条件日期选择框
            var dateIsShow = taskListStatus == 'todoOrInit' ? 'none' : 'block';
            $('.dateBox').css({
                'display': dateIsShow
            })

            // 缓存中获取选择区域、开始/结束日期
            var searchParams = JSON.parse(localStorage.getItem('searchParams'));
            var area = [];
            var bay = []; // 包含每个area及其选中bay的值
            var endDate = getNowDate();
            var beginDate = getPreMonth(endDate);
            var lot = '';
            var eqp = '';
            if(searchParams) {
                lot = searchParams.lot;
                eqp = searchParams.eqp;
                area = searchParams.area;
                bay = searchParams.bay;
                beginDate = searchParams.beginDate;
                endDate = searchParams.endDate;
            } else {
                // 否则日期默认为：前一个月日期 ~ 当前日期
                endDate = getNowDate(); // 当前日期
                beginDate = getPreMonth(endDate); // 前一个月日期
            }
            $('#lot').val(lot);
            $('#eqp').val(eqp);
            $("#beginDate").datepicker({
                beginDate: beginDate
            });
            $("#endDate").datepicker({
                endDate: endDate
            });
            $('#beginDate').val(beginDate);
            $('#endDate').val(endDate);

            // 渲染缓存中的选中区域及区域下的Bay
            if(area.length > 0) {
                for(var i = 0; i < area.length; i++) {
                    // 判断是否选中
                    var selNode = document.getElementById(area[i]); // 避免id中包含特殊字符的情况
                    $(selNode).attr('checked', true);
                }
                // 缓存中选中的area == 所有area时，设置全选
                if(area.length == areaObj.areaLen) {
                    $('#areaCheckboxAll').attr('checked', true);
                }

                // 通过选中区域获取各个区域bay
                getTaskBay(area, item);
            }

            // 全选/反选
            var $checkbox = $(".areaCheckAllBox").find(".awsui-checkbox");
            $(item).find('#areaCheckboxAll').click(function(event) {
                // 全选选中
                if(event.target.checked) {
                    // 定义全选/反选时选择状态
                    localStorage.setItem('checkAllStatus', 'checkAll');
                    $checkbox.iCheck('check');
                    // 选中时获取该area的bay
                    var areaCheckArr = getCheckAreaList();

                    var bayObj = getTaskBay(areaCheckArr, item);
                    // bayHtml 每个area的bay html
                    // 需要重新赋值
                    $('.bayBox').empty();
                    $('.bayBox').append(bayObj.bayHtml);
                    $('.bayCheckAllBox').find('.bayItem').iCheck('check');
                    handleBayBindEvent(item);
                    handleBayCheckAllEvent(item);

                    $('.bayCheckAll').iCheck('check');
                } else { // 反选
                    // 定义全选/反选时选择状态
                    localStorage.setItem('checkAllStatus', 'unCheckALl');
                    // 取消全选移除所有bay
                    $checkbox.iCheck('uncheck');
                    $('.bayBox').empty();
                    $('.bayCheckAll').iCheck('uncheck');
                }
            })

            // 点击area
            $(item).find('.areaItem').on("click", function(e) {
                // 选中area的值  areaVal和areaId 相同
                var areaVal = e.target.value;
                var areaId = e.target.id;
                // 判断是否选中
                var selNode = document.getElementById(areaId); // 避免id中包含特殊字符的情况
                var isSel = $(selNode).is(":checked");
                // 清除该area的title，避免再次生成时重复出现
                var baySelTitNode = document.getElementById('bay_' + areaId + '_tit');
                $(baySelTitNode).remove();
                // 清除该area下的bayBox
                var bayBoxNode = document.getElementById('bay_' + areaId);
                if(bayBoxNode) {
                    $(bayBoxNode).remove();
                }
                if(isSel) {
                    // 选中时获取该area的bay
                    var bayObj = getTaskBay([areaVal], item);
                    // 选中该area下所有bay
                    var bay_checkboxAll = document.getElementById('bay_' + areaId + "_checkboxAll");
                    $(bay_checkboxAll).iCheck('check');
                    var bayCheckBoxNode = document.getElementById('bay_' + areaId);
                    $(bayCheckBoxNode).find('.bayItem').iCheck('check');

                    handleBayBindEvent(item);
                    handleBayCheckAllEvent(item);
                } else {
                    // 取消选中该area下所有bay
                    $(bayCheckBoxNode).find('.bayItem').iCheck('uncheck');
                }

                // 选项个数
                var allLen = $("input[name='areaCheckbox']").length;
                // 选中个数
                var len = $("input[name='areaCheckbox']:checked").length;
                if(len == allLen) {
                    $("#areaCheckboxAll").check("check");
                } else {
                    $("#areaCheckboxAll").check("uncheck");
                }
            });

            // 查询 事件
            $(item).find("#taskSearchBtn").on("click", function(e) {
                // 获取选中 area
                var areaCheckArr = getCheckAreaList();
                // 获取area下选中的bay
                var bayCheckArr = [];
                // 获取bayCheckBoxAll状态
                var getBayCheckAllArr = getBayCheckAllList();

                var obj = {};
                for(var i = 0; i < areaCheckArr.length; i++) {
                    var bayArr = getCheckBayByAreaItem(areaCheckArr[i]);
                    obj[areaCheckArr[i]] = arrToStr(bayArr);
                    bayCheckArr.push({
                        key: areaCheckArr[i],
                        [areaCheckArr[i]]: arrToStr(bayArr),
                        bayArr: bayArr
                    })
                }

                // 存储当前选中区域、选中bay、前一个月日期、当前日期
                var searchObj = {
                    lot: $('#lot').val(),
                    eqp: $('#eqp').val(),
                    area: areaCheckArr,
                    bay: bayCheckArr,
                    bayAllArr: getBayCheckAllArr,
                    beginDate: $('#beginDate').val(),
                    endDate: $('#endDate').val()
                }
                localStorage.setItem('searchParams', JSON.stringify(searchObj));
                // 查询任务清单：click（点击标识） areaCheckArr（区域）beginDate（开始日期）endDate（结束日期）
                // 判断查询 待办 or 完成 状态的清单
                var taskListStatus = localStorage.getItem('taskListStatus');
                if(taskListStatus == 'todoOrInit') {
                    getTodoList('click');
                } else if(taskListStatus == 'complete') {
                    getCompleteTaskList('filter');
                }
                // 关闭搜索框
                $('.awsui-popBox').removeClass('in').hide();
            });
            // 取消 事件
            $(item).find("#taskResetBtn").on("click", function(e) {
                $('.awsui-popBox').removeClass('in').hide();
            });
        }
    });
})