【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_ynfrom 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},{"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": {}
}

3 实操演练

Step 1 页面加载

功能列表不拉取数据。

Step 2 点击角色行

Step 3 勾选授权

Step 4 去勾收权

---

本文完