案例-模仿授权菜单（穿梭框、模态框、page等）

yonyouhmm

本帖最后由 yonyouhmm 于 2023-6-7 11:31 编辑

一、案例说明

此案例模仿“授权”功能菜单，给用户分配角色。使用应用构建完成此功能。主要涵盖常问的知识点：模态框、page组件、穿梭框的使用。授权页面如下：

二、对象建模

两个业务对象：用户、角色。

1、角色为单实体

角色（roleDefine）（创建角色参照）

roleName	角色名	文本
roleCode	角色编码	文本

2、用户为主子结构（子表保存所选角色）
用户（主表：userDefine）

userName	用户名	文本
password	密码	文本
regDate	注册时间	日期

所选角色（用户子表：choosedRole）

new2	角色编码	文本
roleDefine	角色名称	单选引用（上面的角色）

三、页面建模

1、角色
构建单卡页面  维护几条数据。
穿梭框页面后续创建

创建角色参照

2、用户
构建主子页面  维护几条用户数据  只维护主表就行
依据子表：所选角色构建单卡带列表页面

四、授权页面开发
1、创建授权页面
依据用户构建列表页面，作为授权页面

2、调整授权页面
增加网格布局（两个单元格）每个单元格中增加多页签-一个子页签
第一个子页签将用户列表table拖入原来的行内按钮删除  增加“已选角色”按钮
第二个子页签下增加page组件  关联构建的  已选角色列表

3、前端脚本
授权页面中选择左侧用户列表中的数据右侧展示用户的已选角色

//有page组件的页面需要使用此钩子函数将page组件中的vm绑定到当前vm中
viewModel.on('beforeSubPageRender', ({ vm, viewmeta }) => {
//将page组件对应的已选角色列表的vm 放到当前vm
if (viewmeta.cBillNo == 'userDefine2List') {
viewModel.roleViewModel = vm;
//已选角色列表展示左侧点击选中的用户对应的子表已选角色数据
viewModel.roleViewModel.on('beforeSearch', function (args) {
let userId = viewModel.getCache('userdefine_userId');
args.isExtend = true;
args.params.condition.simpleVOs = [
{
field: 'userDefine_id',
op: 'eq',
value1: userId
}
];
});
}
});
//左侧用户列表选中后将选中的用户id放入缓存
viewModel.getGridModel().on('afterSelect', (args) => {
debugger;
let userId = viewModel.getGridModel().getRow(viewModel.getGridModel().getFocusedRowIndex()).id;
viewModel.setCache('userdefine_userId', userId);
//触发右侧已选角色列表的查询
viewModel.roleViewModel.getCache('FilterViewModel').get('search').fireEvent('click');
});
//分配角色
viewModel.get('button3vh').on('click', function (args) {
debugger;
let userId = viewModel.getGridModel().getRow(args.index).id;
// 打开模态框
let data = {
billtype: 'VoucherList', // 单据类型
billno: 'roleDefine2', // 单据号
params: {
mode: 'edit',
//传参
userId: userId
}
};
//打开一个单据，并在当前页面显示
cb.loader.runCommandLine('bill', data, viewModel);
});

复制代码

4、页面效果

五、模态框、穿梭框页面开发
1、创建页面
业务对象角色中构建单列表页面

2、页面设计

列表中原来的table删除
增加穿梭框组件打开备选区编辑器修改cDataSourceName："角色元数据uri"

选中备选区右侧属性点字段设置拖入字段点同步设置然后确定

增加底部栏-按钮栏-取消、确认两个按钮取消按钮绑定取消动作
左侧层级选择第二层页面模板打开编辑器增加"templateType": "modal"属性。保存后，右侧属性设置宽度为800
最终设计如下

3、前端脚本

//页面加载后根据params中的userId查询已分配的角色
let hasRoles = [];
let userId = viewModel.getParams().userId;
viewModel.on('afterMount', (args) => {
if (userId) {
let result = cb.rest.invokeFunction(
'AT166892061D00000A.backApi.getHasRoles',
{ userId: userId },
function (err, res) {},
viewModel,
{ async: false }
);
hasRoles = result.result.res;
//右侧已选区的数据查询后setDataSource
//roledefine_1742294964902035463_table10ib_rightContainer F12从yya中获取
viewModel.get('roledefine_1742294964902035463_table10ib_rightContainer').on('afterSetDataSource', function (data) {
debugger;
let gridModel = viewModel.get('roledefine_1742294964902035463_table10ib_rightContainer');
let b = viewModel.getCache('remark');
if (!b) {
let rightDataSource = [];
hasRoles.forEach((item) => {
rightDataSource.push({
id: item.roleDefine,//角色id
roleCode: item.roleDefine_roleCode,//角色编码
roleName: item.roleDefine_roleName,//角色名称
hasUserId: item.userDefine_id,//用户主表id
hasUserRoleId: item.id //用户的子表的id
});
});
viewModel.setCache('remark', 1);
gridModel.setState('dataSourceMode', 'local');
gridModel.setDataSource(rightDataSource);
} else {
viewModel.clearCache('remark');
}
});
}
});
//左侧备选区的数据去除已经分配的数据
viewModel.on('beforeSearch', (args) => {
if (hasRoles.length > 0) {
let hasRoleIds = hasRoles.map((item) => {
return item.roleDefine;
});
args.isExtend = true;
args.params.condition.simpleVOs = [
{
field: 'id',
op: 'nin',
value1: hasRoleIds
}
];
}
});
//点确认将已选的角色保存到对应用户的角色子表中
//这里保存的逻辑是将原来用户的已选角色子表清空然后从新插入？
//还是精准判断进行增加和删除？上面清空再新增子表的id会变化根据情况考虑
//这里直接全部删除然后从新增加
//yya看下左右穿梭时 gridModel中dataSource和rows中数据的区别
viewModel.get('button47ac').on('click', function (args) {
let rows = viewModel.get('roledefine_1742294964902035463_table10ib_rightContainer').getRows();
//拼凑新增的数据
let insertData = [];
rows.forEach((item)=>{
insertData.push({
userDefine_id: userId,
roleDefine: item.id,
new2:item.roleCode
});
})
let result = cb.rest.invokeFunction("AT166892061D00000A.backApi.updateUserRoles", {insertData:insertData,userId:userId},
function(err, res){} ,viewModel,{async:false});
//刷新父页面关闭模态框
//viewModel.getCache('parentViewModel').execute('refresh');
//只触发右侧角色的从新查询
viewModel.getCache('parentViewModel').roleViewModel.getCache('FilterViewModel').get('search').fireEvent('click');
//关闭模态框
**.**munication({type:'modal',payload:{data:false}});
});

复制代码

4、后端脚本

//getHasRoles
let AbstractAPIHandler = require('AbstractAPIHandler');
class MyAPIHandler extends AbstractAPIHandler {
execute(request){
let userId = request.userId;
let sql = "select *, roleDefine.* from AT166892061D00000A.AT166892061D00000A.choosedRole where userDefine_id='"+userId+"'";
var res = ObjectStore.queryByYonQL(sql);
return {res};
}
}
exports({"entryPoint":MyAPIHandler});

复制代码

//updateUserRoles
let AbstractAPIHandler = require('AbstractAPIHandler');
class MyAPIHandler extends AbstractAPIHandler {
execute(request){
let insertData = request.insertData;
let userId = request.userId;
//清空子表
var object = {userDefine_id:userId};
var delRes = ObjectStore.deleteByMap("AT166892061D00000A.AT166892061D00000A.choosedRole",object,"userDefine2");
//新增子表
var insertRes = ObjectStore.insertBatch("AT166892061D00000A.AT166892061D00000A.choosedRole",insertData,"userDefine2");
return {delRes:delRes,insertRes:insertRes};
}
}
exports({"entryPoint":MyAPIHandler});

复制代码

五、演示界面
点击分配角色弹出模态框穿梭框左侧的数据去除已选角色穿梭框右侧的数据显示已选角色

穿梭框中数据修改后点击确定授权页面右侧page数据更新

chyd④④⑤⑤②⑦⑧⑤②

赞一个

BIP138725

老师您好，这个案例，查询死循环了。【//右侧已选区的数据查询后setDataSource】，这一块的处理，在afterSetDataSource里面，处理setDataSource，页面死循环。请问这块如何处理的呢？

yonyouhmm

BIP138725 · 2023-12-8 17:20
老师您好，这个案例，查询死循环了。【//右侧已选区的数据查询后setDataSource】，这一块的处理，在afterSetDataSource里面，处理setDataSource，页面死循环。请问这块如何处理的呢？ ...

aftersetdatasource方法会死循环代码中是通过setCache解决的你可以调试一下

BIP138725 · 回复于2023-12-10 18:07:55

yonyouhmm · 2023-12-8 20:53aftersetdatasource方法会死循环代码中是通过setCache解决的你可以调试一下

多谢老师。我之前调试了，不知道为啥还是死循环，今天又调了一下，莫名就好了。

BIP632730

感谢分享