skyversation
/
meidu2021


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
							<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/context/mytags.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title>填充排班</title>
    <t:base type="jquery,easyui,tools,DatePicker"></t:base>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .date-box {
            padding: 10px 10px;
        }

        .date-box h2 {
            margin-top: 20px;
            padding-bottom: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        table tr {
            display: -webkit-flex;
            display: flex;
        }

        table tr th,
        table tr td {
            padding: 10px;
        }

        #schedue tr th,
        #schedue tr td {
            flex: 1;
            padding: 10px 0;
            text-align: center;
            border: 1px solid #e1e8f6;
        }

        table tr th {
            background-color: #dddddd;
        }

        table tr td.active {
            background-color: #7087f4;
            color: #ffffff;
        }


        .select-all label {
            padding-left: 4px;
            cursor: pointer;
            margin: 0;
            vertical-align: middle;
        }

        .select-all input {
            display: inline-block;
            vertical-align: middle;
            margin-bottom: 2px;
        }
    </style>
</head>
<body>
<!--排班时间 begin-->
<div class="date-box">
    <p>请选择数据源：</p>
    <div>
        <input readonly type="hidden" id="userId"/>
        <input readonly type="hidden" id="carId"/>
        <div>排班人员：<input type="text" id="userName" readonly onclick="openUserSelect()"/><button style="font-size: 14px;margin-left: 0.5rem;" onclick="openUserSelect()" class="btu_element btu_brand_def">选择</button></div>
        <div style="margin-top: 0.5rem;">排班车辆：<input type="text" id="carName" readonly onclick="openCarSelect()"/><button style="font-size: 14px;margin-left: 0.5rem;" onclick="openCarSelect()" class="btu_element btu_brand_def">选择</button></div>
    </div>
    <p>请选择填充目标：</p>
    <div style="margin: 10px 0;">
        <button style="font-size: 14px;" onclick="checkAll(true)" id="checkAll" class="btu_element btu_brand_def">全选</button>
        <button style="font-size: 14px;" onclick="checkAll(false)" id="unCheckAll" class="btu_element btu_warning_def disabled">取消全选</button>
    </div>
    <table id="schedue"></table>
</div>
<!--排班时间 end-->
</body>
<script type="text/javascript">
    function openUserSelect(){
        $.dialog({
            content: 'url:publicpageController.do?userSelect&checkbox=true',
            zIndex: getzIndex(),
            title: '员工列表',
            lock: true,
            width: '1000px',
            height: '650px',
            opacity: 0.4,
            button: [
                {
                    name: '确定', callback: function () {
                        var iframe = this.iframe.contentWindow;
                        if (iframe.getReason().length > 0) {
                            var strData = eval(iframe.getReason());
                            for (var key in strData[0]) {
                                if (key == "strId") {
                                    $("#userId").val(strData[0][key]);
                                } else if (key == "strName") {
                                    $('#userName').val(strData[0][key]);
                                }
                            }
                        }
                    }, focus: true
                },
                {
                    name: '取消', callback: function () {
                    }
                }
            ]
        }).zindex();
    }
    function openCarSelect(){
        if(${!empty workType && (workType == '16' || workType == '23' || workType == '25')}){
            tip("人员作业[垃圾厢房保洁作业、普扫作业、公厕保洁作业]禁止选择车辆！");
        }else{
            let contentUrl = "url:carController.do?nlist";
            // 判断作业类型是否是巡回保洁作业
            if(${!empty workType && workType == '25'}){
                contentUrl = "url:carController.do?nlist&carType=cleancyclic";
            }
            $.dialog({
                content: 'url:carController.do?nlist',
                zIndex: getzIndex(),
                title: '车辆列表',
                lock: true,
                width: '1000px',
                height: '650px',
                opacity: 0.4,
                button: [
                    {
                        name: '确定', callback: function () {
                            var iframe = this.iframe.contentWindow;
                            if (iframe.getReason().length > 0) {
                                var strData = eval(iframe.getReason());
                                for (var key in strData[0]) {
                                    if (key == "strId") {
                                        $("#carId").val(strData[0][key]);
                                    } else if (key == "strPlate") {
                                        $('#carName').val(strData[0][key]);
                                    }
                                }
                            }
                        }, focus: true
                    },
                    {
                        name: '取消', callback: function () {
                        }
                    }
                ]
            }).zindex();
        }
    }
    //编写自定义JS代码

    /*
     * 获取当天及之后的排班时间
     * @param month:指定的月份
     * @param dayCount:相对于今天的天数，形如：0,1,2.......
     */
    function getDateData(month, dayCount) {
        let yy, mm, dd;
        let d = new Date();
        let initDay = d.getFullYear() + '-' + month + '-01';
        d = new Date(initDay);
        d.setDate(d.getDate() + dayCount);
        yy = d.getFullYear();
        mm = (d.getMonth() + 1) > 9 ? d.getMonth() + 1 : '0' + (d.getMonth() + 1);
        dd = d.getDate() > 9 ? d.getDate() : '0' + d.getDate();
        return yy + "-" + mm + "-" + dd;
    }

    /*
     * 获取日期对应的星期名称
     * @param date:待转换日期,形如：'2018-04-11' 或 '2018-4-11'
     */

    function schedueByMonth(month) {

        let dates = [],
            weekData = [],
            weekDataFinal = [],
            d, m, w, weekNum, lastWeek, lastWeekDiff = [];
        let formatMonth = month > 9 ? month : '0' + month;
        for (let i = 0; i <= 31; i++) {
            d = getDateData(formatMonth, i);
            m = new Date(d).getMonth() + 1;
            if (m === month) {
                dates.push(d)
            }
        }
        w = new Date(dates[0]).getDay();
        if (w > 0) {
            for (let j = 0; j < w - 1; j++) {
                dates.unshift('')
            }
        } else if (w === 0) {
            for (let j = 0; j < 6; j++) {
                dates.unshift('')
            }
        }
        //dates分组:每组7天
        for (let i = 0; i < dates.length; i = i + 7) {
            weekDataFinal.push(dates.slice(i, i + 7));
        }
        //最后一行不够7个，则补齐
        lastWeek = weekDataFinal[weekDataFinal.length - 1];
        if (lastWeek.length < 7) {
            for (let k = 0; k < (7 - lastWeek.length); k++) {
                lastWeekDiff.push('')
            }
            lastWeek = lastWeek.concat(lastWeekDiff)
            weekDataFinal[weekDataFinal.length - 1] = lastWeek;
        }
        pendingWeekData(dates, weekDataFinal)
    }

    function pendingWeekData(dates, weekDataFinal) {
        let weekTitles = '<tr><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期日</td></tr>';
        let scheduDom = '',
            weeksDom = '',
            weekDom = '';
        weekDataFinal.forEach(function (item) {
            item.forEach(function (subItem) {
                let delDay = delWithDay(subItem);


                weekDom += '<td class="select-all" attr-date="' + subItem + '">  <label for="ob-' + delDay + '">' + delDay + '</label>';
                if (delDay) {

                    weekDom += '    <input type="checkbox" name="scheduleDayCheckBox" value="'+(delDay > 9 ? delDay : "0" + delDay)+'" id="ob-' + delDay + '" >    ';
                }
                weekDom += '  </td>';
            })
            weeksDom += '<tr>' + weekDom + '</tr>';
            weekDom = '';
        })
        scheduDom = weekTitles + weeksDom;
        $('#schedue').html(scheduDom);

        //加入业务数据
        // let date = ['2021-12-07', '2021-12-12', '2021-12-31']; //date为接口返回的排班时间,形如：['2019-12-07', '2019-12-12', '2019-12-28']
        // delWithSchedue(dates, date)
    }

    function delWithSchedue(dates, date) {

        let pesoDates = date; //date为接口返回的排班时间
        let index;
        if (pesoDates.length > 0) {
            pesoDates.forEach(function (item, index) {
                index = dates.indexOf(item)
                $('#schedue').find('td').eq(index + 7).addClass('active').click(function () {
                    alert($(this).attr('attr-date'))
                })
            })
        }
    }

    function delWithDay(day) {
        if (day) {
            return new Date(day).getDate()
        } else {
            return ''
        }
    }

    //调用实例
    schedueByMonth(12)
    function getReason(){


        //填充排班

        //获取数据源
        let resArr=[],scheArr=[];
        // $('input[name="resourceCheckBox"]:checked').each(function(){
        //     let checkedVal=$(this).val();
        //
        //     resArr.push(checkedVal)
        // });
        // if(resArr.length == 0){
        //     return ""
        // }
        const userId = $('#userId').val();
        const userName = $('#userName').val();
        const carId = $('#carId').val();
        const carName = $('#carName').val();
        if(userId === '' && userName === ''){
            tip('请选择排班员工！')
        //    update-刘梦祥-2022年8月30日15:19:09（由于排班存在人员作业没有车辆，所以车辆信息不是必选选项）update-刘梦祥-2022年9月7日16:14:41（为了避免用户忘记选择排班车辆，故放开车辆非空判断并添加非人员作业判断条件）
        }else if(carId === '' && carName === '' && ${empty workType || (workType != '16' && workType != '23' && workType != '25')}){
            tip('请选择排班车辆！')
        }else{
            //获取填充目标
            $('input[name="scheduleDayCheckBox"]:checked').each(function(index){
                let checkedVal=$(this).val();
                scheArr.push({
                    targetId:checkedVal,
                    userId:userId,
                    userName:userName,
                    carId:carId,
                    carName:carName
                })
            });
            return JSON.stringify(scheArr);
        }
    }
    //全选和取消全选点击事件
    function checkAll(flag){
        let ids = document.getElementsByName("scheduleDayCheckBox");
        for(let i=0;i<ids.length;i++){
            ids[i].checked=flag;
        }
    }
</script>
<style>
    .select-all{
        user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
    }
</style>