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

2021-01-09 19:23:34 +08:00 · 2021-01-09 19:23:34 +08:00 · 193d58bf8c
parent 0bec97ae72
commit 193d58bf8c
6 changed files with 185 additions and 22 deletions
--- a/src/main/java/cn/stylefeng/guns/modular/role/RoleViewController.java
+++ b/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";
+    }
+
 }
--- a/src/main/webapp/assets/expand/module/ztree/ztree-object.js
+++ b/src/main/webapp/assets/expand/module/ztree/ztree-object.js
@ -3,28 +3,28 @@ layui.define(['jquery', 'HttpRequest'], function (exports) {
    var $ = layui.$;
    var HttpRequest = layui.HttpRequest;

-    var $ZTree = function(id, url) {
+    var $ZTree = function (id, url) {
        this.id = id;
        this.url = url;
        this.onClick = null;
        this.settings = null;
-        this.ondblclick=null;
+        this.ondblclick = null;
    };

    $ZTree.prototype = {
        /**
         * 初始化ztree的设置
         */
-        initSetting : function() {
+        initSetting: function () {
            var settings = {
-                view : {
-                    dblClickExpand : true,
-                    selectedMulti : false
+                view: {
+                    dblClickExpand: true,
+                    selectedMulti: false
                },
-                data : {simpleData : {enable : true}},
-                callback : {
-                    onClick : this.onClick,
-                    onDblClick:this.ondblclick
+                data: {simpleData: {enable: true}},
+                callback: {
+                    onClick: this.onClick,
+                    onDblClick: this.ondblclick
                }
            };
            return settings;
@ -33,18 +33,18 @@ layui.define(['jquery', 'HttpRequest'], function (exports) {
        /**
         * 手动设置ztree的设置
         */
-        setSettings : function(val) {
+        setSettings: function (val) {
            this.settings = val;
        },

        /**
         * 初始化ztree
         */
-        init : function() {
+        init: function () {
            var zNodeSeting = null;
-            if(this.settings != null){
+            if (this.settings != null) {
                zNodeSeting = this.settings;
-            }else{
+            } else {
                zNodeSeting = this.initSetting();
            }
            var zNodes = this.loadNodes();
@ -54,25 +54,25 @@ layui.define(['jquery', 'HttpRequest'], function (exports) {
        /**
         * 绑定onclick事件
         */
-        bindOnClick : function(func) {
+        bindOnClick: function (func) {
            this.onClick = func;
        },
        /**
         * 绑定双击事件
         */
-        bindOnDblClick : function(func) {
-            this.ondblclick=func;
+        bindOnDblClick: function (func) {
+            this.ondblclick = func;
        },


        /**
         * 加载节点
         */
-        loadNodes : function() {
+        loadNodes: function () {
            var zNodes = null;
-            var request = new HttpRequest(Feng.ctxPath + this.url, 'get', function(data) {
+            var request = new HttpRequest(Feng.ctxPath + this.url, 'get', function (data) {
                zNodes = data;
-            }, function(data) {
+            }, function (data) {
                Feng.error("加载ztree信息失败!");
            });
            request.start();
@ -82,11 +82,20 @@ layui.define(['jquery', 'HttpRequest'], function (exports) {
        /**
         * 获取选中的值
         */
-        getSelectedVal : function(){
+        getSelectedVal: function () {
            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);
--- a/src/main/webapp/assets/modular/auth/role/role.js
+++ b/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') {
--- a/src/main/webapp/assets/modular/auth/role/role_edit_data_scope.js
+++ b/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);
+    });
+
+});
--- a/src/main/webapp/pages/modular/auth/role/role.html
+++ b/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>
    @}
--- a/src/main/webapp/pages/modular/auth/role/role_edit_data_scope.html
+++ b/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>
+
+@}