字段组件类型

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

字段组件匹配规则

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

1. 按widget 最优先匹配

2. 按最大匹配原则

   1. ttype、viewType。每个属性权重一分

3. 按后注册优先原则

通用属性

字段组件大全

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

字段可选系统Widget

字段属性配置

常规字段field通用属性

Table字段通用属性

Form字段通用属性

关系字段扩展配置

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

搜索字段通用属性

举例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,"女","女");
}

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;

}

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;

}

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>

Step5 重启看效果

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

视图中字段间的联动

字段联动需求主要在于：数据处理、展示处理和数据校验等字段间相互动态作用，其他复杂的联动需要自定义字段的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>

Step2 重启看效果

compute的举例

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

Step1 为PetTalent增加一个nick字段

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

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

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

Step3 重启看效果

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

注：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");
    }
}

Step2 在PetTalent的form视图指定widget

widget【SSConstructSelect】有两个属性配置

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

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

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

Step3 重启看效果

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

前端上下文关键字