1. Oinone社区Home
  2. 前端

前端视图的元数据与数据的传递、交互

汤乾华 • • 前端 • 3821 views

在阅读本篇文章之前，您需要学习以下知识点：

1: 元数据

视图的元数据

在日常开发中，我们会经常遇到自定义的字段、动作、视图需要界面设计器配置的数据，这些数据可能是当前页面的字段，也有可能动作，那么如何获取呢？

视图元数据分为两种：
1: 当前视图(metadataRuntimeContext)
2: 根视图(rootRuntimeContext)

那么这两种类型怎么区分呢？

举个例子：
1: 如果当前字段是在表单中，那么当前视图就是表单，根视图就表单的父级视图，如果只有一个表单视图，那么当前视图就是根视图。
2: 如果当前视图是表单，但是表单里面有个表格，对于表格字段而言，当前视图就是表格，根视图就是表单。

当前视图的元数据(metadataRuntimeContext)

在前端，我们通过 metadataRuntimeContext 来获取视图的元数据，例如：

export class CustomFormStringFieldSingleWidget extends FormStringFieldSingleWidget {
  protected mounted(): void {
    console.log(this.metadataRuntimeContext);
  }

    /**
  * 界面设计器配置的动作
  */
  @Widget.Reactive()
  protected get modelActions() {
    return this.metadataRuntimeContext.model.modelActions
  }

   /**
  * 界面设计器配置的字段
  */
  @Widget.Reactive()
  protected get modelFields() {
    return this.metadataRuntimeContext.model.modelFields
  }
}
属性名 类型 可选性 描述
viewAction RuntimeViewAction 是 运行时跳转动作（通过跳转动作创建的运行时上下文具备该属性）
module RuntimeModule 否 运行时模块
model RuntimeModel 否 运行时模型
view RuntimeView 否 运行时视图
viewLayout DslDefinition \| undefined 否 视图布局 DSL，从运行时视图解析获得
viewDsl DslDefinition \| undefined 否 视图模板 DSL，从运行时视图解析获得
viewTemplate DslDefinition 否 视图最终执行 DSL，从运行时视图解析获得或根据布局 DSL 和模板 DSL 合并生成
getModel (model: string, isBelong?: boolean) => GetModelResult \| undefined 否 获取模型，返回获取的模型和所在的运行时上下文
getModelField (data: string, isBelong?: boolean) => GetModelFieldResult \| undefined 否 获取模型字段，返回获取的模型字段和所在的运行时上下文
getRequestModelFields (options?: GetRequestModelFieldsOptions) => RequestModelField[] 否 获取请求字段
getDefaultValue () => Promise<Record<string, unknown>> 否 获取默认值
getInitialValue () => Promise<Record<string, unknown>> 否 获取初始值

运行时模型(model)

属性名 类型 可选性 描述
id string 是 模型 id
model string 否 模型编码
name string 否 技术名称
modelFields RuntimeModelField[] 否 模型字段
modelActions RuntimeAction[] 否 模型动作
type ModelType 是 模型类型
module string 是 模块编码
moduleName string 否 模块名称
moduleDefinition RuntimeModule 是 模块定义
pks string[] 是 主键
uniques string[][] 是 唯一键
indexes string[][] 是 索引
sorting string 是 排序
label string 是 显示标题
labelFields string[] 是 标题字段

可通过modelFields、modelActions获取界面设计器配置的模型字段、模型动作。

当前视图的 dsl(viewDsl)

视图的 DSL，从运行时视图解析获得，如果模型中的modelFields、modelActions获取不到的对应的字段、动作，那么可从该属性中获取

默认值(getDefaultValue)

用来获字段的默认值（界面配置器配置的）

根视图的元数据(rootRuntimeContext)

根视图的元数据结构跟当前视图的元数据类似。

视图数据

视图数据是贯穿于应用程序前端和视图层的关键数据，它承载了应用逻辑到用户界面之间的桥梁作用。

在 oinone 前端中，常见的视图数据分为如下几种：

1: 表单数据(formData)
2: 列表数据(dataSource)
3: 根视图数据(rootData)
4: 当前字段、动作所在的区域数据(activeRecords)
5: 按钮打开弹窗、抽屉的时候，按钮所在的区域数据(openerActiveRecords)

formData

formData 是一个对象，对象中的每个属性对应一个表单项，表单项的值就是该属性的值。所有的表单字段都可以通过this.formData来访问，也可以通过this.formData.xxx来获取某个字段的值。

dataSource

dataSource 是一个数组，数组中的每个元素对应一个列表项，列表项的值就是该元素。所有的列表字段都可以通过this.dataSource来访问，也可以通过this.dataSource[0].xxx来获取某个列表字段的值。

rootData

rootData 是一个数组，如果当前视图是列表，那么 rootData 是列表的数据源。如果当前视图是表单，那么 rootData 是表单的数据源，其中的第 0 项是当前表单的数据。

activeRecords

activeRecords 是一个数组

1: 表单视图的动作
    1.1: activeRecords 是表单的数据源，其中的第 0 项是当前表单的数据。
2: 表格视图上方的动作
    2.1: activeRecords 是当前选中的行数据，其中的第 0 项是对应的数据。
3: 表格的行内动作
    3.1: activeRecords 是当前行数据，其中的第 0 项是对应的数据。

openerActiveRecords

openerActiveRecords 是一个数组，用于保存当前页面的 opener 页面选中的数据。

1: 比如 行内动作 点击打开弹窗，弹窗里面的字段或者动作可以通过 openerActiveRecords 获取 行内 数据.
2: 比如 表单中的动作 点击打开弹窗，弹窗里面的字段或者动作可以通过 openerActiveRecords 表单 数据.

特殊数据

activeTreeContext 树组件的选中数据

activeTreeContext 树组件的选中数据，可以获取到选中的数据，以及选中的数据的父级数据，用于左树右表的视图.

常见场景：

场景 1: 左树右表的视图，表格上方的创建按钮点击打开弹窗，弹窗里面要获取左树选中的数据，用于创建数据.
方案：点击弹窗里面的创建按钮时，通过 this.metadataRuntimeContext.view?.activeTreeContext 获取到左树选中的数据

class CustomActon extends ServerActionWidget {
  protected async executeAction(action: RuntimeServerAction, submitValue: SubmitValue){
    const treeContext = this.metadataRuntimeContext.view?.activeTreeContext || {}
    submitValue.records = {
      ...submitValue.records,
      ...treeContext
    }
    super.executeAction(action, submitValue)
  }
}

场景 2: 左树右表的视图，表格上方的创建按钮点击打开新页面，新页面里面要获取左树选中的数据，用于创建数据.
方案：点击新页面里面的创建按钮时，可通过URL参数获取到左树选中的数据

class CustomActon extends ServerActionWidget {
  protected async executeAction(action: RuntimeServerAction, submitValue: SubmitValue){
    const treeContext = JSON.parse(this.getUrlParameters().context).activeTreeContext || {}
    submitValue.records = {
      ...submitValue.records,
      ...treeContext
    }
    super.executeAction(action, submitValue)
  }
}

searchBody 搜索条件、searchConditions 固定查询条件

参考文章

Oinone社区 作者：汤乾华原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/18209.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Like (0)
汤乾华's avatar汤乾华数式员工
0 0
Previous 2024年10月8日 am10:37
Next 2024年10月8日 pm5:55

相关推荐

  • 前端表格复制 组件

    前端表格复制

    我们可能会遇到表格复制的需求，也就是表格填写的时候，不是增加一行数据，而是增加一个表格。以下是代码实现和原理分析。 代码实现 在 boot 工程的 main.ts 中加入以下代码 import { registerDesignerFieldWidgetCreator, selectorDesignerFieldWidgetCreator } from '@oinone/kunlun-ui-designer-dependencies'; // 注册无代码组件，将表头分组的无代码组件，注册成字段表格组件 registerDesignerFieldWidgetCreator( { widget: 'DynamicCreateTable' }, selectorDesignerFieldWidgetCreator({ widget: TABLE_WIDGET })! ); DynamicCreateTableWidget 动态添加表格 ts 组件 import { FormO2MTableFieldWidget, Widget, DslDefinition, RuntimeView, SubmitValue, BaseFieldWidget, ModelFieldType, SPI, ViewType, ActiveRecord, uniqueKeyGenerator } from '@oinone/kunlun-dependencies'; import { MyMetadataViewWidget } from './MyMetadataViewWidget'; import DynamicCreateTable from './DynamicCreateTable.vue'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Form, ttype: ModelFieldType.OneToMany, widget: 'DynamicCreateTable' }) ) export class DynamicCreateTableWidget extends FormO2MTableFieldWidget { public myMetadataViewWidget: MyMetadataViewWidget[] = []; @Widget.Reactive() public myMetadataViewWidgetLength = 0; @Widget.Reactive() public myMetadataViewWidgetKeys: string[] = []; protected props: Record<string, unknown> = {}; public initialize(props) { super.initialize(props); this.props = props; this.setComponent(DynamicCreateTable); return this; } // region 创建动态表格 @Widget.Method() public async createTableWidget(record: ActiveRecord) { const index = this.myMetadataViewWidget.length; const handle = uniqueKeyGenerator(); const slotKey = `MyMetadataViewWidget_${handle}`; const widget = this.createWidget( new MyMetadataViewWidget(handle), slotKey, // 插槽名称 { subIndex: index, metadataHandle: this.metadataHandle, rootHandle: this.rootHandle, automatic: true, internal: true, inline: true } ); this.initDynamicSubview(this.props, widget); widget.setData(record); this.myMetadataViewWidgetLength++; this.myMetadataViewWidgetKeys.push(slotKey); this.myMetadataViewWidget.push(widget); } protected initDynamicSubview(props: Record<string, unknown>, widget: MyMetadataViewWidget) { const { currentViewDsl } = this; let viewDsl = currentViewDsl; if (!viewDsl) { viewDsl = this.getViewDsl(props)…

    银时's avatar 银时
    2025年7月21日
    98900
  • 列表视图、卡片视图切换 前端

    列表视图、卡片视图切换

    在日常项目开发中，我们可能会遇到当前视图是个表格，通过某个操作按钮将它变成卡片的形式. 这篇文章将带大家实现这种功能。通过上面两张图片可以看到出来不管是表格还是卡片，它都在当前的视图里面，所以我们需要一个视图容器来包裹表格跟卡片，并且表格可以使用平台默认的表格渲染，我们只需要自定义卡片即可。 我们用资源模块下面的国家菜单来实现这么一个功能这是对应的URL： http://localhost:8080/page;module=resource;viewType=TABLE;model=resource.ResourceCountry;action=resource%23%E5%9B%BD%E5%AE%B6;scene=resource%23%E5%9B%BD%E5%AE%B6;target=OPEN_WINDOW;menu=%7B%22selectedKeys%22:%5B%22%E5%9B%BD%E5%AE%B6%22%5D,%22openKeys%22:%5B%22%E5%9C%B0%E5%9D%80%E5%BA%93%22,%22%E5%9C%B0%E5%8C%BA%22%5D%7D 源码下载 views 创建外层的视图容器 刚刚我们讲过，不管是表格还是卡片，它都在当前的视图里面，所以我们需要写一个视图容器来包裹它们，并且对应的容器里面允许拆入表格跟卡片，我们先创建TableWithCardViewWidget.ts // TableWithCardViewWidget.ts import { BaseElementWidget, SPI, Widget } from '@kunlun/dependencies'; import TableWithCardView from './TableWithCardView.vue'; enum ListViewType { TABLE = 'table', CARD = 'card' } @SPI.ClassFactory( BaseElementWidget.Token({ widget: 'TableWithCardViewWidget' }) ) export class TableWithCardViewWidget extends BaseElementWidget { @Widget.Reactive() private listViewType: ListViewType = ListViewType.TABLE; // 当前视图展示的类型，是展示卡片还是表格 public initialize(props) { if (!props.slotNames) { props.slotNames = ['tableWidget', 'cardWidget']; } super.initialize(props); this.setComponent(TableWithCardView); return this; } } 在TableWithCardViewWidget中的initialize函数中，我们定义了两个插槽: tableWidget、cardWidget，所以需要在对应的vue文件里面里接收这两个插槽 <template> <div class="list-view-wrapper"> <!– 表格插槽 –> <div style="height: 100%" v-if="listViewType === 'table'"> <slot name="tableWidget" /> </div> <!– 卡片插槽 –> <div v-if="listViewType === 'card'"> <slot name="cardWidget"></slot> </div> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ props: ['listViewType', 'onChangeViewType'], inheritAttrs: false, setup(props, context) { const onChangeViewType = (listViewType) => { props.onChangeViewType(listViewType); }; } }); </script> 这样一来，我们就定义好了视图容器，接下来就是通过自定义layout的方式注册该容器 layout注册 import { registerLayout, ViewType } from '@kunlun/dependencies'; registerLayout( `<view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" cols="4" slot="search"/> </view> </pack> <pack widget="group" slot="tableGroup" style="position: relative"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="TableWithCardViewWidget"> <template slot="tableWidget"> <element widget="table" slot="table" datasource-provider="true"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" />…

    汤乾华's avatar 汤乾华
    2024年10月16日
    3.1K01
  • 如何在表格的字段内添加动作 低无一体

    如何在表格的字段内添加动作

    介绍 在日常的业务中，我们经常需要在表格内直接点击动作完成一些操作，而不是只能在操作栏中，例如：订单的表格内点击商品名称或者里面的按钮跳转到商品详情页面，这里我们将带来大家来通过自定义表格字段来实现这个功能。 1.编写表格字段组件 组件ts文件TableBtnFieldWidget.ts import { ActionWidget, ActiveRecordExtendKeys, BaseFieldWidget, BaseListView, ModelFieldType, queryDslWidget, queryRowActionBar, RowContext, SPI, TableStringFieldWidget, BaseElementListViewWidget, ViewType, Widget } from '@kunlun/dependencies'; import { createVNode, VNode } from 'vue'; import { toString } from 'lodash-es'; import TableBtnField from './TableBtnField.vue'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Table, ttype: [ModelFieldType.String, ModelFieldType.Text], // widget: 'StringLink', // 以下3行配置代码测试用，生产建议在界面设计器自定义组件，widget填自定义组件的api名称 model: 'resource.k2.Model0000000109', name: 'name' }) ) export class TableBtnFieldWidget extends TableStringFieldWidget { @Widget.Reactive() private get triggerActionLabel() { // 界面设计器组件内设计该属性 return this.getDsl().triggerActionLabel || '更新'; } private getTriggerAction() { return this.model.modelActions.find((a) => a.label === this.triggerActionLabel); } private getTriggerActionWidget(widgetHandle: string, draftId: string, triggerActionLabel: string): ActionWidget | undefined { const listView = Widget.select(widgetHandle) as unknown as BaseListView; const listWidget = queryDslWidget(listView?.getChildrenInstance(), BaseElementListViewWidget); if (!listWidget) { return undefined; } const rowActionBar = queryRowActionBar(listWidget.getChildrenInstance(), draftId); const actionWidget = rowActionBar?.getChildrenInstance().find((a) => (a as ActionWidget).action.label === triggerActionLabel); return actionWidget as ActionWidget; } protected clickAction(context: RowContext) { const draftId = context.data[ActiveRecordExtendKeys.DRAFT_ID] as unknown as string; const actionWidget = this.getTriggerActionWidget(this.getRootHandle()!, draftId, this.triggerActionLabel); if (!actionWidget) { console.error('未找到action', this.triggerActionLabel); return; } actionWidget.click(); } @Widget.Method() public renderDefaultSlot(context: RowContext): VNode[] | string { const value = toString(this.compute(context)); if (value) { return [ createVNode(TableBtnField,…

    nation's avatar nation
    2024年5月16日
    2.4K00
  • 「前端」动作API API&SDK 文档

    「前端」动作API

    概述 在 oinone 前端平台中，提供了四种动作 跳转动作（页面跳转、打开弹窗、抽屉） 服务端动作（调用接口） 客户端动作（返回上一页、关闭弹窗等） 链接动作（打开执行的链接） 快速开始 // 基础使用示例 import { executeViewAction, executeServerAction, executeUrlAction } from '@kunlun/dependencies'; // 示例 1: 基础页面跳转（去创建页面） executeViewAction(action); // 示例 2: 带参数的页面跳转（查询ID为123的数据）,去编辑、详情页 executeViewAction(action, undefined, undefined, { id: '123' }); // 示例 3: 页面跳转的参数，用最新的，防止当前页面的参数被带到下一个页面 executeViewAction(action, undefined, undefined, { id: '123' , preserveParameter: true}); // 示例 4: 调用服务端接口 const params = { id: 'xxx', name: 'xxx' }; await executeServerAction(action, params); await executeServerAction(action, params, { maxDepth: 2 }); // 接口数据返回的数据层级是3层 -> 从0开始计算, 默认是2层 // 执行链接动作 executeUrlAction(action); API 详解 executeViewAction 参数名 描述 类型 必填 默认值 — action 视图动作 RuntimeViewAction true router 路由实例 Router false undefined matched 路由匹配参数 Matched false undefined extra 扩展参数 object false {} target 规定在何处打开被链接文档（可参考 a 标签的 target） string false undefined executeServerAction 参数名 描述 类型 必填 默认值 ​action 服务端动作 RuntimeServerAction true param 传递给后端的参数 object true context 配置接口返回的数据层级（默认是两层） {maxDepth: number} false executeUrlAction 参数名 描述 类型 必填 默认值 ​action 链接动作 IURLAction true

    汤乾华's avatar 汤乾华
    2025年3月21日
    2.0K00
  • 上下文在字段和动作中的应用 前端

    上下文在字段和动作中的应用

    上下文在字段和动作中的应用 在业务场景中，常常需要在打开弹窗或跳转到新页面时携带当前页面数据。此时，我们需要配置相关「动作」中的上下文信息。 在 oinone 平台中，上下文主要分为以下三种： activeRecord：当前视图数据 rootRecord：主视图数据 openerRecord：触发弹窗的对象 参考文档：oinone内的主视图数据和当前视图数据使用介绍 activeRecord 表示当前视图的数据。例如，若动作配置在表单上，则指代当前表单的数据；若配置在 o2m、m2m 字段表格上，则指代选中的行数据。 rootRecord 表示根视图的数据。若当前视图是表单页，则代表表单的数据；若为表格页，则代表表格的数据。 openerRecord 表示触发弹窗的对象。例如，在弹窗内的字段或动作中，可通过 openerRecord 获取触发弹窗的信息。 这三者均为对象 (Object) 类型。 界面设计器配置 在 o2m、m2m 表格字段弹窗中携带当前视图数据 假设我们设计了一个包含 o2m、m2m 表格字段的表单页面。打开相关弹窗时，需将表单中的 code 数据传递至弹窗中。 选择相应的「动作」，如创建或添加。在右侧属性面板底部找到「上下文」，添加格式为对象 {} 的上下文信息。 以键值对的格式添加上下文信息：{code: rootRecord.code}。 设计弹窗时，将 code 字段拖入弹窗中。 完成设计后保存并发布。 大家可以看到，上下文中的key是 code，但是value是rootRecord.code，这里取的是rootRecord而不是activeRecord，因为我们上面讲过如果当前动作配置在o2m、m2m的字段表格上面，那么activeRecord就是表格选中的行，我们现在要取的是表单上的code字段，所以需要用rootRecord。 注意点：key需要是提交模型【前端视图】存在的字段才能传递。

    汤乾华's avatar 汤乾华
    2023年11月8日
    3.7K10

Leave a Reply

Please Login to Comment