auth-web/src/components/select-org-tree/index.vue

<!--
机构下拉树组件
@Author: linqian
@Date: 2021-08-02 13:49
-->
<template>
  <!-- :loading="loading" -->

  <el-select
    ref="reference"
    class="dg-select"
    v-model="selectedNodeLabel"
    v-bind="$attrs"
    v-on="$listeners"
    @filter-org="handleFilterOrg"
    @clearSelect="handleClearSelect"
    :placeholder="placeholder"
    :filterable="true"
    :options="treeData"
    clearable
    style="width: 300px"
  >
    <template slot="prefix">
      <slot name="prefix"></slot>
    </template>
    <!-- <template slot="empty" v-if="treeData.length == 0 && !loading">
      <slot name="empty"> 空数据 </slot>
    </template> -->
    <dg-scrollbar
      ref="scrollbar"
      wrap-class="el-select-dropdown__wrap"
      view-class="el-select-dropdown__list dg-select-dropdown__list"
      @scroll-bottom="handleScrollToBottom"
    >
      <dg-tree
        ref="tree"
        :key="key"
        radioType="all"
        :props="props"
        v-bind="treeProps"
        :lazy="lazy"
        :data="treeData"
        :render-after-expand="false"
        v-model="treeValue"
        @node-click="handleNodeClick"
        @check-change="handleCheckChange"
      ></dg-tree>
    </dg-scrollbar>
  </el-select>
</template>

<script>
import ElSelect from './select';
import * as commonApi from '@/api/common';
export default {
  name: 'DgSelect',

  components: {
    ElSelect
  },

  props: {
    nodeKey: {
      type: String,
      default: 'code'
    },
    apiName: {
      type: String,
      default: 'getOrgTree'
    },
    placeholder: {
      type: String,
      default: '请选择所属单位'
    },
    // 目前所知道的值有：APP, 0
    type: {
      type: String
    }
  },
  data() {
    return {
      props: {
        value: this.nodeKey,
        label: 'name',
        children: 'children',
        isLeaf(data) {
          return data.isParent !== true;
        }
      },
      treeProps: {
        nodeKey: this.nodeKey,
        load: this.loadNode
      },
      searchForm: {
        mtType: 'app',
        name: '',
        pageNum: 0,
        pageSize: 50
      },
      treeValue: '',
      data: [],
      lazy: true,
      treeData: [],
      key: 0,
      selectedNodeLabel: '',
      loading: false
    };
  },

  computed: {
    hasSlots() {
      return this.$slots && this.$slots.default && this.$slots.default.length > 0;
    }
  },
  watch: {
    treeValue(val) {
      const { data } = this.$refs.tree.getNode(val);
      this.$refs.reference.blur();
      this.selectedNodeLabel = data.name;
      this.$refs.reference.oldValue = data.name;
    }
  },
  methods: {
    handleNodeClick(data, node, tree) {
      this.$emit('orgTreeValue', data[this.nodeKey]);
      this.$emit('orgTreeNode', data);
    },
    loadNode(node, resolve) {
      // debugger
      this.getTree(node.level === 0 ? void 0 : node.data.id, resolve, node.level);
    },
    // 组织机构
    getTree(id, resolve) {
      const { params, apiName } = this;
      commonApi[apiName]({ id, type: this.type })
        .then((res) => {
          // 就为了存根节点, 用于刷新
          return resolve(res || []);
        })
        .catch(() => resolve([]));
    },
    handleChange(val) {
      this.$emit('submitTreeValue', val);
    },
    handleCheckChange(data, checked, indeterminate) {
      // debugger;
    },
    searchOrgTree() {},
    handleFilterOrg(val) {
      this.searchForm.name = $.trim(val);
      this.searchForm.pageNum = 0;
      if (this.searchForm.name) {
        if (this.lazy === true) {
          this.key++;
          this.lazy = false;
        }
        this.getSearchTree();
      } else {
        if (this.lazy === false) {
          this.key++;
          this.lazy = true;
        }
      }
    },
    handleClearSelect() {
      this.treeValue = '';
      this.$refs.tree.setCurrentKey(null);
      this.$refs.tree.setRadioKeys([]);
    },
    handleScrollToBottom() {
      if (!this.lazy && !this.isLast) {
        this.searchForm.pageNum++;
        this.getSearchTree();
      }
    },
    // 查询
    getSearchTree() {
      this.loading = true;
      commonApi.treeMatch(this.searchForm).then((res) => {
        let { content, totalElements } = res.data;
        const _content = content.map((item) => {
          return {
            ...item,
            isParent: true,
            name: item.fullName
          };
        });
        if (this.searchForm.pageNum == 0) {
          this.treeData = [];
        }
        this.treeData = [...this.treeData, ..._content];
        this.isLast = this.treeData.length == totalElements;
        this.loading = false;
      });
    }
  }
};
</script>