/** * 表单元素渲染插件 * @version: 2.1.0 * # 版本修改: * - 为了实现更加复杂的交互,提供laytpForm中的所有表单元素独立的渲染方法 * - renderOne(表单元素唯一标识/jquery对象, '表单元素class标识') // 统一渲染单个表单元素方法 * - renderSelect(表单元素唯一标识/jquery对象) // 渲染单个select * - renderXmSelect(表单元素唯一标识/jquery对象) // 渲染单个xmSelect * - renderUpload(表单元素唯一标识/jquery对象) // 渲染单个upload * - ... * @Author: JunStar * @Date: 2020-08-17 18:13:50 * @Last Modified by: JunStar * @Last Modified time: 2022年8月29日14:59:11 */ layui.define([ 'xmSelect', 'laytpUpload', 'laytpIcon', 'laydate', 'colorpicker' ], function (exports) { const MOD_NAME = "laytpForm"; let $ = layui.$ , facade = layui.facade ; window.xmSelectObj = {}; window.xmSelectJqueryObj = {}; window.xmSelectData = {}; let laytpForm = {}; window.linkageXmSelectData = {}; window.linkageXmSelectJqueryObj = {}; window.linkageXmSelectObj = {}; //延迟对象数组 let defArr = []; /** * 初始化所有表单元素的数据,比如下拉框的待选择项和选定项 */ laytpForm.initData = { select: function () { let obj = $("select"); layui.each(obj, function (key, item) { layui.laytpForm.initDataOne.selectOne(item); }); }, xmSelect: function () { let obj = $(".xmSelect"); layui.each(obj, function (key, item) { layui.laytpForm.initDataOne.xmSelectOne(item); }); }, linkageXmSelect: function () { let obj = $(".linkageXmSelect"); layui.each(obj, function (key, item) { layui.laytpForm.initDataOne.linkageXmSelectOne(item); }); }, linkageSelect: function () { let obj = $(".linkageSelect"); layui.each(obj, function (key, item) { layui.laytpForm.initDataOne.linkageSelectOne(item); }); }, upload: function () { let obj = $(".laytpUpload"); layui.each(obj, function (key, item) { layui.laytpForm.initDataOne.uploadOne(item); }); }, icon: function () { let obj = $(".laytpIcon"); layui.each(obj, function (key, item) { layui.laytpForm.initDataOne.iconOne(item); }); }, laydate: function () { let obj = $("input[type='text']").filter(".laydate"); layui.each(obj, function (key, item) { layui.laytpForm.initDataOne.laydateOne(item); }); }, colorPicker: function () { let obj = $("div").filter(".colorPicker"); layui.each(obj, function (key, item) { layui.laytpForm.initDataOne.colorPickerOne(item); }); }, /** * 编辑器 * 此方法已废弃,实现方式变更,使用iframe调用编辑器页面进行展示 * 原因:多种编辑器在单页面下进行加载展示,会有js、css冲突的情况,改成iframe就不会出现此问题 */ // editorRender: function () { // let obj = $(".editor"); // layui.each(obj, function (key, item) { // let type = $(item).data('type'); // let id = $(item).attr('id'); // layui.use(type, function () { // layui[type].render(id); // }); // }); // }, }; // 将html标记元素渲染成指定的表单元素 laytpForm.initDataOne = { /** * 默认下拉框 * * @param item 需要渲染的jquery对象 */ selectOne: function (item) { let route = $(item).data("route"); if (route) { let selected = $(item).data("selected"); let valueField = $(item).data("valuefield") ? $(item).data("valuefield") : 'id'; let showField = $(item).data("showfield") ? $(item).data("showfield") : 'name'; let placeholder = $(item).data("placeholder"); //将ajax的延迟对象,存入延迟对象数组defArr中 defArr.push( facade.ajax({ method: "GET", route: route, data: {"paging": 0}, successAlert: false }).then(function (res) { if (placeholder) { $(item).append(""); } for (key in res.data) { let optionValue = (valueField !== "k") ? res.data[key][valueField] : key; let optionText = (showField !== "v") ? res.data[key][showField] : res.data[key]; if (selected === optionValue) { $(item).append(""); } else { $(item).append(""); } } }) ); } }, /** * xmSelect * - 获取父级窗口xmSelect组件已经选中的值,console.log(parent.xmSelectObj[id].getValue()); * - 获取当前窗口xmSelect组件已经选中的值,console.log(xmSelectObj[id].getValue()); * - 动态更新xmSelect组件, * - xmSelectObj[id].update(改变了的属性值); // 如果你很了解xmSelect手册,可以使用此方法 * - 更改html属性值,调用laytpForm.updateXmSelect(id); *
* @param item 需要渲染的jquery对象 * @returns {boolean} */ xmSelectOne: function (item) { var obj, el; if (typeof item == "string") { el = ($('.xmSelect[data-id="' + item + '"]').length == 0) ? '.xmSelect[data-name="' + item + '"]' : '.xmSelect[data-id="' + item + '"]'; } else { el = item; } obj = $(el); let id = obj.data("id"); let name = obj.data("name"); if (!id && !name) { facade.error("xmSelect组件data-id和data-name属性值均未定义"); return false; } if (!id && name) id = name; if (window.xmSelectObj[id]) { return false; } let source = obj.data("source"); if (!source) { facade.error('xmSelect插件' + id + '未定义data-source属性值'); return false; } window.xmSelectData[id] = { id: id, name: name, sourceType: obj.data("sourcetype") ? obj.data("sourcetype") : "data", source: source, param: obj.data("param") ? obj.data("param") : {}, customParam: obj.data("customparam") ? obj.data("customparam") : {}, search: obj.data("search") ? obj.data("search") : false, searchParam: obj.data("searchparam") ? obj.data("searchparam") : {}, searchCustomParam: obj.data("searchcustomparam") ? obj.data("searchcustomparam") : {}, textField: obj.data("textfield") ? obj.data("textfield") : 'name', subTextField: obj.data("subtextfield") ? obj.data("subtextfield") : '', valueField: obj.data("valuefield") ? obj.data("valuefield") : "id", iconField: obj.data("iconfield") ? obj.data("iconfield") : "", sourceTree: obj.data("sourcetree") === true, treeType: (obj.data("treetype") === 'cascader') ? 'cascader' : 'tree', onchange: obj.data("onchange") ? obj.data("onchange") : "", paging: obj.data("paging") ? obj.data("paging") : false, pageSize: obj.data("pagesize") ? obj.data("pagesize") : 10, radio: obj.data("radio") === true, strict: (typeof obj.data("strict") !== "undefined") ? obj.data("strict") : !(obj.data("radio") === true), selected: obj.data("selected") ? obj.data("selected").toString() : '', max: obj.data("max") ? obj.data("max") : 0, direction: obj.data("direction") ? obj.data("direction") : "auto", layVerify: obj.data("layverify") ? obj.data("layverify") : "", layVerType: obj.data("layvertype") ? obj.data("layvertype") : "", placeholder: obj.data("placeholder") ? obj.data("placeholder") : "请选择", searchKeyword: '', onNum: 0, } var jsonTypeAttr = ['param', 'customParam', 'searchParam', 'searchCustomParam']; for (key in jsonTypeAttr) { if (typeof window.xmSelectData[id][jsonTypeAttr[key]] != "object") { facade.error("data-id=" + id + "的xmSelect下拉框组件,data-" + jsonTypeAttr[key] + "属性值需要是一个正确的json字符串"); return false; } } if (window.xmSelectData[id].sourceType == 'data') { if (typeof window.xmSelectData[id].source != "object") { facade.error("data-id=" + id + "的xmSelect下拉框组件,data-source属性值需要是一个正确的json字符串"); return false; } } // 定义树形结构渲染参数 let renderTreeOptions = {}; // 定义级联模式渲染参数 let renderCascaderOptions = {}; // 赋值树形结构渲染参数和级联模式渲染参数 if (window.xmSelectData[id].sourceTree) { if (window.xmSelectData[id].treeType === 'tree') { renderTreeOptions = { //是否显示树状结构 show: true, //是否展示三角图标 showFolderIcon: true, //是否显示虚线 showLine: true, //间距 indent: 20, //默认展开节点的数组, 为 true 时, 展开所有节点 expandedKeys: true, //是否严格遵守父子模式 strict: window.xmSelectData[id].strict, //是否开启极简模式 simple: true, clickExpand: false, clickCheck: true, }; } else if (window.xmSelectData[id].treeType === 'tree-group') { renderTreeOptions = { //是否显示树状结构 show: false, //是否展示三角图标 showFolderIcon: true, //是否显示虚线 showLine: true, //间距 indent: 20, //默认展开节点的数组, 为 true 时, 展开所有节点 expandedKeys: true, //是否严格遵守父子模式 strict: window.xmSelectData[id].strict, //是否开启极简模式 simple: true, clickExpand: false, clickCheck: true, }; } else { renderCascaderOptions.cascader = { show: true, indent: 200, //是否严格遵守父子模式 strict: window.xmSelectData[id].strict, }; } } // 定义渲染参数 let renderOptions = { el: el, id: id, name: name ? name : "", language: 'zn', data: [], filterable: true, filterMethod: function (val, item, index, prop) { if (val) { //主标题中包含的大小写都搜索出来 if (window.xmSelectData[id].textField && item[window.xmSelectData[id].textField].toLowerCase().indexOf(val.toLowerCase()) !== -1) { return true; //副标题中包含的大小写都搜索出来 } else if (window.xmSelectData[id].subTextField && item[window.xmSelectData[id].subTextField].toLowerCase().indexOf(val.toLowerCase()) !== -1) { return true; } return false;//其他的就不要了 } else { return true; } }, radio: window.xmSelectData[id].radio, searchTips: "输入关键字进行搜索", maxMethod: function (selectedData) { facade.error("最多可选" + selectedData.length + "个数据"); }, layVerify: window.xmSelectData[id].layVerify, layVerType: window.xmSelectData[id].layVerType, clickClose: window.xmSelectData[id].radio, tips: window.xmSelectData[id].placeholder, toolbar: { show: true, list: !(obj.data("radio") === true) ? ['ALL', 'REVERSE', 'CLEAR'] : ['CLEAR'] }, theme: { color: localStorage.getItem("theme-color-color") }, direction: window.xmSelectData[id].direction, textField: window.xmSelectData[id].textField, subTextField: window.xmSelectData[id].subTextField, valueField: window.xmSelectData[id].valueField, iconField: window.xmSelectData[id].iconField, sourceTree: window.xmSelectData[id].sourceTree, treeType: window.xmSelectData[id].treeType, paging: window.xmSelectData[id].paging, pageSize: window.xmSelectData[id].pageSize, show: function () { $('.xm-search-input', xmSelectObj[id].dom) .val(xmSelectData[id].searchKeyword) .focus(); }, on: function (params) { window.xmSelectData[id].onNum++; if (window.xmSelectData[id].onchange) { if (typeof window[window.xmSelectData[id].onchange] === "function") { if (!window.xmSelectData[id].selected) { window[window.xmSelectData[id].onchange].call(this, params); } else { if (window.xmSelectData[id].paging) { if (window.xmSelectData[id].onNum > 1) { window[window.xmSelectData[id].onchange].call(this, params); } } else { window[window.xmSelectData[id].onchange].call(this, params); } } } else { facade.error(window.xmSelectData[id].onchange + "回调函数未定义"); } } }, model: { label: { block: { template: function (item) { let template = item[window.xmSelectData[id].textField]; template = window.xmSelectData[id].iconField ? '' + template : template; return template; }, showIcon: !(window.xmSelectData[id].radio === true) }, }, icon: (window.xmSelectData[id].radio === true && !window.xmSelectData[id].sourceTree) ? "hidden" : "show", }, template: function (item) { let template = item.item[window.xmSelectData[id].textField]; template = window.xmSelectData[id].iconField ? '' + template : template; if (window.xmSelectData[id].subTextField.indexOf('.') !== -1) { var subTextFieldArr = window.xmSelectData[id].subTextField.split('.'); if (item.item[subTextFieldArr[0]]) { template = template + '' + item.item[subTextFieldArr[0]][subTextFieldArr[1]] + ''; } } else { template = window.xmSelectData[id].subTextField ? template + '' + item.item[window.xmSelectData[id].subTextField] + '' : template; } return template; }, prop: { name: window.xmSelectData[id].textField , value: window.xmSelectData[id].valueField }, tree: renderTreeOptions, cascader: renderCascaderOptions, autoRow: true, // 如果选中的项目过多,会自动变动输入框的高度 }; // 根据数据来源的不同,进行不同方式的渲染xmSelect组件 if (window.xmSelectData[id].sourceType === "route") { // 只要是route方式获取数据进行渲染组件,那么就需要先组合查询条件 let ajaxParams = {}; var param, customParam, searchParam, searchCustomParam = {}; var key; ajaxParams['search_param'] = {}; if (window.xmSelectData[id].selected && window.xmSelectData[id].selected !== "undefined") { ajaxParams.selected = window.xmSelectData[id].selected.split(','); ajaxParams.selectedField = window.xmSelectData[id].valueField; } if (window.xmSelectData[id].param) { param = window.xmSelectData[id].param; for (key in param) { ajaxParams['search_param'][key] = param[key]; } } if (window.xmSelectData[id].customParam) { customParam = window.xmSelectData[id].customParam; for (key in customParam) { ajaxParams[key] = customParam[key]; } } // 如果是树形结构的数据,是先进行ajax请求,然后渲染组件 if (window.xmSelectData[id].sourceTree) { ajaxParams.is_tree = 1; // 如果开启了search且searchParam或者searchCustomParam有值,就需要开启远程搜索 if (window.xmSelectData[id].search && (window.xmSelectData[id].searchParam || window.xmSelectData[id].searchCustomParam)) { renderOptions.remoteSearch = true; renderOptions.remoteMethod = function (val, cb, show, pageIndex) { if (window.xmSelectData[id].searchParam) { searchParam = window.xmSelectData[id].searchParam; for (var searchParamKey in searchParam) { ajaxParams['search_param'][searchParamKey] = searchParam[searchParamKey]; ajaxParams['search_param'][searchParamKey]['value'] = val; } } if (window.xmSelectData[id].searchCustomParam) { searchCustomParam = window.xmSelectData[id].searchCustomParam; for (var searchCustomParamKey in searchCustomParam) { ajaxParams[searchCustomParamKey] = searchCustomParam[searchCustomParamKey]; ajaxParams[searchCustomParamKey]['value'] = val; } } if (val) { if ($.isEmptyObject(window.xmSelectData[id].searchParam)) { ajaxParams['search_param'][window.xmSelectData[id].textField] = { "condition": "LIKE", "value": val }; } } else { // 1. 用户在页面上先输入搜索值,后删除搜索值,如果没有如下删除语句,ajaxParams对象不会有改变,还是会用有值时的val进行查询 // 2. 如果不进行任何判断,仅执行重新定义ajaxParams,会传递like空的查询条件 // 所以当没有搜索值时,最好是删除查询条件 Reflect.deleteProperty(ajaxParams['search_param'], window.xmSelectData[id].textField); } } } facade.ajax({ method: "GET", route: source, data: ajaxParams, successAlert: false }).done(function (res) { renderOptions.paging = 0; // 是否分页的标识使用0和1,否则是一个字符串传递到后台 renderOptions.data = res.data; window.xmSelectObj[id] = xmSelect.render(renderOptions); if (window.xmSelectData[id].selected && window.xmSelectData[id].selected !== "undefined") { window.xmSelectObj[id].setValue(window.xmSelectData[id].selected.split(',')); } }); } else { // 非树形结构渲染组件,需要开启远程分页进行组件渲染 renderOptions.pageRemote = true; renderOptions.remoteMethod = function (val, cb, show, pageIndex) { window.xmSelectData[id].searchKeyword = val; //val: 搜索框的内容, 不开启搜索默认为空, cb: 回调函数, show: 当前下拉框是否展开, pageIndex: 当前第几页 ajaxParams.paging = window.xmSelectData[id].paging ? 1 : 0; ajaxParams.page = pageIndex; ajaxParams.limit = window.xmSelectData[id].pageSize; if (window.xmSelectData[id].searchParam) { searchParam = window.xmSelectData[id].searchParam; for (var searchParamKey in searchParam) { ajaxParams['search_param'][searchParamKey] = searchParam[searchParamKey]; ajaxParams['search_param'][searchParamKey]['value'] = val; } } if (window.xmSelectData[id].searchCustomParam) { searchCustomParam = window.xmSelectData[id].searchCustomParam; for (var searchCustomParamKey in searchCustomParam) { ajaxParams[searchCustomParamKey] = searchCustomParam[searchCustomParamKey]; ajaxParams[searchCustomParamKey]['value'] = val; } } if (val) { if ($.isEmptyObject(window.xmSelectData[id].searchParam)) { ajaxParams['search_param'][window.xmSelectData[id].textField] = { "condition": "LIKE", "value": val }; } } else { // 1. 用户在页面上先输入搜索值,后删除搜索值,如果没有如下删除语句,ajaxParams对象不会有改变,还是会用有值时的val进行查询 // 2. 如果不进行任何判断,仅执行重新定义ajaxParams,会传递like空的查询条件 // 所以当没有搜索值时,最好是删除查询条件 Reflect.deleteProperty(ajaxParams['search_param'], window.xmSelectData[id].textField); } facade.ajax({ route: source, data: ajaxParams, successAlert: false, }).done(response => { //这里是success的处理 var res = window.xmSelectData[id].paging ? response.data : response; if (window.xmSelectData[id].selected && window.xmSelectData[id].selected !== "undefined") { var selectedArr = window.xmSelectData[id].selected.split(','); } for (var key in res.data) { if (facade.inArray(res.data[key][window.xmSelectData[id].valueField], selectedArr)) { res.data[key]["selected"] = true; } else { res.data[key]["selected"] = false; } } //回调需要两个参数, 第一个: 数据数组, 第二个: 总页码 window.xmSelectData[id].paging ? cb(res.data, res.last_page) : cb(res.data); }).fail(err => { //这里是error的处理 cb([], 0); }); }; window.xmSelectObj[id] = xmSelect.render(renderOptions); } } else if (window.xmSelectData[id].sourceType === "data") { renderOptions.data = window.xmSelectData[id].source; window.xmSelectObj[id] = xmSelect.render(renderOptions); if (window.xmSelectData[id].selected && window.xmSelectData[id].selected !== "undefined") { window.xmSelectObj[id].setValue(window.xmSelectData[id].selected.split(',')); } } }, /** * linkageXmSelect,使用xmSelect实现的联动下拉框组件 * */ linkageXmSelectOne: function (item) { let id = $.trim($(item).data('id'));//id属性 let name = $.trim($(item).data('name'));//name属性 if (!id && !name) { facade.error('linkageXmSelect组件data-id和data-name属性不能同时为空'); return false; } if (!id && name) id = name; if (typeof window.linkageXmSelectObj[id] != "undefined") { facade.error("linkageXmSelect联动下拉框的data-id或data-name属性值" + id + "重复"); return false; } let textField = $(item).data('textfield') ? $(item).data('textfield') : ''; if (!textField) { facade.error('标识为' + id + '的linkageXmSelect联动下拉框组件未定义data-textField属性'); return false; } let leftId = $(item).data('leftid') ? $(item).data('leftid') : ''; let rightId = $(item).data('rightid') ? $(item).data('rightid') : ''; if (!leftId && !rightId) { facade.error('标识为' + id + '的linkageXmSelect联动下拉框组件data-leftId和data-rightId属性不能同时为空'); return false; } window.linkageXmSelectJqueryObj[id] = item; window.linkageXmSelectData[id] = { "id": id, "name": $(item).data('name') ? $(item).data('name') : '', "leftId": $(item).data('leftid') ? $(item).data('leftid') : '', "rightId": $(item).data('rightid') ? $(item).data('rightid') : '', "route": $(item).data('route') ? $(item).data('route') : '', "url": $(item).data('url') ? $(item).data('url') : '', "param": $(item).data('param') ? $(item).data('param') : {}, "customParam": $(item).data('customparam') ? $(item).data('cutomparam') : {}, "paging": $(item).data('paging') === true, "pageSize": $(item).data('pagesize') ? $(item).data('pagesize') : 10, "search": $(item).data('search') ? $(item).data('search') : true, "searchParam": $(item).data('searchparam') ? $(item).data('searchparam') : {}, "leftOnchangeParam": $(item).data('leftonchangeparam') ? $(item).data('leftonchangeparam') : {}, "leftOnchangeCustomParam": $(item).data('leftonchangecustomparam') ? $(item).data('leftonchangecustomparam') : {}, "textField": textField, "subTextField": $(item).data('subtextfield') ? $(item).data('subtextfield') : '', "iconField": $(item).data('iconfield') ? $(item).data('iconfield') : '', "valueField": $(item).data('valuefield') ? $(item).data('valuefield') : 'id', "selected": $(item).data('selected') ? $(item).data('selected').toString() : '', "onchange": $(item).data('onchange') ? $(item).data('onchange') : '', "placeholder": $(item).data('placeholder') ? $(item).data('placeholder') : '请选择', "layVerify": $(item).data('layverify') ? $(item).data('layverify') : '', "layVerType": $(item).data('layvertype') ? $(item).data('layvertype') : '', "onNum": 0, "searchKeyword": '', direction: $(item).data("direction") ? $(item).data("direction") : "auto", } var jsonTypeAttr = ['param', 'customParam', 'searchParam', 'leftOnchangeParam', 'leftOnchangeCustomParam']; for (key in jsonTypeAttr) { if (typeof window.linkageXmSelectData[id][jsonTypeAttr[key]] != "object") { facade.error("data-id=" + id + "的linkageXmSelect联动下拉框组件,data-" + jsonTypeAttr[key] + "属性值需要是一个正确的json字符串"); return false; } } if (window.linkageXmSelectData[id].search && $.isEmptyObject(window.linkageXmSelectData[id].searchParam)) { window.linkageXmSelectData[id].searchParam[textField] = {"condition": "LIKE"}; } window.linkageXmSelectObj[id] = xmSelect.render({ el: item, name: window.linkageXmSelectData[id].name, //配置搜索 filterable: window.linkageXmSelectData[id].search, //配置远程分页 paging: window.linkageXmSelectData[id].paging, pageSize: window.linkageXmSelectData[id].pageSize, pageRemote: true, prop: { name: window.linkageXmSelectData[id].textField , value: window.linkageXmSelectData[id].valueField }, model: { label: { block: { showIcon: false } }, icon: "hidden" }, direction: window.linkageXmSelectData[id].direction, layVerify: window.linkageXmSelectData[id].layVerify, layVerType: window.linkageXmSelectData[id].layVerType, //template是设置下拉框的模板 template: function (item) { let template = item.item[window.linkageXmSelectData[id].textField]; template = window.linkageXmSelectData[id].iconField ? '' + template : template; template = window.linkageXmSelectData[id].subTextField ? template + '' + item.item[window.linkageXmSelectData[id].subTextField] + '' : template; return template; }, radio: true, clickClose: true, tips: window.linkageXmSelectData[id].placeholder, toolbar: { show: true, list: ['CLEAR'] }, theme: { color: localStorage.getItem("theme-color-color") }, filterMethod: function (val, item, index, prop) { if (val) { //主标题中包含的大小写都搜索出来 if (window.linkageXmSelectData[id].textField && item[window.linkageXmSelectData[id].textField].toLowerCase().indexOf(val.toLowerCase()) !== -1) { return true; //副标题中包含的大小写都搜索出来 } else if (window.linkageXmSelectData[id].subTextField && item[window.linkageXmSelectData[id].subTextField].toLowerCase().indexOf(val.toLowerCase()) !== -1) { return true; } return false;//其他的就不要了 } else { return true; } }, show: function () { $('.xm-search-input', window.linkageXmSelectData[id].dom) .val(linkageXmSelectData[id].searchKeyword) .focus(); }, //数据处理 remoteMethod: function (val, cb, show, pageIndex) { window.linkageXmSelectData[id].searchKeyword = val; if (window.linkageXmSelectData[id].leftId) { if (!$(window.linkageXmSelectJqueryObj[window.linkageXmSelectData[id].leftId]).data('selected')) { cb([], 0); return false; } } var remoteSearchParam = {}; var ajaxParams = {}; ajaxParams = { paging: window.linkageXmSelectData[id].paging ? 1 : 0, page: pageIndex, limit: window.linkageXmSelectData[id].pageSize, selected: window.linkageXmSelectData[id].selected, selectedField: window.linkageXmSelectData[id].valueField, }; remoteSearchParam = window.linkageXmSelectData[id].param; if (window.linkageXmSelectData[id].searchParam) { for (key in window.linkageXmSelectData[id].searchParam) { remoteSearchParam[key] = { value: val, condition: window.linkageXmSelectData[id].searchParam[key].condition, } } } if (window.linkageXmSelectData[id].leftId) { if ($(window.linkageXmSelectJqueryObj[window.linkageXmSelectData[id].leftId]).data('selected')) { if (window.linkageXmSelectData[window.linkageXmSelectData[id].leftId].onNum <= 1) { if (window.linkageXmSelectData[id].leftOnchangeParam) { for (key in window.linkageXmSelectData[id].leftOnchangeParam) { remoteSearchParam[key] = { value: $(window.linkageXmSelectJqueryObj[window.linkageXmSelectData[id].leftId]).data('selected'), condition: window.linkageXmSelectData[id].leftOnchangeParam[key].condition, } } } if (window.linkageXmSelectData[id].leftOnchangeCustomParam) { for (key in window.linkageXmSelectData[id].leftOnchangeCustomParam) { ajaxParams[key] = window.linkageXmSelectData[id].leftOnchangeCustomParam[key]; } } } } } ajaxParams.search_param = remoteSearchParam; if (window.linkageXmSelectData[id].customParam) { for (key in window.linkageXmSelectData[id].customParam) { ajaxParams[key] = window.linkageXmSelectData[id].customParam[key]; } } //val: 搜索框的内容, 不开启搜索默认为空, cb: 回调函数, show: 当前下拉框是否展开, pageIndex: 当前第几页 facade.ajax({ route: window.linkageXmSelectData[id].route, url: window.linkageXmSelectData[id].url, data: ajaxParams, successAlert: false, }).done(response => { //这里是success的处理 var res = response.data; for (var key in res.data) { if (res.data[key][window.linkageXmSelectData[id].valueField] == window.linkageXmSelectData[id].selected) { res.data[key]["selected"] = true; } else { res.data[key]["selected"] = false; } } //回调需要两个参数, 第一个: 数据数组, 第二个: 总页码 window.linkageXmSelectData[id].paging ? cb(res.data, res.last_page) : cb(res); }).fail(err => { //这里是error的处理 cb([], 0); }); }, on: function (params) { window.linkageXmSelectData[id].onNum++; if (window.linkageXmSelectData[id].selected > 0 && window.linkageXmSelectData[id].onNum <= 1) { return true; } if (!window.linkageXmSelectData[id].rightId) { return true; } // 下面这个数据说明是点击了分页进行了ajax触发了onChange if (params.change.length == 0 && params.arr.length > 0) { return true; } if (params.arr.length == 0) { if (window.linkageXmSelectData[id].rightId) { window.linkageXmSelectObj[window.linkageXmSelectData[id].rightId].update({ remoteMethod: function (val, cb, show, pageIndex) { cb([], 0); window.linkageXmSelectObj[window.linkageXmSelectData[id].rightId].setValue([]); } }); return true; } } window.linkageXmSelectObj[window.linkageXmSelectData[id].rightId].update({ // val: 搜索框的内容, 不开启搜索默认为空, cb: 回调函数, show: 当前下拉框是否展开, pageIndex: 当前第几页 remoteMethod: function (val, cb, show, pageIndex) { window.linkageXmSelectData[window.linkageXmSelectData[id].rightId].searchKeyword = val; var rightRemoteSearchParam = {}; rightRemoteSearchParam = window.linkageXmSelectData[window.linkageXmSelectData[id].rightId].param; if (window.linkageXmSelectData[window.linkageXmSelectData[id].rightId].searchParam) { for (key in window.linkageXmSelectData[window.linkageXmSelectData[id].rightId].searchParam) { rightRemoteSearchParam[key] = { value: val, condition: window.linkageXmSelectData[window.linkageXmSelectData[id].rightId].searchParam[key].condition, } } } if (window.linkageXmSelectData[window.linkageXmSelectData[id].rightId].leftOnchangeParam) { for (key in window.linkageXmSelectData[window.linkageXmSelectData[id].rightId].leftOnchangeParam) { rightRemoteSearchParam[key] = { value: params["arr"][0][window.linkageXmSelectData[id].valueField], condition: window.linkageXmSelectData[window.linkageXmSelectData[id].rightId].leftOnchangeParam[key].condition, } } } facade.ajax({ route: window.linkageXmSelectData[window.linkageXmSelectData[id].rightId].route, url: window.linkageXmSelectData[window.linkageXmSelectData[id].rightId].url, data: { paging: window.linkageXmSelectData[window.linkageXmSelectData[id].rightId].paging ? 1 : 0, page: pageIndex, pageSize: window.linkageXmSelectData[window.linkageXmSelectData[id].rightId].pageSize, search_param: rightRemoteSearchParam }, successAlert: false, }).done(response => { //这里是success的处理 var res = response.data; //回调需要两个参数, 第一个: 数据数组, 第二个: 总页码 window.linkageXmSelectData[window.linkageXmSelectData[id].rightId].paging ? cb(res.data, res.last_page) : cb(res); window.linkageXmSelectObj[window.linkageXmSelectData[id].rightId].setValue([]); }).fail(err => { //这里是error的处理 cb([], 0); window.linkageXmSelectObj[window.linkageXmSelectData[id].rightId].setValue([]); }); } }); if (window.linkageXmSelectData[id].onchange) { if (typeof window[window.linkageXmSelectData[id].onchange] === "function") { window[window.linkageXmSelectData[id].onchange].call(this, params); } else { facade.error(window.linkageXmSelectData[id].onchange + "回调函数未定义"); } } } }); }, /** * 联动下拉框,linkage的下拉框会渲染成普通select下拉框组件 * */ linkageSelectOne: function (item) { let id = $(item).attr('id');//id属性,必须 if (!id) { facade.error('linkageSelect组件未定义id属性'); return false; } let showField = $(item).data('showfield') ? $(item).data('showfield') : 'name';//显示的字段,默认是name let url = $(item).data('url');//下拉框数据源url地址,对应一个数据表的index let params = $(item).data('params'); let searchField = $(item).data('searchfield') ? $(item).data('searchfield') : 'pid';//搜索的字段,默认是pid let searchCondition = $(item).data('searchcondition') ? $(item).data('searchcondition') : '='; let searchVal = $(item).data('searchval') ? $(item).data('searchval') : 0;//搜索字段的值,默认0,如果只想选某个省下面的城市和地区可以设置这个值 let selectedVal = $(item).data('selectedval');//选中的值,非必填 let leftField = $(item).data('leftfield');//左关联字段,为空或者不设置时,表示第一个下拉框 let rightField = $(item).data('rightfield');//右关联字段,为空或者不设置时,表示最后一个下拉框 let onchange = $(item).data("onchange") ? $(item).data("onchange") : "";//onchange回调函数名 if (!leftField && !rightField) { facade.error("linkageSelect组件的data-leftField和data-rightField属性不能都为空"); } //填充联动的第一个下拉框数据 if (leftField === "" || leftField === undefined) { let searchParam; if (params) { searchParam = params; } else { searchParam = {}; } searchParam[searchField] = {}; searchParam[searchField].value = searchVal; searchParam[searchField].condition = searchCondition; facade.ajax({ method: "GET", route: url, data: {search_param: searchParam, all_data: 1}, successAlert: false }).done(function (res) { let optionTips = $(item).children().first().prop("outerHTML"); $(item).empty(); $(item).append(optionTips); let optionHtml, key; for (key in res.data) { if (selectedVal === res.data[key]['id']) { optionHtml = ''; } else { optionHtml = ''; } $(item).append(optionHtml); } layui.form.render('select'); // 如果第一个下拉框有onchange,就执行onchange if (onchange) { var nowData = {}; nowData.elem = $("#" + id); nowData.othis = {}; nowData.value = selectedVal; window[onchange].call(this, nowData); } }); } //监听所有下拉框onchange事件 if (rightField) { layui.form.on('select(' + id + ')', function (data) { if (data.value) { let rightSearchUrl = $("#" + rightField).data('url'); let rightParams = $("#" + rightField).data('params'); let rightSearchField = $("#" + rightField).data('searchfield') ? $("#" + rightField).data('searchfield') : 'pid';//搜索的字段,默认是pid let rightSearchParam; if (rightParams) { rightSearchParam = rightParams; } else { rightSearchParam = {} } rightSearchParam[rightSearchField] = {}; rightSearchParam[rightSearchField].value = data.value; rightSearchParam[rightSearchField].condition = $("#" + rightField).data('searchcondition') ? $("#" + rightField).data('searchcondition') : "="; facade.ajax({ method: "GET", route: rightSearchUrl, data: {search_param: rightSearchParam, all_data: 1}, successAlert: false }).done(function (res) { let rightOptionTips = $("#" + rightField).children().first().prop("outerHTML"); $("#" + rightField).empty(); $("#" + rightField).append(rightOptionTips); let rightOptionHtml, key; for (key in res.data) { rightOptionHtml = ''; $("#" + rightField).append(rightOptionHtml); } let nextRightField = $("#" + rightField).data('rightfield'); let nextOptionTips = ""; while (nextRightField !== "" && nextRightField !== undefined) { nextOptionTips = $("#" + nextRightField).children().first().prop("outerHTML"); $("#" + nextRightField).empty(); $("#" + nextRightField).append(nextOptionTips); nextRightField = $("#" + nextRightField).data('rightfield'); } layui.form.render('select'); // 如果有onchange 就执行onchage if (onchange) { var nowData = {}; nowData.elem = $("#" + id); nowData.othis = {}; nowData.value = selectedVal; window[onchange].call(this, nowData); } }); } else { let rightOptionTips = $("#" + rightField).children().first().prop("outerHTML"); $("#" + rightField).empty(); $("#" + rightField).append(rightOptionTips); let nextRightField = $("#" + rightField).data('rightfield'); let nextOptionTips = ""; while (nextRightField !== "" && nextRightField !== undefined) { nextOptionTips = $("#" + nextRightField).children().first().prop("outerHTML"); $("#" + nextRightField).empty(); $("#" + nextRightField).append(nextOptionTips); nextRightField = $("#" + nextRightField).data('rightfield'); } layui.form.render('select'); // 如果有onchange 就执行onchange if (onchange) { var nowData = {}; nowData.elem = $("#" + id); nowData.othis = {}; nowData.value = selectedVal; window[onchange].call(this, nowData); } } }); } else { // 如果有onchange 就执行onchage if (onchange) { layui.form.on('select(' + id + ')', function (data) { var nowData = {}; nowData.elem = $("#" + id); nowData.othis = {}; nowData.value = selectedVal; window[onchange].call(this, nowData); }); } } //如果有选中值,就请求渲染右侧下拉框 if (selectedVal !== "" && selectedVal !== undefined) { if (rightField !== "" && rightField !== undefined) { let selectedRightSearchUrl = $("#" + rightField).data('url'); let selectedRightParams = $("#" + rightField).data('params'); let selectedRightSearchField = $("#" + rightField).data('searchfield') ? $("#" + rightField).data('searchfield') : 'pid';//搜索的字段,默认是pid let selectedRightSearchParam; if (selectedRightParams) { selectedRightSearchParam = selectedRightParams; } else { selectedRightSearchParam = {}; } selectedRightSearchParam[selectedRightSearchField] = {}; selectedRightSearchParam[selectedRightSearchField].value = selectedVal; selectedRightSearchParam[selectedRightSearchField].condition = $("#" + selectedRightSearchField).data('searchcondition') ? $("#" + selectedRightSearchField).data('searchcondition') : "="; facade.ajax({ method: "GET", route: selectedRightSearchUrl, data: {search_param: selectedRightSearchParam, all_data: 1}, successAlert: false }).done(function (res) { let selectedRightOptionTips = $("#" + rightField).children().first().prop("outerHTML"); $("#" + rightField).empty(); $("#" + rightField).append(selectedRightOptionTips); let rightSelectedVal = $("#" + rightField).data('selectedval'); let selectedOptionHtml, key; for (key in res.data) { if (rightSelectedVal === res.data[key]['id']) { selectedOptionHtml = ''; } else { selectedOptionHtml = ''; } $("#" + rightField).append(selectedOptionHtml); } layui.form.render('select'); // 如果右侧下拉框有选中值和onchange,就执行右侧下拉框的onchange var rightOnchange = $("#" + rightField).data('onchange'); if (rightSelectedVal && rightOnchange) { var rightData = {}; rightData.elem = $("#" + rightField); rightData.othis = {}; rightData.value = rightSelectedVal; window[rightOnchange].call(this, rightData); } }); } } }, /** * 上传组件 *