3.5.2.2 构建View的Template

我们在很多时候需要自定义模型的管理页面,而不是直接使用默认页面,比如字段的展示与隐藏,Action是否在这个页面上出现,搜索条件自定义等等,那么本章节带您一起学习如何自定义View的Template。

自定义View的Template

在使用默认layout的情况下,我们来做几个自定义视图Template,并把文件放到指定目录下。

3.5.2.2 构建View的Template

图3-5-2-14 自定义View的Template

第一个Tabel

Step1 自定义PetTalent的列表

  1. 我们先通过数据库查看默认页面定义,找到base_view表,过滤条件设置为model =\'demo.PetTalent\',我们就看到该模型下对应的所有view,这些是系统根据该模型的ViewAction对应生成的默认视图,找到类型为【表格(type = TABLE)】的记录,查看template字段。

3.5.2.2 构建View的Template

图3-5-2-15 base_view表查看template字段

<view name="tableView" cols="1" type="TABLE" enableSequence="false">
  <template slot="actions" autoFill="true"/>
  <template slot="rowActions" autoFill="true"/>
  <template slot="fields">
    <field invisible="true" data="id" label="ID" readonly="true"/>
    <field data="name" label="达人"/>
    <field data="dataStatus" label="数据状态">
      <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="创建时间" readonly="true"/>
    <field data="writeDate" label="更新时间" readonly="true"/>
    <field data="createUid" label="创建人id"/>
    <field data="writeUid" label="更新人id"/>
  </template>
  <template slot="search" autoFill="true" cols="4"/>
</view>

图3-5-2-16 base_view表查看template字段

  1. 对比view的template定义与页面差异,从页面上看跟view的定义少了,创建人id和更新人id。因为这两个字段元数据定义里invisible属性。

a. 当XML里面没有配置,则用元数据覆盖了。

b. 当XML里面配置了,则不会用元数据覆盖了。

在下一步中我们只要view的DSL中给这两个字段加上invisible="false"就可以展示出来了

3.5.2.2 构建View的Template

图3-5-2-17 查看列表展示

3.5.2.2 构建View的Template

图3-5-2-18 invisible属性

  1. 新建pet_talent_table.xml文件放到对应的pamirs/views/demo_core/template目录下,内容如下

a. 对比默认视图,在自定义视图时需要额外增加属性model="demo.PetTalent"

b. name设置为"tableView",系统重启后会替换掉base_view表中model为"demo.PetTalent",name为"tableView",type为"TABLE"的数据记录。

ⅰ. name不同的但type相同,且viewAction没有指定时,根据优先级priority进行选择。小伙伴可以尝试修改name="tableView1",并设置priority为1,默认生成的优先级为10,越小越优先。

ccreateUid和writeUid字段,增加invisible="false"的属性定义

<view name="tableView" model="demo.PetTalent" cols="1" type="TABLE" enableSequence="false">
  <template slot="actions" autoFill="true"/>
  <template slot="rowActions" autoFill="true"/>
  <template slot="fields">
    <field invisible="true" data="id" label="ID" readonly="true"/>
    <field data="name" label="达人"/>
    <field data="dataStatus" label="数据状态">
      <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="创建时间" readonly="true"/>
    <field data="writeDate" label="更新时间" readonly="true"/>
    <field data="createUid" label="创建人id" invisible="false"/>
    <field data="writeUid" label="更新人id" invisible="false"/>
  </template>
  <template slot="search" autoFill="true" cols="4"/>
</view>

图3-5-2-19 增加invisible="false"的属性定义

Step2 重启应用看效果

3.5.2.2 构建View的Template

图3-5-2-20 示例效果

第一个Form

Step1 自定义PetTalent的编辑页

  1. 我们先通过数据库查看默认页面定义,找到base_view表,过滤条件设置为model =\'demo.PetTalent\',我们就看到该模型下对应的所有view,这些是系统根据该模型的ViewAction对应生成的默认视图,找到类型为【表单(type = FORM)】的记录,查看template字段。

  2. 新建一个pet_talent_form.xml文件放在对应的pamirs/views/demo_core/template目录下,把数据状态下拉选项去除一个【草稿】选项

a. 对比默认视图,在自定义视图时需要额外增加属性model="demo.PetTalent" bname设置为"formView1",系统重启后会在base_view表中新增一个model为"demo.PetTalent",name为"formView1",type为"FORM",并设置priority为1 的数据记录。

ⅰ. name不同的但type相同,且viewAction没有指定时,根据优先级priority进行选择,默认生成的优先级为10,越小越优先。所以在此打开新增或编辑页面默认会路由到我们新配置的view上

<view name="formView1" model="demo.PetTalent" cols="2" type="FORM" priority="1">
  <template slot="actions" autoFill="true"/>
  <template slot="fields">
    <pack widget="group" title="基础信息">
      <field invisible="true" data="id" label="ID" readonly="true"/>
      <field data="name" label="达人"/>
      <field data="dataStatus" label="数据状态">
        <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 invisible="true" data="createDate" label="创建时间" readonly="true"/>
      <field invisible="true" data="writeDate" label="更新时间" readonly="true"/>
      <field data="createUid" label="创建人id"/>
      <field data="writeUid" label="更新人id"/>
    </pack>
  </template>
</view>

图3-5-2-21 自定义PetTalent的编辑页

Step2 重启看效果

3.5.2.2 构建View的Template

图3-5-2-22 示例效果

第一个Detail

Step1 自定义PetTalent的详情页

  1. 我们先通过数据库查看默认页面定义,找到base_view表,过滤条件设置为model =\'demo.PetTalent\',我们就看到该模型下对应的所有view,这些是系统根据该模型的ViewAction对应生成的默认视图,找到类型为【表单(type = DETAIL)】的记录,查看template字段。

  2. 新建一个pet_talent_detail.xml文件放在pamirs-demo-core的pamirs/views/demo_core/template目录下

a. 对比默认视图,在自定义视图时需要额外增加属性model="demo.PetTalent"

b. 把分组的title从【基础信息】改成【基础信息1】

<view name="detailView" cols="2" type="DETAIL" model="demo.PetTalent">
  <template slot="actions" autoFill="true"/>
  <template slot="fields">
    <pack widget="group" title="基础信息1">
      <field invisible="true" data="id" label="ID" readonly="true"/>
      <field data="name" label="达人"/>
      <field data="dataStatus" label="数据状态">
        <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="创建时间" readonly="true"/>
      <field data="writeDate" label="更新时间" readonly="true"/>
      <field data="createUid" label="创建人id"/>
      <field data="writeUid" label="更新人id"/>
    </pack>
  </template>
</view>

图3-5-2-23 自定义PetTalent的详情页

Step2 重启看效果

3.5.2.2 构建View的Template

图3-5-2-24 示例效果

第一个Search

Step1 自定义PetTalent的列表页的搜索项

修改pet_talent_table.xml文件,默认情况下代表着跟表格的字段自动填充搜索字段,我们搜索条件只保留【数据状态】和【创建时间】

<view name="tableView" model="demo.PetTalent" cols="1" type="TABLE" enableSequence="true" baseLayoutName="">
    <template slot="actions" autoFill="true"/>
    <template slot="rowActions" autoFill="true"/>
    <template slot="fields">
        <field invisible="true" data="id" label="ID" readonly="true"/>
        <field data="name" label="达人"/>
        <field data="dataStatus" label="数据状态">
            <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="创建时间" readonly="true"/>
        <field data="writeDate" label="更新时间" readonly="true"/>
        <field data="createUid" label="创建人id" invisible="false"/>
        <field data="writeUid" label="更新人id" invisible="false"/>
    </template>
    <template slot="search"  cols="4">
        <field data="dataStatus" label="数据状态">
            <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>
</view>

图3-5-2-25 自定义PetTalent的列表页的搜索项

Step2 重启看效果

3.5.2.2 构建View的Template

图3-5-2-26 示例效果

其他

search默认查询的是模型的queryPage函数,但我们有时候需要替换调用的函数,下个版本支持。其核心场景为当搜索条件中有非存储字段,如果直接用queryPage函数的rsql拼接就会报错。本版本临时替代方案见4.1.14【Search之非存储字段条件】一文。

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

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

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

相关推荐

  • 3.4 Oinone以函数为内在

    函数(Function):是oinone可管理的执行逻辑单元,跟模型绑定则对应模型的方法 描述满足数学领域函数定义,含有三个要素:定义域A、值域C{f(x),x属于A}和对应法则f。其中核心是对应法则f,它是函数关系的本质特征 满足面向对象原则,可设置不同开放级别,本地与远程智能切换。 本章会带大家更加详细地了解Function的方方面面,主要以几下几个维度 构建第一个Function 函数的开放级别与类型 函数的相关特性 函数元数据详解

    Oinone 7天入门到精通 2024年5月23日
    1.5K00
  • 梅丛银

    认识陈鹏程及数式核心团队同学已经有一段时间了,在我们多次的交流讨论中时常会谈及:未来中国哪家软件企业能在互联网云原生时代走出来超越传统软件企业?史昂说这是他的梦想,也是他们团队这么多年坚持技术和产品研发与应用优先思考之路。史昂及数式核心团队面向企业应用市场历经三年的潜心研发和实战交付,推出Oinone产品及配套的低代码平台工具:对比国内外应用软件平台在开放生态和云原生均有它的继承性和独特性,特别是将技术平台赋予企业各种业务领域属性,便于企业客户和开发伙伴的二次开发并能快速搭建各类企业核心应用场景是Oinone的最大亮点。Oinone的内在特点之一是参考了全球最大开源ERP Odoo的元数据模型设计,同时基于业务中台架构和云原生技术,形成了自己一套国际化的快速开发平台、建模规范和应用产品,通过自己进场落地很多品牌企业的应用中台化不断迭代升级,走出了一条具有显著特色的新应用软件之路。史昂及团队特点谦卑、善于思考,善于吸收他山之精华,这是创业团队难能可贵之点,由此能善于与生态伙伴合作也是能够走的更远更长的基础基因。最后希望和祝愿Oinone能为中国企业在云时代数字化实践做出更多的贡献,为软件产业构建强大的应用生态和开发社区,真正树立起Oinone自己的软件品牌形象。 资深IT咨询专家&浩鲸云智能专家学院院长:梅丛银

    Oinone 7天入门到精通 2024年5月23日
    1.4K00
  • 3.5.6.1 字段的配置

    字段组件类型 ttype可以配置哪些widget?本文这里把oinone平台默认支持的所有widget都进行了罗列,方便大家查阅。 字段组件匹配规则 字段组件没有严格的按组件名(widget)、字段类型(ttype)、视图组件类型(viewType)限定,而是一个匹配规则 按widget 最优先匹配 按最大匹配原则 ttype、viewType。每个属性权重一分 按后注册优先原则 通用属性 属性 属性描述 属性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 多行文本 -…

    2024年5月23日
    1.4K00
  • 6.3 数据审计(改)

    在业务应用中我们经常需要为一些核心数据的变更做审计追踪,记录字段的前后变化、操作IP、操作人、操作地址等等。数据审计模块为此提供了支撑和统一管理。它在成熟的企业的核心业务系统中,需求是比较旺盛的。接下来我们开始学习下数据审计模块 准备工作 pamirs-demo-core的pom文件中引入pamirs-data-audit-api包依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-data-audit-api</artifactId> </dependency> pamirs-demo-boot的pom文件中引入pamirs-data-audit-core和pamirs-third-party-map-core包依赖,数据审计会记录操作人的地址信息,所以也依赖了pamirs-third-party-map-core <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-data-audit-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core.map</groupId> <artifactId>pamirs-third-party-map-core</artifactId> </dependency> pamirs-demo-boot的application-dev.yml文件中增加配置pamirs.boot.modules增加data_audit 和third_party_map,即在启动模块中增加data_audit和third_party_map模块 pamirs: boot: modules: – data_audit – tp_map 为third_party_map模块增加高德接口api,下面e439dda234467b07709f28b57f0a9bd5换成自己的key pamirs: eip: map: gd: key: e439dda234467b07709f28b57f0a9bd5 数据审计 注解式(举例) Step1 新增PetTalentDataAudit数据审计定义类 package pro.shushi.pamirs.demo.core.init.audit; import pro.shushi.pamirs.data.audit.api.annotation.DataAudit; import pro.shushi.pamirs.demo.api.model.PetTalent; @DataAudit( model = PetTalent.MODEL_MODEL,//需要审计的模型 modelName = "宠物达人" ,//模型名称,默认模型对应的displayName //操作名称 optTypes = {PetTalentDataAudit.PETTALENT_CREATE,PetTalentDataAudit.PETTALENT_UDPATE}, fields={"nick","picList.id","picList.url","petShops.id","petShops.shopName"}//需要审计的字段,关系字段用"."连结 ) public class PetTalentDataAudit { public static final String PETTALENT_CREATE ="宠物达人创建"; public static final String PETTALENT_UDPATE ="宠物达人修改"; Step2 修改PetTalentAction的update方法 做审计日志埋点:手工调用 OperationLogBuilder.newInstance().record()方法。需要注意的是这里需要把原有记录的数据值先查出来做对比 @Function.Advanced(type= FunctionTypeEnum.UPDATE) @Function.fun(FunctionConstants.update) @Function(openLevel = {FunctionOpenEnum.API}) public PetTalent update(PetTalent data){ //记录日志 OperationLogBuilder.newInstance(PetTalent.MODEL_MODEL, PetTalentDataAudit.PETTALENT_UDPATE).record(data.queryById().fieldQuery(PetTalent::getPicList).fieldQuery(PetTalent::getPetShops),data); PetTalent existPetTalent = new PetTalent().queryById(data.getId()); if(existPetTalent !=null){ existPetTalent.fieldQuery(PetTalent::getPicList); existPetTalent.fieldQuery(PetTalent::getPetShops); existPetTalent.relationDelete(PetTalent::getPicList); existPetTalent.relationDelete(PetTalent::getPetShops); } data.updateById(); data.fieldSave(PetTalent::getPicList); data.fieldSave(PetTalent::getPetShops); return data; } Step3 重启看效果 修改宠物达人记录对应的字段,然后进入审计模块查看日志

    2024年5月23日
    1.2K00
  • 4.1.10 函数之触发与定时(改)

    函数的触发和定时在很多场景中会用到,也是一个oinone的基础能力。比如我们的流程产品中在定义流程触发时就会让用户选择模型触发还是时间触发,就是用到了函数的触发与定时能力。 整体链路示意图(如下图4-1-10-1 所示),本文只讲trigger里的两类任务,一个是触发任务,一个是定时任务,异步任务放在4.1.11【函数之异步执行】一文中单独去介绍。 图4-1-10-1 整体链路示意图 一、触发任务TriggerTaskAction(举例) 触发任务的创建,使用pamirs-middleware-canal监听mysql的binlog事件,通过rocketmq发送变更数据消息,收到MQ消息后,创建TriggerAutoTask。 触发任务的执行,使用TBSchedule拉取触发任务后,执行相应函数。 注意:pamirs-middleware-canal监听的数据库表必须包含触发模型的数据库表。 Step1 下载canal中间件 下载pamirs-middleware-canal-deployer-3.0.1.zip,去.txt后缀为pamirs-middleware-canal-deployer-3.0.1.zip,解压文件如下: 图4-1-10-2 下载canal中间件 Step2 引入依赖pamirs-core-trigger模块 pamirs-demo-api增加pamirs-trigger-api <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-trigger-api</artifactId> </dependency> 图4-1-10-3 pamirs-trigger-api依赖包 DemoModule在模块依赖定义中增加@Module(dependencies={TriggerModule.MODULE_MODULE}) @Component @Module( name = DemoModule.MODULE_NAME, displayName = "oinoneDemo工程", version = "1.0.0", dependencies = {ModuleConstants.MODULE_BASE, CommonModule.MODULE_MODULE, UserModule.MODULE_MODULE, TriggerModule.MODULE_MODULE} ) @Module.module(DemoModule.MODULE_MODULE) @Module.Advanced(selfBuilt = true, application = true) @UxHomepage(PetShopProxy.MODEL_MODEL) public class DemoModule implements PamirsModule { ……其他代码 } 图4-1-10-4 模块依赖中增加Trigger模块 pamirs-demo-boot 增加pamirs-trigger-core和pamirs-trigger-bridge-tbschedule的依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-trigger-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-trigger-bridge-tbschedule</artifactId> </dependency> 图4-1-10-5 增加pamirs-trigger-core和pamirs-trigger-bridge-tbschedule的依赖 修改pamirs-demo-boot的applcation-dev.yml 修改pamris.event.enabled和pamris.event.schedule.enabled为true pamirs_boot_modules增加启动模块:trigger pamirs: event: enabled: true schedule: enabled: true rocket-mq: namesrv-addr: 127.0.0.1:9876 boot: init: true sync: true modules: – base – common – sequence – resource – user – auth – message – international – business – trigger – demo_core 图4-1-10-6 启动模块中增加trigger模块 Step3 启动canal中间件 canal的库表需要手工建 create schema canal_tsdb collate utf8mb4_bin 图4-1-10-7 canal的建库语句 CREATE TABLE IF NOT EXISTS `meta_snapshot` ( `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT COMMENT '主键', `gmt_create` datetime NOT NULL COMMENT '创建时间', `gmt_modified` datetime NOT NULL COMMENT '修改时间', `destination` varchar(128) DEFAULT NULL COMMENT '通道名称', `binlog_file` varchar(64) DEFAULT NULL COMMENT 'binlog文件名', `binlog_offest` bigint(20) DEFAULT NULL COMMENT 'binlog偏移量', `binlog_master_id` varchar(64) DEFAULT NULL COMMENT 'binlog节点id', `binlog_timestamp` bigint(20) DEFAULT NULL…

    2024年5月23日
    1.5K00

Leave a Reply

登录后才能评论