manyi/static/app/js/device-param.js

var logicalCode;
var groupId;// 批量选择组进行编辑
var port;

//解决mui 输入框失去焦点后滚动条跳至顶部bug
// function inputBlurBug() {
//     $("input,textarea").off("blur");
//     $("input,textarea").on("blur", function () {
//         $("body").removeClass("mui-focusin")
//         window.scroll(0, $('html').scrollTop() - 1)
//     });
// }
// inputBlurBug(); 

// 设置值到普通的输入框
function setVal(key, para) {
    if (para[key] != null) {
        var dom = $('#' + key)
        // 目前只支持 input和textarea
        if (dom.length > 0 && (dom[0].tagName === 'INPUT' || dom[0].tagName === 'TEXTAREA')) {
            dom.val(para[key]);
        } else {
            dom.text(para[key]);
        }
    }
}

// 设置单选框
function setRadio(key, para) {
    if (para[key] != null) {
        var dom = $("[name='" + key + "'][value='" + para[key] + "']");
        if (dom.length > 0) {
            dom[0].checked = true;
        }
    }
}

// switch
function setSwitch(key, para) {
    var sDom = $('[key="' + key + '"]')
    var trueValue = sDom.attr("true-value");

    // 后台返回的开关值很多都是数字，如果dom表明了是数字，则按数字加载； 注意：如果是字符串必须是：true-value='"isOn"'这样的形式
    if (trueValue) {
        trueValue = JSON.parse(trueValue);
    } else {
        trueValue = true
    }

    if (para[key] != null && para[key] === trueValue) {
        sDom.addClass("active");
    }
}

//获取懒加载的属性值
var QueryCacheData = null;
var getDevParam = function (key, query, callback) {
    if (!$.isArray(key)) {
        key = [key]
    }

    var queryData = {
        logicalCode: logicalCode,
        groupId: groupId,
        key: key,
    }

    if (query && $.isPlainObject(query)) {
        queryData = $.extend(queryData, query)
        QueryCacheData = query
    }

    sendRequest({
        url: "/dealer/getDeviceFunctionByKey",
        type: "POST",
        mask: "正在获取参数...",
        contentType: "json",
        data: queryData,
        success: function (response) {
            if (response.result === 1) {
                var payload = response.payload;

                for (var key in ParamKeyMap) {
                    var type = ParamKeyMap[key];
                    if (type === 'switch') {
                        setSwitch(key, payload);
                    } else if (type === 'value') {
                        setVal(key, payload);
                    } else if (type === 'radio') {
                        setRadio(key, payload);
                    } else {
                        setVal(key, payload);// 默认是value
                    }
                }

                if(callback){
                    callback(payload)
                }

            } else {
                mui.toast(response.description);
            }
        }
    });
};

function batchConfirm(callback) {
    // 由于 confirm 回调参数 e是指 mui-popup-button元素，而不是子元素，所以需要加事件穿透noClick
    if (logicalCode instanceof Array && logicalCode.length > 1)  {
        let btnArr = ['<span class="font-12 font-b-8">取消</span>', '<span class="font-12 noClick">修改的参数</span>', '<span class="font-12 c-red noClick">全部参数</span>']
        mui.confirm('<span class="c-red">' + "您可以选择将所有参数设置到被选择设备，</span>或者只将修改过的参数设置到被选择设备。请谨慎选择。", '谨慎保存', btnArr, function (e) {
            if (e.index === 1) {
                if (callback) {
                    callback('diff')
                }
            } else if (e.index === 2) {
                if (callback) {
                    callback('all')
                }
            }
        });
    } else {
        callback()
    }
}

function initTitle() {
    logicalCode = getQueryString("logicalCode") || "";
    if (logicalCode.indexOf('[') > -1) {
        logicalCode = JSON.parse(logicalCode)
    } else if (logicalCode) {
        logicalCode = [logicalCode]
    }

    groupId = getQueryString("groupId") || "";
    if (groupId.indexOf('[') > -1) {
        groupId = JSON.parse(groupId)
    } else if (groupId) {
        groupId = [groupId]
    }

    port = getQueryString("port") || "";

    var type = getQueryString("type");//设备类型
    $("#device").html("<i class='c-primary iconfont " + getDevIconName(type) + "'></i> " + type + logicalCode + (port ? ' 端口' + port : ''));
}

function setDevResultShow(res) {
    if (res.description) {
        mui.alert(res.description);
    } else {
        mui.toast("操作成功");
    }
}

// 将要合并发送的数据
var mergeSubmitData = {}

var mergeSubmitOption = {
    prev: function () {
    }
}

var ParamKeyMap = {};
var ParamLazy = false;

function initParam(option, callback, lazy) {
    var getDeviceParamsUrl = "/dealer/getDeviceFunction";
    var level = 'device'
    var dialogSubmitSuccess = null
    if (option && (option.params || option.lazy)) {
        ParamKeyMap = option.params;
        callback = option.callback;
        dialogSubmitSuccess = option.dialogSubmitSuccess;
        lazy = option.lazy;

        level = option.level
        if (level === 'port') {
            getDeviceParamsUrl = "/dealer/getPortParam";
        }

        option.getDeviceParamsUrl && (getDeviceParamsUrl = option.getDeviceParamsUrl);
    } else {
        ParamKeyMap = option;// 缓存keymap，懒加载时，用来确定数据展现方式
    }

    initTitle();

    //懒加载的属性使用不同的模式
    if (lazy) {
        ParamLazy = lazy
    } else {
        var data = {logicalCode: logicalCode, groupId: groupId}
        if (level === 'port') {
            data.port = port
        }
        //获取 设备功能设置
        sendRequest({
            url: getDeviceParamsUrl,
            type: "POST",
            mask: "正在获取参数...",
            data: JSON.stringify(data),
            success: function (response) {
                if (response.result == 1) {
                    var para = response.para;

                    for (var key in ParamKeyMap) {
                        var type = ParamKeyMap[key];
                        if (type === 'switch') {
                            setSwitch(key, para);
                        } else if (type === 'value') {
                            setVal(key, para);
                        } else if (type === 'radio') {
                            setRadio(key, para);
                        } else {
                            setVal(key, para);// 默认是value
                        }

                        // 缓存一下，用于全部保存
                        mergeSubmitData[key] = para[key]
                    }

                    if (callback) {
                        callback(response.para)
                    }

                } else {
                    mui.toast(response.description);
                }
            }
        });
    }

    var mergeSubmit = $('.mergeSubmit').length > 0;// 合并发送的模式，主要用于jinneng

    $("form.edit-content").on("submit", function (ev) {
        var dialog = $(this).closest('.edit-back');
        var submitPre = $(this).attr("submitPre");
        var data = {};

        var domList = $(this).find(".save-data");
        domList.each(function () {
            var key = "";
            var val = "";

            if ($(this).attr("type") == "radio") {
                key = $(this).attr("name");
                val = $("[name='" + key + "']:checked").val()
            } else {
                key = $(this).attr("id");
                val = $("#" + key).val();
            }

            data[key] = val;
        });

        // 合并数据准备一起发送
        if (mergeSubmit) {
            mergeSubmitData = $.extend(true, mergeSubmitData, data)
            dialog.addClass('mui-hidden');
        } else {
            // 单独发送参数。如果发现有需要额外带的参数，都给带上，目前来说只有非合并模式用到，比如真谷多
            var url = "/dealer/setDeviceFunctionParam";
            if (submitPre) {
                var dataTemp = window[submitPre](data)
                if (dataTemp) {
                    data = dataTemp
                }
            }
            var sendData = $.extend({"logicalCode": logicalCode, groupId: groupId}, data)
            if (QueryCacheData) {
                sendData = $.extend(sendData, QueryCacheData)
            }

            if (level === 'port') {
                url = "/dealer/setPortParam";
                sendData.port = port
            }

            sendRequest({
                url: url,
                type: "POST",
                mask: "正在设置参数...",
                data: JSON.stringify(sendData),// 带上逻辑编号
                success: function (res) {
                    if (res.result == 1) {

                        // 清空窗口的附带参数
                        closeBoxCallback()
                        dialog.addClass('mui-hidden');

                        setDevResultShow(res)

                        if (dialogSubmitSuccess) {
                            dialogSubmitSuccess()
                        }
                    } else {
                        mui.toast(res.description);
                    }
                }
            });
        }

        //阻止submit表单提交的默认行为
        ev.preventDefault();
    });

    //开关
    $('.mui-table-view-cell').on('tap', '.switch', function () {
        var that = $(this);
        that.toggleClass('active');
        var key = that.attr("key");
        var trueValue = that.attr("true-value") || true;
        var falseValue = that.attr("false-value") || false;
        var interfaceName = that.attr("interfaceName") || "setDeviceFunction";
        var confirmText = that.attr("confirmText");
        var callback = that.attr("callback");

        var switchFun = falseValue;
        if (that.hasClass("active")) {
            switchFun = trueValue;
        }
        var data = {};
        data[key] = switchFun;

        function ok() {
            // 合并发送的模式，缓存数据
            if (mergeSubmit) {
                mergeSubmitData = $.extend(true, mergeSubmitData, data)
            } else {
                sendRequest("/dealer/" + interfaceName, "POST", JSON.stringify($.extend({"logicalCode": logicalCode, groupId: groupId,}, data)), function (res) {
                    if (res.result == 1) {
                        setDevResultShow(res)

                        if (callback) {
                            window[callback]()
                        }
                    } else {
                        that.toggleClass('active');//设置失败还原开关
                        mui.toast(res.description);
                    }
                });
            }
        }

        if (confirmText) {
            mui.confirm(confirmText, '温馨提示', function (e) {
                if (e.index === 1) {
                    ok()
                } else {
                    // 虽然语法表意上好像一样 但是测试结果 toggleClass 好像没有生效 暂时不明为什么
                    if (that.hasClass('active')) {
                        that.remove("active")
                    }else{
                        that.addClass("active")
                    }
                    // that.toggleClass('active');//取消设置还原开关
                }
            });
        } else {
            ok()
        }
    });

    bindBtnEvent()

    // 合并保存所有参数模式；各个弹窗各自校验；
    $("#submitAll").on('click', function () {
        batchConfirm(function (modifyMode) {
            // 合并数据预处理
            if (mergeSubmitOption.prev) {
                mergeSubmitOption.prev()
            }
            var url = "/dealer/setDeviceFunctionParam";
            var data = $.extend({"logicalCode": logicalCode, groupId: groupId, modifyMode: modifyMode}, mergeSubmitData)
            if (level === 'port') {
                url = "/dealer/setPortParam";
                data.port = port
            }
            sendRequest(url, "POST", JSON.stringify(data), function (res) {
                if (res.result == 1) {
                    setDevResultShow(res)
                } else {
                    mui.toast(res.description);
                }

                // 如果有操作记录，则直接调到设置的结果页面
                if (res.payload.operationId != null) {
                    var url = "/dealer/index.html#/device/paramsResult"
                    var option = {operationId: res.payload.operationId}
                    goPage(url, option);
                }
            });
        })
    })

    // 全局一个表单，优点：用户操作方便。 缺点：一个表单装下所有参数，速度慢，如果业务复杂或是参数多就需要拆分到弹窗。
    // 可以配置class = mergeSubmit ，这样switch数据就会合并到此处，可以不用submitAll按钮。
    $("form.device-param-form").on("submit", function (ev) {
        var data = {};
        var that = $(this)

        batchConfirm(function (modifyMode) {
            var validateFun = that.attr('validate')
            if (validateFun) {
                var re = window[validateFun]()
                if (re === false) {
                    return false
                }
            }

            var domList = that.find(".save-data");
            domList.each(function () {
                var that2 = $(this)
                var key = "";
                var val = "";

                // 主要是文本框或是单选框，switch比较特殊
                if (that2.attr("type") == "radio") {
                    key = that2.attr("name");
                    val = $("[name='" + key + "']:checked").val()
                } else {
                    key = that2.attr("id");
                    val = $("#" + key).val();
                }

                data[key] = val;
            });

            var interfaceName = that.attr("interfaceName") || "setDeviceFunctionParam";
            var interfaceBase = that.attr("interfaceBase") || "/dealer/";

            // 合并数据准备一起发送，合并的主要是switch，  mergeSubmitData 合并（比如配置mergeSubmit后的 switch）
            var sendData = $.extend(true, {"logicalCode": logicalCode, groupId: groupId,modifyMode: modifyMode}, mergeSubmitData, data)

            // 合并数据预处理
            if (mergeSubmitOption.prev) {
                mergeSubmitOption.prev(sendData)// 这里直接去修改 sendData还靠谱些
            }

            var url = interfaceBase + interfaceName
            if (level === 'port') {
                url = "/dealer/setPortParam";
                sendData.port = port
            }

            sendRequest({
                url: url,
                type: "POST",
                mask: "正在设置参数...",
                data: JSON.stringify(sendData),// 带上逻辑编号
                success: function (res) {
                    if (res.result == 1) {
                        // 保存结果提示
                        setDevResultShow(res)
                    } else {
                        mui.toast(res.description);
                    }
                }
            });
        })

        //阻止submit表单提交的默认行为
        ev.preventDefault();
    });

    $("form.service-param-form").on("submit", function (ev) {
        var data = {};
        var that = $(this)

        var validateFun = that.attr('validate')
        if (validateFun) {
            var re = window[validateFun]()
            if (re === false) {
                return false
            }
        }

        var domList = that.find(".save-data");
        domList.each(function () {
            var that2 = $(this)
            var key = "";
            var val = "";

            // 主要是文本框或是单选框，switch比较特殊
            if (that2.attr("type") == "radio") {
                key = that2.attr("name");
                val = $("[name='" + key + "']:checked").val()
            } else {
                key = that2.attr("id");
                val = $("#" + key).val();
            }

            data[key] = val;
        });

        var sendData = $.extend(true, {
            "logicalCode": logicalCode
        }, mergeSubmitData, data)

        // 合并数据预处理
        if (mergeSubmitOption.prev) {
            mergeSubmitOption.prev(sendData)// 这里直接去修改 sendData还靠谱些
        }

        var interfaceName = that.attr("interfaceName") || "device/serverSetting/set";
        var interfaceBase = that.attr("interfaceBase") || "/dealer/";
        var url = interfaceBase + interfaceName

        sendRequest({
            url: url,
            type: "POST",
            mask: "正在设置服务器侧参数...",
            data: JSON.stringify(sendData),// 带上逻辑编号
            success: function (res) {
                if (res.result == 1) {
                    setDevResultShow(res)
                } else {
                    mui.toast(res.description);
                }

                if (res.payload.operationId != null) {
                    var url = "/dealer/index.html#/device/paramsResult"
                    var option = {operationId: res.payload.operationId}
                    goPage(url, option);
                }
            }
        });

        ev.preventDefault();
    });
}

function bindBtnEvent() {
    //按钮
    $('.dev-fun-btn').on('tap', function () {
        var that = $(this);
        var key = that.attr("key");
        var callback = that.attr("callback");
        var data = {logicalCode: logicalCode, groupId: groupId,};
        if (!logicalCode) {
            alert('没有获取到逻辑编号！')
        }

        var needConfirm = true
        var value = this.dataset['paramValue'];
        var paramTips = this.dataset['paramTips'];
        if (paramTips == null) {
            paramTips = '确定继续？';
        } else if (paramTips === 'false') {
            needConfirm = false
        }
        if (value !== undefined) {
            data[key] = value;
        } else {
            data[key] = true
        }
        var interfaceName = 'setDeviceFunction'
        if ($(this).closest('[interfaceName]').length) {
            interfaceName = $(this).closest('[interfaceName]').attr('interfaceName')
        }

        var url = ""
        if (interfaceName.includes('/')) {
            url = interfaceName
        } else {
            url = "/dealer/" + interfaceName
        }

        function next() {
            sendRequest(url, "POST", JSON.stringify(data), function (res) {
                if (res.result == 1) {

                    setDevResultShow(res)

                    setTimeout(function () {
                        if (callback) {
                            if (!callback.includes('(')) {
                                window[callback](res)
                            } else {
                                eval(callback)
                            }
                        }
                    }, 1000)
                } else {
                    mui.toast(res.description);
                }
            });
        }

        if (needConfirm) {
            mui.confirm(paramTips, '温馨提示', function (e) {
                if (e.index === 1) {
                    next()
                }
            });
        } else {
            next()
        }
    });
}

// 某些设备有懒加载的属性，此函数清空懒加载查询的条件
function closeBoxCallback() {
    // 清空QueryCacheData
    QueryCacheData = null
}

//设置属性框：打开; query为一些额外的参数，比如101100的端口号
function toSetParam(_index, _lazyKey, _query) {
    var index = _index
    var lazyKey = _lazyKey
    var query = _query
    var callback = null
    if($.isPlainObject(_index)){
         index = _index.dialogName
         lazyKey = _index.lazyParams
         query = _index.queryParams
         callback = _index.callback
    }

    $('#paramPanel' + index).removeClass('mui-hidden');

    function goLazyLoadParam(lazyKey) {
        getDevParam(lazyKey, query, callback)
    }

    // 如果有传递过来，表明是懒加载
    if (lazyKey) {
        if ($.isPlainObject(lazyKey)) {
            // 多个属性，传进来是Object，不是数组
            var idList = []
            for (var key in lazyKey) {
                idList.push(key)
            }
            goLazyLoadParam(idList);
        } else {
            // 单个属性
            goLazyLoadParam(lazyKey);
        }
    } else if (ParamLazy) {
        // 如果没有传递key，但是配置了懒加载，则寻找该弹窗内的 所有输入框，找到对应的key；
        var keyDomList = $('#paramPanel' + index).find('.save-data')
        var idList = []
        keyDomList.each(function () {
            var dom = $(this)
            var id = dom.attr('id')
            if (dom.attr('type') === "radio") {
                id = dom.attr('name')
            }
            // 不重复插入
            if (idList.indexOf(id) === -1) {
                idList.push(id)
            }
        })

        goLazyLoadParam(idList);
    }

    $('#paramPanel' + index).off().click(function (evt) {
        if ($(evt.target).closest('.edit-content').length == 0) {
            $('#paramPanel' + index).addClass('mui-hidden');
            closeBoxCallback()
        }
    });

    // 使用tap会造成事件穿透，所以用click 必须是>.edit-content>.mui-popup-buttons 否则内部vue的二层弹窗取消按钮会有问题
    $('#paramPanel' + index + ' > .edit-content>.mui-popup-buttons span').off().click(function () {
        if ($(this).index() == 0) {
            //点击取消
            $('#paramPanel' + index).addClass('mui-hidden');
            closeBoxCallback()
        } else {
        }
    });
}

// 去下一级的参数设置
function goNextPage(pageNo) {
    goPage(pageConfig[pageNo], {
        logicalCode: getQueryString("logicalCode"),
        type: getQueryString("type"),
        code: getQueryString("code"),
    })
}