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.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日
    78400
  • 4.2.4 框架之网络请求-HttpClient

    oinone提供统一的网络请求底座,基于graphql二次封装 一、初始化 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setMiddleware() // 必须设置,请求回调。具体查看文章https://shushi.yuque.com/yqitvf/oinone/vwo80g http.setBaseURL() // 必须设置,后端请求的路径 图4-2-4-1 初始化代码示例 二、HttpClient详细介绍 获取实例 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); 图4-2-4-2 获取实例 接口地址 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setBaseURL('接口地址'); http.getBaseURL(); // 获取接口地址 图4-2-4-3 接口地址 请求头 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setHeader({key: value}); 图4-2-4-4 请求头 variables import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setExtendVariables((moduleName: string) => { return customFuntion(); }); 图4-2-4-5 variables 回调 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setMiddleware([middleware]); 图4-2-4-6 回调 业务使用-query private http = HttpClient.getInstance(); private getTestQuery = async () => { const query = `gql str`; const result = await this.http.query('module name', query); console.log(result) return result.data[`xx`]['xx']; // 返回的接口,打印出result对象层次返回 }; 图4-2-4-7 业务使用-query 业务使用-mutate private http = HttpClient.getInstance(); private getTestMutate = async () => { const mutation = `gql str`; const result = await this.http.mutate('module name', mutation); console.log(result) return result.data[`xx`]['xx']; // 返回的接口,打印出result对象层次返回 }; 图4-2-4-8 业务使用-mutate 三、如何使用HttpClient 初始化 在项目目录src/main.ts下初始化httpClient 初始化必须要做的事: 设置服务接口链接 设置接口请求回调 业务实战 前文说到自定义新增宠物表单,让我们在这个基础上加入我们的httpClient; 第一步新增service.ts 图4-2-4-8 新增service.ts service.ts import { HttpClient }…

    2024年5月23日
    1.0K00
  • 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.4K00
  • 工作台

    有工作台权限的用户,默认登录页为工作台,也可以通过APP Finder进入工作台。 1. 快捷处理 右上角消息中会气泡展示未处理或未读的操作,点击展开后可以点过去进行快捷处理。 2. 查看、处理流程 2.1 流程查看 流程管理页面共同点: 1包含选项分类筛选 2包含标签筛选 3包含应用下拉选筛选 4包含根据流程名称搜素 流程管理页面名词解释: 待办:当前登录用户未处理的流程节点 我发起的:当前登录用户人为触发的流程(模型触发) 抄送:抄送给当前登录用户的节点(审批/填写) 我已办结:由当前登录用户完成人工/自动同意、人工拒绝或人工填写的节点 无需办理:当前登录用户转交的任务/被退回、被撤销、被或签、被其他分支任务拒绝的还未办理的任务 站内信:当前登录用户收到的站内信 2.2 流程处理 每条流程数据下方有动作,点击进入流程处理页面,大致分为详情页和操作页。 待办中点击“审批/填写”会进入流程操作页。审批操作页可能包含“同意、拒绝、退回、加签、转交、返回”,填写操作页可能包含“提交、暂存”,审批操作页包含哪些动作由流程设计决定。 我发起的、抄送、我已办结、无需处理点击“查看”会进入流程详情页。 3. 应用快捷入口 应用中心中星标的收藏应用会展示在此处,点击可快捷进入应用。 应用中心中已安装的应用点击星标即可收藏。

    2024年6月20日
    67300
  • 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日
    96800

Leave a Reply

登录后才能评论