<el-tree :data="data" show-checkbox node-key="module_id" ref="tree" highlight-current :props="defaultProps" @check="nodeClick" :check-strictly="ISstrictly" > <spanclass="custom-tree-node"slot-scope="{node,data}"> <span>{{data.module_name}}</span> <!--<span> <el-buttontype="text"size="mini"style="margin-left:5px">({{data.module}})</el-button> </span>--> </span> </el-tree>

data() {
        
 
return {
            ISstrictly: true, //編輯的時候 獲取資料時候父子級不關聯 獲取完畢勾選的時候父子級再關聯 防止獲取資料的時候 子級部分是部分選中 卻 顯示 全部選中
            checkAll: false, //全選 反選
            select_box: [],
            data: [], //tree
            defaultProps: {
                children: 'child',
                label: 'module_name'
            },
            treeLength: 
 
'' //所有的子級加起來的長度 用來判斷全選 和 已選的長度 是否一致
        };
    },

// 全選

handleCheckAllChange(val) { 
            if (this.checkAll) {
　　　　　　　　　　// 判斷true 或者 false
                this.$nextTick(function () {
                    this.$refs.tree.setCheckedNodes(this.data);
                });
            } else {
                
 
this.$nextTick(function () {
                    this.$refs.tree.setCheckedKeys([]);
                });
            }
            this.$nextTick(function () {
　　　　　　　　　　// 把勾選的id存起來
                console.log(this.$refs.tree.getCheckedNodes(), 'console.log(this.$refs.tree.getCheckedNodes());');
                let select_box = [];
                this.$refs.tree.getCheckedNodes().forEach((item) => {
                    select_box.push(item.module_id);
                });
                this.select_box = select_box;
                // console.log(this.select_box, 'select_box888');
            });
        },

　　//當用戶點選的時候      

  nodeClick(data, node, e) {
　　　　　　　// 把一進來的狀態 父子級是否關聯給取消
            this.ISstrictly = false;
            let select_box = [];
　　　　　　　　// 獲取到所有已選擇的id 存到數組裡面
            select_box = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
            console.log(select_box, 'select_box');
            this.select_box = select_box;
　　　　　　　　// 判斷是否全選了
            if (this.select_box.length != this.treeLength) {
                this.checkAll = false;
            } else {
                this.checkAll = true;
            }
        },

        //獲取當前使用者的許可權列表
        getUserAuthList() {
            this.$axios
                .post('/platformapi/Auth/getUserAuthList')
                .then(({ data }) => {
                    console.log(data, '獲取當前使用者的許可權列表');
                    if (data.code == 1) {
                        this.data = data.data;
                        this.$nextTick(function () {
　　　　　　　　　　　　　　　// this.treeLength = this.$refs.tree.getCheckedNodes().length;
　　　　　　　　　　　　　　　　　//這個函式是計算出所有子節點的個數
                            this.treeLength = this.getTreeNodeIDList(this.data);
                            console.log(this.treeLength, '888777');
                        });
                        this.$nextTick(function () {this.getSystemUserGroupDetail();
                        });
                    }
                })
                .catch((res) => {
                    console.log(res, 'catch');
                });
        },
        //獲取樹列表的所有節點  ==>  這裡是計算出所有子節點的個數
        getTreeNodeIDList(data) {
            var str = 0;
            const getStr = function (list) {
                list.forEach(function (row) {
                    if (row.child) {
                        getStr(row.child);
                        str += 1;
                    } else {
                        str += 1;
                    }
                });
            };
            getStr(data);
            this.treeLength = str;
            return this.treeLength;
            console.log(this.treeLength, 'this.treeLength');
        },
        //獲取當前使用者組詳情
        getSystemUserGroupDetail() {
            this.$axios
                .post('/platformapi/Auth/getSystemUserGroupDetail', {
                    group_id: this.group_id
                })
                .then(({ data }) => {
                    console.log(data, '獲取當前使用者組詳情');
                    if (data.code == 1) {
                        this.group_name = data.data.group_name;
                        this.desc = data.data.desc;
                        this.select_box = data.data.module_id_array.split(',');
                        this.select_box.forEach((item) => {
                            // console.log(item);
                            item = parseInt(item);
                        });
　　　　　　　　　　　　　　//這裡是讓返回的id項 預設選中
                        this.$refs.tree.setCheckedKeys(this.select_box);
                        this.select_box = this.select_box.map((item) => {
                            return +item;
                        });
                        console.log(this.select_box, '11');
　　　　　　　　　　　　　　// 是否全選
                        if (this.select_box.length == this.treeLength) {
                            this.checkAll = true;
                        } else {
                            this.checkAll = false;
                            this.$nextTick(function () {
　　　　　　　　　　　　　　　　　　　//這裡是獲取詳情資料完畢過後 則父子級是否關聯
                                this.ISstrictly = false;
                            });
                        }
                    }
                })
                .catch((res) => {
                    console.log(res, 'catch');
                });
        },
　　　　　　// 儲存
        save() {
            this.nodeClick();
            this.$axios
                .post('/platformapi/Auth/addUserGroup', {
                    group_id: this.group_id,
                    select_box: this.select_box.join(','),
                    group_name: this.group_name,
                    desc: this.desc
                })
                .then(({ data }) => {
                    console.log(data, '儲存');
                    if (data.code == 1) {
                        this.$message.success(data.message);
                        this.$router.go(-1);
                    } else {
                        this.$message.warning(data.message);
                    }
                })
                .catch((res) => {
                    console.log(res, 'catch');
                });
        }