soc_web/src/components/orgTree/orgQuerySelector.vue

<template>
  <div class="org_query_selector">
    <treeselect

      v-model="val"
      :options="treeList"
      :normalizer="normalizer"
      :default-expand-level="0"
      :clearable="clearable"
      v-bind="$attrs"
      @select="select"
      ref="tree"
      noResultsText="暂无符合条件的数据"
      noOptionsText="无数据"
      clearValueText="清除"
      :placeholder="placeholder"
    />
    <el-checkbox v-if="showCheckSub" v-model="checkSub" @change="changeCheckBox"
      >关联所有下级数据</el-checkbox
    >
  </div>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import { deptTreeSelect } from "@/api/system/public";
import sync from "@/components/computed.sync.js";
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "orgDropTree",
  data() {
    return {
      treeList: [],
      checkSub: this.defaultCheckSub,
    };
  },
  props: {
    value: {
      type: String,
    },
    multiple:{
      type:Boolean,
      default:true,
    },
    label: {
      type: String,
      default: "shortName",
    },
    orgTreeType: {
      //取值范围：business,org
      type: String,
      default: "business",
    },
    defaultCheckSub: {
      type: Boolean,
      default: true,
    },
    hangsheTree: {
      type: Boolean,
      default: false,
    },
    businessTree: {
      type: Boolean,
      default: false,
    },
    wholeTree: {
      type: Boolean,
      default: false,
    },
    customRequest: {
      type: Function,
    },
    showLowerCheck: {
      type: Boolean,
      default: true,
    },
    clearable: {
      type: Boolean,
      default: false,
    },
    placeholder:{
      type:String,
      default:'请选择机构'
    },
    showCheckSub:{
      type: Boolean,
      default: true,
    }
  },
  watch: {
    value(v) {
      //补充clear时不触发select事件
      if (!v) {
        this.$emit("click", null);
        return;
      }
    },
    orgTree(val) {
      this.getDeptTree();
    },
  },
  computed: {
    ...mapGetters(["orgTree"]),
    val: sync("value"),
  },
  components: { Treeselect },

  methods: {
    /** 查询机构下拉树结构 */
    getDeptTree() {
      if (this.customRequest) {
        this.customRequest().then((response) => {
          let treeList = response.data;
          this.dataFn(treeList);
          return;
        });
      } else {
        console.log(
          "getDeptTree",
          this.hangsheTree,
          this.businessTree,
          this.wholeTree
        );

        let treeList=null;
        if (this.hangsheTree) {
          treeList = this.$store.getters.depTree;
        } else if (this.businessTree) {
          treeList = this.$store.getters.businessTree;
        } else if (this.wholeTree) {
          treeList = this.$store.getters.wholeTree;
        } else {
          treeList = this.$store.getters.orgTree;
        }

        this.dataFn(treeList);
      }
    },
    dataFn(arr) {
      if (!arr || arr.length === 0) return;
      // console.log(arr, "arrr");
      if(arr==this.treeList){
        return;
      }
      if (arr && arr.length > 0) {
        if (arr.length == 1) {
          arr[0].isDefaultExpanded = true;
        }

        let defaultSelectedNode;
        if (!this.val) {
          this.val = arr[0].id;
          defaultSelectedNode = arr[0];
          //     let v=this.val

          // debugger
        } else {
          if (this.value) {
            defaultSelectedNode = this.findNodeInOptions(this.value);
          }
        }

        if (defaultSelectedNode) {
          // console.trace();
          this.$emit("defaultKey", defaultSelectedNode.id);
          this.$emit("defaultOrg", { ...defaultSelectedNode });
        }

        this.treeList = arr;
      }
      // setTimeout(() => {
      //   this.$refs.tree.setCurrentKey(arr[0].id);
      // }, 100);
    },

    findNodeInOptions(id) {
      if (!id) {
        return;
      }

      let func = (nodes) => {
        if (!nodes || nodes.length == 0) {
          return null;
        }

        let n = nodes.find((n) => n.id == id);
        if (n) {
          return n;
        }
        for (let index in nodes) {
          let node = nodes[index];
          n = func(node.children);
          if (n) {
            return n;
          }
        }
      };

      return func(this.treeList);
    },
    /** 转换机构数据结构 */
    normalizer(node) {
      if (node.children == null || node.children.length == 0) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node[this.label],
        children: node.children,
        isDefaultExpanded: node.isDefaultExpanded,
      };
    },
    select(node) {
      this.$emit("click", node);

    },
    changeCheckBox(state) {
      this.$emit("checkChange", state);
    },
    setCheckSub(checked){
      this.checkSub=checked;
    },
    /**
     * 设置选中顶级节点
     */
    setSelectTop(){
      if(!this.treeList || this.treeList.length===0){
        return null;
      }

      let node= this.treeList[0];
      this.val=node.id
      return node;
    }
  },
  mounted() {
     this.getDeptTree();
  },
};
</script>

<style lang="scss" scoped>
.org_query_selector {
  display: flex;

  ::v-deep .vue-treeselect {
    width: 205px !important;
  }
}
.org_query_selector div:first-child {
  margin-right: 20px;
}
::v-deep {
  .vue-treeselect__single-value {
    line-height: 30px;
    color: #666;
  }
  .vue-treeselect__control {
    height: 30px;
  }
  .vue-treeselect__input {
    height: 30px;
    line-height: 30px;
  }
  .el-checkbox__inner::after {
    left: 5px;
    top: 2px;
  }
  .vue-treeselect__menu {
    overflow-x: auto !important;
    width: 215px;
    max-height: 400px !important;
  }

  .vue-treeselect__label {
    overflow: unset;

    text-overflow: unset;
  }

  .vue-treeselect div,
  .vue-treeselect span {
    box-sizing: content-box;

    // white-space: nowrap;

    // text-overflow: ellipsis;
  }

  // 选中后的溢出隐藏

  .vue-treeselect__multi-value-label {
    display: block;

    width: 130px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
  }
}
</style>