bab-icon/resources/views/admins/roles/permissions.blade.php

<div style="margin-top: 10px;" id="roles-app">
    <div style="text-align: center;margin-top: 5px;margin-bottom: 10px;font-size: 20px;">
        编辑 - 权限
    </div>
    <el-form action="{{route('admin.role.setPermission')}}" method="post" id="form-create">
        <!-- 链接 -->
        <el-row :gutter="20">
            <el-col :span="6" v-for="data in permission">

                <el-tree
                        ref="tree"
                        :data="data"
                        show-checkbox
                        node-key="id"
                        :default-checked-keys="permissionIds"
                        :default-expand-all="true"
                        @check-change="handleCheckChange"
                        :props="defaultProps">
                </el-tree>
            </el-col>

        </el-row>
        <input type="hidden" v-model="permissionIds" name="permission_ids"></input>
        <input type="hidden" value="{{$id}}" name="id"></input>
        <ui-submit></ui-submit>
    </el-form>
</div>


<script type="application/javascript">
    $(function () {
        // 注意：Vue组件一定放在jQuery.validator前面验证
        new Vue({
            el: '#roles-app',
            data: function () {
                return {
                    permission:{!! json_encode($permission) !!},
                    permissionIds:{!! json_encode($permission_ids) !!},

                    defaultProps: {
                        children: 'children',
                        label: 'label'
                    }
                };
            },
            methods:{
                handleCheckChange(data, checked, indeterminate) {
                    let permissionIds=[];
                    this.$refs.tree.forEach((v,k)=>{
                        let selectKey=v.getCheckedKeys();
                        if(selectKey.length>0){
                            permissionIds.push(...selectKey)
                        }
                    })
                    this.permissionIds=permissionIds;
                }

            }
        });
        jQuery.validator.setDefaults({
            debug: false,         // 调试模式true不会提交,false允许提交
            success: "success",   // 匹配成功的class样式名称
            errorElement: 'div'   // 兼容el标签时使用(兼容el Vue组件label.error标签问题)
        });
        // 前台数据验证 验证需要设置window.form全局变量
        window.form = $('#form-create').validate({
            rules: {
                name: {
                    required: true,
                    maxlength: 200,
                    normalizer: function (value) {
                        return $.trim(value);
                    }
                }
            }
        });
        // 编辑保存变量
        window.formDatum = $('form').serialize();
    });
</script>
@include('layouts.admin.form_script')