3.3.6 枚举与数据字典

枚举是大家在系统开发中经常用的一种类型,在oinone中也对枚举类型进行了支持,同时也做了相应的加强。希望通过本文能让大家对枚举的使用,有更全面的认知

一、枚举系统与数据字典

枚举是列举出一个有穷序列集的所有成员的程序。在元数据中,我们使用数据字典进行描述。

协议约定

枚举需要实现IEnum接口和使用@Dict注解进行配置,通过配置@Dict注解的dictionary属性来设置数据字典的唯一编码。前端使用枚举的displayName来展示,枚举的name来进行交互;后端使用枚举的value来进行交互(包括默认值设置也使用枚举的value)。

枚举会存储在元数据的数据字典表中。枚举分为两类:1.异常类;2.业务类。异常类枚举用于定义程序中的错误提示,业务类枚举用于定义业务中某个字段值的有穷有序集。

编程式用法

3.3.6 枚举与数据字典

图3-3-6-1 编程式用法

如果一个字段的类型被定义为枚举,则该字段就可以使用该枚举来进行可选项约束(options)。该字段的可选项为枚举所对应数据字典的子集。

可继承枚举

继承BaseEnum可以实现java不支持的继承枚举。同时可继承枚举也可以用编程式动态创建枚举项。

可继承枚举也可以兼容无代码枚举。

3.3.6 枚举与数据字典

图3-3-6-2 可继承枚举

二进制枚举

可以通过@Dict注解设置数据字典的bit属性或者实现BitEnum接口来标识该枚举值为2的次幂。

二、enum不可继承枚举(举例)

我们在介绍抽象基类中AbstractDemoCodeModel和AbstractDemoIdModel就引入了数据状态(DataStatusEnum)字段,并设置了必填和默认值为DISABLED。DataStatusEnum实现了IEnum接口,并用@Dict(dictionary = DataStatusEnum.dictionary, displayName = "数据状态")进行了注解。为什么不能继承呢?因为JAVA语言的限制导致enum是不可继承的

package pro.shushi.pamirs.core.common.enmu;

import pro.shushi.pamirs.meta.annotation.Dict;
import pro.shushi.pamirs.meta.common.enmu.IEnum;

@Dict(dictionary = DataStatusEnum.dictionary, displayName = "数据状态")
public enum DataStatusEnum implements IEnum<String> {

    DRAFT("DRAFT", "草稿", "草稿"),
    NOT_ENABLED("NOT_ENABLED", "未启用", "未启用"),
    ENABLED("ENABLED", "已启用", "已启用"),
    DISABLED("DISABLED", "已禁用", "已禁用");

    public static final String dictionary = "partner.DataStatusEnum";

    private String value;
    private String displayName;
    private String help;

    DataStatusEnum(String value, String displayName, String help) {
        this.value = value;
        this.displayName = displayName;
        this.help = help;
    }

    public String getValue() {
        return value;
    }

    public String getDisplayName() {
        return displayName;
    }

    public String getHelp() {
        return help;
    }
}

图3-3-6-3 不可继承枚举

三、BaseEnum可继承枚举(举例)

Step1 新增CatShapeExEnum继承CatShapeEnum枚举

package pro.shushi.pamirs.demo.api.enumeration;

import pro.shushi.pamirs.meta.annotation.Dict;

@Dict(dictionary = CatShapeExEnum.DICTIONARY,displayName = "萌猫体型Ex")
public class CatShapeExEnum extends CatShapeEnum {

    public static final String DICTIONARY ="demo.CatShapeExEnum";
    public final static CatShapeExEnum MID =create("MID",3,"中","中");
}

图3-3-6-4 新增CatShapeExEnum继承CatShapeEnum枚举

Step2 修改PetCatType的shape字段类型为CatShapeExEnum

package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.demo.api.enumeration.CatShapeExEnum;
import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;

@Model.MultiTableInherited(type = PetCatType.KIND_CAT)
@Model.model(PetCatType.MODEL_MODEL)
@Model(displayName="萌猫品种",labelFields = {"name"})
public class PetCatType extends PetType {

    public static final String MODEL_MODEL="demo.PetCatType";
    public static final String KIND_CAT="CAT";

    @Field(displayName = "宠物分类",defaultValue = PetCatType.KIND_CAT,invisible = true)
    private String kind;

    @Field.Enum
    @Field(displayName = "宠物体型")
    private CatShapeExEnum shape;
}

图3-3-6-5 修改PetCatType的shape字段类型为CatShapeExEnum

Step3 重启系统,查看效果

3.3.6 枚举与数据字典

图3-3-6-6 示例效果图

另:可继承枚举的Switch API

继承BaseEnum可以实现Java不支持的可变枚举,可变枚举可以在运行时增加非Java代码定义的枚举项,同时可变枚举支持枚举继承。由于可变枚举不是Java规范中的枚举,所以无法使用switch...case...语句,但是K2提供稍作变化的switches(无需返回值)与switchGet(需要返回值)方式实现相同功能与逻辑。

BaseEnum.switches(比较变量, 比较方式/*系统默认提供两种方式:caseName()和caseValue()*/,
                  cases(枚举列表1).to(() -> {/*逻辑处理*/}),
                  cases(枚举列表2).to(() -> {/*逻辑处理*/}),
                  ...
                  cases(枚举列表N).to(() -> {/*逻辑处理*/}),
                  defaults(() -> {/*默认逻辑处理*/})
);

图3-3-6-7 枚举的switches用法

BaseEnum.<比较变量类型, 返回值类型>switchGet(比较变量, 
                                  比较方式/*系统默认提供两种方式:caseName()和caseValue()*/,
                cases(枚举列表1).to(() -> {/*return 逻辑处理的结果*/}),
                cases(枚举列表2).to(() -> {/*return 逻辑处理的结果*/}),
                ...
                cases(枚举列表N).to(() -> {/*return 逻辑处理的结果*/}),
                defaults(() -> {/*return 逻辑处理的结果*/})
);

图3-3-6-8 枚举的switchGet用法

caseName()使用枚举项的name与比较变量进行匹配比较;caseValue()使用枚举项的value值与比较变量进行匹配比较。

例如以下逻辑表示当ttype的值为O2O、O2M、M2O或M2M枚举值时返回true,否则返回false。

return BaseEnum.<String, Boolean>switchGet(ttype, caseValue(),
                cases(O2O, O2M, M2O, M2M).to(() -> true),
                defaults(() -> false)
);

图3-3-6-9 枚举的switchGet用法举例

四、二进制枚举(举例)

可以通过@Dict注解设置数据字典的bit属性或者实现BitEnum接口来标识该枚举值为2的次幂。二进制枚举最大的区别在于值的序列化和反序列化方式是不一样的。更多有关序列化知识详见3.3.5【模型编码生成器】一文。

Step1 新建店铺选项枚举、并添加为PetShop的一个字段

  1. PetShopOptionEnum继承BaseEnum<PetShopOptionEnum,Long>并实现BitEnum接口,增加三个枚举,值分别是2的0次幂,2的1次幂,2的2次幂。多选枚举3位枚举都选中,字段值为7;
package pro.shushi.pamirs.demo.api.enumeration;

import pro.shushi.pamirs.meta.annotation.Dict;
import pro.shushi.pamirs.meta.common.enmu.BaseEnum;
import pro.shushi.pamirs.meta.common.enmu.BitEnum;

@Dict(dictionary = PetShopOptionEnum.DICTIONARY,displayName = "店铺选项枚举")
public class PetShopOptionEnum extends BaseEnum<PetShopOptionEnum,Long> implements BitEnum {
    public static final String DICTIONARY ="demo.PetShopOptionEnum";

    public static final PetShopOptionEnum ANCIENT = create("ANCIENT",1L<<0,"十年老店","十年老店");
    public static final PetShopOptionEnum SEVEN = create("SEVEN",1L<<1,"七天无理由退货","七天无理由退货");
    public static final PetShopOptionEnum CERTIFIED_PRODUCTS = create("CERTIFIED_PRODUCTS",1L<<2,"正品认证","正品认证");

}

图3-3-6-10 新建店铺选项枚举

  1. 修改PetShop,增加一个多选枚举字段options,枚举类型为PetShopOptionEnum
package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.demo.api.enumeration.PetShopOptionEnum;
import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;

import java.sql.Time;
import java.util.List;

@Model.model(PetShop.MODEL_MODEL)
@Model(displayName = 宠物店铺,summary=宠物店铺,labelFields = {shopName})
@Model.Code(sequence = DATE_ORDERLY_SEQ,prefix = P,size=6,step=1,initial = 10000,format = yyyyMMdd)
public class PetShop extends AbstractDemoIdModel {
    public static final String MODEL_MODEL=demo.PetShop;

    @Field(displayName = 店铺编码)
    private String code;

    @Field(displayName = 店铺编码2)
    @Field.Sequence(sequence = DATE_ORDERLY_SEQ,prefix = C,size=6,step=1,initial = 10000,format = yyyyMMdd)
    private String codeTwo;

    @Field(displayName = 店铺名称,required = true)
    private String shopName;

    @Field(displayName = 开店时间,required = true)
    private Time openTime;

    @Field(displayName = 闭店时间,required = true)
    private Time closeTime;

    @Field(displayName = 店铺标志)
    private List options;

}

图3-3-6-11 修改PetShop增加一个多选枚举字段options

Step2 重启查看效果

  1. 商店管理A的编辑页面可以看到店铺标志字段可多选十年老店、七天无理由退货、正品认证

3.3.6 枚举与数据字典

图3-3-6-12 模型宠狗商店编辑页

  1. 商店管理A的列表页面可以看到【店铺标志】字段为【十年老店】、【七天无理由退货】、【正品认证】

3.3.6 枚举与数据字典

图3-3-6-13 模型宠狗商店列表页

  1. 查看数据库对应的options字段值为7

3.3.6 枚举与数据字典

图3-3-6-14 查看数据库对应的options字段值为7

五、异常枚举(举例)

作为oinone管理异常的规范,一般枚举都是用@Dict申明为数据字典,但是异常枚举会用@Error来注解,因为异常跟业务枚举有很大区别,异常往往数量非常多,如果用@Dict数据字典方式来管理,那么数据字典的量会非常大。

Step1 新建一个异常枚举类DemoExpEnumerate,实现ExpBaseEnum接口并加上@Errors(displayName = demo模块错误枚举)注解,增加对应错误枚举

package pro.shushi.pamirs.demo.api.enumeration;

import pro.shushi.pamirs.meta.annotation.Errors;
import pro.shushi.pamirs.meta.common.enmu.ExpBaseEnum;
@Errors(displayName = demo模块错误枚举)
public enum  DemoExpEnumerate implements ExpBaseEnum {

    SYSTEM_ERROR(ERROR_TYPE.SYSTEM_ERROR,90000000,系统异常),
    PET_SHOP_BATCH_UPDATE_SHOPLIST_IS_NULL(ERROR_TYPE.BIZ_ERROR,90000001,店铺列表不能为空);

    private ERROR_TYPE type;
    private int code;
    private String msg;

    DemoExpEnumerate(ERROR_TYPE type, int code, String msg) {
        this.type= type;
        this.code=code;
        this.msg=msg;
    }
}

图3-3-6-15 新建一个异常枚举类DemoExpEnumerate

Step2 修改宠物商店批量更新数据状态逻辑

增加一个PetShopList必选判断,如果没选则抛出异常并制定异常枚举为PET_SHOP_BATCH_UPDATE_SHOPLIST_IS_NULL

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

import org.springframework.stereotype.Component;
import pro.shushi.pamirs.demo.api.enumeration.DemoExpEnumerate;
import pro.shushi.pamirs.demo.api.proxy.PetShopProxy;
import pro.shushi.pamirs.demo.api.tmodel.PetShopBatchUpdate;
import pro.shushi.pamirs.meta.annotation.Action;
import pro.shushi.pamirs.meta.annotation.Function;
import pro.shushi.pamirs.meta.annotation.Model;
import pro.shushi.pamirs.meta.common.enmu.ExpBaseEnum;
import pro.shushi.pamirs.meta.common.exception.PamirsException;
import pro.shushi.pamirs.meta.enmu.ActionContextTypeEnum;
import pro.shushi.pamirs.meta.enmu.FunctionOpenEnum;
import pro.shushi.pamirs.meta.enmu.FunctionTypeEnum;
import pro.shushi.pamirs.meta.enmu.ViewTypeEnum;

import java.util.List;

@Model.model(PetShopBatchUpdate.MODEL_MODEL)
@Component
public class PetShopBatchUpdateAction {

    @Function(openLevel = FunctionOpenEnum.API)
    @Function.Advanced(type= FunctionTypeEnum.QUERY)
    public PetShopBatchUpdate construct(PetShopBatchUpdate petShopBatchUpdate, List petShopList){
        PetShopBatchUpdate result = new PetShopBatchUpdate();
        result.setPetShopList(petShopList);
        return result;
    }

    @Action(displayName = 确定,bindingType = ViewTypeEnum.FORM,contextType = ActionContextTypeEnum.SINGLE)
    public PetShopBatchUpdate conform(PetShopBatchUpdate data){
        if(data.getPetShopList() == null || data.getPetShopList().size()==0){
            throw  PamirsException.construct(DemoExpEnumerate.PET_SHOP_BATCH_UPDATE_SHOPLIST_IS_NULL).errThrow();
        }
        List proxyList = data.getPetShopList();
        for(PetShopProxy petShopProxy:proxyList){
            petShopProxy.setDataStatus(data.getDataStatus());
        }
        new PetShopProxy().updateBatch(proxyList);
        return data;
    }

}

图3-3-6-16 增加一个PetShopList必选判断

Step3 重启系统看效果

3.3.6 枚举与数据字典

图3-3-6-17 重启系统看效果

平台的异常枚举如下:

pamirs-framework异常枚举

每一个模块都可以包含一个或多个异常枚举类,枚举项定义了应用中异常的错误编码与描述。在应用需要抛出异常的位置,可在抛出异常的时候附带对应的错误枚举。我们使用@Errors注解来定义错误枚举类。

工程名 定义位置 编码起始值
pamirs-meta-model MetaExpEnumerate 10010000
pamirs-meta-dsl DslExpEnumerate 10020000
pamirs-framework-common FwExpEnumerate 10050000
pamirs-framework-configure-annotation AnnotationExpEnumerate 10060000
pamirs-framework-configure-db MetadExpEnumerate 10070000
pamirs-framework-compute ComputeExpEnumerate 10080000
pamirs-framework-compare CompareExpEnumerate 10090000
pamirs-framework-faas FaasExpEnumerate 10100000
pamirs-framework-orm OrmExpEnumerate 10110000
pamirs-connectors-data DataExpEnumerate 10150000
pamirs-connectors-data-dialect DialectExpEnumerate 10160000
pamirs-connectors-data-sql SqlExpEnumerate 10170000
pamirs-connectors-data-ddl DdlExpEnumerate 10180000
pamirs-connectors-data-infrastructure InfExpEnumerate 10190000
pamirs-connectors-data-tx TxExpEnumerate 10200000
pamirs-gateways-rsql RsqlExpEnumerate 10500000
pamirs-gateways-graph-java GqlExpEnumerate 10510000
pamirs-boot-api BootExpEnumerate 11000000
pamirs-boot-uxd BootUxdExpEnumerate 11040000
pamirs-boot-standard BootStandardExpEnumerate 11050000
pamirs-base-api BaseExpEnumerate 11500000
pamirs-sid SidExpEnumerate 11510000

表3-3-6-1 pamirs-framework异常枚举

通用异常码

错误 错误描述 定义位置 编码
BASE_USER_NOT_LOGIN_ERROR 用户未登录 BaseExpEnumerate 11500001
BASE_CHECK_DATA_ERROR 校验失败,数据错误 FwExpEnumerate 10050009

表3-3-6-2 通用异常码

pamirs-core异常枚举(20010000-20290000)

工程名 编码起始值 数据字典名
pamirs-core-common 20010000 error.core.common.exceptions
pamirs-sequence(原pamirs-bid) 20020000 error.core.sequence.exceptions
pamirs-data-audit 20030000 error.core.data.audit.exceptions
pamirs-channel 20040000 error.core.channel.exceptions
pamirs-resource 20050000 error.core.resource.exceptions
pamirs-user 20060000 error.core.user.exceptions
pamirs-auth 20070000 error.core.auth.exceptions
pamirs-message 20080000 error.core.message.exceptions
pamirs-international 20090000 error.core.international.exceptions(未正确定义)
pamirs-translate 20100000 error.core.translate.exceptions(未正确定义)
pamirs-scheduler(已作废)pamirs-data-audit 20110000 error.core.schedule.exceptions(已作废)error.core.data.audit.exceptions
pamirs-trigger 20120000 error.core.trigger.exceptions(未正确定义)
pamirs-file2(原pamirs-file) 20130000 error.core.file.exceptions(未正确定义)
pamirs-eip2(原pamirs-eip2) 20140000 error.core.eip.exceptions(未正确定义)
pamirs-third-party-communication 20150000 error.core.third-party-communication.exceptions(未定义)
pamirs-third-party-map 20160000 error.core.third-party-map.exceptions(未定义)
pamirs-business 20170000 error.core.business.exceptions(未定义)
pamirs-web 20180000 error.core.web.exceptions
pamirs-studio(已作废) 20190000 error.core.studio.exceptions(未正确定义)
pamirs-workflow 20200000 error.core.workflow.exceptions
pamirs-apps 20210000 AppsExpEnumerate
pamirs-paas 20220000 PaasExpEnumerate

表3-3-6-3 pamirs-core异常枚举

pamirs-model-designer异常枚举(20300000)

pamirs-model-designer 20300000 ModelDesignerExp

表3-3-6-4 pamirs-Model-designer异常枚举

pamirs-workflow异常枚举(20310000-20320000)

pamirs-workflow 20310000 WorkflowExpEnumerate
pamirs-workflow-designer 20320000 WorkflowDesignerExpEnumerate

表3-3-6-5 pamirs-workflow异常枚举

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

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

Like (0)
史, 昂's avatar史, 昂数式管理员
Previous 2024年5月23日 am9:40
Next 2024年5月23日 am9:42

相关推荐

  • 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.5K00
  • 3.5.2.1 整体介绍

    虽然我们有小眼睛可以让用户自定义展示字段和排序喜好,以及通过权限控制行、列展示,但在我们日常业务开发中还是会对页面进行调整,以满足业务方的对交互友好和便捷性的要求。本节会在如何自定义之前我们先介绍页面结构与逻辑,再带小伙伴一起完成自定义view的Template和Layout,以及整个母版的Template和Layout 页面的构成讲解 页面交互拓扑图 页面交互拓扑图 图3-5-2-1 页面交互拓扑图 注:页面逻辑交互拓扑图说明 模块作为主切换入口 模块决定菜单列表 菜单切换触发点击action 前端根据Mask、View进行渲染, a. Mask是母版是确定了主题、非主内容分发区域所使用组件和主内容分发区域联动方式的页面模板。全局、应用、视图动作、视图都可以通过mask属性指定母版 bMask和View都是有layout定义和template定义合并而成,系统会提供默认母版,以及为每种视图提供默认layout c. layout与template通过插槽进行匹配 Action根据不同类型做出不同访问后端服务、url跳转、页面路由、发起客户端动作等 Aciton路由可以指定Mask、视图组件的layout、template a. 当layout没有指定的时候则用系统默认的 b. 当template没有指定的时候,且视图组件相同类型有多条记录时,根据优先级选取 Mask和视图组件的layout优先级(视图组件>视图动作 > 应用 > 全局) 默认母版以及各类视图组件 母版布局 默认母版基础布局base-layout <mask layout="default"> <header slot="header"/> <container slot="main" name="main"> <sidebar slot="sidebar"/> <container slot="content"/> </container> <footer slot="footer"/> </mask> 图3-5-2-2 默认母版基础布局base-layout 母版template <mask layout="default"> <mask name="defaultMask"> <template slot="header"> <container name="appBar"> <element widget="logo"/> <element widget="appFinder"/> </container> <container name="operationBar"> <element widget="notification"/> <element widget="dividerVertical"/> <element widget="languages"/> </container> <element widget="userProfile"/> </template> <template slot="sidebar"> <element widget="navMenu"/> </template> <template slot="content"> <element widget="breadcrumb"/> <element widget="mainView"/> </template> </mask> 图3-5-2-3 母版template 注: 上例中因为名称为main的插槽不需要设置更多的属性,所以在template中缺省了main插槽的template标签。 最终可执行视图 <mask name="defaultMask"> <header> <container name="appBar"> <element widget="logo"/> <element widget="appFinder"/> </container> <container name="operationBar"> <element widget="notification"/> <element widget="dividerVertical"/> <element widget="languages"/> </container> <element widget="userProfile"/> </header> <container name="main"> <sidebar name="sidebar"> <element widget="navMenu"/> </sidebar> <container name="content"> <element widget="breadcrumb"/> <element widget="mainView"/> </container> </container> <footer/> </mask> 图3-5-2-4 最终可执行视图 表格视图布局 默认表格视图基础布局base-layout <view type="table"> <view type="search"> <element widget="search" slot="search"> <xslot name="fields" slotSupport="field" /> </element> </view> <pack widget="fieldset"> <element widget="actionBar" slot="actions" slotSupport="action" /> <element widget="table" slot="table"> <xslot name="fields" slotSupport="field" /> <element widget="actionsColumn" slot="actionsColumn"> <xslot name="rowActions" slotSupport="action" /> </element> </element> </pack> </view> 图3-5-2-5 默认表格视图基础布局base-layout 注:table标签的子标签为column组件,如果field填充到元数据插槽fields没有column组件将自动包裹column组件。 表格视图template <view type="table" model="xxx" name="tableViewExample">…

    2024年5月23日
    1.6K00
  • 3.5.7.6 自定义字段

    字段是什么 字段的基本概念 定义:字段通常指的是数据的一个单独项,它可以是一个文本框、下拉菜单、复选框等,用于在用户界面上收集或展示数据。 用途:在表单中,字段用于收集用户输入;在表格或列表中,字段用于显示数据。 类型:字段可以有不同的类型,如文本、数字、日期等,这些类型通常由数据模型定义。 Oinone框架中的字段 在Oinone框架中,字段的设计和实现遵循以下原则: 后端模型驱动:前端的字段直接由后端的数据模型决定。这意味着后端定义了哪些数据应该展示,以及如何展示。 减少前后端联调:由于字段的定义和行为是由后端控制的,前后端的联调需求大大减少。前端开发者主要关注于如何呈现这些字段,而后端则负责数据的逻辑和结构。 灵活性与规范性:虽然Oinone推荐所有场景都遵循后端模型驱动字段的原则,以保持前后端的一致性和减少沟通成本,但它也为高度定制化的前端页面提供了灵活性。 元数据使用:Oinone可能还使用元数据来进一步定义字段的行为,例如它们是否可见、如何验证用户输入等。 结合前后端 在使用Oinone时,理解前后端如何合作来定义和展示字段是很重要的。这种方法不仅提高了开发效率,而且有助于确保数据的一致性和应用程序的可维护性。同时,对于那些需要特定定制或特殊处理的场景,开发团队能够灵活地适应这些需求,在遵守总体架构原则的同时进行一些特定的调整和优化。 作用场景 在Oinone框架中,字段扮演着连接后端数据模型和前端用户界面的重要角色。其作用场景包括但不限于以下几点: 业务组件的核心: Oinone集成了AntdDesignVue的全部UI组件,将它们转化为业务组件。这些业务组件以字段的形式存在,使得前端开发变得简单高效。开发人员可以直接使用这些现成的业务组件来构建用户界面,大大减少了开发工作量。 无代码开发支持: 字段的设计使得Oinone支持无代码开发。开发者可以通过拖拉拽的方式在前端快速构建界面,而后端模型的定义直接决定了这些界面的生成。这种模式简化了传统的前端开发流程,提升了开发效率。 个性化定制: 虽然标准的UI组件可以满足大部分需求,但复杂多变的业务场景往往需要更多个性化的处理。在Oinone中,开发者可以根据具体业务需求和公司的UI指南,定义专门针对特定行业或客户的定制化字段和组件。 与无代码平台的结合: Oinone允许将个性化的字段和组件与无代码平台相结合。这意味着即使在进行个性化定制时,也能保持使用无代码工具的便利性,实现更灵活、更高效的前端开发。 适应多维度业务需求: 由于字段在Oinone中的灵活性和可定制性,它们能够适应多维度的业务需求,无论是从UI设计、用户体验还是业务逻辑的角度,字段都能提供合适的解决方案 自定义字段 示例工程目录 以下是需关注的工程目录示例,main.ts更新导入./field: 图3-5-7-24 自定义字段工程目录示例 示例代码 创建自定义字段组件: 使用Vue框架创建一个新的组件(例如 CustomStringFieldVue),并定义其模板、脚本和样式。 在模板中定义字段的HTML结构。 在脚本中使用 defineComponent 来定义Vue组件。 字段类的定义: 导入必要的模块,如 FormFieldWidget, ModelFieldType, SPI, ViewType 等。 使用 @SPI.ClassFactory 装饰器来注册自定义字段。 在类内部初始化并设置组件。 SPI注册参数解释: viewType: 指定视图类型,如表单视图或搜索视图。 widget: 可以指定组件名称。 ttype: 字段的业务类型,例如字符串、数字等。 multi: 指明字段是否支持多值。 model: 定义字段所属的模型。 viewName: 指定视图名称。 name: 定义所属字段的名称。 import {FormFieldWidget, ModelFieldType, SPI, ViewType} from '@kunlun/dependencies'; import CustomStringFieldVue from './CustomStringField.vue'; @SPI.ClassFactory( FormFieldWidget.Token({ viewType: [ViewType.Form, ViewType.Search], ttype: ModelFieldType.String }) ) export class CustomStringField extends FormFieldWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomStringFieldVue); return this; } } 图3-5-7-24 自定义字段组件(TS)示例 <template> <div class="custom-string-filed-wrapper"> 字段组件 </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ inheritAttrs: false, name: 'CustomStringFieldVue' }) </script> <style lang="scss"> .custom-string-filed-wrapper { } </style> 图3-5-7-24 自定义字段组件(Vue)示例 效果 图3-5-7-24 自定义字段效果示例

    2024年5月23日
    2.3K00
  • 3.1 环境搭建

    一、基础环境说明 内容 是否必须 说明 后端基础环境 JDK1.8 必须 java的基础运行环境, 要求高于1.8_221以上,低于这个版本需要覆盖jce (原因:https://www.cnblogs.com/jinloooong/p/10619353.html) Mysql 必须 8.0.26 版本以上需要注意点:修改:my.cnf (macOS ) / my.ini (windows)时区、大小写敏感设置lower_case_table_names = 2default-time-zone = ‘+08:00’ Idea 必须 需要注意点:1.禁用Lombok插件2.java Compiler 增加 -parameters(不然java反射获取方法入参名会变成arg*) 指令3.安装oinone插件 DB GUI 非必须 Datagrip、MySQLWorkbench、DBEaver 选其一 Insomnia 非必须 GraphQL测试工具 Git 必须 2.2.0以上 Maven 必须 3.6.3需要注意点:1配置mvn的settings文件下载地址见oinone开源社区群公告,也可以联系oinone合作伙伴或服务人员2把settings.xml拷贝一份到maven安装目录conf目录下 RocketMQ 必须 4.7.1以上 Redis 必须 5.0.2以上 Zookeeper 必须 3.5.8以上 前端基础环境 nvm 非必须 方便node的版本管理 nodejs 必须 版本要求为12.12.0注意事项:1.npm的源配置为http://nexus.shushi.pro/repository/kunlun/2.源的用户名、密码见oinone开源社区群公告,也可以联系oinone合作伙伴或服务人员 vue-cli 必须 vue脚手架工具 表3-1-1基础环境说明 其他:canal和Es的环境搭建见具体学习章节 二、基础知识准备 前端必备知识 vue3、typescript、graphql 后端必备知识 SpringBoot、MybatisPlus 表3-1-2基础知识准备 三、下载快速安装包 Mac版 Windows版 四、学习安装 推荐,虽然慢点对环境有比较深入的了解,对自身能力提升和日后排查问题都有好处。 mac见:3.1.1【环境准备(Mac版)】一文 windows见:3.1.2【环境准备(Windows版)】一文

    Oinone 7天入门到精通 2024年5月23日
    3.1K00

Leave a Reply

Please Login to Comment