-
【JSON2WEB】11 基于 Amis 角色功能权限设置页面
【JSON2WEB】03 go的模板包html/template的使用
【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成
【JSON2WEB】07 Amis可视化设计器CRUD增删改查
【JSON2WEB】09 Amis-editor的代码移植到json2web
【JSON2WEB】10 基于 Amis 做个登录页面login.html
1 角色功能权限设置设计
页面分2栏，左边角色，右边为角色功能权限。角色授权保存在数据库表中。
1.1 页面布局
角色 功能 角色列表 功能列表 1.2 角色表
-- Create table create table S_ROLE ( p_id VARCHAR2(17) not null, s_name VARCHAR2(52), s_note VARCHAR2(52), time_stamp TIMESTAMP(6) default CURRENT_TIMESTAMP )- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
1.3 功能表
-- Create table create table S_MENU ( p_id VARCHAR2(4) not null, s_name VARCHAR2(63), s_ename VARCHAR2(63), s_winp VARCHAR2(63), s_note VARCHAR2(63), s_parm VARCHAR2(63) )- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
1.4 角色功能权限关系表
-- Create table create table S_ROLE_MENU ( pf_role VARCHAR2(17) not null, pf_menu VARCHAR2(17) not null, time_stamp TIMESTAMP(6) default CURRENT_TIMESTAMP )- 1
- 2
- 3
- 4
- 5
- 6
- 7
1.5 角色功能视图
用于功能列表显示与操作。
create or replace view role_menu_v -- 角色功能视图 as select m.p_id as m_id,m.s_name ,s.pf_role,r.p_id as r_id, decode(length(s.pf_role),4,1,0) as b_yn from s_menu m cross join s_role r --先做一个角色与功能的笛卡尔交叉，再连接角色功能表 left join s_role_menu s on s.pf_menu = m.p_id and s.pf_role = r.p_id order by r.p_id,m.p_id;- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
授权的功能b_yn = 1
2 页面布局与设计
布局容器用分栏，角色及功能权限用2个增删改查crud。
2.1 角色crud增加行点击事件
行点击时刷新角色功能的数据。
"onEvent": { "rowClick": { "weight": 0, "actions": [ { "componentId": "u:1f6f2d0609fc", "ignoreError": false, "actionType": "reload", "dataMergeMode": "override", "data": { "where": "r_id='$event.data.item.P_ID'" } } ] } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
Data为我的后台查询条件，就是url上query条件。
2.2 勾选事件
勾选列定义2个值变化事件，勾选插入数据,去勾删除数据。
插入数据事件
勾选时执行。
"actions": [ { "ignoreError": false, "outputVar": "responseResult", "actionType": "ajax", "options": {}, "api": { "url": "http://127.0.0.1:5217/rest/s_role_menu/", "method": "post", "requestAdaptor": "", "adaptor": "", "messages": {}, "sendOn": "", "data": { "pf_role": "${R_ID}", "pf_menu": "${M_ID}" } }, "expression": "${event.data.value === 1}", "stopPropagation": "${event.data.value===0}" },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
删除数据事件
去勾时执行。
{ "ignoreError": false, "outputVar": "responseResult", "actionType": "ajax", "options": {}, "api": { "url": "http://127.0.0.1:5217/rest/s_role_menu/?where=pf_role='${R_ID}' and pf_menu='${M_ID}'", "method": "delete", "requestAdaptor": "", "adaptor": "", "messages": {} }, "expression": "${event.data.value===0}", "stopPropagation": "${event.data.value===1}" }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
2.2 角色功能crud设置
接口初始化是不拉取数据。
2.3 页面全部代码
{ "type": "page", "title": "角色功能权限设置", "body": [ { "type": "grid", "columns": [ { "body": [ { "id": "u:091b9d57f777", "type": "crud", "mode": "table", "syncLocation": false, "primaryField": "P_ID", "api": { "url": "http://127.0.0.1:5217/rest/s_role", "method": "get" }, "headerToolbar": [ { "type": "button", "id": "u:16551379d280", "label": "新增", "actionType": "drawer", "level": "primary", "editorSetting": { "behavior": "create" }, "drawer": { "title": "新增", "body": [ { "type": "form", "api": { "method": "post", "url": "http://127.0.0.1:5217/rest/s_role", "requestAdaptor": "", "adaptor": "", "messages": {} }, "body": [ { "type": "input-text", "name": "p_id", "label": "P_ID", "id": "u:4d1b8b17dd50", "required": true }, { "type": "input-text", "name": "s_name", "label": "角色名称", "id": "u:8cc7cb12757f", "required": true }, { "type": "input-text", "name": "s_note", "label": "备注", "id": "u:2b9c33a07acf" } ], "id": "u:f58f36c84f4c", "actions": [ { "type": "submit", "label": "提交", "primary": true } ], "feat": "Insert", "dsType": "api" } ], "id": "u:747ffedb9a7c", "actions": [ { "type": "button", "actionType": "cancel", "label": "取消", "id": "u:ceb03306d65f" }, { "type": "button", "actionType": "confirm", "label": "确定", "primary": true, "id": "u:3d9c4d86cfb2" } ] }, "icon": "fa fa-plus" }, { "type": "export-excel", "id": "u:5d48d559aa25" }, { "type": "bulk-actions" } ], "columns": [ { "type": "text", "name": "P_ID", "id": "u:bbe6028ae0c5", "label": "角色ID", "searchable": true, "visible": true, "placeholder": "-" }, { "type": "text", "name": "S_NAME", "id": "u:12be864daeab", "placeholder": "-", "label": "名称", "searchable": true, "toggled": true, "fixed": "", "className": "" }, { "type": "datetime", "name": "TIME_STAMP", "id": "u:6bace394776e", "label": "更新时间", "format": "YYYY-MM-DD HH:mm:ss" }, { "type": "text", "name": "S_NOTE", "id": "u:db13008a4821", "label": "备注" }, { "type": "operation", "label": "操作", "buttons": [ { "label": "编辑", "type": "button", "actionType": "drawer", "level": "link", "editorSetting": { "behavior": "update" }, "id": "u:2d2b520123cf", "drawer": { "title": "编辑", "body": [ { "type": "form", "api": { "method": "put", "url": "http://127.0.0.1:5217/rest/s_role/?where=p_id='${P_ID}'", "requestAdaptor": "", "adaptor": "", "messages": {} }, "body": [ { "name": "P_ID", "label": "P_ID", "type": "input-text", "id": "u:2593d30c1ccb", "required": true }, { "label": "角色名称", "name": "S_NAME", "type": "input-text", "id": "u:36fb4cfb08d6", "showCounter": false, "required": true }, { "label": "备注", "name": "S_NOTE", "type": "input-text", "id": "u:d154d931e0a3" } ], "id": "u:987f23c51645", "actions": [ { "type": "submit", "label": "提交", "primary": true } ], "feat": "Insert", "dsType": "api" } ], "id": "u:7c6e61a902ce", "actions": [ { "type": "button", "actionType": "cancel", "label": "取消", "id": "u:780ad561efc1" }, { "type": "button", "actionType": "confirm", "label": "确定", "primary": true, "id": "u:45527a149fd6" } ] } }, { "label": "查看", "type": "button", "actionType": "drawer", "level": "link", "editorSetting": { "behavior": "view" }, "id": "u:e2047bc65d6b", "drawer": { "title": "查看详情", "body": [ { "type": "form", "api": "xxx/update", "body": [ { "name": "P_ID", "label": "P_ID", "type": "static", "id": "u:08156f086042", "quickEdit": false, "popOver": false, "copyable": false }, { "label": "角色名称", "name": "S_NAME", "type": "static", "id": "u:487232bc451c", "quickEdit": false, "popOver": false, "copyable": false }, { "label": "更新时间", "name": "TIME_STAMP", "type": "static-datetime", "id": "u:aba51eac1e1c", "quickEdit": false, "popOver": false, "copyable": false, "format": "YYYY-MM-DD HH:mm:ss" }, { "label": "备注", "name": "S_NOTE", "type": "static", "id": "u:60c73035a649", "quickEdit": false, "popOver": false, "copyable": false } ], "id": "u:929916bb02e0", "actions": [ { "type": "submit", "label": "提交", "primary": true } ], "feat": "Insert" } ], "id": "u:34c165044747", "actions": [ { "type": "button", "actionType": "cancel", "label": "取消", "id": "u:62278f468936" }, { "type": "button", "actionType": "confirm", "label": "确定", "primary": true, "id": "u:38c71e71e647" } ] } }, { "type": "button", "label": "删除", "actionType": "ajax", "level": "link", "className": "text-danger", "confirmText": "确定要删除？", "api": { "method": "delete", "url": "http://127.0.0.1:5217/rest/s_role/?where=p_id='${P_ID}'" }, "editorSetting": { "behavior": "delete" }, "id": "u:c08fb59a9328", "onEvent": { "click": { "weight": 0, "actions": [] } } } ], "id": "u:ea0dc035e0ec" } ], "loadDataOnce": true, "showHeader": true, "bulkActions": [], "itemActions": [], "perPageAvailable": [ 10 ], "messages": {}, "autoGenerateFilter": { "columnsNum": 2, "showBtnToolbar": true }, "matchFunc": "", "title": "", "showFooter": true, "visible": true, "dsType": "api", "editorSetting": { "mock": { "enable": true, "maxDisplayRows": 5 } }, "onEvent": { "rowClick": { "weight": 0, "actions": [ { "componentId": "u:1f6f2d0609fc", "ignoreError": false, "actionType": "reload", "dataMergeMode": "override", "data": { "where": "r_id='$event.data.item.P_ID'" } } ] } } } ], "id": "u:18b68e993a8d", "themeCss": { "baseControlClassName": { "border:default": { "top-border-style": "var(--borders-style-2)", "left-border-style": "var(--borders-style-2)", "right-border-style": "var(--borders-style-2)", "bottom-border-style": "var(--borders-style-2)", "right-border-width": "var(--borders-width-3)", "top-border-width": "var(--borders-width-3)", "left-border-width": "var(--borders-width-3)", "bottom-border-width": "var(--borders-width-3)" }, "padding-and-margin:default": { "marginTop": "var(--sizes-size-5)", "marginRight": "var(--sizes-size-5)", "marginBottom": "var(--sizes-size-5)", "marginLeft": "var(--sizes-size-5)", "paddingTop": "var(--sizes-size-5)", "paddingRight": "var(--sizes-size-5)", "paddingBottom": "var(--sizes-size-5)", "paddingLeft": "var(--sizes-size-5)" } } }, "md": 6 }, { "id": "u:d0513919f0fb", "md": 6, "body": [ { "id": "u:1f6f2d0609fc", "type": "crud", "mode": "table2", "dsType": "api", "syncLocation": true, "primaryField": "pf_role,pf_menu", "loadType": "pagination", "api": { "url": "http://127.0.0.1:5217/rest/role_menu_v/", "method": "get", "requestAdaptor": "", "adaptor": "", "messages": {} }, "headerToolbar": [ { "type": "flex", "direction": "row", "justify": "flex-start", "alignItems": "stretch", "style": { "position": "static" }, "items": [ { "type": "container", "align": "left", "behavior": [ "Insert", "BulkEdit", "BulkDelete" ], "body": [], "wrapperBody": false, "style": { "flexGrow": 1, "flex": "1 1 auto", "position": "static", "display": "flex", "flexBasis": "auto", "flexDirection": "row", "flexWrap": "nowrap", "alignItems": "stretch", "justifyContent": "flex-start" }, "id": "u:bef09c369eab" }, { "type": "container", "align": "right", "behavior": [ "FuzzyQuery" ], "body": [], "wrapperBody": false, "style": { "flexGrow": 1, "flex": "1 1 auto", "position": "static", "display": "flex", "flexBasis": "auto", "flexDirection": "row", "flexWrap": "nowrap", "alignItems": "stretch", "justifyContent": "flex-end" }, "id": "u:b86c79951137" } ], "id": "u:2259c57591f9" } ], "footerToolbar": [ { "type": "flex", "direction": "row", "justify": "flex-start", "alignItems": "stretch", "style": { "position": "static" }, "items": [ { "type": "container", "align": "left", "body": [], "wrapperBody": false, "style": { "flexGrow": 1, "flex": "1 1 auto", "position": "static", "display": "flex", "flexBasis": "auto", "flexDirection": "row", "flexWrap": "nowrap", "alignItems": "stretch", "justifyContent": "flex-start" }, "id": "u:950df6025af1" }, { "type": "container", "align": "right", "body": [ { "type": "pagination", "behavior": "Pagination", "layout": [ "total", "perPage", "pager" ], "perPage": 999, "perPageAvailable": [ 10, 20, 50, 100 ], "align": "right", "id": "u:cf75f0430847", "size": "" } ], "wrapperBody": false, "style": { "flexGrow": 1, "flex": "1 1 auto", "position": "static", "display": "flex", "flexBasis": "auto", "flexDirection": "row", "flexWrap": "nowrap", "alignItems": "stretch", "justifyContent": "flex-end" }, "id": "u:cbf1a9ad79d2" } ], "id": "u:3052aef717a9" } ], "columns": [ { "type": "checkbox", "title": "勾选授权", "name": "B_YN", "id": "u:26ec6ff796a9", "placeholder": "-", "align": "center", "trueValue": 1, "falseValue": 0, "onEvent": { "change": { "weight": 0, "actions": [ { "ignoreError": false, "outputVar": "responseResult", "actionType": "ajax", "options": {}, "api": { "url": "http://127.0.0.1:5217/rest/s_role_menu/", "method": "post", "requestAdaptor": "", "adaptor": "", "messages": {}, "sendOn": "", "data": { "pf_role": "${R_ID}", "pf_menu": "${M_ID}" } }, "expression": "${event.data.value === 1}", "stopPropagation": "${event.data.value===0}" }, { "ignoreError": false, "outputVar": "responseResult", "actionType": "ajax", "options": {}, "api": { "url": "http://127.0.0.1:5217/rest/s_role_menu/?where=pf_role='${R_ID}' and pf_menu='${M_ID}'", "method": "delete", "requestAdaptor": "", "adaptor": "", "messages": {} }, "expression": "${event.data.value===0}", "stopPropagation": "${event.data.value===1}" } ] } } }, { "type": "tpl", "title": "功能ID", "name": "M_ID", "id": "u:8884f7cfc750" }, { "type": "tpl", "title": "功能名称", "name": "S_NAME", "id": "u:cea732fa69f4" }, { "type": "tpl", "title": "授权", "name": "PF_ROLE", "id": "u:86372060e12d" }, { "type": "tpl", "title": "角色ID", "name": "R_ID", "id": "u:b29521a345f6" } ], "editorSetting": { "mock": { "enable": true, "maxDisplayRows": 5 } }, "placeholder": "暂无数据", "loadDataOnce": true, "perPage": 999, "showHeader": true, "lineHeight": "", "keepItemSelectionOnPageChange": false, "onEvent": {}, "matchFunc": "", "messages": {}, "initFetch": false, "showBadge": false } ] } ], "id": "u:35740fa147ea", "align": "left", "themeCss": { "baseControlClassName": { "border:default": { "top-border-style": "var(--borders-style-2)", "left-border-style": "var(--borders-style-2)", "right-border-style": "var(--borders-style-2)", "bottom-border-style": "var(--borders-style-2)", "top-border-width": "var(--borders-width-1)", "left-border-width": "var(--borders-width-1)", "right-border-width": "var(--borders-width-1)", "bottom-border-width": "var(--borders-width-1)" } } }, "gap": "base", "valign": "top" } ], "id": "u:6cd046ec534c", "asideResizor": false, "pullRefresh": { "disabled": true }, "regions": [ "body", "header" ], "onEvent": {} }- 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
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
- 445
- 446
- 447
- 448
- 449
- 450
- 451
- 452
- 453
- 454
- 455
- 456
- 457
- 458
- 459
- 460
- 461
- 462
- 463
- 464
- 465
- 466
- 467
- 468
- 469
- 470
- 471
- 472
- 473
- 474
- 475
- 476
- 477
- 478
- 479
- 480
- 481
- 482
- 483
- 484
- 485
- 486
- 487
- 488
- 489
- 490
- 491
- 492
- 493
- 494
- 495
- 496
- 497
- 498
- 499
- 500
- 501
- 502
- 503
- 504
- 505
- 506
- 507
- 508
- 509
- 510
- 511
- 512
- 513
- 514
- 515
- 516
- 517
- 518
- 519
- 520
- 521
- 522
- 523
- 524
- 525
- 526
- 527
- 528
- 529
- 530
- 531
- 532
- 533
- 534
- 535
- 536
- 537
- 538
- 539
- 540
- 541
- 542
- 543
- 544
- 545
- 546
- 547
- 548
- 549
- 550
- 551
- 552
- 553
- 554
- 555
- 556
- 557
- 558
- 559
- 560
- 561
- 562
- 563
- 564
- 565
- 566
- 567
- 568
- 569
- 570
- 571
- 572
- 573
- 574
- 575
- 576
- 577
- 578
- 579
- 580
- 581
- 582
- 583
- 584
- 585
- 586
- 587
- 588
- 589
- 590
- 591
- 592
- 593
- 594
- 595
- 596
- 597
- 598
- 599
- 600
- 601
- 602
- 603
- 604
- 605
- 606
- 607
- 608
- 609
- 610
- 611
- 612
- 613
- 614
- 615
- 616
- 617
- 618
- 619
- 620
- 621
- 622
- 623
- 624
- 625
- 626
- 627
- 628
- 629
- 630
- 631
- 632
- 633
- 634
- 635
- 636
- 637
- 638
- 639
- 640
- 641
- 642
- 643
- 644
- 645
- 646
- 647
- 648
- 649
- 650
- 651
- 652
- 653
- 654
- 655
- 656
- 657
- 658
- 659
- 660
- 661
- 662
- 663
- 664
- 665
- 666
- 667
- 668
3 实操演练
Step 1 页面加载
功能列表不拉取数据。Step 2 点击角色行
Step 3 勾选授权
Step 4 去勾收权
本文完
-
相关阅读:
百望云亮相服贸会 重磅发布业财税融Copilot
轻松掌握辗转相除法（原理＋俩道简单编程题详解）
首版20年后开源反病毒引擎 ClamAV 1.0 发布
23000 个恶意流量代理的 IPStorm 僵尸网络被拆除
Leetcode刷题75. 颜色分类
基于工业级4G5G路由器大型设备远程无线监控方案
【算法笔记】记一道力扣周赛：知道秘密的人
共码未来 | 2022 Google 谷歌开发者大会参会现场记
坚持每天写代码，真的能提高编程水平吗？
docker部署vue router history HTML5 模式
- 原文地址：https://blog.csdn.net/sufuq/article/details/137071378
