完善角色修改数据范围的界面

src/main/java/cn/stylefeng/guns/modular/role/RoleViewController.java

@@ -49,4 +49,15 @@ public class RoleViewController {
         return "/modular/auth/role/role_edit.html";
     }
 
+    /**
+     * 修改数据范围界面
+     *
+     * @author fengshuonan
+     * @date 2021/1/8 20:57
+     */
+    @GetResource(name = "修改数据范围界面", path = "/view/role/editDataScope")
+    public String roleEditDataScope() {
+        return "/modular/auth/role/role_edit_data_scope.html";
+    }
+
 }

src/main/webapp/assets/expand/module/ztree/ztree-object.js

@@ -86,7 +86,16 @@ layui.define(['jquery', 'HttpRequest'], function (exports) {
             var zTree = $.fn.zTree.getZTreeObj(this.id);
             var nodes = zTree.getSelectedNodes();
             return nodes[0].name;
+        },
+
+        /**
+         * 获取选中的值的集合
+         */
+        getCheckedNodes: function () {
+            var zTree = $.fn.zTree.getZTreeObj(this.id);
+            return zTree.getCheckedNodes();
         }
+
     };
 
     exports('ztree', $ZTree);

src/main/webapp/assets/modular/auth/role/role.js

@@ -56,7 +56,7 @@ layui.use(['layer', 'form', 'table', 'admin', 'HttpRequest', 'func'], function (
                 }
             },
             {field: 'remark', align: "center", sort: true, title: '备注'},
-            {align: 'center', toolbar: '#tableBar', title: '操作', minWidth: 300}
+            {align: 'center', toolbar: '#tableBar', title: '操作', minWidth: 400}
         ]];
     };
 
@@ -97,6 +97,20 @@ layui.use(['layer', 'form', 'table', 'admin', 'HttpRequest', 'func'], function (
         });
     };
 
+    /**
+     * 点击编辑数据范围
+     *
+     * @param data 点击按钮时候的行数据
+     */
+    Role.onEditDataScope = function (data) {
+        func.open({
+            height: 470,
+            title: '修改数据范围',
+            content: Feng.ctxPath + "/view/role/editDataScope?roleId=" + data.roleId,
+            tableId: Role.tableId
+        });
+    };
+
     /**
      * 点击删除角色
      *
@@ -169,6 +183,8 @@ layui.use(['layer', 'form', 'table', 'admin', 'HttpRequest', 'func'], function (
 
         if (layEvent === 'edit') {
             Role.onEditRole(data);
+        } else if (layEvent === 'editDataScope') {
+            Role.onEditDataScope(data);
         } else if (layEvent === 'delete') {
             Role.onDeleteRole(data);
         } else if (layEvent === 'roleAssign') {

src/main/webapp/assets/modular/auth/role/role_edit_data_scope.js

@@ -0,0 +1,80 @@
+/**
+ * 角色详情对话框
+ */
+layui.use(['form', 'admin', 'HttpRequest', 'ztree'], function () {
+    var HttpRequest = layui.HttpRequest;
+    var form = layui.form;
+    var admin = layui.admin;
+    var $ZTree = layui.ztree;
+
+    // zTree的配置
+    var setting = {
+        check: {
+            enable: true,
+            chkboxType: {
+                "Y": "",
+                "N": ""
+            }
+        },
+        data: {
+            simpleData: {
+                enable: true
+            }
+        }
+    };
+
+    // 校验数据范围是否是指定部门，指定部门则显示出选择部门的框
+    function checkDataScope(dataScope) {
+        if (dataScope == '40') {
+            $("#deptTreeContext").removeClass("layui-hide");
+        } else {
+            $("#deptTreeContext").addClass("layui-hide");
+        }
+    }
+
+    // 初始化角色的详情数据
+    var detailRequest = new HttpRequest(Feng.ctxPath + "/sysRole/detail?roleId=" + Feng.getUrlParam("roleId"), 'get');
+    var result = detailRequest.start();
+    form.val('roleForm', result.data);
+
+    // 校验是否需要打开选择组织机构树
+    checkDataScope(result.data.dataScopeType);
+    form.render();
+
+    // 初始化选择组织机构的界面
+    var ztree = new $ZTree("deptTree", Feng.ctxPath + "/hrOrganization/zTree?roleId=" + result.data.roleId);
+    ztree.setSettings(setting);
+    ztree.init();
+
+    // 表单提交事件
+    form.on('submit(btnSubmit)', function (data) {
+        var request = new HttpRequest(Feng.ctxPath + "/sysRole/grantDataScope", 'post', function (data) {
+            Feng.success("修改成功!");
+            admin.closeThisDialog();
+        }, function (data) {
+            Feng.error("修改失败!" + data.message + "!");
+        });
+        request.set("roleId", data.field.roleId);
+        request.set("dataScopeType", data.field.dataScopeType);
+
+        // 如果是指定部门，则提交部门信息
+        if (data.field.dataScopeType == '40') {
+            var nodes = ztree.getCheckedNodes();
+            var orgIds = [];
+            for (let i = 0; i < nodes.length; i++) {
+                orgIds[i] = nodes[i].id;
+            }
+            request.set("grantOrgIdList", orgIds);
+        }
+        request.start(true);
+
+        //添加 return false 可成功跳转页面
+        return false;
+    });
+
+    // 监听数据范围单选
+    form.on('radio(dataScopeType)', function (data) {
+        checkDataScope(data.value);
+    });
+
+});

src/main/webapp/pages/modular/auth/role/role.html

@@ -33,6 +33,9 @@
     @if(loginUser.haveButton("BUTTON_ROLE_EDIT")){
     <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
     @}
+    @if(loginUser.haveButton("BUTTON_ROLE_EDIT")){
+    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="editDataScope">设置数据范围</a>
+    @}
     @if(loginUser.haveButton("BUTTON_ROLE_DELETE")){
     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
     @}

src/main/webapp/pages/modular/auth/role/role_edit_data_scope.html

@@ -0,0 +1,44 @@
+@layout("/layout/_form.html", {plugins:["ztree"], js:["/assets/modular/auth/role/role_edit_data_scope.js"]}){
+
+<form class="layui-form" id="roleForm" lay-filter="roleForm">
+    <div class="layui-fluid" style="padding-bottom: 75px;">
+        <div class="layui-card">
+            <div class="layui-card-body">
+                <div class="layui-form-item layui-row">
+                    <input name="roleId" type="hidden"/>
+                    <div class="layui-inline layui-col-md12">
+                        <label class="layui-form-label" style="width: 120px">角色名称<span style="color: red;">*</span></label>
+                        <div class="layui-input-block" style="margin-left: 150px">
+                            <input name="roleName" placeholder="请输入角色名称" type="text" class="layui-input layui-disabled" lay-verify="required" disabled="disabled" required autocomplete="off"/>
+                        </div>
+                    </div>
+                    <div class="layui-inline layui-col-md12">
+                        <label class="layui-form-label" style="width: 120px">数据范围类型<span style="color: red;">*</span></label>
+                        <div class="layui-input-block" style="margin-left: 150px">
+                            <input type="radio" name="dataScopeType" lay-filter="dataScopeType" value="10" title="仅本人数据">
+                            <input type="radio" name="dataScopeType" lay-filter="dataScopeType" value="20" title="本部门数据">
+                            <input type="radio" name="dataScopeType" lay-filter="dataScopeType" value="30" title="本部门及以下数据">
+                            <input type="radio" name="dataScopeType" lay-filter="dataScopeType" value="40" title="指定部门数据">
+                            <input type="radio" name="dataScopeType" lay-filter="dataScopeType" value="50" title="全部数据">
+                        </div>
+                    </div>
+
+                    <div class="layui-inline layui-col-md12 layui-hide" id="deptTreeContext">
+                        <label class="layui-form-label" style="width: 120px">指定部门选择<span style="color: red;">*</span></label>
+                        <div class="layui-input-block" style="margin-left: 150px">
+                            <ul id="deptTree" class="ztree" style="background: #f2f7f8;"></ul>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="form-group-bottom text-center">
+        <button class="layui-btn" lay-filter="btnSubmit" lay-submit>&emsp;提交&emsp;</button>
+        <button type="reset" class="layui-btn layui-btn-primary" ew-event="closeDialog">&emsp;取消&emsp;</button>
+    </div>
+
+</form>
+
+@}