动作是什么
动作（action)描述了终端用户的各种操作。这些操作可以涉及多个层面，包括但不限于：
-
页面间的跳转：用户可以通过动作从一个页面跳转到另一个页面。
-
业务交互：动作可以触发与后端服务的交互，例如提交表单、请求数据等。
-
界面操作：动作可以用于打开模态对话框、抽屉（侧边栏）等界面元素。
作用场景
Oinone 平台内置了一系列的基础动作，默认实现了常见的功能，如页面跳转、业务交互和界面操作等。这些内置动作旨在满足大多数标准应用场景的需求，简化开发过程，提高开发效率。以下是一些常见的内置动作示例：
-
页面跳转：允许用户在不同页面间导航。
-
业务交互：支持与后端服务的数据交互，如提交表单。
-
界面操作：提供动态返回上一页、校验表单、关闭弹窗等。
自定义动作的需求场景
尽管内置动作覆盖了许多常规需求，但在某些复杂或特定的业务场景中，可能需要更加个性化的处理。这些场景可能包括：
- 特殊的业务逻辑：需要执行不同于标准流程的特定业务操作。
- 个性化的用户界面：标准的 UI 组件无法满足特定的设计要求。
- 高级交互功能：需要实现复杂的用户交互和数据处理。
扩展和定制动作
为了满足这些特定需求，Oinone 平台支持通过继承和扩展来自定义动作。开发者可以通过以下步骤实现自定义动作：
-
继承基类：从平台提供的动作基类继承，这为自定义动作提供了基础框架和必要的接口。
-
实现业务逻辑：在继承的基础上，添加特定的业务逻辑实现。
-
自定义界面：根据需要调整或完全重写界面组件，以符合特定的UI设计。
-
集成测试：确保自定义动作在各种情况下的稳定性和性能。
最佳实践
- 明确需求：在进行扩展之前，清楚地定义业务需求和目标。
- 重用现有功能：尽可能利用平台的内置功能和组件。
- 保持一致性：确保自定义动作与平台的整体风格和标准保持一致。
- 充分测试：进行全面的测试，确保新动作的稳定性和可靠性。
案例分析
假设有一个场景，需要一个特殊的数据提交流程，该流程不仅包括标准的表单提交，还涉及复杂的数据验证和后续处理。在这种情况下，可以创建一个自定义动作，继承基础动作类并实现特定的业务逻辑和用户界面。
自定义动作
自定义跳转动作
示例工程目录
以下是需关注的工程目录示例，main.ts更新导入./action，action/index.ts更新导出./custom-viewactioin：
步骤 1: 创建自定义动作类
首先，您创建了一个名为 CustomViewAction 的类，这个类继承自 RouterViewActionWidget。这意味着自定义动作是基于路由视图动作的，这通常涉及页面跳转或导航。
import {ActionWidget, RouterViewActionWidget, SPI} from '@kunlun/dependencies';
import CustomViewActionVue from './CustomViewAction.vue';
@SPI.ClassFactory(
ActionWidget.Token({
model: 'resource.ResourceCity',
name: 'redirectCreatePage'
})
)
export class CustomViewAction extends RouterViewActionWidget {
public initialize(props) {
super.initialize(props);
this.setComponent(CustomViewActionVue);
return this;
}
}- @SPI.ClassFactory: 这是一个装饰器，用于向平台注册这个新的动作。
- ActionWidget.Token: 通过这个Token，指定了这个动作与特定模型 (resource.ResourceCity) 关联，并给这个动作命名 (redirectCreatePage).
步骤 2: 初始化和设置组件
在 initialize 方法中，调用了父类的初始化方法，并设置了自定义的 Vue 组件。
public initialize(props) {
super.initialize(props);
this.setComponent(CustomViewActionVue);
return this;
}步骤 3: 定义 Vue 组件
在 CustomViewAction.vue 文件中，定义了自定义动作的视觉表示。
<template>
<div class="view-action-wrapper">
自定义挑战跳转动作
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
inheritAttrs: false,
name: 'ViewActionComponent'
})
</script>
<style lang="scss">
.view-action-wrapper {
}
</style>步骤 4: 效果如下
图3-5-7-24 自定义跳转动作效果示例
自定义服务器动作
示例工程目录
以下是需关注的工程目录示例，action/index.ts更新导出./custom-serveraction：
图3-5-7-24 自定义服务器动作工程目录示例
步骤 1: 创建自定义动作类
首先, 创建了一个名为 CustomServerAction 的类，这个类继承自 ServerActionWidget。这表明您的自定义动作主要关注服务器端的逻辑。
import {ActionWidget, ServerActionWidget, SPI, Widget} from '@kunlun/dependencies';
import CustomServerActionVue from './CustomServerAction.vue';
@SPI.ClassFactory(
ActionWidget.Token({
model: 'resource.ResourceCity',
name: 'delete'
})
)
export class CustomServerAction extends ServerActionWidget {
public initialize(props) {
super.initialize(props);
this.setComponent(CustomServerActionVue);
return this;
}
@Widget.Method()
public clickAction() {
// 这里断点试试看
return super.clickAction()
}
}-
@SPI.ClassFactory: 这个装饰器用于向平台注册新的动作。
-
ActionWidget.Token: 这里指定了动作与 resource.ResourceCity 模型相关联，动作名为 delete。
步骤 2: 初始化和设置组件
在 initialize 方法中，调用了父类的初始化方法，并将 Vue 组件与动作关联。
public initialize(props) {
super.initialize(props);
this.setComponent(CustomServerActionVue);
return this;
}步骤 3: 定义动作行为
重写了 clickAction 方法，这是触发服务器动作的主要入口点。在这个方法中，您可以添加自定义逻辑，然后调用 super.clickAction() 来执行默认的服务器动作。
@Widget.Method()
public clickAction() {
// 这里可以添加自定义逻辑
return super.clickAction();
}步骤 4: Vue 组件
<template>
<div class="server-action-wrapper" @click="clickAction">
自定义服务器动作
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
inheritAttrs: false,
name: 'ServerActionComponent',
props: ['clickAction']
})
</script>
<style lang="scss">
.server-action-wrapper {
}
</style>Vue 组件定义了如何在前端显示和触发这个动作。
<style lang="scss">
.server-action-wrapper {
// 样式定义
}
</style>- 这个模板中的 @click="clickAction" 是触发动作的关键部分。
步骤 5: 样式和行为
同样，为该组件定义了样式，并通过 defineComponent 创建了 Vue 组件。
<style lang="scss">
.server-action-wrapper {
// 样式定义
}
</style>效果
Oinone社区 作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9268.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
