baoshi-was/resources/js/queryForm/queryForm.js

const query = function getQueryForm(data) {
    {
        this.el = data.el || '#form_div';
        this.form = data.form;
        this.method = data.method || 'get';
        this.url = data.url || getPathname();
        this.condition = data.condition;
        this.paginations = [50, 100, 200, 500,1000] || data.paginations;
        this.isPaginations = data.isPaginations !== false;
        this.keydownfun = data.keydownfun || undefined;
        this.selectChange = data.selectChange || undefined;
        this.searchClick = data.searchClick || undefined;
        this.selectfun = data.selectfun || undefined;
        this._onsubmit = data._onsubmit || undefined;
        this.keydownSearch = data.keydownSearch || true;
        this.selectChangeSearch = data.selectChangeSearch || true;
        this.tip = data.tip || '';
        this.nextPage = nextPage;
        this.pervPage = pervPage;
        this.goPage = goPage;
        this.getSearchData = getSearchData;
        this.autoSubmit = (data.autoSubmit !== false) ;
        this.param = data.param || [];
        this.appendDom = data.appendDom || undefined;

        // 提交表单
        this.onsubmit = function () {
            if(!this.autoSubmit){
                return;
            }
            // console.log(_data);
            saveSearchOnCookie();
            let form = $("<form method='" + _this.method +"'></form>");
            for (const key in _data) {
                let map = _data[key];
                if (["string", "number"].includes(fetchJsType(map.value)) && map.value !== '') {
                    // console.log(map.value);
                    // if(map.value){
                    //     let string = new String(map.value);
                    //     if(string.length > 1 ){
                    //         // console.log(string);
                    //         string = string.replace(/\+/g,',');
                    //         map.value = string
                    //         console.log(string);
                    //     }
                    // }
                    // console.log(map.value);
                    form.append("<input name='" + key + "' value='" + map.value.replace(" ","%20") + "'>");
                    // form.append("<input name='" + key + "' value='" + encodeURIComponent(map.value) + "'>")
                } else if ('array' === fetchJsType(map.value)) {
                    let string = map.value.join(',');
                    form.append("<input  name='" + key + "' value='" + string.replace(" ","%20") + "'>");
                    // form.append("<input  name='" + key + "' value='" + encodeURIComponent(string) + "'>")
                }
            }
            for (let key in this.param){
                form.append("<input type='text' name='" + key + "' value='" + this.param[key] + "'>");
            }
            if (_this.method !== 'get') {
                form.append("<input type='hidden' name='_token' value='" + $('meta[name="csrf-token"]').attr('content') + "'>");
                form.append("<input type='hidden' name='_method' value='" + _this.method + "'>");
                form.attr('action', _this.url);
            }
            _hidden_div.html('');
            _hidden_div.append(form);
            form.submit();
        }

    }
    let _this = this;
    let _parentNode = null;
    let _data = {};
    let _form = [];
    let _table = null;
    let _clearTr = null;
    let _pagination = null;
    let _baseData = data;
    let _searchBtn = null;
    let _hidden_div = null;
    let _parentNode_top = null;
    let _page = '';

    this.init = function () {
        _parentNode = $(_this.el);
        _form = $("<div ></div>");
        _table = $("<table class='table table-sm table-bordered m-0 position-static' style='background: rgb(255, 255, 255);'></table>");
        fillTable();
        switchData();
        addHiedDiv();
        rendererSearchForm();
        visibleClearBtn();
        parentNodeFloat();
        inputKeyDown();
        selectChange();
        createTip();
        $('[data-toggle="tooltip"]').tooltip({'trigger': 'hover'})
    }

    // form fixed
    function parentNodeFloat() {
        _parentNode_top = _parentNode.offset().top;
        let height = _parentNode.height();
        let dom = _this.appendDom ? $("#"+_this.appendDom+"") : null;
        $(window).scroll(function(){
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop > _parentNode_top) {
                _form.addClass('fixed-top');
                _parentNode.height(height);
                if (dom){
                    dom.css('position','fixed');
                    dom.css('background','rgb(255, 255, 255)');
                    dom.css('top',height);
                    dom.css('z-index',1000);
                }
            } else {
                _form.removeClass('fixed-top');
                if (dom){
                    dom.attr('style','');
                }
            }
        });
    }

    // add  hide div (on submit form )
    function addHiedDiv() {
        _parentNode.append(_form.append(_table));
        _hidden_div = $('<div></div>');
        _hidden_div.hide();
        $("body").append(_hidden_div);
    }

    // fill table
    function fillTable() {
        _table.html('');
        _table.append(crateClearBtn());
        _table.append(createPagination());
        _baseData.condition.forEach(function (conditions, index, arrays) {
            let tr = $("<tr></tr>");
            conditions.forEach(function (condition, index, array) {
                let td = $("<td style='width: 260px'></td>");
                if ([null, '', undefined].includes(condition.type) && ![null, undefined].includes(condition.name)) {
                    condition.type = 'input';
                }
                if (['dateTime_dateTime','dateTimeLocal', 'input_input'].includes(condition.type)) {
                    td = $("<td  style='width: 330px'</td>")
                } else if (['select_multiple_select', 'time', 'dateTime_select'].includes(condition.type)) {
                    td = $("<td  style='width: 280px'</td>");
                } else if (['time', 'dateTime_select'].includes(condition.type)) {
                    td = $("<td  style='width: 320px'</td>");
                }
                td.append(createModule(condition));
                tr.append(td);
            })
            _table.append(tr);
            if (arrays.length === index + 1) {
                let td = $("<td ></td>");
                tr.append(td.append(createSearchBt()));
            }

        })
        $.cookie.raw = true;
        $.cookie.json = true;
        setTableWidth();
    }

    function setTableWidth() {
        let max_width = 0;
        _baseData.condition.forEach(function (conditions, xindex, xarrays) {
            let _width = 0;
            conditions.forEach(function (condition, index, array) {
                if (['input', 'select', 'dateTime', 'input_select'].includes(condition.type)) {
                    _width += 260;
                } else if (['dateTime_dateTime','dateTimeLocal', 'input_input'].includes(condition.type)) {
                    _width += 330;
                } else if (['select_multiple_select','search_select'].includes(condition.type)) {
                    _width += 280;
                } else if (['checkbox'].includes(condition.type)) {
                    _width += 260;
                } else if (['time', 'dateTime_select'].includes(condition.type)) {
                    _width += 320;
                } else if ([undefined, null, ''].includes(condition)) {
                    _width += 260;
                }

                if (index === array.length - 1 && xindex === xarrays.length - 1) {
                    _width += 260;
                }
                if (max_width < _width) {
                    max_width = _width;
                }
            })
        })
        _parentNode.css('min-width', 1920 - 30)
        _parentNode.css('max-width', (max_width || window.screen.availWidth) - 30);
        _table.css('width', max_width + 'px');
    }

    // 清空筛选按钮
    function crateClearBtn() {
        let clearbtn = $("<button type='button' class='btn btn-warning text-dark '>清除筛选</button>");
        clearbtn.click(function () {
            clearData();
            visibleClearBtn();
        })
        let tr = $("<tr ><td colspan='10'></td></tr>");
        tr.find('td').append(clearbtn);
        _clearTr  = tr;
        return tr;
    }

    // create SearchBtn
    function createSearchBt() {
        _searchBtn = $("<span class='btn btn-sm btn-outline-dark ml-1' >按条件搜索</span>");
        let div = $("<div class='form-inline'></div>");
        div.append(_searchBtn);
        _searchBtn.click(function () {
            if (controlJsType(_this.searchClick, 'fun')) {
                _this.searchClick();
            }
            if (controlJsType(_this._onsubmit, 'fun')) {
                _this._onsubmit();
            }else{
                _this.onsubmit();
            }
        })
        return div;
    }

    // create _pagination
    function createPagination() {
        let isPaginations = _this.isPaginations ? '' : 'hidden';
        _pagination = $("<select id='paginate' "+isPaginations+" name='paginate' class='form-control form-control-sm' style='vertical-align: middle; max-width: 150px;'></select>");
        let tr = $("<tr ><td colspan='10'><div class='col p-0' style='height: 100%'></div></td></tr>");
        tr.find('div').append(_pagination);
        _this.paginations.forEach(function (map) {
            let option = $("<option value='" + map + "'>每页显示" + map + "</option>");
            _pagination.append(option);
        })
        _pagination.change(function () {
            let dom = {name: 'paginate', type: 'select', value: _pagination.val(), mold: 'select'};
            _data['paginate'] = dom;
            modifyData(dom);
            _data['paginate'] = dom;
            _this.onsubmit();
        })
        return tr;
    }

    // create Tip
    function createTip() {
        let data = fetchCookie();
        let search = window.location.search;
        if (!data || !search) {
            return;
        }
        let cookies = JSON.parse(data);
        if (!cookies['success_tip']) {
            return;
        }
        if (!cookies['success_tip'] && !!_this.tip) {
            cookies['success_tip'].value = _this.tip;
            cookies['success_tip'].count = 1;
            _data['page'].value = _page;
            saveCookie(cookies);
            set_dataOnCookie();
            _this.onsubmit();
            // 重定向
        } else if (!cookies['success_tip'] && cookies['success_tip'].count === 1) {
            let tip = $("<div class='alert alert-success h1'></div>")
            let tipdiv = $("<div style='max-width: " + window.screen.availWidth + "px'>" + cookies['success_tip'].value + "</div>").append(tip);
            _form.append(tipdiv);
            cookies['success_tip'] = '';
            saveCookie(cookies);
        }
    }

    // 数据清空
    function clearData() {
        saveCookie({});
        let url=_this.url;
        if (_this.param !== []){
            url += "?";
            let i=0;
            for (let key in _this.param){
                if (i!==0) url += "&";
                url += key+"="+_this.param[key];
                i++;
            }
        }
        window.location.href = url;
    }

    // 存cookie
    function saveCookie(data) {
        $.cookie(getPathname(), data, {expires: 1});
    }

    // 取cookie
    function fetchCookie() {
        return $.cookie(getPathname());
    }

    // 获取路径
    function getPathname() {
        return window.location.pathname;
    }

    // 获取js对象类型types.call
    function fetchJsType(JsObj) {
        let types = Object.prototype.toString;
        let obj = types.call(JsObj);
        return (obj === "[object Number]" && 'number')
            || (obj === "[object Boolean]" && 'boolean')
            || (obj === "[object String]" && 'string')
            || (obj === "[object Array]" && 'array')
            || (obj === "[object Function]" && 'fun')
            || (obj === "[object Object]" && 'object')
            || (obj === "[object Null]" && 'null')
            || (obj === "[object Undefined]" && 'undefined');
    }

    // 判断js类型
    function controlJsType(JsObj, type) {
        if (fetchJsType(type) === 'array') {
            return type.includes(fetchJsType(JsObj));
        } else if (fetchJsType(type) === 'string') {
            return fetchJsType(JsObj) === type;
        } else {
            return JsObj === type;
        }
    }

    // create Module
    function createModule(condition) {
        let type = condition.type;
        return (['input', '', null].includes(type) && getInput(condition))
            || (type === "select" && getSelect(condition))
            || (type === "search_select" && getSearchSelect(condition))
            || (type === "input_select" && getInputSelect(condition))
            || (type === "dateTime" && getdateTime(condition))
            || (type === "dateTimeLocal" && getDateTimeLocal(condition))
            || (type === "time" && getTime(condition))
            || (type === "input_input" && getInputInput(condition))
            || (type === "dateTime_dateTime" && getdateTimedateTime(condition))
            || (type === "dateTime_select" && getdateTimeSelect(condition))
            || (type === "select_multiple_select" && getSelectMultipleSelect(condition))
            || (type === "checkbox" && getCheckBox(condition));
    }

    // input
    function getInput(condition) {
        let input = $("<input name='" + condition.name + "' class='form-control form-control-sm' style='vertical-align: middle; max-width: 200px;' placeholder='" + condition.placeholder + "' autocomplete='off' data-toggle='tooltip' data-placement='top' >");
        input.attr('title', condition.tip === undefined ? '' : condition.tip);
        input.on('input', function () {
            let dom = {name: condition.name, type: 'input', value: this.value, mold: 'input'}
            modifyData(dom)
        });
        return input;
    }

    // select
    function getSelect(condition) {
        let select = $("<select name='" + condition.name + "' class='form-control form-control-sm' style='max-width: 200px;' data-toggle='tooltip' data-placement='top'></select>")
        select.attr('title', condition.tip === undefined ? '' : condition.tip);
        let tip = $("<option value class='text-secondary'>" + condition.placeholder + "</option>")
        select.append(tip);
        condition.data.forEach(function (map) {
            let option = $("<option value='" + map.name + "' class='text-secondary'>" + map.value + "</option>")
            select.append(option);
        })
        select.on('change', function () {
            let dom = {name: condition.name, type: 'select', value: this.value, mold: 'select'}
            modifyData(dom)
        })
        return select;
    }

    // search_select
    function getSearchSelect(condition) {
        let div = $("<div class='form-inline'></div>");
        let input = $("<input class='form-control form-control-sm'  placeholder='" + condition.placeholder[0] + "'  style='width: 70px;' autocomplete='off' data-toggle='tooltip' data-placement='top'>");
        input.attr('title', controlJsType(condition.tip[0], 'undefined') ? '输入关键词快速定位下拉列表，回车确定' : condition.tip[0]);

        let select = $("<select class='form-control form-control-sm ml-2' name='" + condition.name + "' style='min-width: 120px;max-width: 150px;' data-toggle='tooltip' data-placement='top' data-toggle='tooltip' data-placement='top'></select>");
        select.attr('title', controlJsType(condition.tip[1], 'undefined') ? '' : condition.tip[1]);

        let placeholder = '';
        if (controlJsType(condition.placeholder, 'array') && !['', undefined, null].includes(condition.placeholder[1])) {
            placeholder = condition.placeholder[1];
        }
        fillSelectOption(select, condition.data, placeholder);
        input.bind('input propertychange', function () {
            let value = this.value;
            let data = condition.data.filter(function (map) {
                return map.value.includes(value);
            })
            fillSelectOption(select, data || condition.data);
            select.val(_data[condition.name].select);
        })
        select.change(function () {
            let dom = {name: condition.name, type: 'input_select', value: this.value, mold: 'select'};
            modifyData(dom);
        })
        return div.append(input).append(select);
    }

    // input_select
    function getInputSelect(condition) {
        let div = $("<div class='form-inline'></div>");
        let input = $("<input class='form-control form-control-sm' name='" + condition.name[0] + "' placeholder='" + condition.placeholder[0] + "' autocomplete='off' style='max-width: 120px;' data-toggle='tooltip' data-placement='top' >");
        input.attr('title', controlJsType(condition.tip[0], 'undefined') ? '' : condition.tip[0]);
        let select = $("<select class='form-control form-control-sm ml-2' name='" + condition.name[1] + "'  style='max-width: 200px;' title='" + condition.tip[1] + "''>");
        fillSelectOption(select, condition.data);
        input.bind('input propertychange', function () {
            let dom = {name: this.name, type: 'input_select_longtext', value: this.value, mold: 'input'};
            modifyData(dom);
        })
        select.change(function () {
            let dom = {name: this.name, type: 'input_select_longtext', value: this.value, mold: 'select'};
            modifyData(dom);
        })
        return div.append(input).append(select);
    }

    // datTime
    function getdateTime(condition) {
        let dateTime = $("<input type='date' class='form-control form-control-sm' name='" + condition.name + "'  style='max-width: 150px' data-toggle='tooltip' data-placement='top' title='" + condition.tip + "' style='width: 200px'>");
        dateTime.attr('title', controlJsType(condition.tip, 'undefined') ? '' : condition.tip);
        dateTime.bind('input propertychange', function () {
            let dom = {name: condition.name, type: 'dateTime', value: this.value, mold: 'dateTime'};
            modifyData(dom);
        })
        return dateTime;
    }

    // dateTimeLocal
    //dateTimeLocal
    function getDateTimeLocal(condition) {
        let dateTimeLocal = $("<input name = '"+ condition.name +"' type='datetime-local' step='01' class='form-control form-control-sm' style='vertical-align: middle; max-width: 280px;' placeholder='" + condition.placeholder + "' autocomplete='off' data-toggle='tooltip' data-placement='top' >");
        dateTimeLocal.attr('title', condition.tip === undefined ? '' : condition.tip);
        dateTimeLocal.bind('input propertychange', function () {
            let dom = {name: condition.name, type: 'dateTimeLocal', value: this.value, mold: 'dateTimeLocal'};
            modifyData(dom);
        });
        return dateTimeLocal;
    }

    // time
    function getTime(condition) {
        let div = $("<div class='form-inline'></div>");
        let dateTime = $("<input type='date' class='form-control form-control-sm' name='" + condition.name + "'  style='width:150px' data-toggle='tooltip' data-placement='top' >");
        dateTime.attr('title', controlJsType(condition.tip[0], 'undefined') ? '' : condition.tip[0]);
        let min = $("<input id='" + condition.name + "_min' class='form-control form-control-sm ml-2' style='max-width: 100px;' placeholder='00:00' data-toggle='tooltip' data-placement='top' >");
        min.attr('title', controlJsType(condition.tip[1], 'undefined') ? '' : condition.tip[1]);

        dateTime.bind('input propertychange', function () {
            let value = this.value !== '' ? this.value + ' ' +(!!min.val() ?  min.val() :'00:00' ) : '';
            let dom = {name: condition.name, type: 'time', value: value, mold: 'time'};
            modifyData(dom);
        })
        min.bind('input propertychange', function () {
            verifyTime(this);
        })
        min.bind('input propertychange', function () {
            if (['null', 'undefined', ''].includes(dateTime.val())) {
                return;
            }

            let value = ['null', 'undefined', ''].includes(dateTime.val()) ? '' : dateTime.val() + ' ' + min.val();
            //let value = dateTime.value !== '' ? dateTime.value + ' ' + (min.value === '' ? '00:00' : min. value) : '';
            let dom = {name: condition.name, type: 'time', value: value, mold: 'time'};
            modifyData(dom);
        })
        return div.append(dateTime).append(min);
    }

    // input_input
    function getInputInput(condition) {
        let div = $("<div class='form-inline'></div>");
        let input1 = $("<input name='" + condition.name[0] + "' class='form-control form-control-sm' style='vertical-align: middle; max-width: 150px;' placeholder='" + condition.placeholder[0] + "' data-toggle='tooltip' data-placement='top' title='" + condition.tip[0] + "'>");
        input1.attr('title', controlJsType(condition.tip[0], 'undefined') ? '' : condition.tip[0]);
        let input2 = $("<input name='" + condition.name[1] + "' class='form-control form-control-sm ml-2' style='vertical-align: middle; max-width: 150px;' placeholder='" + condition.placeholder[1] + "' data-toggle='tooltip' data-placement='top' title='" + condition.tip[1] + "'>");
        input2.attr('title', controlJsType(condition.tip[1], 'undefined') ? '' : condition.tip[1]);

        input1.bind('input propertychange', function () {
            let dom = {name: this.name, type: 'input_input', value: this.value, mold: 'input'};
            modifyData(dom);
        })
        input2.bind('input propertychange', function () {
            let dom = {name: this.name, type: 'input_input', value: this.value, mold: 'input'};
            modifyData(dom);
        })
        return div.append(input1).append(input2);
    }

    // dateTime_dateTime
    function getdateTimedateTime(condition) {
        let div = $("<div class='form-inline'></div>");
        let dateTime1 = $("<input type='date' class='form-control form-control-sm' name='" + condition.name[0] + "'  style='width: 150px' data-toggle='tooltip' data-placement='top' >");
        dateTime1.attr('title', controlJsType(condition.tip[0], 'undefined') ? '' : condition.tip[0]);

        let dateTime2 = $("<input type='date' class='form-control form-control-sm ml-2' name='" + condition.name[1] + "'  style='width: 150px;' data-toggle='tooltip' data-placement='top' >");
        dateTime2.attr('title', controlJsType(condition.tip[1], 'undefined') ? '' : condition.tip[1]);

        dateTime1.bind('input propertychange', function () {
            let dom = {name: this.name, type: 'dateTime_dateTime', value: this.value, mold: 'dateTime'};
            modifyData(dom);
        })
        dateTime2.bind('input propertychange', function () {
            let dom = {name: this.name, type: 'dateTime_dateTime', value: this.value, mold: 'dateTime'};
            modifyData(dom);
        })
        return div.append(dateTime1).append(dateTime2);
    }

    // dateTime_select
    function getdateTimeSelect(condition) {
        let div = $("<div class='form-inline'></div>");
        let dateTime = $("<input type='date' class='form-control form-control-sm' name='" + condition.name[0] + "'  style='max-width: 150px;' data-toggle='tooltip' data-placement='top' >");
        dateTime.attr('title', controlJsType(condition.tip[0], 'undefined') ? '' : condition.tip[0]);

        let select = $("<select name='" + condition.name[1] + "' class='form-control form-control-sm ml-2' data-toggle='tooltip' data-placement='top' style='max-width: 100px'></select>");
        select.attr('title', controlJsType(condition.tip[1], 'undefined') ? '' : condition.tip[1]);

        fillSelectOption(select, condition.data)
        dateTime.bind('input propertychange', function () {
            let dom = {name: this.name, type: 'dateTime_select', value: this.value, mold: 'dateTime'};
            modifyData(dom);
        })
        select.change(function () {
            let dom = {name: this.name, type: 'dateTime_select', value: this.value, mold: 'select'};
            modifyData(dom);
        })
        return div.append(dateTime).append(select);
    }

    // select_multiple_select
    function getSelectMultipleSelect(condition) {
        let div = $("<div class='form-inline' style='position: relative'></div>");
        let select = $("<select class='form-control form-control-sm' name='" + condition.name + "_sel'  id='" + condition.name + "_sel' style='vertical-align: middle; width: 100px;' data-toggle='tooltip' data-placement='top'  ></select>");
        let label = $("<label id='" + condition.name + "_lab' style='vertical-align: middle; width: 100px'  >(多选)</label>").hide();
        let select_div = $("<div ></div>");
        select.attr('title', controlJsType(condition.tip[0], 'undefined') ? '' : condition.tip[0]);
        let placeholder = controlJsType(condition.placeholder[0], 'undefined') ? '' : condition.placeholder[0];

        fillSelectOption(select, condition.data, placeholder);
        let input = $("<input name='" + condition.name + "_tip' class='form-control form-control-sm ml-2' style='max-width: 150px' data-toggle='tooltip' data-placement='top'>");

        input.attr('title', controlJsType(condition.tip[1], 'undefined') ? '' : condition.tip[1]);
        input.attr('placeholder', controlJsType(condition.placeholder[1], 'undefined') ? '' : condition.placeholder[1])

        let ul_div = $("<div class='pl-0 tooltipTarget' style='position: absolute;left: 100px;top:25px; max-height: 150px; overflow-y: scroll; border: 1px solid rgb(221, 221, 221); border-radius: 5px; text-align: center; transform: scale(0.9);z-index:1' tabindex='1'></div>");
        let ul = $("<ul name='" + condition.name + "' class='list-group pl-0 m-0 p-0 bg-white' style='list-style-type: none;width: 150px;top:35px; z-index: 100' ></ul>");

        select_div.append(input).append(ul_div.append(ul));
        div.append(select).append(label).append(select_div);

        fillMultipleSelectOption(ul, condition.data, condition.name);

        input.bind('input propertychange', function () {
            let value = this.value;
            if (value === '') {
                fillMultipleSelectOption(ul, _data[condition.name].data, condition.name);
                redenerUl(ul);
                return;
            }
            let select = _data[condition.name].select;
            if ([undefined, null, ''].includes(select)) {
                select = [];
            }
            let select_data = condition.data.filter(function (map) {
                return map.value.includes(value) || select.includes(map.name);
            })

            fillMultipleSelectOption(ul, select_data, condition.name);
            redenerUl(ul);
        })

        select.change(function () {
            let dom = {
                name: condition.name,
                type: 'select_multiple_select',
                value: [this.value]
            }
            modifyData(dom);
            redenerUl(ul);
        })
        input.focus(function () {
            ul_div.show();
        })
        input.blur(function () {
            setTimeout(function () {
                if (!ul_div.is(':focus')) {
                    ul_div.hide();
                }
            }, 100);
        })
        select_div.focus(function () {
            ul_div.show();
        })
        select_div.blur(function () {
            ul_div.hide();
        })
        ul_div.blur(function () {
            ul_div.hide();
        })
        ul_div.hide();
        ul_div.mouseleave(function () {
            if(_data[condition.name].value.length>0){
                _this.onsubmit();
                ul_div.hide();
            }
        });
        ul_div.mouseenter(function () {
            setTimeout(function () {
                ul_div.attr("title","移出多选区域即可自动提交");
                ul_div.tooltip('show');
            },1000);
        });
        return div;
    }

    // checkbox
    function getCheckBox(condition) {
        let div1 = $("<div class='form-inline'></div>")
        condition.data.forEach(function (map, index) {
            let div = $('<div class="custom-control custom-control-inline custom-checkbox"></div>');
            let checkbox = $("<input type='checkbox' name='" + condition.name + "' class='custom-control-input' id='" + condition.name + index + "' value='" + map.name + "' >");
            let label = $("<label class='custom-control-label text-left font-weight-norma' for='" + condition.name + index + "'>" + map.value + "</label>")
            div1.append(div.append(checkbox).append(label));
            checkbox.click(function () {
                let value = [];
                $.each($("input:checkbox[name='" + condition.name + "']:checked"), function () {
                    value.push($(this).val());
                })
                let dom = {name: condition.name, type: 'checkbox', value: value, mold: 'check'};
                modifyData(dom);
                _this.onsubmit();
            });
        })
        return div1;
    }

    // fill select
    function fillSelectOption(select, data, placeholder = '') {
        select.html('');
        if (![undefined, null].includes(placeholder)) {
            let option = $("<option value></option>");
            if ('' === placeholder) {
                option = $("<option value>" + '全部' + placeholder + "</option>");
            } else {
                option = $("<option value>" + placeholder + "</option>");
            }
            select.append(option);
        }
        data.forEach(function (map) {
            let option = $("<option value='" + map.name + "'>" + map.value + "</optio>");
            select.append(option);
        })
        if (data !== undefined) {
        }
    }

    // fill multiple select ul
    function fillMultipleSelectOption(ul, data, name) {
        ul.html('');
        data.forEach(function (map) {
            let span = $("<span  style='cursor:default'>" + map.value + "</span>");
            let li = $("<li class='list-group-item pt-0 pb-0' value='" + map.name + "'></li>");
            li.append(span);
            ul.append(li);
            li.click(function () {
                let value = li.attr('value');
                let dom_data = _data[name].value;
                if(!dom_data){
                    dom_data = [];
                }
                if (controlJsType(dom_data,'string')){
                    dom_data = [dom_data];
                }
                if (dom_data.includes(value)) {
                    dom_data.splice(dom_data.indexOf(value), 1);
                } else {
                    dom_data.push(value);
                }
                dom_data = arrDuplicate(dom_data);
                let dom = {
                    name: ul.attr('name'),
                    type: 'select_multiple_select',
                    value: dom_data,
                    select: dom_data,
                    mold: 'select_multiple_select'
                };
                modifyData(dom);
                redenerUl(ul);
                isMultiple(ul.attr('name'));
            })
        })
    }

    function isMultiple(name) {
        let label = $('#' + name + '_lab');
        let select = $('#' + name + '_sel');
        let dom_data = _data[name].value;
        if (dom_data && dom_data.length === 1 ) {
            select.show();
            select.val(dom_data[0]);
            label.hide();
        }else if(controlJsType(dom_data,'string')){
            select.show();
            select.val(dom_data);
            label.hide();
        } else if (dom_data.length >= 2) {
            select.hide();
            label.show();
        }
    }

    // modify _data
    function modifyData(dom) {
        _data[dom.name].mold = dom.mold;
        _data[dom.name].value = dom.value;
        _data[dom.name].select = dom.value;
        redenerSearchFormOnData(dom.name, dom.value, dom.mold);
        let killings=_data[dom.name].killings;
        if(killings){
            killings.forEach(function(targetName){
                _data[targetName].value= '';
                redenerSearchFormOnData(_data[targetName].name, '', _data[targetName].mold);
            })
        }

        /* rules 规则
        *  son 子级元素 对象形式多传递 子级元素不存在时且 required_without_all_if 忽略列表内元素皆无值时使子级元素设置默认值
        *       {son:{key:{required_without_all_if:[],default:''}}}
        * date_relevance 时间关联 对象形式传递 date为起终时间 relevance为关联元素name
        *   killing为标记干掉哪种类型元素(enum('date','relevance')) default为relevance列表值，时间差存在于该值中才会去选中
        *   {date_relevance:{date:['',''],relevance:'',killing:'',default:[]}}
        * */
        let rules = _data[dom.name].rules;
        if (rules && JSON.stringify(rules) !== '{}'){
            if (rules['son']){
                for (let key in rules['son']){
                    if (!dom.value){
                        redenerSearchFormOnData(_data[key].name, '', _data[key].mold);
                        continue;
                    }
                    if (!_data[key].value){
                        if (rules['son'][key].required_without_all_if && Array.isArray(rules['son'][key].required_without_all_if)){
                            let sign = true;
                            rules['son'][key].required_without_all_if.forEach(function (name) {
                                if (_data[name].value) sign=false;
                            });
                            if (sign) redenerSearchFormOnData(_data[key].name, rules['son'][key].default, _data[key].mold);
                        }
                    }
                }
            }
            if (rules['date_relevance']){
                if (!rules['date_relevance']['date']
                    || !Array.isArray(rules['date_relevance']['date'])
                    || rules['date_relevance']['date'].length !== 2
                    || !rules['date_relevance']['relevance']) return;
                let start = _data[rules['date_relevance']['date'][0]];
                let end = _data[rules['date_relevance']['date'][1]];
                let relevance = _data[rules['date_relevance']['relevance']];
                if (dom.name === rules['date_relevance']['relevance']){
                    if (relevance.value){
                        let today = getToday();
                        let tarDate = getSubDate(getToday(),relevance.value);
                        _data[end.name].value = today;
                        _data[start.name].value = tarDate;
                        redenerSearchFormOnData(end.name, tarDate, end.mold);
                        redenerSearchFormOnData(start.name, tarDate, start.mold);
                    }
                    return;
                }
                if (!start.value || !end.value){
                    if (rules['date_relevance']['killing'] === 'date'){
                        _data[start.name].value = '';
                        redenerSearchFormOnData(start.name, '', start.mold);
                        _data[start.name].value = '';
                        redenerSearchFormOnData(end.name, '', end.mold);
                    }else{
                        _data[relevance.name].value = '';
                        redenerSearchFormOnData(relevance.name, '', relevance.mold);
                    }
                }
                if (start.value && end.value){
                    start.value = start.value.replace('+',' ');
                    end.value = end.value.replace('+',' ');
                    let diff = getDiffDay(start.value,end.value);
                    if (rules['date_relevance']['default'] && rules['date_relevance']['default'].includes(diff)){
                        _data[relevance.name].value = diff;
                        redenerSearchFormOnData(relevance.name, diff, relevance.mold);}
                    else {
                        _data[relevance.name].value = '';
                        redenerSearchFormOnData(relevance.name, '', relevance.mold);
                    }
                }
            }
        }
    }
    function getDiffDay(startDate,endDate) {
        startDate = new Date(startDate);
        endDate = new Date(endDate);
        return Math.floor((endDate.getTime() - startDate.getTime())/(24*3600*1000));
    }

    function getSubDate(date,value) {
        date = new Date(date);
        date.setDate(date.getDate() - value);
        return dateFormat(date);
    }

    function getToday() {
        let myDate = new Date();
        return dateFormat(myDate);
    }

    function dateFormat(date) {
        let year=date.getFullYear();
        let month=(date.getMonth()+1)<10 ? '0'+(date.getMonth()+1) : date.getMonth()+1;
        let day=date.getDate()<10 ? '0'+date.getDate() : date.getDate();
        return  year+"-"+month+"-"+day;
    }

    // save search on cookie
    function saveSearchOnCookie() {
        let saveData = {};
        for (const key in _data) {
            if (!['', null, undefined].includes(_data[key].value)) {
                if (controlJsType(_data[key].value, 'array') && _data[key].value.length === 0) {
                    continue;
                }
                saveData[key] = {
                    value: _data[key].value,
                    mold: _data[key].mold,
                }
            }
        }
        if (!_this.page) {
            saveData['page'] = _this.page;
        }
        saveCookie(saveData);
    }

    // hour_minute
    function verifyTime(time) {
        setTimeout(function () {
            time.value = time.value.replace('：', ':');
            time.value = time.value.replace(/[a-zA-Z]/, '');
            time.value = time.value.replace(/[^\d^\:]/, '');
            time.value = time.value.replace(/\:\:/, ':');
            time.value = time.value.replace(/^([\d]{1})([\s]{1})/, "$1:");
            time.value = time.value.replace(/^([\d]{1})([\d]{1})([\s]{1})/, "$1$2:");
            time.value = time.value.replace(/^([\d]{1})([\d]{1})([\d]{1})/, "$1$2:$3");
            time.value = time.value.replace(/^([\d]{1})([\d]{1})([\d]{1})([\d]{1})(.*?)/, "$1$2$3$4");
            time.value = time.value.replace(/^([\d]{1})([\d]{1})([\d]{1})([\d]{1})/, "$1$2:$3$4");
            time.value = time.value.replace(/^([\d]{1})([\d]{1}):([\d]{1})([\d]{1})([\s\S]{1})/, "$1$2:$3$4");
            time.value = time.value.replace(/^([\d]{1})([\d]{1}):([\D]{1,99})/, "$1$2:");
            time.value = time.value.replace(/^([\d]{1})([\d]{1})([\d]{1})\./, "$1:$2$3");
            time.value = time.value.replace(/^([\d]{1})\.([\d]{1})([\d]{1})/, "$1:$2$3");
            time.value = time.value.replace(/^([\d]{1})([\d]{2})([\S\s]{1,99})/, "$1$2:$3");
            time.value = time.value.replace(/^([\d]{1}):([\d]{2})([\S\s]{1,99})/, "$1:$2");
            time.value = time.value.replace(/^([\d])/, "$1");
            time.value = time.value.replace(/^([1])([\d]{1})/, "$1$2");
            time.value = time.value.replace(/^([3-9])([\d]{1})/, "2$2");
            time.value = time.value.replace(/^([2-9]{1})([4-9]{1})/, "$13");
            time.value = time.value.replace(/^([\d]{1})([\d]{1}):([6-9]{1})/, "$1$2:5");
            time.value = time.value.replace(/^([\d]{1})([\d]{1})$/, "$1$2:");
        }, 10);
    }

    // array duplicate
    function arrDuplicate(arr) {
        let res = [];
        let obj = {};
        for (let i = 0; i < arr.length; i++) {
            if ([undefined, null, ''].includes(arr[i])) {
                continue;
            }
            if (!obj[arr[i]]) {
                obj[arr[i]] = 1;
                res.push(arr[i]);
            }
        }
        return res;
    }

    // get search data
    function getSearchData(type = 'array') {
        let data = {};
        if (type === 'array') {
            for (let key in _data) {
                if (_data[key].value !== undefined && _data[key].value !== '') {
                    data[key] = _data[key].value
                }
            }
        } else if (type === 'string') {
            data = '';
            for (let key in _data) {
                if (![undefined, null, ''].includes(_data[key].value)) {
                    let value = _data[key].value;
                    if (controlJsType(value, 'string')) {
                        data = data + "&" + key + "=" + value;
                    } else if (controlJsType(value, 'array')) {
                        value.forEach(function (val) {
                            data = data + "&" + key + "=" + val;
                        });
                    }
                }
            }
        }
        return data;
    }

    // renderer input
    function rendererSearchFormOnInput(key, value, mold) {
        if ([undefined, null, ''].includes(value)) {
            $(_form).find("input[name='" + key + "']").val('');
            $(_form).find("input[name='" + key + "']").removeClass('bg-warning');
        } else {
            $(_form).find("input[name='" + key + "']").val(value);
            $(_form).find("input[name='" + key + "']").addClass('bg-warning');
        }
    }

    // renderer select
    function rendererSearchFormOnSelect(key, value, mold) {
        if ([undefined, null, ''].includes(value)) {
            $(_form).find("select[name='" + key + "']").val('').removeClass('bg-warning');
            if (key === 'paginate') {
                $(_form).find("select[name='" + key + "']").val(_this.paginations[0]).removeClass('bg-warning');
            }
        } else {
            $(_form).find("select[name='" + key + "']").val(value);
            if (key === 'paginate' && value == _this.paginations[0]) {
                return;
            }
            $(_form).find("select[name='" + key + "']").addClass('bg-warning');
        }
    }

    // renderer check
    function rendererSearchFormOnCheck(key, value, mold) {
        if ([undefined, null, ''].includes(value)) {
            $(_form).find("input[name='" + key + "']").prop("checked", false).removeClass('bg-warning');
        } else {
            if (controlJsType(value, 'array')) {
                value.forEach(function (_value) {
                    $(_form).find("input[name='" + key + "'][value='" + _value + "']").prop("checked", true).addClass('bg-warning');
                })
            } else if (controlJsType(value, 'string')) {
                $(_form).find("input[name='" + key + "'][value='" + value + "']").prop("checked", true).addClass('bg-warning');
            }
        }
    }

    // redener multiple select     input
    function rendererSearchFormOnMultipleSelect(key, value, mold) {
        let ul = $(_form).find("ul[name='" + key + "']");
        if ([undefined, null, ''].includes(value) || (controlJsType(value, 'array') && value.length === 0)) {
            $(_form).find("input[name='" + key + "_tip']").removeClass('bg-warning');
            ul.addClass('bg-warning');
        } else if (!!value) {
            $(_form).find("input[name='" + key + "_tip']").addClass('bg-warning');
            ul.addClass('bg-warning');
        } else if (controlJsType(value, 'array') && value.length >= 1) {
            $(_form).find("input[name='" + key + "_tip']").addClass('bg-warning');
            ul.addClass('bg-warning');
        }
        redenerUl(ul);
    }

    // redener multiple select     ul
    function redenerUl(ul) {
        let name = ul.attr('name');
        let select = _data[name].select;
        if ([null, undefined].includes(select)) {
            _data[name].select = [];
            select = [];
        }
        let lis = ul.find('li');
        if ([null, undefined, ''].includes(lis)) {
            return;
        } else {
            lis.get().forEach(function (dom) {
                if (select.includes($(dom).attr('value'))) {
                    dom.style.backgroundColor = "#4AA0E6";
                    $(dom).addClass('active');
                } else {
                    dom.style.backgroundColor = "#FFFFFF";
                    $(dom).removeClass('active');
                }
            })
            isMultiple(ul.attr('name'));
        }
    }

    function rendererSearchFormOnTime(key, value, mold) {
        if (![undefined, null, ''].includes(value)) {
            $(_form).find("input[name="+key+"]").val(value.substring(0, 10)).addClass('bg-warning');
            if (value.length > 11 + 5) {
                $(_form).find("input[name='" + key + "_tim']").val(value.substring(11, 5));
            }
        } else {
            $(_form).find("input[name="+key+"]").val("").removeClass('bg-warning');
            $(_form).find("input[name='" + key + "_tim']").val("");
        }
    }

    function visibleClearBtn() {
        let bool = false;
        for (const key in _data) {
            if (key === 'paginate') {
                if ((key === 'paginate' && _data[key].value !== _this.paginations[0])) {
                    bool = true;
                }
            } else {
                if (![undefined, null, ''].includes(_data[key].value)) {
                    if(controlJsType(_data[key].value,'array') && _data[key].value.length === 0 ){
                        continue;
                    }
                    bool = true;
                }
            }
        }
        if (bool) {
            _clearTr.show();

        } else {
            _clearTr.hide();
        }
    }

    function inputKeyDown() {
        $(_form).find('input').keydown(function (e) {
            if (e.keyCode === 13) {
                if (_this.keydownSearch) {
                    _this.onsubmit()
                }
                if (controlJsType(_this.keydownfun, 'fun')) {
                    _this.keydownfun();
                }
            }
        });

        $(_form).find("input[type='date']").change(function (e) {
            if (_this.keydownSearch) {
                _this.onsubmit()
            }
            if (controlJsType(_this.keydownfun, 'fun')) {
                _this.keydownfun();
            }
        });
    }

    function selectChange() {
        $(_form).find('select').change(function () {
            _this.onsubmit();
        })
    }

    function redenerSearchFormOnData(key, value, mold) {
        if (mold === 'input' ||mold === 'dateTime' || mold === 'dateTimeLocal') {
            rendererSearchFormOnInput(key, value, mold);
        } else if (mold === 'select') {
            rendererSearchFormOnSelect(key, value, mold);
        } else if (mold === 'check') {
            rendererSearchFormOnCheck(key, value, mold);
        } else if (mold === 'select_multiple_select') {
            rendererSearchFormOnMultipleSelect(key, value, mold);
        } else if (mold === 'time') {
            rendererSearchFormOnTime(key, value, mold);
        }
    }

    // 数据转换
    function switchData() {
        _this.condition.forEach(function (conditions) {
            conditions.forEach(function (condition) {
                if (['input', 'select', 'dateTime','dateTimeLocal', 'search_select', 'time', 'select_multiple_select','checkbox'].includes(condition.type)) {
                    if (!condition.select) {
                        condition.select = '';
                    }
                    let data = {
                        name: condition.name,
                        type: condition.type,
                        value: condition.value,
                        select: condition.select,
                        mold: ['input', 'dateTime'].includes(condition.type) ? 'input' : condition.type,
                        data:condition.data,
                        killings:condition.killings,
                        rules:condition.rules,
                    }
                    if (condition.type === 'search_select') {
                        data.mold = 'select';
                    }
                    if(condition.type === 'select_multiple_select'){
                        data.value = [];
                    }
                    _data[condition.name] = data;
                } else if (['dateTime_dateTime', 'input_input', 'input_select', 'dateTime_select'].includes(condition.type)) {
                    let types = condition.type.split("_");
                    if (!condition.select) {
                        condition.select = ['', ''];
                    }
                    if (!condition.value) {
                        condition.value = ['', ''];
                    }
                    condition.name.forEach(function (_name, index) {
                        let data = {
                            name: _name,
                            type: types[index],
                            value: condition.value[index],
                            select: condition.select[index],
                            mold: ['input', 'dateTime'].includes(types[index]) ? 'input' : types[index],
                            killings:condition.killings,
                            rules:condition.rules,
                        }
                        if(condition.killings&&Array.isArray(condition.killings)){
                            data.killings=condition.killings[index];
                        }
                        if(condition.rules&&Array.isArray(condition.rules)){
                            data.rules=condition.rules[index];
                        }
                        _data[_name] = data;
                    })
                }
            })
        })
    }

    // redererSearchForm on cookie
    function rendererSearchForm() {
        let url = document.referrer;
        let partt = /(Edit\/)|(\/eidt)|(eidt\/)/i;
        if (url.search(partt) > 0) {
            rendererOptionOnCookie();
        } else {
            rendererOptionOnUrl();
        }
    }

    function rendererOptionOnCookie() {
        let data = fetchCookie();
        if (data === undefined) {
            return;
        }
        data = JSON.parse(data);
        for (let key in data) {
            _data[key].value = data[key].value;
            _data[key].mold = data[key].mold;
            _data[key].select = data[key].select;
        }
        rendererSearchFormOn_data();
    }

    function rendererOptionOnUrl() {
        if (!window.location.search) {
            return;
        }
        searchOptionToUrlsearch();
        rendererSearchFormOn_data();
    }

    function rendererSearchFormOn_data() {
        for (let key in _data) {
            let value = _data[key].value, type = _data[key].type, mold = _data[key].mold;
            // if(value){
            //     let string = new String(value);
            //     if(string.length > 1 ){
            //         console.log(string);
            //         string = string.replace(/\+/g,' ');
            //         value = string
            //     }
            // }
            _data[key].select = value;

            if (['input', 'dateTime', 'dateTimeLocal'].includes(mold)) {
                rendererSearchFormOnInput(key, value, mold);
            } else if (['select'].includes(mold)) {
                rendererSearchFormOnSelect(key, value, mold);
            } else if (['checkbox'].includes(mold)) {
                rendererSearchFormOnCheck(key, value, mold);
            } else if (['select_multiple_select'].includes(mold)) {
                if (controlJsType(value, ['array', 'string'])) {
                    let ul = $(_form).find("ul[name='" + key + "']");
                    redenerUl(ul);
                    rendererSearchFormOnMultipleSelect(key, value, mold);
                }
            } else if (['time'].includes(type) && value !== undefined) {
                $(_form).find("input[name='" + key + "']").val(value.substr(0, 10)).addClass('bg-warning');
                $(_form).find("input[id='" + key + "_min']").val(value.substr(11, value.length));
            }
        }
        if ([undefined, null, ''].includes(data['paginate'])) {
            return;
        }
        if ([undefined, null, ''].includes(data['paginate'].value)) {
            $(_form).find("select[name='paginate']").val(_this.paginations[0]);
        } else {
            $(_form).find("select[name='paginate']").val(data['paginate'].value);
        }
    }

    // url path on search form option  renderer
    function searchOptionToUrlsearch() {
        let data = (window.location.search);
        data = decodeURIComponent(data).replace('%20'," ");
        if (!!data) {
            data = (data.substr(1)).split('&');
            data = convertArrayToObj(data);
            for (const key in data) {
                if(!data[key] || _this.param[key]){
                    continue;
                }
                if (key === 'paginate') {
                    _data[key] = {
                        name: key,
                        value: data[key],
                        type: 'select',
                        mold: 'select'
                    }
                } else if (key === 'page') {
                    _page = data[key];
                }  else if(_data[key].type === 'select_multiple_select' ){
                    if(!_data[key]){
                        _data[key].value = [];
                    }else{
                        _data[key].value = data[key].split(',');
                    }
                }else {
                    _data[key].value = data[key];
                }
            }
        }
    }

    // cookie -> data
    function set_dataOnCookie() {
        let data = fetchCookie();
        data = JSON.parse(data);
        if (!data) {
            return;
        }
        for (const key in data) {
            if (!!data[key]) {
                _data[key].value = data[key].value;
            }
        }
    }

    // array - > object
    function convertArrayToObj(arr) {
        if (!arr || !controlJsType(arr, 'array')) {
            return {};
        } else if (controlJsType(arr, 'array') && arr.length > 0) {
            let data = {};
            arr.forEach(function (map) {
                let arr = map.split('='), key = arr[0], value = arr[1];
                if (!data[key]) {
                    data[key] = value;
                } else {
                    if (controlJsType(data[key], 'string')) {
                        data[key] = [data[key], value];
                    } else if (controlJsType(data[key], 'array')) {
                        data[key].push(value);
                    }
                }
            })
            return data;
        }
    }

    //  paginate
    function pervPage() {
        let obj = getSearchData();
        if(!!obj['page'] && obj['page']>1){
            obj['page'] = obj['page']-1;
        }
        return getSearchUri(obj);
    }

    function nextPage() {
        let obj = getSearchData();
        if(!!obj['page'] ){
            obj['page'] = obj['page']+1;
        }else{
            obj['page'] = 2;
        }
        if(!obj['paginate']){
            obj['paginate'] = 50;
        }
        return getSearchUri(obj);
    }

    function getSearchObj() {
        let data = window.location.search;
        data = decodeURIComponent(data);
        if(!data){
            return {};
        }
        let saveData = {};
        data = data.substr(1).split('&');
        data.forEach(function (map) {
            let arr = map.split('&'),key = arr[0],value = arr[1];
            if(!!value){
                if (!saveData[key]) {
                    saveData[key] = value;
                } else {
                    if (controlJsType(data[key], 'string')) {
                        saveData[key] = [saveData[key] , value];
                    } else if (controlJsType(data[key], 'array')) {
                        saveData[key].push(value);
                    }
                }
            }
        })
        return saveData;
    }

    function getPage(){
        return  getSearchObj()['page'];
    }
    //  paginate
    function pervPage() {
        let obj = getSearchData();
        _page = getPage();
        if(!obj['paginate']){
            obj['paginate'] = 50;
        }
        if(Number(_page)>1){
            _page= Number(_page)-1;
        }else{
            _page = 1;
        }
        return getSearchUri(obj);
    }

    function nextPage() {
        let obj = getSearchData();
        _page = getPage();
        if(!_page){_page=1;}
        if(_page){
            _page = Number(_page)+ 1;
        }
        if(!obj['paginate']){
            obj['paginate'] = 50;
        }
        return getSearchUri(obj);
    }

    function goPage(page){
        let obj = getSearchData();
        _page = page;
        return getSearchUri(obj);
    }

    function getSearchUri(obj){
        let string = "?";
        for (const key in obj) {
            if(controlJsType(obj[key],['string','number'])){
                string+= key + "=" + obj[key]+'&';
            }else if( controlJsType(obj[key],'array')&&obj[key].length > 0){
                obj[key].forEach(function(value){
                    string+=key + "=" + value+'&';
                })
            }
        }
        return string;
    }

};