記一次需求 費勁

一個思路

需求是這樣的：以下圖 （選擇加班日期，自動填充簽到和簽退時間）

這是一個oa流程只能寫js腳本去添加，剛開始想的是監測 input的 change事件，可是 change事件只能獲取到 手動改變的， js改變值是監測不到的 （不可行）

當點擊選擇日期按鈕的時候，定時器開始監測選擇的值，而後去調一個接口取兩個時間的值（大體思路就是這樣，其中細節（事件兼容性，判斷有沒有選擇日期）見代碼 純純的js）

function contains(arr, obj) {
   

    if(arr[obj]!='undefined')
        return false;
    return true;
}



function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {

elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent) {

var r = elm.attachEvent('on' + evType, fn);
return r;
}
}

var listenList = new Array();
document.ready= function (event) {
    tdControlClick(event);
  var addButton = document.getElementsByClassName("addbtn_p")[0];

addEvent(addButton,'click',function(event){
    tdControlClick(event)
})

function tdControlClick(event){
    var dateControls = document.getElementsByClassName("calendar");
    if (dateControls != "undefined") {
       for (var index = 0; index < dateControls.length; index++) {
           var element = dateControls[index];

           var id = element.getAttribute("id");
           if (!contains(listenList, id)) {
               listenList[id] = {
                   id: id,
                   timer: 0,
                   date: ''
               };
               clearInterval(listenList[id].timer);

                addEvent(element,'click',function(event){
                   var event = event || window.event;
               
                   var target = event.toElement || event.srcElement;
                   var objID = event.target.id;

                   var inter = setInterval(function () {
                      dateControlClick(objID);
                   }, 1000);
                   listenList[objID].timer = inter;

               })
           }
        }
    }
}
function dateControlClick(id)
{

    var fieldid = id.split('_')[0];
    var rowNo = id.split('_')[1].replace('browser', '');

    var dateVal = document.getElementById(fieldid + "_" + rowNo + "span").innerText;

    if (dateVal != listenList[id].date) {
        listenList[id].date = dateVal;
        var curdate = listenList[id].date.replace(/\-/,"").replace(/\-/,"");

        ajax_methods(curdate,rowNo);

        clearInterval(listenList[id].timer);
        listenList[id].timer = 0;
    }
}

function ajax_methods(date,rowNo) {
    var xhr = new XMLHttpRequest();
    var personcode =document.getElementById('field12003').value;

    xhr.open('post',
        'https://zqs.reignwood.com/bi-web/index/extract?indexSetCodes=INDEX171019100002&refresh=1&caller=WorkAttendFromOA'
    );
    xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8");
    var data = {
        orgcode: "1",
        curdate: date,
        type: 3,
        personcode: personcode,
        personPage: "1",
        caller:'WorkAttendFromOA'
    }
    xhr.send(JSON.stringify(data));
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var res = JSON.parse(xhr.responseText);

            setCheckTime(res.data,rowNo);
        }
    };
}

function setCheckTime(data,rowNo)
{
    document.getElementById('field19209_'+rowNo).value=data.oneday.workStart.toString().substring(0,5);
    document.getElementById('field19209_'+rowNo + "span").innerText=data.oneday.workStart.toString().substring(0,5);
    document.getElementById('field19210_'+rowNo).value=data.oneday.workEnd.toString().substring(0,5);
    document.getElementById('field19210_'+rowNo + "span").innerText=data.oneday.workEnd.toString().substring(0,5);
}


  }