需要修改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低代码应用平台体验
介绍 客户在使用oinone平台的时候，有一些个性化的前端展示或交互需求，oinone作为开发平台，不可能提前预置好一个跟客户需求一模一样的组件，这个时候我们提供了一个“低无一体”模块，可以反向生成API代码，生成对应的扩展工程和API依赖包，再由专业前端研发人员基于扩展工程（kunlun-sdk），利用API包进行开发并上传至平台，这样就可以在界面设计器的组件里切换为我们通过低无一体自定义的新组件。 低无一体的具体体现 “低”— 指低代码，在sdk扩展工程内编写的组件代码 “无”— 指无代码，在页面设计器的组件功能处新建的组件定义 低无一体的组件跟直接在自有工程内写组件的区别？ 低无一体的组件复用性更高，可以在本工程其他页面和其他业务工程中再次使用。 组件、元件介绍 元件 — 指定视图类型(viewType) + 指定业务类型(ttype)字段的个性化交互展示。组件 — 同一类个性化交互展示的元件的集合。组件是一个大一点的概念，比如常用的 Input 组件，他的元件在表单视图有字符串输入元件、密码输入元件，在详情和表格展示的时候就是只读的，页面最终使用的其实是元件。通过组件+ttype+视图类型+是否多值+组件名可以找到符合条件的元件，组件下有多个元件会根据最优匹配规则找到最合适的具体元件。 如何使用低无一体 界面设计器组件管理页面添加组件 进入组件的元件管理页面 点击“添加元件” 设计元件的属性 这里以是否“显示清除按钮”作为自定义属性从左侧拖入到中间设计区域，然后发布 点击“返回组件” 鼠标悬浮到卡片的更多按钮的图标，弹出下拉弹出“低无一体”的按钮 在弹窗内点击“生成SDK”的按钮 生成完成后，点击“下载模板工程” 解压模板工程kunlun-sdk.zip 解压后先查看README.MD，了解一下工程运行要点，可以先运行 npm i 安装依赖 再看kunlun-plugin目录下已经有生成好的组件对应的ts和vue文件 下面在vue文件内增加自定义代码，可以运行 npm run dev 在开发模式下调试看效果 <template> <div class="my-form-string-input"> <oio-input :value="realValue" @update:value="change" > <template #prepend>MyPrepend</template> </oio-input> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import { OioInput } from '@kunlun/vue-ui-antd'; export default defineComponent({ name: 'customField1', components: { OioInput }, props: { value: { type: String }, change: { type: Function }, }, setup(props) { const realValue = ref<string | null | undefined>(props.value); return { realValue }; } }); </script> <style lang="scss"> .my-form-string-input { border: 1px solid red; } </style> 确定改好代码后运行 npm run build，生成上传所需的js和css文件 可以看到 kunlun-plugin目录下多出了dist目录，我们需要的是 kunlun-plugin.umd.js 和 kunlun-plugin.css 这2个文件 再次回到组件的“低无一体”管理弹窗页面，上传上面生成的js和css文件，并点击“确定”保存，到这里我们的组件就新增完成了。 下面我们再到页面设计器的页面中使用上面设计的组件（这里的表单页面是提前准备好的，这里就不介绍如何新建表单页面了） 将左侧组件库拉直最底部，可以看到刚刚新建的组件，将其拖至中间设计区域，我们可以看到自定义组件的展示结果跟刚刚的代码是对应上的（ps: 如果样式未生效，请刷新页面查看，因为刚刚上传的js和css文件在页面初始加载的时候才会导入进来，刚刚上传的动作未导入新上传的代码文件），再次点击设计区域中的自定义组件，可以看到右侧属性设置面板也出现了元件设计时拖入的属性。 最后再去运行时的页面查看效果，与代码逻辑一致！ 注意事项 为什么我上传了组件后页面未生效？ 检查前端启动工程的低无一体是否配置正确
oinone 平台内置了一些函数, 如果当前函数不满足，那么可以通过扩展的方式添加函数 后端实现 后端实现 import {Expression} from '@kunlun/dependencies' Expression.getInstance().registerFunction(); registerFunction函数的参数如下 /** @param {string} name 函数名字 @param {unknown[]} argTypes 参数类型 @param {Function} handle 回调函数 */ 函数名需要跟后端的保持一致import {Expression} from '@kunlun/dependencies';Expression.getInstance().registerFunction('FUNCTION_NAME', ['number|string'], (input: number | string) => { // todo});第二个参数要注意下，该参数跟回调函数里面的参数要保持一致 Expression.getInstance().registerFunction('FUNCTION_NAME', ['number'], (input: number ) => { // todo } ); Expression.getInstance().registerFunction('FUNCTION_NAME', ['string'], (input: string ) => { // todo } ); Expression.getInstance().registerFunction('FUNCTION_NAME', ['array'], (input: any[] ) => { // todo } );
场景 oinone的前端页面默认自带了消息通知功能，在顶部状态栏可以看到消息的查看入口，默认每隔5秒查询一次最新的消息，我们可以通过自定义消息组件增加该间隔或者是关闭轮询 示例代码 修改轮询间隔 import { MaskWidget, NotificationWidget, SPI } from '@kunlun/dependencies'; @SPI.ClassFactory(MaskWidget.Token({ widget: 'notification' })) export class DemoNotificationWidget extends NotificationWidget { /** * 轮询间隔时间，单位: 秒 * @protected */ protected msgDelay = 30000; } 关闭轮询 import { MaskWidget, NotificationWidget, SPI } from '@kunlun/dependencies'; @SPI.ClassFactory(MaskWidget.Token({ widget: 'notification' })) export class DemoNotificationWidget extends NotificationWidget { protected mounted() { super.mounted(); // 清除轮询的定时器 this.msgTimer && clearInterval(this.msgTimer); // 挂载后手动查询一次消息 this.getMsgTotal(); } }
渲染前的准备 渲染前的准备，在 Vue 渲染框架下，会先安装所有所支持的默认组件，比如 Mask，Header 等，这些组件支持 XML 默认模版的 Vue 框架下的渲染，详情可见 main.ts 中，maskInstall 与 install，这两个函数将平台内部支持的组件进行了注册，随后将整个 Vue 挂载为运行时 App，随后进行初始化。 渲染的起步 OioProvider 方法是整个应用的入口，我们忽略掉一些配置方法，将注意力集中到 initializeServices 从名称中我们可以看出来内部保存的都是初始化服务，其中提供了渲染服务等，我们当前使用的是 Vue 框架，所以当前其渲染的 Root 节点为 Vue， 以此，我们视野可以暂时转移到 admin-base中的 Root.vue以及 RootWidget上， 其实现了整个 Vue 框架下的 Root 节点如何渲染，其中定义了多个 widget，比如登陆页，首页，忘记密码已经重置密码等页面， 在本文中我们着重关注渲染首页的能力，RootWidget将 DefaultMetadataMainViewWidget作为渲染 Props中的 page即首页提供给下层组件使用， 渐入佳境 DefaultMetadataMainViewWidget从名称中可以看到，其为元数据主视图，主要做两件事，1:提供 Mask 的渲染2:提供元数据上下文初始化 该组件主要通过观察路由变化触发上面两个动作，当路由发生变化，该组件 reloadPage将被调用，reloadPage方法通过组装路由参数构成一个唯一 key 向后段查询当前路由所对应的渲染信息， 随后将获取到的信息进行处理，初始化，即 元数据上下文初始化，在初始化后，会将获取到的数据注入到 MetadataViewWidget中， Mask 的渲染 关于 Mask 的渲染，在获取到数据后，将生成 maskTemplate，并将其赋值， DefaultMetadataMainView.vue文件将渲染该模板，并渲染到页面中 数据的变更 当上面两件任务完成后，将开始主视图的渲染，上文提到，DefaultMetadataMainViewWidget只负责 mask 的渲染和上下文的初始化，所以 DefaultMetadataMainViewWidget通过触发事件的方式来实现主视图的渲染， DefaultMetadataMainViewWidget将必要信息作为事件参数触发，MultiTabsContainerWidget接收到 reloadMainViewCallChaining事件后，开启主视图渲染， MultiTabsContainerWidget会刷新运行时上下文，即 refreshRuntimeContext，该方法将尝试查询并通过 createOrUpdateEnterTab方法创建 Tab 页，createOrUpdateEnterTab最终生成一个 MultiTabItem格式的对象，该对象描述了 Tab 的相关信息，随后调用 createTabContainerWidget创建 tab 的容器即新建了一个 MultiTabContainerWidget组件即单个 tab 的容器，随后调用 setActiveTabItem， 并获取其绑定的 Vue 组件，并将其组件放置在 KeepAlive内部，触发更新, 主视图的渲染 MultiTabContainerWidget继承自MetadataViewWidget，当 MetadataViewWidget数据发生变更， 其绑定的 Vue 组件将解析 viewTemplate, 获取到与该模板 dslNodeType想匹配的 Vue 组件，当前例子中为 View.vue，随后 View.vue开始渲染，View.vue文件只是一个纯粹的容器，当 View.vue被挂载时，其内部的 template属性包含了整个页面的描述信息，View.vue需要做的就是将这个 template翻译并渲染成 DOM 展现在浏览器上， 渲染整个页面 当 View.vue被挂载时，其内部的 template属性包含了整个页面的描述信息，View.vue主要做了两个事情，一：将 template 中的 widget转换为组件，二：根据当前的 template信息生成 slot信息， const currentSlots = computed<Slots | undefined>( () => DslRender.fetchVNodeSlots(props.dslDefinition) || (Object.keys(context.slots).length ? context.slots : undefined) ); const renderWidget = createCustomWidget(InternalWidget.View, { …context.attrs, type: props.type || viewType.value, template: props.dslDefinition, metadataHandle: props.metadataHandle || metadataHandle.value, rootHandle: props.rootHandle || rootHandle.value, parentHandle: props.parentHandle || parentHandle.value, slotName: props.slotName, inline: inlineProp } as ViewWidgetProps); 生成这两部分信息后，View.vue会将这两部分挂载到页面上，这两部分从代码中可以看出，主要靠 fetchVNodeSlots,createCustomWidget两个函数， export function createCustomWidget( widget: string, props: CustomWidgetProps ): RenderWidget | undefined public static fetchVNodeSlots(dsl: DslDefinition | undefined, supportedSlotNames?: string[]):…
FormFieldWidget 表单字段的基类，包含了表单字段通用的属性跟方法 示例 class MyFieldClass extends FormFieldWidget{ } 字段属性 属性名 说明 类型 可选值 默认值 value 当前字段的值 any – null formData 当前表单视图的数据 Object – {} rootData 跟视图的数据，如果当前只有一个视图，那么与formData是一样的 Array – [] metadataRuntimeContext 当前视图运行时的上下文，可以获取当前模型、字段、动作、视图等所有的数据 Object – – urlParameters 当前url参数 Object – – field 当前字段的元数据 Object – – model 当前模型 Object – – view 当前视图 Object – – disabled 是否禁用 Boolean – false invisible 当前字段是否不可见 Boolean – false required 当前字段是否必填，如果当前字段是在详情页，那么是false Boolean – false readonly 当前字段是否只读，如果当前字段是在详情页、搜索，那么是false Boolean – false placeholder 占位符 String – 当前字段的displayName label 字段的标题 String – 当前字段的displayName 方法 方法名 说明 参数 例子 getDsl 获取当前字段所有的配置 – change 修改当前字段的值 any focus 获取焦点触发的方法 – blur 失去焦点触发的方法 – executeValidator 执行当前字段的校验，异步的 – submit 重写当前字段的提交逻辑 – submit() { return ‘value’ } reloadActiveRecords 替换当前视图的数据 Array this.reloadActiveRecords([{code: xxx, name: 111}]) reloadRootData 替换根视图的数据 Array this.reloadRootData([{code: xxx, name: 111}])
