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

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

import { withDirectives as _withDirectives, vShow as _vShow, resolveComponent as _resolveComponent, createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
import _regeneratorRuntime from "@babel/runtime/regenerator";

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

import { __awaiter } from "tslib";
import { defineComponent, reactive, ref, computed, unref, onMounted, watch, toRefs, nextTick } from 'vue';
import { deepMerge, hasOwn, isBoolean, isFunction } from '@fe6/shared';
import Row from '../../grid/Row';
import ACard from '../../card';
import AAffix from '../../affix';
import Form from '../../form/Form';
import { useModalContext } from '../../modal-pro';
import useConfigInject from '../../_util/hooks/useConfigInject';
import { getSlot } from '../../_util/props-util';
import FormItem from './components/form-item';
import FormAction from './components/form-action';
import { useFormValues } from './hooks/use-form-values';
import useAdvanced from './hooks/use-advanced';
import { useFormEvents } from './hooks/use-form-events';
import { createFormContext } from './hooks/use-form-context';
import { useAutoFocus } from './hooks/use-auto-focus';
import { basicProps } from './props';
import { dateUtil } from './date';
import { dateItemType } from './helper';
export default defineComponent({
  name: 'AFormPro',
  components: {
    FormItem: FormItem,
    Form: Form,
    Row: Row,
    FormAction: FormAction,
    ACard: ACard,
    AAffix: AAffix
  },
  props: basicProps,
  emits: ['advanced-change', 'reset', 'submit', 'submit-error', 'register'],
  setup: function setup(props, _ref) {
    var _this = this;

    var emit = _ref.emit;

    var _useConfigInject = useConfigInject('form-pro', props),
        prefixClsNew = _useConfigInject.prefixCls;

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

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

    var getRowWrapStyle = computed(function () {
      var _unref = 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 (hasOwn(sItem, 'children') && sItem.children.length > 0) {
          sItem.children.forEach(function (cItem) {
            newSchema.push(cItem);
          });
        } else {
          newSchema.push(sItem);
        }
      });
      return newSchema;
    };

    var getOriginSchema = computed(function () {
      var schemas = unref(schemaRef) || 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 && dateItemType.includes(component)) {
            if (!Array.isArray(defaultValue)) {
              schema.defaultValue = dateUtil(defaultValue);
            } else {
              (function () {
                var def = [];
                defaultValue.forEach(function (item) {
                  def.push(dateUtil(item));
                });
                schema.defaultValue = def;
              })();
            }
          }
        }
      } catch (err) {
        _iterator.e(err);
      } finally {
        _iterator.f();
      }

      return schemas;
    });
    var getSchema = computed(function () {
      var schemas = unref(schemaRef) || 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 && dateItemType.includes(component)) {
            if (!Array.isArray(defaultValue)) {
              schema.defaultValue = dateUtil(defaultValue);
            } else {
              (function () {
                var def = [];
                defaultValue.forEach(function (item) {
                  def.push(dateUtil(item));
                });
                schema.defaultValue = def;
              })();
            }
          }
        }
      } catch (err) {
        _iterator2.e(err);
      } finally {
        _iterator2.f();
      }

      return trueSchemas;
    });

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

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

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

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

    var _useFormEvents = 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;

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

      if (!model) {
        return;
      }

      setFieldsValue(model);
    }, {
      immediate: true
    });
    watch(function () {
      return getSchema.value;
    }, function (schema) {
      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 (unref(isInitedDefaultRef)) {
        return;
      }

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

              case 2:
                if (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 __awaiter(this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                propsRef.value = deepMerge(unref(propsRef) || {}, formProps);

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

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


    var resetAllModel = function resetAllModel() {
      return __awaiter(_this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
        var resetSchemas;
        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
          while (1) {
            switch (_context3.prev = _context3.next) {
              case 0:
                resetSchemas = 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
    };
    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: 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 ? isBoolean(schema.isAdvanced) ? schema.isAdvanced : true : true;
      var getValues = 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 (isBoolean(show)) {
        isShow = show;
      }

      if (isBoolean(ifShow)) {
        isIfShow = ifShow;
      }

      if (isFunction(show)) {
        isShow = show(getValues);
      }

      if (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(_createVNode(FormItem, {
                "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(_withDirectives(_createVNode(_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];
              }
            }), [[_vShow, isShow]]));
          }
        } else {
          schemaItems.push(_createVNode(FormItem, {
            "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 __awaiter(this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
        var scrollNode;
        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
          while (1) {
            switch (_context4.prev = _context4.next) {
              case 0:
                _context4.next = 2;
                return 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 = getSlot(this, 'formHeader');
    var formFooterNode = getSlot(this, 'formFooter');
    var slots = {
      resetBefore: function resetBefore() {
        return getSlot(_this3, 'resetBefore');
      },
      submitBefore: function submitBefore() {
        return getSlot(_this3, 'submitBefore');
      },
      advanceBefore: function advanceBefore() {
        return getSlot(_this3, 'advanceBefore');
      },
      advanceAfter: function advanceAfter() {
        return getSlot(_this3, 'advanceAfter');
      }
    };

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

    var actionInnerNode = _createVNode(FormAction, actionsProps, slots);

    var actionNode = null;

    if (this.getProps.actionAffix) {
      actionNode = _createVNode(_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(_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 = _createVNode(_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 [_createVNode("div", {
            "class": "".concat(_this3.prefixClsNew, "-nav")
          }, [tabChild])];
        }
      });
    }

    return _createVNode(Form, formProps, {
      default: function _default() {
        return [_createVNode(Row, {
          "style": _this3.getRowWrapStyle,
          "gutter": _this3.getProps.baseGutter
        }, {
          default: function _default() {
            return [navNode, formHeaderNode, _this3.renderItems(), actionNode, formFooterNode];
          }
        })];
      }
    });
  }
});