组件属性

1. 通用属性

介绍组件和其属性之前,先介绍一些大部分组件通用支持的一些基础属性。

1.2 标题

标题是字段在当前页面的展示名称,标题默认为字段名称,可以修改。

image.png

1.2 占位提示

在未填写内容时,输入框或选择框内的浅色提示文字,仅用于提示,不会影响字段的值。

image.png

1.3 描述说明

一个字段的描述信息,通常用于说明当前字段的范围、注意事项等。描述说明大部分在组件的下方显示,特殊的是,分组的描述说明在标题的左侧。

image.png

1.4 默认值

创建数据时,有些字段大概率都是相同值,可设置默认值,减少添加人员的操作步骤,提高录入数据效率。

image.png

1.5 只读

设为只读时,字段可见,但不可编辑。

除了只读和非只读的对立选项,也可以设置条件只读,在设置的条件下才只读,条件不符合则非只读。

image.png

1.6 禁用

设为禁用时,字段可见,但不可编辑。

除了禁用和非禁用的对立选项,也可以设置条件禁用,在设置的条件下才禁用,条件不符合则非禁用。

image.png

1.7 隐藏

设为隐藏时,字段不可见,也不可编辑。但是在页面设计时,隐藏的组件也会展示,效果如下图。

除了隐藏和非隐藏的对立选项,也可以设置条件隐藏,在设置的条件下才隐藏,条件不符合则非隐藏。

image.png

1.8 必填

控制字段在当前页面是否必填,若设置为必填则在标题前会有红色的*作为标识。除了必填和非必填的对立选项,也可以设置条件必填,在设置的条件下才必填,条件不符合则非必填。

image.png

1.9 标题排列方式

字段的标题可以自定义横向排列还是纵向排列。每个字段组件都支持设置,设置后之间互不影响。除了组件支持自定义,表单、分组、选项卡也可以设置排列方式,对于这种布局容器类组件,设置后会将其容器内的所有组件的标题排列方式都改为所设置的值。

image.png

1.10 宽度

定义在页面中的宽度:占整行的比例,一般可选项有1/4、1/3、1/2、2/3、3/4、1。

其中1/2表示占当前行的一半;1表示占当前行一整行;以此类推。部分组件特殊,如富文本仅支持宽度为1,即占一整行。

image.png

2. 分组

分组是一个布局类组件,类似一个容器,可以把业务含义相近的内容放在这个分组容器内。

2.1 属性

2.1.1 标题

分组可以定义一个标题名称,标题显示在分组左上角,可以不设置标题。

2.1.2 描述说明

分组的描述说明显示在分组标题右侧。

image.png

2.1.3 标题排列方式

分组中的标题排列方式属性并不是控制分组的标题,而是控制分组内组件的标题。设置后对分组内的所有组件生效。

image.png

3. 选项卡

选项卡是一个布局类组件,类似一个容器,每个选项卡可以添加多个选项页,可以把业务含义相近的内容放在选项卡的选项页容器内。

image.png

3.1 选项卡属性

3.1.1 选项页排列方式

选中选项卡,可选择选项卡中的选项页排列方式:水平排列、竖直排列。默认是水平排列,效果如下图。

image.png

3.1.2 标题排列方式

选项卡中的标题排列方式控制选项卡内组件的标题。设置后对选项卡内的所有组件生效。

image.png

3.2 选项页属性

3.2.1 标题

选中选项页,显示选项页的属性设置,选项卡中的每个选项页支持设置标题。

3.2.2 标题排列方式

选项页中的标题排列方式控制选项页内组件的标题。设置后对选项页内的所有组件生效。同一个选项卡,不同选项页之间的标题排列方式可以不同。

image.png

4. 单行文本

单行文本输入框,常用于记录名称、身份证号或其他普通的文字内容。

4.1 创建字段

单行文本仅支持创建「文本」业务类型的字段,填写规则、内容和模型设计器端创建字段一致。

image.png

4.2 表单属性

4.2.1 通用属性

在表单中,单行文本可以设置一些通用的属性:标题、占位提示、描述说明、默认值、只读、隐藏、禁用、必填、标题排列方式、宽度。

image.png

4.2.2 文本类型

文本类型选项为文本或密码。若设置为文本,输入时内容是可见的;若设置为密码,输入时是不可见的密码形态,如下图:

image.pngimage.png

4.2.3 最小/大长度

设置输入框输入内容的长度,输入框会根据设置的值进行校验。

  • 最大长度默认为创建字段时填写的长度,且设置的最大长度不可以大于字段的长度
  • 最小长度默认为空,为空则为不限制最小长度

image.png

image.png

4.2.4 输入格式

设置输入格式为网址或者身份证时,会进行格式的校验

  • 无:默认为无,不会校验内容
  • 网址:进行网址校验
  • 身份证:进行身份证号校验,设置后,需要输入正确的身份证号

image.png

4.2.5 显示计数器

当需要用户关注输入内容长度时,可以开启显示计数器,在输入时会实时显示当前内容的长度。

image.png

4.2.6 显示清除按钮

若开启了清除按钮,则在输入框有内容时,点击清除按钮一键清除已有内容

image.pngimage.png

5. 多行文本

多行文本输入框,常用于记录字数较多的文字,如意见、复杂备注等。

5.1 创建字段

多行文本仅支持创建「多行文本」业务类型的字段,填写规则、内容和模型设计器端创建字段一致。

image.png

5.2 表单属性

5.2.1 通用属性

在表单中,单行文本可以设置一些通用的属性:标题、占位提示、描述说明、默认值、只读、隐藏、禁用、必填、标题排列方式、宽度。

image.png

5.2.2 最小/大长度

设置输入框输入内容的长度,输入框会根据设置的值进行校验。

-最大长度默认为创建字段时填写的长度,且设置的最大长度不可以大于字段的长度

-最小长度默认为空,为空则为不限制最小长度

image.png

5.2.3 显示计数器

当需要用户关注输入内容长度时,可以开启显示计数器,在输入时会实时显示当前内容的长度。

image.png

5.2.5 显示清除按钮

若开启了清除按钮,则在输入框有内容时,点击清除按钮一键清除已有内容

image.png

6. 整数

整数输入框,常用于输入整数的天数、数量等,如果会出现小数,请使用小数组件。

6.1 创建字段

整数仅支持创建「整数」业务类型的字段,填写规则、内容和模型设计器端创建字段一致。

image.png

6.2 表单属性

6.2.1 通用属性

在表单中,整数可以设置一些通用的属性:标题、占位提示、描述说明、默认值、只读、隐藏、禁用、必填、标题排列方式、宽度。

image.png

6.2.2 最小/大值

设置整数输入框输入内容的最值,输入框会根据设置的最值进行校验。

  • 最大值可设置的范围根据字段填写的长度转换,如设置长度为3,则最大值最大不可以超过999

截图

image.png

6.2.3 显示千分位

数字过长时,不便于查看,可开启显示千分位。

image.png

image.png

7. 小数

小数输入框,常用于输入金额、单价等,会出现小数的数值。

7.1 创建字段

小数仅支持创建「浮点型」业务类型的字段,填写规则、内容和模型设计器端创建字段一致。

image.png

7.2 表单属性

7.2.1 通用属性

在表单中,小数可以设置一些通用的属性:标题、占位提示、描述说明、默认值、只读、隐藏、禁用、必填、标题排列方式、宽度。

image.png

7.2.2 最小/大值

设置小数输入框输入内容的最值,输入框会根据设置的最值进行校验。

  • 最大值可设置的范围根据字段填写的长度转换,如设置长度为3,则最大值最大不可以超过999

image.png

7.2.3 保留小数位数

支持设置小数的保留位数,设置后在页面中输入内容时,将进行校验

  • 可设置的保留小数位数不可大于该字段的精度,如字段精度为2,则组件属性中的小数位数最大只能为2;

image.png

image.png

7.2.4 显示千分位

数字过长时,不便于查看,可开启显示千分位。

image.png

8. 下拉单选

从多个选项中下拉选择一个数据,作为数据值。选项可以是关联模型的数据,也可以是数据字典或布尔型开关。

8.1 创建字段

下拉单选支持创建三种业务类型的字段,分别是:多对一、布尔型、数据字典。

image.png

  • 多对一:创建字段时需要选择关联的模型,关联模型的数据将作为下拉选项;
  • 布尔型:下拉选项默认只有是、否;
  • 数据字典:创建字段时需要选择数据字典,其数据字典项将作为下拉选项

8.2 表单属性

8.2.1 通用属性

在表单中,下拉单选可以设置一些通用的属性:标题、占位提示、描述说明、只读、隐藏、禁用、必填、标题排列方式、宽度。

image.pngimage.png

8.2.2 选项类型

可以针对下拉单选的选项进行属性设置,同时,根据字段类型的不同,可以设置的内容也不同。

8.2.2.1 多对一选项

当下拉单选对应的是多对一型字段时,选项类型为“关联模型字段”。可以设置模型中的哪个(些)字段作为选项名称,以及哪些字段可以进行选项搜索。

image.png

  • 选项字段:可以选择关联模型的某个或某些字段。
  • 选择了【创建时间】和【创建人id】作为选项,那么在页面运行下拉选择数据时,创建时间和创建人id的值将会拼接起来作为选项值。如下图
  • 提示:可以在选项字段之间设置常量内容作为间隔,如, - 、 /等

image.png

  • 搜索字段:选项字段中哪些可以作为搜索值,默认会将选中的选项字段都设为搜索字段。
  • 若,将【创建时间】、【创建人id】都选中作为搜索字段,则在选择框中输入“01”时,创建时间或创建人id的值中包含“01”的都将作为搜索结果展示。
  • 若,只将【创建时间】选中作为搜索字段,则在选择框中输入“01”时,仅创建时间的值中包含“01”的将作为搜索结果展示。

8.2.2.2 布尔型选项

当下拉单选对应的是布尔型字段时,选项类型为“布尔型”。选项默认只有“是”、“否”,可以设置选项的排序、选项的默认值、选项是否可见。

image.png

-选项排序:选中选项行并直接拖动选项,即可变化上下位置,属性中的选项顺序将作为运行页面的选项顺序。效果如下图

image.png

image.png

-设置默认值:点击选项前的单选框,则这个选项将作为下拉单选的默认值。

image.png

-设置可见:在选项的右侧,点击隐藏/可见图标,将控制该选项在运行时是否可以展示。

image.png

image.png

8.2.2.3 数据字典选项

当下拉单选对应的是数据字典字段时,选项类型为“数据字典”。选项会展示选择的数据字典中的所有字典项,可以设置选项的排序、选项的默认值、选项是否可见。(属性效果和布尔型选项一致)

image.png

  • 选项排序:选中选项行并直接拖动选项,即可变化上下位置,属性中的选项顺序将作为运行页面的选项顺序。
  • 设置默认值:点击选项前的单选框,则这个选项将作为下拉单选的默认值。
  • 设置可见:在选项的右侧,点击隐藏/可见图标,将控制该选项在运行时是否可以展示。默认所有字典项都可见。

8.2.3 显示清除按钮

若开启了清除按钮,则在选择框有内容时,点击清除按钮一键清除已有内容

image.pngimage.png

9. 下拉多选

从多个选项中下拉选择多个数据,作为数据值。选项可以是关联模型的数据,也可以是数据字典。

9.1 创建字段

下拉多选支持创建三种业务类型的字段,分别是:多对多、一对多、数据字典。

image.png

  • 多对多:创建字段时需要选择关联的模型,关联模型的数据将作为下拉选项;
  • 一对多:创建字段时需要选择关联的模型,关联模型的数据将作为下拉选项;
  • 数据字典:创建字段时需要选择数据字典,其数据字典项将作为下拉选项

9.2 表单属性

9.2.1 通用属性

在表单中,下拉多选可以设置一些通用的属性:标题、占位提示、描述说明、只读、隐藏、禁用、必填、标题排列方式、宽度。

image.png

9.2.2 选项类型

可以针对下拉多选的选项进行属性设置,同时,根据字段类型的不同,可以设置的内容也不同。

9.2.2.1 多对多、一对多选项

当下拉多选对应的是一对多型字段时,选项类型为“关联模型字段”。可以设置模型中的哪个(些)字段作为选项名称,以及哪些字段可以进行选项搜索。(和关联模型字段型的下拉单选一致)

image.png

  • 选项字段:可以选择关联模型的某个或某些字段。
  • 选择了【创建时间】和【创建人id】作为选项,那么在页面运行下拉选择数据时,创建时间和创建人id的值将会拼接起来作为选项值。如下图
  • 提示:可以在选项字段之间设置常量内容作为间隔,如, - 、 /等

image.png

  • 搜索字段:选项字段中哪些可以作为搜索值,默认会将选中的选项字段都设为搜索字段。
  • 若,将【创建时间】、【创建人id】都选中作为搜索字段,则在选择框中输入“01”时,创建时间或创建人id的值中包含“01”的都将作为搜索结果展示。
  • 若,只将【创建时间】选中作为搜索字段,则在选择框中输入“01”时,仅创建时间的值中包含“01”的将作为搜索结果展示。

9.2.2.2 数据字典选项

当下拉多选对应的是数据字典字段时,选项类型为“数据字典”。选项会展示选择的数据字典中的所有字典项,可以设置选项的排序、选项的默认值、选项是否可见。

image.png

  • 选项排序:选中选项行并直接拖动选项,即可变化上下位置,属性中的选项顺序将作为运行页面的选项顺序。
  • 设置默认值:点击选项前的复选框,则这个选项将作为下拉单选的默认值。
  • 设置可见:在选项的右侧,点击隐藏/可见图标,将控制该选项在运行时是否可以展示。

9.2.3 显示清除按钮

若开启了清除按钮,则在选择框有内容时,点击清除按钮一键清除已有内容

10. 开关

常用于只有是否两种对立选项的选择。

10.1 创建字段

直接通过开关组件设计页面需要先填写字段信息以创建一个字段业务类型为「布尔型」的模型字段后才可以设置属性。

image.png

10.2 表单属性

在表单中,开关可以设置一些通用的属性:标题、描述说明、默认值、只读、隐藏、禁用、必填、标题排列方式、宽度。

image.png

11. 单选框

常用于在直接展示的选现中单选一个值,例如选择性别。

11.1 创建字段

单选框支持创建两种业务类型的字段,分别是:布尔型、数据字典。

image.png

  • 布尔型:选项默认只有是、否;
  • 数据字典:创建字段时需要选择数据字典,其数据字典项将作为选项

11.2 表单属性

11.2.1 通用属性

在表单中,单选框可以设置一些通用的属性:标题、描述说明、只读、隐藏、禁用、必填、标题排列方式、宽度。

image.png

11.2.2 选项排列方式

支持设置选项的排列方式,横向或纵向。

image.png

11.2.3 选项类型

11.2.3.1 数据字典选项

当单选框对应的是数据字典字段时,选项类型为“数据字典”。选项会展示选择的数据字典中的所有字典项,可以设置选项的排序、选项的默认值、选项是否可见。

image.png

  • 选项排序:选中选项行并直接拖动选项,即可变化上下位置,属性中的选项顺序将作为运行页面的选项顺序。
  • 设置默认值:点击选项前的单选框,则这个选项将作为单选框的默认值。
  • 设置可见:在选项的右侧,点击隐藏/可见图标,将控制该选项在运行时是否可以展示。默认所有字典项都可见。

11.2.3.2 布尔型选项

当单选框对应的是数据字典字段时,选项类型为“数据字典”。选项会展示选择的数据字典中的所有字典项,可以设置选项的排序、选项的默认值、选项是否可见。

  • 选项排序:选中选项行并直接拖动选项,即可变化上下位置,属性中的选项顺序将作为运行页面的选项顺序。
  • 设置默认值:点击选项前的单选框,则这个选项将作为单选框的默认值。
  • 设置可见:在选项的右侧,点击隐藏/可见图标,将控制该选项在运行时是否可以展示。默认所有字典项都可见。

12. 复选框

常用于在直接展示的选现中多选一个值,例如选择爱好、选择课程等。

12.1 创建字段

直接通过复选框组件设计页面需要先填写字段信息以创建一个字段业务类型为「数据字典」的模型字段后才可以设置属性。

image.png

12.2 表单属性

12.2.1 通用属性

在表单中,复选框可以设置一些通用的属性:标题、描述说明、只读、隐藏、禁用、必填、标题排列方式、宽度。

image.png

12.2.2 选项排列方式

支持设置选项的排列方式,横向或纵向。

12.2.3 选项类型

12.2.3.1 数据字典选项

当复选框对应的是数据字典字段时,选项类型为“数据字典”。选项会展示选择的数据字典中的所有字典项,可以设置选项的排序、选项的默认值、选项是否可见。

image.png

  • 选项排序:选中选项行并直接拖动选项,即可变化上下位置,属性中的选项顺序将作为运行页面的选项顺序。
  • 设置默认值:点击选项前的单选框,则这个选项将作为单选框的默认值。
  • 设置可见:在选项的右侧,点击隐藏/可见图标,将控制该选项在运行时是否可以展示。默认所有字典项都可见。

13. 富文本编辑器

富文本编辑器,是一种可内嵌于浏览器,所见即所得的文本编辑器,类似于Office Word 的编辑功能,常应用于篇幅较长的说明性文字,支持改变字体样式、插入图片等。

13.1 创建字段

直接通过富文本编辑器组件设计页面需要先填写字段信息以创建一个字段业务类型为「富文本」的模型字段后才可以设置属性

  • 填写信息如下,所有信息保存后再次查看均不可编辑

image.png

13.2 表单属性

在表单中,富文本编辑器可以设置一些通用的属性:标题、占位提示、描述说明、只读、隐藏、必填、标题排列方式、宽度。

image.png

13.3 表单样式

在运行页面,表单中的富文本编辑器如下图。

编辑器中具有丰富的功能:

  • 支持设置层级标题
  • 支持设置文字样式(加粗、字号、字体、斜体、下划线、删除线等等)
  • 支持设置段落缩进和行高
  • 支持插入序列、待办事项等
  • 支持插入表情、图片、表格、代码块、分割线等
  • 编辑时支持撤回、恢复、全屏编辑

image.png

13.4 表格属性

在表格中,富文本编辑器仅支持自定义标题属性。

image.png

13.5 表格样式

在运行页面,表格中的富文本对应字段数据用相应链接展示,若有,则可存在“查看”链接,点击查看,通过弹框查看富文本内容

image.png

13.6 详情属性

在详情视图中,仅支持自定义标题、宽度属性。

image.png

14. 年份

年份组件用于选择年份,常用于选择出身年份、一项计划的年份等。

image.png

14.1 创建字段

年份仅支持创建「年份」业务类型的字段,填写规则、内容和模型设计器端创建字段一致。

image.png

14.2 表单属性

在表单中,年份可以设置一些通用的属性:标题、占位提示、描述说明、默认值、只读、隐藏、禁用、必填、标题排列方式、宽度。

image.png

15. 日期

常用于选择颗粒度到日期的Date类型字段,例如出生日期、入职日期、入驻日期等。

15.1 创建字段

直接通过日期组件设计页面需要先填写字段信息以创建一个字段业务类型为「日期」的模型字段后才可以设置属性。

image.png

15.2 表单属性

15.2.1 通用属性

在表单中,日期可以设置一些通用的属性:标题、占位提示、描述说明、默认值、只读、隐藏、禁用、必填、标题排列方式、宽度。

image.png

15.2.2 日期格式

有9种日期格式可供选择。

image.png

16. 日期时间

常用于选择颗粒度到时间的DateTime类型的字段,例如下单时间、发货时间、审批时间等。

16.1 创建字段

直接通过日期时间组件设计页面需要先填写字段信息以创建一个字段业务类型为「日期时间」的模型字段后才可以设置属性。

image.png

16.2 表单属性

16.2.1 通用属性

在表单中,日期时间可以设置一些通用的属性:标题、占位提示、描述说明、默认值、只读、隐藏、禁用、必填、标题排列方式、宽度。

image.png

16.2.2 日期格式

有9种日期格式可供选择。

image.png

16.2.3 时间格式

有4种时间格式可供选择。

image.png

17. 时间

常用于选择仅时间无日期的Time类型的字段,如设置规章中的上班时间、日志的提交时间等。

17.1 创建字段

直接通过时间组件设计页面需要先填写字段信息以创建一个字段业务类型为「时间」的模型字段后才可以设置属性。

image.png

17.2 表单属性

17.2.1 通用属性

在表单中,时间可以设置一些通用的属性:标题、占位提示、描述说明、默认值、只读、隐藏、禁用、必填、标题排列方式、宽度。

image.png

17.2.1 时间格式

有4种时间格式可供选择。

image.png

18. 颜色选择器

颜色选择器,应用于自定义颜色,如设置标签的颜色、设置产品的颜色属性、主题定制时选择色彩等。

18.1 创建字段

颜色选择器和单行文本这两个组件的样式不同,作用也不同,一个用于选择颜色,一个用于输入内容,但实质上所生成的数据都用文本来存储,所以通过颜色选择器生成字段时,仅支持对应生成「文本」类型字段。

image.png

18.2 表单属性

在表单中,颜色选择器可以设置一些通用的属性:标题、描述说明、默认值、只读、隐藏、必填、标题排列方式、宽度。

image.png

18.3 表单样式

在运行页面,表单中的颜色选择器由色号显示框+色号选择框组成,色号显示框无法编辑,由选择的颜色自动带出对应色号;点击色号选择框可选择颜色。

色号选择有三种方式

1在颜色选择区直接点击颜色;

2颜色选择器下方快捷选择系统提供的常用颜色;

3输入框中直接输入标准格式色号,输入后回车,定位到对应颜色。

image.png

18.4 表格属性

在表格中,颜色选择器仅支持自定义标题属性。

image.png

18.5 表格样式

在运行页面,表格中的颜色选择器对应字段数据用相应色块展示。

image.png

18.6 详情属性

在详情视图中,仅支持自定义标题、宽度属性。

image.png

19. 图表

可以选择数据可视化设计器中允许被引用的图表,展示在页面中。

19.1 选择报表

下拉中可选择允许被引用的图表。image.png

image.png

20. 报表

可以选择数据可视化设计器中允许被引用的报表,展示在页面中。

20.1 选择报表

下拉中可选择允许被引用的报表。

image.png

image.png

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

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

(0)
史, 昂的头像史, 昂数式管理员
上一篇 2024年6月20日
下一篇 2024年6月20日

相关推荐

  • 6.4 国际化之多语言

    多语言是国际化中大家最常面对的问题,我们需要对应用的页面结构元素进行翻译,也需要对系统内容进行翻译比如:菜单、数据字典等,甚至还会业务数据进行翻译。但不管什么翻译需求,我们在实现上基本可以归类为前端翻译和后端翻译。前端翻译顾名思义是在前端根据用户选择语言对内容进行翻译,反之就是后端翻译。本文会带着大家了解oinone的前端翻译与后端翻译 准备工作 pamirs-demo-boot的pom文件中引入pamirs-translate包依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-translate</artifactId> </dependency> pamirs-demo-boot的application-dev.yml文件中增加配置pamirs.boot.modules增加translate,即在启动模块中增加translate模块 pamirs: boot: modules: – translate 后端翻译(使用) 这里通过对菜单的翻译来带大家了解翻译模块 Step1 新增翻译记录 切换应用到translate模块,点击新增翻译。 选择新增翻译生效模块 选择翻译的模型为:菜单模型 源语言选择中文,目标选择English 添加翻译项目: 源术语为:商店 翻译值为:shop 状态为:激活 Step2 查看效果 应用切换到Demo模块,在右上角切换语言至英语 后端翻译(自定义模型的翻译) 在前面菜单的翻译中,似乎我们什么都没做就可以正常通过翻译模块完成多语言的切换了。是不是真如我们想象的一样,当然不是。是因为Menu模型的displayName字段加上@Field(translate = true)注解。 Step1 为PetType模型的name字段增加翻译注解 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.base.IdModel; @Model.MultiTable(typeField = "kind") @Model.model(PetType.MODEL_MODEL) @Model(displayName="品种",labelFields = {"name"}) public class PetType extends IdModel { public static final String MODEL_MODEL="demo.PetType"; @Field(displayName = "品种名" , translate = true) private String name; @Field(displayName = "宠物分类") private String kind; } Step2 重启应用查看效果 切换应用到translate模块,点击新增翻译 切换应用到Demo模块,切换中英文,查看效果 前端翻译 还记得我们前端第一个自定义动作吗?会弹出“oinone第一个自定义Action,啥也没干”,我们要对它进行翻译。 Step1 修改前端DoNothingActionWidget.ts import translateValueByKey 提示语用translateValueByKey加上翻译 const confirmRs = executeConfirm(translateValueByKey(\’oinone第一个自定义Action,啥也没干\’)||\’oinone第一个自定义Action,啥也没干\’); 前端更多翻译工具请见前端高级特性-框架之翻译工具 import { Action, ActionContextType, ActionWidget, executeConfirm, IClientAction, SPI, ViewType, Widget, translateValueByKey } from '@kunlun/dependencies'; @SPI.ClassFactory(ActionWidget.Token({ name: 'demo.doNothing' })) export class DoNothingActionWidget extends ActionWidget { @Widget.Method() public async clickAction() { const confirmRs = executeConfirm(translateValueByKey('oinone第一个自定义Action,啥也没干')||'oinone第一个自定义Action,啥也没干'); } } //定义动作元数据 Action.registerAction('*', { displayName: '啥也没干', name: 'demo.doNothing', id: 'demo.doNothing', contextType: ActionContextType.ContextFree, bindingType: [ViewType.Table] } as IClientAction); Step2 新增翻译记录 前端翻译的翻译记录对应的模型可以随意找一个放。但要注意几点: 不要找有字读配置translate = true的模型,因为会影响后端翻译性能。 最好统一到一个模型中,便于后续管理。这里大家可以自定义一个无有业务访问且本身无需要翻译的模型来挂载,避免性能损失 Step3 刷新远程资源生成前端语言文件 Step4 新增或修改.env 前端在项目根目录下新增或修改.env,可以参考.env.example文件。通过.env文件为前端配置oss文件路径,针对I18N_OSS_URL配置项。真实前端访问翻译语言文件的路径规则为:http://bucket.downloadUrl/mainDir/租户/translate/模块/语言文件。 yaml文件中oss配置的文件路径:http://pamirs.oss-cn-hangzhou.aliyuncs.com/upload/demo/ 租户/translate/模块/语言文件 前端会自动根据上下文组织 # 后端api配置 # API_BASE_URL=http://127.0.0.1:8090 # 下面是国际化语言的cdn配置,默认用当前请求链接下的路径: /pamirs/translate/${module}/i18n_${lang}.js I18N_OSS_URL=http://pamirs.oss-cn-hangzhou.aliyuncs.com/upload/demo Step5 重启前端应用看效果 对语言进行中英文切换,进入宠狗达人页面,点击【第一个自定义Action】,查看前端翻译效果

    2024年5月23日
    93620
  • 5.1 CDM的背景介绍

    如果说低代码开发框架输出技术标准,CDM则是结合oinone技术特性和软件工程设计,让输出数据标准变成可能。 一、背景介绍 无法照搬的最佳实践 要了解引入CDM的初衷,得从互联网架构的演进开始,了解其过程,就知道为什么说Oinone的CDM是中台架构的最佳技术实践的核心!我们在2.2【互联架构做为最佳实践为何失效】一文中介绍过互联网技术发展的四个阶段,特别平台化到中台化的阶段,目的是在一套规范下让听的见炮火声音的团队自行决定业务系统发展,适用多业务线(或多场景应用)独立发展。 互联网架构在演进过程中碰到的问题跟企业数字化转型过程中碰到的问题是非常类似: 随着企业业务在线化后对系统性能、稳定都提出了更高的要求,而且大部分企业的内部很多系统相互割裂导致,导致很多重复建设,所以我们需要服务化、平台化。 同时没有一个供应商能解决企业所有商业场景问题,又需要多个供应商共同参与,所以把供应商类类比成各个业务线,在一套规范下让供应商自行决定业务系统发展 既然跟阿里当初在架构演进过程中碰到的问题非常类似,那么是不是照搬阿里中台架构方案到企业就好了?当然不是,因为历史原因阿里的中台架构是采用的平台共建模式:“让业务线研发以平台设计好的规范进来共同开发”,其本质还是平台主导模式,它是有非常大的历史包袱。我们想象各个供应商的共建一个交易平台或商品平台,那是多么荒唐的事情,平台化已经足够的复杂了,还让不同背景、不同企业的研发一起共建,最后往往导致企业架构负载过重,这时对企业来说便不再是赋能而是“内耗”。 那么如果没有历史包袱,我们重新设计,站在上帝视角去看有没有更好的方式呢?当然有 借鉴微软的CDM 这里我们借鉴微软的CDM理念,CDM这个概念最早是2016年微软宣布“以Dynamics 365的形式改造其CRM和ERP”战略时提出的。微软给它的定义是“用于存储和管理业务实体的业务数据库,而且是开箱即用的”。CDM不仅仅提供标准实体,它还允许用户建立个性化的实体,用户可以扩展标准实体也可以增加和标准实体相关的新实体。 CDM可能并不性感,但绝对是非常必要的。它成为了微软的很多产品的基础,是构建了无数业务领域的原型。同时微软也期望它能成为快速实现数据交换和迁移的标准,这个有点像菜鸟网络推出的奇门,让所有TMS、OMS、WMS都基于一套数据接口API进行互通,一套标准是为了解决一个行业问题,而不是具体某一个企业一个集团的问题。 我们发现CDM的理念跟我们想要的“企业级的数据标准”是非常吻合的。但是我们也不能照搬照抄,虽然微软的CDM很好的解决了数据割裂问题,但就模型来说就够大家喝一壶了,模型库非常庞大而且复杂,学习成本巨高。 数字化时代软件会产生新的技术流派 我们知道传统软件的设计理念:侧重在模型对业务支撑全面性上。优点体现为配置丰富,缺点模型设计过于复杂,刚开始有前瞻性,但在理解、维护都非常困难,随着业务发展系统原先的设计逐渐腐化,异常笨重。 而Oinone的CDM设计理念:侧重在简单、灵活、统一上,体现为在上层应用开发时,每一业务领域保持独立,模型简单易懂,并结合Oinone的低代码开发机制进行快速开发,灵活应对业务变化。 所以我更想说Oinone的CDM是微软CDM的在原有基础上,与互联网架构结合,利用Oinone低代码开发平台特性形成新的工程化建议。Oinone-CDM不以把模型抽象到极致,支撑“所有业务可能性”为目标,而是抽象80%通用的设计,保持模型简单可复用,来解决数据割裂问题,并保持业务线独立自主性,快速创新的能力。 图5-1-1 Oinone-CDM要解决的问题 二、Oinone的CDM本质是创新的工程化建议 引入CDM以后系统工程结构会有什么变化,跟大家认知的互联网架构有什么区别。 原本上层的业务线系统,需要调用各个业务平台提供的功能,增加CDM以后也就是我们右的图,每个业务线就像一个独立右边。看上去复杂了,其实对业务线来说更加简单了。 互联网整体平台化带来的问题: 业务线每次业务调整都需要给各个平台提需求 业务平台研发需要了解所有业务线的知识再做设计,对研发要求非常高 各个业务域的不同需求相互影响包括系统稳定性、研发对需求响应的及时性 结合oinone特性提出的新工程建议: 一些通用性模块继续以平台化的方式存在,能力完全复用。 业务线自建业务平台,保持业务线的独立性和敏捷性 业务线以CDM为原型,保证核心数据不割裂,形成一致的数据规范 图5-1-2 引入CDM概念后的工程结构对比 三、CDM思路示意图 该示例中OinoneCDM的商品域不仅仅提供标准实体,保证各个业务系统的对商品的通用需求、简单易懂,在我们星空系列业务产品中如全渠道运营、B2B交易等系统以此为基础建立属于自身个性化的实体,可以扩展标准实体也可以增加和标准实体相关的新实体。 带来的好处: 通过多种继承方式,继承后的模型可扩展模型本身、模型行为等,从而解决业务独立性问题。 通过CDM层统一数据模型,从而解决多应用数据割裂问题 图5-1-3 Oinone-CDM思路示意图

    2024年5月23日
    68400
  • 报表发布主流程

    1. 主业务流程图 2. 主业务流程操作图解 创建图表—创建报表/数据大屏—发布图表/报表—前端业务系统可引用 2.1 创建图表分组 1)操作流程:创建图表分组 2)操作路径:数据可视化-图表-创建图表分组 3)点击搜索框后的「+」创建一级分组,输入一级分组名称后,点击一级分组后的「+」创建二级分组,输入二级分组名称后,此时分组创建完成,可以在二级分组下创建图表 2.2 创建图表 1)操作流程:选择图表二级分组-创建图表 2)操作路径:数据可视化-图表-二级分组-创建图表 3)鼠标移动至需要创建图表的二级分组上,出现「+」,点击图标后弹出“创建图表”弹窗,需要填写图表标题、模型、方法; a. 图表标题:最大支持20个字,支持汉字、数字、大小写字母、-;同个一级分组下不允许重复; b. 模型:需要选择来源数据对应的模型; c. 方法:选择模型后需要选择方法,方法是用来提取模型数据的逻辑; 4)选择成功后进图表设计页面(详见图表-图表设计页面),设计完成后点击保存,图表创建成功 2.3 创建报表分组 1)操作流程:创建报表分组 2)操作路径:数据可视化-报表-创建报表分组 3)点击搜索框后的「+」创建一级分组,输入一级分组名称后,点击一级分组后的「+」创建二级分组,输入二级分组名称后,此时分组创建完成,可以在二级分组下创建报表 2.4 创建数据大屏分组 1)操作流程:创建报表分组 2)操作路径:数据可视化-报表-创建报表分组 3)点击搜索框后的「+」创建一级分组,输入一级分组名称后,点击一级分组后的「+」创建二级分组,输入二级分组名称后,此时分组创建完成,可以在二级分组下创建报表 2.5 创建报表 1)操作流程:选择报表二级分组-创建报表 2)操作路径:数据可视化-报表-二级分组-创建报表 3)鼠标移动至需要创建报表的二级分组上,出现「+」,点击图标后=需要填写报表标题; a报表标题:最大支持20个字,支持汉字、数字、大小写字母、-;同个一级分组下不允许重复; 4)创建后可以选择报表需要展示的图表 2.6 为报表选择图表 1)操作流程:选择报表-为报表选择图表 2)操作路径:数据可视化-图表-二级分组-报表-选择图表 3)选择单个未发布或者已发布但没有被隐藏的报表,点击【选择图表】,弹出“选择图表”弹窗,对该报表需要展示的图表进行选择 a需要选择图表的一级分组后才能选择图表; b可以多选图表,选择的图表只能是已选一级分组下的未隐藏的未被选择的图表;选择一个二级分组时,默认该二级分组下的图表会全部被选中,图表会按照选中的顺序展示在报表列表; 4)选择图表后,报表信息保持展示图表的最新效果;如果图表更新了,但是报表没有发布最新,则报表在前端展示的仍为最近发布的版本; 5)如果图表中存在超过一行的图内筛选项,则在报表处原始的图表尺寸只能查看一行图内筛选项,需要根据图表在报表处的等比拖动效果展示更多的图内筛选项 2.7 创建数据大屏 1)操作流程:选择数据大屏二级分组-创建数据大屏 2)操作路径:数据可视化-数据大屏-二级分组-创建 3)鼠标移动至需要创建数据大屏的二级分组上,出现「+」,点击图标后进入数据大屏设计页面; a. 选择图表组件组合成数据大屏,还有其他诸如时间、图片等组件可供选择; b. 数据大屏标题:最大支持20个字,支持汉字、数字、大小写字母、-;同个一级分组下不允许重复; 4)选择完成后可以保存,则创建数据大屏成功 2.8 发布图表/报表/数据大屏 1)操作流程:选择图表/报表-发布图表/报表 2)操作路径:数据可视化-图表/报表/数据大屏-二级分组-图表名称/报表名称/数据大屏名称-发布 3)选择单个未发布且没有被隐藏的图表/报表/数据大屏,点击【发布】按钮,图表/报表发布后可以被前端引用,数据大屏可被屏幕演示,图表/报表/数据大屏状态变为已发布,展示最近发布时间; a. 如果图表发布后有更新内容,会展示的更新类型:更新图表信息/更新图表内容; b. 如果报表发布后有更新内容,会展示的更新类型:更新报表信息/更新图表内容/选择图表/移除图表; c. 如果数据大屏发布后有更新内容,会展示的更新类型:更新数据大屏信息/更新数据大屏内容; 4)发布后可以修改 2.9更新发布图表/报表/数据大屏 1)操作流程:选择图表/报表-更新发布图表/报表 2)操作路径:数据可视化-图表/报表/数据大屏-二级分组-图表名称/报表名称/数据大屏名称-更新发布图表/报表/数据大屏 3)选择单个已发布且没有被隐藏的图表/报表/数据大屏,并且该图表/报表/数据大屏在上次发布后有所更新,可以点击【更新发布】按钮,将最新的图表/报表内容发布至业务系统,业务系统引用的图表/报表为最新内容,屏幕展示的数据大屏是最新的大屏内容; 4)如果更新了内容,但未点击更新发布,则前端业务系统查看的图表/报表仍为最近发布的内容,屏幕展示的数据大屏仍是最近发布的内容

    2024年6月20日
    87700
  • 企业个性化配置

    平台除了帮助企业快速解决业务需求外,还提供了企业文化、风格个性化能力,本章节详细介绍个性化配置。包括:登陆页配置、企业形象配置、系统风格配置。 系统配置 配置入口 配置入口:右上角登陆账号——系统配置——全局配置——登陆页配置、企业形象配置、系统风格配置。 登陆页配置 用户自定义登陆页的主题,一共有六个主题可选择,分别为: 图一:左侧是图片,右侧是登录输入框,Logo在左上角; 图二:右左侧是图片,右侧是登录输入框,Logo在左上角; 图三:底图是图片,登录输入框浮在页面左侧,Logo在左上角; 图四:底图是图片,登录输入框浮在页面中间,Logo在左上角; 图五:底图是图片,登录输入框浮在页面右侧,Logo在左上角; 图六:底图是图片,登录输入框浮在页面中间,Logo在登录框上方。 页面背景 上传登录页背景,支持上传jpg、png格式的图片或mp4、mov、avi格式视频。尺寸建议为1920*1080px,文件大小不超过50MB。 登录页logo:指配置登录页左上角的logo图标。 预览:配置后可在右侧电脑中点击全屏预览效果。 配置示例 企业形象配置 企业形象配置:可设置企业信息、业务应用导航栏logo、浏览器logo,设置完成之后,点击发布之后设置生效。 系统风格配置 系统风格配置,可设置主题(浅色、深色)、尺寸(大、中、小),配置后可全屏预览,发布后即可更换成对应的风格。 下载代码可进行自定义风格。

    2024年6月20日
    83600
  • 7.1 设计器总览

    设计器转为非专业研发设计,在Oinone3.0版本中已经完成元数据完整在线化,真正做到低无一体。对于设计器的定位我们开篇就介绍过,它是LCDP的产品化呈现,是冰山露在外面大家看得到的,核心还是在LCDP本身。我们先目睹下设计器的一些产品页面,如您有想体验,可以在Oinone官网注册 模型设计器 Oinone以模型为驱动,当有模型、数据字典、数据编码等设计功能,我们就可以完整地定义产品数据模型,模型设计器整体呈现区别于普通ER图,以当前模型为核心视角展开,可以点击关联模型切换主视角。这样的好处在于突出当前设计,聚焦设计本身。同时模型上预留了几个核心入口如:分类管理、继承拓扑图、页面设计、逻辑设计等。另外我们在体验上区分了专家模式和经典模式,顾名思义,专家模式的功能会更加丰富,对专业知识的要求也会更高。专家模式下一般会增加一些跟业务无关的配置如:索引设置等调优行为 逻辑设计器 从图灵完备的角度上说,要支持功能越完备,使用越复杂。我们优先从图灵完备的角度出发,所以我们第一版逻辑设计器相对比较复杂,第二版本规划中会类似模型设计器推出专家版和经典版。 界面设计器 界面设计器第一版会先支撑后端页面在线自定义,后边将陆续推出前端页面、多端能力。为了支持多端和2C页面的设计,我们对前后端协议做了比较大的改造。目前设计器已经支持完全基于V3的前后端协议。 数据可视化 数据可视化支持从内部系统模型获取数据内容后,根据业务需求自定义图表,目的是为企业提供更高效的数据分析工具。 与市场同类产品相比,我们的数据可视化产品:不需要前置维护数据源、进行数据转换;可智取业务系统模型,系统自动解析选择的模型、接口、表格中的字段后进行数据分析;降低对数据分析人员研发能力要求的同时,也提升了数据分析的效率。 流程设计器 Oinone流程设计器为业务流程和审批流程提供了可自动执行的流程模型:通过定义流转过程中的各个动作、规则,以此实现流程自动化。在Oinone流程设计器中,流程可以跨应用设计,不同应用的模型之间可以通过同一流程执行。

    2024年5月23日
    85100

Leave a Reply

登录后才能评论