ng-layout-form
Version:
layout form
796 lines (792 loc) • 48.8 kB
JavaScript
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
var _excluded = ["onChange"];
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = Object.defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, catch: function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
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; }
import { Col, Form, Row } from 'antd';
import { useDebounce } from 'ng-base-stand';
import { AutoResize, compHoc, cssVar, history, NG, registerComponent, useDevState, useExtendRef, useRefCallback } from 'ng-lib-tsx';
import { useEffect, useMemo, useRef, useState } from 'react';
import scrollIntoView from 'scroll-into-view-if-needed';
import { getInitVals } from '..';
import useColspan from "../useColspan";
import { fomatValues, getComp, getObjValue, getSubscribeFn, LayConfWrap, setObjValue } from "../util/util";
import Footer from "./footer";
import { getFormStyle } from "./handleStyle";
import "./index.less";
import { mergeEventHandler } from "./listener";
import Label from "./renderLabel";
import ViewItem from "./viewItem";
import { initRules, mergeRules as _mergeRules } from "./volidRule";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var gutter = {
xs: 8,
sm: 16,
md: 24,
lg: 32
};
function isValueLabel(item) {
return NG.isObject(item) && item.hasOwnProperty('value') && item.hasOwnProperty('label');
}
function getObjPath(obj) {
var p = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
var prev = p.length > 0 ? p[p.length - 1] : '';
var tmpKey = Object.keys(obj)[0];
var tmpValue = tmpKey ? obj[tmpKey] : '';
var current = prev ? "".concat(prev, ".").concat(tmpKey) : tmpKey;
if (NG.isObject(tmpValue) && Object.keys(tmpValue).length > 0) {
return getObjPath(tmpValue, [].concat(_toConsumableArray(p), [current]));
}
return [].concat(_toConsumableArray(p), [current]);
}
/**
* 转换form表单的value值，通用帮助或下拉选择转换成{value, label}格式
* @param initValues
* @param fields
*/
function convertValues(initValues, fields) {
var splitStr = ',';
var fn = function fn(items) {
items.forEach(function (field) {
var item = _objectSpread(_objectSpread({}, field), field.antProps);
if (item.xtype === 'container') {
fn(item.children || item.items);
} else {
var value = getObjValue(initValues, item.name);
// 代码名称列合并{value, label}
if (item.name) {
var _item$xtype, _item$xtype$toLowerCa;
var valueType = item.valueType;
var xType = ((_item$xtype = item.xtype) === null || _item$xtype === void 0 ? void 0 : (_item$xtype$toLowerCa = _item$xtype.toLowerCase) === null || _item$xtype$toLowerCa === void 0 ? void 0 : _item$xtype$toLowerCa.call(_item$xtype)) || '';
var nameField = item.nameField || (xType.endsWith('select') || xType.endsWith('help') ? "".concat(item.name, "_EXName") : '');
if (nameField && !NG.isNullOrEmpty(value, '')) {
var _ref, _getObjValue;
var nameFieldValue = getObjValue(initValues, nameField);
var label = nameFieldValue !== null && nameFieldValue !== void 0 ? nameFieldValue : value;
var tip = (_ref = (_getObjValue = getObjValue(initValues, "".concat(item.name, "EXNameNew"))) !== null && _getObjValue !== void 0 ? _getObjValue : getObjValue(initValues, "".concat(item.name, "_EXNameNew"))) !== null && _ref !== void 0 ? _ref : '';
if (item.multiple || item.xtype === 'NGMultipleHelp') {
var tipArray = NG.isArray(tip) ? tip : tip ? tip.toString().split(splitStr) : [];
var labelArray = NG.isArray(label) ? label : label ? label.toString().split(splitStr) : [];
var valueArray = NG.isArray(value) ? value : value.toString().split(splitStr);
var valueLabel = valueArray.map(function (v, i) {
var _labelArray$i;
return v !== null && v !== void 0 && v.hasOwnProperty('value') ? _objectSpread({
tip: tipArray[i]
}, v) : {
value: NG.convertData(v, valueType),
label: (_labelArray$i = labelArray[i]) !== null && _labelArray$i !== void 0 ? _labelArray$i : v,
tip: tipArray[i]
};
}).filter(function (_ref2) {
var label = _ref2.label;
return !NG.isNullOrEmpty(label, '');
});
setObjValue(initValues, item.name, valueLabel.length ? valueLabel : null);
} else {
setObjValue(initValues, item.name, value.hasOwnProperty('value') ? _objectSpread({
tip: tip
}, value) : {
value: NG.convertData(value, valueType),
label: label,
tip: tip
});
}
} else {
setObjValue(initValues, item.name, NG.convertData(value, valueType, item.format));
}
}
}
});
};
fn(fields);
return initValues;
}
function FormLayoutComp(cmpProps) {
var _formConf$colspan, _formConf$labelPositi, _formConf$layout, _formConf$disabled, _formConf$bordered, _ref3, _formConf$colon, _formConf$view;
var _useDevState = useDevState({
type: 'form',
id: cmpProps['id'] || cmpProps['data-cid'] || 'form',
props: cmpProps,
items: cmpProps.formConf.children,
itemKey: 'name'
}),
_useDevState2 = _slicedToArray(_useDevState, 2),
props = _useDevState2[0],
children = _useDevState2[1];
var formConf = useMemo(function () {
return _objectSpread(_objectSpread({}, cmpProps.formConf), {}, {
children: children
});
}, [cmpProps.formConf, children]);
var formSetRef = props.formSetRef,
design = props.design,
initSc = props.initSc,
footerProps = props.footerProps,
opt = props.opt,
_props$dataId = props.dataId,
dataId = _props$dataId === void 0 ? 'PhId' : _props$dataId,
dv = props.defaultValue,
value = props.value,
disabled = props.disabled,
outRef = props.outRef,
rules = props.rules,
formStyle = props.style,
defaultFormClassName = props.className,
defaultBordered = props.bordered,
onLoad = props.onLoad,
_props$disabledNotify = props.disabledNotify,
disabledNotify = _props$disabledNotify === void 0 ? false : _props$disabledNotify,
defaultColon = props.colon;
var fields = useMemo(function () {
var fn = function fn(items) {
var pname = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
return items.map(function (item) {
var tmp = _objectSpread({}, item);
if (tmp.xtype === 'container') {
tmp.children = fn(tmp.children || tmp.items, tmp.name);
delete tmp.name;
} else if (NG.isString(tmp.name) && pname) {
tmp.name = [pname, tmp.name];
}
return tmp;
});
};
return fn(formConf.children || []);
}, [formConf.children]);
var isChange = useRef(false);
var defaultValue = useMemo(function () {
return convertValues(getInitVals({
children: fields
}, 'form', value || dv) || {}, fields);
}, [value, dv]);
var initValue = useMemo(function () {
return NG.deepCopy(defaultValue);
}, []);
var colspan = (_formConf$colspan = formConf.colspan) !== null && _formConf$colspan !== void 0 ? _formConf$colspan : props.colspan;
var labelPosition = (_formConf$labelPositi = formConf.labelPosition) !== null && _formConf$labelPositi !== void 0 ? _formConf$labelPositi : props.labelPosition || 'left';
var formLayout = (_formConf$layout = formConf.layout) !== null && _formConf$layout !== void 0 ? _formConf$layout : props.layout || (labelPosition === 'top' ? 'vertical' : 'horizontal');
var cacheItems = useMemo(function () {
return {};
}, [formConf]);
var _Form$useForm = Form.useForm(),
_Form$useForm2 = _slicedToArray(_Form$useForm, 1),
form = _Form$useForm2[0];
var _useState = useState(NG.isNumber(colspan) ? 24 / colspan : 8),
_useState2 = _slicedToArray(_useState, 2),
dspan = _useState2[0],
setDspan = _useState2[1];
var gDisabled = (_formConf$disabled = formConf.disabled) !== null && _formConf$disabled !== void 0 ? _formConf$disabled : disabled;
var query = history.location.query;
var optType = opt || query['opt'];
var labelWidth = formConf.labelWidth || props.labelWidth || cssVar.formLabelWidth;
var _useState3 = useState({}),
_useState4 = _slicedToArray(_useState3, 2),
m = _useState4[0],
setM = _useState4[1];
var bordered = (_formConf$bordered = formConf.bordered) !== null && _formConf$bordered !== void 0 ? _formConf$bordered : defaultBordered;
var colon = bordered ? false : (_ref3 = (_formConf$colon = formConf.colon) !== null && _formConf$colon !== void 0 ? _formConf$colon : defaultColon) !== null && _ref3 !== void 0 ? _ref3 : true;
var isView = (_formConf$view = formConf.view) !== null && _formConf$view !== void 0 ? _formConf$view : props.view;
var formClassName = NG.classNames('ng-form-wrapper', defaultFormClassName, bordered ? 'ng-bordered-form' : '', isView ? 'ng-view-form' : '');
var mergeHandler = useMemo(function () {
return mergeEventHandler(function () {
setM(function (m) {
return _objectSpread({}, m);
});
});
}, []);
var handlers = mergeHandler();
var containerId = "".concat(props.id || props['data-cid'] || formConf.name || 'form');
var _useColspan = useColspan(containerId, colspan),
breakPairs = _useColspan.breakPairs,
breakPoints = _useColspan.breakPoints,
setBreakPairs = _useColspan.setBreakPairs;
var labelAlign = props.labelAlign || formConf.labelAlign || 'right';
useEffect(function () {
onLoad === null || onLoad === void 0 ? void 0 : onLoad();
outRef.current._compIns.getObserver().prevNotify({
ins: outRef.current
}, 'onLoad').then();
}, [formConf]);
//合并事件
useEffect(function () {
mergeHandler(initSc, true);
}, [initSc]);
useEffect(function () {
setM(_mergeRules(initRules({
children: fields
}), rules));
}, [fields, rules]);
var syncValues = function syncValues(changedValues) {
NG.deepMerge(defaultValue, changedValues);
};
useEffect(function () {
form.setFieldsValue(defaultValue);
}, [defaultValue]);
var rewriteFormApi = {
resetFields: function resetFields() {
isChange.current = true;
syncValues(initValue);
form.resetFields();
},
setFieldsValue: function setFieldsValue(values) {
isChange.current = true;
syncValues(values);
form.setFieldsValue(defaultValue);
},
setFieldValue: function setFieldValue(name, value) {
rewriteFormApi.setFieldsValue(_defineProperty({}, name, value));
},
scrollToField: function scrollToField(name) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var node = document.querySelector("[data-cid=\"".concat(containerId, "_").concat(name, "\"]"));
node && scrollIntoView(node, _objectSpread({
scrollMode: 'if-needed',
block: 'center'
}, options));
}
};
var validData = function validData() {
return form.validateFields().then(function () {
return true;
}, function (_ref4) {
var errorFields = _ref4.errorFields;
var namePath = errorFields[0].name.join('_');
rewriteFormApi.scrollToField(namePath);
return false;
});
};
useExtendRef(outRef, _objectSpread(_objectSpread(_objectSpread({}, form), rewriteFormApi), {}, {
isChanged: function isChanged() {
return isChange.current;
},
setModel: setM,
clear: function clear() {
Object.keys(defaultValue).forEach(function (key) {
defaultValue[key] = undefined;
});
form.setFieldsValue(defaultValue);
},
getFormatValues: getFormatValues,
getValues: function getValues() {
var mergeValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
var undefinedValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
return beforeSubmit({
mergeValues: mergeValues,
undefinedValue: undefinedValue
});
},
changeFormValues: function changeFormValues() {
var values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
return rewriteFormApi.setFieldsValue(values);
},
mergeRules: function mergeRules(newRule) {
return setM(function (m) {
return _mergeRules(m, newRule);
});
},
mergeHandler: mergeHandler,
isValid: validData,
validData: validData,
validateForm: form.validateFields,
getItem: function getItem(name) {
var _form$getFieldInstanc, _form$getFieldInstanc2;
return (_form$getFieldInstanc = form.getFieldInstance(name)) === null || _form$getFieldInstanc === void 0 ? void 0 : (_form$getFieldInstanc2 = _form$getFieldInstanc.getApi) === null || _form$getFieldInstanc2 === void 0 ? void 0 : _form$getFieldInstanc2.call(_form$getFieldInstanc);
},
setBreakPairs: setBreakPairs,
setHidden: function setHidden(name) {
var hidden = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
setConfigByName(name, {
hidden: hidden
});
},
setRequired: function setRequired(name) {
var required = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
setConfigByName(name, {
required: required
});
},
getConfig: function getConfig() {
return formConf;
},
setConfig: setConfig,
setConfigByName: setConfigByName,
getDspan: function getDspan() {
return dspan;
},
focus: function focus() {
focusItem(fields);
function focusItem(items) {
for (var index = 0; index < items.length; index++) {
var element = items[index];
if (Array.isArray(element.children) && focusItem(element.children)) {
return true;
}
if (element.disabled || element.hidden) {} else {
var _form$getFieldInstanc3, _form$getFieldInstanc4, _form$getFieldInstanc5;
var item = (_form$getFieldInstanc3 = form.getFieldInstance(element.name)) === null || _form$getFieldInstanc3 === void 0 ? void 0 : (_form$getFieldInstanc4 = (_form$getFieldInstanc5 = _form$getFieldInstanc3).getApi) === null || _form$getFieldInstanc4 === void 0 ? void 0 : _form$getFieldInstanc4.call(_form$getFieldInstanc5);
if (item !== null && item !== void 0 && item.focus) {
var _item$focus;
item === null || item === void 0 ? void 0 : (_item$focus = item.focus) === null || _item$focus === void 0 ? void 0 : _item$focus.call(item);
return true;
}
}
}
return false;
}
},
subscribe: getSubscribeFn(outRef),
setReadOnly: function setReadOnly() {
var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
var disabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
if (NG.isBoolean(name)) {
NG.fastDp.form.updateProps({
id: containerId,
props: {
disabled: disabled
}
});
} else {
setConfigByName(name, {
disabled: disabled
});
}
}
}));
/**
* 渲染表单条目
*/
var _renderItem = useRefCallback(function (item, index) {
var _item$xtype2, _item$xtype2$toLowerC, _item$xtype3, _item$xtype3$toLowerC;
var key = item.name || item.itemId || index;
if (item.hidden) return '';
var cellStyle = {
paddingLeft: 0,
paddingRight: 0
};
formLayout === 'inline' && (cellStyle['with'] = formConf.minWidth || 300);
var span = getColspan(item.colspan) || 1;
if (['ngattachment', 'attachment', 'htmleditor', 'nghtmleditor'].includes((_item$xtype2 = item.xtype) === null || _item$xtype2 === void 0 ? void 0 : (_item$xtype2$toLowerC = _item$xtype2.toLowerCase) === null || _item$xtype2$toLowerC === void 0 ? void 0 : _item$xtype2$toLowerC.call(_item$xtype2)) && item.mode !== 'button') {
span = 24;
}
if (!item.status && ['ngattachment', 'attachment'].includes((_item$xtype3 = item.xtype) === null || _item$xtype3 === void 0 ? void 0 : (_item$xtype3$toLowerC = _item$xtype3.toLowerCase) === null || _item$xtype3$toLowerC === void 0 ? void 0 : _item$xtype3$toLowerC.call(_item$xtype3))) {
item.status = NG.getQueryValue('oType');
}
return /*#__PURE__*/_jsx(Col, {
style: cellStyle,
"data-id": key,
span: span,
children: renderFormItem(item, index)
}, key);
function renderFormItem(item, index) {
item = item || {};
var _getComp = getComp(item),
Comp = _getComp.instance;
if (Comp === 'NGGroup') {
return /*#__PURE__*/_jsx("div", {
className: 'nggroup',
style: {
display: item.hidden ? 'none' : 'flex'
},
children: renderGroup(item, index)
}, item.name || index);
} else {
return renderFI(item, index);
}
}
function renderFI(item, index) {
var _item$disabled;
var _ref5 = isView ? {
instance: ViewItem
} : getComp(item),
Comp = _ref5.instance,
defaultProps = _ref5.props;
var listener = (handlers.children || {})[item.name] || {};
var rules = m[item.name] || [];
var dp = filterProps(item);
var disabled = (_item$disabled = item.disabled) !== null && _item$disabled !== void 0 ? _item$disabled : gDisabled;
disabled && (dp['disabled'] = !!disabled);
var clientSqlFilter = dp.clientSqlFilter;
if (NG.isFunction(clientSqlFilter)) {
dp.clientSqlFilter = function (args) {
return clientSqlFilter(_objectSpread(_objectSpread({}, args), {}, {
form: outRef.current
}));
};
}
'getPopupContainer' in dp && (dp['getPopupContainer'] = getPopupContainer);
var _ref6 = _objectSpread(_objectSpread({}, dp), listener),
onChange = _ref6.onChange,
others = _objectWithoutProperties(_ref6, _excluded);
bordered && (others.bordered = false);
if (!item.hasOwnProperty('extra') && ['InputNumber', 'Input', 'NGInputNumber'].includes(item.xtype) && ['percent', 'rate'].includes(item.type)) {
item.extra = '%';
}
var getItemProps = function getItemProps() {
var p = {
label: item.label ? /*#__PURE__*/_jsx(Label, {
width: labelPosition === 'top' ? '100%' : item.labelWidth || labelWidth,
label: item.label,
langKey: item.langKey,
labelAlign: labelAlign
}) : '',
labelAlign: labelAlign,
className: "item-checked-customer formItem ".concat(!item.label && 'form-item-nolabel' || ''),
key: item.name || index,
required: item.required,
style: item.style
};
if (!item.extra) {
p.rules = rules;
p.name = item.name || index;
}
if (item.dependencies) {
p.dependencies = item.dependencies;
}
return p;
};
var getItemCmp = function getItemCmp() {
return /*#__PURE__*/_jsx(Comp, _objectSpread(_objectSpread(_objectSpread({}, isView ? {
'data-item': item
} : {}), others), defaultProps));
};
return /*#__PURE__*/_jsx(Form.Item, _objectSpread(_objectSpread({}, getItemProps()), {}, {
children: item.extra ? /*#__PURE__*/_jsxs("div", {
style: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: 6
},
children: [/*#__PURE__*/_jsx(Form.Item, {
name: item.name,
noStyle: true,
style: {
flex: 1,
minWidth: 0
},
rules: rules,
children: getItemCmp()
}), item.extra]
}) : getItemCmp()
}));
}
function renderGroup(item, index) {
var items = item.children || item.items || [];
if (item.customerStyle) {
return /*#__PURE__*/_jsx("div", {
style: item.customerStyle,
children: items.map(function (it) {
return renderFI(it, index);
})
});
} else {
var noColToFormStyle = _objectSpread({
display: 'flex',
width: '100%',
marginBottom: 0
}, item.style || {});
return /*#__PURE__*/_jsx(Form.Item, {
label: item.label && /*#__PURE__*/_jsx(Label, {
width: item.labelWidth || labelWidth,
label: item.label,
labelAlign: labelAlign
}),
className: "item-checked-customer formItem formContainerItem",
style: noColToFormStyle,
required: item.required,
children: items.map(function (it) {
return renderFI(it, index);
})
});
}
}
});
/**
* 渲染表单
*/
var _renderForm = useMemo(function () {
return fields.map(_renderItem);
}, [fields, formConf, m, dspan, gDisabled, labelPosition]);
var fstyle = useMemo(function () {
return getFormStyle(formConf);
}, [formConf]);
var hasBorderStyle = bordered || formConf.bordered ? 'border-form' : '';
var className = useMemo(function () {
return NG.classNames('ng-form', formLayout, hasBorderStyle);
}, [design]);
var formHandler = _objectSpread({}, handlers);
delete formHandler.children;
var getDspan = useRefCallback(function (_ref7) {
var width = _ref7.width;
var index = breakPoints.findIndex(function (item) {
return item > width;
});
index = index === -1 ? breakPoints.length - 1 : index;
var defaultSpan = 24 / breakPairs[breakPoints[index]];
if (dspan !== defaultSpan) {
setDspan(defaultSpan || 4);
}
});
function dealPropsChange(_x2, _x3, _x4) {
return _dealPropsChange.apply(this, arguments);
}
function _dealPropsChange() {
_dealPropsChange = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(changedValues, allValues, oldValues) {
var changedEvent, res;
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
changedEvent = props.onValuesChange || handlers['onValuesChange'];
_context.next = 3;
return changedEvent === null || changedEvent === void 0 ? void 0 : changedEvent(changedValues, allValues);
case 3:
res = _context.sent;
if (res === false) {
rewriteFormApi.setFieldsValue(oldValues);
} else if (NG.isObject(res)) {
syncValues(res);
if (res !== changedValues) {
rewriteFormApi.setFieldsValue(defaultValue);
}
}
return _context.abrupt("return", res !== false);
case 6:
case "end":
return _context.stop();
}
}, _callee);
}));
return _dealPropsChange.apply(this, arguments);
}
var notify = useDebounce(function (updateValue) {
NG.getPageObserver().notify({
key: getObjPath(updateValue),
containerId: props['cid'] || containerId,
form: outRef.current,
args: [updateValue, defaultValue]
}, 'onValuesChange');
}, {
wait: 250
});
function handleValuesChange(changedValues, allValues) {
var oldValues = NG.deepCopy(defaultValue);
isChange.current = true;
var updateValue = changedValues;
syncValues(updateValue);
dealPropsChange(changedValues, allValues, oldValues).then(function (success) {
var listener = handlers.children || {};
Object.keys(updateValue).forEach(function (key) {
var _listener$key;
var dp = filterProps(getFormItem(key) || {}); //二开属性里面的onChange事件覆盖listener
var onChange = dp.onChange || ((_listener$key = listener[key]) === null || _listener$key === void 0 ? void 0 : _listener$key.onChange);
if (onChange && updateValue[key] !== oldValues[key]) {
onChange(updateValue[key], oldValues[key]);
}
});
if (success && !disabledNotify) {
var _outRef$current$inner, _outRef$current, _formSetRef$current;
(_outRef$current$inner = (_outRef$current = outRef.current).innerNotify) === null || _outRef$current$inner === void 0 ? void 0 : _outRef$current$inner.call(_outRef$current, [updateValue, defaultValue], 'onValuesChange');
formSetRef === null || formSetRef === void 0 ? void 0 : (_formSetRef$current = formSetRef.current) === null || _formSetRef$current === void 0 ? void 0 : _formSetRef$current.innerNotify([updateValue, defaultValue], 'onValuesChange');
notify(updateValue);
}
});
}
return /*#__PURE__*/_jsx("div", {
id: "".concat(containerId, "_ctx"),
style: {
position: 'relative'
},
children: /*#__PURE__*/_jsx(AutoResize, {
onResize: getDspan,
children: /*#__PURE__*/_jsxs(Form, _objectSpread(_objectSpread({
name: containerId
}, handlers), {}, {
onValuesChange: handleValuesChange,
form: form,
style: formStyle,
layout: formLayout,
className: formClassName,
colon: colon,
children: [/*#__PURE__*/_jsx(Row, {
className: className,
style: fstyle,
gutter: gutter,
children: _renderForm
}), /*#__PURE__*/_jsx(Footer, {
footerProps: footerProps,
onSave: onSave,
onReset: onReset,
onCheck: form.validateFields,
disabled: gDisabled
})]
}))
})
});
function onSave() {
props.onSave && props.onSave(getFormatValues(), form.getFieldsError());
}
function getFormatValues() {
var initValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var id = dataId || 'PhId';
var data = _objectSpread(_objectSpread({}, initValues), beforeSubmit());
var opt = optType || (data !== null && data !== void 0 && data[id] ? 'modifiedRow' : 'newRow');
return fomatValues(formConf.name, 'form', opt, dataId, data)()[formConf.name];
}
function beforeSubmit() {
var _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref8$mergeValues = _ref8.mergeValues,
mergeValues = _ref8$mergeValues === void 0 ? true : _ref8$mergeValues,
_ref8$undefinedValue = _ref8.undefinedValue,
undefinedValue = _ref8$undefinedValue === void 0 ? '' : _ref8$undefinedValue;
var initValues = form.getFieldsValue();
var fn = function fn(items) {
items.forEach(function (field) {
var item = _objectSpread(_objectSpread({}, field), field.antProps);
var originValue = getObjValue(initValues, item.name);
if (item.name && !item.hidden) {
if (field.xtype === 'container') {
fn(field.children || field.items);
} else {
var _item$emptyValue;
var nameField = item.nameField;
var emptyValue = (_item$emptyValue = item.emptyValue) !== null && _item$emptyValue !== void 0 ? _item$emptyValue : undefinedValue;
if (Array.isArray(originValue)) {
if (originValue.length > 0 && isValueLabel(originValue[0])) {
setObjValue(initValues, item.name, originValue.map(function (item) {
return item.value;
}).join());
nameField && setObjValue(initValues, nameField, originValue.map(function (item) {
return item.label;
}).join());
} else if (originValue.length === 0) {
setObjValue(initValues, item.name, emptyValue);
nameField && setObjValue(initValues, nameField, '');
}
} else if (isValueLabel(originValue)) {
setObjValue(initValues, item.name, originValue.value);
nameField && setObjValue(initValues, nameField, originValue.label);
}
if (getObjValue(initValues, item.name) === undefined) {
setObjValue(initValues, item.name, emptyValue);
}
}
}
});
};
fn(fields);
return mergeValues ? _objectSpread(_objectSpread({}, defaultValue), initValues) : initValues;
}
function onReset() {
props.onReset && props.onReset();
form.resetFields();
}
function getPopupContainer() {
return props.getPopupContainer ? props.getPopupContainer() : document.getElementById("".concat(containerId, "_ctx"));
}
function getColspan(itemColspan) {
if (itemColspan === undefined || itemColspan === null) {
return dspan;
}
var cs = itemColspan * dspan;
return cs > 24 ? 24 : Math.round(cs);
}
function getFormItem(key, formItems) {
if (cacheItems[key]) return cacheItems[key];
formItems = formItems || fields;
for (var i = 0; i < formItems.length; i++) {
var item = formItems[i];
if (item.name === key) {
cacheItems[key] = item;
return item;
}
var items = item.children || item.items || [];
if (items.length) {
var tmp = getFormItem(key, items);
if (tmp) {
return tmp;
}
}
}
}
function setConfig(config) {
var prevConfig = _toConsumableArray(formConf.children);
if (NG.isFunction(config)) {
var newConfig = config(prevConfig);
newConfig && NG.fastDp.form.setItems({
id: containerId,
items: newConfig
});
} else {
var isUpdated = false;
Object.keys(config).forEach(function (name) {
var item = prevConfig.find(function (item) {
var itemName = NG.isArray(item.name) ? item.name.join('.') : item.name;
return itemName === name;
});
if (item) {
Object.assign(item, config[name]);
isUpdated = true;
}
});
isUpdated && NG.fastDp.form.setItems({
id: containerId,
items: prevConfig
});
}
}
function setConfigByName(name, config) {
var keys = NG.isArray(name) ? name : [name];
setConfig(keys.reduce(function (p, c) {
p[c] = config;
return p;
}, {}));
}
}
var common_props = new Set(['name', 'label',
// 'placeholder',
'defaultValue', 'required', 'disabled', 'colspan', 'langKey']);
function filterProps(item) {
var dp = Object.keys(item).reduce(function (acc, key) {
if (!common_props.has(key)) {
acc[key] = item[key];
}
return acc;
}, {});
delete dp.style;
delete dp.nameField;
delete dp.extra;
delete dp.dependencies;
dp = _objectSpread(_objectSpread({}, dp), dp.antProps);
delete dp['antProps'];
delete dp.customRule;
delete dp.onlyRequiredStyle;
delete dp.rules;
delete dp.defaultValue;
delete dp.valueType;
delete dp.emptyValue;
delete dp.xtype;
delete dp.labelWidth;
return dp;
}
export var FormLayout = compHoc(LayConfWrap(FormLayoutComp), 'NGForm');
registerComponent({
FormLayout: FormLayout
});