组件属性

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低代码应用平台体验

Like (0)
史, 昂's avatar史, 昂数式管理员
Previous 2024年6月20日
Next 2024年6月20日

相关推荐

  • 3.5.4 Ux注解详解

    我们默认视图已经基本可以用了,但实际业务中还是会有一些不大不小的自定义需求,写自定义视图又太麻烦,今天我们来学习一种更加轻量的模式即:后端研发可以通过注解来配置视觉交互。该系列注解以Ux开头,例如@UxHomepage、@UxMenu、@UxAction、@UxView、@UxWidget等等。 视图XML的配置优先级大于在代码上的注解,也就是代码上的注解影响的是默认展示逻辑。 一、Ux家族图谱 我们先简单通过家族图谱做个简单了解,脑海里有一个影响当有需要的时候知道能不能做,深入了解还需要大家多多动手去尝试 图3-5-4-1 Ux家族图谱 二、默认视图后端配置举例 在下面的代码片段中UxTable、UxForm、UxDetail、UxTableSearch都有涉及,几个特殊点做些解释其他的留大家自行测试 Group分组的配置逻辑:为了不让一个分组内的字段不断的写Group,所以采取了第一个字段写了Group,到下一个出现的group之间的字段都自动归为一个Group 搜素整体不展示可以用“@UxTable(enableSearch = false)”配置在模型的类上。 字段搜索用“UxTableSearch”配置在模型的字段上,其特殊逻辑是只要你配了一个字段,系统就不自动补充了,例子中表格页的搜索栏只会留下店铺名称和店铺编码 ……其他代码 //@UxTable(enableSearch = false),整体不支持搜索 public class PetShop extends AbstractDemoIdModel { public static final String MODEL_MODEL="demo.PetShop"; @Field(displayName = "店铺编码") @UxForm.FieldWidget(@UxWidget(group = "Form基础数据"))//Form分组 @UxTableSearch.FieldWidget(@UxWidget())//支持搜索 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; @UxTableSearch.FieldWidget(@UxWidget())//支持搜索 @UxTable.FieldWidget(@UxWidget(invisible = "true"))//表格中不展示支持搜索 @Field(displayName = "店铺名称",required = true,immutable=true) private String shopName; @Field(displayName = "一年内新店") @UxForm.FieldWidget(@UxWidget(widget = "Switch",group = "Form基础数据"))//Switch,Checkbox可以切换着看,字段可选widget参考【字段的配置】一文 private Boolean oneYear; @Field(displayName = "开店时间",required = true) @UxDetail.FieldWidget(@UxWidget(invisible = "true"))//详情不展示 private Time openTime; @Field(displayName = "闭店时间",required = true) @UxDetail.FieldWidget(@UxWidget(invisible = "true"))//详情不展示 private Time closeTime; …… 其他代码 } 图3-5-4-2 默认视图后端配置举例

    2024年5月23日
    1.8K00
  • 4.1.5 模型之持久层配置

    一、批量操作 批量操作包括批量创建与批量更新。批量操作的提交类型系统默认值为batchCommit。 批量提交类型: useAffectRows,循环单次单条脚本提交,返回实际影响行数 useAndJudgeAffectRows,循环单次单条脚本提交,返回实际影响行数,若实际影响行数与输入不一致,抛出异常 collectionCommit,将多个单条更新脚本拼接成一个脚本提交,不能返回实际影响行数 batchCommit,使用单条更新脚本批量提交,不能返回实际影响行数。 全局配置 pamirs: mapper: batch: batchCommit 图4-1-5-1 全局配置 运行时配置 非乐观锁模型系统默认采用batchCommit提交更新操作;乐观锁模型默认采用useAndJudgeAffectRows提交更新操作。也可以使用以下方式在运行时改变批量提交方式。 Spider.getDefaultExtension(BatchApi.class).run(() -> { 更新逻辑 }, 批量提交类型枚举); 图4-1-5-2 运行时配置 运行时校正 如果模型配置了数据库自增主键,而批量新增的批量提交类型为batchCommit,则系统将批量提交类型变更为collectionCommit(如果使用batchCommit,则需要单条提交以获得正确的主键返回值,性能有所损失)。 如果模型配置了乐观锁,而批量更新的批量提交类型为collectionCommit或者batchCommit,则系统将批量提交类型变更为useAndJudgeAffectRows。也可以失效乐观锁,让系统不做批量提交类型变更处理。 二、乐观锁(举例) 在一些会碰到并发修改的数据,往往需要进行并发控制,一般数据库层面有两种一种是悲观锁、一种是乐观锁。oinone对乐观锁进行了良好支持 定义方式 乐观锁的两种定义方式: 通过快捷继承VersionModel,构建带有乐观锁,唯一编码code且主键为id的模型。 可以在字段上使用@Field.Version注解来标识该模型更新数据时使用乐观锁 如果更新的实际影响行数与入参数量不一致,则会抛出异常,错误码为10150024。如果是批量更新数据,为了返回准确的实际影响行数,批量更新由批量提交改为循环单条数据提交更新,性能有所损失。 失效乐观锁 一个模型在某些场景下需要使用乐观锁来更新数据,而另一些场景不需要使用乐观锁来更新数据,则可以使用以下方式在一些场景下失效乐观锁。更多元位指令用法详见4.1.9【函数之元位指令】一文。 PamirsSession.directive().disableOptimisticLocker(); try{ 更新逻辑 } finally { PamirsSession.directive().enableOptimisticLocker(); } 图4-1-5-3 失效乐观锁 不抛乐观锁异常 将批量提交类型设置为useAffectRows即可,这样可改由外层逻辑对返回的实际影响行数进行自主判断。 Spider.getDefaultExtension(BatchApi.class).run(() -> { 更新逻辑,返回实际影响行数 }, BatchCommitTypeEnum.useAffectRows); 图4-1-5-4 将批量提交类型设置为useAffectRows 构建第一个VersionModel Step1 新建PetItemInventroy模型,继承快捷模型VersionModel 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.common.VersionModel; import java.math.BigDecimal; @Model.model(PetItemInventroy.MODEL_MODEL) @Model(displayName = "宠物商品库存",summary="宠物商品库存",labelFields = {"itemName"}) public class PetItemInventroy extends VersionModel { public static final String MODEL_MODEL="demo.PetItemInventroy"; @Field(displayName = "商品名称") private String itemName; @Field(displayName = "库存数量") private BigDecimal quantity; } 图4-1-5-5 新建PetItemInventroy模型 Step2 修改DemoMenu,增加访问入口 @UxMenu("商品库存")@UxRoute(PetItemInventroy.MODEL_MODEL) class PetItemInventroyMenu{} 图4-1-5-6 修改DemoMenu Step3 重启看效果 体验一:页面上新增、修改数据库字段中的opt_version会自动加一 图4-1-5-7 示例效果一 图4-1-5-8 示例效果二 图4-1-5-9 示例效果三 图4-1-5-10 示例效果四 体验二:同时打两个页面,依次点击,您会发现一个改成功,一个没有改成功。但页面都没有报错,只是update返回影响行数一个为1,另一个为0而已。 图4-1-5-11 编辑宠物商品库存 图4-1-5-12 宠物商品库存列表 注:增加了乐观锁,我们在写代码的时候一定要注意,单记录更新操作的时候要去判断返回结果(影响行数),不然没改成功,程序是不会抛错的。不像batch接口默认会报错 Step4 预留任务:重写PetItemInventroy的update函数 留个任务,请各位小伙伴自行测试玩玩,这样会更有体感 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.model.PetItemInventroy; import pro.shushi.pamirs.demo.api.model.PetTalent; import pro.shushi.pamirs.meta.annotation.Function; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.common.exception.PamirsException; import pro.shushi.pamirs.meta.constant.FunctionConstants; import pro.shushi.pamirs.meta.enmu.FunctionOpenEnum; import pro.shushi.pamirs.meta.enmu.FunctionTypeEnum; import java.util.ArrayList; import java.util.List; @Model.model(PetItemInventroy.MODEL_MODEL) @Component public class PetItemInventroyAction { @Function.Advanced(type= FunctionTypeEnum.UPDATE) @Function.fun(FunctionConstants.update) @Function(openLevel = {FunctionOpenEnum.API}) public PetItemInventroy update(PetItemInventroy data){ List<PetItemInventroy> inventroys = new ArrayList<>(); inventroys.add(data); //批量更新会,自动抛错 int i =…

    2024年5月23日
    1.6K00
  • 3.5.1 构建第一个Menu

    在前面章节中我们也涉及到菜单,因为菜单我们模块就是地图、导航,没有地图、导航就无法畅游模块并进行相关业务操作。在3.3.4【模块的继承】一文关于多表继承的内容就有涉及到菜单的初始化,本文将展开介绍初始化Menu的两种方式分别是:注解式、数据初始化式。 注解式(举例) Step1 分析现有菜单注解 用@UxMenus声明DemoMenus为菜单初始化入口,同时该类在DemoModule配置扫描路径中,那么通过DemoMenus初始化的菜单都挂在demo_core这个模块上。 如果采用这种模式,建议同一个模块的菜单都只配置在一处 package pro.shushi.pamirs.demo.core.init; import pro.shushi.pamirs.boot.base.constants.ViewActionConstants; import pro.shushi.pamirs.boot.base.ux.annotation.action.UxRoute; import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenu; import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenus; import pro.shushi.pamirs.demo.api.model.*; import pro.shushi.pamirs.demo.api.proxy.PetShopProxy; import pro.shushi.pamirs.demo.api.proxy.PetShopProxyA; import pro.shushi.pamirs.demo.api.proxy.PetShopProxyB; @UxMenus public class DemoMenus implements ViewActionConstants { @UxMenu("商店管理")@UxRoute(PetShopProxy.MODEL_MODEL) class PetShopProxyMenu{} @UxMenu("商店管理A")@UxRoute(PetShopProxyA.MODEL_MODEL) class PetShopProxyAMenu{} @UxMenu("商店管理B")@UxRoute(PetShopProxyB.MODEL_MODEL) class PetShopProxyBMenu{} @UxMenu("商品管理")@UxRoute(PetItem.MODEL_MODEL) class ItemMenu{} @UxMenu("宠狗商品")@UxRoute(PetDogItem.MODEL_MODEL) class DogItemMenu{} @UxMenu("萌猫商品")@UxRoute(PetCatItem.MODEL_MODEL) class CatItemMenu{} @UxMenu("宠物品种")@UxRoute(PetType.MODEL_MODEL) class PetTypeMenu{} @UxMenu("萌猫品种")@UxRoute(PetCatType.MODEL_MODEL) class CatTypeMenu{} @UxMenu("宠狗品种")@UxRoute(PetDogType.MODEL_MODEL) class DogTypeMenu{} @UxMenu("宠物达人")@UxRoute(PetTalent.MODEL_MODEL) class PetTalentMenu{} } 图3-5-1-1 菜单注解 Step2 改造现有菜单注解 菜单的层级关系通过@UxMenu的嵌套进行描述 菜单点击效果有三种分别对应不同的Action的类型,关于Action的类型详见3.5.3【Action的类型】一文。 通过@UxRoute定义一个与菜单绑定的viewAction,@UxMenu("创建商店")@UxRoute(value = PetShop.MODEL_MODEL,viewName = "redirectCreatePage",viewType = ViewTypeEnum.FORM),其中viewName代表视图的name(其默认值为redirectListPage,也就是跳转到列表也),value代码视图所属模型的编码,viewType代表view类型(其默认值为ViewTypeEnum.TABLE) @UxServer定义一个与菜单绑定的serverAction,@UxMenu("UxServer")@UxServer(model = PetCatItem.MODEL_MODEL,name = "uxServer") ,其中name代表serverAction的name,model或value代码serverAction所属模型的编码 @UxLink定义一个与菜单绑定的UrlAction,@UxMenu("Oinone官网")@UxLink(value = "http://www.oinone.top”,openType= ActionTargetEnum.OPEN_WINDOW) ,其中value为跳转url,openType为打开方式默认为ActionTargetEnum.ROUTER,打开方式有以下几种 ROUTER("router", "页面路由", "页面路由") DIALOG("dialog", "页面弹窗", "页面弹窗") DRAWER("drawer", "打开抽屉", "打开抽屉") OPEN_WINDOW("openWindow", "打开新窗口", "打开新窗口") 配合菜单演示,PetCatItemAction增加一个uxServer的ServerAction package pro.shushi.pamirs.demo.core.action; ……包引用 @Model.model(PetCatItem.MODEL_MODEL) @Component public class PetCatItemAction extends DataStatusBehavior<PetCatItem> { ……省略其他代码 @Action(displayName = "uxServer") public PetCatItem uxServer(PetCatItem data){ PamirsSession.getMessageHub().info("uxServer"); return data; } } 图3-5-1-2 示例代码 新的菜单初始化代码如下 package pro.shushi.pamirs.demo.core.init; import pro.shushi.pamirs.boot.base.constants.ViewActionConstants; import pro.shushi.pamirs.boot.base.enmu.ActionTargetEnum; import pro.shushi.pamirs.boot.base.ux.annotation.action.UxLink; import pro.shushi.pamirs.boot.base.ux.annotation.action.UxRoute; import pro.shushi.pamirs.boot.base.ux.annotation.action.UxServer; import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenu; import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenus; import pro.shushi.pamirs.demo.api.model.*; import pro.shushi.pamirs.demo.api.proxy.PetShopProxy; import pro.shushi.pamirs.demo.api.proxy.PetShopProxyA; import pro.shushi.pamirs.demo.api.proxy.PetShopProxyB; import pro.shushi.pamirs.meta.enmu.ViewTypeEnum; @UxMenus public class DemoMenus implements ViewActionConstants { @UxMenu("商店") class ShopMenu{ @UxMenu("UxServer")@UxServer(model = PetCatItem.MODEL_MODEL,name = "uxServer") class ShopSayHelloMenu{ } @UxMenu("创建商店")@UxRoute(value = PetShop.MODEL_MODEL,viewName = "redirectCreatePage",viewType = ViewTypeEnum.FORM) class ShopCreateMenu{ }…

    2024年5月23日
    1.8K00
  • 3.3.7 字段之序列化方式

    本文核心是带大家全面了解oinone的序列方式,包括支持的序列化类型、注意点、如果新增客户化序列化方式以及字段默认值的反序列化。 一、数据存储的序列化 (举例) 使用@Field注解的serialize属性来配置非字符串类型属性的序列化与反序列化方式,最终会以序列化后的字符串持久化到存储中。 ### Step1 新建PetItemDetail模型、并为PetItem添加两个字段 PetItemDetail继承TransientModel,增加两个字段,分别为备注和备注人 package pro.shushi.pamirs.demo.api.tmodel; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.base.TransientModel; import pro.shushi.pamirs.user.api.model.PamirsUser; @Model.model(PetItemDetail.MODEL_MODEL) @Model(displayName = "商品详情",summary = "商品详情",labelFields = {"remark"}) public class PetItemDetail extends TransientModel { public static final String MODEL_MODEL="demo.PetItemDetail"; @Field.String(min = "2",max = "20") @Field(displayName = "备注",required = true) private String remark; @Field(displayName = "备注人",required = true) private PamirsUser user; } 图3-3-7-1 PetItemDetail继承TransientModel 修改PetItem,增加两个字段petItemDetails类型为List和tags类型为List,并设置为不同的序列化方式,petItemDetails为JSON(缺省就是JSON,可不配),tags为COMMA。同时设置 @Field.Advanced(columnDefinition = varchar(1024)),防止序列化后存储过长 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.demo.api.tmodel.PetItemDetail; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.enmu.NullableBoolEnum; import java.math.BigDecimal; import java.util.List; @Model.model(PetItem.MODEL_MODEL) @Model(displayName = "宠物商品",summary="宠物商品",labelFields = {"itemName"}) public class PetItem extends AbstractDemoCodeModel{ public static final String MODEL_MODEL="demo.PetItem"; @Field(displayName = "商品名称",required = true) private String itemName; @Field(displayName = "商品价格",required = true) private BigDecimal price; @Field(displayName = "店铺",required = true) @Field.Relation(relationFields = {"shopId"},referenceFields = {"id"}) private PetShop shop; @Field(displayName = "店铺Id",invisible = true) private Long shopId; @Field(displayName = "品种") @Field.many2one @Field.Relation(relationFields = {"typeId"},referenceFields = {"id"}) private PetType type; @Field(displayName = "品种类型",invisible = true) private Long typeId; @Field(displayName = "详情", serialize = Field.serialize.JSON, store = NullableBoolEnum.TRUE) @Field.Advanced(columnDefinition = "varchar(1024)") private List<PetItemDetail> petItemDetails; @Field(displayName = "商品标签",serialize = Field.serialize.COMMA,store = NullableBoolEnum.TRUE,multi = true) @Field.Advanced(columnDefinition = "varchar(1024)") private…

    2024年5月23日
    1.5K00
  • 3.5.7.8 自定义菜单栏

    在业务中,可能会遇到需要对菜单栏的交互或UI做全新设计的需求,这个时候可以自定义菜单栏组件支持。 首先继承平台的CustomMenuWidget 组件,将自己vue文件设置到component处 import { NavMenu, SPI, ViewWidget } from '@kunlun/dependencies'; import Component from './CustomMenu.vue'; @SPI.ClassFactory( ViewWidget.Token({ // 这里的widget跟平台的组件一样,这样才能覆盖平台的组件 widget: 'nav-menu' }) ) export class CustomMenuWidget extends NavMenu { public initialize(props) { super.initialize(props); this.setComponent(Component); return this; } } vue文件中继承平台的props,编写自定义页面代码 export const NavMenuProps = { /** * 当前模块 */ module: { type: Object as PropType<IModule | null> }, /** * 树结构的菜单 */ menus: { type: Array as PropType<IResolvedMenu[]>, default: () => [] }, /** * 菜单类型,现在支持垂直、水平、和内嵌模式三种 */ mode: { type: String as PropType<'vertical' | 'horizontal' | 'inline'>, default: 'inline' }, /** * 菜单栏是否折叠收起 */ collapsed: { type: Boolean, default: false }, /** * 当前展开的 SubMenu 菜单项 key 数组 */ openKeys: { type: Array as PropType<string[]>, default: () => [] }, /** * 当前选中的菜单项 key 数组 */ selectKeys: { type: Array as PropType<string[]>, default: () => [] }, /** * 菜单搜索下拉选中菜单项 */ selectMenuBySearch: { type: Function as PropType<(menuName: String) => void> }, /** * 选中菜单项 */ selectMenu: { type: Function as PropType<(menuName: String) => Promise<void>> }, /** * SubMenu 展开/关闭的回调 */ openChange: { type: Function as PropType<(openKeys: string[]) => void> }, /**…

    2024年5月23日
    1.9K00

Leave a Reply

Please Login to Comment