@fe6/water-pro/lib/checkbox-cascader/src/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 _useConfigInject2 = _interopRequireDefault(require("../../_util/hooks/useConfigInject"));

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

var _containerScroll = _interopRequireDefault(require("../../container-scroll"));

var _checkbox = _interopRequireDefault(require("../../checkbox"));

var _OneCheckbox = _interopRequireDefault(require("./OneCheckbox"));

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

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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)({
  inheritAttrs: false,
  props: {
    prefixCls: _vueTypes.default.string,
    preWidth: _vueTypes.default.number.def(160),
    preHeight: _vueTypes.default.number.def(270),
    showArrow: _vueTypes.default.bool,
    options: _vueTypes.default.array,
    fieldNames: _vueTypes.default.object.def((0, _shared.clone)(_utils.defaultFields)),
    // value: PropTypes.array,
    value: _vueTypes.default.object,
    level: _vueTypes.default.number,
    oneCode: _vueTypes.default.number,
    twoCode: _vueTypes.default.number // 用于二级匹配 半选 和 选中

  },
  emits: ['change', 'click', 'all-change'],
  setup: function setup(props, _ref) {
    var emit = _ref.emit;

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

    var theFields = (0, _vue.computed)(function () {
      return _extends(_extends({}, _utils.defaultFields), props.fieldNames);
    });

    var oneChange = function oneChange(status, item) {
      emit('change', status, item);
    };

    var oneClick = function oneClick(itemIdx) {
      emit('click', itemIdx);
    };

    var selectValue = (0, _vue.ref)([]); // value 全选中集合

    var halfValue = (0, _vue.ref)([]); // value 半选集合
    // 检查一级

    var checkOne = function checkOne() {
      selectValue.value = [];
      halfValue.value = []; // 选中 | 半选

      if (!!props.value && !(0, _shared.isEmpty)(props.value)) {
        props.options.forEach(function (oneItem) {
          var isHalf = 1; // 一级存在已选值当中，不是半选就是选中

          if ((0, _shared.hasOwn)(props.value, String(oneItem[theFields.value.value]))) {
            if ((0, _shared.hasOwn)(oneItem, theFields.value.children)) {
              oneItem[theFields.value.children].forEach(function (twoItem) {
                // 二级存在已选值当中，不是半选就是选中
                if ((0, _shared.hasOwn)(props.value[oneItem[theFields.value.value]], String(twoItem[theFields.value.value]))) {
                  if (isHalf !== 2) {
                    isHalf = twoItem[theFields.value.children].length > props.value[oneItem[theFields.value.value]][twoItem[theFields.value.value]].length ? 2 : 3;
                  }
                } else {
                  isHalf = 2;
                }
              });

              if (isHalf === 2) {
                halfValue.value.push(String(oneItem[theFields.value.value]));
              } else {
                selectValue.value.push(String(oneItem[theFields.value.value]));
              }
            }
          }
        });
      }
    }; // 检查二级


    var checkTwo = function checkTwo() {
      selectValue.value = [];
      halfValue.value = []; // 选中

      if (!!props.value && !(0, _shared.isEmpty)(props.value)) {
        // 点击展开二级的时候
        if (props.oneCode > -1) {
          props.options.forEach(function (twoItem) {
            var _a, _b, _c, _d;

            if ((0, _shared.hasOwn)((_a = props.value) === null || _a === void 0 ? void 0 : _a[props.oneCode], twoItem[theFields.value.value])) {
              if (twoItem[theFields.value.children].length > ((_d = (_c = (_b = props.value) === null || _b === void 0 ? void 0 : _b[props.oneCode]) === null || _c === void 0 ? void 0 : _c[twoItem[theFields.value.value]]) === null || _d === void 0 ? void 0 : _d.length)) {
                halfValue.value.push(String(twoItem[theFields.value.value]));
              } else {
                selectValue.value.push(String(twoItem[theFields.value.value]));
              }
            }
          });
        }
      }
    };

    var checkThree = function checkThree() {
      if ((0, _shared.isEmpty)(props.value) || !props.value) {
        selectValue.value = [];
        halfValue.value = [];
      } else {
        halfValue.value = [];

        if (props.oneCode > -1 && props.twoCode > -1 && (0, _shared.hasOwn)(props.value, String(props.oneCode)) && (0, _shared.hasOwn)(props.value[props.oneCode], String(props.twoCode))) {
          selectValue.value = props.value[props.oneCode][props.twoCode].slice();
        } else {
          selectValue.value = [];
        }
      }
    }; // 全选按钮是否选中或半选


    var isAllChecked = (0, _vue.ref)(false);
    var isAllHalf = (0, _vue.ref)(false);
    var allOneDatas = (0, _vue.ref)([]);
    var allTwoDatas = (0, _vue.ref)([]);
    var allThreeDatas = (0, _vue.ref)([]);

    var checkAll = function checkAll() {
      isAllChecked.value = false;
      isAllHalf.value = false;

      if (!!props.value && !(0, _shared.isEmpty)(props.value)) {
        var oneKeys = (0, _shared.keys)(props.value);
        var twoKeyLength = 0;
        var threeKeyLength = 0;
        oneKeys.forEach(function (oneItem) {
          var twoKeys = (0, _shared.keys)(props.value[oneItem]);
          twoKeyLength += twoKeys.length;
          twoKeys.forEach(function (twoItem) {
            threeKeyLength += props.value[oneItem][twoItem].length;
          });
        });
        isAllChecked.value = oneKeys.length === allOneDatas.value.length && twoKeyLength === allTwoDatas.value.length && threeKeyLength === allThreeDatas.value.length;
        isAllHalf.value = !isAllChecked.value;
      }
    };

    var getLevel1Datas = function getLevel1Datas() {
      allOneDatas.value = [];
      allTwoDatas.value = [];
      allThreeDatas.value = [];

      if (props.level === 1 && props.options.length > 0) {
        props.options.forEach(function (oneItem) {
          allOneDatas.value.push(oneItem[theFields.value.value]);

          if ((0, _shared.hasOwn)(oneItem, theFields.value.children) && oneItem[theFields.value.children].length > 0) {
            oneItem[theFields.value.children].forEach(function (twoItem) {
              allTwoDatas.value.push(twoItem[theFields.value.value]);

              if ((0, _shared.hasOwn)(twoItem, theFields.value.children) && twoItem[theFields.value.children].length > 0) {
                twoItem[theFields.value.children].forEach(function (threeItem) {
                  allThreeDatas.value.push(threeItem[theFields.value.value]);
                });
              }
            });
          }
        });
      }
    };

    var allChange = function allChange(_ref2) {
      var target = _ref2.target;
      emit('all-change', target === null || target === void 0 ? void 0 : target.checked);
    };

    var checkSelects = function checkSelects() {
      if (props.level === 1) {
        getLevel1Datas();
        checkOne();
        checkAll();
      } else if (props.level === 2) {
        checkTwo();
      } else {
        checkThree();
      }
    };

    (0, _vue.watch)(function () {
      return props.options;
    }, getLevel1Datas, {
      deep: true
    });
    (0, _vue.watch)(function () {
      return props.value;
    }, checkSelects, {
      deep: true
    });
    (0, _vue.watch)(function () {
      return props.oneCode;
    }, checkSelects);
    (0, _vue.watch)(function () {
      return props.twoCode;
    }, checkSelects); // FIX 有值显示不选中

    (0, _vue.onMounted)(checkSelects);
    return {
      prefixClsNew: prefixClsNew,
      theFields: theFields,
      isAllChecked: isAllChecked,
      isAllHalf: isAllHalf,
      allChange: allChange,
      oneChange: oneChange,
      oneClick: oneClick,
      selectValue: selectValue,
      halfValue: halfValue
    };
  },
  render: function render() {
    var _this = this;

    var theAll = null;
    var theHeigth = this.preHeight;

    if (this.level === 1) {
      theAll = (0, _vue.createVNode)("div", {
        "class": "".concat(this.prefixClsNew, "-all")
      }, [(0, _vue.createVNode)(_checkbox.default, {
        "checked": this.isAllChecked,
        "indeterminate": this.isAllHalf,
        "onChange": this.allChange
      }, null), (0, _vue.createVNode)("span", {
        "style": "padding-left: 8px"
      }, [(0, _vue.createTextVNode)("\u5168\u9009")])]);
      theHeigth = this.preHeight - 30;
    }

    var theCheckboxs = [];

    if (this.options.length > 0) {
      theCheckboxs = this.options.map(function (items, itemIdx) {
        var _a;

        var isCheck = _this.selectValue.includes(String(items[_this.theFields.value]));

        var indeterminate = _this.halfValue.includes(String(items[_this.theFields.value]));

        return (0, _vue.createVNode)(_OneCheckbox.default, {
          "checked": isCheck,
          "indeterminate": indeterminate,
          "text": items[(_a = _this.theFields) === null || _a === void 0 ? void 0 : _a.label],
          "showArrow": _this.showArrow,
          "onChange": function onChange(status) {
            return _this.oneChange(status, items, itemIdx);
          },
          "onClick": function onClick() {
            return _this.oneClick(itemIdx);
          }
        }, null);
      });
    }

    return (0, _vue.createVNode)("div", {
      "class": "".concat(this.prefixClsNew, "-item"),
      "style": {
        width: "".concat(this.preWidth, "px")
      }
    }, [theAll, (0, _vue.createVNode)(_containerScroll.default, {
      "style": {
        height: "".concat(theHeigth, "px")
      }
    }, {
      default: function _default() {
        return [theCheckboxs];
      }
    })]);
  }
});

exports.default = _default2;