@fe6/water-pro/es/checkbox-cascader/src/Item.js

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

import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";

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 { computed, defineComponent, onMounted, ref, watch } from 'vue';
import { clone, hasOwn, isEmpty, keys } from '@fe6/shared';
import useConfigInject from '../../_util/hooks/useConfigInject';
import PropTypes from '../../_util/vue-types';
import ContainerScroll from '../../container-scroll';
import Checkbox from '../../checkbox';
import OneCheckbox from './OneCheckbox';
import { defaultFields } from './utils';
export default defineComponent({
  inheritAttrs: false,
  props: {
    prefixCls: PropTypes.string,
    preWidth: PropTypes.number.def(160),
    preHeight: PropTypes.number.def(270),
    showArrow: PropTypes.bool,
    options: PropTypes.array,
    fieldNames: PropTypes.object.def(clone(defaultFields)),
    // value: PropTypes.array,
    value: PropTypes.object,
    level: PropTypes.number,
    oneCode: PropTypes.number,
    twoCode: PropTypes.number // 用于二级匹配 半选 和 选中

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

    var _useConfigInject = useConfigInject('checkbox-cascader', props),
        prefixClsNew = _useConfigInject.prefixCls;

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

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

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

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

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

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

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

          if (hasOwn(props.value, String(oneItem[theFields.value.value]))) {
            if (hasOwn(oneItem, theFields.value.children)) {
              oneItem[theFields.value.children].forEach(function (twoItem) {
                // 二级存在已选值当中，不是半选就是选中
                if (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 && !isEmpty(props.value)) {
        // 点击展开二级的时候
        if (props.oneCode > -1) {
          props.options.forEach(function (twoItem) {
            var _a, _b, _c, _d;

            if (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 (isEmpty(props.value) || !props.value) {
        selectValue.value = [];
        halfValue.value = [];
      } else {
        halfValue.value = [];

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


    var isAllChecked = ref(false);
    var isAllHalf = ref(false);
    var allOneDatas = ref([]);
    var allTwoDatas = ref([]);
    var allThreeDatas = ref([]);

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

      if (!!props.value && !isEmpty(props.value)) {
        var oneKeys = keys(props.value);
        var twoKeyLength = 0;
        var threeKeyLength = 0;
        oneKeys.forEach(function (oneItem) {
          var twoKeys = 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 (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 (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();
      }
    };

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

    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 = _createVNode("div", {
        "class": "".concat(this.prefixClsNew, "-all")
      }, [_createVNode(Checkbox, {
        "checked": this.isAllChecked,
        "indeterminate": this.isAllHalf,
        "onChange": this.allChange
      }, null), _createVNode("span", {
        "style": "padding-left: 8px"
      }, [_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 _createVNode(OneCheckbox, {
          "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 _createVNode("div", {
      "class": "".concat(this.prefixClsNew, "-item"),
      "style": {
        width: "".concat(this.preWidth, "px")
      }
    }, [theAll, _createVNode(ContainerScroll, {
      "style": {
        height: "".concat(theHeigth, "px")
      }
    }, {
      default: function _default() {
        return [theCheckboxs];
      }
    })]);
  }
});