/** @Name:layui.form 表单组件 @Author:贤心 @License:MIT */ layui.define(['layer','vciWebComboxStore','vciWebRefer','laydate','upload'], function(exports){ "use strict"; var $ = layui.$ ,layer = layui.layer ,hint = layui.hint() ,device = layui.device() ,MOD_NAME = 'form', ELEM = '.layui-form', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled' ,Form = function(){ this.config = { verify: { required: [ /[\S]+/ ,'必填项不能为空' ] ,phone: [ /^1\d{10}$/ ,'请输入正确的手机号' ] ,email: [ /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/ ,'邮箱格式不正确' ] ,url: [ /(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/ ,'链接格式不正确' ] // ,number: function(value){ // if(!value || isNaN(value)) return '只能填写数字' // } ,number: function(value){ if(isNaN(value)) return '只能填写数字' } ,positiveNumber: function(value){ if(!/^[+]{0,1}(\d+)$/.test(value)) return '只能填写正整数' } //不包含0 ,numbernotzero: function(value){ if(!/^[1-9]\d*$/.test(value)) return '只能填写正整数' } ,date: [ /^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/ ,'日期格式不正确' ] ,identity: [ /(^\d{15}$)|(^\d{17}(x|X|\d)$)/ ,'请输入正确的身份证号' ] ,letter: [ /^[A-Za-z]+$/ ,'只能输入字母' ] } }; this.layout = {//布局-weidy@2018-03-05添加,增加列布局的方式 form:'form', column:'column' }; this.elementConfig = {//字段的配置,weidy@2018-03-05 用于添加字段的相关配置 defaultConfig:{ defaultColumnOneRow:1, defaultLabelWidth:100, defaultInputWidth:190, defaultLabelAlign:'right' } }; this.fieldsMap = {//所有的字段 }; this.callbackOfAddItem = '';//存储addItems 的callback changeItems需要重新渲染 this.sourceDataOfAddItem = '';////存储addItems sourceData changeItems需要重新渲染 this.isAppendOfAddItem = '';//存储addItems ipAppend changeItems需要重新渲染 this.referFieldsMap = { //参照的字段 } }; //全局设置 Form.prototype.set = function(options){ var that = this; $.extend(true, that.config, options); return that; }; //验证规则设定 Form.prototype.verify = function(settings){ var that = this; $.extend(true, that.config.verify, settings); return that; }; //表单事件监听 Form.prototype.on = function(events, callback){ return layui.onevent.call(this, MOD_NAME, events, callback); }; //表单控件渲染 Form.prototype.render = function(type, filter){ var that = this ,elemForm = $(ELEM + function(){ return filter ? ('[lay-filter="' + filter +'"]') : ''; }()) ,items = { //下拉选择框 select: function(){ var TIPS = '请选择', CLASS = 'layui-form-select', TITLE = 'layui-select-title' ,NONE = 'layui-select-none', initValue = '', thatInput ,selects = elemForm.find('select'), hide = function(e, clear){ if(!$(e.target).parent().hasClass(TITLE) || clear){ $('.'+CLASS).removeClass(CLASS+'ed ' + CLASS+'up'); thatInput && initValue && thatInput.val(initValue); } thatInput = null; } ,events = function(reElem, disabled, isSearch){ var select = $(this) ,title = reElem.find('.' + TITLE) ,input = title.find('input') ,dl = reElem.find('dl') ,dds = dl.children('dd') ,showRefer = title.find(".layui-search") ,clearRefer = title.find(".layui-clear"); if(disabled) return; //展开下拉 var showDown = function(){ var top = reElem.offset().top + reElem.outerHeight() + 5 - win.scrollTop() ,dlHeight = dl.outerHeight(); reElem.addClass(CLASS+'ed'); dds.removeClass(HIDE); //上下定位识别 if(top + dlHeight > win.height() && top >= dlHeight){ reElem.addClass(CLASS + 'up'); } }, hideDown = function(choose){ reElem.removeClass(CLASS+'ed ' + CLASS+'up'); input.blur(); if(choose) return; notOption(input.val(), function(none){ if(none){ initValue = dl.find('.'+THIS).html(); input && input.val(initValue); } }); }; var refer = select.attr("lay-refer"); var referEditable = ("true" == select.attr("lay-refer-editable")) ; if(showRefer && referEditable){ showRefer.on('click',function (e) { var readOnly = select.attr("readOnly"); readOnly == "readonly"?readOnly=true:{}; if($webUtil.isNotNull(refer) &&!readOnly) { //说明是refer var vciRefer = layui.vciWebRefer; var thisReferName = select.attr("name"); var showFieldName = select.attr("lay-refer-showfield"); if (!filter) { filter = select.parents('form').attr("lay-filter"); } var referItem = that.referFieldsMap[filter + "${refer}" + thisReferName]; var options = referItem.referConfig; options.showField = showFieldName; vciRefer.newRefer(filter, thisReferName, select, options); var formValues = that.getValues(filter, true); that.setValues(formValues, filter); vciRefer.showRefer(filter, thisReferName, formValues); vciRefer.addChangeValueListener(filter, thisReferName, showFieldName, function (tfilter, tempRefer, tempShowRefer, value, rawValue, selectData) { var tempValues = {}; tempValues[tempRefer] = value; tempValues[tempShowRefer] = rawValue; that.setValues(tempValues, tfilter, true); layui.event.call(this, MOD_NAME, 'select(' + filter + ')', { elem: select[0] , value: value , othis: reElem, rowData: selectData, name: thisReferName }); }); return; } }); } //点击标题区域 title.on('click', function (e) { if (referEditable) { e.preventDefault(); input.focus(); //把这个下拉框的值清空.这样就只能获取到手动输入的值 select.val(""); return; } //weidy在这里添加如果是参照的时候 var readOnly = select.attr("readOnly"); readOnly == "readonly" ? readOnly = true : {}; if(readOnly) return; if ($webUtil.isNotNull(refer) && !readOnly) { //说明是refer var vciRefer = layui.vciWebRefer; var thisReferName = select.attr("name"); var showFieldName = select.attr("lay-refer-showfield"); if (!filter) { filter = select.parents('form').attr("lay-filter"); } var referItem = that.referFieldsMap[filter + "${refer}" + thisReferName]; var options = referItem.referConfig; options.showField = showFieldName; vciRefer.newRefer(filter, thisReferName, select, options); vciRefer.showRefer(filter, thisReferName, that.getValues(filter, true)); vciRefer.addChangeValueListener(filter, thisReferName, showFieldName, function (tfilter, tempRefer, tempShowRefer, value, rawValue, selectData) { var tempValues = {}; tempValues[tempRefer] = value; tempValues[tempShowRefer] = rawValue; that.setValues(tempValues, tfilter, true); layui.event.call(this, MOD_NAME, 'select(' + filter + ')', { elem: select[0] , value: value , othis: reElem, rowData: selectData, name: thisReferName }); }); return; } else if ($webUtil.isNotNull(refer) && readOnly) { return; } reElem.hasClass(CLASS + 'ed') ? ( hideDown() ) : ( hide(e, true), showDown() ); dl.find('.' + NONE).remove(); }); //点击箭头获取焦点 title.find('.layui-edge').on('click', function(){ input.focus(); }); if(clearRefer){ clearRefer.on('click',function(e){ var showFieldName = select.attr("lay-refer-showfield"); var thisRefer = select.attr("name"); var tempValues = {}; tempValues[thisRefer] = ""; tempValues[showFieldName] = ""; that.setValues(tempValues, filter,true); var vciRefer = layui.vciWebRefer; vciRefer.clearValue(filter,thisRefer); layui.stope(e); return false; }); } //键盘事件 input.on('keyup', function(e){ var keyCode = e.keyCode; //Tab键 if(keyCode === 9){ showDown(); } }).on('keydown', function(e){ var keyCode = e.keyCode; //Tab键 if(keyCode === 9){ hideDown(); } else if(keyCode === 13){ //回车键 e.preventDefault(); } }); //检测值是否不属于select项 var notOption = function(value, callback, origin){ var num = 0; layui.each(dds, function(){ var othis = $(this) ,text = othis.text() ,not = text.indexOf(value) === -1; if(value === '' || (origin === 'blur') ? value !== text : not) num++; origin === 'keyup' && othis[not ? 'addClass' : 'removeClass'](HIDE); }); var none = num === dds.length; return callback(none), none; }; //搜索匹配 var search = function(e){ var value = this.value, keyCode = e.keyCode; if(keyCode === 9 || keyCode === 13 || keyCode === 37 || keyCode === 38 || keyCode === 39 || keyCode === 40 ){ return false; } notOption(value, function(none){ if(none){ dl.find('.'+NONE)[0] || dl.append('

无匹配项

'); } else { dl.find('.'+NONE).remove(); } }, 'keyup'); if(value === ''){ dl.find('.'+NONE).remove(); } }; if(isSearch) { input.on('keyup', search).on('blur', function (e) { var iseditable = select.attr('lay-combox-editable'); if (iseditable != 'true') { thatInput = input; initValue = dl.find('.' + THIS).html(); setTimeout(function () { notOption(input.val(), function (none) { initValue || input.val(''); //none && !initValue }, 'blur'); }, 200); } }); } //选择 dds.on('click', function(){ var othis = $(this), value = othis.attr('lay-value');var name = othis.text() var selectFilter = select.attr('lay-filter'); //获取过滤器 if(othis.hasClass(DISABLED)) return false; if(othis.hasClass('layui-select-tips')){ input.val(''); } else { input.val(othis.text()); othis.addClass(THIS); } othis.siblings().removeClass(THIS); select.val(value).removeClass('layui-form-danger') layui.event.call(this, MOD_NAME, 'select('+ selectFilter +')', { elem: select[0] ,value: value ,othis: reElem ,name:name }); hideDown(true); return false; }); reElem.find('dl>dt').on('click', function(e){ return false; }); //关闭下拉 $(document).off('click', hide).on('click', hide); } selects.each(function(index, select){ var othis = $(this) ,hasRender = othis.next('.'+CLASS) ,disabled = this.disabled ,value = select.value ,selected = select.selectedIndex>-1?$(select.options[select.selectedIndex]) :{html:function (){return ''}} //获取当前选中项 ,optionsFirst = select.options[0]; if(typeof othis.attr('lay-ignore') === 'string') return othis.show(); var tooltips = typeof othis.attr('lay-tooltips') === 'string' ?othis.attr('lay-tooltips'):false var isSearch = typeof othis.attr('lay-search') === 'string' ,placeholder = optionsFirst ? ( optionsFirst.value ? TIPS : (optionsFirst.innerHTML || TIPS) ) : TIPS; var isNeedAddWidth = false; var selectWidth = othis.css('width'); if($webUtil.isNotNull(selectWidth) || selectWidth>1){ isNeedAddWidth = true; } var isNeedAddHeight = false; var selectHeight = othis.css('height'); if(othis.attr('style') ==null || othis.attr('style').indexOf('height') > -1 && ($webUtil.isNotNull(selectHeight) || selectHeight>1)){ if (othis.attr('style') ==null) { isNeedAddHeight = false; }else{ isNeedAddHeight = true; } } //weidy在这里添加如果是参照的时候 var refer = othis.attr("lay-refer"); var isRefer = false; var isReferEditable = ("true" == othis.attr("lay-refer-editable")); var isComboxEditable = ("true" == othis.attr("lay-combox-editable")); var readOnly = othis.attr("readOnly"); if(readOnly == "readonly"){ readOnly = true; } if($webUtil.isNotNull(refer)){ isRefer = true; } var inDialog = false; if(othis.attr("name") == 'conditionField' || othis.attr("name") == 'conditionOption' || othis.parent().attr("name") == 'conditionValue'){ inDialog = true; isNeedAddWidth = false; } if("true" == othis.attr("inDialog")){ inDialog = true; } //替代元素 var selectNameText = othis.attr("selectTextName"); selectNameText= selectNameText?selectNameText:""; var reElem = $(['
' ,'
' //,((isRefer) ?(readOnly?'':'
'):'
') ,(readOnly ?'':(isRefer?'':'')) ,'
'+ function(options){ var arr = []; layui.each(options, function(index, item){ if(index === 0 && !item.value){ arr.push('
'+ (item.innerHTML || TIPS) +'
'); } else if(item.tagName.toLowerCase() === 'optgroup'){ arr.push('
'+ item.label +'
'); } else { if($(item).attr('data-type')){ var dataType = $(item).attr('data-type') arr.push('
'+ item.innerHTML +'
'); }else{ arr.push('
'+ item.innerHTML +'
'); } } }); arr.length === 0 && arr.push('
没有选项
'); return arr.join(''); }(othis.find('*')) +'
' ,''].join('')); hasRender[0] && hasRender.remove(); //如果已经渲染,则Rerender othis.after(reElem); events.call(this, reElem, disabled, isSearch); }); } //复选框/开关 ,checkbox: function(){ var CLASS = { checkbox: ['layui-form-checkbox', 'layui-form-checked', 'checkbox'] ,_switch: ['layui-form-switch', 'layui-form-onswitch', 'switch'] } ,checks = elemForm.find('input[type=checkbox]') ,events = function(reElem, RE_CLASS){ var check = $(this); //勾选 reElem.on('click', function(){ var checkFilter = check.attr('lay-filter') //获取过滤器 ,text = (check.attr('lay-text')||'').split('|'); var skin = check.attr('lay-skin'); var isSwitch = false; if(skin === 'switch'){ isSwitch = true; } if(check[0].disabled) return; check[0].checked ? ( check[0].checked = false, check.removeAttr('checked') ,reElem.removeClass(RE_CLASS[1]).find('em').text(text[1]), (isSwitch?check[0].value='false':'') ) : ( check[0].checked = true, check.attr('checked','checked') ,reElem.addClass(RE_CLASS[1]).find('em').text(text[0]), (isSwitch?check[0].value='true':'') ); layui.event.call(check[0], MOD_NAME, RE_CLASS[2]+'('+ checkFilter +')', { elem: check[0] ,value: check[0].value ,othis: reElem }); }); } checks.each(function(index, check){ var othis = $(this), skin = othis.attr('lay-skin') ,text = (othis.attr('lay-text')||'').split('|'), disabled = this.disabled; if(skin === 'switch') skin = '_'+skin; var RE_CLASS = CLASS[skin] || CLASS.checkbox; if(typeof othis.attr('lay-ignore') === 'string') return othis.show(); //替代元素 var hasRender = othis.next('.' + RE_CLASS[0]); var reElem = $(['
' ,{ _switch: ''+ ((check.checked ? text[0] : text[1])||'') +'' }[skin] || ((check.title.replace(/\s/g, '') ? (''+ check.title +'') : '') +''+ (skin ? '' : '') +'') ,'
'].join('')); hasRender[0] && hasRender.remove(); //如果已经渲染,则Rerender othis.after(reElem); events.call(this, reElem, RE_CLASS); }); } //单选框 ,radio: function(){ var CLASS = 'layui-form-radio', ICON = ['', ''] ,radios = elemForm.find('input[type=radio]') ,events = function(reElem){ var radio = $(this), ANIM = 'layui-anim-scaleSpring'; reElem.on('click', function(){ var name = radio[0].name, forms = radio.parents(ELEM); var radioFilter = radio.attr('lay-filter'); //获取过滤器 var sameRadio = forms.find('input[name='+ name.replace(/(\.|#|\[|\])/g, '\\$1') +']'); //找到相同name的兄弟 if(radio[0].disabled) return; layui.each(sameRadio, function(){ var next = $(this).next('.'+CLASS); this.checked = false; $(this).removeAttr('checked') next.removeClass(CLASS+'ed'); next.find('.layui-icon').removeClass(ANIM).html(ICON[1]); }); radio[0].checked = true; radio.attr('checked','checked') reElem.addClass(CLASS+'ed'); reElem.find('.layui-icon').addClass(ANIM).html(ICON[0]); layui.event.call(radio[0], MOD_NAME, 'radio('+ radioFilter +')', { elem: radio[0] ,value: radio[0].value ,othis: reElem }); }); }; radios.each(function(index, radio){ var othis = $(this), hasRender = othis.next('.' + CLASS), disabled = this.disabled; if(typeof othis.attr('lay-ignore') === 'string') return othis.show(); hasRender[0] && hasRender.remove(); //如果已经渲染,则Rerender //替代元素 var reElem = $(['
' ,''+ ICON[radio.checked ? 0 : 1] +'' ,'
'+ function(){ var title = radio.title || ''; if(typeof othis.next().attr('lay-radio') === 'string'){ title = othis.next().html(); othis.next().remove(); } return title }() +'
' ,'
'].join('')); othis.after(reElem); events.call(this, reElem); }); } //文本输入框 ,input:function () { var inputs = elemForm.find('.layui-input[lay-tooltips],.layui-textarea[lay-tooltips]'); var events = function (reElem, tipsStr) { var input = $(this); //键盘事件 input.on('mouseenter', function (e) { that.tooltips = layer.tips(tipsStr, this, {tips: [2,"#FF5722"], time: 0}) }).on('mouseleave', function (e) { layer.close(that.tooltips) }); } inputs.each(function (index, input) { var othis = $(this) if (typeof othis.attr('lay-tooltips') === 'string') { events.call(this, input, othis.attr('lay-tooltips')); } ; }); } }; type ? ( items[type] ? items[type]() : hint.error('不支持的'+ type + '表单渲染') ) : layui.each(items, function(index, item){ item(); }); return that; }; //weidy@2018-03-05 增加表单从后台加载或定义、设置值、获取值和验证的等方法 Form.prototype.showCheckboxCss = function(checkes,checkboxEl,checked){ if(checkes && checkboxEl){ var RE_CLASS = 'layui-form-checked'; if(checkes.disabled) return; checked ? ( checkes.attr("checked",true) ,checkboxEl.addClass(RE_CLASS) ) : ( checkes.attr("checked",false) ,checkboxEl.removeClass(RE_CLASS) ); } }; //wangting@2021-10-31 增加表单从后台加载或定义、设置值、获取值和验证的等方法 Form.prototype.showRadioCss = function(checkes,checkboxEl,checked){ if(checkes && checkboxEl){ var RE_CLASS = 'layui-form-radioed'; var s_CLASS = "layui-anim-scaleSpring",i = ["", ""]; if(checkes.disabled) return; checked ? ( checkes.attr("checked",true) ,checkboxEl.addClass(RE_CLASS).find(".layui-icon").addClass(s_CLASS).html(i[0]) ) : ( checkes.attr("checked",false) ,checkboxEl.removeClass(RE_CLASS).find(".layui-icon").removeClass(s_CLASS).html(i[1]) ); } }; //设置值的方法 Form.prototype.setValues = function(values,filter,onlyReplace){ var that = this; var elemForm = $(ELEM + function(){ return filter ? ('[lay-filter="' + filter +'"]') : ''; }()); var fieldElem = elemForm.find('input,select,textarea'); if(!that.formValues){ that.formValues = {}; } //modify by weidy,不能设置values的值,否则参照的时候就会把以前缓存的值都清除 //在页面总是显示表单的时候,应该先clear后再添加 if(!onlyReplace){ that.formValues[filter] = values; } layui.each(fieldElem, function(_, item){ item.name = (item.name || '').replace(/^\s*|\s*&/, ''); if(!item.name) return; //用于支持数组 name if(/^.*\[\]$/.test(item.name)){ var key = item.name.match(/^(.*)\[\]$/g)[0]; nameIndex[key] = nameIndex[key] | 0; item.name = item.name.replace(/^(.*)\[\]$/, '$1['+ (nameIndex[key]++) +']'); } //weidy@2018-12-3 复选框也设置 // if(/^checkbox|radio$/.test(item.type) && !item.checked) return; var name = item.name; if(values && (name in values)){ if(values[name] == null){ values[name] = ""; } if(item.type.indexOf("select")>-1){ //说明是下拉框 var showField = $(item).attr("lay-refer-showField"); if($webUtil.isNotNull(showField)){ var showValue = values[showField]; if($webUtil.isNull(showValue)){ showValue = ''; } $(item).html(''); $(item).parent().find('input').val(showValue); }else{ //显示下拉菜单的值 $(item).parent().find('input').val($(item).find("option[value='" + values[name] + "']").text()); } $(item).val(values[name]); //清除选择 $(item).find("option").prop("selected", false); $(item).find("option[value='" + values[name] + "']").prop("selected", true); }else if(item.type.indexOf("textarea")>-1){ $(item).val(values[name]); $(item).text($(item).val()); }else if(item.type.indexOf("checkbox")> -1) { //看看是不是switch\ if ("_switch" == $(item).next().attr("lay-skin")) { //看看里面的值是什么 var checkedValue = $(item).attr("valueOnSelect"); var showText = $(item).attr("lay-text"); if ($webUtil.isNull(showText)) { showText = "ON|OFF"; } var switchShowTexts = showText.split('|'); if ((values[name] + '') == checkedValue) { $(item).attr("checked", "checked"); $(item).next().addClass("layui-form-onswitch"); $(item).next().find("em").html(switchShowTexts[0]); item.value = 'true' } else { $(item).next().removeClass("layui-form-onswitch"); $(item).next().find("em").html(switchShowTexts[1]); $(item).attr("checked", ""); item.value = 'false' } } else { //复选框 if ($(item).val() == values[name]) { $(item).attr("checked", values[name]); $(item).next().addClass("layui-form-checked"); } else { $(item).removeAttr("checked"); $(item).next().removeClass("layui-form-checked"); } } }else if(item.type.indexOf("radio")> -1) { if ($(item).val() == values[name]) { $(item).attr("checked", values[name]); $(item).next().find('.layui-icon').html(''); $(item).next().addClass("layui-form-radioed"); } else { $(item).removeAttr("checked"); $(item).next().find('.layui-icon').html(''); $(item).next().removeClass("layui-form-radioed"); } }else{ $(item).val(values[name]); } } if(name.indexOf("[")>-1){ //说明是复选框 //需要获取其值是否被选中 var itemName = name.substring(0,name.indexOf("[")); var needValue = name.substring(name.indexOf("[") + 1,name.indexOf("]")); if(values[itemName]){ var valueArray = values[itemName].split(','); if($webUtil.inArray(valueArray,needValue)){ $(item).attr("checked", "checked"); $(item).next().addClass("layui-form-checked"); } } } }); }; //获取值的方法 Form.prototype.getValues = function(filter,hasCacheValue){ var that = this; var elemForm = $(ELEM + function(){ return filter ? ('[lay-filter="' + filter +'"]') : ''; }()); var fieldElem = elemForm.find('input,select,textarea'); var values = ''; if(that.formValues){ values = that.formValues[filter] }else{ values = ''; } if(!values || !hasCacheValue){ values = {}; } var hasCheckNames = []; layui.each(fieldElem, function(_, item){ /*item.name = (item.name || '').replace(/^\s*|\s*&/, ''); if(!item.name) return; //用于支持数组 name if(/^.*\[\]$/.test(item.name)){ var key = item.name.match(/^(.*)\[\]$/g)[0]; nameIndex[key] = nameIndex[key] | 0; item.name = item.name.replace(/^(.*)\[\]$/, '$1['+ (nameIndex[key]++) +']'); }item.name.indexOf if(/^checkbox|radio$/.test(item.type) && !item.checked) return; values[item.name] = item.value;*/ if(item.name.indexOf("[")>-1){ hasCheckNames.push(item.name); } if(item.type=='radio'){ values[item.name]=$(":radio[name='"+item.name+"']:checked",elemForm).val() }else{ that.getValueByItem(item,values); } }); //执行完成后了,去查询复选框 //复选框可能一个都没有选择。那需要判断这个 if(hasCheckNames.length>0){ for(var index=0 ; index< hasCheckNames.length;index++){ var itemName = hasCheckNames[index].substring(0, hasCheckNames[index].indexOf("[")); if(itemName in values) { delete values[itemName]; } } } var checkboxKey = []; for(var key in values) { if (key.indexOf("[") > -1) { //说明可能是复选框 var valueOld = values[key]; var itemName = key.substring(0, key.indexOf("[")); if (!$webUtil.inArray(checkboxKey, itemName)) { checkboxKey.push(itemName); } var value = key.substring(key.indexOf("[") + 1, key.indexOf("]")); if (valueOld == "on") { if (itemName in values && values[itemName] != null) { values[itemName] = values[itemName] + "," + value; } else { values[itemName] = value; } } else { if (itemName in values && values[itemName] != null) { values[itemName] = values[itemName] + (valueOld?("," + valueOld):''); } else { values[itemName] = valueOld; } } delete values[key]; } if(key=='data' && $webUtil.isNull(values[key])){ delete values[key]; } } return values; }; Form.prototype.btmDefaultKeys = ['oid', 'id', 'name', 'description', 'revisionoid', 'nameoid', 'btmname', 'lastr', 'firstr', 'lastv', 'firstv', 'creator', 'createtime', 'lastModifier', 'lastmodifytime', 'revisionrule', 'revisionseq', 'revisionvalue', 'versionrule', 'versionseq', 'versionvalue', 'lcstatus', 'ts', 'owner', 'checkinby', 'checkintime', 'checkoutby', 'checkouttime', 'copyfromversion', 'secretgrade']; Form.prototype.linkDefaultKeys = ['oid','creator','createtime','lastmodifier','lastmodifytime','f_oid','foid','f_revisionoid','frevisionoid','f_nameoid','fnameoid','f_btmname','fbtmname','t_oid','toid','t_revisionoid','trevisionoid','t_nameoid','tnameoid','t_btmname','tbtmname','ts']; //wangting 2021-3-17 //将值拆分成默认属性和非默认属性两部分 Form.prototype.getDefaultValues = function (filter,hasCacheValue,keys) { var that = this; var values = that.getValues(filter, hasCacheValue); var defaultKeys = keys; if (!defaultKeys) { defaultKeys = that.btmDefaultKeys; } var defaultValues = {}, otherValue = {}; var indexofkey=''; if(device.ie && device.ie < 10){ defaultKeys.push('--'); defaultKeys=defaultKeys.join('--'); indexofkey='--'; } for (var key in values) { if (defaultKeys.indexOf(key.toLowerCase()+indexofkey) > -1) { defaultValues[key] = values[key]; } else { otherValue[key] = values[key]; } } return { defaultValues:defaultValues, otherValue:otherValue } } Form.prototype.getValueByItem = function(item,values) { var that = this; var thisItemValue = that.getValueByEl(item); if (typeof (thisItemValue) != "string" && thisItemValue == false) { return false; } values[item.name] = thisItemValue; //如果是参照的 var showField = $(item).attr("lay-refer-showField"); if ($webUtil.isNotNull(showField)) { if ($webUtil.isNull(thisItemValue)) { var referConfig = eval("(" + $(item).attr("lay-refer") + ")"); if (referConfig.editable) { //说明可编辑的,在空的时候获取输入的值 values[item.name] = $(item).next().find('input').val(); values[showField] = values[item.name]; } else { values[showField] = $(item).find('option:selected').text(); } } else { values[showField] = $(item).find('option:selected').text(); } } }; Form.prototype.getValueByEl = function(item) { item.name = (item.name || '').replace(/^\s*|\s*&/, ''); if (!item.name) return false; //用于支持数组 name if (/^.*\[\]$/.test(item.name)) { var key = item.name.match(/^(.*)\[\]$/g)[0]; nameIndex[key] = nameIndex[key] | 0; item.name = item.name.replace(/^(.*)\[\]$/, '$1[' + (nameIndex[key]++) + ']'); } if (/^checkbox|radio$/.test(item.type)) { //看看是不是开关 var skin = $(item).attr("lay-skin"); if (skin === 'switch') { return item.value; } else { if (item.checked) { return item.value; } else { return ''; } } } return item.value; }; //验证是否通过 Form.prototype.validata = function(filter,verify) { var that = this; var elemForm = $(ELEM + function () { return filter ? ('[lay-filter="' + filter + '"]') : ''; }()); //var fieldElem = elemForm.find('input,select,textarea'); if (!verify) { verify = form.config.verify; } var stop = null; var DANGER = 'layui-form-danger'; //获取所有含有lay-verify标记的字段 var verifyElem =$('*[lay-verify][type!="radio"][type!="checkbox"],*[lay-verify-div][lay-combox-type="radio"],*[lay-verify-div][lay-combox-type="checkbox"]',elemForm) layui.each(verifyElem, function (_, item) { var othis = $(this); var vers,verText,verType,values={},value if(othis.attr('lay-combox-type')=='radio'){ vers = othis.attr('lay-verify-div').split('|') verText = othis.attr("lay-vertext-div") values[othis.attr('lay-combox-name')]=$("input[name='"+othis.attr('lay-combox-name')+"']:checked",othis).val(); value = values[othis.attr('lay-combox-name')]; }else if(othis.attr('lay-combox-type')=='checkbox'){ vers = othis.attr('lay-verify-div').split('|') verText = othis.attr("lay-vertext-div"); values[othis.attr('lay-combox-name')]=$("input[type='checkbox']:checked",othis).val(); value = values[othis.attr('lay-combox-name')]; }else { vers = othis.attr('lay-verify').split('|') verType = othis.attr('lay-verType') //提示方式, verText = othis.attr("lay-vertext") that.getValueByItem(item, values); value = values[item.name]; } if (value == undefined) { value = ""; } othis.removeClass(DANGER); layui.each(vers, function (_, thisVer) { var isTrue //是否命中校验 , errorText = '' //错误提示文本 , isFn = typeof verify[thisVer] === 'function'; //匹配验证规则 if (verify[thisVer]) { var isTrue = isFn ? errorText = verify[thisVer](value, item) : !verify[thisVer][0].test(value); errorText = errorText || verify[thisVer][1]; if (layui.util.isNotNull(verText) && 'undefined' != verText) errorText = verText; //从定义的内容上获取 //weidy@2018-03-05.把字段的名称也加上 else if (othis.parent() && othis.parent().parent() && othis.parent().parent().children('label')) { var fieldText='' if(othis.attr('lay-verify-div')){ fieldText = othis.prev().html(); }else{ fieldText = othis.parent().prev().html(); } if (fieldText != undefined) { // if(fieldText != ''){ fieldText = fieldText.replace(":", ""); errorText = "(" + fieldText + ")" + errorText; } } //如果是必填项或者非空命中校验,则阻止提交,弹出提示 if (isTrue) { //提示层风格 if (verType === 'tips') { layer.tips(errorText, function () { if (typeof othis.attr('lay-ignore') !== 'string') { if (item.tagName.toLowerCase() === 'select' || /^checkbox|radio$/.test(item.type)) { return othis.next(); } } return othis; }(), {tips: 1}); } else if (verType === 'alert') { layer.alert(errorText, {title: '提示', shadeClose: true}); } else { layer.msg(errorText, {icon: 5, shift: 6}); } if (!device.android && !device.ios) item.focus(); //非移动设备自动定位焦点 othis.addClass(DANGER); return stop = true; } } }); if (stop) return stop; }); if (stop) { return false; } else { return true; } }; //加载数据 Form.prototype.load = function(filter,options){ var that = this; var elemForm = $(ELEM + function(){ return filter ? ('[lay-filter="' + filter +'"]') : ''; }()); if(options){ if(options.url){ //说明是通过后台的url来加载值 $webUtil.ajax(options.method?options.method:'post',options.url,options.params?options.params:{},function(result){ if(options.successParam?result[options.successParam]: result.success){ if(options.setValueListener){ options.setValueListener(result.obj,filter); }else { that.setValues(options.dataParam ? result[options.dataParam] : result.obj, filter); } if(options.callback){ options.callback(result.obj,filter); } } },function (xhr,error) { $webUtil.showErrorMsg("加载表单的数据的时候出现了错误,可能是连不上服务器"); },options.backPath?options.backPath:null,options.noProgress); }else if(options.data){ that.setValues(options.data, filter); if(options.callback){ options.callback(); } } } }; //清除所有的值 Form.prototype.clear = function(filter,isUseDefaultValue){ var that = this; var elemForm = $(ELEM + function(){ return filter ? ('[lay-filter="' + filter +'"]') : ''; }()); var fieldElem = elemForm.find('input,select,textarea'); layui.each(fieldElem, function(_, item){ item.name = (item.name || '').replace(/^\s*|\s*&/, ''); if(!item.name) return; //用于支持数组 name if(/^.*\[\]$/.test(item.name)){ var key = item.name.match(/^(.*)\[\]$/g)[0]; nameIndex[key] = nameIndex[key] | 0; item.name = item.name.replace(/^(.*)\[\]$/, '$1['+ (nameIndex[key]++) +']'); } if(/^checkbox|radio$/.test(item.type) && !item.checked) return; if(isUseDefaultValue || $webUtil.inArray(isUseDefaultValue,item.name)){ item.value = that.getDefaultValue(filter,item.name); }else{ item.value = ""; } var refer = $(item).attr("lay-refer"); if($webUtil.isNotNull(refer)) { //说明是refer var vciRefer = layui.vciWebRefer; var thisReferName = $(item).attr("name"); var values ={}; values[thisReferName] = ''; that.setValues(values,filter); vciRefer.clearValue(filter, thisReferName); } }); }; //设置默认值, Form.prototype.setDefaultValue=function(filter,defaultValueObject){ var that = this; //如果defaultValueObject 不是一个数组,则添加为数组 if(!defaultValueObject){ return; } if(!$webUtil.isArray(defaultValueObject)){ defaultValueObject = [defaultValueObject]; } if(!that.formDefaultValueMap){ that.formDefaultValueMap = {}; layui.each(defaultValueObject,function(_index,item){ that.formDefaultValueMap[filter + "_" + item.name] = item.value; }); } }; //获取默认值 Form.prototype.getDefaultValue = function(filter,name){ var that = this; if(!that.formDefaultValueMap){ return ''; }else{ return that.formDefaultValueMap[filter + "_" + name]; } }; //表单提交 Form.prototype.submit=function(filter,options){ var that = this; if(!options){ options = {}; } if(options.onSubmit){ if(!options.onSubmit()){ return; } }else{ if(!that.validata(filter, options.verify?options.verify:{})){ return; } } if(options.url){ var values = that.getValues(filter); var submitValues = {}; for(var key in values){ var paramPrefix = ""; if(options.paramPrefix){ paramPrefix = options.paramPrefix; } var param = paramPrefix; if(options.paramMap && key in options.paramMap){ param += options.paramMap[key]; }else{ param += key; } submitValues[param] = values[key]; } if(options.extraParams){ for(var key in options.extraParams){ submitValues[key] = options.extraParams[key]; } } $webUtil.post(url,submitValues,function(result){ if(options.successParam?result[options.successParam]: result.success){ if(options.clearOnSuccess){ that.clear(filter, options.clearUseDefault?options.clearUseDefault:false); } if(options.callback){ options.callback(); } } }); } }; //设置字段只读/取消只读 Form.prototype.setReadOnly=function(filter,readOnly,fileds){ var that = this; var elemForm = $(ELEM + function(){ return filter ? ('[lay-filter="' + filter +'"]') : ''; }()); var fieldElem = elemForm.find('input,select,textarea'); layui.each(fieldElem, function(_, item){ item.name = (item.name || '').replace(/^\s*|\s*&/, ''); if(!item.name) return; //用于支持数组 name if(/^.*\[\]$/.test(item.name)){ var key = item.name.match(/^(.*)\[\]$/g)[0]; nameIndex[key] = nameIndex[key] | 0; item.name = item.name.replace(/^(.*)\[\]$/, '$1['+ (nameIndex[key]++) +']'); } if(/^checkbox|radio$/.test(item.type) && !item.checked) return; if(!fileds || (fields && $webUtil.inArray(fields,item.name))){ if(readOnly){ $(item).addClass('layui-field-readonly'); $(item).attr('readOnly','readOnly'); //设置readOnly }else{ //所有的去除readOnly $(item).removeClass("layui-field-readonly"); $(item).attr('readOnly',null); } } }); }; //设置字段的配置 Form.prototype.setElementConfig = function(filter,config){ //defaultColumnOneRow:1, 默认每行有多少个字段 //defaultLabelWidth:120,//字段的标签的宽度 //defaultInputWidth:170,//字段的文本框宽度 //defaultLabelAlign:'right'//字段的对齐方式 var that = this; config = $.extend({},that.elementConfig['defaultConfig'],config); that.elementConfig[filter] = config; }; Form.prototype.getElementConfig = function(filter){ var that = this; if(filter in that.elementConfig){ return that.elementConfig[filter]; }else{ return that.elementConfig['defaultConfig']; } }; //添加字段 Form.prototype.addItems = function(filter,items,callback,sourceData,config,isAppend){ var that = this; that.sourceDataOfAddItem = sourceData; that.isAppendOfAddItem = isAppend; var elemForm = $(ELEM + function(){ return filter ? ('[lay-filter="' + filter +'"]') : ''; }()); if(!config){ config = { defaultColumnOneRow:1, inDialog:true }; } if(!("inDialog" in config)){ config['inDialog'] =true; } if(config){//设置布局 that.setElementConfig(filter,config); } config = that.getElementConfig(filter); if(!items){ return ; } if(!$webUtil.isArray(items)){ items = [items]; } //defaultColumnOneRow:1, 默认每行有多少个字段 //defaultLabelWidth:120,//字段的标签的宽度 //defaultInputWidth:170,//字段的文本框宽度 //defaultLabelAlign:'right'//字段的对齐方式 //添加字段 var colsCount =config.defaultColumnOneRow*1; if(colsCount<1){ colsCount = 1; } var currentCol = 0; var itemsHtml =""; var allDefaultValue = {}; var allAjaxItems =[]; var allFinishAjaxCount = 0; var allDateItems = []; var allRateItems = []; layui.each(items,function(_index,item) { if(!("readOnly" in item) && config.readOnly){ //设置的全部都是只读 item.readOnly = true; } var isUseAllWidth = false; var isNewRow = item.isNewRow; //类型 if (!item.type) { item.type = "text"; } item.type = item.type.toLocaleLowerCase(); if (item.field && !item.name) item.name = item.field; if (item.key && !item.name) item.name = item.key; if ($webUtil.inArray(['textarea', 'note', '5'], item.type) || item.useAllWidth) { isUseAllWidth = true; } if($webUtil.inArray(['line'],item.type)){ isNewRow = true; isUseAllWidth = true; } if (currentCol == 0 || isUseAllWidth || isNewRow ) { if ((isNewRow || isUseAllWidth) && itemsHtml!='') { itemsHtml += ''; currentCol = 0; } itemsHtml += '
'; } var name = $webUtil.getValueFromObj(item, ['name', 'field', 'key']);//name item.name = name; itemsHtml += that.getElementHtml(filter,item, config, sourceData); if ($webUtil.inArray(['combox', 'select', 'combobox', '3'], item.type)) { item.type = "combox"; var enumKey = $webUtil.getValueFromObj(item, ['comboxKey', 'comboxField', 'enumKey', 'enumField'], name); item.comboxKey = enumKey; allAjaxItems.push(item); } else if ($webUtil.inArray(['date', 'datetime', 'time'], item.type)) { //日期时间 if (!item.name) { item.name = item.field || item.key; } allDateItems.push(item); } else if ($webUtil.inArray(['rate'], item.type)) { //日期时间 if (!item.name) { item.name = item.field || item.key; } allRateItems.push(item); }else if($webUtil.inArray(['refer','combotree'],item.type)){ that.referFieldsMap[filter + "${refer}" + name] = item; }else if ($webUtil.inArray(['radio', 'checkbox'], item.type)) { if (!item.name) { item.name = item.field || item.key; } allAjaxItems.push(item); } //默认值 if (item.defaultValue) { var tv = $webUtil.getDefaultValue(item.defaultValue, sourceData); if (!tv) { tv = ''; } allDefaultValue[name] = tv; } var hidden = $webUtil.getBoolean($webUtil.getValueFromObj(item,['hidden','ishidden']));//是否隐藏 // wangting 隐藏列不计数 if(hidden){ currentCol--; } //if (!hidden) { if (currentCol == colsCount - 1 || isUseAllWidth || isNewRow) { itemsHtml += '
'; currentCol = 0; } else { currentCol++; } //} }); if(isAppend){ elemForm.append(itemsHtml); var hasedItems = that.fieldsMap[filter]; if(!hasedItems){ hasedItems = []; } for(var i = 0 ;i < items.length ;i ++){ hasedItems.push(items[i]); } that.fieldsMap[filter] = hasedItems; }else{ that.fieldsMap[filter] = items; elemForm.html(itemsHtml); } //weidy@2018-10-20 当只有一个input的时候,点击回车键就会出现刷新页面的情况,因此添加一个隐藏的input elemForm.prepend(''); if(allDateItems.length > 0){ //处理时间和日期的字段 var laydate = layui.laydate; for(var i = 0 ; i < allDateItems.length ; i ++){ var item = allDateItems[i]; var format=item.format||item.dateFormate||'yyyy-MM-dd' laydate.render({ elem:'[lay-filter="' + filter +'"] input[name="' + item.name + '"]', type:item.type, value:$webUtil.formateDateByFormate(item.value,format), ready:item.ready, name:item.name, // format:item.format?item.format:'yyyy-MM-dd HH:mm:ss', format:format, done:function(value){ layui.event.call(this, MOD_NAME, 'select('+ filter +')', { elem: this ,type: 'date' ,name:this.name ,value: value }); } }); } } if(allRateItems.length > 0){ //处理时间和日期的字段 var layrate = layui.rate; for(var i = 0 ; i < allRateItems.length ; i ++){ var item = allRateItems[i]; var className = item.name; layrate.render({ elem: '[lay-filter="' + filter +'"] div[name="' + item.name + '"]', length: 5, //星星个数 value: 3, //初始化值 theme: '#000099', //颜色 half: false, //支持半颗星 text: false, //显示文本,默认显示 '3.5星' readOnly: false, //只读 setText: function (value) { $("."+className).attr("data-value",value) } }); } } if(allAjaxItems.length > 0 ){ var combox = layui.vciWebComboxStore; for(var i = 0 ; i < allAjaxItems.length; i ++){ var item = allAjaxItems[i]; if(item.type == 'combox'||item.type == 'checkbox'||item.type == 'radio'){ var options = { callback:function(comboxKey,data,allData) { //给下拉菜单设置内容 var selectElem = elemForm.find("[lay-combox='" + comboxKey + "']"); selectElem.data(comboxKey,allData) var optionsHtml =[]; var secretgrade = null; if (sourceData) { secretgrade = sourceData.secretgrade; } var i = 0; if (selectElem.attr("lay-combox-type") == 'checkbox') { selectElem.html(optionsHtml); var name = selectElem.attr("lay-combox-name"); var readOnly = selectElem.attr("readOnly"); for(var key in data){ optionsHtml.push($( '').data('attributes',allData && allData[i]&&allData[i].attributes||{})); i++; } selectElem.empty().append(optionsHtml); } else if (selectElem.attr("lay-combox-type") == 'radio') { var name = selectElem.attr("lay-combox-name"); var readOnly = selectElem.attr("readOnly"); var selectedOption = ''; for(var key in data){ if (key == secretgrade) { selectedOption = "checked" } else if (key == item.defaultKey) { selectedOption = "checked" } else if (key == item.defaultValue) { selectedOption = "checked" } else if (i === 0) { selectedOption = "checked" } else { selectedOption = "" } optionsHtml.push($( '').data('attributes',allData && allData[i]&&allData[i].attributes||{})); i++; selectedOption = ""; } selectElem.empty().append(optionsHtml); } else { //combox optionsHtml =[$('')]; var selectedOption = ''; for (var key in data) { if (key == secretgrade) { selectedOption = "selected" } else if (key == item.defaultKey) { selectedOption = "selected" } else if (key == item.defaultValue) { selectedOption = "selected" } else if (i === 0) { selectedOption = "selected" } else { selectedOption = "" } if (item.unneedselect) { selectedOption = "" } optionsHtml.push($('').data('attributes',allData && allData[i]&&allData[i].attributes||{})); i++; selectedOption = ""; } selectElem.empty().append(optionsHtml); } allFinishAjaxCount++; if (allFinishAjaxCount == allAjaxItems.length) { that.render(null, filter); that.setValues(allDefaultValue, filter); if (callback) { callback(elemForm); } } }, failCallback:function(comboxKey,msg){ var selectElem = elemForm.find("[lay-combox='" + comboxKey +"']"); selectElem.html(msg); allFinishAjaxCount++; if(allFinishAjaxCount == allAjaxItems.length){ if(callback){ callback(elemForm); } } }, extraParams:item.extraParams }; if("data" in item && $webUtil.isNotNull(item.data)){ options['data'] = item['data']; }else{ if("url" in item){ options['url'] = item['url']; }else{ options['url'] = "default"; } } if("backPath" in item){ options['backPath'] = item['backPath']; } if($webUtil.getBoolean($webUtil.getValueFromObj(item,['reloadCombox','reloadEnum'],false))){ combox.newCombox(item.comboxKey,options,true); }else{ combox.newCombox(item.comboxKey,options,false); } }else { } } } else{ that.render(null,filter); that.setValues(allDefaultValue,filter); if(callback){ that.callbackOfAddItem = callback; callback(elemForm); } } }; Form.prototype.getFormItems = function(filter){ //获取原本 var that = this; if(that.fieldsMap && filter in that.fieldsMap){ return that.fieldsMap[filter]; } return null; }; Form.prototype.changeItems = function(filter,items,beforeItems){ //需要多传一个原始的字段 beforeItems 修改的items需要将参数写全 //调整字段的配置等内容 var that = this; var formValues = that.getValues(filter,true); if(!beforeItems){ beforeItems = that.getFormItems(filter); } var elemForm = $(ELEM + function(){ return filter ? ('[lay-filter="' + filter +'"]') : ''; }()); var config = that.getElementConfig(filter); if(!items){ return ; } if(!$webUtil.isArray(items)){ items = [items]; } var combox = layui.vciWebComboxStore; //defaultColumnOneRow:1, 默认每行有多少个字段 //defaultLabelWidth:120,//字段的标签的宽度 //defaultInputWidth:170,//字段的文本框宽度 //defaultLabelAlign:'right'//字段的对齐方式 //修改字段----注意只能修改字段的配置项,包括下拉菜单,和参照; layui.each(items,function(_index,item){ //类型 if(!item.type){ item.type = "text"; } //item.name = item.name.trim(); item.type = item.type.toLocaleLowerCase(); var el = elemForm.find('[lay-filter="' + (item.name || item.field) + '"]'); if($webUtil.inArray(['combox','select','combobox','3'], item.type)){ //下拉菜单,可以修改enumKey和选择内容 var enumKey = $webUtil.getValueFromObj(item,['comboxKey','comboxField','enumKey','enumField'],name);//下拉菜单的编号 if(el && enumKey ){ el.attr("lay-combox",enumKey); } if(item.data || item.url || item.reloadCombox){ combox.reload(enumKey,item); } }else if($webUtil.inArray(['refer','combotree'],item.type)){ if(el && item.showField){ el.attr("lay-refer-showField",item.showField); }else if(el &&item.referConfig){ var name = $webUtil.getValueFromObj(item, ['name', 'field', 'key']);//name var referConfig = item.referConfig; var vciRefer = layui.vciWebRefer; var oldReferConfig = vciRefer.getReferConfig(filter,name); oldReferConfig = $.extend(oldReferConfig,referConfig); vciRefer.newRefer(filter, name, el, oldReferConfig); } } }); layui.each(beforeItems,function(bindex,bitem){ layui.each(items,function(_index,item){ if((bitem.name || bitem.field) == (item.name || item.field)){ bitem = $.extend(bitem,item); //beforeItems.splice(bindex,1,bitem);//将字段变为最新的 } }) }); that.addItems(filter,beforeItems,that.callbackOfAddItem,that.sourceDataOfAddItem,config,that.isAppendOfAddItem); that.setValues(formValues,filter); //that.render(null,filter); }; Form.prototype.removeItems = function(filter,items,isAll){ var that = this; var elemForm = $(ELEM + function(){ return filter ? ('[lay-filter="' + filter +'"]') : ''; }()); var config = that.getElementConfig(filter); if(!items && !isAll){ return ; } if(items && !$webUtil.isArray(items)){ items = [items]; } if(isAll){ items = that.fieldsMap[filter]; } var combox = layui.vciWebComboxStore; var refer = layui.vciWebRefer; layui.each(items,function(_index,item){ //类型 if(!item.type){ item.type = "text"; } item.name = item.name.trim(); item.type = item.type.toLocaleLowerCase(); var el = elemForm.find('[lay-filter="' + item.name + '"]'); var enumKey = el.attr("lay-combox"); if($webUtil.isNotNull(enumKey)){ //说明是枚举 combox.destory(enumKey); } var referConfig = el.attr("lay-refer"); if($webUtil.isNotNull(referConfig)){ //说明是参照 refer.destory(filter,item.name); } if(!isAll){ $webUtil.removeFormArray(that.fieldsMap[filter],item,"name"); } el.remove(); }); if(isAll){ delete that.fieldsMap[filter]; elemForm.html(""); } }; Form.prototype.getElementHtml = function(filter,item,config,sourceData){ var that = this; //字段名称 var name = $webUtil.getValueFromObj(item,['name','field','key']).trim();//name var title = $webUtil.getValueFromObj(item,['text','title']);//字段名称 var titleColor = $webUtil.getValueFromObj(item,['titleColor','labelColor']);//字段颜色 var titleWidth = $webUtil.getValueFromObj(item,['titleWidth','labelWidth'],config.labelWidth?config.labelWidth:config.defaultLabelWidth);//字段宽度 var titleAlign = $webUtil.getValueFromObj(item,['titleAlign','labelAlign'],config.labelAlign?config.labelAlign:config.defaultLabelAlign);//字段对齐方式 var titleHidden = $webUtil.getBoolean($webUtil.getValueFromObj(item,['hideTitle','hideLabel','hideFieldLabel'],false));//字段对齐方式 var fieldIsNotNull = $webUtil.getBoolean($webUtil.getValueFromObj(item,['required','notNull','fieldNotNull'],false));//字段是否可以为空 var keyField = $webUtil.getBoolean($webUtil.getValueFromObj(item,['keyAttr'],false)); var emptyText = $webUtil.getValueFromObj(item,['emptyTitle','emptyText','fieldEmptyText','fieldEmptyAlertText']);//字段为空时的提示语句 var textWidth = $webUtil.getValueFromObj(item,['textWidth','inputWidth'],config.textWidth?config.textWidth:config.defaultInputWidth);//文本宽度 var textStyle = $webUtil.getValueFromObj(item,['textStyle','inputStyle'],config.textStyle?config.textStyle:'');//文本样式 var readOnly = $webUtil.getBoolean($webUtil.getValueFromObj(item,['readOnly','readonly','isDisable','disabled'],false)); var placeholder = $webUtil.getValueFromObj(item,['placeholder','tiptext']);//字段提示信息 var customLabelCss = $webUtil.getValueFromObj(item,['customLabelCss','customTitleCss']);//自定义字段名称的css var customTextCss = $webUtil.getValueFromObj(item,['customTextCss']);//自定义字段的css var validateRule = $webUtil.getValueFromObj(item,['verify','validateRule']);//自定义校验规则 var hidden = $webUtil.getBoolean($webUtil.getValueFromObj(item,['hidden','ishidden'],false));//是否隐藏 var search = $webUtil.getBoolean($webUtil.getValueFromObj(item,['search','laysearch'],false));//下拉框是否可搜索 var tooltips = $webUtil.getValueFromObj(item,['tooltips']);//提示信息 var titleStyle = $webUtil.getValueFromObj(item,['titleStyle','labelStyle'],""); var baseStyle='margin-left: 130px;margin-right:5px;'; if($webUtil.isNotNull(titleStyle) && !$webUtil.endWith(titleStyle,";")){ titleStyle = titleStyle + ";"; } if($webUtil.isNotNull(titleColor)){ titleStyle = 'color:' + titleColor + ';'; } if($webUtil.isNotNull(titleWidth) || titleWidth >0){ titleStyle += 'width:' + titleWidth*1 +'px;'; baseStyle='margin-left:' + (titleWidth*1+30) +'px;'; } if($webUtil.isNotNull(titleAlign) && $webUtil.inArray(['left','right','center'],titleAlign)){//只支持左对齐和右对齐 if($webUtil.inArray(['word','label'],item.type)){ titleAlign = "left"; } titleStyle += "text-align:" + titleAlign + ";" ; } if($webUtil.isNull(title) || titleHidden || hidden ){ titleStyle += "display:none;"; } if(validateRule!=''&& !form.config.verify[validateRule]) { form.config.verify[validateRule] = [ new RegExp(validateRule), '输入内容不符合验证规则' ] } if(fieldIsNotNull ){ validateRule = 'required|' + validateRule; customLabelCss = "layui-field-required " + customLabelCss; } if(keyField){ customLabelCss = "layui-field-key-field " + customLabelCss; } if($webUtil.isNotNull(validateRule) && $webUtil.endWith(validateRule,",")){ validateRule = validateRule.substring(0,validateRule.length -1); } if($webUtil.isNotNull(textWidth) || textWidth>0){ textStyle += ";width:" + textWidth*1 + "px;"; } var labelFlag = config.useLabelFlag?(" label-name-" + filter + "-" +name + " "):""; var labelHtml = ''; if(readOnly){ customTextCss = 'layui-field-readonly ' + customTextCss; } var baseCss = "layui-input-block"; if(!config.inDialog){ config.inDialog = false; } if(config.defaultColumnOneRow*1 >1 || config.inDialog){//在弹出窗口里面,得需要inline baseCss = "layui-input-inline"; baseStyle='margin-right:5px;'; if($webUtil.isNotNull(textWidth) || textWidth>0){ baseStyle += "width:" + textWidth*1 + "px;"; } } //前缀 var prefix = $webUtil.getValueFromObj(item,['prefix']); var prefixHtml = ""; if($webUtil.isNotNull(prefix)){ prefixHtml = "
" + prefix + "
"; } //后缀 var suffix =$webUtil.getValueFromObj(item,['suffix']); var suffixHtml = ""; if($webUtil.isNotNull(suffix)){ suffixHtml = "
" + suffix + "
"; } if($webUtil.inArray(['text','password','1','2','textfield','input','date','datetime','time'], item.type)){//文本和密码框---日期时间也是在这里面 var inputHtml = '
'; var inputType = "text"; if($webUtil.inArray(['password','2'],item.type) ){ inputType = 'password'; } inputHtml+= ' '; return labelHtml + prefixHtml+ inputHtml + '
' + suffixHtml; } else if($webUtil.inArray(['combox','select','combobox','3','radio','checkbox'], item.type)){//下拉框,注意参照不使用这个 var selectHtml = "
'; }else{ selectHtml += 'class="' + baseCss +'" ' + 'style="'+(hidden?"display:none;":"")+baseStyle+'"'; selectHtml += '>'; } return labelHtml + prefixHtml + selectHtml + "
" + suffixHtml; }else if($webUtil.inArray(['switch','boolean','truefalse','4'],item.type)){//开关 var switchHtml = '
'; var valueOnSelect = $webUtil.getValueFromObj(item,['switchCheckedValue'],"true"); switchHtml+= ' '; return labelHtml + prefixHtml + switchHtml +'
' + suffixHtml; }else if($webUtil.inArray(['textarea','note','5'],item.type)){//文本域 var inputHtml = '
'; inputHtml+= ' '; return labelHtml + prefixHtml + inputHtml + '
' + suffixHtml; }else if($webUtil.inArray(['rate'],item.type)){ var rateHtml = '
'; rateHtml += '
' + '
'; return labelHtml + prefixHtml + rateHtml +'
' + suffixHtml; }else if($webUtil.inArray(['cycledate'],item.type)){ var inputHtml = '
'; inputHtml+= ' '; return labelHtml + prefixHtml + inputHtml + '
' + suffixHtml; }else if($webUtil.inArray(['areadata'],item.type)){ //说明是区间值 baseCss = "layui-inline"; var baseStyle= (hidden?'display:none;':''); if(!textWidth ){ textWidth = 190; } baseStyle += "float:left;"; var childWidth = item.halfWidth; if(!childWidth){ childWidth = (textWidth-30)/2; } textStyle = ""; var inputHtml = '
'; var inputType = "text"; inputHtml += '
'; inputHtml += ' '; inputHtml += '
'; inputHtml += '
-
'; inputHtml += '
'; var maxValueName = $webUtil.getValueFromObj(item,['maxValueName']).trim(); if(item.maxValueNull){ fieldIsNotNull = false; if(validateRule.indexOf("required,")>-1){ validateRule = validateRule.replace("required,",""); } } inputHtml += ' '; return labelHtml + prefixHtml + inputHtml +'
' + suffixHtml; }else if($webUtil.inArray(['refer','combotree'],item.type)){//参照 var selectHtml = '
'; selectHtml += ''; // selectHtml += ''; return labelHtml + prefixHtml + selectHtml + '
' + suffixHtml; }else if($webUtil.inArray(['line'],item.type)){ //横线,可以用来做分组 var inputHtml = '
':'style="width:100%">'); if(item.lineText || item.text){ //如果有文字的时候,我们使用fieldset来处理 inputHtml += '
' + (item.lineText || item.text) + '
'; }else { var color = 'gray'; if ($webUtil.isNotNull(item.lineColor)) { color = item.lineColor; } inputHtml += '
'; } return prefixHtml + inputHtml + '
' + suffixHtml; }else if($webUtil.inArray(['label','word'],item.type)){ if(hidden){ titleStyle = "display:none;" + titleStyle; } titleStyle += "padding-top:9px;padding-bottom:9px;"; return prefixHtml + '
' + '
'):'>') + title + '
' + suffixHtml; }else if($webUtil.inArray(['file'],item.type)){ //文件 var fileHtml = '
':'>'); fileHtml += '
' + ' ' + '

点击上传,或将文件拖拽到此处

' + '
' + '
' + ''+ ' 已上传图片' + '
' + '
'; return labelHtml + prefixHtml + fileHtml + '
' + suffixHtml; }else if($webUtil.inArray(['webeditor'],item.type)){ //编辑器 var editorHtml = '
'; editorHtml += ''; return labelHtml + prefixHtml + editorHtml +'
' + suffixHtml; } return ""; }; //销毁方法 Form.prototype.destory =function(filter){ var that = this; //清除跟这个filter相关的所有配置 var allDefaultValueInThisFilter = []; for(var key in that.formDefaultValueMap){ if($webUtil.startWith(key,filter+"_")){ allDefaultValueInThisFilter.push(key); } } layui.each(allDefaultValueInThisFilter,function(_index,item){ delete that.formDefaultValueMap[item]; }); allDefaultValueInThisFilter= null; //清除跟这个filter相关的config if(filter in that.elementConfig){ delete that.elementConfig[filter]; } //删除所有的字段 if(filter in that.fieldsMap){ delete that.fieldsMap[filter]; } for(var key in that.referFieldsMap){ if(key.indexOf(filter + "${refer}") == 0){ delete that.referFieldsMap[key]; } } }; //end weidy //表单提交校验 var submit = function(){ var button = $(this), verify = form.config.verify, stop = null ,DANGER = 'layui-form-danger', field = {} ,elem = button.parents(ELEM) ,verifyElem = elem.find('*[lay-verify]') //获取需要校验的元素 ,formElem = button.parents('form')[0] //获取当前所在的form元素,如果存在的话 ,fieldElem = elem.find('input,select,textarea') //获取所有表单域 ,filter = button.attr('lay-filter'); //获取过滤器 //开始校验 layui.each(verifyElem, function(_, item){ var othis = $(this) ,vers = othis.attr('lay-verify').split('|') ,verType = othis.attr('lay-verType') //提示方式 ,value = othis.val(); othis.removeClass(DANGER); layui.each(vers, function(_, thisVer){ var isTrue //是否命中校验 ,errorText = '' //错误提示文本 ,isFn = typeof verify[thisVer] === 'function'; //匹配验证规则 if(verify[thisVer]){ var isTrue = isFn ? errorText = verify[thisVer](value, item) : !verify[thisVer][0].test(value); errorText = errorText || verify[thisVer][1]; //如果是必填项或者非空命中校验,则阻止提交,弹出提示 if(isTrue){ //提示层风格 if(verType === 'tips'){ layer.tips(errorText, function(){ if(typeof othis.attr('lay-ignore') !== 'string'){ if(item.tagName.toLowerCase() === 'select' || /^checkbox|radio$/.test(item.type)){ return othis.next(); } } return othis; }(), {tips: 1}); } else if(verType === 'alert') { layer.alert(errorText, {title: '提示', shadeClose: true}); } else { layer.msg(errorText, {icon: 5, shift: 6}); } if(!device.android && !device.ios) item.focus(); //非移动设备自动定位焦点 othis.addClass(DANGER); return stop = true; } } }); if(stop) return stop; }); if(stop) return false; var nameIndex = {}; //数组 name 索引 layui.each(fieldElem, function(_, item){ item.name = (item.name || '').replace(/^\s*|\s*&/, ''); if(!item.name) return; //用于支持数组 name if(/^.*\[\]$/.test(item.name)){ var key = item.name.match(/^(.*)\[\]$/g)[0]; nameIndex[key] = nameIndex[key] | 0; item.name = item.name.replace(/^(.*)\[\]$/, '$1['+ (nameIndex[key]++) +']'); } if(/^checkbox|radio$/.test(item.type) && !item.checked) return; field[item.name] = item.value; }); //获取字段 return layui.event.call(this, MOD_NAME, 'submit('+ filter +')', { elem: this ,form: formElem ,field: field }); }; //自动完成渲染 var form = new Form() ,dom = $(document), win = $(window); form.render(); //表单reset重置渲染 dom.on('reset', ELEM, function(){ var filter = $(this).attr('lay-filter'); setTimeout(function(){ form.render(null, filter); }, 50); }); //表单提交事件 dom.on('submit', ELEM, submit) .on('click', '*[lay-submit]', submit); exports(MOD_NAME, form); });