前端layui通用工具

/*
* js数字相加
* */
function add(a, b) {
    return (Number(a) + Number(b)).toFixed(2);
}

/**
 * 编码(encodeURI),防止中文乱码
 * @param val
 * @returns {string}
 */
function encode(val) {
    return encodeURI(val);
}

/**
 * 解码
 * @param val
 * @returns {string}
 */
function decode(val) {
    return decodeURI(decodeURI(val));
}

/**
 * 获取当前系统时间(年月日)
 * @param format 针对年月日中的分隔符的格式，如'-'或'/'，默认'-'
 * @return {*} 当前系统时间的年月日，如2019-07-03
 */
function getSysdate(format) {
    var now = new Date();
    var year = now.getFullYear();
    var month = (now.getMonth() + 1) > 10 ? (now.getMonth() + 1) : "0" + (now.getMonth() + 1);
    var day = now.getDate() > 10 ? now.getDate() : "0" + now.getDate();
    if (isEmpty(format)) {
        return year + "-" + month + "-" + day;
    }
    return year + format + month + format + day;
}
/**
 * 将对象中的null值转换为空字符串
 * @param rows 对象或数组
 * @return {Object} 转换后的对象或数组
 */
function nullToEmptyStr(rows) {
    if (typeof rows == "object") {
        $.each(rows, function (index, value) {
            if (isEmpty(rows[index])) {
                rows[index] = "";
            }
        })
    } else {
        $.each(rows, function (k, v) {
            $.each(rows[k], function (index, value) {
                if (isEmpty(rows[index])) {
                    rows[k][index] = "";
                }
            })
        })
    }
    return rows;
}



/**
 * 页面的值赋值到数据中（页面的组件必须要有属性field-name）
 * @param domId 组件的id（该组件下有所要的属性值）
 * @return 将domId下的组件的属性值收集到对象并返回
 */
function uiToData(domId) {
    var vo = {};
    $.each($("#" + domId).find("[field-name]"), function (k, v) {
        if ($(this).attr("type") == 'radio') {
            $("input:radio[name='" + $(this).attr("field-name") + "']:checked").each(function () {
                vo[$(this).attr("field-name")] = $(this).attr("value");
            });
        } else if ($(this).attr("type") == 'checkbox') {
            var chk_value = [];
            $("input[name='" + $(this).attr("field-name") + "']:checked").each(function () {
                chk_value.push($(this).attr("value"));
            });
            if (chk_value.length >= 0) {
                vo[$(this).attr("field-name")] = chk_value;
            }
        } else if ($(this).get(0).tagName.toLowerCase() == "select") {
            vo[$(this).attr("field-name")] = $(this).find("option:selected").val();
        } else if ($(this).get(0).tagName.toLowerCase() == "td") {
            vo[$(this).attr("field-name")] = $(this).text();
        } else {
            vo[$(this).attr("field-name")] = $(this).val();
        }
    });
    return vo;
}

/**
 * 数据对象的值赋值到页面组件中（页面的组件必须要有属性field-name，且field-name的值必须与data的属性值一致）
 * @param data 数据值
 * @param domId 组件的id（该组件下有dom要被赋值）
 */
function dataToUi(data, domId) {
    $.each($("#" + domId).find("[field-name]"), function (k, v) {
        if (data[$(this).attr("field-name")] == null) {
            data[$(this).attr("field-name")] = "";//将null转化为""
        }
        if ($(this).attr("type") == 'radio') {
            if ($(this).attr("value") == data[$(this).attr("field-name")]) {
                $(this).attr("checked", true);
            }
        } else if ($(this).attr("type") == 'checkbox') {
            if (data[$(this).attr("field-name")] != null) {
                $("input[name='" + $(this).attr("field-name") + "']:checkbox").each(function () {
                    if (JSON.stringify(data[$(this).attr("field-name")]).indexOf($(this).attr("value")) != -1) {
                        $(this).attr("checked", true);
                    }
                })
            }
        } else if ($(this).attr("type") == 'text') {
            var fieldName = $(this).attr("field-name");
            if ($(this).attr("tags-flag") == 'true') {
                $(this).importTags(data[fieldName]);
            }
            if ($(this).attr("lay-filter") == fieldName) {
                layui.treeSelect.checkNode(fieldName, data[fieldName]);
            } else {
                $(this).val(data[fieldName]);
            }
        } else if ($(this).attr("type") == 'hidden') {
            $(this).val(data[$(this).attr("field-name")]);
        } else if ($(this).attr("type") == 'email') {
            $(this).val(data[$(this).attr("field-name")]);
        } else if ($(this).attr("type") == 'image') {
            $(this).val(data[$(this).attr("field-name")]);
        } else if ($(this).get(0).tagName.toLowerCase() == "textarea") {
            $(this).val(data[$(this).attr("field-name")]);
        } else if ($(this).get(0).tagName.toLowerCase() == "select") {
            $(this).val(data[$(this).attr("field-name")]);
            layui.form.render('select');
        } else if ($(this).attr("type") == 'number') {
            $(this).val(data[$(this).attr("field-name")]);
        } else {
            $(this).text(data[$(this).attr("field-name")] || '');
        }
    });
}

/**
 * 重置input=text、number、radio、checkbox和select组件的数据
 * @param upperDomId 所有要重置的元素的上层组件id
 */
function resetData(upperDomId) {
    var $dom = $("#" + upperDomId);
    $dom.find("select").val("");
    $dom.find("input[type=text]").val("");
    $dom.find("input[type=number]").val("");
    $dom.find("input[type=radio]").removeAttr("checked");
    $dom.find("input[type=checkbox]").removeAttr("checked");
    $dom.find("textarea[class=layui-textarea]").val("");
}


/**
 * 将数据字典设置到下拉选择select中
 * @param selectId
 * @param datas [code, value]
 */
function dataToSelectOption(selectId, datas) {
    var html = "";
    if (datas != null) {
        for (var i = 0; i < datas.length; i++) {
            html += "<option value=" + datas[i].code + ">" + datas[i].value + "</option>";
        }
    }
    $("#" + selectId).append(html);
}

/**
 * 将data对象中的值填充到mould中的标签内（.text填充形式）
 * @param ui 模块组件
 * @param data 数据值
 */
function dataToMould(ui, data) {
    $.each(ui.find("[field-name]"), function (k, v) {
        var val = data[$(this).attr("field-name")];
        if (isEmpty(val)) {
            val = '';
        }
        $(this).text(val);
    });
}

/**
 * 对于下拉值组件，渲染其下拉选项（从syscode中取值，因此需要引用syscodes.js）
 * @param domId 组件的id（该组件下有dom要被赋值）
 */
function selectInitData(domId) {
    $.each($("#" + domId).find("[field-name]"), function (k, v) {
        if ($(this).get(0).tagName.toLowerCase() === "select") {
            var $select = $(this);
            var name = $select.attr("field-name");
            var code = Syscodes[name];
            var arr = new Array();
            var sortNumber = function(a,b){
                return Number(a) - Number(b);
            }
            for(var key in code){
                arr.push(key);
            }
            if(name!='bys101'){
                arr.sort(sortNumber);
            }else{
                arr.sort(sortNumber).reverse();
            }
            for (var i = 0; i < arr.length; i ++) {
                var value = code[arr[i]];
                $select.append("<option value='" + arr[i] + "'>" + value + "</option>");
            }
        }
    });
    layui.form.render('select');
}

/**
 * 获取修改过后的对象值
 * @param initData 初始的数据对象
 * @param updatedData 界面修改过后的数据对象
 * @return {Array} 对比初始和修改过的，返回被修改过的数据字段
 */
function getUpdatedVo(initData, updatedData) {
    var logs = [];
    for (var o in initData) {
        for (var n in updatedData) {
            if (o == n) {//找到同属性值
                var oldSj = initData[o];
                if (isEmpty(oldSj)) {    //旧值的null，赋值到界面后，对于取到后的新值为""
                    initData[o] = "";
                }
                var newSj = updatedData[n];
                if (oldSj != newSj) {
                    var log = {};
                    log.key = o;
                    log.oldValue = oldSj;
                    log.newValue = newSj;
                    logs.push(log);
                }
            }
        }
    }
    return logs;
}


/**
 * 获取当前层索引，用于操作或关闭层
 * @return {*} 层索引index
 */
function getCurrentLayerIndex() {
    return parent.layer.getFrameIndex(window.name);
}

/**
 * 关闭当前层
 */
function closeCurrentLayer() {
    parent.layer.close(getCurrentLayerIndex());
}

/**
 * 消息弹出框重定位，默认3秒后消失、定位于距离顶端100px、样式6;
 * @param msgs  提示文本
 * @param tm    显示时长(默认3000毫秒)
 * @param position 定义位置 1、如'100px',只定义top坐标，水平保持居中；2、如['100px', '50px']，同时定义top、left坐标
 * @param style  弹出样式 1/2/3/4/5/6
 */
function alertMsg(msgs, tm, position, style) {
    var sh = 6;
    var ofs = 100;
    var time = 3000;
    if (!isEmpty(tm)) {
        time = tm;
    }
    if (!isEmpty(style)) {
        sh = style;
    }
    if (!isEmpty(position)) {
        ofs = position;
    }
    layer.msg(msgs, {
        time: time,
        offset: ofs,
        shift: sh
    });
}

/**
 * layui的tips层显示（调用示例：tipsShow('数据加载中', 'saveBtnId')）
 * @param text  弹出显示的文字(必)
 * @param id    选择器Id(必)
 * @param rbg   层的底色(如#009688绿色、#01AAED蓝色)
 * @param timeNum   需要显示的毫秒数
 * @param posit 显示相对于与选择器的位置：1上 2右 3下 4左
 * @return index tips的index(关闭tips：layer.close(index))
 */
function tipsShow(text, id, rbg, timeNum, posit) {
    var color = '#009688';
    if (isNotEmpty(rbg)) {
        color = rbg;
    }
    var time = 0;
    if (isNotEmpty(timeNum)) {
        time = timeNum;
    }
    var position = 1;
    if (isNotEmpty(posit)) {
        position = posit;
    }
    var index = layer.tips(text, '#' + id, {
        tips: [position, color],
        time: time,
        fixed: true //吸附于元素上
    });
    return index;
}

//============================以下部分为checkbox调用方法============================

/**
 * 全选或取消全选
 * @param touchDomId 触发全选或取消全选的 组件的id（该组件是一个<input type="checkbox">，具有check的特性）
 * @param upperDomId checkbox组件的上层组件的id（该组件下有一组相同name的checkbox）
 * @param boxName checkbox组件的name（该checkbox组件是input）
 */
function selectCheckbox(touchDomId, upperDomId, boxName) {
    if ($("#" + touchDomId).prop("checked")) {
        $.each($("#" + upperDomId).find("input[name=" + boxName + "]"), function (k, v) {
            $(this).prop("checked", true);
        });
    } else {
        $.each($("#" + upperDomId).find("input[name=" + boxName + "]"), function (k, v) {
            $(this).prop("checked", false);
        });
    }
}

/**
 * 对某个组件下的所有是input[type=checkbox]的组件进行全选或取消全选
 * @param touchDomId 触发全选或取消全选的 组件的id（该组件是一个<input type="checkbox">，具有check的特性）
 * @param upperDomId checkbox组件的上层组件的id（该组件下有一组相同的<input type="checkbox">）
 */
function selectAllCheckbox(touchDomId, upperDomId) {
    if ($("#" + touchDomId).prop("checked")) {
        $.each($("#" + upperDomId).find("input[type=checkbox]"), function (k, v) {
            $(this).prop("checked", true);
        });
    } else {
        $.each($("#" + upperDomId).find("input[type=checkbox]"), function (k, v) {
            $(this).prop("checked", false);
        });
    }
}

/**
 * 获取复选框的所有选中的值
 * @param upperDomId checkbox组件的上层组件的id
 * @param boxName checkbox组件的name（该checkbox组件是input）
 * @return {string} 若有多个选中值，则用;分隔
 */
function getCheckboxValue(upperDomId, boxName) {
    var ids = "";
    $.each($("#" + upperDomId).find("input[name=" + boxName + "]"), function (k, v) {
        if ($(this).prop("checked")) {
            if (ids != "") {
                ids += ";";
            }
            ids += $(this).val();
        }
    });
    return ids;
}
//表格选中行事件
$(function () {
   // 对于单选框按钮点击行的选中功能：
    $('body').on("click",".layui-table-body table.layui-table tbody tr", function () {
        /*当单击表格行时,把单选按钮设为选中状态*/
        var tableDiv;
        var index = $(this).attr('data-index');
        var tableBox = $(this).parents('.layui-table-box');
        //存在固定列
        if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
            tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
        } else {
            tableDiv = tableBox.find(".layui-table-body.layui-table-main");
        }
        var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.layui-table-cell div.layui-form-radio I");
        if (checkCell.length>0) {
            checkCell.click();
        }
        $("tr").css("background-color",""); $(this).css("background-color","#F2FAFF");
    });
    //对td的单击事件进行拦截停止，防止事件冒泡再次触发上述的单击事件  将此代码在页面初始化后执行一次即可以。
    $('body').on("click", "td div.layui-table-cell div.layui-form-radio ", function (e) {
        e.stopPropagation();
    });

    //点击行checkbox选中
    $(document).on("click",".layui-table-body table.layui-table tbody tr", function () {
        var index = $(this).attr('data-index');
        var tableBox = $(this).parents('.layui-table-box');
        //存在固定列
        if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
            tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
        } else {
            tableDiv = tableBox.find(".layui-table-body.layui-table-main");
        }
        var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
        if (checkCell.length>0) {
            checkCell.click();
        }
    });

    $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
        e.stopPropagation();

    });

    //监听复选框事件，被选中的行高亮显示
    layui.use(['table'], function () {
        var table = layui.table
        table.on('checkbox(test)', function (obj) {
            if (obj.checked == true && obj.type == 'all') {
                //点击全选
                $('.layui-table-body table.layui-table tbody tr').addClass('layui-table-click');
            } else if (obj.checked == false && obj.type == 'all') {
                //点击全不选
                $('.layui-table-body table.layui-table tbody tr').removeClass('layui-table-click');
            } else if (obj.checked == true && obj.type == 'one') {
                //点击单行
                if (obj.checked == true) {
                    obj.tr.addClass('layui-table-click');
                } else {
                    obj.tr.removeClass('layui-table-click');
                }
            } else if (obj.checked == false && obj.type == 'one') {
                //点击全选之后点击单行
                if (obj.tr.hasClass('layui-table-click')) {
                    obj.tr.removeClass('layui-table-click');
                }
            }
        });
    })
})

/**
 * 年月选择器，一点击就确定
 * @param domId 入参ID
 */
function selectYearMonth(domId) {
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        var initYear;
        laydate.render({
            elem: '#'+domId,
            type: 'month',
            trigger: 'click',
            /* ready和change函数是为了实现选择年月时不用点确定直接关闭  */
            ready: function(date){ // 控件在打开时触发，回调返回一个参数：初始的日期时间对象
                initYear = date.year;
            },
            change: function(value, date, endDate){ // 年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
                var selectYear = date.year;
                var differ = selectYear-initYear;
                if (differ == 0) {
                    if($(".layui-laydate").length){
                        $("#"+domId).val(value);
                        $(".layui-laydate").remove();
                    }
                }
                initYear = selectYear;
            }
        });
    });
}

/**
 * 年度时间选择器
 * @param domId
 */
function selectYear(domId) {
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        var initYear;
        laydate.render({
            elem: '#'+domId,
            type: 'year',
            trigger: 'click',
            /* ready和change函数是为了实现选择年份时不用点确定直接关闭  */
            ready: function(date){ // 控件在打开时触发，回调返回一个参数：初始的日期时间对象
                initYear = date.year;
            },
            change: function(value, date, endDate){ // 年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
                var selectYear = date.year;
                var differ = selectYear-initYear;
                if (differ != 15 && differ != -15) {
                    if($(".layui-laydate").length){
                        $("#"+domId).val(value);
                        $(".layui-laydate").remove();
                    }
                }
                initYear = selectYear;
            }
        });
    });
}

/**
 * 开始时间要小于结束时间
 * @param startTimeId 开始时间id
 * @param endTimeId 结束时间id
 */
function startTime(startTimeId,endTimeId){
    layui.laydate.render({
        elem: '#'+startTimeId,
        trigger: 'click',
        format: 'yyyy-MM-dd',
        done: function (value, date, endDate) {
            var startDate = new Date(value).getTime();
            var endTime = new Date($("#"+endTimeId).val()).getTime();
            if (endTime < startDate) {
                layer.msg('开始时间要小于结束时间');
                //$('#'+startTimeId).val($('#'+endTimeId).val());
            }
        }
    })
}

/**
 * 结束时间要大于开始时间
 * @param startTimeId 开始时间id
 * @param endTimeId 结束时间id
 */
function endTime(startTimeId,endTimeId){
    layui.laydate.render({ //结束时间
        elem: '#'+endTimeId,
        trigger: 'click',
        format: 'yyyy-MM-dd',
        done: function (value, date, endDate) {
            var startDate = new Date($("#"+startTimeId).val()).getTime();
            var endTime = new Date(value).getTime();
            if (endTime < startDate) {
                layer.msg('结束时间要大于开始时间');
            }
        }
    })
}

/**
 * 列如出生日期不大于当前时间
 * @param domId 时间ID
 * @param str 提示信息
 * @constructor
 */

function NewTimeCompare(domId,str){
    layui.laydate.render({
        elem: '#'+domId,
        trigger: 'click',
        format: 'yyyy-MM-dd',
        done: function (value, date, endDate) {
            var initTime = new Date(value).getTime();
            var newTime = new Date().getTime();
            if (initTime >newTime) {
                layer.msg(str+'不能大于当前时间');
                $("#"+domId).val("");
            }
        }

    });
}

/**
 * 一点击年度就确定，并且和当前年度判断
 * @param domId  时间控件ID
 * @param strMsg 提示信息 列如：“获奖年度”
 */
function yearCompare(domId,strMsg){
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        var initYear;
        laydate.render({
            elem: '#'+domId,
            type: 'year',
            trigger: 'click',
            /* ready和change函数是为了实现选择年份时不用点确定直接关闭  */
            ready: function(date){ // 控件在打开时触发，回调返回一个参数：初始的日期时间对象
                initYear = date.year;
            },
         change: function(value, date, endDate){ // 年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
                var selectYear = date.year;
                var differ = selectYear-initYear;
                if (differ != 15 && differ != -15) {
                    if($(".layui-laydate").length){
                        $("#"+domId).val(value);
                        $(".layui-laydate").remove();
                    }
                }
                initYear = selectYear;
                var newTime = new Date().getFullYear();
                if (newTime < value) {
                    layer.msg(strMsg+'要小于当前年度');
                }
            }
        });
    });
}

/**
 * 不能大于当前年月
 * @param domId
 * @param strMsg
 * @constructor
 */
function yearMonthCompare(domId,strMsg) {
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        var initYear;
        laydate.render({
            elem: '#'+domId,
            type: 'month',
            trigger: 'click',
            /* ready和change函数是为了实现选择年月时不用点确定直接关闭  */
            ready: function(date){ // 控件在打开时触发，回调返回一个参数：初始的日期时间对象
                initYear = date.year;
            },
            change: function(value, date, endDate){ // 年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
                var selectYear = date.year;
                var differ = selectYear-initYear;
                if (differ == 0) {
                    if($(".layui-laydate").length){
                        $("#"+domId).val(value);
                        $(".layui-laydate").remove();
                    }
                }
                initYear = selectYear;
                var now = new Date(),
                    y = now.getFullYear(),
                    m = now.getMonth() + 1;
               var newTime= y + "-" + (m < 10 ? "0" + m : m);
                if (newTime < value) {
                    layer.msg(strMsg+'要小于当前年月');
                }
            }
        });
    });
}

function getNowYear(){
    var now = new Date(),
        y = now.getFullYear();
    return y;
}