【JSON2WEB】11 基于 Amis 角色功能权限设置页面

原创

已于 2025-01-08 17:20:49 修改 · 1.6k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#amis-editor #前端框架 #JSON2WEB

于 2024-03-27 13:57:23 首次发布

【JSON2WEB】01 WEB管理信息系统架构设计

【JSON2WEB】02 JSON2WEB初步UI设计

【JSON2WEB】03 go的模板包html/template的使用

【JSON2WEB】04 amis低代码前端框架介绍

【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成

【JSON2WEB】06 JSON2WEB前端框架搭建

【JSON2WEB】07 Amis可视化设计器CRUD增删改查

【JSON2WEB】08 Amis的事件和校验

【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.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.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.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;

授权的功能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'"
          }
        }
      ]
    }
  }

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}"
        },

删除数据事件

去勾时执行。
在这里插入图片描述

{
   
   
          "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}"
        }

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
                          },
                          {

最低0.47元/天解锁文章