ABP开发框架前后端开发系列---（11）菜单的动态管理

在前面随笔《abp开发框架前后端开发系列---（9）abp框架的权限控制管理》中介绍了基于abp框架服务构建的winform客户端，客户端通过web api调用的方式进行获取数据，从而实现了对组织机构、角色、用户、权限等管理，其中没有涉及菜单部分，本篇随笔介绍在abp框架中实现菜单的管理，菜单是作为winform或者web动态构建界面的一个重要元素，同时也是作为角色权限控制的部分资源。

 1、菜单的列表展示和管理

一般情况下，菜单的树形列表的显示可以分为多个节点，节点可以收缩也可以展开，当然节点是有不同的图标的了。这样就可以把很多功能点整合在一个树列表里面了，树的节点也可以分为很多级别，很多层次

  

如果我们想按照业务的范畴来区分，也可以分为多个模块展示，类似选项卡的方式，一个模块的功能菜单列表集合在一起展示，如下所示。

上面是我winform开发框架和混合式开发框架的winform界面中呈现菜单的界面，对于abp开发框架来说，我们也只是获取数据方式不同，业务范畴的管理也没有什么不一样，我们依旧可以在服务器端配置好系统的菜单记录，然后基于abp的winform界面，同样管理这些内容即可。

下面是abp框架中对于菜单资源管理的列表界面。

左边我们通过treelist列表进行展示，右侧通过分页控件列表的方式进行展示，还是比较标准的winform界面展示。

编辑或者创建菜单的界面如下所示。

菜单对于角色来说，应该是一种界面资源，可以通过配置进行管理对应角色用户的菜单。

 

2、菜单模块的实现逻辑

为了开发菜单模块，我们需要先定义好菜单的存储数据表，定义菜单表和角色菜单的中间关系表如下所示。

这个菜单模块定位为web和winform都通用的，因此菜单表中增加多了一些字段信息。

在数据库里增加这两个表后，就可以使用代码生成工具进行框架代码的生成和winform界面代码的生成了。

生成框架后，对应的应用服务层类代码如下所示。

这个生成的类，默认具有基类的增删改查分页等接口方法，同时我们也会生成对应的web api caller层的类代码，代码如下所示。

winform界面生成标准界面后进行布局的一定调整，左侧增加treelist控件，设计界面如下所示。

获取列表数据的函数定义在getdata函数里面，函数代码如下所示。

        /// <summary>
        /// 获取数据
        /// </summary>
        /// <returns></returns>
        private async task<ipagedresult<menudto>> getdata()
        {
            menupageddto pagerdto = null;
            if (advancecondition != null)
            {
                pagerdto = new menupageddto(this.wingridviewpager1.pagerinfo);
                pagerdto = dlg.getpagedresult(pagerdto);
            }
            else if(!isnormalsearch && this.tree.focusednode != null)
            {
                //构建分页的条件和查询条件
                pagerdto = new menupageddto(this.wingridviewpager1.pagerinfo)
                {
                    pid = string.concat(this.tree.focusednode.getvalue(id_fieldname))
                };
            }
            else
            {
                //构建分页的条件和查询条件
                pagerdto = new menupageddto(this.wingridviewpager1.pagerinfo)
                {
                    //添加所需条件
                    name = this.txtname.text.trim(),
                    winformtype = this.txtwinformtype.text.trim()
                };
            }

            var result = await menuapicaller.instance.getall(pagerdto);
            return result;
        }

分页控件的数据绑定代码如下所示，这些都是根据winform界面配置自动生成的代码。

            this.wingridviewpager1.displaycolumns = "embedicon,name,seq,visible,expand,winformtype,tag,creationtime";
            this.wingridviewpager1.columnnamealias = await menuapicaller.instance.getcolumnnamealias();//字段列显示名称转义

            //获取分页数据列表
            var result = await getdata();

            //设置所有记录数和列表数据源
            this.wingridviewpager1.pagerinfo.recordcount = result.totalcount; //需先于datasource的赋值，更新分页信息
            this.wingridviewpager1.datasource = result.items;

而treelist列表是我们后来增加上去的，需要额外进行数据的绑定和处理，初始化树列表处理代码如下所示。

        /// <summary>
        /// 初始化树控件
        /// </summary>
        private void inittree()
        {
            this.tree.columns.clear();
            //控件扩展函数封装处理
            this.tree.createcolumn("name", "菜单名称", 160, true);
            this.tree.inittree("id", "pid", null, false, false);

            //设置树的图标集合及逐级图标
            this.tree.selectimagelist = this.imagecollection1;
            this.tree.customdrawnodeimages += (object sender, customdrawnodeimageseventargs e) =>
            {
                int maxcount = this.imagecollection1.images.count;
                var index = e.node.level < maxcount ? e.node.level : 0;
                e.selectimageindex = index;
            };
            //初始化树节点选择事件
            this.tree.focusednodechanged += delegate (object sender, focusednodechangedeventargs e)
            {
                this.focusednodechanged();
            };
        }

获取列表数据并绑定树列表的数据源如下所示

        /// <summary>
        /// 绑定树的数据源
        /// </summary>
        private async task bindtree()
        {
            var pagedto = new menupageddto();
            var result = await menuapicaller.instance.getall(pagedto);

            this.tree.datasource = result.items;
            this.tree.expandall();
        }

而界面显示的时候，加载并显示左侧树列表数据如下代码所示。

        private async void frmmenu_load(object sender, eventargs e)
        {
            //列表信息
            inittree();
            initsearchcontrol();
            await bindtree();
        }

删除菜单的时候，我们一般想把当前菜单和下面的子菜单一并级联删除，实现这个方法，我们需要在服务端自定义实现，如下是应用服务层的实现方法。

        /// <summary>
        /// 移除节点和子节点
        /// </summary>
        /// <param name="input"></param>
        /// <returns></returns>
        [unitofwork]
        public virtual async task deletewithsubnode(entitydto<string> input)
        {
            var children = await _repository.getalllistasync(ou => ou.pid == input.id);
            foreach (var child in children)
            {
                await deletewithsubnode(new entitydto<string>(child.id));//递归删除
            }

            await _repository.deleteasync(input.id);
        }

我们这里显示声明了unitofwork标记，说明这个操作的原子性，全部成功就成功，否则失败的处理。

而客户端的web api 封装调用类，对这个web api接口的封装，根据上篇随笔《abp开发框架前后端开发系列---（10）web api调用类的简化处理》简化后的处理代码如下所示。

 

3、角色菜单管理

菜单的管理整体操作和常规的业务表处理一样，没有太多特殊的地方，下面介绍一下角色包含菜单的管理操作。

前面介绍了角色包含菜单的管理界面如下所示。

界面主要是列出所有菜单，并勾选上该角色可以使用的菜单。这个角色包含的菜单和角色包含的权限处理上比较相似。

首先我们需要定义一个角色dto对象中的菜单集合属性，如下所示。

在界面上获取勾选上的权限和菜单id集合，存储在对应的列表里面。

        /// <summary>
        /// 编辑或者保存状态下取值函数
        /// </summary>
        /// <param name="info"></param>
        private void setinfo(roledto info)
        {
            info.displayname = txtdisplayname.text;
            info.name = txtname.text;
            info.description = txtdescription.text;

            info.permissions = getnodevalues(this.tree, "name");
            info.menus = getnodevalues(this.treemenu, "id");
        }

在应用服务层的roleappservice类里面，我们创建或者更新角色的时候，需要更新它的权限和菜单资源，如下代码是创建角色的函数。

        /// <summary>
        /// 创建角色对象
        /// </summary>
        /// <param name="input"></param>
        /// <returns></returns>
        public override async task<roledto> create(createroledto input)
        {
            checkcreatepermission();

            var role = objectmapper.map<role>(input);
            role.setnormalizedname();

            checkerrors(await _rolemanager.createasync(role));
            await currentunitofwork.savechangesasync(); //it's done to get id of the role.

            await updategrantedpermissions(role, input.permissions);
            await updategrantedmenus(role, input.menus);

            return maptoentitydto(role);
        }

同理，更新角色一样处理这两个部分的资源

        /// <summary>
        /// 更新角色对象
        /// </summary>
        /// <param name="input"></param>
        /// <returns></returns>
        public override async task<roledto> update(roledto input)
        {
            checkupdatepermission();

            var role = await _rolemanager.getrolebyidasync(input.id);

            objectmapper.map(input, role);

            checkerrors(await _rolemanager.updateasync(role));

            await updategrantedpermissions(role, input.permissions);
            await updategrantedmenus(role, input.menus);

            return maptoentitydto(role);
        }

以上就是菜单的管理，和角色包含菜单的维护操作，整个开发过程主要就是使用代码生成工具来快速生成框架各个层的代码，以及winform界面的代码，这样在进行一定的函数扩展以及界面布局调整，就可以非常方便、高效的完整一个业务模块的开发工作了。