soc_web/src/components/orgTree/orgDropDown.vue

<template>
  <treeselect v-model="val" :options="deptOptions" :normalizer="normalizer" v-bind="$attrs" @select="select" ref="tree"
    noResultsText="暂无符合条件的数据" noOptionsText="无数据" clearValueText="清除" />
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { deptTreeSelect } from "@/api/system/public";
import sync from "@/components/computed.sync.js";
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "orgDropTree",
  data() {
    return {
      deptOptions: [],
      currentNode: null,
    };
  },
  props: {
    value: {
      type: String,
    },
    label: {
      type: String,
      default: "shortName",
    },
    orgTreeType:{ //取值范围：business,org
      type: String,
      default: "business",
    }
  },
  watch: {
    value(v) {
      if(!v){
        this.$emit("select", null);
        return;
      }
      if (!this.currentNode || this.currentNode.id != v) {        
        this.currentNode = this.findNodeInOptions(v);
      }
      
      if (this.currentNode) {
        console.info(this.currentNode)
        this.$emit("select", this.currentNode);
      }
    },
    orgTree(val)
    {
      this.getDeptTree();
    },
  },
  computed: {
    ...mapGetters(["orgTree"]),
    val: sync("value"),
  },
  components: { Treeselect },

  methods: {
    /** 查询机构下拉树结构 */
    getDeptTree() {
      if(this.orgTreeType==='business'){
        this.deptOptions = this.$store.getters.businessTree;
      }else{
        this.deptOptions = this.orgTree;
      }
      
      if (this.deptOptions && this.deptOptions.length > 0) {
        if (this.val) {
          this.currentNode = this.findNodeInOptions(this.val);
          if (this.currentNode) {
            this.$emit("select", this.currentNode);
          }
        }
      }
    },
    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.deptOptions)
    },
    /** 转换机构数据结构 */
    normalizer(node) {
      if (node.children == null || node.children.length == 0) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node[this.label],
        children: node.children,
      };
    },
    select(node) {
      this.currentNode = node;
    },
  },
  mounted() {
    this.getDeptTree();
  },
};
</script>
<style  lang="scss" scoped>
::v-deep {
  .vue-treeselect__menu {
    overflow-x: auto !important;
    width: 250px;
    max-height: 300px !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: 140px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
  }


}
</style>