3.5.6.3 布局的配置

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

布局是将页面拆分成一个一个的小单元，按照上下中左右进行排列。

前沿

在前端领域中，布局可以分为三大块「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);
  grid-template-rows: 100px;
  text-shadow: 1px 1px 3px black;
  margin-bottom: 20px;
  color: salmon;
}

.tow-1 {
  grid-area: span 3 / span 1
}
.tow-2 {
  grid-area: span 1 / span 2
}

#grid-container-two div{
  border: solid white 2px;
  padding: 10px;
}

#grid-container-three{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 25%;
  grid-auto-rows: 200px; 
  grid-auto-columns: 100px;
  gap: 2px;
  color: black;
  text-decoration: underline;
  margin-bottom: 2%;
}

#grid-container-three div{
  background-color: salmon;
  border: solid black 5px;
  padding: 10px;
}

.grid-column{
  grid-column: 5 / 7;
}

.grid{
  grid-row: 1 /1;
  grid-column: 4 / 5;
}

.grid-container-inline{
  display: inline-grid;
  grid-template-columns: repeat(2, 200px);
  grid-template-rows: 100px 100px;
  gap: 2px;
  margin-bottom: 20px;
}

.grid-container-inline div{
  padding: 35px;
  border: solid black 2px;
  background-color: PINK;
}

Resources1× 0.5× 0.25×Rerun

图3-5-6-23 Grid布局示意

从上面的代码可以看出，Grid天生的支持整体布局，它甚至可以移行换位，它的强大之处可以颠覆你对布局的认知。

缺陷

虽然Grid很强大，但是它有一个致命的缺陷，那就是兼容性。

图3-5-6-24 Grid兼容性

从上图可以看出，IE10以下、Chrome56以下、Firefox51以下等等都不支持该属性。

平台布局

名词解释

-布局容器相关组件：row 、col 、containers 和container这四个组件的统称。

-基础布局属性：包括cols 、colSpan、span 和offset。

概述

一般的，我们对大多数组件提供了基本的布局属性配置，包括：

cols：将内容区中的每行拆分的列数；当前元素未配置该属性时，将取离当前元素最近父元素属性。默认：1
colSpan：当前元素相对于父元素在每行中所占列比例；优先于span。默认：FULL
- FULL：1
- HALF：1/2
- THIRD：1/3
- TWO_THIRDS：2/3
- QUARTER：1/4
- THREE_QUARTERS：3/4
span：当前元素相对于父元素在每行中所占列数。默认：cols
offset：当前元素相对于原所在列的偏移列数。

我们规定了默认栅格数为24，基础布局属性均是相对于默认栅格数而言的。

在使用基础布局属性时，请尽可能保证公式 (24 / cols) * span 以及以下列举的公式，其计算结果为整数，否则可能出现不符合预期的结果。

在使用colSpan时，span的计算公式为：span = cols * colSpan

在使用offset时，offset的计算公式为：offset = (24 / cols) * offset

平台内置组件

下面列举了平台内置组件在Form和Detail视图中使用时所支持的布局相关属性，包括可能影响部分区域显隐的相关属性。

表头说明：

tag：xml配置标签
widget：组件名称；xml属性；多个值属于别称。如：widget="form"
配置项：xml属性名称。
可选值：声明支持的配置项属性类型，不可识别或不可解析时将采用默认值。
作用：对配置项的简单描述，部分布局属性在上方进行了描述，不再赘述。

tag	widget	配置项	可选值	默认值
view	cols	number	1
element	form	cols	number	1
colSpan	enum	FULL
span	number	cols
offset	number
detail	cols	number	1
colSpan	enum	FULL
span	number	cols
offset	number
DateTimeRangePicker	colSpan	enum	FULL
span	number	cols
offset	number
DateRangePicker	colSpan	enum	FULL
span	number	cols
offset	number
TimeRangePicker	colSpan	enum	FULL
span	number	cols
offset	number
colSpan	enum	FULL
YearRangePicker	span	number	cols
offset	number
field	任意	colSpan	enum	FULL
span	number	cols
offset	number
pack	fieldset/group	cols	number	1
colSpan	enum	FULL
span	number	cols
offset	number
title	string	分组	标题；空字符串或不填，则隐藏标题区；
tabs	cols	number	1
colSpan	enum	FULL
span	number	cols
offset	number
tab	cols	number	1
title	string	选项页	标题；必填；空字符串或不填则显示默认值；
row	cols	number	1
align	top/middle/bottom	垂直对齐方式
justify	start/end/center/space-around/space-between	水平对齐方式
gutter	number,number?示例：24 = 24,2412,12	24,24	水平/垂直间距
wrap	boolean	true	是否允许换行
col	cols	number	1
colSpan	enum	FULL
span	number	cols
offset	number	偏移单元格数
mode/widthType	manual/full	manual	列模式；手动/自动填充；使用自动填充时，将忽略span、offset属性；
containers	cols	number	1
align	top/middle/bottom	垂直对齐方式
justify	start/end/center/space-around/space-between	水平对齐方式
gutter	number,number?示例：24 = 24,2412,12	0,24	水平/垂直间距
wrap	boolean	true	是否允许换行
container	cols	number	1
colSpan	enum	FULL
span	number	cols
offset	number	偏移单元格数
align	top/middle/bottom	垂直对齐方式
justify	start/end/center/space-around/space-between	水平对齐方式
gutter	number,number?示例：24 = 24,2412,12	0,24	水平/垂直间距
wrap	boolean	true	是否允许换行
mode/widthType	manual/full	full	列模式；手动/自动填充；使用自动填充时，将忽略span、offset属性；

表3-5-6-11 平台内置组件

基础布局

    基础布局提供了在不使用任何布局容器相关组件的情况下，仅使用cols、span、offset这三个属性控制行列的布局能力。

    其本质上是flex布局的扩展，但依旧无法脱离flex布局本身的限制，即元素始终是自上而下、自左向右紧凑的。

    下面将使用fieldset和tabs/tab组件来介绍各个属性在实际场景中的使用。

示例1：默认撑满一行

<pack widget="fieldset" title="示例1">
    <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
    <field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
</pack>

图3-5-6-25 示例1：默认撑满一行

结果展示

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

示例2：一行两列：cols=2; colSpan=HALF/span=1

<pack widget="fieldset" title="示例2" cols="2">
    <field data="code" widget="Input" colSpan="HALF" label="编码" placeholder="请输入" required="true" />
    <field data="name" widget="Input" colSpan="HALF" label="名称" placeholder="请输入" required="true" />
</pack>
------------------------------ 或 ------------------------------
<pack widget="fieldset" title="示例2" cols="2">
    <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    <field data="name" widget="Input" span="1" label="名称" placeholder="请输入" required="true" />
</pack>

图3-5-6-27 示例2代码

结果展示

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

示例3：使用offset实现中间空一个字段空间的布局

<pack widget="fieldset" title="示例3" cols="3">
    <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    <field data="name" widget="Input" span="1" offset="1" label="名称" placeholder="请输入" required="true" />
</pack>

PS：offset的作用有限，offset最优实践的前提是在同一行中进行偏移，要实现特殊布局功能，请使用自由布局相关布局能力。

图3-5-6-29 使用offset实现中间空一个字段空间的布局

结果展示

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

示例4：属性cols就近取值

<!-- 所有tab将使用cols="2"属性 -->
<pack widget="tabs" cols="2">
    <pack widget="tab" title="示例4-1">
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    </pack>
    <pack widget="tab" title="示例4-2">
        <field data="name" widget="Input" span="1" label="名称" placeholder="请输入" required="true" />
    </pack>
</pack>

图3-5-6-31 示例4：属性cols就近取值

结果展示

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

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

<!-- 所有tab将使用cols="2"属性 -->
<pack widget="tabs" cols="2">
    <!-- 特指该tab使用cols="1"属性，其他tab继续使用tabs配置的cols="2"属性 -->
    <pack widget="tab" title="示例4-1" cols="1">
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    </pack>
    <pack widget="tab" title="示例4-2">
        <field data="name" widget="Input" span="1" label="名称" placeholder="请输入" required="true" />
    </pack>
</pack>

图3-5-6-34 实例4：tab属性生效

结果展示

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

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

自由布局

自由布局提供了无法通过基础布局能力实现的其他布局能力，总的来说，自由布局是对grid布局和flex布局的结合，它既拥有grid布局对页面进行单元格拆/合的能力，在每个单元格中，使用flex布局进行紧凑排列。

下面将使用fieldset组件介绍各个属性在实际场景中的使用。

组件组合

row/col：两个组件共同形成行和列，在一行中拆分成24个栅格，每个列的跨度不超过24。当一行中，所有列的跨度和超过24时，将会自动换行。

containers/row/container：三个组件共同形成一个二维网格，以此实现grid布局的基本能力。每个单元格（container）中使用flex布局。

PS：以下示例为了体现布局效果，可能会出现重复字段定义，业务上在使用时需要避免这种定义。

示例1：仅使用1/2左侧空间

小贴士：在使用row和col组合时，如果在一个col中有且仅有一个子元素，则col可以缺省。col相关属性可以配置在该子元素上。

<pack widget="fieldset" title="示例1">
    <pack widget="row" cols="2">
        <!-- 此处显式定义col组件，field标签上的基础布局属性将失效 -->
        <pack widget="col" span="1">
            <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
        </pack>
    </pack>
    <pack widget="row" cols="2">
        <pack widget="col" span="1">
            <field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
        </pack>
    </pack>
</pack>
------------------------------ 或 ------------------------------
<pack widget="fieldset" title="示例1">
    <pack widget="row" cols="2">
        <!-- 此处缺省col组件，field标签上的基础布局属性可生效 -->
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    </pack>
    <pack widget="row" cols="2">
        <field data="name" widget="Input" span="1" label="名称" placeholder="请输入" required="true" />
    </pack>
</pack>

图3-5-6-37 仅使用1/2左侧空间

结果展示

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

示例2：使用布局容器实现中间空一个字段空间的布局

<pack widget="fieldset" title="示例2">
    <pack widget="containers">
        <pack widget="row">
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container"></pack>
            <pack widget="container">
                <field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
            </pack>
        </pack>
    </pack>
</pack>

图3-5-6-39 使用布局容器实现中间空一个字段空间的布局

结果展示

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

示例3：一行5列（基础布局属性公式无法计算出整数的情况）

<pack widget="fieldset" title="示例3">
    <pack widget="containers">
        <pack widget="row">
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
                <field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
              <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
              <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
              <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
        </pack>
    </pack>
</pack>

图3-5-6-41 一行5列（基础布局属性公式无法计算出整数的情况）

结果展示

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

示例4：共2行，其中1行未3列，另1行为2列

该示例可以使用任何一种组件组合都可以实现，结果一致。

<!-- 使用containers/row/container -->
<pack widget="fieldset" title="示例4">
    <pack widget="containers">
        <pack widget="row">
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
                <field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
        </pack>
        <pack widget="row">
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
        </pack>
    </pack>
</pack>
------------------------------ 或 ------------------------------
<!-- 使用row/col，其中col缺省 -->
<pack widget="fieldset" title="示例4">
    <pack widget="row" cols="3">
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
        <field data="name" widget="Input" span="1" label="名称" placeholder="请输入" required="true" />
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    </pack>
    <pack widget="row" cols="2">
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
        <field data="code" widget="Input" span="1" label="编码" placeholder="请输入" required="true" />
    </pack>
</pack>

图3-5-6-43 示例为共2行，其中1行未3列，另1行为2列

结果展示

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

示例5：布局容器的垂直居中

左侧容器高度被子元素撑开，右侧容器在垂直方向居中

<pack widget="fieldset" title="示例5">
    <pack widget="containers">
        <pack widget="row">
            <pack widget="container">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
                <field data="name" widget="Input" label="名称" placeholder="请输入" required="true" />
            </pack>
            <pack widget="container" align="middle">
                <field data="code" widget="Input" label="编码" placeholder="请输入" required="true" />
            </pack>
        </pack>
    </pack>
</pack>

图3-5-6-45 设置布局容器的垂直居中

结果展示

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

举例

这里拿PetTalent举例，仿造教程上面效果，除了例子中的效果，自己可以做更多的尝试

Step1 修改PetTalent的form视图如下

给creater字段增加一个属性配置 offset="1"

<field data="creater" widget="SSConstructSelect" offset="1" submitFields="creater,name" responseFields="name"/>

图3-5-6-47 给creater字段增加一个属性配置 offset="1"

Step2 重启看效果

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

Step3 修改PetTalent的form视图如下

给【基础信息】增加一个属性cols="4"，给name字段增加一个属性span="2"，给creater和nick字段增加一个属性span="1"：

<pack widget="group" title="基础信息" cols="4">
    <field invisible="true" data="id" label="ID" readonly="true"/>
    <field data="name" label="达人" required ="true" span="2"/>
    <field data="nick" compute="activeRecord.name" readonly = "true" span="1"/>
    <field data="creater" widget="SSConstructSelect"  submitFields="creater,name" responseFields="name" span="1"/>
    <field data="dataStatus" label="数据状态" >
        <options>
            <!-- option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/ -->
            <option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/>
            <option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/>
            <option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/>
        </options>
    </field>
    <field invisible="true" data="createDate" label="创建时间" readonly="true"/>
    <field invisible="true" data="writeDate" label="更新时间" readonly="true"/>
    <field data="createUid" label="创建人id"/>
    <field data="writeUid" label="更新人id"/>
</pack>

图3-5-6-49 修改PetTalent的form视图

Step4 重启看效果

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

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

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

Oinone 7天从入门到精通

史, 昂数式管理员

0 0

3.5.6.4 动作的配置

上一篇 2024年5月23日 am9:16

3.5.6.2 视图的配置

下一篇 2024年5月23日 am9:18

Oinone 7天入门到精通

3.4.3.1 面向对象-继承与多态

本节为小伙伴们介绍，Function的面向对象的特性：继承与多态；一、继承我们在3.4.1【构建第一个Function】一文中伴随模型新增函数和独立类新增函数绑定到模型部分都是在父模型PetShop新增了sayHello的Function，同样其子模型都具备sayHello的Function。因为我们是通过Function的namespace来做依据的，子模型在继承父模型的sayHello函数后会以子模型的编码为namespace，名称则同样为sayHello。二、多态（举例） oinone的多态，我们只提供覆盖功能，不提供重载，因为oinone相同name和fun的情况下不会去识别参数个数和类型。 Step1 为PetShop新增hello函数 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; } @Function(name = "sayHello2",openLevel = FunctionOpenEnum.API) @Function.Advanced(type= FunctionTypeEnum.QUERY) @Function.fun("sayHello2") public PetShop sayHello(PetShop shop, String s) { PamirsSession.getMessageHub().info("Hello:"+shop.getShopName()+",s:"+s); return shop; } @Function(openLevel = FunctionOpenEnum.API) @Function.Advanced(type= FunctionTypeEnum.QUERY) public PetShop hello(PetShop shop){ PamirsSession.getMessageHub().info("Hello:"+shop.getShopName()); return shop; } } 图3-4-3-1 为PetShop新增hello函数 Step2 为PetShopProxyB新增对应的三个函数其中PetShopProxyB新增的hello函数，在java中是重载了hello，在代码中new PetShopProxyB()是可以调用父类的sayHello单参方法，也可以调用本类的双参方法。但在oinone的体系中对于PetShopProxyB只有一个可识别的Function就是双参的sayHello package pro.shushi.pamirs.demo.api.proxy; import pro.shushi.pamirs.demo.api.model.PetCatItem; import pro.shushi.pamirs.demo.api.model.PetShop; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Function; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.api.session.PamirsSession; import pro.shushi.pamirs.meta.enmu.FunctionOpenEnum; import pro.shushi.pamirs.meta.enmu.FunctionTypeEnum; import pro.shushi.pamirs.meta.enmu.ModelTypeEnum; import java.util.List; @Model.model(PetShopProxyB.MODEL_MODEL) @Model.Advanced(type = ModelTypeEnum.PROXY,inherited ={PetShopProxy.MODEL_MODEL,PetShopProxyA.MODEL_MODEL} ) @Model(displayName = "宠物店铺代理模型B",summary="宠物店铺代理模型B") public class PetShopProxyB extends PetShop { public static final String MODEL_MODEL="demo.PetShopProxyB"; @Field.one2many @Field(displayName = "萌猫商品列表") @Field.Relation(relationFields = {"id"},referenceFields = {"shopId"}) private List<PetCatItem> catItems; @Function(openLevel = FunctionOpenEnum.API) @Function.Advanced(type= FunctionTypeEnum.QUERY) public PetShop sayHello(PetShop shop){ PamirsSession.getMessageHub().info("PetShopProxyB Hello:"+shop.getShopName()); return shop; } @Function(name = "sayHello2",openLevel = FunctionOpenEnum.API) @Function.Advanced(type= FunctionTypeEnum.QUERY) @Function.fun("sayHello2") public PetShop sayHello(PetShop shop,String hello){ PamirsSession.getMessageHub().info("PetShopProxyB say:"+hello+","+shop.getShopName()); return shop; } @Function(openLevel = FunctionOpenEnum.API)…

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

3.3.10 字段类型之关系描述的特殊场景

在3.3.9【字段类型之关系与引用】一文中已经描述了各种关系字段的常规写法，还有一些特殊场景如：关系映射中存在常量，或者M2M中间表是大于两个字段构成。举例说明关系字段-高级用法场景描述 PetTalent模型增加talentType字段，PetItem与PetTalent的多对多关系增加talentType（达人类型），PetItemRelPetTalent 中间表维护petItemId、petTalentId以及talentType，PetDogItem和PetCatItem分别重写petTalents 字段，关系中增加常量描述。示意图如下实际操作步骤： Step1 新增 TalentTypeEnum package pro.shushi.pamirs.demo.api.enumeration; import pro.shushi.pamirs.meta.annotation.Dict; import pro.shushi.pamirs.meta.common.enmu.BaseEnum; @Dict(dictionary = TalentTypeEnum.DICTIONARY,displayName = "达人类型") public class TalentTypeEnum extends BaseEnum<TalentTypeEnum,Integer> { public static final String DICTIONARY ="demo.TalentTypeEnum"; public final static TalentTypeEnum DOG =create("DOG",1,"狗达人","狗达人"); public final static TalentTypeEnum CAT =create("CAT",2,"猫达人","猫达人"); } Step2 PetTalent模型增加talentType字段 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.demo.api.enumeration.TalentTypeEnum; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; @Model.model(PetTalent.MODEL_MODEL) @Model(displayName = "宠物达人",summary="宠物达人",labelFields ={"name"}) public class PetTalent extends AbstractDemoIdModel{ public static final String MODEL_MODEL="demo.PetTalent"; @Field(displayName = "达人") private String name; @Field(displayName = "达人类型") private TalentTypeEnum talentType; } Step3 修改PetItem的petTalents字段，在关系描述中增加talentType（达人类型） @Field.many2many(relationFields = {"petItemId"},referenceFields = {"petTalentId","talentType"},through = "PetItemRelPetTalent") @Field.Relation(relationFields = {"id"}, referenceFields = {"id","talentType"}) @Field(displayName = "推荐达人",summary = "推荐该商品的达人们") private List<PetTalent> petTalents; Step4 PetDogItem增加petTalents字段，重写父类PetItem的关系描述 talentType配置为常量，填入枚举的值增加domain描述用户页面选择的时候自动过滤出特定类型的达人，RSQL用枚举的name @Field.many2many(relationFields = {"petItemId"},referenceFields = {"petTalentId","talentType"},through = "PetItemRelPetTalent") @Field.Relation(relationFields = {"id"}, referenceFields = {"id","talentType"}) @Field(displayName = "推荐达人",summary = "推荐该商品的达人们") private List<PetTalent> petTalents; Step5 PetCatItem增加petTalents字段，重写父类PetItem的关系描述 talentType配置为常量，填入枚举的值增加domain描述用户页面选择的时候自动过滤出特定类型的达人，RSQL用枚举的name @Field(displayName = "推荐达人") @Field.many2many( through = "PetItemRelPetTalent", relationFields = {"petItemId"}, referenceFields = {"petTalentId","talentType"} ) @Field.Relation(relationFields = {"id"}, referenceFields = {"id", "#2#"}, domain = " talentType == CAT") private List<PetTalent> petTalents; Step6 清除中间表demo_core_pet_item_rel_pet_talent的数据记录清除PetItem与PetTalent的多对多中间表demo_core_pet_item_rel_pet_talent的数据记录 Step7 重启看效果修改达人记录，选择不同达人类型 PetItem、PetCatItem、PetDogItem不同的交互页面

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

5.2 CDM之工程模式

两种工程模式介绍 oinone推荐的两种工程模式都保留互联网特性，如跟业务无关的基础平台还是采用平台化思路建设。二种侧重点差异如下第一种：比较适合企业采用多供应商联合开发场景，先以业务区分，各个业务线有独立的领域平台，最大限度保持不同业务线的独立性，有利于各个业务线独立发展（目前oinone上层星空系列产品采用这种工程模式，因为我们期望的时候帮助企业构建软件生态，必然要考虑不同供应商联合开发场景）第二种：比较接近传统互联网架构，先按平台领域区分，如商品领域：商品平台做总工程，但里面按业务区分模块分子工程来保持业务相互独立，相对于第一种把领域的代码放一起，带来好处强化大家思考模型通用性。但不适用于跨公司主体间配合。图5-2-1 Oinone-CDM的两种工程模式注意事项： oinone兼容传统互联网架构不管哪种模式，都需要解决CDM的维护问题 CDM维护的常见问题： Q：CDM层缺少模型怎么办？ A：CDM层模型是逐步完善和丰富的。如果是特定业务自己需要的模型，这类模型无通用性。则加到自己的工程中；如果是通用的，则架构组确定是否需要纳入到CDM。 Q：CDM层已有的模型缺少字段怎么办？ A：CDM层模型的字段也是逐步完善和丰富的，通用的字段在架构组确定后也会被吸收进来 Q：CDM层不同业务线相互影响怎么办？ A：扩展字段最好带上自有前缀标志，如果觉得通用则提交架构组走模型缺少字段加入 Q：CDM层某模型新增加了的字段，但原先业务线已经加了相同含义字段 A：业务线可以把自己的字段related到CDM增加的新字段，并做数据迁移

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

4.2.3 框架之SPI机制

SPI(Service Provider Interface)服务提供接口，是一套用来被第三方实现或者扩展的API，它可以用来启用框架扩展和替换组件，简单来说就是用来解耦，实现组件的自由插拔，这样我们就能在平台提供的基础组件外扩展新组件或覆盖平台组件。目前定义SPI组件 ViewWidget 视图组件 FieldWidget 字段组件 ActionWidget 动作组件表4-2-3-1 目前定义SPI组件前提知识点使用 TypeScript 装饰器(注解)装饰你的代码 1. 通过注解定义一种SPI接口(Interface) @SPI.Base<IViewFilterOptions, IView>('View', ['id', 'name', 'type', 'model', 'widget']) export abstract class ViewWidget<ViewData = any> extends DslNodeWidget { } 图4-2-3-1 代码示意 2. 通过注解注册提供View类型接口的一个或多个实现 @SPI.Base<IViewFilterOptions, IView>('View', ['id', 'name', 'type', 'model', 'widget']) export abstract class ViewWidget<ViewData = any> extends DslNodeWidget { } 图4-2-3-2 代码示意 3. 视图的xml内通过配置来调用已定义的一种SPI组件 <view widget="form" model="demo.shop"> <field name="id" /> </view> 图4-2-3-3 代码示意图4-2-3-4 组件继承示意图当有多个服务提供方时，按以下规则匹配出最符合条件的服务提供方 SPI匹配规则 SPI组件没有严格的按匹配选项属性限定，而是一个匹配规则按widget最优先匹配，配置了widget等于是指定了需要调用哪个widget，此时其他属性直接忽略按最大匹配原则（匹配到的属性越多优先级越高）按后注册优先原则

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

应用审计

1. 整体介绍应用审计是基于模型字段记录用户操作留痕记录，通过定义审计规则，平台基于审计规则订阅的字段记录形成日志。平台名词概念：应用日志：针对已订阅的审计规则记录用户操作信息，是用户在各应用中操作行为留痕记录。审计规则：业务审计中，数据变化订阅记录的规则。操作入口：应用中心——业务审计应用。 2. 审计规则审计规则是指定义审计过程订阅数据变化的信息，根据模型、订阅到具体字段内容变化形成应用日志。如订阅销售订单的备注，销售订单S20231001888，订单备注【尽快发货】，备注修改为【需易碎品包装】，审计规则为：销售订单模型，订阅【备注】。操作包括：新增、编辑、删除。 2.1. 新增新增时，定义审计规则名称，选择需要审计的模型，指定需要订阅的字段信息，同时可以指定关联关系的字段。需要注意：每个模型仅限定义单条审计规则。 2.2. 编辑编辑同新增操作，不做赘述。 2.3. 删除删除规则后，平台将不再监听对应数据的变更日志，请慎重删除。 3. 应用日志应用日志是针对已订阅的审计规则记录用户操作信息。记录操作用户、IP、登录设备、位置、订阅的字段变化内容。应用日志详情 4. 业务表达 4.1. 展示效果表格-行操作—日志记录详情—日志记录 4.2. 操作步骤 Step1：在应用中心，需要维护业务应用依赖业务审计应用；操作入口：应用中心，找到业务应用——编辑，依赖模块选择业务审计。 Step2：配置审计规则；操作入口：业务审计应用——审计规则——新增规则。 Step2：界面设计器配置日志记录；操作入口：界面设计器，找到需要配置的页面——模型组件，将动作区的日志记录拖动到页面中。

史, 昂
2024年1月20日
668000

登录后才能评论

3.5.6.3 布局的配置

前沿

Flex布局

优点

缺陷

Grid布局

缺陷

平台布局

名词解释

概述

平台内置组件

基础布局

示例1：默认撑满一行

示例2：一行两列：cols=2; colSpan=HALF/span=1

示例3：使用offset实现中间空一个字段空间的布局

示例4：属性cols就近取值

自由布局

组件组合

示例1：仅使用1/2左侧空间

示例2：使用布局容器实现中间空一个字段空间的布局

示例3：一行5列（基础布局属性公式无法计算出整数的情况）

示例4：共2行，其中1行未3列，另1行为2列

示例5：布局容器的垂直居中

举例

Step1 修改PetTalent的form视图如下

Step2 重启看效果

Step3 修改PetTalent的form视图如下

Step4 重启看效果

相关推荐

3.4.3.1 面向对象-继承与多态

3.3.10 字段类型之关系描述的特殊场景

5.2 CDM之工程模式

4.2.3 框架之SPI机制

应用审计

Leave a Reply