@m-materials/form-item
Version:
基于antd中form表单，加入了自定义组件，以简化代码为模板。
565 lines (458 loc) • 20.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _comGrid = _interopRequireDefault(require("@m-materials/com-grid"));
var _comTree = _interopRequireDefault(require("@m-materials/com-tree"));
var _antd = require("antd");
var _zh_CN = _interopRequireDefault(require("antd/es/date-picker/locale/zh_CN"));
var _lodash = _interopRequireDefault(require("lodash"));
var _moment = _interopRequireDefault(require("moment"));
var _react = _interopRequireWildcard(require("react"));
var _CustomDatePicker = require("./CustomDatePicker");
var _excluded = ["parseName", "parseField"],
_excluded2 = ["noFormControl", "span", "label", "noToolTip", "code", "hidden", "type", "rules", "validator"],
_excluded3 = ["initialValue", "formLayout", "maxLength"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
var RadioGroup = _antd.Radio.Group;
var FormItem = _antd.Form.Item;
var RangePicker = _antd.DatePicker.RangePicker,
MonthPicker = _antd.DatePicker.MonthPicker;
var Option = _antd.Select.Option;
var currencyCodeStyleLeft = {
width: '60%'
};
var currencyCodeStyleRight = {
width: '37%',
marginLeft: '3%'
};
var packageComponents = 'comGrid comList comTree'; // 标准formItem组件和平台组件参数冲突转换
function changeParams(item, type) {
// 补充默认清空函数
if (item.afterSelect && !item.afterClear) {
item.afterClear = function () {
item.afterSelect({});
};
}
if (item.reader) {
item.name = item.reader.parseName && item.reader.parseName;
item.field = item.reader.parseField && item.reader.parseField;
if (type === 'comList') {
// 根据配置的render自动计算快速搜索值
if (!item.searchProperties) {
var searchProperties = [];
searchProperties.push(item.reader.name);
if (item.reader.description) {
searchProperties.push(item.reader.description);
}
item.searchProperties = searchProperties;
}
} else if (type === 'comGrid') {
// 根据配置的columns自动计算快速搜索值
if (item.columns && !item.searchProperties) {
item.searchProperties = item.columns.filter(function (col) {
return !col.ignoreSearch && !col.dataIndex.includes('Remark');
}).map(function (subItem) {
return subItem.dataIndex;
});
} // 根据配置的columns自适应计算宽度
if (item.columns && !item.width) {
var needConfigWidth = true;
var width = 0;
for (var _iterator = _createForOfIteratorHelperLoose(item.columns), _step; !(_step = _iterator()).done;) {
var subItem = _step.value;
if (!subItem.width || subItem.width.toString().includes('%')) {
needConfigWidth = false;
break;
} else {
width += parseInt(subItem.width);
}
}
if (needConfigWidth) {
item.width = width;
}
}
}
var parseName = item.parseName,
parseField = item.parseField,
propsItem = (0, _objectWithoutPropertiesLoose2["default"])(item, _excluded);
return propsItem;
}
return item;
} // 初始化parseField的值
function initFieldValue(reader, form) {
var getFieldDecorator = form.getFieldDecorator;
var _reader$parseField = reader.parseField,
parseField = _reader$parseField === void 0 ? [] : _reader$parseField,
_reader$editData = reader.editData,
editData = _reader$editData === void 0 ? {} : _reader$editData;
for (var _iterator2 = _createForOfIteratorHelperLoose(parseField), _step2; !(_step2 = _iterator2()).done;) {
var key = _step2.value;
getFieldDecorator(key, {
initialValue: _lodash["default"].get(editData, key)
});
}
} // 初始化parseField的值
function initFieldArrayValue(reader, form) {
var getFieldDecorator = form.getFieldDecorator;
var _reader$parseField2 = reader.parseField,
parseField = _reader$parseField2 === void 0 ? [] : _reader$parseField2,
_reader$initialField = reader.initialField,
initialField = _reader$initialField === void 0 ? {} : _reader$initialField;
for (var _iterator3 = _createForOfIteratorHelperLoose(parseField.entries()), _step3; !(_step3 = _iterator3()).done;) {
var _step3$value = _step3.value,
index = _step3$value[0],
key = _step3$value[1];
getFieldDecorator(key, {
initialValue: initialField[index]
});
}
}
var StandardFormItem = /*#__PURE__*/function (_PureComponent) {
(0, _inheritsLoose2["default"])(StandardFormItem, _PureComponent);
function StandardFormItem() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
_this.ItemConfig = {};
_this.ItemRule = [];
_this.formLayoutTemp = {};
_this.itemSpan = 8;
_this.defaultFormLayout = {
labelCol: {
span: 8
},
wrapperCol: {
span: 16
}
};
_this.getItem = function (item, type) {
var rest = _lodash["default"].omit(item, ['newKey']); // 如果是平台组件
if (packageComponents.includes(type)) {
// 对接平台组件参数转换
// 为每一个field赋值
if (rest.reader.hasOwnProperty('editData') && rest.form) {
if (_lodash["default"].isArray(rest.reader.editData)) {
rest.reader.initialField = rest.reader.editData;
initFieldArrayValue(rest.reader, rest.form);
} else {
initFieldValue(rest.reader, rest.form);
}
}
if (rest.allowClear === false) {
rest.allowClear = false;
} else {
rest.allowClear = true;
}
rest = changeParams(rest, type);
} else {
rest = _lodash["default"].omit(item, ['rowKey', 'remotePaging', 'cascadeParams', 'afterSelect', 'doAfterSelect', 'searchProperties']);
}
switch (type) {
case 'timePicker':
return /*#__PURE__*/_react["default"].createElement(_antd.TimePicker, (0, _extends2["default"])({
style: {
width: '100%'
}
}, rest, {
locale: _zh_CN["default"]
}));
case 'datePicker':
if (!rest.format) {
rest.format = 'YYYY-MM-DD';
}
return /*#__PURE__*/_react["default"].createElement(_antd.DatePicker, (0, _extends2["default"])({
style: {
width: '100%'
}
}, rest, {
locale: _zh_CN["default"]
}));
case 'datePickerNew':
rest.onChange && (rest.originOnchange = rest.onChange);
rest.onChange && delete rest.onChange;
return /*#__PURE__*/_react["default"].createElement(_CustomDatePicker.CustomDatePicker, rest);
case 'rangePicker':
if (!rest.format) {
rest.format = 'YYYY-MM-DD';
}
return /*#__PURE__*/_react["default"].createElement(RangePicker, (0, _extends2["default"])({
style: {
width: '100%'
}
}, rest, {
locale: _zh_CN["default"]
}));
case 'monthPicker':
if (!rest.format) {
rest.format = 'YYYY-MM';
}
return /*#__PURE__*/_react["default"].createElement(MonthPicker, (0, _extends2["default"])({
style: {
width: '100%'
}
}, rest, {
locale: _zh_CN["default"]
}));
case 'select':
var options = [].concat(rest.options);
var newOptions = options.map(function (value) {
return /*#__PURE__*/_react["default"].createElement(Option, {
key: value.value,
value: value.value
}, value.text);
});
if (rest.allowClear === false) {
rest.allowClear = false;
} else {
rest.allowClear = true;
}
return /*#__PURE__*/_react["default"].createElement(_antd.Select, (0, _extends2["default"])({}, rest, {
style: {
width: '100%'
}
}), newOptions);
case 'radio':
options = [].concat(rest.options);
newOptions = options.map(function (value) {
return /*#__PURE__*/_react["default"].createElement(_antd.Radio, {
key: value.value,
value: value.value
}, value.text);
});
return /*#__PURE__*/_react["default"].createElement(RadioGroup, (0, _extends2["default"])({}, rest, {
style: {
width: '100%'
}
}), newOptions);
case 'inputNumber':
var commonProps = {
style: {
width: '100%'
},
min: rest.min || -9999999999999,
max: rest.max || 9007199254740992,
precision: rest.hasOwnProperty('precision') ? rest.precision : 2
}; // 千分位统一设置
if (rest.thousandth) {
// 千分位代理onBlur方法
var onBlurPlus = function onBlurPlus(e) {
var obj = {};
obj.target = {};
obj.target.value = parseInt(("" + e.target.value).replace(/\$\s?|(,*)/g, ''));
rest.onBlurPlus(obj);
};
rest.suffix = rest.suffix || '';
rest.onBlur && (rest.onBlur = onBlurPlus); // return <MoneyInput {...rest} {...commonProps} />;
}
if (rest.percent) {
rest.formatter = function (value) {
return value + "%";
};
rest.parser = function (value) {
return value.replace('%', '');
};
}
return /*#__PURE__*/_react["default"].createElement(_antd.InputNumber, (0, _extends2["default"])({}, rest, commonProps));
case 'textArea':
var _rest = rest,
rows = _rest.rows;
return /*#__PURE__*/_react["default"].createElement(_antd.Input.TextArea, (0, _extends2["default"])({
rows: rows || 4,
maxLength: 1500
}, rest));
case 'checkbox':
return /*#__PURE__*/_react["default"].createElement(_antd.Checkbox, rest, rest.text);
case 'input':
rest.type = rest.inputType;
rest.inputType && delete rest.inputType;
return /*#__PURE__*/_react["default"].createElement(_antd.Input, (0, _extends2["default"])({
autoComplete: "off",
maxLength: 128 || rest.maxLength
}, rest));
case 'button':
rest.type = rest.buttonType;
rest.buttonType && delete rest.buttonType;
return /*#__PURE__*/_react["default"].createElement(_antd.Button, (0, _extends2["default"])({}, rest, {
style: rest.style || {
width: '100%'
}
}), rest.text);
case 'text':
return /*#__PURE__*/_react["default"].createElement("span", {
style: rest.style
}, rest.text);
case 'switch':
return /*#__PURE__*/_react["default"].createElement(_antd.Switch, (0, _extends2["default"])({
size: rest.size || 'small'
}, rest));
case 'comList':
return /*#__PURE__*/_react["default"].createElement(ComList, (0, _extends2["default"])({}, rest, {
style: rest.style || {
width: '100%'
}
}));
case 'comTree':
return /*#__PURE__*/_react["default"].createElement(_comTree["default"], (0, _extends2["default"])({}, rest, {
defaultValue: rest.initialValue,
style: rest.style || {
width: '100%'
}
}));
case 'comGrid':
return /*#__PURE__*/_react["default"].createElement(_comGrid["default"], (0, _extends2["default"])({
style: rest.style || {
width: '100%'
},
columns: rest.columns || [{
title: '代码',
width: '50%',
dataIndex: 'code'
}, {
title: '名称',
width: '50%',
dataIndex: 'name'
}],
searchProperties: rest.searchProperties,
rowKey: rest.rowKey,
defaultValue: rest.initialValue,
form: rest.form
}, rest));
default:
}
};
_this.validatorFunc = function (rule, value, callback) {
var min = _this.props.min || 0;
var banEQ = _this.props.banEQ;
if (banEQ && (value === 0 || value) && value <= min) {
callback("\u503C\u4E0D\u80FD\u5C0F\u4E8E\u7B49\u4E8E" + min + "!");
} else if (value && value < min) {
callback("\u503C\u4E0D\u80FD\u5C0F\u4E8E" + min + "!");
} else {
callback();
}
};
_this.validatorWrap = function (rule, value, callback) {
_this.props.validator(rule, value, callback);
callback();
};
return _this;
}
var _proto = StandardFormItem.prototype;
_proto.render = function render() {
var _this$props = this.props,
noFormControl = _this$props.noFormControl,
span = _this$props.span,
label = _this$props.label,
noToolTip = _this$props.noToolTip,
code = _this$props.code,
hidden = _this$props.hidden,
type = _this$props.type,
rules = _this$props.rules,
validator = _this$props.validator,
tempItem = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, _excluded2);
var initialValue = tempItem.initialValue,
formLayout = tempItem.formLayout,
maxLength = tempItem.maxLength,
item = (0, _objectWithoutPropertiesLoose2["default"])(tempItem, _excluded3);
var reader = item.reader;
var decoratorCode = code; // 如果是平台组件，需要接受form
if (packageComponents.includes(type)) {
if (!reader) {
_antd.message.error(label + "\u3010" + code + "\u3011\u6CA1\u6709\u914D\u7F6Ereader\uFF0C\u8BF7\u68C0\u67E5\uFF01");
return null;
}
decoratorCode = reader.parseName || reader.name;
}
this.itemSpan = span || this.itemSpan; // 设置item的布局
this.formLayoutTemp = formLayout || this.defaultFormLayout; // 设置item的基础设置
// 设置规则
this.ItemRule = rules || this.ItemRule; // 为必填信息设置默认验证信息
if (tempItem.required) {
this.ItemRule.push({
required: true,
message: label + "\u7684\u4E0D\u80FD\u4E3A\u7A7A!"
});
} // 设置初始值
if (type === 'datePicker') {
// 时间选择器，如果是时间，如果没有加moment转换，自动加上
if (typeof initialValue === 'string') {
initialValue = (0, _moment["default"])(initialValue);
}
} // 设置初始值
if (type === 'datePickerNew') {
// 时间选择器，如果是时间，如果没有加moment转换，自动加上
if (initialValue && typeof initialValue !== 'string') {
var format = item.format || 'YYYY-MM-DD hh:mm:ss';
initialValue = initialValue.format(format);
}
}
if (type === 'checkbox' || type === 'switch') {
this.ItemConfig.initialValue = !!initialValue;
} else {
this.ItemConfig.initialValue = initialValue;
}
if (type === 'inputNumber') {
this.validator = validator ? this.validatorWrap : this.validatorFunc;
this.ItemRule.push({
validator: this.validator
});
} else if (validator) {
this.ItemRule.push({
validator: this.validatorWrap
});
}
if (type === 'input') {
if (maxLength) {
this.ItemRule.push({
max: maxLength,
message: label + "\u7684\u957F\u5EA6\u4E0D\u80FD\u5927\u4E8E" + maxLength + "!"
});
}
}
this.ItemConfig.rules = this.ItemRule;
if (type === 'checkbox' || type === 'switch') {
this.ItemConfig.valuePropName = 'checked';
}
if (item.currencyCode) {
item.style = currencyCodeStyleLeft;
}
var needFormWrapper = true;
var formContent = this.getItem(item, type);
if (type === 'button' || type === 'text' || noFormControl) {
needFormWrapper = false;
} // 判断是否加入form控制
if (needFormWrapper) {
formContent = /*#__PURE__*/_react["default"].createElement(FormItem, (0, _extends2["default"])({
name: decoratorCode,
label: label
}, this.formLayoutTemp, this.ItemConfig), formContent);
} else {
formContent = /*#__PURE__*/_react["default"].createElement("span", null, formContent);
}
var content = /*#__PURE__*/_react["default"].createElement(_antd.Col, {
key: code + "_col",
span: this.itemSpan,
style: {
display: hidden ? 'none' : 'block'
}
}, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, formContent, item.currencyCode && /*#__PURE__*/_react["default"].createElement(_antd.Input, {
disabled: true,
value: item.currencyCode,
style: currencyCodeStyleRight
})));
return content;
};
return StandardFormItem;
}(_react.PureComponent);
var _default = StandardFormItem;
exports["default"] = _default;