3.5.6.1 字段的配置

字段组件类型

ttype可以配置哪些widget?本文这里把oinone平台默认支持的所有widget都进行了罗列,方便大家查阅。

字段组件匹配规则

字段组件没有严格的按组件名(widget)、字段类型(ttype)、视图组件类型(viewType)限定,而是一个匹配规则

  1. 按widget 最优先匹配

  2. 按最大匹配原则

    1. ttype、viewType。每个属性权重一分
  3. 按后注册优先原则

通用属性

属性 属性描述 属性name 默认值 类型
标题 字段的标题名称 label - string
占位提示 一个字段的描述信息,常用于说明当前字典的范围、注意事项等 placeholder - string
描述说明 组件描述信息 hint - string
数据校验 与表单其他数据联动校验 validator - 表达式
数据校验不通过提示 数据校验不通过提示 validatorMessage 校验失败 string
只读 字段的状态,可见,不可编辑 readonly false boolean或者表达式
隐藏 字段的状态,不,不可编辑 invisible false boolean或者表达式
必填 字段是否必填 required false boolean或者表达式
禁用 字段是否禁用 disabled false boolean或者表达式
宽度 属性在页面中的宽度 colSpan 01/02
标题排列方式 标题排列方式: 水平 , 横向 layout vertical vertical | horizontal
默认值 默认值,多值逗号分割 defaultValue - 根据不同ttype有不同的默认值类型

表3-5-6-1 字段通用属性

字段组件大全

widget为"-"表明不需要指定,是该ttype默认widget

组件名称 widget 对应ttype 属性 属性描述 属性name 默认值 类型
单行文本 - STRING 通用属性
文本类型 密码:password; 文本: text type text string
最小长度 输入框填写数据时最少输入的长度值 minLength - number
最大长度 输入框填写数据时最多输入的长度值 maxLength - number
输入格式 单行文本组件特有的属性,通过规则校验内容,提供一些常用的,也支持自定义校验正则 pattern - 正则表达式
输入格式不通过 输入格式不通过提示语 tips 校验失败 string
显示计数器 设置输入框是否显示字数计数器 showCount FALSE boolean
显示清除按钮 设置输入框是否有一键清除的按钮及功能 allowClear TRUE TRUE
支持前缀 开启前缀 showPrefix FALSE boolean
支持后缀 开启后缀 showSuffix FALSE boolean
前缀类型 ICON: 图标; TEXT:文本 prefixType - string
后缀类型 ICON: 图标; TEXT:文本 suffixType - string
前缀内容 文本内容或者图标引用名 prefix - string
后缀内容 文本内容或者图标引用名 suffix - string
前缀存储 前缀存储, 仅前缀类型为文本可用 prefixStore - boolean
后缀存储 后缀存储, 仅后缀类型为文本可用 suffixStore - boolean
多行文本 - TEXT 通用属性
最小长度 输入框填写数据时最少输入的长度值 minLength - number
最大长度 输入框填写数据时最多输入的长度值 maxLength - number
显示计数器 设置输入框是否显示字数计数器 showCount FALSE boolean
显示清除按钮 设置输入框是否有一键清除的按钮及功能 allowClear TRUE TRUE
整数 - INTEGER 通用属性
最大值 最大值 max - number
最小值 最小值 min - number
支持前缀 开启前缀 showPrefix FALSE boolean
支持后缀 开启后缀 showSuffix FALSE boolean
前缀类型 ICON: 图标; TEXT:文本 prefixType - string
后缀类型 ICON: 图标; TEXT:文本 suffixType - string
前缀内容 文本内容或者图标引用名 prefix - string
后缀内容 文本内容或者图标引用名 suffix - string
显示千分位 显示千分位 showThousandth FALSE boolean
显示清除按钮 设置输入框是否有一键清除的按钮及功能 allowClear TRUE TRUE
小数 - FLOAT 通用属性
最大值 最大值 max - number
最小值 最小值 min - number
支持前缀 开启前缀 showPrefix FALSE boolean
支持后缀 开启后缀 showSuffix FALSE boolean
前缀类型 ICON: 图标; TEXT:文本 prefixType - string
后缀类型 ICON: 图标; TEXT:文本 suffixType - string
前缀内容 文本内容或者图标引用名 prefix - string
后缀内容 文本内容或者图标引用名 suffix - string
显示千分位 显示千分位 showThousandth FALSE boolean
保留小数位数 保留小数位数 precision - number
显示清除按钮 设置输入框是否有一键清除的按钮及功能 allowClear TRUE TRUE
下拉单选 M2M、O2O、ENUM不需要配置 M2M 通用属性
BOOLEAN为Select O2O 选项配置 选项配置使用<option name="" displayName="" invisible="">节点可配置多个选项, options -
BOOLEAN 关系型下拉不支持
ENUM 选项字段 关系型下拉选项展示标题,例如"activeRecord.name" optionLabel 模型数据标题 表达式
搜索字段 关系下拉搜索使用字段,例如"name, code",字段名逗号分割 searchFields name string
过滤条件 关系型下拉数据过滤, 例如"activeRecord.name == '小明'" domain - 表达式
下拉多选 - O2M、M2M、ENUM 通用属性
选项配置 选项配置使用<option name="" displayName="" invisible="">节点可配置多个选项, options -
关系型下拉不支持
选项字段 关系型下拉选项展示标题,例如"activeRecord.name" optionLabel 模型数据标题 表达式
搜索字段 关系下拉搜索使用字段,例如"name, code",字段名逗号分割 searchFields name string
过滤条件 关系型下拉数据过滤, 例如"activeRecord.name == '小明'" domain - 表达式
最多选择个数 多选最多选择的个数 maxNumber - number
最少选择个数 多选最少选择的个数 minNumber - number
开关 - BOOLEAN 通用属性
默认值 默认值 defaultValue FALSE boolean
单选框 Radio BOOLEAN、ENUM 通用属性
选项配置 选项配置使用<option name="" displayName="" invisible="">节点可配置多个选项, options -
关系型下拉不支持
排列方式 单选框的排列方式 orientation horizontal vertical | horizontal
复选框 Checkbox ENUM,multi=true 通用属性
选项配置 选项配置使用<option name="" displayName="" invisible="">节点可配置多个选项, options -
关系型下拉不支持
排列方式 单选框的排列方式 orientation horizontal vertical | horizontal
富文本 - HTML 通用属性
年份 - Year 通用属性
日期 - Date 通用属性
日期格式 CHINESE: 2019年04月06日 dateFormat CHINESE CHINESE
CHINESE_YEAR_MONTH: 2019年04月 CHINESE_YEAR_MONTH
HYPHEN_YEAR_MONTH: 2019-04 HYPHEN_YEAR_MONTH
SLASH_YEAR_MONTH: 2019/04 SLASH_YEAR_MONTH
HYPHEN: 2019-04-06 HYPHEN
SLASH: 2019/04/06 SLASH
日期时间 - DateTime 通用属性
时间格式 COLON_NORMAL: HH:mm:ss timeFormat COLON_NORMAL COLON_NORMAL
COLON_SHORT: HH:mm COLON_SHORT
AP_COLON_NORMAL: A hh:mm:ss AP_COLON_NORMAL
AP_COLON_SHORT: A hh:mm AP_COLON_SHORT
日期格式 CHINESE: 2019年04月06日 dateFormat CHINESE CHINESE
CHINESE_YEAR_MONTH: 2019年04月 CHINESE_YEAR_MONTH
HYPHEN_YEAR_MONTH: 2019-04 HYPHEN_YEAR_MONTH
SLASH_YEAR_MONTH: 2019/04 SLASH_YEAR_MONTH
HYPHEN: 2019-04-06 HYPHEN
SLASH: 2019/04/06 SLASH
时间 - Time 通用属性
时间格式 COLON_NORMAL: HH:mm:ss timeFormat COLON_NORMAL COLON_NORMAL
COLON_SHORT: HH:mm COLON_SHORT
AP_COLON_NORMAL: A hh:mm:ss AP_COLON_NORMAL
AP_COLON_SHORT: A hh:mm AP_COLON_SHORT
颜色选择器 ColorPicker STRING 通用属性
文件上传 Upload STRING multi=true 通用属性
最大上传文件个数 最大上传文件个数 limit - number
最大上传文件体积 最大上传文件体积,单位为mb limitSize - number
限制上传文件类型 限制上传文件类型, 例如".jpg,.mp4", 逗号分割 limitFileExtensions - string
图片上传 UploadImg STRING multi=true 通用属性
最大上传文件个数 最大上传文件个数 limit - number
最大上传文件体积 最大上传文件体积,单位为mb limitSize - number
限制上传文件类型 限制上传文件类型, 例如".jpg,.mp4", 逗号分割 limitFileExtensions - string
标签 - STRING multi=true 数量限制 限制输入标签的个数 limit - number
表单 Form M2O、O2O 通用属性
标题排列方式 标题排列方式: 水平 , 横向, 控制整个表单的排列方式 layout vertical vertical | horizontal
表格 Table O2M、M2M 通用属性
操作列显示数量 表格操作列显示数量,1-5可选 inlineActiveCount 3 1, 2, 3, 4, 5
默认分页条数 表格分页默认分页条数 defaultPageSize 30 10,15, 30, 50, 100, 200
Iframe网页 Iframe STRING 通用属性
超链接 Hyperlinks STRING 通用属性
链接文字 超链接的展示标题
时间范围 - Year、Date、DateTime、Time 通用属性
货币 - CURRENCY 最大值 最大值 max - number
最小值 最小值 min - number
支持前缀 开启前缀 showPrefix FALSE boolean
支持后缀 开启后缀 showSuffix FALSE boolean
前缀类型 ICON: 图标; TEXT:文本 prefixType - string
后缀类型 ICON: 图标; TEXT:文本 suffixType - string
前缀内容 文本内容或者图标引用名 prefix - string
后缀内容 文本内容或者图标引用名 suffix - string
显示千分位 显示千分位 showThousandth FALSE boolean
保留小数位数 保留小数位数 precision - number
显示清除按钮 设置输入框是否有一键清除的按钮及功能 allowClear TRUE TRUE
手机号 - PHONE 最小长度 输入框填写数据时最少输入的长度值 minLength - number
最大长度 输入框填写数据时最多输入的长度值 maxLength - number
输入格式 单行文本组件特有的属性,通过规则校验内容,提供一些常用的,也支持自定义校验正则 pattern - 正则表达式
输入格式不通过 输入格式不通过提示语 tips 校验失败 string
显示计数器 设置输入框是否显示字数计数器 showCount FALSE boolean
显示清除按钮 设置输入框是否有一键清除的按钮及功能 allowClear TRUE TRUE
支持前缀 开启前缀 showPrefix FALSE boolean
支持后缀 开启后缀 showSuffix FALSE boolean
前缀类型 ICON: 图标; TEXT:文本 prefixType - string
后缀类型 ICON: 图标; TEXT:文本 suffixType - string
前缀内容 文本内容或者图标引用名 prefix - string
后缀内容 文本内容或者图标引用名 suffix - string
前缀存储 前缀存储, 仅前缀类型为文本可用 prefixStore - boolean
后缀存储 后缀存储, 仅后缀类型为文本可用 suffixStore - boolean
邮箱 - EMAIL 最小长度 输入框填写数据时最少输入的长度值 minLength - number
最大长度 输入框填写数据时最多输入的长度值 maxLength - number
输入格式 单行文本组件特有的属性,通过规则校验内容,提供一些常用的,也支持自定义校验正则 pattern - 正则表达式
输入格式不通过 输入格式不通过提示语 tips 校验失败 string
显示计数器 设置输入框是否显示字数计数器 showCount FALSE boolean
显示清除按钮 设置输入框是否有一键清除的按钮及功能 allowClear TRUE TRUE
支持前缀 开启前缀 showPrefix FALSE boolean
支持后缀 开启后缀 showSuffix FALSE boolean
前缀类型 ICON: 图标; TEXT:文本 prefixType - string
后缀类型 ICON: 图标; TEXT:文本 suffixType - string
前缀内容 文本内容或者图标引用名 prefix - string
后缀内容 文本内容或者图标引用名 suffix - string
前缀存储 前缀存储, 仅前缀类型为文本可用 prefixStore - boolean
后缀存储 后缀存储, 仅后缀类型为文本可用 suffixStore - boolean

表3-5-6-2 字段组件大全

字段可选系统Widget

组件名称*代表统配widget 支持ttype 支持视图类型*代表统配ViewType, 说明
Table
*[TableO2MFieldWidget] OneToMany ViewType.Table 表格默认O2M组件
* [TableM2MFieldWidget] ManyToMany ViewType.Table 表格默认M2M组件
UploadImg[TableM2MUploadImgFieldWidget] ManyToMany ViewType.Table 图片上传往往用于跟PamirsFile对象关联的时候
UploadImg [TableM2OUploadImgFieldWidget ] ManyToOne ViewType.Table 图片上传往往用于跟PamirsFile对象关联的时候
Image[TableStringImageFieldWidget] String ViewType.Table 把字段值当url展示图片
*[TableBooleanFieldWidget] Boolean ViewType.Table 表格默认的Boolean组件
*[TableEnumFieldWidget] Enum ViewType.Table 表格默认的Enum组件
*[TableFloatFieldWidget] Float ViewType.Table 表格默认的Float组件
*[TableIntegerFieldWidget] Integer ViewType.Table 表格默认的Integer组件
*[TableLongFieldWidget] Long ViewType.Table 表格默认的Long组件
*[TableStringFieldWidget] String ViewType.Table 表格默认的String组件
*[TableYearFieldWidget] Year ViewType.Table 表格默认的Year组件
Search
*[SearchBooleanSelectFieldWidget] Boolean ViewType.Search 搜索默认的Boolean组件
*[SearchRangeDateTimeFieldWidget] DateTime ViewType.Search 搜索默认的DateTime组件
Form
Checkbox[FormBooleanCheckboxFieldWidget] Boolean ViewType.Form, ViewType.Search, ViewType.Detail
*[FormBooleanFieldWidget] Boolean ViewType.Form, ViewType.Search, ViewType.Detail Form\Search\Detail默认的Boolean组件,Radio形式
Switch [FormBooleanSwitchFieldWidget] Boolean ViewType.Form, ViewType.Search, ViewType.Detail
*[FormMoneyFieldWidget] Currency ViewType.Form, ViewType.Search, ViewType.Detail Form\Search\Detail默认的Currency组件
*[FormDateFieldWidget] Date ViewType.Form, ViewType.Detail Form\Detail默认的Date组件
*[FormDateTimeFieldWidget] DateTime ViewType.Form, ViewType.Detail Form\Detail默认的Date组件
RangeDatePickerTime [FormRangeDateTimeFieldWidget] DateTime ViewType.Form, ViewType.Detail
*[FormEnumFieldWidget] Enum ViewType.Form, ViewType.Search, ViewType.Detail Form\Search\Detail默认的Enum组件
*[FormFloatFieldWidget] Float ViewType.Form, ViewType.Search, ViewType.Detail Form\Search\Detail默认的Float组件
RichText [FormHTMLRichTextFieldWidget] HTML * 所有viewType的HTML字段都可以配 RichText
*[FormIntegerFieldWidget] Integer Currency ViewType.Form, ViewType.Search, ViewType.Detail Form\Search\Detail默认的Integer\Currency组件
Select [FormM2MFieldSelectWidget] ManyToMany ViewType.Form, ViewType.Search
*[FormM2MTableFieldWidget] ManyToMany ViewType.Form, ViewType.Detail Form\Detail默认的ManyToMany组件
Upload [FormM2MUploadFieldWidget] ManyToMany ViewType.Form, ViewType.Detail
UploadImg [FormM2MUploadImgFieldWidget] ManyToMany ViewType.Form, ViewType.Detail
Form[FormM2OFormFieldWidget] ManyToOne ViewType.Form, ViewType.Detail
Select、* [FormM2OSelectFieldWidget] ManyToOne ViewType.Form, ViewType.Search, ViewType.Detail, ViewType.Table Form\Search\Detail\Table默认的ManyToOne组件
SSConstructSelect[FormM2OConstructSelectFieldWidget ] ManyToOne ViewType.Form, ViewType.Search, ViewType.Detail
Upload[FormM2OUploadFieldWidget] ManyToOne ViewType.Form, ViewType.Detail
UploadImg [FormM2OUploadImgFieldWidget] ManyToOne ViewType.Form, ViewType.Detail
*[TableM2OFieldWidget] ManyToOne ViewType.Table Table默认的ManyToOne组件
*FormMapFieldFormFieldWidget Map ViewType.Form, ViewType.Detail Form\Detail默认的Map组件
Select[FormO2MFieldSelectWidget] OneToMany ViewType.Form, ViewType.Search
Table[FormO2MFieldWidget] OneToMany ViewType.Form, ViewType.Detail
*[FormRelatedFieldWidget] Related ViewType.Form, ViewType.Search, ViewType.Detail Form\Search\Detail默认的Related组件
Email [FormStringEmailFieldWidget] String ViewType.Form, ViewType.Search, ViewType.Detail
*[FormStringFieldWidget] String ViewType.Form, ViewType.Search, ViewType.Detail
Password [FormStringPasswordFieldWidget] String ViewType.Form, ViewType.Search, ViewType.Detail
Phone [FormStringPhoneFieldWidget] String ViewType.Form, ViewType.Search, ViewType.Detail
VerificationCode [FormStringVerificationCodeFieldWidget] String ViewType.Form
DomainExpGenerator [FormTextDomainGeneratorFieldWidget] Text ViewType.Form
*[FormTextFieldWidget] Text ViewType.Form, ViewType.Search, ViewType.Detail Form\Search\Detail默认的Text组件
*[FormTimeFieldWidget] Time ViewType.Form, ViewType.Detail
*[FormYearPickerControlWidget] Year ViewType.Form, ViewType.Search
Detail
*[DetailBooleanFieldWidget] Boolean ViewType.Detail Detail默认的Boolean组件
*[DetailCurrencyFieldWidget] Currency ViewType.Detail Detail默认的Currency组件
*[DetailDateTimeFieldWidget] DateTime ViewType.Detail Detail默认的DateTime组件
*[DetailEnumFieldWidget] Enum ViewType.Detail Detail默认的Enum组件
*[DetailFloatFieldWidget] Float ViewType.Detail Detail默认的Float组件
*[DetailHtmlFieldWidget] HTML ViewType.Detail Detail默认的HTML组件
*[DetailIdFieldWidget] ID ViewType.Detail Detail默认的ID组件
*[DetailIntegerFieldWidget] Integer ViewType.Detail Detail默认的Integer组件
Select[DetailM2MSelectFieldWidget] ManyToMany ViewType.Detail
UploadImg [DetailM2MUploadImgFieldWidget] ManyToMany ViewType.Detail
Select [DetailO2MSelectFieldWidget] OneToMany ViewType.Detail
*[DetailStringFieldWidget] String ViewType.Detail Detail默认的String组件
*[DetailTextFieldWidget] Text ViewType.Detail Detail默认的Text组件
*[DetailTimeFieldWidget] Time ViewType.Detail Detail默认的Time组件
*[DetailYearFieldWidget] Year ViewType.Detail Detail默认的Year组件

表3-5-6-3 字段可选系统Widget

字段属性配置

常规字段field通用属性

Table字段通用属性

配置项 可选值 默认值 作用
label string displayName 展示中文名称
widget string 见上方的widget,字段组件类型
independentlyEditable true、false false 是否启用单字段编辑

表3-5-6-4 Table字段通用属性

Form字段通用属性

配置项 可选值 默认值 作用
基础校验
pattern 前端正则校验
maxValue 最大值
minValue 最小值
maxLength 最大长度
minLength 最小长度
required true、false、string false 是否必填
字段状态:自读、是否可见
invisible true、false、string false 是否隐藏
readonly true、false、string false 是否只读
字段数据处理:数据源过滤、计算、默认值
defaultValue * 前端默认值
domain string rsql表达式
compute string 计算值
其他配置
label string displayName 展示中文名称false 为不展示label
hint string 一些字段的说明性文字
widget string 见上方的widget,字段组件类型
colSpan number 1 字段在表单一行中所占比例具体看布局的配置
mutil true、false list的默认true其他为false 是否支持多值针对枚举、o2m、m2m、m2o

表3-5-6-5 Form字段通用属性

关系字段扩展配置

关系字段展示的形态更多,在通用和form的配置基础上,我们也增加了一些场景的配置形态,满足更多的业务场景。

配置项 可选值 默认值 作用
Select类组件配置
labelField string 展示字段以
separator连接
separator string
searchField string 搜索所用的字段

表3-5-6-6 关系字段扩展配置

搜索字段通用属性

配置项 可选值 默认值 作用
mutil true、false list的默认true其他为false 是否支持多值针对枚举、o2m、m2m、m2o
label string displayName 展示中文名称false为不展示label
domain string rsql表达式
blank true、false false 是否加入自选搜索字段
operator rsql操作符 根据ttype默认推断 搜索filter特有

表3-5-6-7 搜索字段通用属性

举例mutil和operator

针对mutil和operator进行举例,因为我们经常会碰到两种场景,这两个配置就非常有用

1mutil:单选的枚举值要在搜索框中选择多个值进行过滤,如订单状态枚举,我们搜索要搜索已下单未支付和已支付未发货的两种状态时就非常有必要

2operator:默认ttype为string,搜索的时候都是以like为操作符,但对于一些数据量比较大的表,我们希望走=或者单边like就可以派上用场了

Step1 新增PetTalentSexEnum枚举类
package pro.shushi.pamirs.demo.api.enumeration;

import pro.shushi.pamirs.meta.annotation.Dict;
import pro.shushi.pamirs.meta.common.enmu.BaseEnum;

@Dict(dictionary = PetTalentSexEnum.DICTIONARY,displayName = "萌猫体型")
public class PetTalentSexEnum extends BaseEnum<PetTalentSexEnum,Integer> {

    public static final String DICTIONARY ="demo.PetTalentSexEnum";

    public final static PetTalentSexEnum MAN =create("MAN",1,"男","男");
    public final static PetTalentSexEnum FEMAL =create("FEMAL",2,"女","女");
}

图3-5-6-1 新增PetTalentSexEnum枚举类

Step2 新增PetFile模型
package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;

@Model.model(PetFile.MODEL_MODEL)
@Model(displayName = "文件",summary="文件",labelFields = {"url"})
public class PetFile extends AbstractDemoIdModel{
    public static final String MODEL_MODEL="demo.PetFile";

    @Field(displayName = "图片路径")
    private String url;

}

图3-5-6-2 新增PetFile模型

Step3 修改PetTalent模型
package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.demo.api.enumeration.PetTalentSexEnum;
import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;
import pro.shushi.pamirs.user.api.model.PamirsUser;

import java.util.List;

@Model.model(PetTalent.MODEL_MODEL)
@Model(displayName = "宠物达人",summary="宠物达人")
public class PetTalent extends AbstractDemoIdModel{
    public static final String MODEL_MODEL="demo.PetTalent";

    @Field(displayName = "达人")
    private String name;

    @Field.one2many
    @Field(displayName = "达人图片")
    private List<PetFile> picList;

    @Field.many2many(relationFields = {"petTalentId"},referenceFields = {"petShopId"},throughClass =PetShopRelPetTalent.class)
    @Field(displayName = "推荐宠物商店")
    private List<PetShop> petShops;

    @Field.Enum
    @Field(displayName = "性别")
    private PetTalentSexEnum petTalentSex;

    @Field.many2one
    @Field(displayName = "创建者",required = true)
    @Field.Relation(relationFields = {"createUid"},referenceFields = {"id"})
    private PamirsUser creater;

}

图3-5-6-3 修改PetTalent模型

Step4 修改宠物达人表格视图的Template中search部分

<template slot="search"  cols="4">
    <field data="name" label="达人" operator="==" />
    <field data="petTalentSex" multi="true"/>
    <field data="petShops" />
    <field data="dataStatus" label="数据状态" multi="true">
        <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 data="createDate" label="创建时间"/>
</template>

图3-5-6-4 修改宠物达人表格视图的Template中search部分

Step5 重启看效果

我们看到发起的请求中name变成了==,而性别可以下拉多选并以or拼接。在3.5.3【Action的类型】一文的“ViewAction高级参数filter和domain(举例)”部分中的宠物达人2菜单针对name配置domain = ""name =like= \'老\'""将无效。

3.5.6.1 字段的配置

图3-5-6-5 查看宠物达人2菜单

视图中字段间的联动

字段联动需求主要在于:数据处理、展示处理和数据校验等字段间相互动态作用,其他复杂的联动需要自定义字段的widget,如平台提供的SSConstructSelect。

数据处理:通过字段的数据处理相关属性配置来完成如domain、compute

展示处理:通过字段的数据展示相关属性配置来完成如invisible、readonly

数据校验:通过字段的基础校验相关属性配置来完成如required

domain的举例

我们经常在o2m和m2m中的filter或field会设置domain来过滤数据,但是如何在设置过滤条件时用上其他字段的值呢?在4.1.19【框架之网关协议-后端占位符】一文中我们在过滤条件中用上了后端占位符,这个在日常开发中也很有用。言归正传我们来看“过滤条件时用上其他字段的值”的例子吧。

Step1 修改宠物达人的表格视图的Template中search部分

我们给petShops字段的domain设置成createUid == ${activeRecord.creater.id},表示该字段的可选范围取决于creater字段,activeRecord为前端内置关键字,获取当前操作记录。

 <template slot="search"  cols="4">
    <field data="name" label="达人" operator="==" />
    <field data="petTalentSex" multi="true" label="达人性别"/>
    <field data="creater" />
    <field data="petShops" label="宠物商店" domain="createUid == ${activeRecord.creater.id}"/>
    <field data="dataStatus" label="数据状态" multi="true">
        <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 data="createDate" label="创建时间"/>
</template>

图3-5-6-6 给petShops字段的domain设置成createUid == ${activeRecord.creater.id}

Step2 重启看效果

3.5.6.1 字段的配置

图3-5-6-7 查看宠物达人列表页

3.5.6.1 字段的配置

图3-5-6-8 查看宠物达人列表页

compute的举例

字段的值通过compute计算而来,这里

Step1 为PetTalent增加一个nick字段

 @Field(displayName = "昵称")
 private String nick;

图3-5-6-9 为PetTalent增加一个nick字段

Step2 修改PetTalent的Form视图增加下面代码

<field data="nick" compute="activeRecord.name"/>

图3-5-6-10 修改PetTalent的Form视图

Step3 重启看效果

我们发现昵称的值会跟着达人字段变化而变化

3.5.6.1 字段的配置

图3-5-6-11 昵称的值会跟着达人字段变化而变化

注:invisible、readonly、required的配置方式均与compute类似,感兴趣的小伙伴可自行体验。

通过自定义组件进行联动(SSConstructSelect)

目前对于复杂的联动需要自定义widget,在值变化时提交数据到后端,然后拿到后端返回值进行其他字段的赋值操作。

这里举例SSConstructSelect组件,它在值变化的时候会调用后端constructMirror的函数,并把对象返回的值进行赋值。

Step1 新增PetTalentAction类,并增加一个constructMirror函数

package pro.shushi.pamirs.demo.core.action;

import org.springframework.stereotype.Component;
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.enmu.FunctionOpenEnum;
import pro.shushi.pamirs.meta.enmu.FunctionTypeEnum;

@Model.model(PetTalent.MODEL_MODEL)
@Component
public class PetTalentAction {
    @Function(openLevel = FunctionOpenEnum.API)
    @Function.Advanced(type= FunctionTypeEnum.QUERY)
    public PetTalent constructMirror(PetTalent data){
        return data.setName("oinone");
    }
}

图3-5-6-12 新增PetTalentAction类

Step2 在PetTalent的form视图指定widget

widget【SSConstructSelect】有两个属性配置

  1. submitFields 提交后端请求时会带上字段列表,默认为:当前配置字段

  2. responseFields 请求返回值后会影响的字段列表,默认为:影响所有字段

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

图3-5-6-13 在PetTalent的form视图指定widget

Step3 重启看效果

选择创建者,后端会把达人改成了oinone,而昵称又通过前端compute计算为oinone

3.5.6.1 字段的配置

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

前端上下文关键字

关键字 说明 举例
activeRecord 当前对象 字段间联动之domain的举例
rootRecord 根对象 在视图嵌套的情况下,子视图需要用到父视图数据,则可以通过rootRecord来获取字段数据
openerRecord 打开者对象 在弹出框时需要用到打开者对象数据时,则可以用openerRecord来获取父窗口对象数据
scene 当前页面的viewAction.name

表3-5-6-8 前端上下文关键字

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

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

(0)
史, 昂的头像史, 昂数式管理员
上一篇 2024年5月23日 am9:18
下一篇 2024年5月23日

相关推荐

  • 3.1.1 环境准备(Mac版)

    工欲善其事,必先利其器。 在进行学习前,大家务必先检查环境。为了降低大家环境准备难度,基础环境全程用安装包无脑模式进行环境配置,安装请从附件下载(提供mac版本安装包,其他操作系统请自行网上下载与安装)。 后端相关 基础环境准备 安装 jdk 1.8 (下载地址见书籍【附件一】) 安装 mysql 8.0.26 (下载地址见书籍【附件一】) 安装mysql,并配置环境变量详见本文中的【环境变量设置】部分 如果mysql启动失败则,在命令行加执行以下命令 Shell mysqld –initalize-insecure sudo chmod -R a+rwx /usr/local/mysql/data/ 图3-1-1 mysql启动失败需执行的命令 安装 idea社区版 (官方下载链接见书籍【附件一】) 根据不同版本下载不同的idea插件 (联系Oinone官方客服) b. 点击Preferences菜单(快捷键 comand+,) c. 选择Plugins,进入插件管理页面,接下来按图操作就可以了 d. 图3-1-3 插件管理页面操作示意 e. 选择.zip文件,不需要解压 如果安装了Lombok,请禁用 idea的Java Complier,不然java反射获取方法入参名会变成arg*,导致元数据默认取值出错。或者pom中加入Complier插件,此方法为正解,不然上线也会有问题,我们学习的工程都会选用mvn插件方式 图3-1-4 界面操作示意图 图3-1-5 界面操作示意图 图3-1-6 界面操作示意图 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <configuration> <compilerArgument>-parameters</compilerArgument> <source>${maven.compiler.source}</source> <target>${maven.compiler.source}</target> <encoding>${project.build.sourceEncoding}</encoding> </configuration> </plugin> 图3-1-7 pom文件代码 安装 dataGrip 最新版本的 过期就去删“ ~/Library/Application\ Support/JetBrains/DataGrip202xxxx”相关的目录,无限期试用,或者安装其他mysql GUI 工具 安装 git 2.2.0(下载地址见书籍【附件一】) 安装 GraphQL的客户端工具 Insomnia 第一次使用可以参考3.2.1【构建第一个Module】一文中在模块启动后如何用该工具验证后端启动成功,更多使用技巧自行百度,Insomnia.Core-2022.4.2.dmg.txt(186.9 MB)(下载地址见书籍【附件一】),下载文件后修改文件名去除.txt后缀 安装 maven ,并配置环境变量(下载地址见书籍【附件一】) 配置mvn的settings,下载附件settings-open.xml,并重命名为settings.xml,建议直接放在~/.m2/下面。下载地址见oinone开源社区群公告,也可以联系oinone合作伙伴或服务人员 把settings.xml拷贝一份到maven安装目录conf目录下 环境变量设置 vi ~/.bash_profile ,并执行 source ~/.bash_profile ##按实际情况设置 export PATH=$PATH:/usr/local/mysql/bin export PATH=$PATH:/usr/local/mysql/support-files export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_0221.jdk/Contents/Home ##替换掉${mavenHome},为你的实际maven的安装路径 export M2_HOME=${mavenHome} export PATH=$PATH:$M2_HOME/bin 图3-1-8 环境变量设置 查看主机名 #查看主机名 echo $HOSTNAME 图3-1-9 查看主机名 根据主机名,配置/etc/hosts文件。此步如果没有配置,可能导致mac机器在启动模块时出现dubbo超时,从而导致系统启动巨慢,记得把oinonedeMacBook-Pro.local换成自己的主机名 #oinonedeMacBook-Pro.local 需要换成自己对应的主机名,自己的主机名用 echo $HOSMNAME 127.0.0.1 oinonedeMacBook-Pro.local ::1 oinonedeMacBook-Pro.local 图3-1-10 配置/etc/hosts文件 必备中间件安装脚本(rocketmq、zk、redis) zk 下载并解压(下载地址见书籍【附件一】) vi ~/.bash_profile ,追加以下两行,并执行 source ~/.bash_profile #### 替换掉${basePath},为你的实际安装路径 export ZOOKEEPER_HOME=${basePath}/apache-zookeeper-3.5.8-bin export PATH=$PATH:$ZOOKEEPER_HOME/bin 图3-1-11 配置zk环境变量 启动zk ##启动 zkServer.sh start ##停止 zkServer.sh stop 图3-1-12 启停zk rocketmq (下载地址见书籍【附件一】) vi ~/.bash_profile ,追加以下两行,并执行 source ~/.bash_profile #### 替换掉${basePath},为你的实际安装路径 export ROECET_MQ_HOME=${basePath}/rocketmq-all-4.7.1-bin-release export PATH=$PATH:$ROECET_MQ_HOME:$ROECET_MQ_HOME/bin 图3-1-13 配置rocketmq环境变量 到bin目录下修改配置文件 runserver.sh 和 runbroker.sh ##注释掉下面一行 ##choose_gc_log_directory ##修改java启动所需内存,按自己实际情况改,1g或者512m JAVA_OPT = "${JAVA_OPT} -server -Xms1g -Xmx1g -Xmn1g -XX:MetaspaceSize=128m -XX:MaxMetaspaceSize=320m" 图3-1-14 bin目录下修改配置文件 启停rocketmq ##启动 nameserver nohup…

    2024年5月23日
    1.3K00
  • 3.3.8 字段类型之基础与复合

    模型字段是描述实体的特征属性,本文介绍重点介绍字段的基础类型与复合类型 使用@Field注解来描述模型的字段。如果未配置字段类型,系统会根据Java代码的字段声明类型来自动获取业务类型。建议配置displayName属性来描述字段在前端的显示名称。可以使用defaultValue配置字段的默认值。 一、安装与更新 使用@Field.field来配置字段的不可变更编码。字段一旦安装,无法在对该字段编码值进行修改,之后的字段配置更新会依据该编码进行查找并更新;如果仍然修改该注解的配置值,则系统会将该字段识别为新字段,存储模型会创建新的数据库表字段,而原字段将会rename为废弃字段。 二、字段类型 类型系统由基本类型、复合(组件)类型、引用类型和关系类型四种类型系统构成。通过类型系统描述应用程序、数据库和前端视觉视图如何进行交互,数据及数据间关系如何处理的协议。其中引用类型和关系类型介绍详见3.3.9【字段类型之关系与引用】一文,字段命名规范参见3.3.1【构建第一个Model】一文,这里不再赘述。 基本类型 业务类型 Java类型 数据库类型 规则说明 BINARY ByteByte[] TINYINTBLOB 二进制类型,不推荐使用 INTEGER ShortIntegerLongBigInteger smallintintbigintdecimal(size,0) 整数, 包括整数(10-11位有效数字)、长整数(19-20位有效数字)和大整数(超过19位)。【数据库规则】:默认使用int;如果size小于6则使用smallint;如果size超过6则使用int;如果size超过10位数字,即大于11(包含符号位),则使用长整数bigint;如果size超过19位数字,即大于20(包含符号位),则使用大数decimal。若未配置size,则按Java类型推测。【前端交互规则】:整数使用Number类型,长整数和大整数前后端协议使用字符串类型。 FLOAT FloatDoubleBigDecimal float(M,D)double(M,D)decimal(M,D) 浮点数,?包括单精度浮点数(7-8位有效数字)、双精度浮点数(15-16位有效数字)和大数(超过15位)。【数据库规则】:默认使用单精度浮点数float;如果size超过7位数字,即大于等于8,则使用双精度浮点数double;如果size超过15位数字,即大于等于16,则使用大数decimal。若未配置size,则按Java类型推测。【前端交互规则】:单精度浮点数float和双精度浮点数double使用Number类型(因为都使用IEEE754协议64位进行存储),大数前后端协议使用字符串类型。 BOOLEAN Boolean tinyint(1) 布尔类型,值为1,true(真)或0,false(假) ENUM Enum 与数据字典指定基本类型一致 【前端交互规则】:可选项从ModelField的options字段获取,options字段值为字段指定数据字典子集的JSON序列化字符串。前后端传递的是可选项的name,数据库存储使用可选项的value。multi属性为true,则使用多选控件;multi属性为false,则使用单元控件 STRING String varchar(size) 字符串,size为长度限制默认值参考,前端可以view中覆盖该配置 TEXT String text 多行文本,编辑态组件为多行文本框,长度限制为配置项size值 HTML String text 富文本编辑器 DATETIME java.util.Datejava.sql.Timestamp datetime(fraction)timestamp(fraction) 日期时间类型【数据库规则】:日期和时间的组合,时间格式为?YYYY-MM-DD HH:MM:SS[.fraction],默认精确到秒,在默认的秒精确度上,可以带小数,最多带6位小数,即可以精确到?microseconds (6 digits) precision。可以通过设置fraction来设置精确小数位数,最终存储在字段的decimal属性上。【前端交互规则】:前端默认使用日期时间控件,根据日期时间类型格式化格式format格式化日期时间 YEAR java.util.Date year 年份类型日期类型【数据库规则】:默认“YYYY”格式表示的日期值【前端交互规则】:前端默认使用年份控件,根据日期类型格式化格式format格式化日期 DATE java.util.Datejava.sql.Date datedate 日期类型【数据库规则】:默认“YYYY-MM-DD”格式表示的日期值【前端交互规则】:前端默认使用日期控件,根据日期类型格式化格式format格式化日期 TIME java.util.Datejava.sql.Time time(fraction)time(fraction) 时间类型【数据库规则】:默认“HH:MM:SS”格式表示的时间值【前端交互规则】:前端默认使用时间控件,根据日期类型格式化格式format格式化日期 表3-3-8-1 字段基本类型 复合类型 业务类型 Java类型 数据库类型 规则说明 MONEY BigDecimal decimal(M,D) 金额,前端使用金额控件,可以使用currency设置币种字段 表3-3-8-2 字段复合类型 不可变更字段 使用immutable属性来描述该字段前后端都无法进行更新操作,系统会忽略不可变更字段的更新操作。 自动生成编码的字段 详见3.3.5【模型编码生成器】一文。 字段的序列化与反序列化 使用@Field注解的serialize属性来配置非字符串类型属性的序列化与反序列化方式,最终会以序列化后的字符串持久化到存储中。 详见3.3.7【字段之序列化方式】一文 前端默认配置 可以使用@Field注解中的以下属性来配置前端的默认视觉与交互规则,也可以在前端设置覆盖以下配置。 @Field(required),是否必填 @Field(invisible),是否不可见 @Field(priority),字段优先级,列表的列使用该属性进行排序 更多前端默认视图配置详见:3.5.4【Ux注解详解】一文,如:readonly是否只读等。 举例 回顾我们前面学习例子 现有PetShop代码如下 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.core.common.enmu.DataStatusEnum; import pro.shushi.pamirs.demo.api.enumeration.PetShopOptionEnum; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import java.sql.Time; import java.util.List; @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; @Field(displayName =…

    2024年5月23日
    99100
  • 翻译

    翻译应用是管理翻译规则的应用,以模型为基础、维护字段的翻译值,支持导入、导出 1. 操作步骤 Step1:导出所有翻译项; Step2:线下翻译; Step3:导入翻译项; Step4:刷新远程资源; Step5:页面右上角可切换语言,查看翻译效果。 2. 新增翻译 翻译是具体到模型字段,其中需要区分出是否字典; 源语言、目标语言,是在资源中维护的语言,可在资源中维护需要翻译的语言; 翻译项则是模型字段,默认翻译项为激活状态,关闭后维护的翻译项无效。 3. 导出、导入 不勾选导出:导出所有需要翻译的翻译项,包括模块、字段,源术语、翻译值等,其中如果已经翻译过的内容,会体现在翻译值中; 勾选导出:导出勾选模型的翻译项。 导入:导入翻译项,平台会根据模型拆分为多条数据。 4. 刷新远程资源 导入翻译项后,点击“刷新远程资源”按钮。 5. 查看翻译内容 页面右上角切换语言,查看翻译效果。

    2024年6月20日
    72800
  • 特别说明

    教材进度 目前还在编写整改中,特别是目录上带(改)字样的 本版本教材针对4.0,相对3.0增加的特性有: 通用能力部分:比如权限、审计、国际化、系统配置、集成可视化等 新版权限:交互优化,同时支持子管理员 新版审计,支持在线配置审计规则 系统配置,提供多种风格,让伙伴基础风格不在需要自定义主题和组件 新增集成设计器,通过连接器让应用api和数据库集成资产化管理,通过数据流进行接口逻辑编排,并提供统一的开放平台 设计器部分: 加强界面设计器部分对移动端、主题、自定义组件等支持,同时完善对数据管理操作、增加各类常用业务组件,加强对树形与及联的支持,表格视图搜索优化 流程设计器增加:审批员选择自定义逻辑、转交人选择自定义逻辑,支持手工触发、支持数据事务、支持调用模型函数 可视化设计器:增加自定义图表功能、增强下钻能力 模块管理:增加新增、多端配置等支持 内核机制: 性能优化:通过gql层面解决业务研发过程中1+N性能问题,权限性能优化,分布式缓存性能优化,整体性能提升2倍以上 针对多租户应用无状态的支持,低无一体支持本地调试 5.0的核心新特性预告,特性会在开发过程中陆续推出供大家体验,但完整体验时间为2024年6月份 新增打印设计功能 导出的默认交互增强以及导入导出模版设计 默认导入导出在交互时可以指定字段 导入导出模版可图形化设计 多模型AI集成设计器器 自定义组件、自定义图表交互友好性增强 自定义组件,属性面板设计模版化,解决设计组件属性面板的时候不知道有哪些默认属性。 增强组件与动作的结合灵活性 组件增加是否有子组件的通用属性,有子组件的组件具备组件拖拽区 增强UX注解能力,原本只有设计器支持的,后端UX注解也进行对应支持 后端低无一体功能开放(原本该功能只在saas版本上提供),方便咱们做应急和简单应用的时,以无代码为主,低代码为辅的模式。通过低无一体可以通过低代码的方式来解决无代码无法支撑的功能。 工作流增强 增加循环审批节点 增加分支汇集节点增强并行流程能力,比如分支汇集节点可以设置:所有并行节点处理完或只要一条处理完就继续执行。

    2024年5月23日
    1.3K00

Leave a Reply

登录后才能评论