需要修改xml的配置
将xml中的fields改成table，并将配置加上
// 原来的写法
<template slot="fields" >
...
</template>
// 配置后的写法
<template slot="table" checkbox="false">
...
</template>
Oinone社区 作者：oinone原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/11.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
全局展示通知提醒信息。 何时使用 在系统四个角显示通知提醒信息。经常用于以下情况： 较为复杂的通知内容。 带有交互的通知，给出用户下一步的行动点。 系统主动推送。 API OioNotification.success(title,message, config) OioNotification.error(title,message, config) OioNotification.info(title,message, config) OioNotification.warning(title,message, config) config 参数如下： 参数 说明 类型 默认值 版本 duration 默认 3 秒后自动关闭 number 3 class 自定义 CSS class string –
在日常项目中，常常会遇到多视图（Multi-View）标签的场景，用户在切换不同视图时，可能需要刷新当前活动标签内的视图数据或状态。本文将详细解析下面这段代码，并说明如何利用它在视图切换时刷新对应的视图。 下列代码写在ss-boot里面的main.ts import { VueOioProvider } from '@kunlun/dependencies'; import { delay } from 'lodash-es'; VueOioProvider( { … 自己的配置 }, [ () => { setTimeout(() => { subscribeRoute( (route) => { const page = route.segmentParams.page || {}; // 如果不是表格类型，则不刷新(根据自己的需求判断) if (page.viewType !== ViewType.Table) { return; } const { model, action } = page; const multiTabsManager = MultiTabsManager.INSTANCE; delay(() => { const tab = multiTabsManager.getActiveTab(); if (tab?.key && tab.stack.some((s) => s.parameters?.model === model && s.parameters?.action === action)) { multiTabsManager.refresh(tab.key); } }, 200); }, { distinct: true } ); }, 1000); } ] ); 1. VueOioProvider 及其作用 首先，代码通过 VueOioProvider 初始化应用程序或组件，并传入两部分参数： 配置对象：可以根据实际业务需求进行自定义配置； 回调函数数组：这里传入了一个匿名函数，用于在应用初始化后执行额外的逻辑 2. 延时执行与路由监听 在回调函数中，使用了 setTimeout 延时 1000 毫秒执行，目的通常是为了确保其他组件或全局状态已经初始化完毕，再开始进行路由监听。 随后，代码调用 subscribeRoute 来监听路由的变化。subscribeRoute 接收两个参数： 回调函数：每次路由变化时都会触发该函数，并将最新的 route 对象传递给它； 配置对象：此处使用 { distinct: true } 来避免重复的触发，提高性能。 3. 判断视图类型 在路由回调函数内部，首先通过 route.segmentParams.page 获取当前页面的配置信息。通过判断 page.viewType 是否等于 ViewType.Table，代码可以确定当前视图是否为“表格类型”： 如果不是表格类型：则直接返回，不做刷新操作； 如果是表格类型：则继续执行后续刷新逻辑。 这种判断机制保证了只有特定类型的视图（例如表格）在切换时才会触发刷新，避免了不必要的操作 4. 多视图标签的刷新逻辑 当确认当前视图为表格类型后，从 MultiTabsManager 中获取当前活动标签： MultiTabsManager.INSTANCE.getActiveTab() 返回当前活动的标签对象； 如果 key 存在，并且激活的标签内部存储的action跟url一致， 就调用 multiTabsManager.refresh(key) 方法来刷新当前标签内的视图。
如果之前没了解过GraphQL，可以先查看GraphQL的文档 为什么oinone要选用GraphQL? 我们先看一下oinone独特的元数据设计 介绍信息来源于Oinone 7天从入门到精通，如提示无权限，则需要申请 再看一下GraphQl的介绍 我们可以看出，GraphQL提供的特性可以满足我们对元数据的描述需求，因此我们选用GraphQL。 相关工具推荐 可视化gql请求工具： 官方下载地址 oinone工具包-win版 oinone工具包-mac版 模拟登录请求 点击“Refresh Schema”按钮手动同步后端的gql文档数据 点击“show Documentation”按钮查看gql文档，可以在搜索框内输入关键字查询相关文档
在开发过程中，为了满足业务场景、增加灵活性，前端自定义请求不可避免。下面将会从——自定义 mask、自定义表格(表单等)、自定义字段三个实际场景的角度，介绍自定义请求。这篇文章把请求都写在了 ts 中，这样便于继承重写，如果不习惯 ts 的写法，把请求写在 vue 里也是可以的。 1. 自定义 mask mask 组件通常会有一个特点：在不同页面不同模型或不同应用下都展示，与业务模型无关，且往往只需要请求一次。同时可能有精确控制请求体大小的需求，这就很适合采取手写 GraphQL 的方式。 例如，我要重写顶部 mask 中的用户组件，展示用户信息。这个请求就只需请求一次，而且不需要复用，就很适合手写 GraphQL。 这里继承平台的用户组件，然后在代码中写死 GraphQL 发起请求。但是 GraphQL 语句怎么拼呢？我们可以去默认页面，打开浏览器控制台，找到相应的请求，把 GraphQL 语句复制出来，这里复制下默认的用户请求。 http.query 参数的构造、相应结果的获取都能从请求中得到。可以看到我这里精简了请求，只取了用户名。 TS import { SPI, UserWidget, MaskWidget, Widget, http } from '@kunlun/dependencies'; import Test from './Test.vue'; @SPI.ClassFactory(MaskWidget.Token({ widget: 'user' })) export class TestWidget extends UserWidget { public initialize(props) { super.initialize(props); this.setComponent(Test); return this; } // 添加响应式注解，这样能在 vue 中接受到 ts 中的变量 @Widget.Reactive() public testUserInfo: { pamirsUser: { name: string } } | undefined; public async queryUser() { const query = ` { topBarUserBlockQuery { construct(data: {}) { pamirsUser { name } } } } `; const result = await http.query('user', query); this.testUserInfo = result.data['topBarUserBlockQuery']['construct'] as { pamirsUser: { name: string } }; } public mounted() { this.queryUser(); } } VUE <template> <div class="Test"> {{ testUserInfo }} </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'Test', props: ['testUserInfo'] }); </script> 效果如下： 2. 自定义表格(表单)等视图元素组件 2-1. 自定义表格 2-1-1. 自定义表格自动获取数据 Oinone 提供了前端组件的默认实现。所以生成默认页面的时候，请求数据都是通的，可以看到表格、表单、表单里的字段等组件数据都是能回填的。所以这里继承平台的表格组件，就有了平台表格自动获取数据的能力。 TS import { BaseElementWidget, SPI, TABLE_WIDGET, TableWidget, ViewType } from '@kunlun/dependencies'; import Test from './Test.vue'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Table, widget:…
场景 在界面设计器，可以配置当前列表页从上个页面带的上下文参数，现在需要传递这个上下文到下个页面，设计器没有配置入口，我们可以通过自定义改动作来解决 示例代码 import { ActionType, ActionWidget, RouterViewActionWidget, SPI, ViewActionTarget } from '@kunlun/dependencies'; @SPI.ClassFactory( ActionWidget.Token({ actionType: [ActionType.View], target: [ViewActionTarget.Router], // 模型编码 model: 'module.model', // 动作名称 name: 'actionName' }) ) export class DemoRouterViewActionWidget extends RouterViewActionWidget { protected async clickAction(): Promise<void> { // initialContext内是上个页面传来的上下文，手动将值传递到下个页面的上下文 // 这里假设需要传递的字段名为type this.action.context = { type: this.initialContext.type }; return super.clickAction(); } }
