3.5.2.2 构建View的Template

史, 昂 • 2024年5月23日 am9:26 • Oinone 7天入门到精通 • 1458 views

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

自定义View的Template

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

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

第一个Tabel

Step1 自定义PetTalent的列表

我们先通过数据库查看默认页面定义，找到base_view表，过滤条件设置为model =\'demo.PetTalent\'，我们就看到该模型下对应的所有view，这些是系统根据该模型的ViewAction对应生成的默认视图，找到类型为【表格（type = TABLE）】的记录，查看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字段

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

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

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

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

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

图3-5-2-18 invisible属性

新建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-20 示例效果

第一个Form

Step1 自定义PetTalent的编辑页

我们先通过数据库查看默认页面定义，找到base_view表，过滤条件设置为model =\'demo.PetTalent\'，我们就看到该模型下对应的所有view，这些是系统根据该模型的ViewAction对应生成的默认视图，找到类型为【表单（type = FORM）】的记录，查看template字段。
新建一个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-22 示例效果

第一个Detail

Step1 自定义PetTalent的详情页

我们先通过数据库查看默认页面定义，找到base_view表，过滤条件设置为model =\'demo.PetTalent\'，我们就看到该模型下对应的所有view，这些是系统根据该模型的ViewAction对应生成的默认视图，找到类型为【表单（type = DETAIL）】的记录，查看template字段。
新建一个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-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-26 示例效果

其他

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

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

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

Oinone 7天从入门到精通

Like (0)

史, 昂数式管理员

0 0

3.5.2.3 构建View的Layout

Previous 2024年5月23日 am9:25

3.5.2.1 整体介绍

Next 2024年5月23日 am9:27

Oinone 7天入门到精通

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日
1.5K000
【附件一】下载说明

章节说明下载内容下载地址备注 3.1.1环境准备>环境准备（Mac版）安装 jdk 1.8 https://www.oracle.com/java/technologies/downloads/#java8 安装 mysql 8.0.26 https://dev.mysql.com/downloads/mysql/ 安装 idea社区版2020.2.4 https://www.jetbrains.com/idea/download/other.html 安装idea插件请移至Oinone官网https://www.oinone.top/对应页面下载或联系Oinone官方客服根据各自Idea版本下载对应插件，下载文件后去除.txt后缀安装 git 2.2.0 https://sourceforge.net/projects/git-osx-installer/files/git-2.15.0-intel-universal-mavericks.dmg/download?use_mirror=nchc 安装 GraphQL的客户端工具 Insomnia 请移至Oinone官网https://www.oinone.top/对应页面下载或联系Oinone官方客服下载文件后修改文件名去除.txt后缀安装 maven https://archive.apache.org/dist/maven/maven-3/3.8.1/binaries/ 安装脚本zk https://archive.apache.org/dist/zookeeper/zookeeper-3.5.8/apache-zookeeper-3.5.8-bin.tar.gz 安装脚本rocketmq https://archive.apache.org/dist/rocketmq/4.7.1/rocketmq-all-4.7.1-bin-release.zip 安装脚本redis https://download.redis.io/releases/redis-5.0.2.tar.gz 安装nvm https://github.com/nvm-sh/nvm/blob/master/README.md 3.1.1环境搭建>环境准备（Windows版）安装JDK 1.8 https://www.oracle.com/java/technologies/downloads/#java8 安装 Apache Maven 3.8+ https://maven.apache.org/download.cgi 下载settings-develop.xml 请移至Oinone官网https://www.oinone.top/对应页面下载或联系Oinone官方客服下载到 C:\Users\你的用户名.m2 目录中并重命名为settings.xml 安装 Jetbrains IDEA 2020.2.4 https://www.jetbrains.com/idea/download/other.html 安装 Jetbrains IDEA 2020.2.4需下载插件 https://pan.baidu.com/share/init?surl=HNzSxxH0KncvglkfITUrsA 提取密码: mdji 安装idea插件请移至Oinone官网https://www.oinone.top/对应页面下载或联系Oinone官方客服根据各自Idea版本下载对应插件，下载文件后去除.txt后缀安装MySQL 8 https://dev.mysql.com/downloads/mysql/ 安装Git https://git-scm.com/download/win 安装GraphQL测试工具Insomnia https://github.com/Kong/insomnia/releases 安装RocketMQ https://rocketmq.apache.org/download/ 安装ElasticSearch 版本 8.4.1 https://www.elastic.co/cn/downloads/past-releases/elasticsearch-7-6-1 安装Redis https://download.redis.io/releases/ Zookeeper安装 https://dlcdn.apache.org/zookeeper/zookeeper-3.8.0/apache-zookeeper-3.8.0-bin.tar.gz 安装nodejs 版本12.12.0 https://nodejs.org/dist/v12.12.0/node-v12.12.0-win-x64.zip 安装cnpm https://www.npmjs.com/package/cnpm 3.2.1Oinone一模块为组织>构建第一个Module 安装archetype-project-generate.sh脚本请移至Oinone官网https://www.oinone.top/对应页面下载或联系Oinone官方客服 3.5.5Oinone以交互为外在>设计器的结合安装Docker https://www.docker.com/get-started/ 下载结构包：Oinone-op-ds.zip 请移至Oinone官网https://www.oinone.top/对应页面下载或联系Oinone官方客服 4.1.10后端高级特性>函数之触发与定时下载canal中间件：pamirs-middleware-canal-deployer-3.0.1.zi 请移至Oinone官网https://www.oinone.top/对应页面下载或联系Oinone官方客服 4.1.11后端高级特性>函数之异步执行下载tbSchedule的控制台jar包：pamirs-middleware-schedule-console-3.0.1.jar.txt 请移至Oinone官网https://www.oinone.top/对应页面下载或联系Oinone官方客服下载schedule.json 请移至Oinone官网https://www.oinone.top/对应页面下载或联系Oinone官方客服下载以下文件放在pamirs-demo-boot的src/main/resources/init目录下 4.1.25后端高级特性>框架之搜索引擎 ES安装方式一：官方下载安装包：https://www.elastic.co/cn/downloads/past-releases/elasticsearch-8-4-1 下载后去除后缀.txt，然后解压文件方式二：请移至Oinone官网https://www.oinone.top/对应页面下载或联系Oinone官方客服

史, 昂
Oinone 7天入门到精通 2024年5月23日
1.9K001
Oinone 7天入门到精通

数据编码

1. 什么是数据编码当模型中的字段数据需要有一定的编码规定，可以在模型中设计模型或字段的数据编码。编码预览：实时展示规则设置后的编码。 2. 编码前/后缀编码前缀：必须以字母开头，且仅支持数字或字母，最多8个字符。编码后缀：必须以字母开头，且仅支持数字或字母，最多8个字符。 3. 格式化日期开关默认关闭，即数据编码中不包含日期。开关打开后，默认的日期格式为“年年年年月月日日”，也可以切换成“年年月月日日、年年月月、年年年年、年年”。序列归零周期：与格式化日期选择有关，若选择为“年年年年月月日日”，则可选“年、月、日”，选择为“年年年年”，则只可选“年”数据编码序列会按照设置的这个周期归零。 4. 编码序列编码方式：可选择连续序列或非连续序列，选择会影响后续包含哪些设置。序列长度：序列包含多少位数字，可以设置1 – 18之间的整数。序列起始值：数据编码序列的起始值，默认值为3。当编码方式设置为非连续序列时，展示其余两个配置项。步长类型：默认值为“自定义步长”，也可以设置成“1 – 10之间随机步长”。步长：当选择“自定义步长”时，设置的步长即为真实步长。当选择“1 – 10之间随机步长”时，实际步长为1 – 设置值之间的随机整数。

史, 昂
2024年6月20日
2.0K000
组件介绍

在设计页面时，页面中的所有内容均是由组件组成，每个组件有不同的属性，可以灵活的对每个组件的属性进行设置，以满足业务场景。组件分为四类，分别是布局、字段、动作、数据 1. 布局布局类组件主要用于页面的样式排版。分组：类似一个容器，可以把业务含义相近的内容放在这个分组容器内。选项卡：类似一个容器，每个选项卡可以添加多个选项页，可以把业务含义相近的内容放在选项卡的选项页容器内。 2. 字段字段型组件是常用，也是用于支撑页面的主要组件类，每个字段型组件都对应一个模型字段。单行文本：常用于记录名称、身份证号或其他普通的文字内容。多行文本：常用于记录字数较多的文字，如意见、复杂备注等。整数：常用于输入整数的天数、数量等，如果会出现小数，请使用小数组件。小数：常用于输入金额、单价等，会出现小数的数值。下拉单选：从多个选项中下拉选择一个数据，作为数据值。选项可以是关联模型的数据，也可以是数据字典或布尔型开关。下拉多选：从多个选项中下拉选择多个数据，作为数据值。选项可以是关联模型的数据，也可以是数据字典。开关：常用于只有是否两种对立选项的选择。单选框：常用于在直接展示的选现中单选一个值，例如选择性别。复选框：常用于在直接展示的选现中多选一个值，例如选择爱好、选择课程等。富文本编辑器：一种可内嵌于浏览器，所见即所得的文本编辑器，类似于Office Word 的编辑功能，常应用于篇幅较长的说明性文字，支持改变字体样式、插入图片等。年份：常用于选择出身年份、一项计划的年份等。日期：常用于选择颗粒度到日期的Date类型字段，例如出生日期、入职日期、入驻日期等。日期时间：常用于选择颗粒度到时间的DateTime类型的字段，例如下单时间、发货时间、审批时间等。时间：常用于选择仅时间无日期的Time类型的字段，如设置规章中的上班时间、日志的提交时间等。颜色选择器：应用于自定义颜色，如设置标签的颜色、设置产品的颜色属性、主题定制时选择色彩等。文件上传：常用于上传附件、文件，例如Office文档、图片、视频、音频、其他格式的文件等。图片上传：常用于上传记录的图片，例如上传身份证照片、头像、商品图片等。标签：可输入保存多值，例如用户的标记标签。 3. 数据与数据可视化设计器进行联动，可以选择自定义的图表或报表，在页面展示。图表：可以选择数据可视化设计器中允许被引用的图表，展示在页面中报表：可以选择数据可视化设计器中允许被引用的报表，展示在页面中

史, 昂
Oinone 7天入门到精通 2024年6月20日
2.1K000
Oinone 7天入门到精通

高级组件

本篇主要结合业务场景介绍高级组件的使用方法。级联选择/树选择级联选择与树选择是同一类业务场景、不同的交互体验，在这里我们一起说明。业务场景行业分类、产品类目/分类等自关联场景，案例以行业分类说明。操作步骤 Step1：搭建模型搭建行业模型，在行业模型中创建多对一字段“上级行业”，指多个子行业对应一个上级行业。如下图： Step2：界面设计创建行业的表格视图，绑定菜单，并且在此视图中增加“跳转动作 – 新增行业”；创建新增行业表单，将“上级行业”拖进画布中，组件切换为“级联选择”，属性面板配置“选项字段、搜索字段、透出字段”，平台低代码为每个模型自动生成了名称、编码字段，如果不使用平台提供的名称、自建名称时，需要配置这三个字段；为“上级行业”设置联动关系，自关联默认选择行业、标题定义为行业名称、自关联的字段为上级行业。配置后发布表格、表单视图，即可获得级联选择效果。表单视图中将“上级行业”切换为“树选择”组件，在发布后，即可获得树选择效果。 Step3：效果展示级联选择树选择

史, 昂
2024年6月20日
2.1K000

Please Login to Comment

3.5.2.2 构建View的Template

自定义View的Template

第一个Tabel

Step1 自定义PetTalent的列表

Step2 重启应用看效果

第一个Form

Step1 自定义PetTalent的编辑页

Step2 重启看效果

第一个Detail

Step1 自定义PetTalent的详情页

Step2 重启看效果

第一个Search

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

Step2 重启看效果

其他

相关推荐

3.3.7 字段之序列化方式

【附件一】下载说明

数据编码

组件介绍

高级组件

Leave a Reply