report/report-ui/src/components/AnjiPlus/anji-tree.vue

<!--
 * @Descripttion: 
 * @Author: Devli
 * @Date: 2021-7-17 10:45:24 
 * @Last Modified by:   qianlishi
 * @Last Modified time: 2021-12-13 11:04:24 
 !-->
<template>
  <div>
    <el-input
      class="filterInput"
      placeholder="搜索"
      v-model="filterText"
      v-if="enableFilter"
    />
    <div class="title">{{ labelName }}</div>
    <el-tree
      ref="table_tree"
      :data="treeData"
      node-key="id"
      :default-expand-all="isOpen"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      @node-click="nodeClick"
      @check="checkedEvent"
    />
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  components: {},
  props: {
    url: {
      type: [String],
      default: () => {
        return "";
      }
    },
    id: {
      type: [String],
      default: () => {
        return "id";
      }
    },
    label: {
      type: [String],
      default: () => {
        return "";
      }
    },
    value: {
      type: [String],
      default: () => {
        return "";
      }
    },
    labelName: String,
    enableFilter: Boolean,
    isOpen: Boolean
  },
  data() {
    return {
      filterText: "",
      treeData: []
    };
  },
  computed: {},
  watch: {
    filterText(val) {
      this.$refs.table_tree.filter(val);
    }
  },
  mounted() {
    this.queryData();
  },
  methods: {
    filterNode(val, data) {
      if (!val) return true;
      return data.label.indexOf(val) !== -1;
    },
    queryData() {
      if (this.isBlank(this.url)) {
        return;
      }
      request({
        url: this.url,
        method: "GET"
      }).then(response => {
        if (response.code != "200") {
          return;
        }
        this.treeData =
          Object.prototype.toString.call(response.data) == "[object Array]"
            ? response.data
            : response.data.tree || response.data.menuTree;
      });
    },
    // 点击tree节点时 将tree的id作为上级机构代码 查询列表
    nodeClick(node) {
      this.$emit("input", node["id"]);
      this.$emit("node-click", node["id"]);
    },
    checkedEvent(item, evt) {
      let ids = evt.checkedKeys.toString();
      this.$emit("input", ids);
    }
  }
};
</script>

<style scoped lang="scss">
.filterInput {
  margin-bottom: 20px;
}
</style>