5.4 基础支撑之商业关系域

相关推荐

• Oinone 7天入门到精通

  3.5.6.3 布局的配置

  布局是将页面拆分成一个一个的小单元，按照上下中左右进行排列。 前沿 在前端领域中，布局可以分为三大块「Float、Flex、Grid 」，Float可以说的上是上古时期的布局了，如今市面还是很少见的，除了一些古老的网站。 目前，平台主要支持通过配置XML上面的cols和span来进行布局。平台也同样支持自由布局，合理的使用row、col、containers和container四个布局容器相关组件，将可以实现各种类型的布局样式，换句话说，平台实现的自由布局功能是Flex和Grid的结合体。 这里主要是讲解Flex和Grid布局，以及目前新的模板布局实现的思路。 Flex布局 Flex布局采用的是一维布局，那么什么是一维布局呢，所谓的一维布局就是只有一个方向、没有体积、面积，比如一条直线。它适合做局部布局，就像我们原来的顶部菜单、面包屑导航，以及现在的主视图字段配置。 图3-5-6-19 Flex布局示意 图3-5-6-20 Flex布局示意 图3-5-6-21 Flex布局示意 从上图可以看看出，Flex布局只能在X、Y轴进行转换，它无法对上下左右四个方向同时处理，因为它没“面积”的概念。所以它最适合做局部布局。 优点 图3-5-6-22 Flex兼容性 Flex的兼容性，可以看得出来，目前主流的浏览器都支持该属性。所以Flex兼容性强，如果你想对局部做布局处理，Flex是最好选择。 缺陷 刚刚也提到了，用户想要的布局是千奇百怪的，如果他想要的布局在现有的功能中无法实现怎么办？让用户放弃？还是说服他使用现在的布局。 Grid布局 Grid布局系统采用的是二维布局，二维布局有四个方向：上、下、左、右，它只有面积没有体积，比如一张纸、网格。 Grid布局 <div id="grid-container-one"> <div class="one-1">Grid Item 1</div> <div>Grid Item 2</div> <div>Grid Item 3</div> <div>Grid Item 4</div> <div>Grid Item 5</div> <div class="one-6">Grid Item 6</div> </div> <div id="grid-container-two"> <div class="tow-1">Grid Item 1</div> <div class="tow-2">Grid Item 2</div> <div>Grid Item 3</div> <div>Grid Item 4</div> <div>Grid Item 5</div> <div>Grid Item 6</div> </div> <div id="grid-container-three"> <div>Grid Item 1</div> <div>Grid Item 2</div> <div class="grid">Grid Item 3</div> <div class="grid-column">Grid Item 4</div> <div>Grid Item 5</div> <div>Grid Item 6</div> <div>Grid Item 7</div> <div class="grid-column">Grid Item 8</div> </div> HTML CSSResult Skip Results Iframe EDIT ON * { box-sizing: border-box; padding: 0; margin: 0; line-height: 1.5; font-weight: bold; text-align: center; } #grid-container-one{ background-color: black; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 50px); gap: 10px; border: solid black 2px; margin-bottom: 20px; color: salmon; } #grid-container-one div { border: solid white 2px; padding: 10px; } #grid-container-one .one-1 { grid-area: span 1/span 3; text-aligin: center } #grid-container-one .one-6 { grid-column: 3 /4; } #grid-container-two{ background-color: CADETBLUE; display: grid; grid-template-columns: 15% repeat(2, 1fr);…

  史, 昂

  2024年5月23日

  1.5K000
• Oinone 7天入门到精通

  3.3.5 模型编码生成器

  在我们日常开发中经常要一些单据生成指定格式的编码，而且现在分布式环境下要考虑的事情会特别多。oinone提供了简易的编码生成能力 一、编码生成器 可以在模型或者字段上配置编码自动生成规则。在进行数据存储时，如果配置了编码自动生成规则的字段值为空，则系统将根据规则自动生成编码。编码自动生成功能是通过序列生成器来支持的。可以在序列生成器生成的序列编码基础上再进行组合配置的功能编码生成最终的编码。序列生成器可以配置初始序列，步长，日期格式，长度。 模型序列生成器（举例） 使用模型编码生成器，需要继承CodeModel或者有Code字段，那么使用Model.Code注解即可。 Step1 为PetShop增加一个@Model.Code注解，并增加一个店铺编码(Code)字段 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import java.sql.Time; @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 = "店铺名称",required = true) private String shopName; @Field(displayName = "开店时间",required = true) private Time openTime; @Field(displayName = "闭店时间",required = true) private Time closeTime; } 图3-3-5-1 为PetShop增加一个@Model.Code注解 Step2 重启查看效果 进入店铺新增页面新增一个oinone宠物店铺003 图3-3-5-2 示例操作效果图 查看店铺列表页面，新增的记录中店铺编码一列，已经按Model.Code注解要求地生成了 图3-3-5-3 示例操作效果图 Step3 小结 在我们日常开发中经常要一些单据生成指定格式的编码，而且现在分布式环境下要考虑的事情会特别多。oinone提供了简易的编码生成能力，大家可以根据编码注解说明，自行对PetShop模型进行不同配置，来学习编码生成器的知识 字段序列生成器 字段编码生成器，在对应的字段上增加，并使用Field.Sequence注解即可 Step1 为PetShop增加一个字段codeTwo并增加@Field.Sequence注解 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import java.sql.Time; @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; } 图3-3-5-4 为PetShop增加一个字段codeTwo Step2 重启查看效果 进入店铺新增页面新增一个oinone宠物店铺004 图3-3-5-5 示例操作效果图 查看店铺列表页面，新增的记录中店铺编码2一列，已经按Field.Sequence注解要求地生成了 图3-3-5-6 示例操作效果图 二、编码注解说明，模型更多其他注解详见4.1.6【模型之元数据详解】…

  史, 昂

  2024年5月23日

  2.0K000

• 7.3 实战训练（全员营销为例）

  史, 昂

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

  1.2K000
• Oinone 7天入门到精通

  组件属性

  1. 通用属性 介绍组件和其属性之前，先介绍一些大部分组件通用支持的一些基础属性。 1.2 标题 标题是字段在当前页面的展示名称，标题默认为字段名称，可以修改。 1.2 占位提示 在未填写内容时，输入框或选择框内的浅色提示文字，仅用于提示，不会影响字段的值。 1.3 描述说明 一个字段的描述信息，通常用于说明当前字段的范围、注意事项等。描述说明大部分在组件的下方显示，特殊的是，分组的描述说明在标题的左侧。 1.4 默认值 创建数据时，有些字段大概率都是相同值，可设置默认值，减少添加人员的操作步骤，提高录入数据效率。 1.5 只读 设为只读时，字段可见，但不可编辑。 除了只读和非只读的对立选项，也可以设置条件只读，在设置的条件下才只读，条件不符合则非只读。 1.6 禁用 设为禁用时，字段可见，但不可编辑。 除了禁用和非禁用的对立选项，也可以设置条件禁用，在设置的条件下才禁用，条件不符合则非禁用。 1.7 隐藏 设为隐藏时，字段不可见，也不可编辑。但是在页面设计时，隐藏的组件也会展示，效果如下图。 除了隐藏和非隐藏的对立选项，也可以设置条件隐藏，在设置的条件下才隐藏，条件不符合则非隐藏。 1.8 必填 控制字段在当前页面是否必填，若设置为必填则在标题前会有红色的*作为标识。除了必填和非必填的对立选项，也可以设置条件必填，在设置的条件下才必填，条件不符合则非必填。 1.9 标题排列方式 字段的标题可以自定义横向排列还是纵向排列。每个字段组件都支持设置，设置后之间互不影响。除了组件支持自定义，表单、分组、选项卡也可以设置排列方式，对于这种布局容器类组件，设置后会将其容器内的所有组件的标题排列方式都改为所设置的值。 1.10 宽度 定义在页面中的宽度：占整行的比例，一般可选项有1/4、1/3、1/2、2/3、3/4、1。 其中1/2表示占当前行的一半；1表示占当前行一整行；以此类推。部分组件特殊，如富文本仅支持宽度为1，即占一整行。 2. 分组 分组是一个布局类组件，类似一个容器，可以把业务含义相近的内容放在这个分组容器内。 2.1 属性 2.1.1 标题 分组可以定义一个标题名称，标题显示在分组左上角，可以不设置标题。 2.1.2 描述说明 分组的描述说明显示在分组标题右侧。 2.1.3 标题排列方式 分组中的标题排列方式属性并不是控制分组的标题，而是控制分组内组件的标题。设置后对分组内的所有组件生效。 3. 选项卡 选项卡是一个布局类组件，类似一个容器，每个选项卡可以添加多个选项页，可以把业务含义相近的内容放在选项卡的选项页容器内。 3.1 选项卡属性 3.1.1 选项页排列方式 选中选项卡，可选择选项卡中的选项页排列方式：水平排列、竖直排列。默认是水平排列，效果如下图。 3.1.2 标题排列方式 选项卡中的标题排列方式控制选项卡内组件的标题。设置后对选项卡内的所有组件生效。 3.2 选项页属性 3.2.1 标题 选中选项页，显示选项页的属性设置，选项卡中的每个选项页支持设置标题。 3.2.2 标题排列方式 选项页中的标题排列方式控制选项页内组件的标题。设置后对选项页内的所有组件生效。同一个选项卡，不同选项页之间的标题排列方式可以不同。 4. 单行文本 单行文本输入框，常用于记录名称、身份证号或其他普通的文字内容。 4.1 创建字段 单行文本仅支持创建「文本」业务类型的字段，填写规则、内容和模型设计器端创建字段一致。 4.2 表单属性 4.2.1 通用属性 在表单中，单行文本可以设置一些通用的属性：标题、占位提示、描述说明、默认值、只读、隐藏、禁用、必填、标题排列方式、宽度。 4.2.2 文本类型 文本类型选项为文本或密码。若设置为文本，输入时内容是可见的；若设置为密码，输入时是不可见的密码形态，如下图： 4.2.3 最小/大长度 设置输入框输入内容的长度，输入框会根据设置的值进行校验。 最大长度默认为创建字段时填写的长度，且设置的最大长度不可以大于字段的长度 最小长度默认为空，为空则为不限制最小长度 4.2.4 输入格式 设置输入格式为网址或者身份证时，会进行格式的校验 无：默认为无，不会校验内容 网址：进行网址校验 身份证：进行身份证号校验，设置后，需要输入正确的身份证号 4.2.5 显示计数器 当需要用户关注输入内容长度时，可以开启显示计数器，在输入时会实时显示当前内容的长度。 4.2.6 显示清除按钮 若开启了清除按钮，则在输入框有内容时，点击清除按钮一键清除已有内容 5. 多行文本 多行文本输入框，常用于记录字数较多的文字，如意见、复杂备注等。 5.1 创建字段 多行文本仅支持创建「多行文本」业务类型的字段，填写规则、内容和模型设计器端创建字段一致。 5.2 表单属性 5.2.1 通用属性 在表单中，单行文本可以设置一些通用的属性：标题、占位提示、描述说明、默认值、只读、隐藏、禁用、必填、标题排列方式、宽度。 5.2.2 最小/大长度 设置输入框输入内容的长度，输入框会根据设置的值进行校验。 -最大长度默认为创建字段时填写的长度，且设置的最大长度不可以大于字段的长度 -最小长度默认为空，为空则为不限制最小长度 5.2.3 显示计数器 当需要用户关注输入内容长度时，可以开启显示计数器，在输入时会实时显示当前内容的长度。 5.2.5 显示清除按钮 若开启了清除按钮，则在输入框有内容时，点击清除按钮一键清除已有内容 6. 整数 整数输入框，常用于输入整数的天数、数量等，如果会出现小数，请使用小数组件。 6.1 创建字段 整数仅支持创建「整数」业务类型的字段，填写规则、内容和模型设计器端创建字段一致。 6.2 表单属性 6.2.1 通用属性 在表单中，整数可以设置一些通用的属性：标题、占位提示、描述说明、默认值、只读、隐藏、禁用、必填、标题排列方式、宽度。 6.2.2 最小/大值 设置整数输入框输入内容的最值，输入框会根据设置的最值进行校验。 最大值可设置的范围根据字段填写的长度转换，如设置长度为3，则最大值最大不可以超过999 截图 6.2.3 显示千分位 数字过长时，不便于查看，可开启显示千分位。 7. 小数 小数输入框，常用于输入金额、单价等，会出现小数的数值。 7.1 创建字段 小数仅支持创建「浮点型」业务类型的字段，填写规则、内容和模型设计器端创建字段一致。 7.2 表单属性 7.2.1 通用属性 在表单中，小数可以设置一些通用的属性：标题、占位提示、描述说明、默认值、只读、隐藏、禁用、必填、标题排列方式、宽度。 7.2.2 最小/大值 设置小数输入框输入内容的最值，输入框会根据设置的最值进行校验。 最大值可设置的范围根据字段填写的长度转换，如设置长度为3，则最大值最大不可以超过999 7.2.3 保留小数位数 支持设置小数的保留位数，设置后在页面中输入内容时，将进行校验 可设置的保留小数位数不可大于该字段的精度，如字段精度为2，则组件属性中的小数位数最大只能为2； 7.2.4 显示千分位 数字过长时，不便于查看，可开启显示千分位。 8. 下拉单选 从多个选项中下拉选择一个数据，作为数据值。选项可以是关联模型的数据，也可以是数据字典或布尔型开关。 8.1 创建字段 下拉单选支持创建三种业务类型的字段，分别是：多对一、布尔型、数据字典。 多对一：创建字段时需要选择关联的模型，关联模型的数据将作为下拉选项； 布尔型：下拉选项默认只有是、否； 数据字典：创建字段时需要选择数据字典，其数据字典项将作为下拉选项 8.2 表单属性 8.2.1 通用属性 在表单中，下拉单选可以设置一些通用的属性：标题、占位提示、描述说明、只读、隐藏、禁用、必填、标题排列方式、宽度。 8.2.2 选项类型…

  史, 昂

  2024年6月20日

  1.4K000
• Oinone 7天入门到精通

  3.4.1 构建第一个Function

  Function做为oinone的可管理的执行逻辑单元，是无处不在的 在3.3.3【模型的数据管理器】和3.3.2【模型类型】一文中的代理模型部分，涉及到包括在Action中自定义函数(action背后都对应一个Function)、重写queryPage的函数、以及独立抽取的公共逻辑函数，Function做为oinone的可管理的执行逻辑单元，是无处不在的。这也是为什么说oinone以函数为内在的原因。 一、构建第一个Function 因为数据管理器和数据构造器是oinone为模型自动赋予的Function，是内在数据管理能力。模型其他Function都需要用以下四种方式主动定义 伴随模型新增函数(举例) 它是跟模型的java类定义在一起，复用模型的命名空间。 Step1 为PetShop增加一个名为sayHello的Function package pro.shushi.pamirs.demo.api.model; …… //import @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"; …… //省略其他代码 @Function(openLevel = FunctionOpenEnum.API) @Function.Advanced(type=FunctionTypeEnum.QUERY) public PetShop sayHello(PetShop shop){ PamirsSession.getMessageHub().info("Hello:"+shop.getShopName()); return shop; } } 图3-4-1-1 代码示例 Step2 重启看效果 用graphQL工具Insomnia查看效果 用Insomnia模拟登陆 a. 创建一个login请求，用于保存login请求，为后续模拟登陆保留快捷方式 图3-4-1-2 创建一个login请求 b. 下面为登陆请求的GraphQL，请在post输入框中输入。如果请求输入框提示错误可以，可以点击schema 的Refresh Schema来刷新文档 mutation { pamirsUserTransientMutation { login(user: {login: "admin", password: "admin"}) { broken errorMsg errorCode errorField } } } 图3-4-1-3 登陆请求的GraphQL c. 点击Send按钮，我们可以看到登陆成功的反馈信息 图3-4-1-4 登陆成功的反馈信息 用Insomnia模拟访问PetShop的sayHello方法，gql的返回中，我们可以看到两个核心返回 a. 一是方法正常返回的shopName b. 二是“PamirsSession.getMessageHub().info("Hello:"+shop.getShopName())”代码执行的结果，在messages中有一个消息返回，更多消息机制详见4.1.23【框架之信息传递】 query{ petShopQuery{ sayHello(shop:{shopName:"cpc"}){ shopName } } } 图3-4-1-5 用Insomnia模拟访问PetShop的sayHello 图3-4-1-6 代码执行结果 用Insomnia模拟访问PetShopProxy的sayHello方法 效果同用Insomnia模拟访问PetShop的sayHello方法，体现Function的继承特性。 独立新增函数绑定到模型(举例) 独立方法定义类，并采用Model.model或Fun注解,但是value都必须是模型的编码，如@Model.model(PetShop.MODEL_MODEL)或@Fun(PetShop.MODEL_MODEL) Step1 提取PetShop的sayHello方法独立到PetShopService中 注释掉PetShop的sayHello方法 package pro.shushi.pamirs.demo.api.model; …… //import @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"; …… //省略其他代码 // @Function(openLevel = FunctionOpenEnum.API) // @Function.Advanced(type=FunctionTypeEnum.QUERY) // public PetShop sayHello(PetShop shop){ // PamirsSession.getMessageHub().info("Hello:"+shop.getShopName()); // return shop; // } } 图3-4-1-7 注释掉PetShop的sayHello 新增PetShopService接口类 接口的方法上要加上@Function注解，这样另模块依赖api包的时候，会自动注册远程服务的消费者 package pro.shushi.pamirs.demo.api.service; import pro.shushi.pamirs.demo.api.model.PetShop; import pro.shushi.pamirs.meta.annotation.Fun; import pro.shushi.pamirs.meta.annotation.Function; @Fun(PetShop.MODEL_MODEL) //@Model.model(PetShop.MODEL_MODEL) public interface…

  史, 昂

  2024年5月23日

  1.7K000