3.5.2.2 构建View的Template

史, 昂 • 2024年5月23日 am9:26 • Oinone 7天入门到精通 • 1910 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

3.3 Oinone以模型为驱动

模型（model）：Oinone一切从模型出发，是数据及对行为的载体：是对所需要描述的实体进行必要的简化，并用适当的变现形式或规则把它的主要特征描述出来所得到的系统模仿品。模型由元信息、字段、数据管理器和自定义函数构成；符合面向对象设计原则包括：封装、继承、多态。本章会带大家快速而全方位地认识Oinone的模型。会从以下几个维度去对模型展开详细介绍。构建第一个Model 模型的类型模型的数据管理器模型的继承模型编码生成器枚举与数据字典字段序列化方式字段类型之基础与复合字段类型之关系与引用

史, 昂
Oinone 7天入门到精通 2024年5月23日
1.8K000
3.5 Oinone以交互为外在

交互组件（UI Componment）：用组件化的方式统一管理：菜单、布局、视图用Action做衔接，来勾绘出模块的前端交互拓扑，描述所有可操作行为 oinone的页面路由串联规则是以菜单为导航，用Action做衔接，用View做展示，详见3.5.2.1View的【整体介绍】。本章节会重点介绍：如何定义菜单、视图、行为以及其初始化 xml配置：视图配置（包括字段联动）、字段配置、布局配置、动作配置前端组件自定义

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

通知类

1.通知类 1.1 站内信当流程节点需要向用户发送消息或提示时使用站内信这个节点动作。接收人的选取类似审批节点的审批人，通知内容必填，配置完成，保存即可。节点触发后，接收人会在全渠道运营平台-工作台-我的消息中查看到站内信。 1.2 邮件当需要向指定邮箱发送邮件时使用邮件这个节点动作。可直接输入邮箱号，或者按照员工、部门、角色来选择，给接收人登记的邮箱发送邮件，也可以选择模型中的邮箱来发送邮件，若人员重复时只会发送一次邮件。填写主题，填写正文时可以调用当前流程中的一些模型字段的变量。 1.3 短信发送短信需要在工作流-系统设置-短信模板中创建一个短信模板，阿里云模版新增需要一段时间审核，审核通过后就可以正常使用短信节点。短信的接收人与邮件的操作方式一致，之后选择短信模板，并且确定好变量的对应关系即可。

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

工作台

1. 工作台介绍工作台用于呈现集成相关的统计数据，包括：连接器总数：集成资源连接器总数；数据流程总数：定义的数据连接流程总数；任务总执行数：任务总执行数（统计流程实例数量）；总异常任务数：总执行异常的任务数；开放接口数：合计开放接口数量（包含所有状态）。 2. 快捷连接快捷连接是通过快捷筛选所需要链接的集成资源（应用/Oinone平台应用/数据库等），进入【数据流程创建页】，同时展示平台提供的数据流程模版，点击开始连接可使用数据流程模型创建数据流程。开始连接后进入流程创建页：

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

3.5.7.9 自定义多Tab

在业务中，可能会遇到需要对多tab的交互或UI做全新设计的需求，这个时候可以自定义多tab组件支持。首先继承平台的MultiTabsWidget组件，将自己vue文件设置到component处 import { MultiTabsWidget, SPI, ViewWidget } from '@kunlun/dependencies'; import Component from './CustomMultiTabs.vue'; @SPI.ClassFactory( ViewWidget.Token({ // 这里的tagName跟平台的组件一样，这样才能覆盖平台的组件 tagName: ['multi-tabs', 'MultiTabs'] }) ) export class CustomMultiTabsWidget extends MultiTabsWidget{ public initialize(props) { super.initialize(props); // 设置自定义的vue组件 this.setComponent(Component); return this; } } vue文件中继承平台的props，编写自定义页面代码 export const MultiTabsProps = { /** * 组件是否可见 */ invisible: { type: Boolean }, /** * tab列表数据 */ tabs: { type: Array as PropType<MultiTab[]> }, /** * 当前激活的tab */ activeTab: { type: Object as PropType<MultiTab> }, /** * 鼠标悬浮所在的tab */ hoverTab: { type: Object as PropType<MultiTab> }, /** * 鼠标经过tab事件回调 */ onMouseenterTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 鼠标离开tab事件回调 */ onMouseleaveTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 点击tab */ onClickTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 刷新当前tab */ onRefreshCurrentTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 关闭当前tab */ onCloseCurrentTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 关闭除当前tab外的其他所有tab */ onCloseOtherTabs: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 关闭当前tab左侧的所有tab */ onCloseLeftTabs: { type: Function as…

史, 昂
2024年5月23日
1.5K000

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 Oinone以模型为驱动

3.5 Oinone以交互为外在

通知类

工作台

3.5.7.9 自定义多Tab

Leave a Reply