204 lines
6.3 KiB
Java
204 lines
6.3 KiB
Java
![]() |
import _defineProperty from 'babel-runtime/helpers/defineProperty';
|
|||
|
import _extends from 'babel-runtime/helpers/extends';
|
|||
|
import PropTypes from '../_util/vue-types';
|
|||
|
import classNames from 'classnames';
|
|||
|
import { ColProps } from '../grid/Col';
|
|||
|
import isRegExp from 'lodash/isRegExp';
|
|||
|
import warning from '../_util/warning';
|
|||
|
import FormItem from './FormItem';
|
|||
|
import { initDefaultProps, getListeners } from '../_util/props-util';
|
|||
|
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
|
|||
|
|
|||
|
export var FormProps = {
|
|||
|
layout: PropTypes.oneOf(['horizontal', 'inline', 'vertical']),
|
|||
|
labelCol: PropTypes.shape(ColProps).loose,
|
|||
|
wrapperCol: PropTypes.shape(ColProps).loose,
|
|||
|
colon: PropTypes.bool,
|
|||
|
labelAlign: PropTypes.oneOf(['left', 'right']),
|
|||
|
prefixCls: PropTypes.string,
|
|||
|
hideRequiredMark: PropTypes.bool,
|
|||
|
model: PropTypes.object,
|
|||
|
rules: PropTypes.object,
|
|||
|
validateMessages: PropTypes.any,
|
|||
|
validateOnRuleChange: PropTypes.bool
|
|||
|
};
|
|||
|
|
|||
|
export var ValidationRule = {
|
|||
|
/** validation error message */
|
|||
|
message: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
|||
|
/** built-in validation type, available options: https://github.com/yiminghe/async-validator#type */
|
|||
|
type: PropTypes.string,
|
|||
|
/** indicates whether field is required */
|
|||
|
required: PropTypes.boolean,
|
|||
|
/** treat required fields that only contain whitespace as errors */
|
|||
|
whitespace: PropTypes.boolean,
|
|||
|
/** validate the exact length of a field */
|
|||
|
len: PropTypes.number,
|
|||
|
/** validate the min length of a field */
|
|||
|
min: PropTypes.number,
|
|||
|
/** validate the max length of a field */
|
|||
|
max: PropTypes.number,
|
|||
|
/** validate the value from a list of possible values */
|
|||
|
'enum': PropTypes.oneOfType([String, PropTypes.arrayOf(String)]),
|
|||
|
/** validate from a regular expression */
|
|||
|
pattern: PropTypes.custom(isRegExp),
|
|||
|
/** transform a value before validation */
|
|||
|
transform: PropTypes.func,
|
|||
|
/** custom validate function (Note: callback must be called) */
|
|||
|
validator: PropTypes.func
|
|||
|
};
|
|||
|
|
|||
|
var Form = {
|
|||
|
name: 'AFormModel',
|
|||
|
props: initDefaultProps(FormProps, {
|
|||
|
layout: 'horizontal',
|
|||
|
hideRequiredMark: false,
|
|||
|
colon: true,
|
|||
|
validateOnRuleChange: false
|
|||
|
}),
|
|||
|
Item: FormItem,
|
|||
|
created: function created() {
|
|||
|
this.fields = [];
|
|||
|
},
|
|||
|
provide: function provide() {
|
|||
|
return {
|
|||
|
FormContext: this
|
|||
|
};
|
|||
|
},
|
|||
|
|
|||
|
inject: {
|
|||
|
configProvider: { 'default': function _default() {
|
|||
|
return ConfigConsumerProps;
|
|||
|
} }
|
|||
|
},
|
|||
|
watch: {
|
|||
|
rules: function rules() {
|
|||
|
if (this.validateOnRuleChange) {
|
|||
|
this.validate(function () {});
|
|||
|
}
|
|||
|
}
|
|||
|
},
|
|||
|
computed: {
|
|||
|
vertical: function vertical() {
|
|||
|
return this.layout === 'vertical';
|
|||
|
}
|
|||
|
},
|
|||
|
methods: {
|
|||
|
addField: function addField(field) {
|
|||
|
if (field) {
|
|||
|
this.fields.push(field);
|
|||
|
}
|
|||
|
},
|
|||
|
removeField: function removeField(field) {
|
|||
|
if (field.prop) {
|
|||
|
this.fields.splice(this.fields.indexOf(field), 1);
|
|||
|
}
|
|||
|
},
|
|||
|
onSubmit: function onSubmit(e) {
|
|||
|
if (!getListeners(this).submit) {
|
|||
|
e.preventDefault();
|
|||
|
} else {
|
|||
|
this.$emit('submit', e);
|
|||
|
}
|
|||
|
},
|
|||
|
resetFields: function resetFields() {
|
|||
|
if (!this.model) {
|
|||
|
warning(false, 'FormModel', 'model is required for resetFields to work.');
|
|||
|
return;
|
|||
|
}
|
|||
|
this.fields.forEach(function (field) {
|
|||
|
field.resetField();
|
|||
|
});
|
|||
|
},
|
|||
|
clearValidate: function clearValidate() {
|
|||
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|||
|
|
|||
|
var fields = props.length ? typeof props === 'string' ? this.fields.filter(function (field) {
|
|||
|
return props === field.prop;
|
|||
|
}) : this.fields.filter(function (field) {
|
|||
|
return props.indexOf(field.prop) > -1;
|
|||
|
}) : this.fields;
|
|||
|
fields.forEach(function (field) {
|
|||
|
field.clearValidate();
|
|||
|
});
|
|||
|
},
|
|||
|
validate: function validate(callback) {
|
|||
|
var _this = this;
|
|||
|
|
|||
|
if (!this.model) {
|
|||
|
warning(false, 'FormModel', 'model is required for resetFields to work.');
|
|||
|
return;
|
|||
|
}
|
|||
|
var promise = void 0;
|
|||
|
// if no callback, return promise
|
|||
|
if (typeof callback !== 'function' && window.Promise) {
|
|||
|
promise = new window.Promise(function (resolve, reject) {
|
|||
|
callback = function callback(valid) {
|
|||
|
valid ? resolve(valid) : reject(valid);
|
|||
|
};
|
|||
|
});
|
|||
|
}
|
|||
|
var valid = true;
|
|||
|
var count = 0;
|
|||
|
// 如果需要验证的fields为空,调用验证时立刻返回callback
|
|||
|
if (this.fields.length === 0 && callback) {
|
|||
|
callback(true);
|
|||
|
}
|
|||
|
var invalidFields = {};
|
|||
|
this.fields.forEach(function (field) {
|
|||
|
field.validate('', function (message, field) {
|
|||
|
if (message) {
|
|||
|
valid = false;
|
|||
|
}
|
|||
|
invalidFields = _extends({}, invalidFields, field);
|
|||
|
if (typeof callback === 'function' && ++count === _this.fields.length) {
|
|||
|
callback(valid, invalidFields);
|
|||
|
}
|
|||
|
});
|
|||
|
});
|
|||
|
if (promise) {
|
|||
|
return promise;
|
|||
|
}
|
|||
|
},
|
|||
|
validateField: function validateField(props, cb) {
|
|||
|
props = [].concat(props);
|
|||
|
var fields = this.fields.filter(function (field) {
|
|||
|
return props.indexOf(field.prop) !== -1;
|
|||
|
});
|
|||
|
if (!fields.length) {
|
|||
|
warning(false, 'FormModel', 'please pass correct props!');
|
|||
|
return;
|
|||
|
}
|
|||
|
fields.forEach(function (field) {
|
|||
|
field.validate('', cb);
|
|||
|
});
|
|||
|
}
|
|||
|
},
|
|||
|
|
|||
|
render: function render() {
|
|||
|
var _classNames;
|
|||
|
|
|||
|
var h = arguments[0];
|
|||
|
var customizePrefixCls = this.prefixCls,
|
|||
|
hideRequiredMark = this.hideRequiredMark,
|
|||
|
layout = this.layout,
|
|||
|
onSubmit = this.onSubmit,
|
|||
|
$slots = this.$slots;
|
|||
|
|
|||
|
var getPrefixCls = this.configProvider.getPrefixCls;
|
|||
|
var prefixCls = getPrefixCls('form', customizePrefixCls);
|
|||
|
|
|||
|
var formClassName = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, prefixCls + '-horizontal', layout === 'horizontal'), _defineProperty(_classNames, prefixCls + '-vertical', layout === 'vertical'), _defineProperty(_classNames, prefixCls + '-inline', layout === 'inline'), _defineProperty(_classNames, prefixCls + '-hide-required-mark', hideRequiredMark), _classNames));
|
|||
|
return h(
|
|||
|
'form',
|
|||
|
{
|
|||
|
on: {
|
|||
|
'submit': onSubmit
|
|||
|
},
|
|||
|
'class': formClassName },
|
|||
|
[$slots['default']]
|
|||
|
);
|
|||
|
}
|
|||
|
};
|
|||
|
|
|||
|
export default Form;
|