forked from kidgrow-microservices-platform

zhaoxiaohao
2020-09-18 daa697719eb0ddfd170f1ab94c5422a4f5b93951
kidgrow-web/kidgrow-web-manager/src/main/resources/static/pages/system/role.html
@@ -16,13 +16,13 @@
                <option value="">-请选择-</option>
                <option value="name">角色名称</option>
            </select>&emsp;
            <input id="role-edit-value" class="layui-input search-input" type="text" placeholder="输入关键字"/>&emsp;
            <input id="role-edit-value" class="layui-input search-input" type="text" placeholder="按关键字" />&emsp;
            <button id="role-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
            <button id="role-btn-add" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
            <button id="role-btn-add" class="layui-btn icon-btn permissions" permissions="saveOrUpdate"><i class="layui-icon">&#xe654;</i>添加</button>
        </div>
        <!-- 数据表格 -->
        <table class="layui-table" id="role-table" lay-filter="role-table"></table>
        <table class="layui-hide" id="role-table" lay-filter="role-table"></table>
    </div>
</div>
@@ -57,11 +57,55 @@
    </form>
</script>
<!-- 数据权限 表单弹窗 -->
<script type="text/html" id="role-model-role">
    <form id="role-form" lay-filter="role-form" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">角色名</label>
            <div class="layui-input-block">
                <input name="name" placeholder="请输入角色名" type="text" class="layui-input" maxlength="20"
                       lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">Code</label>
            <div class="layui-input-block">
                <input name="code" placeholder="请输入Code" type="text" class="layui-input" maxlength="20"
                       lay-verify="required" required />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限范围</label>
            <div class="layui-input-block">
                <select  name="type" lay-filter="role_organization">
                   <option value="">请选择权限</option>
                   <option value="1">全部数据权限</option>
                   <option value="2">自定义数据权限</option>
                   <option value="3">本部门数据权限</option>
                   <option value="4">本部门及以下数据权限</option>
                   <option value="5">仅本人数据权限</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" id="tree">
            <!-- <label class="layui-form-label">数据权限</label> -->
            <!-- <div id="orgParentId-tree" class="demo-tree demo-tree-box"></div> -->
            <ul id="treeMenu-role" class="ztree" style="padding: 25px 0px 20px 60px;"></ul>
        </div>
        <div class="layui-form-item model-form-footer">
            <button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button>
            <button class="layui-btn" lay-filter="role-form-submit-role" lay-submit>保存</button>
        </div>
    </form>
</script>
<!-- 表格操作列 -->
<script type="text/html" id="role-table-bar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="auth">权限分配</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs permissions" permissions="updateEnabled" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs permissions" permissions="role-del" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs permissions" permissions="menus-granted" lay-event="auth">权限分配</a>
    <a class="layui-btn layui-btn-xs permissions" permissions="sysroleorganization" lay-event="auth_role">分配数据权限</a>
</script>
<!-- 表格状态列 -->
@@ -71,7 +115,7 @@
</script>
<script>
    layui.use(['form', 'table', 'util', 'config', 'admin', 'formSelects'], function () {
    layui.use(['form', 'table', 'util', 'config', 'tree', 'admin', 'formSelects'], function () {
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
@@ -79,6 +123,11 @@
        var util = layui.util;
        var admin = layui.admin;
        var formSelects = layui.formSelects;
        //树形插件
        var tree = layui.tree;
        var layer = layui.layer
            , $ = layui.jquery;
        //常量
        var clientsAll =null;
        //渲染表格
@@ -87,20 +136,23 @@
            url: config.base_server + 'api-user/roles',
            headers:{'Authorization': 'Bearer ' + config.getToken().access_token},
            page: true,
            cellMinWidth: 80,
            cols: [[
                {type: 'numbers'},
                {field: 'id', sort: true, title: 'ID',width: 80},
                {field: 'name', sort: true, title: '角色名'},
                {field: 'code', sort: true, title: 'Code'},
                {field: 'tenantId', sort: true, title: '应用标识'},
                {
                    field: 'createTime', sort: true, templet: function (d) {
                        return util.toDateString(d.createTime);
                    }, title: '创建时间'
                },
                // {
                //     field: 'createTime', sort: true, templet: function (d) {
                //         return util.toDateString(d.createTime);
                //     }, title: '创建时间'
                // },
                { field: 'createTime', width: 250, sort: true, title: '创建时间', templet: "<div>{{layui.util.toDateString(d.createTime, 'yyyy/MM/dd HH:mm')}}</div>" },
                {field: 'enabled', width: 100,sort: true, templet: '#role-tpl-state', title: '状态'},
                {align: 'center', toolbar: '#role-table-bar', title: '操作',width: 250}
            ]]
                { align: 'center', toolbar: '#role-table-bar', title: '操作', width: 320 }
            ]],
            done:function(res){
                permissionsInput(res,config);
            }
        });
        // 获取应用列表
@@ -121,7 +173,7 @@
                })
                form.render();
            } else {
                layer.msg(data.msg, {icon: 2, time: 500});
                layer.msg(data.msg, { icon: 2, time: 2000 });
            }
        }, 'GET');
@@ -137,15 +189,42 @@
            layer.load(2);
            admin.req('api-user/roles/saveOrUpdate?tenantId='+tenantId, JSON.stringify(data.field), function (data) {
                layer.closeAll('loading');
                // console.log(data);
                if (data.code === 0) {
                    layer.msg(data.msg, {icon: 1, time: 500});
                    layer.msg(data.msg, { icon: 1, time: 2000 });
                    table.reload('role-table');
                    layer.closeAll('page');
                } else {
                    layer.msg(data.msg, {icon: 2, time: 500});
                    layer.msg(data.msg, { icon: 2, time: 2000 });
                }
            }, $('#role-form').attr('method'));
            return false;
        });
        // 表单提交事件
        form.on('submit(role-form-submit-role)', function (data) {
            var array=new Array();
            var treeObj = $.fn.zTree.getZTreeObj('treeMenu-role');
            var nodes = treeObj.getCheckedNodes(true);
            $.each(nodes,function(i,item){
                if(!item.children){
                    array.push(item.id);
                }
            })
            if(array.length>0){
                data.field.orgIds=array
            }
            data.field.roleId= data.field.id
            layer.load(2);
            admin.req('api-user/sysroleorganization', JSON.stringify(data.field), function (data) {
                layer.closeAll('loading');
                if (data.code === 0) {
                    layer.msg(data.msg, { icon: 1, time: 2000 });
                    table.reload('role-table');
                    layer.closeAll('page');
                } else {
                    layer.msg(data.msg, { icon: 2, time: 2000 });
                }
            }, $('#role-form').attr('method'));
            layer.closeAll('page');
            return false;
        });
@@ -158,6 +237,8 @@
                doDelete(obj);
            } else if (obj.event === 'auth') {  // 权限分配
                showMenuDialog(obj.data.id,obj.data.tenantId);
            } else if (obj.event === 'auth_role') {
                showEditModelRole(data);//分配数据权限
            }
        });
@@ -170,9 +251,9 @@
            }, function (data) {
                layer.closeAll('loading');
                if (data.code == 0) {
                    layer.msg(data.msg, {icon: 1, time: 500});
                    layer.msg(data.msg, { icon: 1, time: 2000 });
                } else {
                    layer.msg(data.msg, {icon: 2, time: 500});
                    layer.msg(data.msg, { icon: 2, time: 2000 });
                    $(obj.elem).prop('checked', !obj.elem.checked);
                    form.render('checkbox');
                }
@@ -187,6 +268,34 @@
            table.reload('role-table', {where: {searchKey: key, searchValue: value}});
        });
        var getData = function () {
            admin.req('api-user/sysroleorganization/getTree', { is_del: 0 }, function (data) {
                layer.closeAll('loading');
                var data1 = [{
                    name: '常用文件夹',
                    id: 1,
                    children: [
                        { name: '所有未读', id: 11 },
                        { name: '置顶邮件', id: 12 },
                        { name: '标签邮件', id: 13 }]
                }];
                if (0 === data.code) {
                    var setting = {
                        check: { enable: true },
                        data: {
                            simpleData: {
                                enable: true
                            }
                        }
                    };
                    $.fn.zTree.init($('#treeMenu-role'), setting, data.data);
                    layer.closeAll('loading');
                } else {
                    layer.msg(data.msg, { icon: 2, time: 2000 });
                }
            }, 'get');
        }
        // 显示编辑弹窗
        var showEditModel = function (data) {
            layer.open({
@@ -228,7 +337,37 @@
                }
            });
        };
        //数据权限的点击事件
        form.on('select(role_organization)', function (data) {
            if (data.value == 2) {
                $("#tree").show();
            }else{
                $("#tree").hide();
            }
        });
        // 显示分配数据权限弹窗
        var showEditModelRole = function (data) {
            layer.open({
                type: 1,
                title: "分配数据权限",
                area: '450px',
                offset: '120px',
                content: $('#role-model-role').html(),
                success: function () {
                    $('#role-form')[0].reset();
                    $('#role-form').attr('method', 'POST');
                    if (data) {
                        getData();
                        if(data.type!=2){
                            $("#tree").hide();
                        }
                        form.render();
                        form.val('role-form', data);
                    }
                }
            });
        };
        // 删除
        var doDelete = function (obj) {
            layer.confirm('确定要删除吗?', function (i) {
@@ -238,10 +377,10 @@
                admin.req('api-user/roles/' + obj.data.id+'?tenantId='+tenantId, {}, function (data) {
                    layer.closeAll('loading');
                    if (data.code === 0) {
                        layer.msg(data.msg, {icon: 1, time: 500});
                        layer.msg(data.msg, { icon: 1, time: 2000 });
                        obj.del();
                    } else {
                        layer.msg(data.msg, {icon: 2, time: 500});
                        layer.msg(data.msg, { icon: 2, time: 2000 });
                    }
                }, 'DELETE');
            });
@@ -293,10 +432,10 @@
                    admin.req('api-user/menus/granted?tenantId='+tenantId, JSON.stringify(data) , function (data) {
                        layer.closeAll('loading');
                        if (0 == data.code) {
                            layer.msg(data.msg, {icon: 1, time: 500});
                            layer.msg(data.msg, { icon: 1, time: 2000 });
                            layer.close(index);
                        } else {
                            layer.msg(data.msg, {icon: 2, time: 500});
                            layer.msg(data.msg, { icon: 2, time: 2000 });
                        }
                    }, 'POST');
                }