【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
},
{
"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 去勾收权
本文完
