弹窗或抽屉表单视图rootRecord获取不到对应的数据

相关推荐

• 组件

  oio-input 输入框

  代码演示 <oio-input v-model:value="value"></oio-input> API Input 参数 说明 类型 默认值 版本 addonAfter 带标签的 input，设置后置标签 string|slot addonBefore 带标签的 input，设置前置标签 string|slot allowClear 可以点击清除图标删除内容 boolean defaultValue 输入框默认内容 string disabled 是否禁用状态，默认为 false boolean false maxlength 最大长度 number prefix 带有前缀图标的 input slot showCount 是否展示字数 boolean false suffix 带有后缀图标的 input slot type 声明 input 类型，同原生 input 标签的 type 属性，见：MDN(请直接使用 <a-textarea /> 代替 type="textarea")。 string text value(v-model:value) 输入框内容 string Input 事件 事件名称 说明 回调参数 update:value 输入框内容变化时的回调 function(e) pressEnter 按下回车的回调 function(e) Input.Search 代码演示 <oio-input-search v-model:value="value"></oio-input-search> Input.Search 事件 事件名称 说明 回调参数 search 点击搜索或按下回车键时的回调 function(value, event) 其余属性和 Input 一致。

  汤乾华

  2023年12月18日

  2.9K000
• 前端

  【界面设计器】自定义字段组件基础

  阅读之前 本文档属于高阶实战文档，已假定你了解了所有必读文档中的全部内容，并了解过界面设计器的一些基本操作。 如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录 概述 平台提供的字段组件（以下简称组件）是通过SPI机制进行查找并最终渲染在页面中。虽然平台内置了众多组件，但无法避免的是，对于业务场景复杂多变的实际情况下，我们无法完全提供所有组件。 面对这样的困境，我们提供了外部注册组件的方式。在之前文章中，我们了解到组件注册后需要应用到页面中，需要配合DSL才能实现。其实，在平台中还提供了一种SAAS化的组件注册方式，配合界面设计器的设计能力，可以将组件在设计器页面中引入，从而更近一步的满足不同的业务场景。 通过界面设计器可以创建自定义组件，并为组件添加对应的元件。 界面设计器可以为元件设计其在指定视图下的属性面板，在页面设计时，可以使用该属性面板为元件设置相关属性。 在界面设计器的设计页面中拖入的组件，将通过SPI机制获取到一个唯一的元件，并渲染在页面中，提供给业务使用。 界面设计器-组件管理 名词解释 页面设计：使用界面设计器设计页面的页面。 属性面板设计：使用界面设计器设计属性面板的页面。 设计页面：页面设计和属性面板设计的统称。 组件库：展示在设计页面左侧的全部可拖拽组件。 组件：在组件库中可拖拽的最小单元。 元件：一个组件中的具体实现，是组件的最小单元。 属性面板：展示在设计页面右侧的元件属性。 页面设计 属性面板设计 组件管理入口 进入界面设计器后，可通过上方标签页切换至【组件】管理页面。 创建第一个组件 点击【添加组件】，在弹窗中输入组件名称【文本输入框】后，点击【确定】。 创建第一个元件 点击【组件卡片】或点击【管理元件】按钮进入【元件】管理页面。 点击【添加元件】，可以看到如下【创建元件】弹窗。 表单字段解释 元件名称：显示名称，仅在管理页面做展示使用。 API名称：SPI中的widget属性。 支持字段业务类型：SPI中的ttype属性。 支持多值：SPI中的multi属性。 支持视图类型：SPI中的viewType属性。 元件描述：元件功能描述内容，仅在管理页面做展示使用。 填入以下内容，并点击【确定】。 设计元件属性面板 点击【元件卡片】或点击【设计元件属性】按钮进入【属性面板设计】页面。 从【模型】中搜索【标题】，将【标题】和【隐藏标题】拖放至设计区域。如果想实现的相对美观，可以额外添加【分组】组件拖放至设计区域，并修改标题为【基础】，如下图所示。 点击【发布】按钮进行页面的发布。 至此，我们设计了第一个元件属性面板，接下来，我们需要在页面设计中使用这个组件。 在页面中使用【文本输入框】 由于我们之前选择的支持的视图类型是【表单】，因此我们在【表单】页面进行接下来的操作，此处略去创建视图的过程。 从【模型】中将【名称】拖放至设计区域。并通过点击【切换】按钮切换至我们的组件【文本输入框】，并且将标题改为【这是文本输入框组件】查看其展示效果。 属性变化 在组件切换后，属性面板发生了变化，原有属性会根据当前属性面板中现有字段进行【裁剪】，相同属性名称（字段）的值会被保留，其他属性值会被丢弃。 由于我们并没有在当前属性面板添加【宽度】属性，因此原有属性的宽度被丢弃，组件会自动变成默认【宽度】，默认宽度为1。 组件变化 由于我们并没有在【低无一体】中上传对应元件的代码实现，因此展示了默认的【单行文本】组件，目前组件的展示效果不会发生变化。 组件可切换规则 只有【组件】中包含与【当前选中字段】匹配的【元件】，才会将对应【组件】的名称展示在【可切换列表】中。 【当前选中字段】中包含了如下三个属性，这三个属性和【创建元件】时设置的属性一一对应。 （右侧属性面板切换至字段后，可查看当前选中字段的相关元数据信息。） 所在视图类型：根据字段在视图中的位置进行推断，当前所在位置为【表单】。当【支持视图类型】包含【表单】时条件成立。 字段业务类型：文本。当【支持字段业务类型】包含【文本】时条件成立。 是否多值：否。当【支持多值】相同时条件成立。 使用低无一体为组件上传代码实现 进入【组件】管理页面，点击【低无一体】，打开【低无一体】弹窗。 按照步骤，在【生成SDK】后，可以【下载模板工程】。在本地进行npm相关操作后，会在packages/kunlun-plugin目录下生成dist目录。在dist目录中，会有对应的kunlun-sdk.umd.js文件，使用【上传JS文件】进行上传。如果工程中包含了css，使用【上传CSS文件】进行上传。上传完成后点击【确定】进行保存。 PS：在模板工程中，我们提供了最简化的Hello World示例，即使不添加任何代码也可以看到组件的具体效果，为了方便演示，我们暂时不介绍代码实现的相关内容，仅需直接上传对应js文件，看到效果即可。如果遇到相关问题，请点击查看【前端】低无一体部署常见问题。 结语 至此，我们已经完整体验了从【创建组件】到【属性面板设计】再到【使用组件】以及【实现组件】的全部流程。 通过这一流程我们不难发现，【自定义组件】并非仅仅用于【页面设计】，在【属性面板设计】时，我们同样可以使用【自定义组件】来设计【自定义组件】的属性面板。这样便形成了一个完整的设计闭环，使得开发者可以更大程度的发挥自身创造力，开发出符合业务需求的【自定义组件】。

  数式-海波

  2023年11月1日

  3.2K000
• 前端

  自定义mutation时出现校验不过时，如何排查

  场景描述 用户在自定义接口提供给前端调用时 @Action(displayName = "注册", bindingType = ViewTypeEnum.CUSTOM) public BaseResponse register(UserZhgl data) { //…逻辑 return result; } import java.io.Serializable; public class BaseResponse implements Serializable { private String code; private String msg; public BaseResponse() { } public BaseResponse(String code, String msg) { this.code = code; this.msg = msg; } public String getCode() { return code; } public void setCode(String code) { this.code = code; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } } gql执行时出现报错 { "errors":[ { "message":"Validation error of type SubSelectionNotAllowed: Sub selection not allowed on leaf type Object of field register @ 'zhglMutation/register'", "locations":[ { "line":3, "column":3 } ], "extensions":{ "classification":"ValidationError" } } ] } 解决方案 1.返回对象不为空时，对象必须是模型，否则无法解析返回参数2.前端调用GQL异常时，可以用Insomnia工具对GQL进行测试，根据错误提示对GQL进行修改和排查3.GQL正常情况下，执行以后可根据后端日志进行错误排查

  oinone

  2023年11月1日

  2.7K000
• 前端

  组件生命周期（v4）

  阅读之前： 你应该： 了解DSL相关内容。母版-布局-DSL 渲染基础（v4） 对第三方框架的组件生命周期有所了解。如Vue组件生命周期 了解平台实现的Class Component(ts)相关内容。Class Component(ts)（v4） 组件生命周期 任何一个Widget其标准生命周期应当包括beforeCreated、created、beforeMount、mounted、beforeUnmount、unmounted这六个基本的生命周期函数、以及beforeUpdate和updated在响应式更新时会进行调用的生命周期函数。特别的，还有activated和deactivated在组件搭配keep-alive特性时使用的生命周期函数。 具体的生命周期执行过程在这里不再进行赘述，这里的基本逻辑与Vue组件生命周期基本完全一致，感兴趣的读者可以阅读Vue相关文档进行学习。

  数式-海波

  2023年11月1日

  2.3K100
• 低无一体

  自定义视图部分区域渲染设计器的配置

  自定义视图与界面设计器配置对接 在日常开发中，我们经常会遇到自定义视图的需求。自定义视图不仅需要与平台机制结合，还要实现与界面设计器中配置的字段和动作的无缝对接。本文将介绍如何将自定义视图与界面设计器中配置的字段和动作的无缝对接，实现字段和动作的渲染。 用大白话来讲就是：当前页面一部分是自定义的，一部分是设计器生成的 代码地址 目录 自定义表单视图与字段、动作的结合 自定义表格视图与字段、动作的结合 自定义表单视图与字段、动作的结合 首先需要在界面设计器配置好对应界面，虽然配置的页面样式跟期望展示的 UI 的不一样，但是数据的分发、汇总以及动作的交互也是一致的，所以我们可以通过自定义的方式替换这个页面的 UI，但是数据以及动作，是完全可以通过平台的能力获取的。 注册表单对应的 SPI // CustomFormWidget.ts import CustomForm from './CustomForm.vue'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Form, widget: 'CustomFormWidget' }) ) export class CustomFormWidget extends FormWidget { public initialize(props: BaseElementObjectViewWidgetProps): this { super.initialize(props); this.setComponent(CustomForm); return this; } } <!– CustomForm.vue –> <template> <div class="custom-form-container"> <div class="custom-form-tip">自定义视图</div> </div> </template> <script lang="ts"> import { DslRender, DslRenderDefinition, PropRecordHelper } from '@kunlun/dependencies'; import { createVNode, defineComponent, onMounted, PropType, ref, VNode } from 'vue'; export default defineComponent({ inheritAttrs: false, props: { formData: { type: Object as PropType<Record<string, any>>, default: () => ({}) } } }); </script> 在上述的代码中，我们继承的是 FormWidget，那么这个页面会自动发起对应的请求，所有的数据都在 formData 中。 表单视图渲染动作 在最开始我们讲到过，当前页面是在界面设计器配置过，所有在CustomFormWidget里面是可以拿到当前页面配置的元数据信息，所以我们可以拿到界面设计器配置的字段跟动作 /// CustomFormWidget.ts @Widget.Method() protected renderActionVNodes() { // 从dsl中获取actionBar，actionBar里面包含了界面设计器配置的动作 const actionBar = this.metadataRuntimeContext.viewDsl?.widgets.find((w) => w.slot === 'actionBar'); if (actionBar) { // actionBar.widgets 就是界面设计器配置的动作，借助平台提供的DslRender.render方法，将对应的dsl转换成VNode return actionBar.widgets.map((w, index) => DslRender.render({ …w, __index: index }) ); } return null; } 因为 renderActionVNodes 方法返回的是 VNode，所以我们必须借助 vue 的 render 函数才能渲染。 <!– ActionRender.vue –> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ inheritAttrs: false, props: { renderActionVNodes: { type: Function, required: true } }, render() { return this.renderActionVNodes(); } });…

  汤乾华

  2024年9月12日

  1.8K011