OpenDoorManageMini/dist/dev/mp-weixin/components/ba-tree-picker/ba-tree-picker.js

"use strict";
const common_vendor = require("../../common/vendor.js");
const _sfc_main = {
  emits: ["select-change"],
  name: "ba-tree-picker",
  props: {
    valueKey: {
      type: String,
      default: "id"
    },
    textKey: {
      type: String,
      default: "name"
    },
    childrenKey: {
      type: String,
      default: "children"
    },
    localdata: {
      type: Array,
      default: function() {
        return [];
      }
    },
    localTreeList: {
      //在已经格式化好的数据
      type: Array,
      default: function() {
        return [];
      }
    },
    selectedData: {
      type: Array,
      default: function() {
        return [];
      }
    },
    title: {
      type: String,
      default: ""
    },
    multiple: {
      // 是否可以多选
      type: Boolean,
      default: true
    },
    selectParent: {
      //是否可以选父级
      type: Boolean,
      default: true
    },
    confirmColor: {
      // 确定按钮颜色
      type: String,
      default: ""
      // #0055ff
    },
    cancelColor: {
      // 取消按钮颜色
      type: String,
      default: ""
      // #757575
    },
    titleColor: {
      // 标题颜色
      type: String,
      default: ""
      //
    },
    switchColor: {
      // 节点切换图标颜色
      type: String,
      default: ""
      // #666
    },
    border: {
      // 是否有分割线
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showDialog: false,
      treeList: []
    };
  },
  computed: {},
  methods: {
    _show() {
      this.showDialog = true;
    },
    _hide() {
      this.showDialog = false;
    },
    _cancel() {
      this._hide();
      this.$emit("cancel", "");
    },
    _confirm() {
      let selectedList = [];
      let selectedNames;
      let currentLevel = -1;
      this.treeList.forEach((item, index) => {
        if (currentLevel >= 0 && item.level > currentLevel)
          ;
        else {
          if (item.checkStatus === 2) {
            currentLevel = item.level;
            selectedList.push(item.id);
            selectedNames = selectedNames ? selectedNames + " / " + item.name : item.name;
          } else {
            currentLevel = -1;
          }
        }
      });
      this._hide();
      this.$emit("select-change", selectedList, selectedNames);
    },
    //格式化原数据（原数据为tree结构）
    _formatTreeData(list = [], level = 0, parentItem, isShowChild = true) {
      let nextIndex = 0;
      let parentId = -1;
      let initCheckStatus = 0;
      if (parentItem) {
        nextIndex = this.treeList.findIndex((item) => item.id === parentItem.id) + 1;
        parentId = parentItem.id;
        if (!this.multiple) {
          initCheckStatus = 0;
        } else
          initCheckStatus = parentItem.checkStatus == 2 ? 2 : 0;
      }
      list.forEach((item) => {
        let isLastLevel = true;
        if (item && item[this.childrenKey]) {
          let children = item[this.childrenKey];
          if (Array.isArray(children) && children.length > 0) {
            isLastLevel = false;
          }
        }
        let itemT = {
          id: item[this.valueKey],
          name: item[this.textKey],
          level,
          isLastLevel,
          isShow: isShowChild,
          isShowChild: false,
          checkStatus: initCheckStatus,
          orCheckStatus: 0,
          parentId,
          children: item[this.childrenKey],
          childCount: item[this.childrenKey] ? item[this.childrenKey].length : 0,
          childCheckCount: 0,
          childCheckPCount: 0
        };
        if (this.selectedData.indexOf(itemT.id) >= 0) {
          itemT.checkStatus = 2;
          itemT.orCheckStatus = 2;
          itemT.childCheckCount = itemT.children ? itemT.children.length : 0;
          this._onItemParentSelect(itemT, nextIndex);
        }
        this.treeList.splice(nextIndex, 0, itemT);
        nextIndex++;
      });
    },
    // 节点打开、关闭切换
    _onItemSwitch(item, index) {
      if (item.isLastLevel === true) {
        return;
      }
      item.isShowChild = !item.isShowChild;
      if (item.children) {
        this._formatTreeData(item.children, item.level + 1, item);
        item.children = void 0;
      } else {
        this._onItemChildSwitch(item, index);
      }
    },
    _onItemChildSwitch(item, index) {
      const firstChildIndex = index + 1;
      if (firstChildIndex > 0)
        for (var i = firstChildIndex; i < this.treeList.length; i++) {
          let itemChild = this.treeList[i];
          if (itemChild.level > item.level) {
            if (item.isShowChild) {
              if (itemChild.parentId === item.id) {
                itemChild.isShow = item.isShowChild;
                if (!itemChild.isShow) {
                  itemChild.isShowChild = false;
                }
              }
            } else {
              itemChild.isShow = item.isShowChild;
              itemChild.isShowChild = false;
            }
          } else {
            return;
          }
        }
    },
    // 节点选中、取消选中
    _onItemSelect(item, index) {
      if (!this.multiple) {
        item.checkStatus = item.checkStatus == 0 ? 2 : 0;
        this.treeList.forEach((v, i) => {
          if (i != index) {
            this.treeList[i].checkStatus = 0;
          } else {
            this.treeList[i].checkStatus = 2;
          }
        });
        let selectedList = [];
        let selectedNames;
        selectedList.push(item.id);
        selectedNames = item.name;
        this._hide();
        this.$emit("select-change", selectedList, selectedNames);
        return;
      }
      let oldCheckStatus = item.checkStatus;
      switch (oldCheckStatus) {
        case 0:
          item.checkStatus = 2;
          item.childCheckCount = item.childCount;
          item.childCheckPCount = 0;
          break;
        case 1:
        case 2:
          item.checkStatus = 0;
          item.childCheckCount = 0;
          item.childCheckPCount = 0;
          break;
      }
      this._onItemChildSelect(item, index);
      this._onItemParentSelect(item, index, oldCheckStatus);
    },
    _onItemChildSelect(item, index) {
      if (item.childCount && item.childCount > 0) {
        index++;
        while (index < this.treeList.length && this.treeList[index].level > item.level) {
          let itemChild = this.treeList[index];
          itemChild.checkStatus = item.checkStatus;
          if (itemChild.checkStatus == 2) {
            itemChild.childCheckCount = itemChild.childCount;
            itemChild.childCheckPCount = 0;
          } else if (itemChild.checkStatus == 0) {
            itemChild.childCheckCount = 0;
            itemChild.childCheckPCount = 0;
          }
          index++;
        }
      }
    },
    _onItemParentSelect(item, index, oldCheckStatus) {
      const parentIndex = this.treeList.findIndex((itemP) => itemP.id == item.parentId);
      if (parentIndex >= 0) {
        let itemParent = this.treeList[parentIndex];
        itemParent.childCheckCount;
        let oldCheckStatusParent = itemParent.checkStatus;
        if (oldCheckStatus == 1) {
          itemParent.childCheckPCount -= 1;
        } else if (oldCheckStatus == 2) {
          itemParent.childCheckCount -= 1;
        }
        if (item.checkStatus == 1) {
          itemParent.childCheckPCount += 1;
        } else if (item.checkStatus == 2) {
          itemParent.childCheckCount += 1;
        }
        if (itemParent.childCheckCount <= 0 && itemParent.childCheckPCount <= 0) {
          itemParent.childCheckCount = 0;
          itemParent.childCheckPCount = 0;
          itemParent.checkStatus = 0;
        } else if (itemParent.childCheckCount >= itemParent.childCount) {
          itemParent.childCheckCount = itemParent.childCount;
          itemParent.childCheckPCount = 0;
          itemParent.checkStatus = 2;
        } else {
          itemParent.checkStatus = 1;
        }
        this._onItemParentSelect(itemParent, parentIndex, oldCheckStatusParent);
      }
    },
    // 重置数据
    _reTreeList() {
      this.treeList.forEach((v, i) => {
        this.treeList[i].checkStatus = v.orCheckStatus;
      });
    },
    _initTree() {
      this.treeList = [];
      this._formatTreeData(this.localdata);
    }
  },
  watch: {
    localdata() {
      this._initTree();
    },
    localTreeList() {
      this.treeList = this.localTreeList;
    }
  },
  mounted() {
    this._initTree();
  }
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return {
    a: $data.showDialog ? 1 : "",
    b: common_vendor.o((...args) => $options._cancel && $options._cancel(...args)),
    c: $props.cancelColor,
    d: common_vendor.o((...args) => $options._cancel && $options._cancel(...args)),
    e: common_vendor.t($props.title),
    f: $props.titleColor,
    g: common_vendor.t($props.multiple ? "确定" : ""),
    h: $props.confirmColor,
    i: common_vendor.o((...args) => $options._confirm && $options._confirm(...args)),
    j: common_vendor.f($data.treeList, (item, index, i0) => {
      return common_vendor.e({
        a: !item.isLastLevel && item.isShowChild
      }, !item.isLastLevel && item.isShowChild ? {
        b: $props.switchColor
      } : !item.isLastLevel && !item.isShowChild ? {
        d: $props.switchColor
      } : {
        e: $props.switchColor
      }, {
        c: !item.isLastLevel && !item.isShowChild,
        f: common_vendor.o(($event) => $options._onItemSwitch(item, index), index),
        g: common_vendor.t(item.name + (item.childCount ? "(" + item.childCount + ")" : "")),
        h: $props.selectParent ? true : item.isLastLevel
      }, ($props.selectParent ? true : item.isLastLevel) ? common_vendor.e({
        i: item.checkStatus == 1
      }, item.checkStatus == 1 ? {
        j: $props.confirmColor,
        k: !$props.multiple ? 1 : "",
        l: $props.confirmColor
      } : item.checkStatus == 2 ? {
        n: $props.confirmColor,
        o: !$props.multiple ? 1 : "",
        p: $props.confirmColor
      } : {
        q: !$props.multiple ? 1 : "",
        r: $props.confirmColor
      }, {
        m: item.checkStatus == 2
      }) : {}, {
        s: common_vendor.o(($event) => $options._onItemSelect(item, index), index),
        t: common_vendor.s({
          paddingLeft: item.level * 30 + "rpx"
        }),
        v: item.isShow ? 1 : "",
        w: index
      });
    }),
    k: $props.border === true ? 1 : "",
    l: $data.showDialog ? 1 : ""
  };
}
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-6e9e5013"], ["__file", "F:/兴元/开门柜项目/平台端管理系统小程序/src/components/ba-tree-picker/ba-tree-picker.vue"]]);
wx.createComponent(Component);