@fe6/water-pro/lib/form-pro/src/form-pro.js

An enterprise-class UI design language and Vue-based implementation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _vue = require("vue");

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _tslib = require("tslib");

var _shared = require("@fe6/shared");

var _Row = _interopRequireDefault(require("../../grid/Row"));

var _card = _interopRequireDefault(require("../../card"));

var _affix = _interopRequireDefault(require("../../affix"));

var _Form = _interopRequireDefault(require("../../form/Form"));

var _modalPro = require("../../modal-pro");

var _useConfigInject2 = _interopRequireDefault(require("../../_util/hooks/useConfigInject"));

var _propsUtil = require("../../_util/props-util");

var _formItem = _interopRequireDefault(require("./components/form-item"));

var _formAction = _interopRequireDefault(require("./components/form-action"));

var _useFormValues2 = require("./hooks/use-form-values");

var _useAdvanced2 = _interopRequireDefault(require("./hooks/use-advanced"));

var _useFormEvents2 = require("./hooks/use-form-events");

var _useFormContext = require("./hooks/use-form-context");

var _useAutoFocus = require("./hooks/use-auto-focus");

var _props = require("./props");

var _date = require("./date");

var _helper = require("./helper");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }

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; }

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 _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); }

var _default2 = (0, _vue.defineComponent)({
  name: 'AFormPro',
  components: {
    FormItem: _formItem.default,
    Form: _Form.default,
    Row: _Row.default,
    FormAction: _formAction.default,
    ACard: _card.default,
    AAffix: _affix.default
  },
  props: _props.basicProps,
  emits: ['advanced-change', 'reset', 'submit', 'submit-error', 'register'],
  setup: function setup(props, _ref) {
    var _this = this;

    var emit = _ref.emit;

    var _useConfigInject = (0, _useConfigInject2.default)('form-pro', props),
        prefixClsNew = _useConfigInject.prefixCls;

    var formModel = (0, _vue.reactive)({});
    var modalFn = (0, _modalPro.useModalContext)();
    var advanceState = (0, _vue.reactive)({
      isAdvanced: true,
      hideAdvanceBtn: false,
      isLoad: false,
      actionSpan: 6
    });
    var defaultValueRef = (0, _vue.ref)({});
    var isInitedDefaultRef = (0, _vue.ref)(false);
    var propsRef = (0, _vue.ref)({});
    var schemaRef = (0, _vue.ref)(null);
    var formElRef = (0, _vue.ref)(null); // const { prefixCls } = useDesign('basic-form');
    // Get the basic configuration of the form

    var getProps = (0, _vue.computed)(function () {
      return _extends(_extends({}, props), (0, _vue.unref)(propsRef));
    });
    var getFormClass = (0, _vue.computed)(function () {
      return [prefixClsNew.value, _defineProperty({}, "".concat(prefixClsNew.value, "--compact"), (0, _vue.unref)(getProps).compact)];
    }); // Get uniform row style

    var getRowWrapStyle = (0, _vue.computed)(function () {
      var _unref = (0, _vue.unref)(getProps),
          _unref$baseRowStyle = _unref.baseRowStyle,
          baseRowStyle = _unref$baseRowStyle === void 0 ? {} : _unref$baseRowStyle;

      return baseRowStyle;
    }); // 由于有 children ，所以统一处理一下

    var getTrueSchema = function getTrueSchema(schemas) {
      var newSchema = [];
      schemas.forEach(function (sItem) {
        if ((0, _shared.hasOwn)(sItem, 'children') && sItem.children.length > 0) {
          sItem.children.forEach(function (cItem) {
            newSchema.push(cItem);
          });
        } else {
          newSchema.push(sItem);
        }
      });
      return newSchema;
    };

    var getOriginSchema = (0, _vue.computed)(function () {
      var schemas = (0, _vue.unref)(schemaRef) || (0, _vue.unref)(getProps).schemas;

      var _iterator = _createForOfIteratorHelper(schemas),
          _step;

      try {
        for (_iterator.s(); !(_step = _iterator.n()).done;) {
          var schema = _step.value;
          var defaultValue = schema.defaultValue,
              component = schema.component; // handle date type

          if (defaultValue && _helper.dateItemType.includes(component)) {
            if (!Array.isArray(defaultValue)) {
              schema.defaultValue = (0, _date.dateUtil)(defaultValue);
            } else {
              (function () {
                var def = [];
                defaultValue.forEach(function (item) {
                  def.push((0, _date.dateUtil)(item));
                });
                schema.defaultValue = def;
              })();
            }
          }
        }
      } catch (err) {
        _iterator.e(err);
      } finally {
        _iterator.f();
      }

      return schemas;
    });
    var getSchema = (0, _vue.computed)(function () {
      var schemas = (0, _vue.unref)(schemaRef) || (0, _vue.unref)(getProps).schemas;
      var trueSchemas = getTrueSchema(schemas);

      var _iterator2 = _createForOfIteratorHelper(trueSchemas),
          _step2;

      try {
        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
          var schema = _step2.value;
          var defaultValue = schema.defaultValue,
              component = schema.component; // handle date type

          if (defaultValue && _helper.dateItemType.includes(component)) {
            if (!Array.isArray(defaultValue)) {
              schema.defaultValue = (0, _date.dateUtil)(defaultValue);
            } else {
              (function () {
                var def = [];
                defaultValue.forEach(function (item) {
                  def.push((0, _date.dateUtil)(item));
                });
                schema.defaultValue = def;
              })();
            }
          }
        }
      } catch (err) {
        _iterator2.e(err);
      } finally {
        _iterator2.f();
      }

      return trueSchemas;
    });

    var _useAdvanced = (0, _useAdvanced2.default)({
      advanceState: advanceState,
      emit: emit,
      getProps: getProps,
      getSchema: getSchema,
      formModel: formModel,
      defaultValueRef: defaultValueRef
    }),
        handleToggleAdvanced = _useAdvanced.handleToggleAdvanced;

    var _toRefs = (0, _vue.toRefs)(props),
        autoFocusFirstItem = _toRefs.autoFocusFirstItem;

    var _useFormValues = (0, _useFormValues2.useFormValues)({
      defaultValueRef: defaultValueRef,
      getSchema: getSchema,
      formModel: formModel,
      getProps: getProps
    }),
        handleFormValues = _useFormValues.handleFormValues,
        initDefault = _useFormValues.initDefault;

    (0, _useAutoFocus.useAutoFocus)({
      getSchema: getSchema,
      autoFocusFirstItem: autoFocusFirstItem,
      isInitedDefault: isInitedDefaultRef,
      formElRef: formElRef
    });

    var _useFormEvents = (0, _useFormEvents2.useFormEvents)({
      emit: emit,
      getProps: getProps,
      formModel: formModel,
      getSchema: getSchema,
      defaultValueRef: defaultValueRef,
      formElRef: formElRef,
      schemaRef: schemaRef,
      getOriginSchema: getOriginSchema,
      handleFormValues: handleFormValues
    }),
        handleSubmit = _useFormEvents.handleSubmit,
        setFieldsValue = _useFormEvents.setFieldsValue,
        clearValidate = _useFormEvents.clearValidate,
        validate = _useFormEvents.validate,
        validateFields = _useFormEvents.validateFields,
        getFieldsValue = _useFormEvents.getFieldsValue,
        getChildrenFieldsValue = _useFormEvents.getChildrenFieldsValue,
        updateSchema = _useFormEvents.updateSchema,
        appendSchemaByField = _useFormEvents.appendSchemaByField,
        removeSchemaByFiled = _useFormEvents.removeSchemaByFiled,
        resetFields = _useFormEvents.resetFields,
        scrollToField = _useFormEvents.scrollToField;

    (0, _useFormContext.createFormContext)({
      resetAction: resetFields,
      submitAction: handleSubmit
    });
    (0, _vue.watch)(function () {
      return (0, _vue.unref)(getProps).model;
    }, function () {
      var _unref2 = (0, _vue.unref)(getProps),
          model = _unref2.model;

      if (!model) {
        return;
      }

      setFieldsValue(model);
    }, {
      immediate: true
    });
    (0, _vue.watch)(function () {
      return getSchema.value;
    }, function (schema) {
      (0, _vue.nextTick)(function () {
        var _a; //  Solve the problem of modal adaptive height calculation when the form is placed in the modal


        (_a = modalFn === null || modalFn === void 0 ? void 0 : modalFn.redoModalHeight) === null || _a === void 0 ? void 0 : _a.call(modalFn);
      });

      if ((0, _vue.unref)(isInitedDefaultRef)) {
        return;
      }

      if (schema === null || schema === void 0 ? void 0 : schema.length) {
        initDefault();
        isInitedDefaultRef.value = true;
      }
    });
    (0, _vue.watch)(function () {
      return getProps.value;
    }, function () {
      return (0, _tslib.__awaiter)(_this, void 0, void 0, /*#__PURE__*/_regenerator.default.mark(function _callee() {
        return _regenerator.default.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                _context.next = 2;
                return (0, _vue.nextTick)();

              case 2:
                if ((0, _vue.unref)(getProps.value)) {
                  _context.next = 4;
                  break;
                }

                return _context.abrupt("return");

              case 4:
                initDefault();

              case 5:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }));
    });

    function setProps(formProps) {
      return (0, _tslib.__awaiter)(this, void 0, void 0, /*#__PURE__*/_regenerator.default.mark(function _callee2() {
        return _regenerator.default.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                propsRef.value = (0, _shared.deepMerge)((0, _vue.unref)(propsRef) || {}, formProps);

              case 1:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2);
      }));
    }

    function setFormModel(key, value) {
      formModel[key] = value;
    } // 因为同一个表单 调用 updateSchema 的时候提交的数据还是之前的数据格式


    var resetAllModel = function resetAllModel() {
      return (0, _tslib.__awaiter)(_this, void 0, void 0, /*#__PURE__*/_regenerator.default.mark(function _callee3() {
        var resetSchemas;
        return _regenerator.default.wrap(function _callee3$(_context3) {
          while (1) {
            switch (_context3.prev = _context3.next) {
              case 0:
                resetSchemas = (0, _vue.unref)(getSchema);
                resetSchemas.forEach(function (sItem) {
                  if (sItem.defaultValue) {
                    formModel[sItem.field] = sItem.defaultValue;
                  }
                });

              case 2:
              case "end":
                return _context3.stop();
            }
          }
        }, _callee3);
      }));
    };

    var formActionType = {
      getFieldsValue: getFieldsValue,
      setFieldsValue: setFieldsValue,
      getChildrenFieldsValue: getChildrenFieldsValue,
      resetFields: resetFields,
      resetAllModel: resetAllModel,
      updateSchema: updateSchema,
      setProps: setProps,
      removeSchemaByFiled: removeSchemaByFiled,
      appendSchemaByField: appendSchemaByField,
      clearValidate: clearValidate,
      validateFields: validateFields,
      validate: validate,
      submit: handleSubmit,
      scrollToField: scrollToField
    };
    (0, _vue.onMounted)(function () {
      initDefault();
      emit('register', formActionType);
    });
    return _extends({
      handleToggleAdvanced: handleToggleAdvanced,
      formModel: formModel,
      defaultValueRef: defaultValueRef,
      advanceState: advanceState,
      getRowWrapStyle: getRowWrapStyle,
      getProps: getProps,
      formElRef: formElRef,
      getSchema: getSchema,
      getOriginSchema: getOriginSchema,
      formActionType: formActionType,
      setFormModel: setFormModel,
      prefixClsNew: prefixClsNew,
      getFormClass: getFormClass,
      navActiveKey: (0, _vue.ref)(-1)
    }, formActionType);
  },
  methods: {
    getShow: function getShow(schema) {
      var show = schema.show,
          ifShow = schema.ifShow;
      var _this$getProps = this.getProps,
          showAdvancedButton = _this$getProps.showAdvancedButton,
          mergeDynamicData = _this$getProps.mergeDynamicData;
      var itemIsAdvanced = showAdvancedButton ? (0, _shared.isBoolean)(schema.isAdvanced) ? schema.isAdvanced : true : true;
      var getValues = (0, _vue.ref)({
        field: schema.field,
        model: this.formModel,
        values: _extends(_extends(_extends({}, mergeDynamicData), this.defaultValueRef), this.formModel),
        schema: schema
      });
      var isShow = true;
      var isIfShow = true;

      if ((0, _shared.isBoolean)(show)) {
        isShow = show;
      }

      if ((0, _shared.isBoolean)(ifShow)) {
        isIfShow = ifShow;
      }

      if ((0, _shared.isFunction)(show)) {
        isShow = show(getValues);
      }

      if ((0, _shared.isFunction)(ifShow)) {
        isIfShow = ifShow(getValues);
      }

      isShow = isShow && itemIsAdvanced;
      return {
        isShow: isShow,
        isIfShow: isIfShow
      };
    },
    renderItems: function renderItems() {
      var _this2 = this;

      var $slots = this.$slots;
      var schemaItems = [];
      this.getOriginSchema.forEach(function (schema, sIdx) {
        if (schema.children && schema.children.length > 0) {
          var _this2$getShow = _this2.getShow(schema),
              isIfShow = _this2$getShow.isIfShow,
              isShow = _this2$getShow.isShow;

          var childNodes = [];

          if (isIfShow) {
            schema.children.forEach(function (schemaChildItem) {
              childNodes.push((0, _vue.createVNode)(_formItem.default, {
                "table-action": _this2.tableAction,
                "form-action-type": _this2.formActionType,
                "schema": schemaChildItem,
                "form-props": _this2.getProps,
                "all-default-values": _this2.defaultValueRef,
                "form-model": _this2.formModel,
                "set-form-model": _this2.setFormModel
              }, $slots));
            });
            schemaItems.push((0, _vue.withDirectives)((0, _vue.createVNode)((0, _vue.resolveComponent)("a-card"), {
              "title": schema.label,
              "class": "".concat(_this2.prefixClsNew, "-card ").concat(_this2.prefixClsNew, "-card-").concat(schema.field).concat(_this2.getProps.navAffix && sIdx === 0 ? " ".concat(_this2.prefixClsNew, "-card-first") : ''),
              "style": "width: 100%"
            }, {
              default: function _default() {
                return [childNodes];
              }
            }), [[_vue.vShow, isShow]]));
          }
        } else {
          schemaItems.push((0, _vue.createVNode)(_formItem.default, {
            "table-action": _this2.tableAction,
            "form-action-type": _this2.formActionType,
            "schema": schema,
            "form-props": _this2.getProps,
            "all-default-values": _this2.defaultValueRef,
            "form-model": _this2.formModel,
            "set-form-model": _this2.setFormModel
          }, $slots));
        }
      });
      return schemaItems;
    },
    navClick: function navClick(field, navScrollIdx) {
      return (0, _tslib.__awaiter)(this, void 0, void 0, /*#__PURE__*/_regenerator.default.mark(function _callee4() {
        var scrollNode;
        return _regenerator.default.wrap(function _callee4$(_context4) {
          while (1) {
            switch (_context4.prev = _context4.next) {
              case 0:
                _context4.next = 2;
                return (0, _vue.nextTick)();

              case 2:
                scrollNode = document.getElementsByClassName("".concat(this.prefixClsNew, "-card-").concat(field));

                if (scrollNode.length) {
                  this.navActiveKey = navScrollIdx;
                  scrollNode[0].scrollIntoView({
                    // 滚动到指定节点
                    // 值有start,center,end，nearest，当前显示在视图区域中间
                    block: 'center',
                    // 值有auto、instant,smooth，缓动动画（当前是慢速的）
                    behavior: 'smooth'
                  });
                }

              case 4:
              case "end":
                return _context4.stop();
            }
          }
        }, _callee4, this);
      }));
    }
  },
  render: function render() {
    var _this3 = this;

    var formProps = _extends(_extends(_extends({}, this.$attrs), this.$props), {
      ref: 'formElRef',
      class: this.getFormClass,
      model: this.formModel
    });

    var formHeaderNode = (0, _propsUtil.getSlot)(this, 'formHeader');
    var formFooterNode = (0, _propsUtil.getSlot)(this, 'formFooter');
    var slots = {
      resetBefore: function resetBefore() {
        return (0, _propsUtil.getSlot)(_this3, 'resetBefore');
      },
      submitBefore: function submitBefore() {
        return (0, _propsUtil.getSlot)(_this3, 'submitBefore');
      },
      advanceBefore: function advanceBefore() {
        return (0, _propsUtil.getSlot)(_this3, 'advanceBefore');
      },
      advanceAfter: function advanceAfter() {
        return (0, _propsUtil.getSlot)(_this3, 'advanceAfter');
      }
    };

    var actionsProps = _extends(_extends(_extends({}, this.getProps), this.advanceState), {
      schemas: this.getSchema,
      onToggleAdvanced: this.handleToggleAdvanced
    });

    var actionInnerNode = (0, _vue.createVNode)(_formAction.default, actionsProps, slots);
    var actionNode = null;

    if (this.getProps.actionAffix) {
      actionNode = (0, _vue.createVNode)((0, _vue.resolveComponent)("a-affix"), {
        "offset-bottom": this.getProps.actionOffsetBottom,
        "target": this.getProps.actionTarget,
        "style": "width: 100%;",
        "class": "".concat(this.prefixClsNew, "-footer-affix")
      }, {
        default: function _default() {
          return [actionInnerNode];
        }
      });
    } else {
      actionNode = actionInnerNode;
    }

    var navNode = null;
    var hasChilds = this.getOriginSchema.filter(function (schema) {
      return schema.children && schema.children.length > 0;
    }).length === this.getOriginSchema.length;

    if (this.getProps.navAffix && hasChilds) {
      var tabChild = [];
      this.getOriginSchema.forEach(function (schema, sIdx) {
        var _this3$getShow = _this3.getShow(schema),
            isIfShow = _this3$getShow.isIfShow;

        if (isIfShow) {
          tabChild.push((0, _vue.createVNode)("span", {
            "key": sIdx,
            "class": "".concat(_this3.prefixClsNew, "-nav-item").concat(_this3.navActiveKey === sIdx ? " ".concat(_this3.prefixClsNew, "-nav-item-active") : ''),
            "onClick": function onClick() {
              return _this3.navClick(schema.field, sIdx);
            }
          }, [schema.label]));
        }
      });
      navNode = (0, _vue.createVNode)((0, _vue.resolveComponent)("a-affix"), {
        "offset-top": this.getProps.navOffsetTop,
        "target": this.getProps.navTarget,
        "style": "width: 100%;",
        "class": "".concat(this.prefixClsNew, "-nav-affix")
      }, {
        default: function _default() {
          return [(0, _vue.createVNode)("div", {
            "class": "".concat(_this3.prefixClsNew, "-nav")
          }, [tabChild])];
        }
      });
    }

    return (0, _vue.createVNode)(_Form.default, formProps, {
      default: function _default() {
        return [(0, _vue.createVNode)(_Row.default, {
          "style": _this3.getRowWrapStyle,
          "gutter": _this3.getProps.baseGutter
        }, {
          default: function _default() {
            return [navNode, formHeaderNode, _this3.renderItems(), actionNode, formFooterNode];
          }
        })];
      }
    });
  }
});

exports.default = _default2;