maycur-business
Version:
maycur business react components of web
674 lines (536 loc) • 28.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _PureJs = _interopRequireDefault(require("../PureJs"));
var _FormChefCommon = _interopRequireDefault(require("../FormChefCommon"));
var _FormTombStone = _interopRequireWildcard(require("../FormTombStone"));
var _formDishDefault = _interopRequireDefault(require("./formDishDefault"));
var _generateValidator = _interopRequireDefault(require("./generateValidator"));
var _lodash = _interopRequireDefault(require("lodash"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var RootFormDish = null;
var AssociationSort = _PureJs["default"].AssociationSort;
function defineDish(obj) {
RootFormDish = obj;
}
var FormChef = function FormChef(option) {
return function (WrappedComponent) {
var defaultFormOption = {
cookerOption: {},
formReadyLock: true,
preDefinedFormulas: [],
formMode: 'EDIT',
//NOTE EDIT：编辑,VIEW:查看模式
formFields: [],
isValueMap: false //谨慎使用
};
var formOption = Object.assign(defaultFormOption, option);
var FormDish = formOption.FormDish ? formOption.FormDish : RootFormDish;
var WrapperFormChef =
/*#__PURE__*/
function (_Component) {
_inherits(WrapperFormChef, _Component);
function WrapperFormChef(_props) {
var _this;
_classCallCheck(this, WrapperFormChef);
_this = _possibleConstructorReturn(this, _getPrototypeOf(WrapperFormChef).call(this, _props));
_this.formMapFields = function (props) {
var _this$state = _this.state,
formFields = _this$state.formFields,
formReady = _this$state.formReady;
var formValue = props.formValue;
var modifyFieldValues = {};
if (formReady && formFields && formFields.length > 0 && formValue) {
console.log('formValue==', formValue, _this.fields);
_lodash["default"].forEach(formFields, function (item) {
var matchedField = _this.fields[item.identifier];
if (matchedField && !_lodash["default"].isEqual(matchedField.value, formValue[item.identifier])) {
modifyFieldValues[item.identifier] = formValue[item.identifier];
}
});
if (!_lodash["default"].isEmpty(modifyFieldValues)) {
console.log('formMapFields changed===', modifyFieldValues);
_this.setFieldsValue(modifyFieldValues, {
modifyFromProps: true
});
}
}
};
_this.updateFormFields = function (fields) {
//只有在编辑页面的时候，需要根据条件里面的只读性(isFieldReadOnly)设置到formFields的isReadonly属性上
if (formOption.formMode === 'EDIT') {
var effectedFieldValues = {};
_lodash["default"].forEach(fields, function (field) {
field.property.isReadonly = field.property.isFieldReadOnly;
if (field.detailTableFields) {
_lodash["default"].forEach(field.detailTableFields, function (detailField) {
detailField.property.isReadonly = detailField.property.isFieldReadOnly;
});
}
if (field.property.isFieldHide && _this.getFieldValue([field.identifier])) {
effectedFieldValues[field.identifier] = undefined;
}
});
_this.setFieldsValue(effectedFieldValues);
}
_this.setState({
formFields: fields
});
};
_this.getFieldError = function (name) {
var matchField = _this.fields[name];
if (matchField) {
return matchField.validateError;
}
};
_this.setFormReady = function (val) {
if (formOption.formReadyLock) {
_this.setState({
formReady: !!val
});
}
};
_this.fetchData = function () {
if (_this.rcFormRef) return _this.rcFormRef.getFieldsValue();
};
_this.setFieldsValue = function (changeValues) {
var modifyOption = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (!changeValues || _lodash["default"].isEmpty(changeValues)) return;
var blockChangeEffect = modifyOption.blockChangeEffect,
modifyFromProps = modifyOption.modifyFromProps;
var formReady = _this.state.formReady;
var formData = _this.fetchFormData(); //是否触发条件公式
if (formOption.formMode === 'EDIT') _this.fieldChangeOnCondition(formData, changeValues);
var identifierList = []; //NOTE 触发watch函数
/* 触发观察函数 */
//如果表单是查看模式或者formReady=false的情况，不触发观察函数
if (formOption.formMode === 'EDIT' && formReady) {
_lodash["default"].forEach(changeValues, function (value, key) {
identifierList.push(key);
if (key in _this.fields) {
var fieldInstance = _this.fields[key];
_lodash["default"].forEach(fieldInstance.watch, function (item) {
if (typeof item === 'function') {
item(value, formData[key]);
}
});
}
});
}
_this.modifyFormData(_objectSpread({}, formData, {}, changeValues), modifyFromProps ? false : true); //如果表单是查看模式||formReady=false||blockChangeEffect（明确改值不需要联动）的情况，不触发表单联动
if (!blockChangeEffect && formOption.formMode === 'EDIT' && formReady) {
var modifyValues = {};
/* 表单联动触发 */
_lodash["default"].forEach(changeValues, function (val, key) {
var formulaEffectData = _this.formChefParser.triggerFormula(key, val);
modifyValues = _objectSpread({}, modifyValues, {}, formulaEffectData);
});
if (!_lodash["default"].isEmpty(modifyValues)) {
_this.setFieldsValue(modifyValues);
}
}
};
_this.modifyFormData = function (formData) {
var needUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var formChange = _this.props.formChange;
_lodash["default"].forEach(formData, function (val, key) {
if (_this.fields[key]) {
_this.fields[key].setValue(val);
}
});
if (formOption.isValueMap && needUpdate) {
//props的更改已经让组件render过一次
var onChange = _this.props.onChange;
if (typeof onChange === 'function') onChange(_this.fetchFormData());
/* 表单值改变回调函数 */
if (typeof formChange === 'function') formChange(formData);
} else {
if (needUpdate) _this.forceUpdate();
}
};
_this.fetchFormData = function () {
var formData = {};
_lodash["default"].forEach(_this.fields, function (field, name) {
formData[name] = field.value;
});
return formData;
};
_this.getFieldDecorator = function (name, rule) {
return function (fieldElem) {
var matcheField = _this.fields[name];
if (matcheField) {
// console.log(this.validators);
if (_this.validators) _this.validators.addRule(name, rule);
return _react["default"].cloneElement(fieldElem, {
value: matcheField.value,
onChange: function onChange(val) {
_this.setFieldsValue(_defineProperty({}, name, val));
},
ref: function ref(_ref) {
matcheField.componentInstance = _ref;
}
});
} else {
return null;
}
};
};
_this.setFieldWatch = function (fieldName, fn) {
if (typeof fn === 'function' && fieldName && fieldName in _this.fields) {
var fieldInstacne = _this.fields[fieldName];
fieldInstacne.setWatch(fn);
}
};
_this.cookForm = function () {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
/*
publicProps:表单级别的公共props每个field都应该接受
privateProps:字段级别的props，包含所有field的私有props,需要过滤后传入对应的字段组件
params:用于方法本身的一些逻辑参数
*/
var publicProps = options.publicProps,
privateProps = options.privateProps,
bottomExtra = options.bottomExtra,
topExtra = options.topExtra;
var _this$state2 = _this.state,
formFields = _this$state2.formFields,
formReady = _this$state2.formReady;
var FormNode = null;
if (!_lodash["default"].isEmpty(formFields) && formReady) {
FormNode = _react["default"].createElement("section", {
className: "mk-form"
}, topExtra ? topExtra : null, formFields.map(function (field, index) {
if (field.property.isFieldHide) return null;
return _react["default"].createElement(FormDish, {
FormBuild: FormChef,
key: field.code || index,
form: _this.instance,
field: field,
publicProps: publicProps,
privateProps: privateProps
});
}), bottomExtra ? bottomExtra : null);
} else {
FormNode = _react["default"].createElement(_FormTombStone["default"], null);
}
;
return FormNode;
};
_this.formInstantiate =
/*#__PURE__*/
function () {
var _ref2 = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee(orgFormFields) {
var formFields;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
if (!(!orgFormFields && _lodash["default"].isEmpty(orgFormFields))) {
_context.next = 2;
break;
}
return _context.abrupt("return");
case 2:
formFields = formOption.formMode === 'EDIT' ? _this.dynamicFormCtrl.init(orgFormFields) : orgFormFields;
_context.next = 5;
return new Promise(function (resolve, reject) {
_this.setState({
formFields: formFields
}, function () {
resolve();
});
});
case 5:
_this.validators = (0, _generateValidator["default"])(formFields);
_this.fieldInstantiate(formFields);
if (formOption.formMode === 'EDIT') _this.buildFormulaParser({
formFields: formFields
});
case 8:
case "end":
return _context.stop();
}
}
}, _callee);
}));
return function (_x) {
return _ref2.apply(this, arguments);
};
}();
_this.initData = function (data) {
var isNew = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (!data) return;
var formFields = _this.state.formFields;
var cloneFormData = _lodash["default"].clone(_this.formData);
_lodash["default"].forEach(formFields, function (field) {
if (_lodash["default"].has(data, field.identifier)) {
cloneFormData[field.identifier] = {
value: data[field.identifier]
};
}
});
_this.fieldChangeOnCondition(cloneFormData, cloneFormData, formFields, true);
_this.formChefParser.updateParserPool({
pool: _objectSpread({}, cloneFormData)
});
_this.setFormReady(true);
_this.modifyFormData(cloneFormData);
if (isNew && formOption.formMode === 'EDIT') {
//默认值的获取方式有些是要通过后台去请求，所以默认值的步骤独立出去
_this.formDefaultProcess(formFields);
}
};
_this.fieldChangeOnCondition = function (formData, changedFields, _formFields, isFirstUpdate) {
if (_this.dynamicFormCtrl && _this.dynamicFormCtrl.hasCondition) {
var formFields = _this.state.formFields;
_this.dynamicFormCtrl && _this.dynamicFormCtrl.onFieldChange(_formFields || formFields, formData, changedFields, isFirstUpdate);
}
};
_this.buildFormulaParser = function () {
var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var formFields = data.formFields || _this.state.formFields;
if (formFields && formFields.length > 0) {
var formulaRules = [];
_this.formChefParser.buildFormFormula(formFields, defaultFormOption.preDefinedFormulas);
var associationFields = _lodash["default"].filter(formFields, {
type: 'AssociationInput'
});
if (associationFields && associationFields.length) {
// 构建一个类似的有向无环图
// 碧桂园的轻表单里基本全是数据互联组件，组件之间互相依赖，会发很多重复的请求。因此将这些依赖关系排个序，按序发请求
// 设置为隐藏的数据互联，在其显示时，在didmount中触发请求
var _associationFields = _lodash["default"].cloneDeep(associationFields);
_lodash["default"].remove(_associationFields, function (item) {
return item.property.isFieldHide;
});
_this.associationSort = new AssociationSort();
_this.associationSort.buildGraph(_associationFields);
_lodash["default"].each(associationFields, function (field, fIndex) {
_lodash["default"].each(field.cascadeDataRelations, function (f, sIndex) {
formulaRules.push({
targetField: field.identifier,
referField: f.value,
// 受影响字段
formula: "clear".concat(fIndex).concat(sIndex, "()"),
// maycur-business中同名方法会被覆盖
setFunctionList: _defineProperty({}, "clear".concat(fIndex).concat(sIndex), function clear() {
// 初始化请求已完成
if (_this.associationInit) {
var _formFields2 = _this.state.formConfig.formFields;
var target = _lodash["default"].find(_formFields2, {
identifier: field.identifier
});
if (target && !target.property.isFieldHide) {
_this.setFieldsValue(_defineProperty({}, "".concat(field.identifier), undefined));
_this.getAssociationFieldDefaultValue(field);
}
}
}),
privateParser: true
});
});
});
}
_this.formChefParser.genFormula(formulaRules); // TODO this.fieldInstance这里有歧义
var id = setInterval(function () {// if (!_.isEmpty(this.fieldInstance)) {
// this.associationSort && this.associationSort.traversalSortedList(this.getAssociationFieldDefaultValue)
// .then(() => {
// this.associationInit = true;
// })
// .catch(() => { });
// clearInterval(id);
// }
}, 100);
}
};
_this.formDefaultProcess = function () {
var formFields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var fieldsValue = {};
_lodash["default"].forEach(formFields, function (field) {
var fieldInstance = _this.fields[field.identifier];
if (fieldInstance) {
var v = fieldInstance.getDefault();
if (v && v.then && typeof v.then === 'function') {
v.then(function (r) {
if (r && r.hasDefault && fieldInstance.value !== undefined) {
_this.setDefaultValues(_defineProperty({}, field.identifier, r.value));
}
});
} else if (v && v.hasDefault) {
fieldsValue[field.identifier] = v.value;
}
}
});
_this.setFieldsValue(fieldsValue);
};
_this.setDefaultValues = function () {
var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
if (_this.rcFormRef) {
var fieldsValue = {};
_lodash["default"].forEach(data, function (val, key) {
var fieldValue = _this.rcFormRef.getFieldValue(key);
if (fieldValue === undefined) fieldsValue[key] = val;
});
if (_lodash["default"].isEmpty(fieldsValue)) _this.rcFormRef.setFieldsValue(fieldsValue);
}
};
_this.fieldInstantiate = function () {
var formFields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
_lodash["default"].forEach(formFields, function (field) {
var fieldInstance = new _formDishDefault["default"]({
config: field
});
fieldInstance.setValidator(_this.validators);
_this.fields[field.identifier] = fieldInstance;
});
};
_this.validateFields = function (cb) {
var formData = _this.fetchFormData();
var firstField;
_this.validators.validate(formData, {
formFields: _this.state.formFields
}, function (errors, fields) {
if (errors) {
_lodash["default"].forEach(errors, function (err) {
var message = err.message,
field = err.field;
if (_this.fields[field]) {
_this.fields[field].validateError = [message];
if (!firstField) firstField = _this.fields[field];
}
});
} else {
_lodash["default"].forEach(_this.fields, function (field) {
field.validateError = undefined;
});
}
if (typeof cb === 'function') cb(errors, fields);
_this.forceUpdate();
if (firstField) firstField.scroll();
});
};
_this.monitorFormValue = function () {} // const { formValue } = this.props;
// const { formFields } = this.state;
// let syncFormValue = {};
// const createFormField = formOption.createFormField || rcCreateFormField;
// _.forEach(formFields, field => {
// if (_.has(formValue, field.identifier)) {
// syncFormValue[field.identifier] = createFormField({ value: formValue[field.identifier] });
// }
// })
// console.log(syncFormValue);
// if (!_.isEmpty(syncFormValue)) {
// this.rcFormRef.updateFields(syncFormValue);
// }
// TODO 获取数据互联的默认值
;
_this.getAssociationFieldDefaultValue =
/*#__PURE__*/
function () {
var _ref3 = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee2(field) {
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
case "end":
return _context2.stop();
}
}
}, _callee2);
}));
return function (_x2) {
return _ref3.apply(this, arguments);
};
}();
_this.state = {
formReady: formOption.formReadyLock ? false : true,
formFields: []
};
_this.formData = {};
_this.fields = {};
_this.validators = undefined;
_this.dynamicFormCtrl = new _FormChefCommon["default"].DynamicFormCtrl({
updateFormFields: _this.updateFormFields
});
_this.formChefParser = new _FormChefCommon["default"].formChefParser();
_this.instance = {
initData: _this.initData,
cookForm: _this.cookForm,
formInstantiate: _this.formInstantiate,
setWatch: _this.setFieldWatch,
setFieldsValue: _this.setFieldsValue,
getFieldDecorator: _this.getFieldDecorator,
getFieldError: _this.getFieldError,
validateFields: _this.validateFields
};
return _this;
}
_createClass(WrapperFormChef, [{
key: "componentWillReceiveProps",
// componentDidUpdate(prevProps, prevState) {
// if (formOption.isValueMap) {
// this.formMapFields(this.props);
// }
// }
value: function componentWillReceiveProps(nextProps) {
if (formOption.isValueMap) {
this.formMapFields(nextProps);
}
} // componentWillUnmount() {
// // 手动回收变量,防止有闭包的数据调用，内存无法回收
// if (this) {
// this.formData = null;
// this.fields = null;
// this.validators = null;
// this.dynamicFormCtrl = null;
// this.formChefParser = null;
// this.instance = null;
// }
// }
}, {
key: "render",
value: function render() {
var _this$state3 = this.state,
formReady = _this$state3.formReady,
formFields = _this$state3.formFields;
return _react["default"].createElement(WrappedComponent, _extends({}, this.props, {
FormBuild: FormChef,
FormDish: formReady ? FormDish : _FormTombStone.TombStone // formFields={formFields}
,
form: this.instance
}));
}
}]);
return WrapperFormChef;
}(_react.Component);
WrapperFormChef.displayName = 'FormChef';
return WrapperFormChef;
};
};
FormChef.defineDish = defineDish;
var _default = FormChef;
exports["default"] = _default;