【角色管理编辑模块,会有较大概率出现数据无法渲染的情况 _其他】

角色管理编辑模块,会有较大概率出现数据无法渲染的情况
我也踩过这个坑( 1 )
已统计您的踩坑,无需重复点击
回答(0)
其他
详细描述
截图
代码
    let vm = this;
    vm.ttop = "角色新增"
    var roleId = parseInt($stateParams.roleId)
    //角色新增复选框渲染(模块列表)
    vm.modelist = function () {
        httpService.modelist().then(function (res) {
            console.log(res);
            vm.modediplay = res.data.data;
            vm.bigTotalItems = res.data.total
            // 创建父模块数组
            vm.stages = [];
            // 创建数组中的对象
            var stage = {};
            //创建数组中的对象的数组
            var son = {};
            // 渲染一级菜单
            for (let i = 0; i < vm.modediplay.length; i++) {
                // 添加父模块
                if (vm.modediplay[i].parentId === 61) {
                    vm.stages.push(
                        stage = {
                            id: false,
                            label: vm.modediplay[i].name,
                            stageId: vm.modediplay[i].id,
                            contents: [],
                        }
                    )
                }
            }

            // 渲染二级菜单(二维数组)
            for (let x = 0; x < vm.stages.length; x++) {
                for (let y = 0; y < vm.modediplay.length; y++) {
                    if (vm.modediplay[y].parentId === vm.stages[x].stageId) {
                        vm.stages[x].contents.push(
                            son = {
                                id: false,
                                label: vm.modediplay[y].name,
                                sonId: vm.modediplay[y].parentId,
                                checkId: vm.modediplay[y].id,
                            }
                        )
                    }
                }
            }
            vm.stages
            console.log("全部权限数据", vm.stages)

            if (!roleId) {
                // 创建数组,存放用户选中的模块ID
                var intArr = [];
                // 提交保存
                vm.sava = function () {
                    // 遍历出用户勾选的模块,并将模块ID放入数组
                    for (let m = 0; m < vm.stages.length; m++) {
                        if (vm.stages[m].id === true) {
                            intArr.push(vm.stages[m].stageId);
                        }
                    }

                    for (let m = 0; m < vm.stages.length; m++) {
                        for (let n = 0; n < vm.stages[m].contents.length; n++) {
                            if (vm.stages[m].contents[n].id === true) {
                                intArr.push(vm.stages[m].contents[n].checkId)
                            }
                        }
                    }
                    console.log(intArr);

                    vm.roleadd = function (
                        data = {
                            roleName: vm.nickName,
                            intArray: intArr,
                        }
                    ) {
                        bootbox.confirm({
                            message: '<p class="logoutboot">请确认分配的权限?</p>',
                            buttons: {
                                confirm: {
                                    label: '确定',
                                    className: 'btn-success'
                                },
                                cancel: {
                                    label: '取消',
                                    className: 'btn-danger'
                                }
                            },
                            callback: function (result) {
                                // console.log(result);
                                if (result == true) {
                                    httpService.roleadd(data).then(function (res) {
                                        // console.log(res);
                                        bootbox.alert({
                                            message: '<p class="logoutboot">创建角色成功</p>',
                                            backdrop: '确认'
                                        });
                                        $state.go('backgroundPage.role');
                                    })
                                }
                            }
                        });
                    }
                    vm.roleadd();
                }
            }
        })
    }
    vm.modelist();

    console.log("角色ID", roleId);
    // 将roleIdZ转换为布尔值,判断页面是否是新增页

    if (roleId) {
        vm.ttop = "角色编辑"
        console.log(vm.stages);//较大概率出现underfined
            vm.roleEdit = function () {
                httpService.roleEdit(roleId).then(function (res) {
                    vm.nickName = res.data.data[0].roleName;
                    // 将数据中的ID放入数组
                    var dataId = [];
                    for (let i = 0; i < res.data.data.length; i++) {
                        dataId.push(res.data.data[i].moduleId)
                    }
                    console.log("角色权限ID数组", dataId);

                    // 渲染一级菜单
                    for (let m = 0; m < vm.stages.length; m++) {
                        for (let x = 0; x < dataId.length; x++) {
                            if (vm.stages[m].stageId === dataId[x]) {
                                vm.stages[m].id = true;
                            }
                        }
                    }
                    // 渲染二级菜单
                    for (let m = 0; m < vm.stages.length; m++) {
                        for (let n = 0; n < vm.stages[m].contents.length; n++) {
                            for (let x = 0; x < dataId.length; x++) {
                                if (vm.stages[m].contents[n].checkId === dataId[x]) {
                                    vm.stages[m].contents[n].id = true;
                                }
                            }
                        }
                    }
                    console.log('全部权限数据2', vm.stages);
                })
            }
            vm.roleEdit()

        // 创建数组,存放用户选中的模块ID
        var intArr = [];
        // 提交保存
        vm.sava = function () {
            // 遍历出用户勾选的模块,并将模块ID放入数组
            for (let m = 0; m < vm.stages.length; m++) {
                if (vm.stages[m].id === true) {
                    intArr.push(vm.stages[m].stageId);
                }
            }
            for (let m = 0; m < vm.stages.length; m++) {
                for (let n = 0; n < vm.stages[m].contents.length; n++) {
                    if (vm.stages[m].contents[n].id === true) {
                        intArr.push(vm.stages[m].contents[n].checkId)
                    }
                }
            }
            // console.log(intArr);
            vm.rolePut = function (
                data = {
                    roleName: vm.nickName,
                    intArray: intArr,
                    roleId: roleId,
                }
            ) {
                bootbox.confirm({
                    message: '<p class="logoutboot">请确认修改的权限?</p>',
                    buttons: {
                        confirm: {
                            label: '确定',
                            className: 'btn-success'
                        },
                        cancel: {
                            label: '取消',
                            className: 'btn-danger'
                        }
                    },
                    callback: function (result) {
                        // console.log(result);
                        if (result == true) {
                            httpService.rolePut(data).then(function (res) {
                                console.log(res);
                                bootbox.alert({
                                    message: '<p class="logoutboot">修改角色成功</p>',
                                    backdrop: '确认'
                                });
                                $state.go('backgroundPage.role');
                            })
                        }
                    }
                });
            }
            vm.rolePut();
        }
    }
编辑于2024-05-08