在 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: 包含了默认的queryOne跟construct方法，用于object类型的视图
总结
通过 Oineone 平台自定义视图，可以极大地增强应用的灵活性和个性化。遵循上述步骤，您可以轻松替换默认视图，实现定制化的用户界面。
Oinone社区 作者：汤乾华原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/6511.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
