zjugis_OA/zjugis-business/src/main/resources/templates/Travel/js/index.js

(function () {
    var addDataThat = null;
    let viewState = z.ui.comm.getUrlParam("_o");
    let read = z.ui.comm.getUrlParam("read");
    window.onload = function (ex) {
        let timeObject = document.querySelector('#timeObject')
        let arrays = JSON.parse(timeObject.value)
        var lists = []
        var trFragment = document.createDocumentFragment();
        addDataThat = $("#addData")
        $("#addData").click(function () {
            addDataThat.attr('disabled', "true");
            var dataObj = {}
            trFragment.appendChild(generateTableTrHtml(lists.length))
            $(".tbody").append(trFragment)
            let listsLength = lists.length
            if (arrays.length > 0) {
                listsLength = arrays.length + lists.length
            }
            timeSelector({
                ele: ".startTimeRange" + listsLength,
                name: "TravelTimeDO[" + listsLength + "]$startTimeRange",
                callback: function (val) {
                    let startDate = z.ui.laydate("[name='TravelTimeDO[" + listsLength + "]$startTime']").getValue();
                    if (!startDate) {
                        $("[name='TravelTimeDO[" + listsLength + "]$startTimeRange']").find("input").val("");
                        z.ui.alertWarning("请先选择起始日期!")
                        return;
                    }
                }
            })
            timeSelector({
                ele: ".endTimeRange" + listsLength,
                name: "TravelTimeDO[" + listsLength + "]$endTimeRange",
                callback: function (val) {
                    let endDate = z.ui.laydate("[name='TravelTimeDO[" + listsLength + "]$endTime']").getValue();
                    if (!endDate) {
                        $("[name='TravelTimeDO[" + listsLength + "]$endTimeRange']").find("input").val("");
                        z.ui.alertWarning("请先选择截止日期!")
                        return;
                    }
                    let endTime = Date.parse(endDate + " " + val);
                    if (endTime <= timeObj.startTime) {
                        z.ui.alertWarning("截止时间必须大于起始时间!")
                        $("[name='TravelTimeDO[" + listsLength + "]$endTimeRange']").find("input").val("");
                        z.ui.laydate("[name='TravelTimeDO[" + listsLength + "]$endTime']").setValue('');
                        return;
                    }
                }
            })
            $("#editBtn_" + listsLength).click(function () {
                const span = $(this).find("span");
                const html = span.html();
                if (html === '编辑') {
                    span.html('保存')
                    detailWrite(listsLength);
                    addDataThat.attr('disabled', "true");
                    $("#qjsj_" + listsLength).removeClass("form-table-disable")
                    return;
                }
                if (html === '保存') {
                    span.html('编辑')
                    detailReadonly(listsLength, false)
                    addDataThat.removeAttr('disabled')
                    $("#qjsj_" + listsLength).addClass("form-table-disable")
                    return;
                }
            })
            $("#delBtn_" + listsLength).click(function () {
                var index = this.id.substring(this.id.indexOf("_") + 1)
                z.ui.confirm("compid").init({
                    content: "确定删除吗？",
                    onConfirm: function () {
                        var element = document.getElementById("qjsj_" + index);
                        element.remove();
                        buildQjsjSeq();
                        addDataThat.removeAttr('disabled')
                    },
                    onCancel: function () {

                    }
                })

            })
            z.ui.date("[name='TravelTimeDO[" + listsLength + "]$startTime']").init()
            z.ui.date("[name='TravelTimeDO[" + listsLength + "]$endTime']").init()
            buildQjsjSeq();
            lists.push(dataObj)
        })
        initPartners();
        $("#selectProject").click(function () {
            selectProject(null, setProject);
        })
        bindEvents();

        //根据返回的json对象渲染出差时间信息

        let tbodyQjsq = document.querySelector('.tbodyQjsq')
        let html = ""
        if (arrays.length > 0) {
            for (let i = 0; i < arrays.length; i++) {
                let startDate = moment(arrays[i].startTime).format('YYYY-MM-DD')
                let endDate = moment(arrays[i].endTime).format('YYYY-MM-DD')
                html += '<tr class="qjsjClass" id="qjsj_' + i + '" style="background:#fff; height: 63px;"> <td name="qjsj_seq">' + (i + 1) + '</td>'
                    + '<td>'
                    + '<div class="form-flex">'
                    + '<div class="form-item" style="width: 50%;margin-right: 5px;">'
                    + '<div class="z-comp-date" name="TravelTimeDO[' + i + ']$startTime">'
                    + '<input type="text" value="' + startDate + '" title="' + startDate + '">'
                    + '</div>'
                    + '</div>'
                    + '<div style="width: 50%;margin-left: 5px;" class="dateTimeRange startTimeRange' + (i) + '">'
                    + '</div>'
                    + '<span class="nbsp"> - </span>'
                    + '</div>'
                    + '</td>'
                    + '<td>'
                    + '<div class="form-flex">'
                    + '<div class="form-item" style="width: 50%;margin-right: 5px;">'
                    + '<div class="z-comp-date" name="TravelTimeDO[' + i + ']$endTime">'
                    + '<input type="text" value="' + endDate + '" title="' + endDate + '">'
                    + '</div>'
                    + '</div>'
                    + '<div style="width: 50%;margin-left: 5px;" class="dateTimeRange endTimeRange' + (i) + '">'
                    + '</div>'
                    + '</div>'
                    + '</td>'
                    + '<td>'
                    + '<div class="form-item">'
                    + '<div class="z-comp-input" name="TravelTimeDO[0]$bz1">'
                    + '<input type="text" value="'+ arrays[i].bz1 +'" title="'+ arrays[i].bz1 +'">'
                    + '</div>'
                    + '</div>'
                    + '</td>'
                    + '<td>'
                    + '<div style="display: flex;white-space: nowrap">'
                    + '<div id="editBtn_' + (i) + '" style="margin: 0 10px" class="table-btn editBtn_' + (i) + '" data-index="' + (i) + '">'
                    + '<span>编辑</span>'
                    + '</div>'
                    + '<div id="delBtn_' + (i) + '" style="margin: 0 10px" class="table-btn delBtn_' + (i) + '" data-index="' + (i) + '">'
                    + '<span>删除</span>'
                    + '</div>'
                    + '</div>'
                    + '</td></tr>';
            }
            tbodyQjsq.innerHTML = html

            for (let i = 0; i < arrays.length; i++) {
                timeSelector({
                    ele: ".startTimeRange" + (i),
                    name: "TravelTimeDO[" + (i) + "]$startTimeRange",
                    callback: function (val) {
                    }
                })

                timeSelector({
                    ele: ".endTimeRange" + (i),
                    name: "TravelTimeDO[" + (i) + "]$endTimeRange",
                    callback: function (val) {
                    }
                })
                z.ui.date("[name='TravelTimeDO[" + i + "]$startTime']").init()
                z.ui.date("[name='TravelTimeDO[" + i + "]$endTime']").init()
                $("#editBtn_" + i).click(function () {
                    const span = $(this).find("span");
                    const html = span.html();
                    if (html === '编辑') {
                        span.html('保存')
                        detailWrite(i);
                        addDataThat.attr('disabled', "true");
                        $("#qjsj_" + i).removeClass("form-table-disable")
                        return;
                    }
                    if (html === '保存') {
                        span.html('编辑')
                        detailReadonly(i, false)
                        addDataThat.removeAttr('disabled')
                        $("#qjsj_" + i).addClass("form-table-disable")
                        return;
                    }
                })
                $("#delBtn_" + i).click(function () {
                    z.ui.confirm("compid").init({
                        content: "确定删除吗？",
                        onConfirm: function () {
                            var element = document.getElementById("qjsj_" + i);
                            element.remove();
                            buildQjsjSeq();
                            addDataThat.removeAttr('disabled')
                        },
                        onCancel: function () {

                        }
                    })

                })
                $("#qjsj_" + i).addClass("form-table-disable")
                if (viewState === 'v' || read === '1') {
                    detailReadonly(i)
                }else {
                    detailReadonly(i,false)
                }
            }

            let sTbody = document.querySelectorAll('.qjsjClass')
            for (let i = 0; i < arrays.length; i++) {
                let startHHmm = moment(arrays[i].startTime).format('HH:mm')
                let endHHmm = moment(arrays[i].endTime).format('HH:mm')
                sTbody[i].children[1].children[0].children[1].children[0].children[0].value = startHHmm
                sTbody[i].children[2].children[0].children[1].children[0].children[0].value = endHHmm
                sTbody[i].children[3].children[0].children[0].children[0].value = arrays[i].bz1 || ''
            }


        }

    }


    //注册业务保存事件
    function bindEvents() {
        z.workflow.saveBtn.addListener("onSaveClick", saveForm);
    }

    function buildQjsjSeq() {
        let elementsByName = document.getElementsByName("qjsj_seq");
        for (let i = 0; i < elementsByName.length; i++) {
            const seqElement = elementsByName[i];
            seqElement.innerHTML = i + 1;
        }
    }

    /*
  * all 工作流js传递到业务的参数 success执行的方法
  * istransfer 工作流js传递到业务的参数 是否转件
  * */
    function saveForm(all, istransfer) {
        var postData = z.ui.form.getFormFields($("[name=createReqVO]"));
        if (postData === false) {
            all({success: false});
            return;
        }
        postData.createReqVO.instanceId = z.ui.comm.getUrlParam("flowInstanceId");
        var travelTimeCreateList = new Array()
        for (let key of Object.keys(postData)) {
            let mealName = postData[key];
            if (key.startsWith("TravelTimeDO")) {
                mealName.startTime = Date.parse(mealName.startTime + " " + mealName.startTimeRange);
                mealName.endTime = Date.parse(mealName.endTime + " " + mealName.endTimeRange);
                travelTimeCreateList.push(z.ui.form.childStringify(mealName));
            }
        }
        postData.createReqVO.travelTimeCreateList = travelTimeCreateList;
        z.ui.ajax({
            type: "post",
            url: "/BusinessTravel/update",
            data: JSON.stringify(postData.createReqVO),
            contentType: "application/json",
            success: function () {
                all({success: true});
            },
            error: function () {
                all({success: false});
            }
        })
    }


    function generateTableTrHtml(index) {
        let timeObject = document.querySelector('#timeObject')
        let arrays = JSON.parse(timeObject.value)
        let indexC = 0
        if (arrays.length > 0) {
            indexC = arrays.length + index
        } else {
            indexC = index
        }

        var trDom = document.createElement("tr");
        trDom.style.backgroundColor = "#fff";
        trDom.id = "qjsj_" + indexC;
        trDom.style.height = "63px";
        trDom.innerHTML = '<td name="qjsj_seq">' + (indexC + 1) + '</td>'
            + '<td>'
            + '<div class="form-flex">'
            + '<div class="form-item" style="width: 50%;margin-right: 5px;">'
            + '<div class="z-comp-date" name="TravelTimeDO[' + indexC + ']$startTime">'
            + '<input type="text" value="">'
            + '</div>'
            + '</div>'
            + '<div style="width: 50%;margin-left: 5px;" class="dateTimeRange startTimeRange' + (indexC) + '">'
            + '</div>'
            + '<span class="nbsp"> - </span>'
            + '</div>'
            + '</td>'
            + '<td>'
            + '<div class="form-flex">'
            + '<div class="form-item" style="width: 50%;margin-right: 5px;">'
            + '<div class="z-comp-date" name="TravelTimeDO[' + indexC + ']$endTime">'
            + '<input type="text" value="">'
            + '</div>'
            + '</div>'
            + '<div style="width: 50%;margin-left: 5px;" class="dateTimeRange endTimeRange' + (indexC) + '">'
            + '</div>'
            + '</div>'
            + '</td>'
            + '<td>'
            + '<div class="form-item">'
            + '<div class="z-comp-input" name="TravelTimeDO[0]$bz1">'
            + '<input type="text" value="">'
            + '</div>'
            + '</div>'
            + '</td>'
            + '<td>'
            + '<div id="editBtn_' + (index) + '" class="table-btn editBtn_' + (indexC) + '" data-index="' + (indexC) + '">'
            + '<span>保存</span>'
            + '</div>'
            + '<div id="delBtn_' + (indexC) + '" class="table-btn delBtn_' + (indexC) + '" data-index="' + (indexC) + '">'
            + '<span>删除</span>'
            + '</div>'
            + '</td>';
        return trDom;
    }

    function initPartners() {
        z.ui.ajax({
            type: "get",
            url: "/common/user-tree",
            data: {},
            success: function (res) {
                if (res && res.length > 0) {
                    selectMutiTree("[name='partners']", res, clickPartners)
                }
                if ($("[name='createReqVO$partners']").val()) {
                    z.ui.selecttree("[name='partners']").setValue($("[name='createReqVO$partners']").val().split(","));
                }
            },
            error: function () {
            }
        })
    }

    function clickPartners(even, treeId, treeNode) {
        $("[name='createReqVO$partners']").val(z.ui.selecttree("[name='partners']").getValue());
    }

    function setProject(res) {
        if (res.data) {
            $("[name='createReqVO$projectId']").val(res.data.id);
            z.ui.input("[name='createReqVO$projectName']").setValue(res.data.xmmc);
        }
    }

    function detailReadonly(i, isBool = true) {
        if (isBool) {
            $("#delBtn_" + i).css("display", "none");
            $("#editBtn_" + i).css("display", "none");
        }
        let detailElement = document.getElementById("qjsj_" + i);
        let detailInput = detailElement.getElementsByTagName("input");
        for (let j = 0; j < detailInput.length; j++) {
            detailInput[j].disabled = true;
            detailInput[j].className += "z-readonly"
        }
    }

    function detailWrite(i) {
        let detailElement = document.getElementById("qjsj_" + i);
        let detailInput = detailElement.getElementsByTagName("input");
        for (let j = 0; j < detailInput.length; j++) {
            detailInput[j].disabled = false;
            $(detailInput[j]).removeClass("z-readonly")
        }
    }
}());