3.5.1 构建第一个Menu

史, 昂 • 2024年5月23日 am9:29 • Oinone 7天入门到精通 • 阅读 1235

在前面章节中我们也涉及到菜单，因为菜单我们模块就是地图、导航，没有地图、导航就无法畅游模块并进行相关业务操作。在3.3.4【模块的继承】一文关于多表继承的内容就有涉及到菜单的初始化，本文将展开介绍初始化Menu的两种方式分别是：注解式、数据初始化式。

注解式(举例)

Step1 分析现有菜单注解

用@UxMenus声明DemoMenus为菜单初始化入口，同时该类在DemoModule配置扫描路径中，那么通过DemoMenus初始化的菜单都挂在demo_core这个模块上。

如果采用这种模式，建议同一个模块的菜单都只配置在一处

package pro.shushi.pamirs.demo.core.init;

import pro.shushi.pamirs.boot.base.constants.ViewActionConstants;
import pro.shushi.pamirs.boot.base.ux.annotation.action.UxRoute;
import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenu;
import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenus;
import pro.shushi.pamirs.demo.api.model.*;
import pro.shushi.pamirs.demo.api.proxy.PetShopProxy;
import pro.shushi.pamirs.demo.api.proxy.PetShopProxyA;
import pro.shushi.pamirs.demo.api.proxy.PetShopProxyB;

@UxMenus
public class DemoMenus implements ViewActionConstants {
    @UxMenu("商店管理")@UxRoute(PetShopProxy.MODEL_MODEL) class PetShopProxyMenu{}
    @UxMenu("商店管理A")@UxRoute(PetShopProxyA.MODEL_MODEL) class PetShopProxyAMenu{}
    @UxMenu("商店管理B")@UxRoute(PetShopProxyB.MODEL_MODEL) class PetShopProxyBMenu{}
    @UxMenu("商品管理")@UxRoute(PetItem.MODEL_MODEL) class ItemMenu{}
    @UxMenu("宠狗商品")@UxRoute(PetDogItem.MODEL_MODEL) class DogItemMenu{}
    @UxMenu("萌猫商品")@UxRoute(PetCatItem.MODEL_MODEL) class CatItemMenu{}
    @UxMenu("宠物品种")@UxRoute(PetType.MODEL_MODEL) class PetTypeMenu{}
    @UxMenu("萌猫品种")@UxRoute(PetCatType.MODEL_MODEL) class CatTypeMenu{}
    @UxMenu("宠狗品种")@UxRoute(PetDogType.MODEL_MODEL) class DogTypeMenu{}
    @UxMenu("宠物达人")@UxRoute(PetTalent.MODEL_MODEL) class PetTalentMenu{}
}

图3-5-1-1 菜单注解

Step2 改造现有菜单注解

菜单的层级关系通过@UxMenu的嵌套进行描述
菜单点击效果有三种分别对应不同的Action的类型，关于Action的类型详见3.5.3【Action的类型】一文。
1. 通过@UxRoute定义一个与菜单绑定的viewAction，@UxMenu("创建商店")@UxRoute(value = PetShop.MODEL_MODEL,viewName = "redirectCreatePage",viewType = ViewTypeEnum.FORM)，其中viewName代表视图的name(其默认值为redirectListPage，也就是跳转到列表也)，value代码视图所属模型的编码，viewType代表view类型（其默认值为ViewTypeEnum.TABLE）
2. @UxServer定义一个与菜单绑定的serverAction，@UxMenu("UxServer")@UxServer(model = PetCatItem.MODEL_MODEL,name = "uxServer") ，其中name代表serverAction的name，model或value代码serverAction所属模型的编码
3. @UxLink定义一个与菜单绑定的UrlAction，@UxMenu("Oinone官网")@UxLink(value = "http://www.oinone.top",openType= ActionTargetEnum.OPEN_WINDOW) ，其中value为跳转url，openType为打开方式默认为ActionTargetEnum.ROUTER，打开方式有以下几种
  1. ROUTER("router", "页面路由", "页面路由")
  2. DIALOG("dialog", "页面弹窗", "页面弹窗")
  3. DRAWER("drawer", "打开抽屉", "打开抽屉")
  4. OPEN_WINDOW("openWindow", "打开新窗口", "打开新窗口")
配合菜单演示，PetCatItemAction增加一个uxServer的ServerAction

package pro.shushi.pamirs.demo.core.action;

……包引用

@Model.model(PetCatItem.MODEL_MODEL)
@Component
public class PetCatItemAction extends DataStatusBehavior<PetCatItem> {
    ……省略其他代码

    @Action(displayName = "uxServer")
    public PetCatItem uxServer(PetCatItem data){
        PamirsSession.getMessageHub().info("uxServer");
        return data;
    }

}

图3-5-1-2 示例代码

新的菜单初始化代码如下

package pro.shushi.pamirs.demo.core.init;

import pro.shushi.pamirs.boot.base.constants.ViewActionConstants;
import pro.shushi.pamirs.boot.base.enmu.ActionTargetEnum;
import pro.shushi.pamirs.boot.base.ux.annotation.action.UxLink;
import pro.shushi.pamirs.boot.base.ux.annotation.action.UxRoute;
import pro.shushi.pamirs.boot.base.ux.annotation.action.UxServer;
import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenu;
import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenus;
import pro.shushi.pamirs.demo.api.model.*;
import pro.shushi.pamirs.demo.api.proxy.PetShopProxy;
import pro.shushi.pamirs.demo.api.proxy.PetShopProxyA;
import pro.shushi.pamirs.demo.api.proxy.PetShopProxyB;
import pro.shushi.pamirs.meta.enmu.ViewTypeEnum;

@UxMenus public class DemoMenus implements ViewActionConstants {

    @UxMenu("商店") class ShopMenu{
        @UxMenu("UxServer")@UxServer(model = PetCatItem.MODEL_MODEL,name = "uxServer") class ShopSayHelloMenu{
        }
        @UxMenu("创建商店")@UxRoute(value = PetShop.MODEL_MODEL,viewName = "redirectCreatePage",viewType = ViewTypeEnum.FORM) class ShopCreateMenu{
        }
        @UxMenu("商店管理")@UxRoute(PetShopProxy.MODEL_MODEL) class ShopProxyMenu{
        }
        @UxMenu("商店管理A")@UxRoute(PetShopProxyA.MODEL_MODEL) class ShopProxyAMenu{
        }
        @UxMenu("商店管理B")@UxRoute(PetShopProxyB.MODEL_MODEL) class ShopProxyBMenu{
        }

    }
    @UxMenu("商品") class ItemPMenu{
        @UxMenu("商品管理")@UxRoute(PetItem.MODEL_MODEL) class ItemMenu{
        }
        @UxMenu("宠狗商品")@UxRoute(PetDogItem.MODEL_MODEL) class DogItemMenu{}
        @UxMenu("萌猫商品")@UxRoute(PetCatItem.MODEL_MODEL) class CatItemMenu{}
    }
    @UxMenu("品种")@UxRoute(PetType.MODEL_MODEL) class PetTypePMenu{
        @UxMenu("宠物品种")@UxRoute(PetType.MODEL_MODEL) class PetTypeMenu{}
        @UxMenu("萌猫品种")@UxRoute(PetCatType.MODEL_MODEL) class CatTypeMenu{}
        @UxMenu("宠狗品种")@UxRoute(PetDogType.MODEL_MODEL) class DogTypeMenu{}
    }
    @UxMenu("宠狗达人")@UxRoute(PetTalent.MODEL_MODEL) class PetTalentMenu{}
    @UxMenu("友情链接")class FlinkManagement{
        @UxMenu("Oinone官网")@UxLink(value = "http://www.oinone.top",openType= ActionTargetEnum.OPEN_WINDOW) class SsLink{}
        @UxMenu("百度") @UxLink(value = "http://www.baidu.com",openType= ActionTargetEnum.OPEN_WINDOW) class BaiduLink{}
    }
}

图3-5-1-3 示例代码

Step3 重启看效果

我们会发现菜单按照我们预先设定的效果进行组织和展示

图3-5-1-4 示例效果

数据初始化式（不推荐）

在模块启动生命周期中，调用InitializationUtil工具中的createViewActionMenu。在前面的学习中我们用在DemoModuleMetaDataEditor这个类中用InitializationUtil工具初始化过viewAction和View。大家可以自行回忆，温故知新。

Oinone社区作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9250.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Oinone 7天从入门到精通

史, 昂数式管理员

0 0

3.5.2 构建第一个View

上一篇 2024年5月23日

3.5 Oinone以交互为外在

下一篇 2024年5月23日

Oinone 7天入门到精通

3.5.7.3 自定义布局

布局是什么在系统中，布局决定了母版内的页面元素，一个页面可以由多个组件进行组装，布局可以根据视图类型来替换。默认布局范围: 图3-5-7-36 默认布局范围作用场景系统内置了多个布局组件，这些组件适用于全局、某个应用或某个页面，提供了灵活的布局定制选项。这些组件根据不同类型的视图进行了默认的组装，这也是选择了视图类型后，页面能够呈现的原因。当然，这些默认的组装是可以被覆盖、新增和添加新组件的。使用registerLayout进行自定义布局开发者在使用这些布局组件时，应该遵循公司的规范进行统一的调整。自定义布局组件的使用可通过 registerLayout 实现。registerLayout 的第一个参数是代表布局的 XML，第二个参数是不同的选项维度，默认包含以下维度： viewType: 视图类型 module: 视图模型所在模块 moduleName: 视图模型所在模块名称 model: 视图模型编码 modelName: 视图模型名称 viewName: 视图名称 actionName: 动作名称 inline: 是否内嵌视图(子视图特有) ttype: 模型字段类型(子视图特有) relatedTtype: 关联模型字段类型(子视图特有) field: 字段(子视图特有) 需要注意的是，动作可以是A模块下的a模型，这个动作可以打开B模块下的b模型的视图，module、moduleName、model、modelName应该填b模型对应的值，只不过大部分场景我们都是本模型的动作打开本模型的视图，所以这些场景拿动作所在模型填这些值也可以这些纬度也可以通过查看TS的定义查看全局在系统中，我们可以通过指定视图类型来决定某一类视图的全局布局。以表格为例，当第二个入参为 { viewType: ViewType.Table } 时，代表了替换了系统内所有表格的布局样式。示例工程目录以下是需关注的工程目录示例，main.ts更新导入./layout，layout/index.ts更新导出./tableLayout：图3-5-7-37 全局纬度注册布局工程目录示例示例代码 import {registerLayout, ViewType} from '@kunlun/dependencies' /** * 把系统内所有表格类型视图的全局动作放入搜索区域 * * 移动actionBar布局至外层 * <element widget="actionBar" slot="actionBar" slotSupport="action"> * <xslot name="actions" slotSupport="action" /> * </element> * */ const registerGlobalTableLayout = () => { return registerLayout(`<view type="TABLE"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" /> </view> </pack> <pack widget="group" slot="tableGroup"> <element widget="table" slot="table" slotSupport="field"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" slotSupport="action" /> </element> </pack> </view>`, { viewType: ViewType.Table }) } registerGlobalTableLayout() 图3-5-7-38 全局纬度注册布局代码示例效果图3-5-7-39 全局纬度注册布局效果示例应用在系统中，我们可以通过指定视图类型和模块名称来替换某一类视图在特定模块下的全局布局。以表格为例，当第二个入参为 { viewType: ViewType.Table, moduleName: ‘resource’ } 时，代表了替换了资源应用下所有表格的布局样式，而其他应用仍使用默认布局 import {registerLayout, ViewType} from '@kunlun/dependencies' const registerModuleTableLayout = () => { return registerLayout(`<view type="TABLE"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" /> </view> </pack> <pack…

史, 昂
2024年5月23日
1.2K000
Oinone 7天入门到精通

6.5 权限体系（改）

做好企业级软件，首先得过权限这一关在企业的IT部门沟通中，权限是避免不了。自嘲下在我们刚出来创业时，为了收获客户对我们技术能力的信任，每每与跟客户沟通时都会说我们是阿里出来的，但在权限设计这个环节不那么灵验，反而被打上了不懂B端权限设计的标签，会问很多问题。我就很奇怪难道大厂就没有内部管理系统了？大厂只有C端交易，没有B端交易？但从侧面说明权限不简单还特别重要。做好企业级软件，首先得过权限这一关。整体介绍对于平台运行来说，权限是必须，但我们的auth模块不是必须的，auth模块只是我们提供的一种默认实现，客户可以根据平台的spi机制进行替换。auth模块利用了平台的Hook特性做到与业务无关，在我们开发上层应用的时，是不用感知它的存在的。 auth模块涉及：功能权限、数据权限数据权限：行权限和列权限。备注：数据权限的控制只能用于【存储模型】表级权限：表达的语义是：是否该表可读/写（修改和新增）列权限：表达的语义是：是否该列可读/写（修改和新增）行权限：表达的语义是：是否对该行可读/写（修改）/删除功能权限：表达的语义是ServerAction/Function是否可执行/展示，viewAction是否可展示，菜单是否可以显示范围说明：配置多个权限项的时候，取并集配置多个角色的时候，取并集模型设计产品体验 Step1 创建角色通过App Finder 切换至【权限】应用，点击新增按钮创建一个名为oinone的角色 Step2 创建数据权限项在【权限项列表】菜单，点击【创建】按钮新增一个名为【宠物达人数据权限项】，同时宠物达人的数据权限设置为只能查看性别为男的记录配置说明：名称：代表该项配置的权限的名字（必填）（必须是全系统唯一）权限模型：选择需要拦截的数据所在的表，即为模型，可以搜索使用描述：对该权限项的描述权限条件的配置：满足全部：对条件一和条件二要同时满足的数据才能被看见满足任一：对条件一和条件二要任意满足的数据都能被看见读权限：对该数据是否有读取的权限写权限：对该数据是否有修改的权限删除权限：对该条件内的数据是否有删除的权限 Step3 为角色配置权限编辑oinone角色，只开通oinoneDemo工程应用选中【数据权限】选项卡点击【添加】按钮，勾选宠物达人数据权限项点击【确定】按钮整体点击保存，回到列表页记得点击【权限生效】按钮 Step4 新建用户绑定角色切换到用户中心模块，点击【创建】按钮填写必要信息，并在角色选中oinone权限组。退出admin用户，用oinone登陆，权限效果：只能看见demo模块 oinone登陆只能看到性别为男的宠物达人记录 admin用户登陆 oinone用户登陆因为宠物达人的页面没有把性别字段放出来，我们看下数据库数据 auth模块扩展在日常项目开发中，难免会碰到一些针对权限管理的特殊需求，或是为提升性能做的特殊逻辑。接下来我给大家介绍auth模块扩展性。权限全局配置对所有权限角色都做限制，而且不想让用户感知，可以实现PermissionFunApi接口，API接口实现的配置方式【只能用于支持全局的数据权限配置】实现接口PermissionFunApi 将实现托管给SpringAOP 接口的具体实现看下图的代码 package pro.shushi.pamirs.demo.core.service; import org.springframework.stereotype.Component; import pro.shushi.pamirs.auth.api.service.PermissionFunApi; import pro.shushi.pamirs.demo.api.model.PetTalent; @Component public class PetTalentPermissionFunApi implements PermissionFunApi { @Override public String permissionDomain(Object… args) { //获取当前组织中 return "name == '张学友'"; } @Override public String nameSpace() { return PetTalent.MODEL_MODEL; } } 不参与权限控制如果某一接口不想做权限控制，则可以在启动工程的application-dev.yml文件中配置不需要权限过滤的接口 pamirs: auth: fun-filter: – namespace: demo.PetTalent fun: queryPage 换一个没有配置宠物达人权限的用户（除管理员以外）进入系统，则也可以看到数据。注意【权限全局控制】还是生效的 API 1. 获取当前用户对该模型的行权限 Result<String> result = CommonApiFactory.getApi(AuthApi.class).canReadAccessData("Model"); 返回值为 { 'data':"name=in=('hahaha')" 'success'：true … } 用法：场景：前端发起的请求都会经过权限拦截，后端代码逻辑发起的数据请求都是不经过任何权限的过滤，但是某些特殊情况需要在后端代码逻辑发起的数据请求也带上权限过滤入参：请求的模型出参：Result 数据结构中data会存储一段字符串，该字符串为Rsql 将该Rsql追加到wrapper中 Result<String> result = CommonApiFactory.getApi(AuthApi.class).canReadAccessData("base.UeModule"); String data=result.getData(); QueryWrapper<UeModule> wrapper = Pops.query(); wrapper.setEntity(ueModule); if (!StringUtils.isBlank(data)) { wrapper.apply(data); }

史, 昂
2024年5月23日
1.1K001
3.4 Oinone以函数为内在

函数（Function）：是oinone可管理的执行逻辑单元，跟模型绑定则对应模型的方法描述满足数学领域函数定义，含有三个要素：定义域A、值域C{f（x），x属于A}和对应法则f。其中核心是对应法则f，它是函数关系的本质特征满足面向对象原则，可设置不同开放级别，本地与远程智能切换。本章会带大家更加详细地了解Function的方方面面，主要以几下几个维度构建第一个Function 函数的开放级别与类型函数的相关特性函数元数据详解

史, 昂
Oinone 7天入门到精通 2024年5月23日
1.4K000
Oinone 7天入门到精通

5.7 商业支撑之库存域

库存的差异会反馈到企业的整个价值链上，所以对库存的设计是至关重要的一、基础介绍我们先抛开仓库中对库存的实操管理和整个流通领域的库存，只围绕企业自身一级的采销链路上我们可以从管理和销售两个角度去看。从管理角度上我们会关心：实物库存、在途库存、在产库存、库存批次等等，也就是企业有多少库存分布在哪里在什么环节。从销售角度上我们会关心：可售库存、安全库存等等，也就是企业在特定渠道销售中库存分配规则。在商业场景中库存管理一头对接仓库、生成、采购，另一头对接多个销售渠道。它的挑战在于不同行业不同特征商品都有比较大的差异。比如家具行业卖的是生产能力，家电区域化销售，生鲜拼车销售，服饰一仓销全国。热销的要分配提升体验防止超卖，滞销的要活动拉流量，普通的要渠道共享最大化可售。库存管理的差异会反馈到企业的整个价值链上，所以对库存的设计是至关重要的。库存设计挑战在于：技术上：库存类似账户账本的设计，需要能追溯库存变化的过程，且库存操作都能可追溯业务单据。热点数据的并发控制业务上：在管理角度上游能跟仓库、采购、生产等进行对接、对账、并为其设置可售规则，下游能为各个销售渠道设置库存分配与同步规则二、模型介绍图5-7-1 模型介绍核心设计逻辑：单据链路：业务单据（外部业务单据+库存业务单据）产生库存指令（库存调整入\出库单），再由库存指令操作库存并记录库存流水。管理链路：基础数据维护仓库、供应商、服务范围与费用。这些数据是订单履约路由和可售库存同步的基础库存数据：对外跟商品域，通过库存指令进行操作。不同库存各自维护自身库存与流水记录，确保可追溯。如果跟销售渠道对接，还需要扩展可售库存逻辑规则以及同步规则。比如oms类似的应用

史, 昂
2024年5月23日
1.1K000
Oinone 7天入门到精通

7.4 Oinone的低无一体

基础介绍前面我们学习了基于低代码开发平台进行快速开发，以及通过oinone的设计器进行零代码开发两种模式。当然低无一体不是简单地说两种模式还指：低无两种模式可以融合。在做核心产品的时候以低代码开发为主，以无代码为辅助。见低代码开发的基础入门篇中设计器的结合一文在做实施或临时性需求则是以无代码为主，以低代码为辅助本文主要介绍第二种模式，它是www.oinone.top官网在SaaS模式下的专有特性。满足客户安装标品后通过设计器进行适应性修改后，但对于一些特殊场景还是需要通过代码进行完善或开发在该模式下，我们提供了jar模式和代码托管两种模式，客户只要选择需要进行代码开发的模块，点击生产SDK，下载扩展工程模版，按Oinone低代码开发平台规范进行研发，后上传扩展工程即可。操作手册低无一体这个模块是连接无代码设计器的桥梁，可以为一个模块或应用设计低代码的逻辑，可以在界面设计器或流程设计器中使用低代码的逻辑。 1.选择模块首先需要在下拉单选中选择需要低代码的模块或应用。下拉选中只展示在「应用中心」中已安装的模块或应用，可前往「应用中心」安装后继续低代码操作。选择模块中不展示系统的基础模块或应用，因为这些模块或应用无法自定义模型。 2.模块信息模块信息展示的是选择模块的基础信息：模块名称、模块编码、模块作者、模块版本、包的前缀、工程模板下载地址，下载地址仅在上传jar包模式时候用到。 3.低无一体操作低无一体支持了两种使用模式：上传jar包模式、源码托管模式。上传控制工程或创建研发分支动作完成会生成一条数据，可以对单条数据进行部署、卸载、修改、删除。 3.1 上传jar包模式在这个模式下，需要做四步动作。生成SDK，点击按钮之后，会把模块的当前模型状态打成一个SDK包，SDK最新生成时间更新。当模型变更但未生成SDK时，使用低无一体就会出错，请重新生成SDK并修改扩展工程。生成SDK通常需要1分钟左右，若第一次使用低无一体模块，可能需要更长时间，请耐心等待。下载扩展工程模板，点击按钮之后，会将SDK包和工程模板生成一个下载链接，复制模块信息中的卸载地址打开即可下载。技术人员在工程模板的基础上写低代码逻辑。上传扩展工程，点击按钮展开弹窗，在弹窗中设置标签、备注，并将最终的jar包上传，完成上传之后表格中就会新增一条数据。上传jar包模式下，模板工程中代码需要注意的点参考下图： 3.2 源码托管模式在这个模式下，需要做三步动作。生成SDK，点击按钮之后，会把模块的当前模型状态打成一个SDK包，SDK最新生成时间更新。当模型变更但未生成SDK时，使用低无一体就会出错，请重新生成SDK并修改扩展工程。生成SDK通常需要1分钟左右，若第一次使用低无一体模块，可能需要更长时间，请耐心等待。创建研发分支，点击按钮展开弹窗。首次创建时需要设置git账号名称、git账号邮箱来创建一个账号，另外在弹窗中设置分支名称、标签、备注，完成创建后表格中就会新增一条数据。通过表格中的Gitlab地址，技术人员写低代码逻辑。 3.3 行内操作部署：工程状态为未部署、部署失败、已卸载时展示行内的部署按钮，点击之后进行部署，工程状态变为部署中。部署过程大致需要5-10分钟，请耐心等待。部署完成之后，会生成一个新的模块：“原模块名称”扩展工程。卸载：工程状态为已部署时展示行内的卸载按钮，点击之后会卸载这个已部署的工程，工程状态变为已卸载。同一模块只能有一个已部署的工程（与选择的模式无关），若需要使用新的工程请先卸载已部署的工程。修改：行内操作修改按钮始终展示，只允许修改标签、备注。删除：工程状态为未部署、部署失败、已卸载时展示行内的删除按钮，点击之后删除这一条工程记录。 3.4 部署效果低无一体部署成功之后，可以进入对应模块的模型页面中使用提交动作来使用低代码逻辑，也可以在流程设计器中的引用逻辑节点中使用低代码逻辑。

史, 昂
2024年5月23日
2.0K000

登录后才能评论

3.5.1 构建第一个Menu

注解式(举例)

Step1 分析现有菜单注解

Step2 改造现有菜单注解

Step3 重启看效果

数据初始化式（不推荐）

相关推荐

3.5.7.3 自定义布局

6.5 权限体系（改）

3.4 Oinone以函数为内在

5.7 商业支撑之库存域

7.4 Oinone的低无一体

Leave a Reply