如何通过 Oineone 平台自定义视图

在 Oineone 平台上,自定义视图允许用户替换默认提供的页面布局,以使用自定义页面。本文将指导您如何利用 Oineone 提供的 API 来实现这一点。

默认视图介绍

Oineone 平台提供了多种默认视图,包括:

  • 表单视图
  • 表格视图
  • 表格视图 (左树右表)
  • 详情视图
  • 画廊视图
  • 树视图

每种视图都有其标准的 layout。自定义视图实际上是替换这些默认 layout 的过程。

默认的表单视图 layout

<view type="FORM">
  <element widget="actionBar" slot="actionBar" slotSupport="action">
    <xslot name="actions" slotSupport="action" />
  </element>
  <element widget="form" slot="form">
    <xslot name="fields" slotSupport="pack,field" />
  </element>
</view>

内嵌的的表单视图 layout

<view type="FORM">
  <element widget="form" slot="form">
    <xslot name="fields" slotSupport="pack,field" />
  </element>
</view>

默认的表格

<view type="TABLE">
  <pack widget="group">
    <view type="SEARCH">
      <element widget="search" slot="search" slotSupport="field" />
    </view>
  </pack>
  <pack widget="group" slot="tableGroup">
    <element widget="actionBar" slot="actionBar" slotSupport="action">
      <xslot name="actions" slotSupport="action" />
    </element>
    <element widget="table" slot="table" slotSupport="field">
      <element widget="expandColumn" slot="expandRow" />
      <xslot name="fields" slotSupport="field" />
      <element widget="rowActions" slot="rowActions" slotSupport="action" />
    </element>
  </pack>
</view>

内嵌的的表格

<view type="TABLE">
    <view type="SEARCH">
        <element widget="search" slot="search" slotSupport="field" />
    </view>
    <element widget="actionBar" slot="actionBar" slotSupport="action">
        <xslot name="actions" slotSupport="action" />
    </element>
    <element widget="table" slot="table">
        <element widget="expandColumn" slot="expandRow" />
        <xslot name="fields" slotSupport="field" />
        <element widget="rowActions" slot="rowActions" />
    </element>
</view>

左树右表

<view type="table">
  <pack title="" widget="group">
    <view type="search">
      <element slot="search" widget="search"/>
    </view>
  </pack>
  <pack title="" widget="group">
    <pack widget="row" wrap="false">
      <pack widget="col" width="257">
        <pack title="" widget="group">
          <pack widget="col">
            <element slot="tree" widget="tree"/>
          </pack>
        </pack>
      </pack>
      <pack mode="full" widget="col">
        <pack widget="row">
          <element justify="START" slot="actionBar" widget="actionBar"/>
          <element slot="table" widget="table">
            <element slot="expandRow" widget="expandColumn"/>
            <element slot="rowActions" widget="rowActions"/>
          </element>
        </pack>
      </pack>
    </pack>
  </pack>
</view>

默认详情视图

<view type="DETAIL">
    <element widget="actionBar" slot="actionBar" slotSupport="action">
        <xslot name="actions" slotSupport="action" />
    </element>
    <element widget="detail" slot="detail">
        <xslot name="fields" slotSupport="pack,field" />
    </element>
</view>

内嵌的详情视图

<view type="DETAIL">
    <element widget="detail" slot="detail">
        <xslot name="fields" slotSupport="pack,field" />
    </element>
</view>`

默认的画廊

<view type="GALLERY">
    <view type="SEARCH">
        <element widget="search" slot="search" slotSupport="field" />
    </view>
    <element widget="actionBar" slot="actionBar" slotSupport="action">
        <xslot name="actions" slotSupport="action" />
    </element>
    <element widget="gallery" slot="gallery">
        <element widget="card" slot="card" slotSupport="pack,field" />
    </element>
</view>

默认的树视图

<view type="TREE">
    <pack widget="group">
        <view type="SEARCH">
            <element widget="search" slot="search" slotSupport="field" />
        </view>
    </pack>
    <pack widget="group">
        <element widget="actionBar" slot="actionBar" slotSupport="action">
            <xslot name="actions" slotSupport="action" />
        </element>
        <element widget="card-cascader" slot="tree" slotSupport="nodes,node" />
    </pack>
</view>

上面的layout中,有些视图区分的内嵌,所谓的内嵌其实就是在一个视图中嵌入了另外一个视图,最常见的就是表单页面有个表格,那么这个表格就是内嵌的视图。

视图拆分介绍

如果您学过HTML,那么你应该知道,HTML中,我们可以用<div>来包裹内容,那么Oineone平台中的视图也是这样,只不过,Oineone平台中的视图,并不是一个<div>,而是一个<view>,我们可以一起来拆分下下面的代码。

// 最外层视图,是个表格类型的, 表格里面有两个字节点,
<view type="TABLE">
  // 第一个子节点里面有个搜索视图
  <pack widget="group">
    <view type="SEARCH">
      // 这里渲染的是搜索区域的视图
      <element widget="search" slot="search" slotSupport="field" />
    </view>
  </pack>

  // 第二个子节点里面有两个字节点
  <pack widget="group" slot="tableGroup">
    // 第一个子节点是个action,其实就是动作区域
    <element widget="actionBar" slot="actionBar" slotSupport="action">
      <xslot name="actions" slotSupport="action" />
    </element>

    // 第二个子节点是个table,渲染的是真实的table
    <element widget="table" slot="table" slotSupport="field">
      <element widget="expandColumn" slot="expandRow" />
      <xslot name="fields" slotSupport="field" />
      <element widget="rowActions" slot="rowActions" slotSupport="action" />
    </element>
  </pack>
</view>

如何替换默认视图

<view type="TABLE">
  // 保留搜索
  <pack widget="group">
    <view type="SEARCH">
      <element widget="search" slot="search" slotSupport="field" />
    </view>
  </pack>
  <pack widget="group" slot="tableGroup">
    // 保留动作
    <element widget="actionBar" slot="actionBar" slotSupport="action">
      <xslot name="actions" slotSupport="action" />
    </element>
    // 替换默认的表格
    <element widget="CustomTableWidget"></element>
  </pack>
</view>

然后将这个layout注册到平台中。

registerLayout(
  `<view type="TABLE">
    <pack widget="group">
      <view type="SEARCH">
        <element widget="search" slot="search" slotSupport="field" />
      </view>
    </pack>
    <pack widget="group" slot="tableGroup">
      <element widget="actionBar" slot="actionBar" slotSupport="action">
        <xslot name="actions" slotSupport="action" />
      </element>
      <element widget="CustomTableWidget"></element>
    </pack>
  </view>`,
  {
    model: '对应的模型',
    viewType: ViewType.Detail, // 视图类型
    actionName: '动作名称'
  }
);
// CustomTableWidget.ts

import { BaseElementWidget, SPI } from '@kunlun/dependencies';
import Component from './CustomTableWidget.vue';

@SPI.ClassFactory(BaseElementWidget.Token({ widget: 'CustomTableWidget' }))
export class CustomTableWidget extends BaseElementWidget {
  public initialize(props) {
    super.initialize(props);
    this.setComponent(Component);
    return this;
  }
}

这样一来我们就使用了自己的视图,是不是很简单呢。

注意项

如果您自定义的视图想用使用平台的功能,比如默认发去查询,那么只需要修改继承的类

BaseElementListViewWidget: 包含了默认的queryPage查询跟分页以及搜索的功能,用于list类型的视图

BaseElementObjectViewWidget: 包含了默认的queryOneconstruct方法,用于object类型的视图

总结

通过 Oineone 平台自定义视图,可以极大地增强应用的灵活性和个性化。遵循上述步骤,您可以轻松替换默认视图,实现定制化的用户界面。

Oinone社区 作者:汤乾华原创文章,如若转载,请注明出处:https://doc.oinone.top/frontend/6511.html

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

(0)
汤乾华的头像汤乾华数式员工
上一篇 2024年4月2日 pm6:59
下一篇 2024年4月6日 pm3:19

相关推荐

  • oio-switch 开关

    API 参数 说明 类型 默认值 版本 autofocus 组件自动获取焦点 boolean false checked(v-model: checked ) 指定当前是否选中 checkedValue | unCheckedValue false checkedChildren 选中时的内容 slot checkedValue 选中时的值 boolean | string | number true disabled 是否禁用 boolean false loading 加载中的开关 boolean false unCheckedChildren 非选中时的内容 slot unCheckedValue 非选中时的值 boolean | string | number false 事件 事件名称 说明 回调参数 change 变化时回调函数 Function(checked: boolean | string | number, event: Event)

    2023年12月18日
    59200
  • 【前端】工程结构最佳实践(v4)

    阅读之前 你应该: 了解node与npm相关内容 了解lerna包管理工具的相关内容 官方文档 了解git仓库的相关内容 了解rollup的相关内容 工程结构包示例 Vue项目结构包下载 工程结构详解 工程结构 ├── packages │   ├── kunlun-boot │   │   ├── package.json │   │   ├── public │   │   │   ├── favicon.ico │   │   │   └── index.html │   │   ├── src │   │   │   ├── main.ts │   │   │   └── shim-vue.d.ts │   │   ├── tsconfig.json │   │   └── vue.config.js │   ├── kunlun-module-demo │   │   ├── scripts │   │   │   ├── postpublish.js │   │   │   └── prepublish-only.js │   │   ├── src │   │   │   ├── index.ts │   │   │   └── shim-vue.d.ts │   │   ├── index.ts │   │   ├── package.json │   │   ├── rollup.config.js │   │   └── tsconfig.json │   └── kunlun-modules-demo │   ├── scripts │   │   ├── build.config.js │   │   ├── postpublish.js │   │   └── prepublish-only.js │   ├── packages │   │   ├── module-demo1 │   │   │   ├── index.ts │   │   │   ├── package.json │   │   │   ├── rollup.config.js │   │   │   └── src │   │   │   ├── index.ts │   │   │   └── shim-vue.d.ts │   │   ├── module-demo2 │   │   │   ├── index.ts │   │   │   ├── package.json │   │   │   ├── rollup.config.js │   │   │  …

    前端 2023年11月1日
    92800
  • 如何自定义表格单元格样式

    介绍 OinOne的表格是基于Vxe-Table实现的,我们将Vxe-table内置的关于单元格样式的方法、属性开放到了表格组件TableWidget上 Vxe-Table相关文档 vxe-table的单元格样式 vxe-table的单元格动态样式 单元格样式 行的样式、单元格样式,表头的样式、表尾的样式、全部都可以完全自定义,通过设置 cellClassName、headerCellClassName、rowClassName …等参数 (注:当自定义样式之后可能会覆盖表格的样式,比如选中行..等,记得自行处理好相关样式) 单元格动态样式 行的动态样式、单元格动态样式,表头的动态样式、表尾的动态样式、可以通过设置 cellStyle、headerCellStyle、rowStyle …等参数 (注:当自定义样式之后可能会覆盖表格的样式,比如选中行..等,记得自行处理好相关样式) 示例代码 这里仅演示cellClassName和cellStyle,其他方法的出入参数请参考上面的Vxe-Table文档 import { BaseElementWidget, SPI, TableWidget, ViewType, Widget } from '@kunlun/dependencies'; @SPI.ClassFactory(BaseElementWidget.Token({ viewType: ViewType.Table, widget: 'CustomStyleTableWidget', })) export class CustomStyleTableWidget extends TableWidget { @Widget.Method() protected cellClassName({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) { if (column.field === 'field00019') { return `demo-cell-${column.field}`; } return ''; } @Widget.Method() protected cellStyle({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) { if (column.field === 'field00019') { return { backgroundColor: '#f60', color: '#ffffff' }; } return ''; } } 效果预览

    2024年10月30日
    89300
  • 上下文在字段和动作中的应用

    上下文在字段和动作中的应用 在业务场景中,常常需要在打开弹窗或跳转到新页面时携带当前页面数据。此时,我们需要配置相关「动作」中的上下文信息。 在 oinone 平台中,上下文主要分为以下三种: activeRecord:当前视图数据 rootRecord:主视图数据 openerRecord:触发弹窗的对象 参考文档:oinone内的主视图数据和当前视图数据使用介绍 activeRecord 表示当前视图的数据。例如,若动作配置在表单上,则指代当前表单的数据;若配置在 o2m、m2m 字段表格上,则指代选中的行数据。 rootRecord 表示根视图的数据。若当前视图是表单页,则代表表单的数据;若为表格页,则代表表格的数据。 openerRecord 表示触发弹窗的对象。例如,在弹窗内的字段或动作中,可通过 openerRecord 获取触发弹窗的信息。 这三者均为对象 (Object) 类型。 界面设计器配置 在 o2m、m2m 表格字段弹窗中携带当前视图数据 假设我们设计了一个包含 o2m、m2m 表格字段的表单页面。打开相关弹窗时,需将表单中的 code 数据传递至弹窗中。 选择相应的「动作」,如创建或添加。在右侧属性面板底部找到「上下文」,添加格式为对象 {} 的上下文信息。 以键值对的格式添加上下文信息:{code: rootRecord.code}。 设计弹窗时,将 code 字段拖入弹窗中。 完成设计后保存并发布。 大家可以看到,上下文中的key是 code,但是value是rootRecord.code,这里取的是rootRecord而不是activeRecord,因为我们上面讲过如果当前动作配置在o2m、m2m的字段表格上面,那么activeRecord就是表格选中的行,我们现在要取的是表单上的code字段,所以需要用rootRecord。 注意点:key需要是提交模型【前端视图】存在的字段才能传递。

    2023年11月8日
    1.6K10
  • 如何自定义点击导出动作绑定指定模板

    介绍 平台默认的导出会打开弹窗,然后在弹窗内的视图选择是用模板方式导出还是选字段导出,但是有时候有部分场景希望点击导出动作后直接进入导出流程,导出指定的某个模板,我们可以通过覆写打开弹窗的动作来实现该功能。 本文档参考了 表格页自定义按钮如何获取搜索区域的查询条件 代码示例 以下代码大部分场景只需要修改其中excelTplName更换模板即可,另外如何想增加复用性,还可以将该属性改为从元数据的配置中获取。 import { ActionType, BaseActionWidget, BaseElementListViewWidget, BooleanHelper, ClickResult, Condition, ExcelExportTask, FILE_MODULE_NAME, getSessionPath, GraphqlHelper, http, IQueryPageResult, ISort, queryDslWidget, ReturnPromise, RuntimeServerAction, ServerActionWidget, SPI, SubmitValue, SYSTEM_MODULE_NAME, translateValueByKey, UrlHelper, ViewActionTarget, Widget } from '@kunlun/dependencies'; import { OioNotification } from '@kunlun/vue-ui-antd'; @SPI.ClassFactory( BaseActionWidget.Token({ actionType: [ActionType.View], target: [ViewActionTarget.Dialog], model: 'ys0328.k2.Model0000000453', name: 'internalGotoListExportDialog' }) ) export class DemoExportActionWidget extends ServerActionWidget { /** * excel导出模板名称 * @protected */ protected excelTplName = '演示抽屉跳转链接导出'; /** * 导出任务的模型编码 * @protected */ protected exportTaskModel = 'excelExportTask'; /** * 导出任务的方法 * @protected */ protected exportTaskFun = 'createExportTask'; /** * * 是否是同步导出 */ @Widget.Reactive() protected get syncExport() { return BooleanHelper.isTrue(this.getDsl().sync) || !true; } protected async executeAction(action: RuntimeServerAction, parameters: SubmitValue): Promise<ClickResult> { const workbookId = await this.getWorkbookId(); if (!workbookId) { return false; } let task = { workbookDefinition: { id: workbookId } } as ExcelExportTask; // 从平台内置的方法获取搜索区域的条件 const { condition } = this.getSearchRsqlAndQueryParams(); // 排序规则 let sortList = [] as ISort[]; const baseViewWidget = Widget.select(this.rootHandle); const listViewWidget = queryDslWidget(baseViewWidget?.getChildrenInstance(), BaseElementListViewWidget); if (listViewWidget) { sortList = listViewWidget.sortList; } return this.export(task, condition, sortList); } protected getUploadBodyGql(id: string, condition: string | Condition, sortList:…

    2024年10月9日
    97400

Leave a Reply

登录后才能评论