在 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低代码应用平台体验