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

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

import { 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 { defineComponent, computed, ref, watchEffect } from 'vue';
import { hasOwn, isEmpty } from '@fe6/shared';
import cloneDeep from 'lodash-es/cloneDeep';
import useConfigInject from '../../_util/hooks/useConfigInject';
import Item from './Item';
import { defaultFields } from './utils';
import { boxProps } from './props';
export default defineComponent({
  name: 'ACheckboxCascaderBox',
  inheritAttrs: false,
  __ANT_CHECKBOX: true,
  props: boxProps,
  emits: ['update:value', '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 theValue = ref({});
    var theOneIdx = ref(-1);
    var theTwoIdx = ref(-1);

    var goEmit = function goEmit() {
      emit('update:value', theValue.value);
      emit('change', theValue.value);
    };

    var oneChange = function oneChange(status, item) {
      if (status) {
        if (!hasOwn(theValue.value, item[theFields.value.value])) {
          theValue.value[item[theFields.value.value]] = {};
        }

        var theChild = item[theFields.value.children].slice();

        if (theChild.length > 0) {
          theChild.forEach(function (twoItem) {
            var _a;

            if (!hasOwn((_a = theValue.value) === null || _a === void 0 ? void 0 : _a[item[theFields.value.value]], twoItem[theFields.value.value])) {
              theValue.value[item[theFields.value.value]][twoItem[theFields.value.value]] = {};
            }

            theValue.value[item[theFields.value.value]][twoItem[theFields.value.value]] = twoItem[theFields.value.children].map(function (threeItem) {
              return String(threeItem[theFields.value.value]);
            });
          });
        }
      } else {
        delete theValue.value[item[theFields.value.value]];
      }

      goEmit();
    };

    var openOne = function openOne(itemIdx) {
      theOneIdx.value = itemIdx;
      theTwoIdx.value = -1;
    };

    var twoChange = function twoChange(status, item) {
      var _a;

      var theOneCode = props.options[theOneIdx.value][theFields.value.value];

      if (status) {
        if (!hasOwn(theValue.value, theOneCode)) {
          theValue.value[theOneCode] = {};
        }

        if (!hasOwn((_a = theValue.value) === null || _a === void 0 ? void 0 : _a.theOneCode, item[theFields.value.value])) {
          theValue.value[theOneCode][item[theFields.value.value]] = [];
        }

        theValue.value[theOneCode][item[theFields.value.value]] = item[theFields.value.children].map(function (threeItem) {
          return String(threeItem[theFields.value.value]);
        });
      } else {
        delete theValue.value[theOneCode][item[theFields.value.value]];

        if (isEmpty(theValue.value[theOneCode])) {
          delete theValue.value[theOneCode];
        }
      }

      goEmit();
    };

    var openTwo = function openTwo(itemIdx) {
      theTwoIdx.value = itemIdx;
    };

    var threeChange = function threeChange(status, item) {
      var _a, _b;

      var theOneCode = props.options[theOneIdx.value][theFields.value.value];
      var theTwoCode = props.options[theOneIdx.value][theFields.value.children][theTwoIdx.value][theFields.value.value];

      if (status) {
        if (!hasOwn(theValue.value, theOneCode)) {
          theValue.value[theOneCode] = {};
        }

        if (!((_b = (_a = theValue.value) === null || _a === void 0 ? void 0 : _a[theOneCode]) === null || _b === void 0 ? void 0 : _b[theTwoCode])) {
          theValue.value[theOneCode][theTwoCode] = [];
        }

        theValue.value[theOneCode][theTwoCode].push(String(item[theFields.value.value]));
      } else {
        var theIdx = theValue.value[theOneCode][theTwoCode].findIndex(function (threeCode) {
          return threeCode === String(item[theFields.value.value]);
        });

        if (theIdx > -1) {
          theValue.value[theOneCode][theTwoCode].splice(theIdx, 1);

          if (theValue.value[theOneCode][theTwoCode].length === 0) {
            delete theValue.value[theOneCode][theTwoCode];
          }

          if (isEmpty(theValue.value[theOneCode])) {
            delete theValue.value[theOneCode];
          }
        }
      }

      goEmit();
    };

    var allChange = function allChange(status) {
      if (status) {
        props.options.forEach(function (oneItem) {
          theValue.value[oneItem[theFields.value.value]] = {};

          if (hasOwn(oneItem, theFields.value.children) && oneItem[theFields.value.children].length > 0) {
            oneItem[theFields.value.children].forEach(function (twoItem) {
              theValue.value[oneItem[theFields.value.value]][twoItem[theFields.value.value]] = {};

              if (hasOwn(twoItem, theFields.value.children) && twoItem[theFields.value.children].length > 0) {
                theValue.value[oneItem[theFields.value.value]][twoItem[theFields.value.value]] = twoItem[theFields.value.children].map(function (threeItem) {
                  return String(threeItem[theFields.value.value]);
                });
              }
            });
          }
        });
      } else {
        theValue.value = {};
      }

      goEmit();
    };

    watchEffect(function () {
      if (props.value && !isEmpty(props.value)) {
        theValue.value = cloneDeep(props.value);
      }
    });
    return {
      prefixClsNew: prefixClsNew,
      theFields: theFields,
      theValue: theValue,
      allChange: allChange,
      openOne: openOne,
      oneChange: oneChange,
      theOneIdx: theOneIdx,
      theTwoIdx: theTwoIdx,
      twoChange: twoChange,
      openTwo: openTwo,
      threeChange: threeChange
    };
  },
  render: function render() {
    var oneCode = this.theOneIdx > -1 ? this.options[this.theOneIdx][this.theFields.value] : -1;
    var twoCode = this.theOneIdx > -1 && this.theTwoIdx > -1 ? this.options[this.theOneIdx][this.theFields.children][this.theTwoIdx][this.theFields.value] : -1;
    var twoItem = null;

    if (this.theOneIdx > -1) {
      twoItem = _createVNode(Item, {
        "showArrow": true,
        "preWidth": this.preWidth,
        "preHeight": this.preHeight,
        "options": this.theOneIdx > -1 ? this.options[this.theOneIdx][this.theFields.children] : [],
        "fieldNames": this.theFields,
        "onChange": this.twoChange,
        "onClick": this.openTwo,
        "value": this.theValue,
        "level": 2,
        "oneCode": oneCode,
        "twoCode": twoCode
      }, null);
    }

    var threeItem = null;

    if (this.theTwoIdx > -1) {
      threeItem = _createVNode(Item, {
        "preWidth": this.preWidth,
        "preHeight": this.preHeight,
        "options": this.theOneIdx > -1 && this.theTwoIdx > -1 ? this.options[this.theOneIdx][this.theFields.children][this.theTwoIdx][this.theFields.children] : [],
        "fieldNames": this.theFields,
        "onChange": this.threeChange,
        "value": this.theValue,
        "level": 3,
        "oneCode": oneCode,
        "twoCode": twoCode
      }, null);
    }

    return _createVNode("div", {
      "class": this.prefixClsNew
    }, [_createVNode(Item, {
      "showArrow": true,
      "preWidth": this.preWidth,
      "preHeight": this.preHeight,
      "options": this.options,
      "fieldNames": this.theFields,
      "onChange": this.oneChange,
      "onClick": this.openOne,
      "onAllChange": this.allChange,
      "value": this.theValue,
      "level": 1,
      "oneCode": oneCode
    }, null), twoItem, threeItem]);
  }
});