saber/src/views/manager/projectinfo/allocateDialog.vue

<template>
        <el-dialog
            :visible.sync="allocatedialogVisible"
            title="关联WBS"
            width="500"
            append-to-body
        >
        <div class="flex1 ov-hidden" style="height: 500px;">
            <el-scrollbar class="h-100p">
                <div v-loading="treeLoad">
                  <el-tree
                    class="filter-tree"
                    lazy
                    :load="loadNode"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    highlight-current
                    check-strictly
                    :check-on-click-node="false"
                    node-key="id"
                    ref="tree"
           
                 
                    @check-change="handleCheckChange"
                    >
                  <span class="custom-tree-node" slot-scope="{node,data}" style="justify-content: flex-start;">
                   <span> <el-checkbox v-model="data.checked" v-if="!data.hasChildren"></el-checkbox></span>
                    {{ node.label }}
                
                  </span>
                    </el-tree>
        
                </div>
              </el-scrollbar>
        </div>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="allocatedialogVisible = false">取消</el-button>
                <el-button type="primary" @click="allocatedialogVisible = false">
                确认
                </el-button>
            </div>
            </template>
      </el-dialog>
 </template>
  
  <script>
  import { getLazytree,} from "@/api/manager/wbsprivate";
  import { mapGetters } from "vuex";
  
  export default {
    props:{
        projectId:'',
        wbsId:'',
        wbsType:''
    },
    data () {
     return {
        allocatedialogVisible:false,
        treeLoad:false,
        defaultProps: {
        children: "children",
        label: "title",
        isLeaf: function (data) {
          //console.log(data, !data.hasChildren, data.isExistForm);
          let tag = false;
          if (!data.hasChildren) {
            tag = true;
          }
          if (data.isExistForm == 1) {
            tag = true;
          }
          if (data.nodeType >= 6 && data.nodeType <= 13) {
            tag = true;
          }
          //中间交工。开工报告、质量评定）
          if (
            data.majorDataType == 1 ||
            data.majorDataType == 2 ||
            data.majorDataType == 3
          ) {
            tag = true;
          }
          return tag;
          // return !data.hasChildren || (data.isExistForm == 1);
        },
      },
     }
    },
    computed: {
        ...mapGetters(["userInfo"]),
    },
    watch: {
      
    },
    
    created () {
     
    },
    mounted () {
      
    },
    methods: {
     show(){
        this.allocatedialogVisible=true
     },
     renderContent(h, { node, data, store }) {
      // 只有当节点没有子节点时才显示复选框
      if (!data.hasChildren ) {
        return (
          <span>
            <el-checkbox v-model={data.checked}></el-checkbox>
            <span>{node.label}</span>
          </span>
        );
      } else {
        return (
          <span>{node.label}</span>
        );
      }
    },
     loadNode(node, resolve) {
        let pid = 0;
        if (node.level != 0) {
            pid = node.data.id;
        }
        getLazytree(this.wbsId, pid, this.userInfo.tenant_id, this.projectId, {
            wbsType: this.wbsType,
        }).then((res) => {
            let arr = [];
            if (Array.isArray(res.data.data)) {
            arr = res.data.data;
            }

            return resolve(arr);
        });
    },
    handleCheckChange(checkedNodes) {
      // 在这里处理已选中的节点数据
      console.log(checkedNodes,'checkedNodes');
    }
  
    }
  };
  </script>
  
  <style scoped lang="scss">
  </style>