/**
@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 = '0)?'margin-left:'+titleWidth+'px;':'')+(hidden?"display:none;":"")+baseStyle+'">';
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 += '
';
}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 + '' + 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);
});