@fe6/water-pro/lib/form-pro/src/components/form-item.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 _shared = require("@fe6/shared");

var _lodashEs = require("lodash");

var _Col = _interopRequireDefault(require("../../../grid/Col"));

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

var _basicHelp = _interopRequireDefault(require("../../../basic-help"));

var _tsx = require("../../../_util/tsx");

var _vueTypes = _interopRequireDefault(require("../../../_util/vue-types"));

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

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

var _componentMap = require("../component-map");

var _useLabelWidth = require("../hooks/use-label-width");

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

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 _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: 'AFormProItem',
  inheritAttrs: false,
  props: {
    schema: {
      type: Object,
      default: function _default() {}
    },
    formProps: {
      type: Object,
      default: {}
    },
    allDefaultValues: {
      type: Object,
      default: function _default() {}
    },
    formModel: {
      type: Object,
      default: function _default() {}
    },
    setFormModel: {
      type: Function,
      default: null
    },
    tableAction: {
      type: Object
    },
    formActionType: {
      type: Object
    },
    prefixCls: _vueTypes.default.string
  },
  setup: function setup(props, _ref) {
    var slots = _ref.slots;

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

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

    var itemLabelWidthProp = (0, _useLabelWidth.useItemLabelWidth)(schema, formProps);
    var getValues = (0, _vue.computed)(function () {
      var allDefaultValues = props.allDefaultValues,
          formModel = props.formModel,
          schema = props.schema;
      var mergeDynamicData = props.formProps.mergeDynamicData;
      return {
        field: schema.field,
        model: formModel,
        values: _extends(_extends(_extends({}, mergeDynamicData), allDefaultValues), formModel),
        schema: schema
      };
    });
    var getComponentsProps = (0, _vue.computed)(function () {
      var _a;

      var schema = props.schema,
          tableAction = props.tableAction,
          formModel = props.formModel,
          formActionType = props.formActionType;
      var _schema$componentProp = schema.componentProps,
          componentProps = _schema$componentProp === void 0 ? {} : _schema$componentProp;

      if (!(0, _shared.isFunction)(componentProps)) {
        return componentProps;
      }

      return (_a = componentProps({
        schema: schema,
        tableAction: tableAction,
        formModel: formModel,
        formActionType: formActionType
      })) !== null && _a !== void 0 ? _a : {};
    });
    var getDisable = (0, _vue.computed)(function () {
      var globDisabled = props.formProps.disabled;
      var dynamicDisabled = props.schema.dynamicDisabled;

      var _unref = (0, _vue.unref)(getComponentsProps),
          _unref$disabled = _unref.disabled,
          itemDisabled = _unref$disabled === void 0 ? false : _unref$disabled;

      var disabled = !!globDisabled || itemDisabled;

      if ((0, _shared.isBoolean)(dynamicDisabled)) {
        disabled = dynamicDisabled;
      }

      if ((0, _shared.isFunction)(dynamicDisabled)) {
        disabled = dynamicDisabled((0, _vue.unref)(getValues));
      }

      return disabled;
    });

    function getShow() {
      var _props$schema = props.schema,
          show = _props$schema.show,
          ifShow = _props$schema.ifShow;
      var showAdvancedButton = props.formProps.showAdvancedButton;
      var itemIsAdvanced = showAdvancedButton ? (0, _shared.isBoolean)(props.schema.isAdvanced) ? props.schema.isAdvanced : true : true;
      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
      };
    }

    function handleRules() {
      var _props$schema2 = props.schema,
          _props$schema2$rules = _props$schema2.rules,
          defRules = _props$schema2$rules === void 0 ? [] : _props$schema2$rules,
          component = _props$schema2.component,
          rulesMessageJoinLabel = _props$schema2.rulesMessageJoinLabel,
          label = _props$schema2.label,
          dynamicRules = _props$schema2.dynamicRules,
          required = _props$schema2.required; // 因为 vite 中始终检测不到 select value 的变化

      if ((0, _shared.isFunction)(dynamicRules)) {
        return dynamicRules(getValues);
      }

      var rules = (0, _lodashEs.cloneDeep)(defRules);

      if ((!rules || rules.length === 0) && required) {
        rules = [{
          required: required,
          type: 'string'
        }];
      }

      var requiredRuleIndex = rules.findIndex(function (rule) {
        return Reflect.has(rule, 'required') && !Reflect.has(rule, 'validator');
      });
      var globalRulesMessageJoinLabel = props.formProps.rulesMessageJoinLabel;

      if (requiredRuleIndex !== -1) {
        var rule = rules[requiredRuleIndex];

        var _getShow = getShow(),
            isShow = _getShow.isShow;

        if (!isShow) {
          rule.required = false;
        }

        if (rule.required && component) {
          if (!Reflect.has(rule, 'type')) {
            rule.type = 'string';
          }

          var joinLabel = Reflect.has(props.schema, 'rulesMessageJoinLabel') ? rulesMessageJoinLabel : globalRulesMessageJoinLabel;
          rule.message = rule.message || "".concat((0, _helper.createPlaceholderMessage)(component)).concat(joinLabel ? label : '');

          if (component.includes('Input') || component.includes('Textarea')) {
            rule.whitespace = true;
          }

          (0, _helper.setComponentRuleType)(rule, component);
        }
      } // Maximum input length rule check


      var characterInx = rules.findIndex(function (val) {
        return val.max;
      });

      if (characterInx !== -1 && !rules[characterInx].validator) {
        rules[characterInx].message = rules[characterInx].message || "\u5B57\u7B26\u6570\u5E94\u5C0F\u4E8E".concat(rules[characterInx].max, "\u4F4D");
      }

      return rules;
    }

    function renderComponent() {
      var _a, _b;

      var _props$schema3 = props.schema,
          renderComponentContent = _props$schema3.renderComponentContent,
          component = _props$schema3.component,
          field = _props$schema3.field,
          _props$schema3$change = _props$schema3.changeEvent,
          changeEvent = _props$schema3$change === void 0 ? 'change' : _props$schema3$change,
          _props$schema3$valueL = _props$schema3.valueLayout,
          valueLayout = _props$schema3$valueL === void 0 ? function (attr) {
        return attr;
      } : _props$schema3$valueL,
          valueField = _props$schema3.valueField,
          componentSlots = _props$schema3.componentSlots;
      var isCheck = component && ['Switch', 'Checkbox'].includes(component);
      var eventKey = "on".concat((0, _lodashEs.upperFirst)(changeEvent));

      var on = _defineProperty({}, eventKey, function (e, params) {
        if (propsData[eventKey]) {
          propsData[eventKey](e);
        }

        var target = e ? e.target : null;
        var value = target ? isCheck ? target.checked : target.value : e;
        props.setFormModel(field, valueLayout(value, field, props, params));
      });

      var Comp = _componentMap.componentMap.get(component);

      var _props$formProps = props.formProps,
          autoSetPlaceHolder = _props$formProps.autoSetPlaceHolder,
          size = _props$formProps.size;

      var propsData = _extends(_extends({
        allowClear: true,
        getPopupContainer: function getPopupContainer(trigger) {
          return trigger.parentNode;
        },
        size: size
      }, (0, _vue.unref)(getComponentsProps)), {
        disabled: (0, _vue.unref)(getDisable)
      });

      var isCreatePlaceholder = !propsData.disabled && autoSetPlaceHolder; // Fixed 修复之前是空，问题是 RangPicker 的时候设置无效

      var placeholder = (_a = (0, _vue.unref)(getComponentsProps)) === null || _a === void 0 ? void 0 : _a.placeholder; // RangePicker place is an array

      if (isCreatePlaceholder && component !== 'RangePicker' && component !== 'RangeGroupPicker' && component !== 'TimeRangePicker' && component) {
        placeholder = ((_b = (0, _vue.unref)(getComponentsProps)) === null || _b === void 0 ? void 0 : _b.placeholder) || (0, _helper.createPlaceholderMessage)(component);
      }

      propsData.placeholder = placeholder;
      propsData.codeField = field;
      propsData.formValues = (0, _vue.unref)(getValues);

      var bindValue = _defineProperty({}, valueField || (isCheck ? 'checked' : 'value'), props.formModel[field]);

      var compAttr = _extends(_extends(_extends({}, propsData), on), bindValue);

      if (!renderComponentContent) {
        return (0, _vue.createVNode)(Comp, compAttr, componentSlots);
      }

      var getCompSlot = function getCompSlot(values) {
        if ((0, _shared.isFunction)(renderComponentContent)) {
          var funSlot = renderComponentContent(values);

          if ((0, _lodashEs.isString)(funSlot)) {
            return {
              default: function _default() {
                return (0, _vue.createVNode)("span", null, [funSlot]);
              }
            };
          } else {
            return {
              default: function _default() {
                return renderComponentContent(values);
              }
            };
          }
        }
      };

      var compSlot = (0, _shared.isFunction)(renderComponentContent) ? _extends({}, getCompSlot(getValues)) : {
        default: function _default() {
          return (0, _vue.createVNode)("span", null, [renderComponentContent]);
        }
      };
      return (0, _vue.createVNode)(Comp, compAttr, compSlot);
    }

    function renderLabelHelpMessage() {
      var _props$schema4 = props.schema,
          label = _props$schema4.label,
          helpMessage = _props$schema4.helpMessage,
          helpComponentProps = _props$schema4.helpComponentProps,
          subLabel = _props$schema4.subLabel;
      var labelInnerTrue = '';

      if ((0, _shared.isFunction)(label)) {
        labelInnerTrue = label(getValues);
      } else {
        labelInnerTrue = label;
      }

      var renderLabel = subLabel ? (0, _vue.createVNode)("span", null, [labelInnerTrue, (0, _vue.createTextVNode)(" "), (0, _vue.createVNode)("span", {
        "style": "color:#00000073"
      }, [subLabel])]) : labelInnerTrue;

      if (!helpMessage || Array.isArray(helpMessage) && helpMessage.length === 0) {
        return renderLabel;
      }

      return (0, _vue.createVNode)("span", null, [renderLabel, (0, _vue.createVNode)(_basicHelp.default, _objectSpread({
        "placement": "right",
        "class": "".concat(prefixClsNew.value, "-help"),
        "text": helpMessage
      }, helpComponentProps), null)]);
    }

    function renderItem() {
      var _ref2;

      var _props$schema5 = props.schema,
          label = _props$schema5.label,
          itemProps = _props$schema5.itemProps,
          slot = _props$schema5.slot,
          render = _props$schema5.render,
          field = _props$schema5.field,
          suffix = _props$schema5.suffix,
          component = _props$schema5.component,
          end = _props$schema5.end,
          wrapperWidth = _props$schema5.wrapperWidth;

      var _unref2 = (0, _vue.unref)(itemLabelWidthProp),
          labelCol = _unref2.labelCol,
          wrapperCol = _unref2.wrapperCol;

      var colon = props.formProps.colon;

      var getContent = function getContent() {
        return slot ? (0, _tsx.getSlot)(slots, slot, (0, _vue.unref)(getValues)) : render ? render(getValues) : renderComponent();
      };

      var showSuffix = !!suffix;
      var getSuffix = (0, _shared.isFunction)(suffix) ? suffix((0, _vue.unref)(getValues)) : suffix;
      var showEnd = !!end;
      var getEnd = (0, _shared.isFunction)(end) ? end((0, _vue.unref)(getValues)) : end;

      var isAddDiyClassName = function isAddDiyClassName() {
        var whiteListOfAddName = ['InputSmsCode', 'ColorPicker', 'TagGroup'];
        return whiteListOfAddName.includes(component);
      };

      var isInlineCpt = function isInlineCpt() {
        var inlineCpt = ['InputSmsCode', 'InputNumber'];
        return inlineCpt.includes(component);
      };

      var isTagModalListClassName = function isTagModalListClassName() {
        var whiteListOfTagModalListName = [];
        return whiteListOfTagModalListName.includes(component);
      };

      var realWrapperCol = wrapperCol; // 如果没有 label

      if (!renderLabelHelpMessage()) {
        realWrapperCol = {
          span: 24
        };
      }

      var contentNode = null;
      var contentInnerNode = wrapperWidth ? (0, _vue.createVNode)("div", {
        "style": {
          width: wrapperWidth,
          display: 'inline-block'
        }
      }, [getContent()]) : getContent();

      if (showEnd) {
        contentNode = (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)("div", null, [contentInnerNode, showSuffix && (0, _vue.createVNode)("span", {
          "class": "".concat(prefixClsNew.value, "-suffix")
        }, [getSuffix])]), showEnd && (0, _vue.createVNode)("div", {
          "class": "".concat(prefixClsNew.value, "-end")
        }, [getEnd])]);
      } else {
        contentNode = (0, _vue.createVNode)(_vue.Fragment, null, [contentInnerNode, showSuffix && (0, _vue.createVNode)("span", {
          "class": "".concat(prefixClsNew.value, "-suffix")
        }, [getSuffix])]);
      }

      var labelTrue = '';

      if ((0, _shared.isFunction)(label)) {
        labelTrue = label(getValues);
      } else {
        labelTrue = label;
      }

      return (0, _vue.createVNode)(_Form.default.Item, _objectSpread(_objectSpread({
        "name": field,
        "colon": labelTrue && labelTrue.trim() === '' ? false : colon,
        "class": (_ref2 = {}, _defineProperty(_ref2, "".concat(prefixClsNew.value, "-item-suffix"), showSuffix), _defineProperty(_ref2, "".concat(prefixClsNew.value, "-item-diy"), isAddDiyClassName()), _defineProperty(_ref2, "".concat(prefixClsNew.value, "-item-special"), isTagModalListClassName()), _defineProperty(_ref2, "".concat(prefixClsNew.value, "-item-smscode"), isInlineCpt), _ref2)
      }, itemProps), {}, {
        "label": renderLabelHelpMessage(),
        "rules": handleRules(),
        "labelCol": labelCol,
        "wrapperCol": realWrapperCol
      }), {
        default: function _default() {
          return [contentNode];
        }
      });
    }

    return function () {
      var _props$schema6 = props.schema,
          _props$schema6$colPro = _props$schema6.colProps,
          colProps = _props$schema6$colPro === void 0 ? {
        span: 24
      } : _props$schema6$colPro,
          colSlot = _props$schema6.colSlot,
          renderColContent = _props$schema6.renderColContent,
          component = _props$schema6.component;

      if (!_componentMap.componentMap.has(component)) {
        return null;
      }

      var _props$formProps$base = props.formProps.baseColProps,
          baseColProps = _props$formProps$base === void 0 ? {} : _props$formProps$base;

      var realColProps = _extends(_extends({}, baseColProps), colProps);

      var _getShow2 = getShow(),
          isIfShow = _getShow2.isIfShow,
          isShow = _getShow2.isShow;

      var values = (0, _vue.unref)(getValues);

      var getContent = function getContent() {
        return colSlot ? (0, _tsx.getSlot)(slots, colSlot, values) : renderColContent ? renderColContent(getValues) : renderItem();
      };

      return isIfShow && (0, _vue.withDirectives)((0, _vue.createVNode)(_Col.default, realColProps, {
        default: function _default() {
          return [getContent()];
        }
      }), [[_vue.vShow, isShow]]);
    };
  }
});

exports.default = _default2;