3.5.6.3 布局的配置

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

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

前沿

在前端领域中，布局可以分为三大块「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

3.5.2 构建第一个View

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

4.2.4 框架之网络请求-HttpClient

oinone提供统一的网络请求底座，基于graphql二次封装一、初始化 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setMiddleware() // 必须设置，请求回调。具体查看文章https://shushi.yuque.com/yqitvf/oinone/vwo80g http.setBaseURL() // 必须设置，后端请求的路径图4-2-4-1 初始化代码示例二、HttpClient详细介绍获取实例 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); 图4-2-4-2 获取实例接口地址 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setBaseURL('接口地址'); http.getBaseURL(); // 获取接口地址图4-2-4-3 接口地址请求头 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setHeader({key: value}); 图4-2-4-4 请求头 variables import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setExtendVariables((moduleName: string) => { return customFuntion(); }); 图4-2-4-5 variables 回调 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setMiddleware([middleware]); 图4-2-4-6 回调业务使用-query private http = HttpClient.getInstance(); private getTestQuery = async () => { const query = `gql str`; const result = await this.http.query('module name', query); console.log(result) return result.data[`xx`]['xx']; // 返回的接口，打印出result对象层次返回 }; 图4-2-4-7 业务使用-query 业务使用-mutate private http = HttpClient.getInstance(); private getTestMutate = async () => { const mutation = `gql str`; const result = await this.http.mutate('module name', mutation); console.log(result) return result.data[`xx`]['xx']; // 返回的接口，打印出result对象层次返回 }; 图4-2-4-8 业务使用-mutate 三、如何使用HttpClient 初始化在项目目录src/main.ts下初始化httpClient 初始化必须要做的事: 设置服务接口链接设置接口请求回调业务实战前文说到自定义新增宠物表单，让我们在这个基础上加入我们的httpClient; 第一步新增service.ts 图4-2-4-8 新增service.ts service.ts import { HttpClient }…

史, 昂
2024年5月23日
1.3K000
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天入门到精通

应用审计

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

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

2.1 数字化时代软件业的另一个本质变化

随着企业从信息化向数字化转变，软件公司提供的产品也由传统的企业管理软件向企业商业支撑软件发展。这一变化带来了许多技术上的挑战和机遇。在之前的章节中，我们提到企业的视角已经从内部管理转向业务在线和生态在线协同，这也带来了一系列新的需求。但是，我们常常会忽视这一变化所带来的对系统要求的变化。在本章中，我们将探讨这些技术上的变化，以及这些变化所带来的机遇和挑战。图2-1 从信息化到数字化软件本质变化在信息化时代，企业的业务围绕着内部管理效率展开，借鉴国外优秀的管理经验，企业将其管理流程固化下来，典型的例子是ERP项目。这类项目上线后往往长期稳定，不轻易更改，因此信息化时代软件的技术流派侧重于通过模型对业务进行全面支持。例如，SAP具有丰富的配置能力，将已有企业管理思想抽象到极致。其功能基本上可以通过配置来实现，因此其模型设计特别复杂。但是，我们也应该清楚地了解到，配置是面向已知问题的。在数字化时代，创新和业务迭代速度非常快，这种方法可能就不太适合了。我们知道，模型抽象是在设计时具有前瞻性的，一旦不适合，修改起来就会异常困难。随着数字化时代的到来，企业主的关注点已经从单一企业内部管理转变为了围绕企业上下游价值链的协同展开。这种变化给企业信息化系统提出了更高的要求，例如业务需求的响应速度、系统性能和用户体验等方面。现在，企业对软件不仅是管理需求的承载，更是业务在线化的承载。传统的重模型设计软件模式已经不再适用，因为业务本身不断创新和变化。因此，数字化时代需要新的软件技术流派，这种流派必须是轻模型加上低代码技术的结合体。通过模型抽象80%的通用场景，剩余的20%个性化需求可以通过技术手段来完成。这样的设计可以让每家企业的研发人员轻松理解模型，而不像ERP模型那样异常复杂，无法进行修改。此外，配合低代码技术可以快速研发和上线。如果说配置化是面向已知问题的，那么低代码就是面向未知问题设计的。虽然低代码的概念可以追溯到上个世纪80年代，当时是为了满足企业内部部门之间有协同需求，但又没有专业软件支撑，定制化开发又不划算的辅助场景。但现在它的核心原因是企业数字化的核心场景不稳定，变化很快，每家企业都有强烈的个性化需求。因此，低代码成为解决这些问题的核心手段，数字化时代的低代码需要具备处理复杂场景的能力，而不仅仅是围绕着内部管理展开。企业在数字化转型的过程中需要考虑到不仅是成熟的全链路业务解决方案，还要应对数字化场景的快速变化和持续创新的需求。为此，Oinone打造了一站式低代码商业支撑平台，从业务与技术两个维度来帮助企业建立开放、链接、安全的数字化平台。这将在水平和垂直两个维度上全面推动企业数字化转型。另外，低代码的另一个好处是完成了软件本身的数字化建设。通过基于元数据设计，元数据成为软件中数据、逻辑和交互的数据，软件结合AI可以有更多的创造可能。想象一下，AI了解软件的元数据后可以自我运作，人在极少情况下才需要参与，人机交互也会发生大的改变。未来的软件交互不再需要研发提前预设，而是能够实现用户所需即所呈现的效果。作为一家帮助企业进行数字化转型的软件公司，请问您的数字化转型是否已经完成呢？

史, 昂
2024年5月23日
1.2K000

登录后才能评论

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.5.2 构建第一个View

4.2.4 框架之网络请求-HttpClient

3.5.7.3 自定义布局

应用审计

2.1 数字化时代软件业的另一个本质变化

Leave a Reply