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日

相关推荐

  • 工作流

    1. 查看、处理流程 1.1 流程查看 流程管理页面共同点: 选项分类筛选 标签筛选 应用下拉选筛选 根据流程名称搜索 流程管理页面名词解释: 任务待办:当前登录用户未处理的流程节点 我发起的:当前登录用户人为触发的流程(模型触发) 抄送:抄送给当前登录用户的节点(审批/填写) 我已办结:由当前登录用户完成人工/自动同意、人工拒绝或人工填写的节点 无需办理:当前登录用户转交的任务/被退回、被撤销、被或签、被其他分支任务拒绝的还未办理的任务 1.2 流程处理 1.2.1 任务待办 任务待办中点击“审批/填写”会进入流程详情处理页面,主要展示 1. 操作区 2. 流程发起人及状态 3. 模型视图内容 4. 流程时间线及其他记录。 审批代办操作区可能包含“分享、同意、拒绝、退回、加签、转交、返回”,填写代办操作区可能包含“分享、转交、提交、暂存、返回”,审批/填写操作区包含哪些动作由流程设计决定。 1.2.2 我发起的 我发起的流程列表中主要分为进行中和已完成的流程。进行中的流程可以进行查看、催办、撤销的操作,已完成的流程可以进行查看操作。 查看我发起的流程,进入流程详情页面,也是根据流程状态展示对应操作功能,进行中的流程有分享、催办、撤销、返回按钮,已完成的流程有分享、返回按钮。 1.2.3 抄送 抄送列表中每条抄送只可以进行查看操作,查看进入流程的详情页面,有分享和返回的操作。 1.2.4 我已办结 我已办结列表中可以进行查看操作,查看进入代办的详情页面,可以进行分享和返回的操作。 1.2.5 无需办理 无需办理列表中可以进行查看操作,查看进入代办的详情页面,可以进行分享和返回的操作。 2. 流程运行记录查看 所有运行流程都会记录在流程运行记录中,可以根据流程的所属应用,流程名称,触发方式和状态进行搜索,流程运行记录详情中展示流程运行的具体节点,运行时间,当前运行节点,异常信息等。

    2024年6月20日
    1.6K00
  • 4.1.12 函数之内置函数与表达式

    本文意在列全所有内置函数与表达式,方便大家查阅。 一、内置函数 内置函数是系统预先定义好的函数,并且提供表达式调用支持。 通用函数 数学函数 表达式 名称 说明 ABS 绝对值 函数场景: 表达式函数示例: ABS(number)函数说明: 获取number的绝对值 FLOOR 向下取整 函数场景: 表达式函数示例: FLOOR(number)函数说明: 对number向下取整 CEIL 向上取整 函数场景: 表达式函数示例: CEIL(number)函数说明: 对number向上取整 ROUND 四舍五入 函数场景: 表达式函数示例: ROUND(number)函数说明: 对number四舍五入 MOD 取余 函数场景: 表达式函数示例: MOD(A,B)函数说明: A对B取余 SQRT 平方根 函数场景: 表达式函数示例: SQRT(number) 函数说明: 对number平方根 SIN 正弦 函数场景: 表达式函数示例: SIN(number)函数说明: 对number取正弦 COS 余弦 函数场景: 表达式函数示例: COS(number)函数说明: 对number取余弦 PI 圆周率 函数场景: 表达式函数示例: PI() 函数说明: 圆周率 ADD 相加 函数场景: 表达式函数示例: ADD(A,B)函数说明: A与B相加 SUBTRACT 相减 函数场景: 表达式函数示例: SUBTRACT(A,B)函数说明: A与B相减 MULTIPLY 乘积 函数场景: 表达式函数示例: MULTIPLY(A,B)函数说明: A与B相乘 DIVIDE 相除 函数场景: 表达式函数示例: DIVIDE(A,B)函数说明: A与B相除 MAX 取最大值 函数场景: 表达式函数示例: MAX(collection) 函数说明: 返回集合中的最大值,参数collection为集合或数组 MIN 取最小值 函数场景: 表达式函数示例: MIN(collection) 函数说明: 返回集合中的最小值,参数collection为集合或数组 SUM 求和 函数场景: 表达式函数示例: SUM(collection)函数说明: 返回对集合的求和,参数collection为集合或数组 AVG 取平均值 函数场景: 表达式函数示例: AVG(collection)函数说明: 返回集合的平均值,参数collection为集合或数组 COUNT 计数 函数场景: 表达式函数示例: COUNT(collection)函数说明: 返回集合的总数,参数collection为集合或数组 UPPER_MONEY 大写金额 函数场景: 表达式函数示例: UPPER_MONEY(number)函数说明: 返回金额的大写,参数number为数值或数值类型的字符串 表4-1-12-1 数学函数 文本函数 表达式 名称 说明 TRIM 空字符串过滤 函数场景: 表达式函数示例: TRIM(text)函数说明: 去掉文本字符串text中的首尾空格,文本为空时,返回空字符串 IS_BLANK 是否为空字符串 函数场景: 表达式函数示例: IS_BLANK(text)函数说明: 判断文本字符串text是否为空 STARTS_WITH 是否以指定字符串开始 函数场景: 表达式函数示例: STARTS_WITH(text,start)函数说明: 判断文本字符串text是否以文本字符串start开始,文本为空时,按照空字符串处理 ENDS_WITH 是否以指定字符串结束 函数场景: 表达式函数示例: ENDS_WITH(text,start)函数说明: 判断文本字符串text是否以文本字符串end结束,文本为空时,按照空字符串处理 CONTAINS 包含 函数场景: 表达式函数示例: CONTAINS(text,subtext)函数说明: 判断文本字符串text是否包含文本字符串subtext,文本text为空时,按照空字符串处理 LOWER 小写 函数场景: 表达式函数示例: LOWER(text)函数说明: 小写文本字符串text,文本为空时,按照空字符串处理 UPPER 大写 函数场景: 表达式函数示例: UPPER(text)函数说明: 大写文本字符串text,文本为空时,按照空字符串处理 REPLACE 替换字符串 函数场景: 表达式函数示例: REPLACE(text,oldtext,newtext)函数说明: 使用文本字符串newtext替换文本字符串text中的文本字符串oldtext…

    Oinone 7天入门到精通 2024年5月23日
    1.2K00
  • 4.5.2 研发辅助之SQL优化

    Oinone体系中是不需要针对模型写SQL的,默认提供了通用的数据管理器。在带来便利的情况下,也导致传统的sql审查就没办法开展。但是我们可以以技术的手段收集慢SQL和限制问题SQL执行。 慢SQL搜集目的:去发现非原则性问题的慢SQL,并进行整改 限制问题SQL执行:对应一些不规范的SQL系统上直接做限制,如果有特殊情况手动放开 一、发现慢SQL 这个功能并没有直接加入到oinone的版本中,需要业务自行写插件,插件代码如下。大家可以根据实际情况进行改造比如: 堆栈入口,例子中只是放了pamirs,可以根据实际情况改成业务包路径 对慢SQL的定义是5s还是3s,根据实际情况变 package pro.shushi.pamirs.demo.core.plugin; import org.apache.ibatis.executor.Executor; import org.apache.ibatis.mapping.MappedStatement; import org.apache.ibatis.plugin.*; import org.apache.ibatis.session.ResultHandler; import org.apache.ibatis.session.RowBounds; import org.springframework.stereotype.Component; import pro.shushi.pamirs.meta.annotation.fun.extern.Slf4j; @Intercepts({ @Signature(type = Executor.class,method = "query",args = {MappedStatement.class,Object.class, RowBounds.class, ResultHandler.class}) }) @Component @Slf4j public class SlowSQLAnalysisInterceptor implements Interceptor { @Override public Object intercept(Invocation invocation) throws Throwable { long start = System.currentTimeMillis(); Object result = invocation.proceed(); long end = System.currentTimeMillis(); if (end – start > 10000) {//大于10秒 try { StackTraceElement[] stackTraceElements = Thread.currentThread().getStackTrace(); StringBuffer slowLog = new StringBuffer(); slowLog.append(System.lineSeparator()); for (StackTraceElement element : stackTraceElements) { if (element.getClassName().indexOf("pamirs") > 0) { slowLog.append(element.getClassName()).append(":").append(element.getMethodName()).append(":").append(element.getLineNumber()).append(System.lineSeparator()); } } Object parameter = null; if (invocation.getArgs().length > 1) { parameter = invocation.getArgs()[1]; } MappedStatement mappedStatement = (MappedStatement) invocation.getArgs()[0]; BoundSql boundSql = mappedStatement.getBoundSql(parameter); Configuration configuration = mappedStatement.getConfiguration(); String originalSql = showSql(configuration, boundSql); originalSql = originalSql.replaceAll("\'", "").replace("\"", ""); log.warn("检测到的慢SQL为:" + originalSql); log.warn("业务慢SQL入口为:" + slowLog.toString()); } catch (Throwable e1) { //忽略 } } return result; } public String showSql(Configuration configuration, BoundSql boundSql) { Object parameterObject = boundSql.getParameterObject(); List<ParameterMapping> parameterMappings = boundSql.getParameterMappings(); String sql = boundSql.getSql().replaceAll("[\\s]+", " "); if (parameterMappings.size() > 0 && parameterObject != null) { TypeHandlerRegistry typeHandlerRegistry…

    Oinone 7天入门到精通 2024年5月23日
    1.4K00
  • 合作伙伴中心

    合作伙伴中心包含“公司、个人、部门、岗位、员工”五个菜单。其中公司、个人为合作伙伴,是创建组织架构的前置条件;部门、岗位、员工为组织架构,是选择的公司下的内部架构。 合作伙伴 公司页面中包含常规的增删改查和查看详情。 公司的创建页面如下: 个人暂不支持创建。 组织架构 同样菜单中包含常规的增删改查和查看详情。 组织架构可以依次创建部门、岗位、员工。对应关系为,一个部门下有多个岗位,一个员工可以归属于多个部门和多个岗位。 部门创建页面如下: 岗位创建页面如下: 员工创建页面如下: 合作伙伴中心创建的员工会自动生成可登录的用户并进行绑定。 在用户中心创建的用户仅为可登录用户无法操作管理员工、关联部门。 流程设计器中可选到的操作人分类为“员工、部门、角色”。

    2024年6月20日
    1.2K00
  • 登录日志

    1. 登录日志 登录日志:记录企业成员/用户登录平台的历史明细,包括登录时间、位置、IP、登录设备、登录平台等信息,登录平台包括:PC Web、小程序、H5、APP。登录日志不需要通过审计规则订阅,平台会记录每位用户的登录日志。 操作支持导出、查看详情。

    2024年6月20日
    1.2K00

Leave a Reply

登录后才能评论