1. Oinone社区Home
  2. 前端

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

汤乾华 • • 前端 • 3708 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

相关推荐

  • oio-empty-data 空数据状态 组件

    oio-empty-data 空数据状态

    何时使用 当目前没有数据时，用于显式的用户提示。 初始化场景时的引导创建流程。 API 参数 说明 类型 默认值 版本 description 自定义描述内容 string | v-slot – image 设置显示图片，为 string 时表示自定义图片地址 string | v-slot false imageStyle 图片样式 CSSProperties –

    汤乾华's avatar 汤乾华
    2023年12月18日
    1.9K00
  • 自定义组件之自动渲染（组件插槽的使用）（v4） 前端

    自定义组件之自动渲染（组件插槽的使用）（v4）

    阅读之前 你应该： 了解DSL相关内容。母版-布局-DSL 渲染基础（v4） 了解SPI机制相关内容。组件SPI机制（v4.3.0） 自定义组件简介 前面我们简单介绍过一个简单的自定义组件该如何被定义，并应用于页面中。这篇文章将对自定义组件进行详细介绍。 自定义一个带有具名插槽的容器组件（一般用于Object数据类型的视图中） 使用BasePackWidget组件进行注册，最终体现在DSL模板中为<pack widget="SlotDemo">。 SlotDemoWidget.ts import { BasePackWidget, SPI } from '@kunlun/dependencies'; import SlotDemo from './SlotDemo.vue'; @SPI.ClassFactory(BasePackWidget.Token({ widget: 'SlotDemo' })) export class SlotDemoWidget extends BasePackWidget { public initialize(props) { super.initialize(props); this.setComponent(SlotDemo); return this; } } 定义一个Vue组件，包含三个插槽，分别是default不具名插槽、title具名插槽、footer具名插槽。 SlotDemo.vue <template> <div class="slot-demo-wrapper" v-show="!invisible"> <div class="title"> <slot name="title" /> </div> <div class="content"> <slot /> </div> <div class="footer"> <slot name="footer" /> </div> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'SlotDemo', props: { invisible: { type: Boolean, default: undefined } } }); </script> 在一个表单（FORM）的DSL模板中，我们可以这样使用这三个插槽： <view type="FORM"> <pack widget="SlotDemo"> <template slot="default"> <field data="id" /> </template> <template slot="title"> <field data="name" /> </template> <template slot="footer"> <field data="isEnabled" /> </template> </pack> </view> 这样定义的一个组件插槽和DSL模板就进行了渲染上的结合。 针对不具名插槽的特性，我们可以缺省slot="default"标签，缺少template标签包裹的所有元素都将被收集到default不具名插槽中进行渲染，则上述DSL模板可以改为： <view type="FORM"> <pack widget="SlotDemo"> <field data="id" /> <template slot="title"> <field data="name" /> </template> <template slot="footer"> <field data="isEnabled" /> </template> </pack> </view> 自定义一个数组渲染组件（一般用于List数据类型的视图中） 由于表格无法体现DSL模板渲染的相关能力，因此我们以画廊视图(GALLERY)进行演示。 先定义一个数组每一项的数据结构： typing.ts export interface ListItem { key: string; data: Record<string, unknown>; index: number; } ListRenderDemoWidget.ts import { BaseElementListViewWidget, BaseElementWidget, SPI } from '@kunlun/dependencies'; import ListRenderDemo from './ListRenderDemo.vue'; @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'ListRenderDemo' })) export class ListRenderDemoWidget extends BaseElementListViewWidget { public initialize(props)…

    oinone's avatar oinone
    2023年11月1日
    1.3K00
  • 创建与编辑一体化 前端

    创建与编辑一体化

    在业务操作中，用户通常期望能够在创建页面后立即进行编辑，以减少频繁切换页面的步骤。我们可以充分利用Oinone平台提供的创建与编辑一体化功能，使操作更加高效便捷。 通过拖拽实现表单页面设计 在界面设计器中，我们首先需要设计出对应的页面。完成页面设计后，将需要的动作拖入设计好的页面。这个动作的关键在于支持一个功能，即根据前端传入的数据是否包含id来判断是创建操作还是编辑操作。 动作的属性配置如下： 前端自定义动作 一旦页面配置完成，前端需要对这个动作进行自定义。以下是一个示例的代码： @SPI.ClassFactory( ActionWidget.Token({ actionType: [ActionType.Server], model: '模型', name: '动作的名称' }) ) export class CreateOrUpdateServerActionWidget extends ServerActionWidget { @Widget.Reactive() protected get updateData(): boolean { return true; } } 通过以上步骤，我们实现了一个更智能的操作流程，使用户能够在创建页面的同时进行即时的编辑，从而提高了整体操作效率。这种创建与编辑一体化的功能不仅使操作更加顺畅，同时也为用户提供了更灵活的工作流程。

    汤乾华's avatar 汤乾华
    2023年11月21日
    2.7K00
  • 表格字段配置Switch开关 前端

    表格字段配置Switch开关

    在业务开发中，我们经常会遇到表格中有个Switch开关组件: 那么如何通过界面设计器配置这个组件呢，下面让我们一起来学习下吧。 设计布尔类型的组件 1: 首先在界面设计器的组件区域添加一个组件。 2: 我们给这个组件添加一个元件,元件的配置必须跟下面的一致 3: 给元件添加属性配置 拖拽一个单行文本字段, 字段编码必须是truthyAction，代表的是该字段为true的时候要执行的动作 再拖拽一个单行文本字段, 字段编码必须是falsyAction，代表的是该字段为false的时候要执行的动作 4: 发布元件，然后再去对应的界面设计器页面，将对应的字段切换成刚刚设计的组件 5: 发布界面设计器，染红我们可以在运行时的页面看到效果 当switch切换的时候，会执行对应的action

    汤乾华's avatar 汤乾华
    2023年11月21日
    2.8K00
  • 自定义组件之手动渲染任意视图（v4） 前端

    自定义组件之手动渲染任意视图（v4）

    private metadataViewWidget: MetadataViewWidget | null | undefined; private async renderCustomView(model: string, viewName: string, slotName?: string) { const view = await ViewCache.get(model, viewName); if (!view) { return; } if (this.metadataViewWidget) { this.metadataViewWidget.dispose(); this.metadataViewWidget = null; } const metadataViewWidget = this.createWidget(MetadataViewWidget, slotName, { metadataHandle: this.metadataHandle, rootHandle: this.rootHandle, internal: true, inline: true, automatic: true }); this.metadataViewWidget = metadataViewWidget; metadataViewWidget.initContextByView(view); this.forceUpdate(); }

    张博昊's avatar 张博昊
    2025年3月6日
    2.0K00

Leave a Reply

Please Login to Comment