drp-ui/src/components/PopDialog/fourClass.vue

<template>
  <div>
    <el-dialog
      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="10" class="content">
              <el-col :span="12">
                <el-input
                  placeholder="输入关键字进行过滤"
                  size="small"
                  v-model="filterText">
                </el-input>

                <el-tree
                  class="filter-tree"
                  :data="threedata"
                  :props="defaultProps"
                  node-key="id"
                  highlight-current
                  @node-click="clickTree"
                  :filter-node-method="filterNode"
                  ref="tree">
                </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 { getTree } from '@/api/classify/basic';
export default {
  data() {
    return {
      loading: false,
      visible: false,
      filterText: '',
      threedata: [],
      defaultProps: {
        children: 'childrens',
        label: 'materialType'
      },
      // 判断是否为最末级节点
      isLast: false,
      // 选中的节点
      choosePoint: {}
    };
  },
  props: {},
  methods: {
    init() {
      this.visible = true;
      this.$nextTick(() => {
        this.refreshList()
      });
    },
    // 获取数据列表
    refreshList(data) {
      this.loading = true;
      getTree(data).then(res => {
        console.log('res',res)
        if(res.code === 200) {
          this.threedata = res.rows
        }
        this.loading = false;
      });
    },
    clickTree(data) {
      console.log('树形节点信息：',data)
      if (data.childrens.length == 0) {
        this.isLast = true
      } else {
        this.isLast = false
      }
      this.choosePoint = data
    },
    filterNode(value, data) {
      console.log('value', value)
      console.log('data', data)
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
    },
    doSubmit() {
      if(this.isLast == false) {
        this.$message({
          message: '请选择最末级节点',
          type: 'warning'
        });
      } else {
        console.log('子组件选择的数据',this.choosePoint)
        this.$emit("doSubmit", this.choosePoint);
        this.visible = false;
      }
    },
  },
};
</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>