drp-ui/src/components/Refers/treeRefer.vue

<template>
  <div>
    <el-dialog :title="reciveForm.title" width="500px" :close-on-click-modal="false" :append-to-body="true" v-dialogDrag
      class="userDialog" :visible.sync="visible">
      <el-container style="height: 500px">
        <el-container>
          <el-main>
            <el-row :gutter="24" class="content">
              <el-col :span="24">
                <el-input placeholder="输入关键字进行过滤" size="small" v-model="filterText" style="margin-bottom: 16px">
                </el-input>

                <el-tree class="filter-tree" :data="threedata" :props="defaultProps" accordion node-key="id"
                  highlight-current @node-click="clickTree" :filter-node-method="filterNode" ref="tree">
                  <span slot-scope="{ node, data }">
                    {{ data.code }}{{ data.name }}
                  </span>
                </el-tree>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-container>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible = false" icon="el-icon-circle-close">关闭</el-button>
        <el-button size="small" type="primary" icon="el-icon-circle-check" @click="doSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getRefer } from '@/api/purchase/basic'
export default {
  data() {
    return {
      loading: false,
      visible: false,
      filterText: "",
      threedata: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 判断是否为最末级节点
      // isLast: false,
      // 选中的节点
      choosePoint: {},
      // 接收的参数
      reciveForm: {},
    };
  },
  props: {},
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    init(val) {
      this.visible = true;
      this.filterText = ''
      this.reciveForm = val
      this.$nextTick(() => {
        this.refreshList();
      });
    },
    // 获取数据列表
    refreshList(data) {
      this.loading = true;
      let params = this.reciveForm
      getRefer(params).then((res) => {
        console.log("res", res);
        if (res.code === 200) {
          this.threedata = res.rows
        }
        this.loading = false;
      });
    },
    clickTree(data) {
      console.log("树形节点信息：", data);
      this.choosePoint = data;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    doSubmit() {
      console.log("子组件选择的数据", this.choosePoint);
      this.$emit("doSubmit", this.choosePoint);
      this.visible = false;
    },
    loadNode(node, resolve) {
      console.log("node, resolve", node, resolve);
      // if (!node.data.length)
      //   resolve(node.data.childrens.sort((a, b) => a.code - b.code));
      // else resolve(this.threedata);
    },
  },
};
</script>
<style lang="scss">
.userDialog {
  .el-dialog__body {
    padding: 10px 0px 0px 10px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }

  .el-main {
    padding: 20px 20px 5px 20px;

    .el-pagination {
      margin-top: 5px;
    }
  }
}
</style>