|
|
@@ -0,0 +1,1175 @@
|
|
|
+//let cookie = require('jquery.cookie');
|
|
|
+
|
|
|
+const query = function getQueryForm(data) {
|
|
|
+ {
|
|
|
+ this.el = data.el || '#from_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] || data.paginations;
|
|
|
+ this.keydownfun = data.keydownfun || undefined;
|
|
|
+ this.selectChange = data.selectChange || undefined;
|
|
|
+ this.searchClick = data.searchClick || undefined;
|
|
|
+ this.selectfun = data.selectfun || undefined;
|
|
|
+ this._onsubmit = data._onsubmit || true;
|
|
|
+ this.keydownSearch = data.keydownSearch || true;
|
|
|
+ this.selectChangeSearch = data.selectChangeSearch || true;
|
|
|
+ this.tip = data.tip || '';
|
|
|
+ this.nextPage = nextPage();
|
|
|
+ this.pervPage = pervPage();
|
|
|
+
|
|
|
+ // 提交表单
|
|
|
+ this.onsubmit = function () {
|
|
|
+ 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 !== '') {
|
|
|
+ form.append("<input name='" + key + "' value='" + map.value + "'>")
|
|
|
+ } else if ('array' === fetchJsType(map.value)) {
|
|
|
+ map.value.forEach(function (value) {
|
|
|
+ form.append("<input type='checkbox' name='" + key + "' value='" + value + "' checked='checked' >");
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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 _clearBtn = 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();
|
|
|
+ window.onscroll = function () {
|
|
|
+ let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
|
|
+ if (scrollTop > _parentNode_top) {
|
|
|
+ _form.addClass('fixed-top');
|
|
|
+ _parentNode.height(height);
|
|
|
+ } else {
|
|
|
+ _form.removeClass('fixed-top');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 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 (['dataTime_dataTime', 'input_input'].includes(condition.type)) {
|
|
|
+ td = $("<td style='width: 330px'</td>")
|
|
|
+ } else if (['select_multiple_select', 'time', 'dataTime_select'].includes(condition.type)) {
|
|
|
+ td = $("<td style='width: 280px'</td>");
|
|
|
+ } else if (['time', 'dataTime_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', 'dataTime', 'input_select'].includes(condition.type)) {
|
|
|
+ _width += 260;
|
|
|
+ } else if (['dataTime_DataTime', 'input_input'].includes(condition.type)) {
|
|
|
+ _width += 330;
|
|
|
+ } else if (['select_multiple_select','search_select'].includes(condition.type)) {
|
|
|
+ _width += 280;
|
|
|
+ } else if (['check'].includes(condition.type)) {
|
|
|
+ _width += 260;
|
|
|
+ } else if (['time', 'dataTime_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 label = $("<label class='col-form-label col-sm-2 p-0'></label>");
|
|
|
+ _clearBtn = $("<span class='btn btn-warning text-dark invisible'>清除过滤条件</span>");
|
|
|
+ _clearBtn.click(function () {
|
|
|
+ clearData();
|
|
|
+ visibleClearBtn();
|
|
|
+ })
|
|
|
+ let tr = $("<tr ><td colspan='10' style='height: 45px'></td></tr>");
|
|
|
+ tr.find('td').append(label);
|
|
|
+ label.append(_clearBtn);
|
|
|
+ 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 (_this._onsubmit) {
|
|
|
+ _this.onsubmit();
|
|
|
+ }
|
|
|
+ _this.onsubmit();
|
|
|
+ })
|
|
|
+ return div;
|
|
|
+ }
|
|
|
+
|
|
|
+ // create _pagination
|
|
|
+ function createPagination() {
|
|
|
+ _pagination = $("<select id='paginate' 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({});
|
|
|
+ window.location.href = _this.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 === "dataTime" && getDataTime(condition))
|
|
|
+ || (type === "time" && getTime(condition))
|
|
|
+ || (type === "input_input" && getInputInput(condition))
|
|
|
+ || (type === "dataTime_dataTime" && getDataTimeDataTime(condition))
|
|
|
+ || (type === "dataTime_select" && getDataTimeSelect(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 + "' 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: 100px;' 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 getDataTime(condition) {
|
|
|
+ let dataTime = $("<input type='date' class='form-control form-control-sm' name='" + condition.name + "' style='max-width: 200px' data-toggle='tooltip' data-placement='top' title='" + condition.tip + "' style='width: 200px'>");
|
|
|
+ dataTime.attr('title', controlJsType(condition.tip, 'undefined') ? '' : condition.tip);
|
|
|
+ dataTime.bind('input propertychange', function () {
|
|
|
+ let dom = {name: condition.name, type: 'dataTime', value: this.value, mold: 'dataTime'};
|
|
|
+ modifyData(dom);
|
|
|
+ })
|
|
|
+ return dataTime;
|
|
|
+ }
|
|
|
+
|
|
|
+ // time
|
|
|
+ function getTime(condition) {
|
|
|
+ let div = $("<div class='form-inline'></div>");
|
|
|
+ let dataTime = $("<input type='date' class='form-control form-control-sm' name='" + condition.name + "' style='width:150px' data-toggle='tooltip' data-placement='top' >");
|
|
|
+ dataTime.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]);
|
|
|
+
|
|
|
+ dataTime.bind('input propertychange', function () {
|
|
|
+ let value = this.value !== '' ? this.value + ' ' + ([null, undefined, ''].includes(min.value) ? '00:00' : min.value) : '';
|
|
|
+ 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(dataTime.val())) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ let value = ['null', 'undefined', ''].includes(dataTime.val()) ? '' : dataTime + ' ' + min.val();
|
|
|
+ // let value = dataTime.value !== '' ? dataTime.value + ' ' + (min.value === '' ? '00:00' : min. value) : '';
|
|
|
+ let dom = {name: condition.name, type: 'time', value: value, mold: 'time'};
|
|
|
+ modifyData(dom);
|
|
|
+ })
|
|
|
+ return div.append(dataTime).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);
|
|
|
+ }
|
|
|
+
|
|
|
+ // dataTime_dataTime
|
|
|
+ function getDataTimeDataTime(condition) {
|
|
|
+ let div = $("<div class='form-inline'></div>");
|
|
|
+ let dataTime1 = $("<input type='date' class='form-control form-control-sm' name='" + condition.name[0] + "' style='width: 150px' data-toggle='tooltip' data-placement='top' >");
|
|
|
+ dataTime1.attr('title', controlJsType(condition.tip[0], 'undefined') ? '' : condition.tip[0]);
|
|
|
+
|
|
|
+ let dataTime2 = $("<input type='date' class='form-control form-control-sm ml-2' name='" + condition.name[1] + "' style='width: 150px;' data-toggle='tooltip' data-placement='top' >");
|
|
|
+ dataTime2.attr('title', controlJsType(condition.tip[1], 'undefined') ? '' : condition.tip[1]);
|
|
|
+
|
|
|
+ dataTime1.bind('input propertychange', function () {
|
|
|
+ let dom = {name: this.name, type: 'dataTime_dataTime', value: this.value, mold: 'dataTime'};
|
|
|
+ modifyData(dom);
|
|
|
+ })
|
|
|
+ dataTime2.bind('input propertychange', function () {
|
|
|
+ let dom = {name: this.name, type: 'dataTime_dataTime', value: this.value, mold: 'dataTime'};
|
|
|
+ modifyData(dom);
|
|
|
+ })
|
|
|
+ return div.append(dataTime1).append(dataTime2);
|
|
|
+ }
|
|
|
+
|
|
|
+ // dataTime_select
|
|
|
+ function getDataTimeSelect(condition) {
|
|
|
+ let div = $("<div class='form-inline'></div>");
|
|
|
+ let dataTime = $("<input type='date' class='form-control form-control-sm' name='" + condition.name[0] + "' style='max-width: 150px;' data-toggle='tooltip' data-placement='top' >");
|
|
|
+ dataTime.attr('title', controlJsType(condition.tip[0], 'undefined') ? '' : condition.tip[0]);
|
|
|
+
|
|
|
+ let select = $("<select name='" + condition.name[1] + "' class='form-control form-control-sm ' data-toggle='tooltip' data-placement='top' style='max-width: 75px'></select>");
|
|
|
+ select.attr('title', controlJsType(condition.tip[1], 'undefined') ? '' : condition.tip[1]);
|
|
|
+
|
|
|
+ fillSelectOption(select, condition.data)
|
|
|
+ dataTime.bind('input propertychange', function () {
|
|
|
+ let dom = {name: this.name, type: 'dataTime_select', value: this.value, mold: 'dataTime'};
|
|
|
+ modifyData(dom);
|
|
|
+ })
|
|
|
+ select.change(function () {
|
|
|
+ let dom = {name: this.name, type: 'dataTime_select', value: this.value, mold: 'select'};
|
|
|
+ modifyData(dom);
|
|
|
+ })
|
|
|
+ return div.append(dataTime).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' 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 = _data[condition.name].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 (!select_div.is(':focus')) {
|
|
|
+ ul_div.hide();
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ })
|
|
|
+ select_div.focus(function () {
|
|
|
+ ul_div.show();
|
|
|
+ })
|
|
|
+ select_div.blur(function () {
|
|
|
+ ul_div.hide();
|
|
|
+ })
|
|
|
+ ul_div.blur(function () {
|
|
|
+ ul_div.hide();
|
|
|
+ })
|
|
|
+ ul_div.hide();
|
|
|
+ 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' 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);
|
|
|
+ });
|
|
|
+ })
|
|
|
+ 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 (controlJsType(dom_data, ['undefined', 'null', '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(name);
|
|
|
+ _this.onsubmit();
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function isMultiple(name) {
|
|
|
+ let label = $('#' + name + '_lab');
|
|
|
+ let select = $('#' + name + '_sel');
|
|
|
+ let dom_data = _data[name].value;
|
|
|
+
|
|
|
+ if (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);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 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) {
|
|
|
+ console.log(key);
|
|
|
+ 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
|
|
|
+ this.getSearchData = function (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);
|
|
|
+ console.log(value === _this.paginations[0]);
|
|
|
+ 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(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)) {
|
|
|
+ bool = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (bool) {
|
|
|
+ _clearBtn.addClass('visible').removeClass('invisible');
|
|
|
+
|
|
|
+ } else {
|
|
|
+ _clearBtn.addClass('invisible').removeClass('visible');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ 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') {
|
|
|
+ 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', 'dataTime', 'search_select', 'time', 'select_multiple_select'].includes(condition.type)) {
|
|
|
+ if (!condition.select) {
|
|
|
+ condition.select = '';
|
|
|
+ }
|
|
|
+ let data = {
|
|
|
+ name: condition.name,
|
|
|
+ type: condition.type,
|
|
|
+ value: condition.value,
|
|
|
+ select: condition.select,
|
|
|
+ mold: ['input', 'dataTime'].includes(condition.type) ? 'input' : condition.type
|
|
|
+ }
|
|
|
+ if (condition.type === 'search_select') {
|
|
|
+ data.mold = 'select';
|
|
|
+ }
|
|
|
+ _data[condition.name] = data;
|
|
|
+ } else if (['dataTime_dataTime', 'input_input', 'input_select', 'dataTime_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', 'dataTime'].includes(types[index]) ? 'input' : types[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() {
|
|
|
+ console.log('rendererSearchFromOnCookie');
|
|
|
+ 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() {
|
|
|
+ console.log('rendererSearchFormOn_data', _data);
|
|
|
+
|
|
|
+ for (let key in _data) {
|
|
|
+ let value = _data[key].value, type = _data[key].type, mold = _data[key].mold;
|
|
|
+ _data[key].select = value;
|
|
|
+
|
|
|
+ if (['input', 'dataTime'].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));
|
|
|
+ $(_form).find("input[id='" + key + "_min']").val(value.substr(11, value.length));
|
|
|
+ }
|
|
|
+
|
|
|
+ /* if (['input', 'dataTime', 'input_input', 'dataTime_dataTime'].includes(type)) {
|
|
|
+ rendererSearchFormOnInput(key,value,mold);
|
|
|
+ } else if (['select', 'input_select', 'dataTime_select'].includes(type)) {
|
|
|
+ if (mold === 'select') {
|
|
|
+ rendererSearchFormOnSelect(key,value,mold)
|
|
|
+ } else if (mold === 'input') {
|
|
|
+ rendererSearchFormOnInput(key,value,mold);
|
|
|
+ } else if (mold === 'dataTime') {
|
|
|
+ rendererSearchFormOnInput(key,value,mold);
|
|
|
+ }
|
|
|
+ } else if (['input_select_text'].includes(type)) {
|
|
|
+ if (mold === 'input') {
|
|
|
+ rendererSearchFormOnInput(key,value,mold);
|
|
|
+ } else if (mold === 'select') {
|
|
|
+ rendererSearchFormOnSelect(key,value,mold)
|
|
|
+ }
|
|
|
+ } else if (['checkbox'].includes(type)) {
|
|
|
+ if (controlJsType(value, 'array')) {
|
|
|
+ value.forEach(function (map) {
|
|
|
+ $(_form).find("input[type='checkbox'][name='" + key + "'][value='" + map + "']").attr("checked", true);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else if (['select_multiple_select'].includes(type)) {
|
|
|
+ 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));
|
|
|
+ $(_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);
|
|
|
+ if (!!data) {
|
|
|
+ data = (data.substr(1)).split('&');
|
|
|
+ data = convertArrayToObj(data);
|
|
|
+ for (const key in data) {
|
|
|
+ if (key === 'paginate') {
|
|
|
+ _data[key] = {
|
|
|
+ name: key,
|
|
|
+ value: data[key],
|
|
|
+ type: 'select',
|
|
|
+ mold: 'select'
|
|
|
+ }
|
|
|
+ } else if (key === 'page') {
|
|
|
+ _page = data[key];
|
|
|
+ } else {
|
|
|
+ _data[key].value = data[key];
|
|
|
+ }
|
|
|
+ console.log('key', key, typeof 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 = getSearchObj();
|
|
|
+ if(!!obj['page'] && obj['page']>1){
|
|
|
+ obj['page'] = obj['page']-1;
|
|
|
+ }
|
|
|
+ return getSearchUri(obj);
|
|
|
+ }
|
|
|
+
|
|
|
+ function nextPage() {
|
|
|
+ let obj = getSearchObj();
|
|
|
+ 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 getSearchUri(obj){
|
|
|
+ let string = "?";
|
|
|
+ for (const key in obj) {
|
|
|
+ if(controlJsType(obj[key],'string')){
|
|
|
+ string+= key + "=" + obj[key]+'&';
|
|
|
+ }else if( controlJsType(obj[key],'array')&&obj[key].length > 0){
|
|
|
+ obj[key].forEach(function(value){
|
|
|
+ string+=key + "=" + value+'&';
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return string;
|
|
|
+ }
|
|
|
+
|
|
|
+};
|
|
|
+
|
|
|
+//module.exports = query;
|
Zhouzhendong