@fe6/water-pro/lib/checkbox-cascader/src/Index.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 _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));

var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/CloseOutlined"));

var _CloseCircleFilled = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/CloseCircleFilled"));

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

var _vcTrigger = _interopRequireDefault(require("../../vc-trigger"));

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

var _type = require("../../_util/type");

var _utils = require("./utils");

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

var _Box = _interopRequireDefault(require("./Box"));

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

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 theDefPrefixCls = 'ant-checkbox-cascader';

var _default2 = (0, _vue.defineComponent)({
  name: 'ACheckboxCascader',
  inheritAttrs: false,
  __ANT_CHECKBOX: true,
  props: _extends({
    align: _vueTypes.default.object.def(function () {
      return {};
    }),
    animation: _vueTypes.default.oneOfType([_vueTypes.default.func, _vueTypes.default.string]),
    disabled: _vueTypes.default.looseBool,
    transitionName: _vueTypes.default.string,
    dropdownClassName: _vueTypes.default.string,
    getCalendarContainer: _vueTypes.default.func,
    open: _vueTypes.default.looseBool,
    placement: _vueTypes.default.any.def('bottomLeft'),
    placeholder: _vueTypes.default.string.def('请选择'),
    inputStyle: _vueTypes.default.any.def(''),
    tagTextStyle: _vueTypes.default.any.def('width:80px'),
    separator: _vueTypes.default.string.def('/'),
    allowClear: _vueTypes.default.looseBool.def(true),
    maxTagCount: _vueTypes.default.number.def(1),
    size: _vueTypes.default.oneOf((0, _type.tuple)('small', 'large', 'default')).def('default')
  }, _props.boxProps),
  emits: ['update:value', 'change'],
  setup: function setup(props) {
    var theFields = (0, _vue.computed)(function () {
      return _extends(_extends({}, _utils.defaultFields), props.fieldNames);
    });
    var sValue = (0, _vue.ref)({});
    var viewDatas = (0, _vue.ref)([]);
    var viewAllDatas = (0, _vue.ref)([]);
    var showMore = (0, _vue.ref)(0);

    var getViewDatas = function getViewDatas(newValue) {
      viewDatas.value = [];
      viewAllDatas.value = [];
      var oneKeys = (0, _shared.keys)(newValue);
      oneKeys.forEach(function (oneKey) {
        var theOneItem = props.options.find(function (oneItem) {
          return String(oneItem[theFields.value.value]) === oneKey;
        });

        if (theOneItem && (0, _shared.hasOwn)(theOneItem, theFields.value.children)) {
          var twoKeys = (0, _shared.keys)(newValue[oneKey]);
          twoKeys.forEach(function (twoKey) {
            var theTwoItem = theOneItem[theFields.value.children].find(function (twoItem) {
              return String(twoItem[theFields.value.value]) === twoKey;
            });

            if (theTwoItem && (0, _shared.hasOwn)(theTwoItem, theFields.value.children)) {
              newValue[oneKey][twoKey].forEach(function (threeCode) {
                var theThreeItem = theTwoItem[theFields.value.children].find(function (threeItem) {
                  return String(threeItem[theFields.value.value]) === threeCode;
                });

                if (theThreeItem) {
                  var theView = {
                    label: "".concat(theOneItem[theFields.value.label]).concat(props.separator).concat(theTwoItem[theFields.value.label]).concat(props.separator).concat(theThreeItem[theFields.value.label]),
                    value: [oneKey, twoKey, threeCode]
                  };
                  viewDatas.value.push(theView);
                  viewAllDatas.value.push(theView);
                }
              });
            }
          });
        }
      });

      if (viewDatas.value.length > props.maxTagCount) {
        showMore.value = viewDatas.value.length - props.maxTagCount;
        viewDatas.value.length = props.maxTagCount;
      }
    };

    var getValues = function getValues() {
      // 必须都是字符串格式
      viewDatas.value = [];
      viewAllDatas.value = [];
      sValue.value = {};
      showMore.value = 0;

      if (props.value && !(0, _shared.isEmpty)(props.value)) {
        var oneKeys = (0, _shared.keys)(props.value);
        oneKeys.forEach(function (oneCode) {
          if (!(0, _shared.hasOwn)(sValue.value, String(oneCode))) {
            sValue.value[oneCode] = {};
          }

          var twoKeys = (0, _shared.keys)(props.value[oneCode]);
          twoKeys.forEach(function (twoCode) {
            if (!(0, _shared.hasOwn)(sValue.value[oneCode], String(twoCode))) {
              sValue.value[oneCode][twoCode] = {};
            }

            sValue.value[oneCode][twoCode] = props.value[oneCode][twoCode].map(function (threeCode) {
              return String(threeCode);
            });
          });
        });
        getViewDatas(sValue.value);
      }
    };

    (0, _vue.watch)(function () {
      return props.options;
    }, getValues, {
      deep: true
    });
    (0, _vue.watch)(function () {
      return props.value;
    }, getValues, {
      deep: true
    });
    (0, _vue.onMounted)(getValues);
    return {
      theFields: theFields,
      sValue: sValue,
      viewDatas: viewDatas,
      viewAllDatas: viewAllDatas,
      showMore: showMore,
      getViewDatas: getViewDatas
    };
  },
  data: function data() {
    this.calendarElement = null;
    return {
      sOpen: false
    };
  },
  methods: {
    boxElement: function boxElement() {
      return (0, _vue.createVNode)(_Box.default, {
        "prefixCls": this.prefixCls,
        "options": this.options,
        "preWidth": this.preWidth,
        "preHeight": this.preHeight,
        "fieldNames": this.fieldNames,
        "value": this.sValue,
        "onChange": this.boxChange
      }, null);
    },
    goEmit: function goEmit(newValue) {
      this.$emit('update:value', newValue);
      this.$emit('change', newValue);
    },
    boxChange: function boxChange(newValue) {
      this.getViewDatas(newValue);
      this.goEmit(newValue);
    },
    onVisibleChange: function onVisibleChange(open) {
      this.sOpen = open;
    },
    removeOne: function removeOne(ev, oneValue) {
      ev.stopPropagation();

      if (oneValue.length > 2) {
        var theValues = (0, _cloneDeep.default)(this.sValue);

        if ((0, _shared.hasOwn)(theValues, oneValue[0]) && (0, _shared.hasOwn)(theValues[oneValue[0]], oneValue[1])) {
          var delIdx = theValues[oneValue[0]][oneValue[1]].findIndex(function (threeCode) {
            return threeCode === oneValue[2];
          });

          if (delIdx > -1) {
            theValues[oneValue[0]][oneValue[1]].splice(delIdx, 1);
          }

          if (theValues[oneValue[0]][oneValue[1]].length === 0) {
            delete theValues[oneValue[0]][oneValue[1]];
          }

          if ((0, _shared.isEmpty)(theValues[oneValue[0]])) {
            delete theValues[oneValue[0]];
          }
        }

        this.goEmit(theValues);
      }
    },
    renderTriggerNodes: function renderTriggerNodes() {
      var _this = this;

      var prefixCls = this.prefixCls || theDefPrefixCls;

      if (this.viewDatas.length > 0) {
        var theNodes = this.viewDatas.map(function (vItem) {
          var removeIcon = null;

          if (!_this.disabled) {
            removeIcon = (0, _vue.createVNode)("span", {
              "class": "".concat(prefixCls, "-select-item-remove"),
              "onClick": function onClick(ev) {
                return _this.removeOne(ev, vItem.value);
              }
            }, [(0, _vue.createVNode)(_CloseOutlined.default, {
              "class": "".concat(prefixCls, "-select-item-icon"),
              "key": "remove-icon"
            }, null)]);
          }

          return (0, _vue.createVNode)("span", {
            "class": "".concat(prefixCls, "-select-item")
          }, [(0, _vue.createVNode)("span", {
            "class": "".concat(prefixCls, "-select-item-text"),
            "style": _this.tagTextStyle,
            "title": vItem.label
          }, [vItem.label]), removeIcon]);
        });
        return this.showMore > 0 ? theNodes.concat([(0, _vue.createVNode)("span", {
          "class": "".concat(prefixCls, "-select-item")
        }, [(0, _vue.createVNode)("span", {
          "class": "".concat(prefixCls, "-select-item-text")
        }, [(0, _vue.createTextVNode)("+"), this.showMore, (0, _vue.createTextVNode)("...")])])]) : theNodes;
      } else {
        return (0, _vue.createVNode)("span", {
          "class": "".concat(prefixCls, "-select-placeholder")
        }, [this.placeholder]);
      }
    },
    clearAll: function clearAll(ev) {
      ev.stopPropagation();
      this.sValue = {};
      this.goEmit(this.sValue);
    }
  },
  render: function render() {
    var _ref,
        _this2 = this;

    var props = (0, _propsUtil.getOptionProps)(this);
    var _props$prefixCls = props.prefixCls,
        prefixCls = _props$prefixCls === void 0 ? theDefPrefixCls : _props$prefixCls,
        placement = props.placement,
        getCalendarContainer = props.getCalendarContainer,
        align = props.align,
        animation = props.animation,
        disabled = props.disabled,
        dropdownClassName = props.dropdownClassName,
        transitionName = props.transitionName,
        allowClear = props.allowClear;

    if (this.sOpen || !this.calendarElement) {
      this.calendarElement = this.boxElement();
    }

    var clearNode = null;

    if (!disabled && allowClear && !(0, _shared.isEmpty)(this.sValue)) {
      clearNode = (0, _vue.createVNode)("span", {
        "class": "".concat(prefixCls, "-clear"),
        "onClick": this.clearAll
      }, [(0, _vue.createVNode)(_CloseCircleFilled.default, {
        "class": "".concat(prefixCls, "-clear-icon"),
        "key": "clear-icon"
      }, null)]);
    }

    return (0, _vue.createVNode)(_vcTrigger.default, {
      "popupAlign": align,
      "builtinPlacements": _utils.placements,
      "popupPlacement": placement,
      "action": disabled && !this.sOpen ? [] : ['click'],
      "destroyPopupOnHide": true,
      "getPopupContainer": getCalendarContainer,
      "popupStyle": this.$attrs.style || {},
      "popupAnimation": animation,
      "popupTransitionName": transitionName,
      "popupVisible": this.sOpen,
      "onPopupVisibleChange": this.onVisibleChange,
      "prefixCls": "".concat(prefixCls, "-alert"),
      "popupClassName": dropdownClassName,
      "popup": this.calendarElement
    }, {
      default: function _default() {
        return [(0, _vue.createVNode)("div", {
          "class": ["".concat(prefixCls, "-select"), (_ref = {}, _defineProperty(_ref, "".concat(prefixCls, "-select-disabled"), _this2.disabled), _defineProperty(_ref, "".concat(prefixCls, "-select-").concat(_this2.size), !!_this2.size), _ref)],
          "style": _this2.inputStyle
        }, [(0, _vue.createVNode)("div", {
          "class": "".concat(prefixCls, "-select-inner")
        }, [_this2.renderTriggerNodes(), clearNode])])];
      }
    });
  }
});

exports.default = _default2;