页面是什么
在Oinone前端体系中，页面是一个核心概念，它代表着终端用户所看到的当前视图。这个视图可以有多种形式，主要取决于页面是如何定义和构建的。在深入理解页面之前，我们需要了解两个关键的功能：自定义布局 和 自定义母版。
作用场景
自定义布局 提供了布局调整的强大功能，但在某些情况下，它可能无法完全满足特定的需求。这时，自定义页面就显得尤为重要。自定义页面是对 自定义布局 的补充，允许开发者从更深层次自由地控制和设计用户界面。
当标准布局无法实现所需的视觉效果或功能时，自定义页面提供了更高的灵活性。开发者可以通过自定义页面来实现独特的布局设计，添加特定的交互元素，或者整合复杂的业务逻辑，以创造独特且丰富的用户体验。
自定义页面
自定义视图组件允许开发者定义和使用特定于业务需求的视图布局。下面是一个具体的示例，展示了如何定义、注册和使用通过 setComponent 结合 TypeScript 和 Vue 的自定义视图组件。
示例工程目录
以下是需关注的工程目录示例，main.ts更新导入./view：
1. 定义 TypeScript 组件
首先，我们定义了一个名为 CustomViewWidget 的 TypeScript 组件，并在该组件中通过 setComponent 结合 Vue 单文件组件。
import { BaseElementWidget, BaseElementViewWidget, SPI, ViewWidget } from '@kunlun/dependencies';
import CustomViewVue from './CustomView.vue';
@SPI.ClassFactory(BaseElementWidget.Token({ widget: 'CustomViewWidget' }))
export class CustomViewWidget extends BaseElementViewWidget {
public initialize(props) {
super.initialize(props);
this.setComponent(CustomViewVue);
return this;
}
}2. Vue 单文件组件
其次，我们创建了对应的 Vue 单文件组件 CustomView.vue，用于展示自定义视图的具体内容。
<template>
<div class="custom-view-wrapper">
<h1>自定义视图</h1>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
inheritAttrs: false,
name: 'ViewComponentVue'
});
</script>
<style lang="scss">
.custom-view-wrapper {}
</style>3. 注册自定义视图布局
接下来，我们使用 registerLayout 函数注册了一个表格视图布局，并在其中引入了通过 setComponent 结合的自定义视图组件。
import { registerLayout, ViewType } from "@kunlun/dependencies";
export const registerCustomView = () => {
registerLayout(
`
<view type="TABLE">
<element widget="CustomViewWidget" />
</view>
`,
{
viewType: ViewType.Table,
moduleName: 'resource',
model: 'resource.ResourceCountryGroup'
}
);
};
registerCustomView();效果
4. 自定义视图在表格中的应用
当我们注册了自定义视图后，它就可以在表格视图中被使用。在表格视图的布局中，我们通过
5. 入参一致性
值得强调的是，registerLayout 函数和自定义布局的规则是一致的，这意味着开发者可以在自定义布局中使用与 registerLayout 相同的入参规则，从而实现更加灵活和统一的视图布局设计
与内置组件结合
1. 注册视图元素布局
首先，我们使用 registerLayout 函数注册了一个表格视图的布局。这个布局包含了搜索框、操作栏、以及一个自定义视图组件。
import { registerLayout, ViewType } from "@kunlun/dependencies";
import { CustomViewWidget } from "./CustomViewWidget";
export const registerViewElement = () => {
registerLayout(
`
<view type="TABLE">
<!-- 搜索和操作区域 -->
<pack widget="group">
<view type="SEARCH">
<element widget="search" slot="search" slotSupport="field" />
</view>
</pack>
<!-- 操作栏 -->
<element widget="actionBar" slot="actionBar" slotSupport="action">
<xslot name="actions" slotSupport="action" />
</element>
<!-- 自定义视图组件 -->
<element widget="CustomViewWidget" />
</view>
`,
{
viewType: ViewType.Table,
moduleName: 'resource',
model: 'resource.ResourceCountry'
}
);
};
registerViewElement();效果
2. 视图布局结构说明
在这个布局中，我们使用了不同的标签来组织视图元素：
-
标签用于组合多个元素为一个组。 -
标签表示一个视图类型，这里包含了搜索框和操作栏。 -
标签用于定义具体的元素，如搜索框和操作栏。 -
标签引入了自定义视图组件 CustomViewWidget。
3. 视图元素的属性说明
通过传递相应的属性，我们定义了这个布局所属的视图类型（ViewType.Table）以及相关的模块和模型信息。
4. 自定义组件的使用
最后，我们展示了如何在表格视图布局中结合内置组件和自定义组件。这种设计灵活性高，可以根据具体业务需求定制各种复杂的视图。
使用元数据
1. 元数据的概念
元数据是描述数据的数据，它包含了关于数据的信息，如字段类型、验证规则、默认值等。在自定义页面中，元数据用于定义页面所需的数据结构、请求参数以及权限控制规则。
2. 元数据的收集
通过元数据的收集，我们可以获得当前页面所需的数据结构和相关请求参数的定义。这种方式避免了手动组装请求参数的繁琐过程，提高了开发效率。
3. 请求发起的效率提升
拥有了元数据，当前页面所在模型的所有请求可以直接使用收集到的元数据信息，无需手动组装请求参数。这不仅提升了请求发起的效率，还降低了出错的可能性。
4. 元数据在权限控制中的作用
元数据不仅用于请求发起，还在权限控制中发挥关键作用。通过元数据的信息，可以判断当前用户是否有权限查看、编辑或执行特定操作。这样避免了权限控制不生效的问题，确保系统的安全性和一致性。
5. 元数据元素的展示判断
在自定义页面中，如果使用了元数据元素作为页面的一部分，最好从收集中的元数据判断是否需要展示。这种方式确保了页面元素的显示与权限控制的一致性，有效地防止了未授权操作。
6. 最佳实践
-
在自定义页面开发前，充分了解相关模型的元数据。
-
利用元数据自动生成请求参数，提高开发效率。
-
在页面渲染前，基于元数据进行权限判断，避免未授权操作。
7. 如何收集
使用 registerLayout 函数注册了一个自定义表格页面布局。在这个布局中，使用了
export const registerResolveModelView = () => {
registerLayout(
`
<view type="TABLE">
<element widget="CustomViewWidget" >
<xslot name="actions" slotSupport="action" />
<xslot name="fields" slotSupport="field" />
</element>
</view>
`,
{
viewType: ViewType.Table,
moduleName: 'resource',
model: 'resource.ResourceCountry'
}
);
};
registerResolveModelView()8. 效果
没有xslot:
加入xslot:
Oinone社区 作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9267.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
