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.4.1 构建第一个Function

    Function做为oinone的可管理的执行逻辑单元,是无处不在的 在3.3.3【模型的数据管理器】和3.3.2【模型类型】一文中的代理模型部分,涉及到包括在Action中自定义函数(action背后都对应一个Function)、重写queryPage的函数、以及独立抽取的公共逻辑函数,Function做为oinone的可管理的执行逻辑单元,是无处不在的。这也是为什么说oinone以函数为内在的原因。 一、构建第一个Function 因为数据管理器和数据构造器是oinone为模型自动赋予的Function,是内在数据管理能力。模型其他Function都需要用以下四种方式主动定义 伴随模型新增函数(举例) 它是跟模型的java类定义在一起,复用模型的命名空间。 Step1 为PetShop增加一个名为sayHello的Function package pro.shushi.pamirs.demo.api.model; …… //import @Model.model(PetShop.MODEL_MODEL) @Model(displayName = "宠物店铺",summary="宠物店铺",labelFields ={"shopName"} ) @Model.Code(sequence = "DATE_ORDERLY_SEQ",prefix = "P",size=6,step=1,initial = 10000,format = "yyyyMMdd") public class PetShop extends AbstractDemoIdModel { public static final String MODEL_MODEL="demo.PetShop"; …… //省略其他代码 @Function(openLevel = FunctionOpenEnum.API) @Function.Advanced(type=FunctionTypeEnum.QUERY) public PetShop sayHello(PetShop shop){ PamirsSession.getMessageHub().info("Hello:"+shop.getShopName()); return shop; } } 图3-4-1-1 代码示例 Step2 重启看效果 用graphQL工具Insomnia查看效果 用Insomnia模拟登陆 a. 创建一个login请求,用于保存login请求,为后续模拟登陆保留快捷方式 图3-4-1-2 创建一个login请求 b. 下面为登陆请求的GraphQL,请在post输入框中输入。如果请求输入框提示错误可以,可以点击schema 的Refresh Schema来刷新文档 mutation { pamirsUserTransientMutation { login(user: {login: "admin", password: "admin"}) { broken errorMsg errorCode errorField } } } 图3-4-1-3 登陆请求的GraphQL c. 点击Send按钮,我们可以看到登陆成功的反馈信息 图3-4-1-4 登陆成功的反馈信息 用Insomnia模拟访问PetShop的sayHello方法,gql的返回中,我们可以看到两个核心返回 a. 一是方法正常返回的shopName b. 二是“PamirsSession.getMessageHub().info("Hello:"+shop.getShopName())”代码执行的结果,在messages中有一个消息返回,更多消息机制详见4.1.23【框架之信息传递】 query{ petShopQuery{ sayHello(shop:{shopName:"cpc"}){ shopName } } } 图3-4-1-5 用Insomnia模拟访问PetShop的sayHello 图3-4-1-6 代码执行结果 用Insomnia模拟访问PetShopProxy的sayHello方法 效果同用Insomnia模拟访问PetShop的sayHello方法,体现Function的继承特性。 独立新增函数绑定到模型(举例) 独立方法定义类,并采用Model.model或Fun注解,但是value都必须是模型的编码,如@Model.model(PetShop.MODEL_MODEL)或@Fun(PetShop.MODEL_MODEL) Step1 提取PetShop的sayHello方法独立到PetShopService中 注释掉PetShop的sayHello方法 package pro.shushi.pamirs.demo.api.model; …… //import @Model.model(PetShop.MODEL_MODEL) @Model(displayName = "宠物店铺",summary="宠物店铺",labelFields ={"shopName"} ) @Model.Code(sequence = "DATE_ORDERLY_SEQ",prefix = "P",size=6,step=1,initial = 10000,format = "yyyyMMdd") public class PetShop extends AbstractDemoIdModel { public static final String MODEL_MODEL="demo.PetShop"; …… //省略其他代码 // @Function(openLevel = FunctionOpenEnum.API) // @Function.Advanced(type=FunctionTypeEnum.QUERY) // public PetShop sayHello(PetShop shop){ // PamirsSession.getMessageHub().info("Hello:"+shop.getShopName()); // return shop; // } } 图3-4-1-7 注释掉PetShop的sayHello 新增PetShopService接口类 接口的方法上要加上@Function注解,这样另模块依赖api包的时候,会自动注册远程服务的消费者 package pro.shushi.pamirs.demo.api.service; import pro.shushi.pamirs.demo.api.model.PetShop; import pro.shushi.pamirs.meta.annotation.Fun; import pro.shushi.pamirs.meta.annotation.Function; @Fun(PetShop.MODEL_MODEL) //@Model.model(PetShop.MODEL_MODEL) public interface…

    2024年5月23日
    1.4K00
  • 3.5.6.4 动作的配置

    在3.5.3【Action的类型】一文中,我们介绍Action的几种类型,以及组合动作。 通用配置 配置项 可选值 默认值 作用 name 动作名称 label 显示名称 icon 图标 type primary defaultlink primary 按钮类型样式,支持主要样式、次要样式以及链接样式。 bizStyle defaultsuccesswarningdangerinfo default 按钮业务样式,支持成功(green)、警告(yellow)、危险(red)、信息(grey)四种样式。 invisible truefalse condition false 展示规则,有简单的true/false显隐,也支持复杂的表达式 disabled truefalse condition 根据动作上下文类型进行自动推断 是否禁用自动推断规则:当上下文类型为【单行】时,相当于使用表达式LIST_COUNT(context.activeRecords) != 1当上下文类型为【多行】时,相当于使用表达式LIST_COUNT(context.activeRecords) <= 1当上下文类型为【单行或多行】时,相当于使用表达式LIST_COUNT(context.activeRecords) == 0 disabledTitle string 根据动作上下文类型进行自动推断 禁用悬浮提示 表3-5-6-12 动作通用配置 二次确认配置 二次确认框默认支持两种模式,对话框和气泡框; 对话框 图3-5-6-51 对话框提示 气泡框 图3-5-6-52 气泡框警告 配置项 配置项 可选值 默认值 作用 备注 confirm string 二次确认提示文字 配置后开启二次确认 confirmType POPPER(气泡提示框) MODAL(对话框) POPPER 确认框类型 confirmPosition TM(按钮上方) BM(按钮下方) LM(按钮左侧) RM(按钮右侧) BM 确认框位置 气泡框该配置生效 enterText 确定 确定按钮文字 cancelText 取消 取消按钮文字 表3-5-6-13 配置项 弹出层动作配置(窗口动作ViewAction) 目前平台对于弹出层支持了两种展示形式。弹窗(modal/dialog)和抽屉(drawer) 支持两种配置方式【内嵌视图配置】和【引用已有页面】,内嵌视图配置优先于引用已有页面。 内嵌视图配置 该配置对于弹窗和抽屉均适用。 <action name="窗口动作名称" label="创建"> <view model="模型编码" type="form"> <template slot="form" widget="form"> <field data="id" invisible="true" /> <field data="code" label="编码" widget="Input" /> <field data="name" label="名称" widget="Input" /> </template> <template slot="footer"> <action name="$$internal_DialogCancel" label="关闭" type="default" /> <action name="create" label="确定" /> </template> </view> </action> 图3-5-6-53 内嵌视图配置 引用已有页面配置 该配置对于弹窗和抽屉均适用。 <view model="模型编码" type="form"> <template slot="form" widget="form"> <field data="id" invisible="true" /> <field data="code" label="编码" widget="Input" /> <field data="name" label="名称" widget="Input" /> </template> <template slot="footer"> <action name="$$internal_DialogCancel" label="关闭" type="default" /> <action name="create" label="确定" /> </template> </view> 图3-5-6-54 引用已有页面示例 <action name="窗口动作名称" label="创建" resViewName="$viewName$" /> 图3-5-6-55 引用已有页面 弹窗 当窗口动作的路由方式(target)为dialog时,内嵌视图/引用页面将以弹窗形式展示在页面上。 配置项 配置项 可选值 默认值 作用 title…

    2024年5月23日
    94800
  • 4.1.14 Search之非存储字段条件

    search默认查询的是模型的queryPage函数,但我们有时候需要替换调用的函数,这个特性会在下个版本支持。其核心场景为当搜索条件中有非存储字段,如果直接用queryPage函数的rsql拼接就会报错,所以非存储字段不会增加在rsql中。本文介绍一个比较友好的临时替代方案。 非存储字段条件(举例) Step1 为PetTalent新增一个非存储字段unStore @Field(displayName = "非存储字段测试",store = NullableBoolEnum.FALSE) private String unStore; 图4-1-14-1 为PetTalent新增一个非存储字段unStore Step2 修改PetTalent的Table视图的Template 在标签内增加一个查询条件 <field data="unStore" /> 图4-1-14-2 修改PetTalent的Table视图的Template Step3 重启看效果 进入宠物达人列表页,在搜索框【非存储字段测试】输入查询内容,点击搜索跟无条件一致 Step4 修改PetTalentAction的queryPage方法 package pro.shushi.pamirs.demo.core.action; …… 引入依赖类 @Model.model(PetTalent.MODEL_MODEL) @Component public class PetTalentAction { ……其他代码 @Function.Advanced(type= FunctionTypeEnum.QUERY) @Function.fun(FunctionConstants.queryPage) @Function(openLevel = {FunctionOpenEnum.API}) public Pagination<PetTalent> queryPage(Pagination<PetTalent> page, IWrapper<PetTalent> queryWrapper){ QueryWrapper<PetTalent> queryWrapper1 = (QueryWrapper<PetTalent>) queryWrapper; Map<String, Object> queryData = queryWrapper.getQueryData(); String unStore = (String) queryData.get(LambdaUtil.fetchFieldName(PetTalent::getUnStore)); if (StringUtils.isNotEmpty(unStore)) { //转换查询条件 queryWrapper1.like( 图4-1-14-3 修改PetTalentAction的queryPage方法 Step5 重启看效果 在搜索框【非存储字段测试】输入查询内容,跟通过【达人】字段搜索的效果是一致的 图4-1-14-4 示例效果

    2024年5月23日
    1.1K00
  • 3.3.3 模型的数据管理器

    数据管理器和数据构造器是Oinone为模型自动赋予的Function是内在数据管理能力,数据管理器针对存储模型是方便在大家编程模式下可以利用数据管理器Function快速达到相关数据操作的目的。数据构造器则主要用于模型进行初始化时字段默认值计算和页面交互 数据管理器 只有存储模型才有数据管理器。如果@Model.Advanced注解设置了dataManager属性为false,则表示在UI层不开放默认数据管理器。开放级别为API则表示UI层可以通过HTTP请求利用4.1.15【Pamirs标准网关协议】进行数据交互。 模型默认数据读管理器 函数编码 描述 开放级别 queryByPk 根据主键查询单条记录,会进行主键值检查 Local、Remote queryByEntity 根据实体查询单条记录 Local、Remote、Api queryByWrapper 根据查询类查询单条记录 Local、Remote queryListByEntity 根据实体查询返回记录列表 Local、Remote queryListByWrapper 根据查询类查询记录列表 Local、Remote queryListByPage 根据实体分页查询返回记录列表 Local、Remote queryListByPageAndWrapper 根据查询类分页查询记录列表 Local、Remote queryPage 分页查询返回分页对象,分页对象中包含记录列表 Local、Remote、Api countByEntity 按实体条件获取记录数量 Local、Remote countByWrapper 按查询类条件获取记录数量 Local、Remote 表3-3-3-1 模型默认数据读管理器 模型默认数据写管理器 函数编码 描述 开放级别 createOne 提交新增单条记录 Local、Remote createOrUpdate 新增或更新,需要为模型设置唯一索引,如果数据库检测到索引冲突,会更新数据,若未冲突则新增数据 Local、Remote updateByPk 根据主键更新单条记录,会进行主键值检查 Local、Remote updateByUniqueField 条件更新,条件中必须包含唯一索引字段 Local、Remote updateByEntity 按实体条件更新记录 Local、Remote、Api updateByWrapper 按查询类条件更新记录 Local、Remote createBatch 批量新增记录 Local、Remote createOrUpdateBatch 批量新增或更新记录 Local、Remote updateBatch 根据主键批量更新记录,会进行主键值检查 Local、Remote deleteByPk 根据主键删除单条记录,会进行主键值检查 Local、Remote deleteByPks 根据主键批量删除,会进行主键值检查 Local、Remote deleteByUniqueField 按条件删除记录,条件中必须包含唯一索引字段 Local、Remote deleteByEntity 根据实体条件删除 Local、Remote、Api deleteByWrapper 根据查询类条件删除 Local、Remote createWithField 新增实体记录并更新实体字段记录 Local、Remote、Api updateWithField 更新实体记录并更新实体字段记录 Local、Remote、Api deleteWithFieldBatch 批量删除实体记录并删除关联关系 Local、Remote、Api 表3-3-3-2 模型默认数据写管理器 如果模型继承IdModel,模型会自动设置主键设置为id,则会继承queryById、updateById和deleteById函数。 queryById(详情,根据ID查询单条记录,开放级别为Remote) updateById(提交更新单条记录,根据ID更新单条记录,开放级别为Remote) deleteById(提交删除单条记录,根据ID删除单条记录,开放级别为Remote) 如果模型继承CodeModel,模型也会继承IdModel的数据管理器,编码字段code为唯一索引字段。在新增数据时会根据编码生成规则自动设置编码字段code的值,继承queryByCode、updateByCode和deleteByCode函数。 queryByCode(详情,根据code查询单条记录,开放级别为Remote) updateByCode(提交更新单条记录,根据code更新单条记录,开放级别为Remote) deleteByCode(提交删除单条记录,根据code删除单条记录,开放级别为Remote) 没有主键或唯一索引的模型,在UI层不会开放默认数据写管理器。 #### 使用场景 图3-3-3-1 数据管理器使用场景 数据构造器 模型数据构造器 construct:供前端新开页面构造默认数据使用。所有模型都拥有construct构造器,默认会将字段上配置的默认值返回给前端,另外可以在子类中覆盖construct方法。数据构造器 construct函数的开放级别为API,函数类型为QUERY查询函数,系统将识别模型中的以construct命名的函数强制设置为API开放级别和QUERY查询类型。 可以使用@Field的defaultValue属性配置字段的默认值。注意,枚举的默认值为枚举的name。

    2024年5月23日
    1.6K10
  • 4.1.17 框架之网关协议-GraphQL协议

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。 一个 GraphQL 服务是通过定义类型和类型上的字段来创建的,然后给每个类型上的每个字段提供解析函数。例如,一个 GraphQL 服务告诉我们当前登录用户是 me,这个用户的名称可能像这样: type Query { me: User } type User { id: ID name: String } 图4-1-17-1 GraphQL定义类型和字段示意 一并的还有每个类型上字段的解析函数: function Query_me(request) { return request.auth.user; } function User_name(user) { return user.getName(); } 图4-1-17-2 每个类型上字段的解析函数示意 一旦一个 GraphQL 服务运行起来(通常在 web 服务的一个 URL 上),它就能接收 GraphQL 查询,并验证和执行。接收到的查询首先会被检查确保它只引用了已定义的类型和字段,然后运行指定的解析函数来生成结果。 例如这个查询: { me { name } } 图4-1-17-3 GraphQL查询请求示意 会产生这样的JSON结果: { "me": { "name": "Luke Skywalker" } } 图4-1-17-4 GraphQL查询结果示意 了解更多 https://graphql.cn/learn/

    Oinone 7天入门到精通 2024年5月23日
    1.0K00

Leave a Reply

登录后才能评论