zhaoxiaoqiang1
2026-01-04 f1d30d03186c79ca2cbcfe60d6d2ce7d73fba97b
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
<div class="clear-float height_100p">
    <div class="float_l left_tree_wrap">
        <ul id="role_tree_wrap"></ul>
    </div>
    <div class="float_l folding_partition_line">
        <img src="image/hide_left_tree.png" width="19" class="operation_left_tree_img">
    </div>
    <div class="float_l form_and_table_wrap">
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">角色编号:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="id" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">角色名称:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="roleName" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">状态:</label>
                    <div class="layui-input-inline">
                        <select name="state">
                            <option value="">请选择</option>
                            <option value="0">启用</option>
                            <option value="1">停用</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    <button class="layui-btn" lay-submit lay-filter="role_search" id="role_mgt_trigger_search_btn">搜索</button>
                </div>
            </div>
        </form>
        <button style="margin-bottom: 20px;" class="layui-btn page_add_btn" id="add_role"><i class="layui-icon">&#xe61f;</i>新增角色</button>
        <table id="role_management_table" lay-filter="role_management_table"></table>
    </div>
</div>
 
<script>
    window.g_role_parentCode = "";
 
    function role_tree_render(){
        $("#role_tree_wrap").empty();
        layui.use('tree', function(){
            $.ajax({
                type : 'POST',
                url : base_url+"/sso-manage/role/getRoleTree",
                dataType : 'json',
                contentType: "application/json",
                success : function(res){
 
                    if(res.resultCode == 1){
                        var tree_data_str = JSON.stringify(res.data.list).replace(/roleName/g, "name");
                        var tree_data = JSON.parse(tree_data_str);
                        layui.tree({
                            elem: '#role_tree_wrap' //传入元素选择器
                            ,nodes: tree_data
                            ,click: function(node){
                                $("#role_tree_wrap a").click(function () {
                                    $("#role_tree_wrap a").removeClass("text_red");
                                    $(this).addClass("text_red");
                                });
                                // console.log('节点数据',node) //node即为当前点击的节点数据
                                window.g_role_parentCode = node.roleCode;
                                $("#role_mgt_trigger_search_btn").trigger("click");
                            }
                        });
                    }else{
                        layer.msg(res.errorDesc);
                    }
                }
            });
        });
    }
 
 
    role_tree_render();
</script>
 
 
<script>
    layui.use(['table', 'element', 'form'], function () {
        var index = layer.load(0, {time: 5 * 1000});
        var table = layui.table;
        var form = layui.form;
        //table渲染
        var role_mgt_table = table.render({
            elem: '#role_management_table'
            , id: 'role_management_table'
            , url: base_url+'/sso-manage/role/list' //数据接口
            , method: 'post'
            ,contentType: 'application/json'
            ,request: {
                pageName: 'pageNum' //页码的参数名称,默认:page
                ,limitName: 'pageSize' //每页数据量的参数名,默认:limit
            }
            , page: true //开启分页
            , limit: 10
            , done: function (res, curr, count) {
                var element = layui.element;
                element.init();
                form.render();
                layer.close(index);
 
            }
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.resultCode, //解析接口状态
                    "msg": res.errorDesc, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                };
            }
            , response: {
                statusName: 'code' //数据状态的字段名称,默认:code
                , statusCode: '1' //成功的状态码,默认:0
                , msgName: 'msg' //状态信息的字段名称,默认:msg
                , countName: 'count' //数据总数的字段名称,默认:count
                , dataName: 'data' //数据列表的字段名称,默认:data
            }
            , cols: [[
                {type: 'numbers', title: '序号', width: 60}
                ,{title: '角色编号',templet: '#role_view_tpl',width:100}
                , {field: 'roleName', title: '角色名称',width:150}
                , {field: 'roleDesc', title: '角色描述',minWidth:150}
                , {title: '角色状态',templet:'#role_state_tpl',width:130}
                , {title: '角色用户',templet:'#role_user_tpl',width:100}
                , {title: '角色管理', templet: '#role_mgt_operation_tpl',width:220}
            ]]
        });
 
        // 搜索
        form.on('submit(role_search)',function (data) {
            var index = layer.load(0,{time:5*1000});
            data.field.parentCode = window.g_role_parentCode;
            role_mgt_table.reload({
                where:{params:data.field},
                done: function (res, curr, count) {
                    layer.close(index);
                }
            });
            return false;
        });
 
        // 新增
        $("#add_role").click(function () {
            $.get('views/jurisdiction/role_add_modal.html', function(str){
                window.role_add_modal_index = layer.open({
                    type: 1
                    ,title :'新增角色'
                    ,content: str //注意,如果str是object,那么需要字符拼接。
                    ,area: '700px'
                });
            });
        });
 
        table.on('tool(role_management_table)',function (obj) {
            var data = obj.data;
            var event = obj.event;
            if(event == 'enable'){
                // 启用
                $.ajax({
                    type : 'POST',
                    url : base_url+"/sso-manage/role/disable",
                    dataType : 'json',
                    contentType: "application/json",
                    data:JSON.stringify({
                        params:{
                            "id":data.id,
                            "state":0
                        }
                    }),
                    success : function(res){
 
                        if(res.resultCode == 1){
                            layer.msg("状态启用成功");
                            $("#role_mgt_trigger_search_btn").trigger("click");
                        }else{
                            layer.msg(res.errorDesc);
                        }
                    }
                });
            }else if(event == 'discontinue_use'){
                // 停用
                $.ajax({
                    type : 'POST',
                    url : base_url+"/sso-manage/role/disable",
                    dataType : 'json',
                    contentType: "application/json",
                    data:JSON.stringify({
                        params:{
                            "id":data.id,
                            "state":1
                        }
                    }),
                    success : function(res){
 
                        if(res.resultCode == 1){
                            layer.msg("状态停用成功");
                            $("#role_mgt_trigger_search_btn").trigger("click");
                        }else{
                            layer.msg(res.errorDesc);
                        }
                    }
                });
            }else if(event == 'role_del'){
                // 删除
                $.ajax({
                    type : 'POST',
                    url : base_url+"/sso-manage/role/delete",
                    dataType : 'json',
                    contentType: "application/json",
                    data:JSON.stringify({
                        params:{
                            "id":data.id
                        }
                    }),
                    success : function(res){
 
                        if(res.resultCode == 1){
                            layer.msg("角色删除成功");
                            $("#role_mgt_trigger_search_btn").trigger("click");
                        }else{
                            layer.msg(res.errorDesc);
                        }
                    }
                });
            }else if(event == 'edit'){
                // 修改
                window._role_edit_id = data.id;
                window._role_edit_data = data;
                $.get('views/jurisdiction/role_edit_modal.html', function(str){
                    window.role_edit_modal_index = layer.open({
                        type: 1
                        ,title :'角色修改'
                        ,content: str //注意,如果str是object,那么需要字符拼接。
                        ,area: '700px'
                    });
                });
            }else if(event == 'role_view'){
                // 查看
                window._role_view_data = data;
                $.get('views/jurisdiction/role_view_modal.html', function(str){
                    window.role_view_modal_index = layer.open({
                        type: 1
                        ,title :'角色详情'
                        ,content: str //注意,如果str是object,那么需要字符拼接。
                        ,area: '700px'
                    });
                });
            }else if(event == 'role_authorization'){
                // 角色授权
                window._role_authorization_data = data.id;
                $.get('views/jurisdiction/role_authorization_modal.html', function(str){
                    window.role_authorization_modal_index = layer.open({
                        type: 1
                        ,title :data.roleName+"("+data.id+")"+"角色详情"
                        ,content: str //注意,如果str是object,那么需要字符拼接。
                        ,maxmin: false
                        ,area: ['900px','90%']
                    });
                });
            }else if(event == 'user_view_role_list'){
                // 角色用户列表弹窗
                window._role_user_view_id = data.id;
                $.get('views/jurisdiction/role_user_view_modal.html', function(str){
                    window.role_user_view_modal_index = layer.open({
                        type: 1
                        ,title :'角色用户列表'
                        ,content: str //注意,如果str是object,那么需要字符拼接。
                        ,maxmin: true
                        ,area: ['700px','60%']
                    });
                });
            }
        });
 
    });
</script>
 
<script type="text/html" id="role_view_tpl">
    <span class="tool_event_textbtn" lay-event="role_view">{{d.id}}</span>
</script>
 
<script type="text/html" id="role_getParentRole_select_tpl">
        {{each list value index}}
                <option value="{{value.roleCode}}">{{value.roleName}}</option>
        {{/each}}
</script>
 
 
<script type="text/html" id="role_state_tpl">
    {{#  if(d.state == 0){ }}
    启用
    {{# } else if(d.state == 1){ }}
    停用
    {{#  } }}
</script>
 
<script type="text/html" id="role_mgt_operation_tpl">
    {{#  if(d.state == 0){ }}
        <a class="tool_event_textbtn" lay-event="discontinue_use">停用</a>
    {{# } else if(d.state == 1){ }}
        <a class="tool_event_textbtn" lay-event="enable">启用</a>
    {{#  } }}
    <a class="tool_event_textbtn" lay-event="edit">修改</a>
    <a class="tool_event_textbtn" lay-event="role_authorization">授权</a>
    <a class="tool_event_textbtn" lay-event="role_del">删除</a>
</script>
 
<script type="text/html" id="role_user_tpl">
    <a class="tool_event_textbtn" lay-event="user_view_role_list">用户列表</a>
</script>