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

汤乾华 • 2024年10月8日 am11:50 • 前端 • 3458 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)

汤乾华数式员工

0 0

数据可视化创建图表

Previous 2024年10月8日 am10:37

前端初阶知识点讲解

Next 2024年10月8日 pm5:55

前端

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

上下文在字段和动作中的应用在业务场景中，常常需要在打开弹窗或跳转到新页面时携带当前页面数据。此时，我们需要配置相关「动作」中的上下文信息。在 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需要是提交模型【前端视图】存在的字段才能传递。

汤乾华
2023年11月8日
3.2K101
前端

自定义的「视图、字段」调用界面设计器配置的按钮（包含权限控制）

我们在业务开发中，经常会遇到自定义的视图或字段。有时候期望点击某一块区域的时候，打开一个弹窗或者是跳转新页面亦或者是执行服务端动作（调接口），但是希望这个动作是界面设计器拖拽进来的。这篇文章详细的讲解了自定义的视图、字段怎么执行界面设计器拖出来的按钮。自定义视图 1: 先设计一个页面，把对应的动作拖拽进来，可以不需要配置字段2: 将该页面绑定菜单 3: 自定义对应的页面当我们自定义视图的时候，首先会注册一个视图，下面是我自定义的一个表单视图 registerLayout( `<view type="FORM"> <element widget="actionBar" slot="actionBar"> <xslot name="actions" /> </element> <element widget="MyWidget" slot="form"> <xslot name="fields" /> </element> </view>`, { moduleName: 'ys0328', model: 'ys0328.k2.Model0000000453', actionName: 'MenuuiMenu78ec23b054314ff5a12b4fe95fe4d7b5', viewType: ViewType.Form } ); 我自定义了一个叫做MyWidget的 element，下面是对应的ts代码 @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'MyWidget' })) export class MyWidgetManageWidget extends FormWidget { public initialize(props): this { super.initialize(props); this.setComponent(MyVue); return this; } } 这是对应的 vue 文件: MyVue.vue <template> <div @click="onClick">点击执行动作</div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ props: ['onClick'] }); </script> 这个时候，我希望点击的时候，执行 onClick，会执行对应的动作，这时只需要在对应的 ts 文件中写对应的代码逻辑即可： @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'MyWidget' })) export class MyWidgetManageWidget extends BaseElementWidget { // 获取当前页面所有的按钮 @Widget.Reactive() public get modelActions() { return this.metadataRuntimeContext.model.modelActions || [] } // 用来解析上下文表达式的，如果不需要，可以删除 public executeCustomExpression<T>( parameters: Partial<ExpressionRunParam>, expression: string, errorValue?: T ): T | string | undefined { const scene = this.scene; return Expression.run( { activeRecords: parameters.activeRecords, rootRecord: parameters.rootRecord, openerRecord: parameters.openerRecord, scene: parameters.scene || scene, activeRecord: parameters.activeRecord } as ExpressionRunParam, expression, errorValue ); } // 点击事件 @Widget.Method() public onClick() { // 找到对应的按钮 const action = this.modelActions.find((a) => a.label === '动作的显示名称'); /** * 如果是服务端动作，就执行 executeServerAction */ // executeServerAction(action, 参数对象) // 第二个参数是调用对应的接口传递的参数 /** *…

汤乾华
2023年11月8日
1.9K020
前端

「前端」关闭源码依赖

问题背景在 5.x 版本的 oinone 前端架构中，我们开放了部分源码，但是导致以下性能问题： 1.构建耗时增加：Webpack 需要编译源码文件 2.加载性能下降：页面需加载全部编译产物 3.冷启动缓慢：开发服务器启动时间延长以下方案通过关闭源码依赖。操作步骤 1. 添加路径修正脚本 1: 在当前项目工程根目录中的scripts目录添加patch-package-entry.js脚本，内容如下： const fs = require('fs'); const path = require('path'); const targetPackages = [ '@kunlun+vue-admin-base', '@kunlun+vue-admin-layout', '@kunlun+vue-router', '@kunlun+vue-ui', '@kunlun+vue-ui-antd', '@kunlun+vue-ui-common', '@kunlun+vue-ui-el', '@kunlun+vue-widget' ]; // 递归查找目标包的 package.json function findPackageJson(rootDir, pkgName) { const entries = fs.readdirSync(rootDir); for (const entry of entries) { const entryPath = path.join(rootDir, entry); const stat = fs.statSync(entryPath); if (stat.isDirectory()) { if (entry.startsWith(pkgName)) { const [pkGroupName, name] = pkgName.split('+'); const pkgDir = path.join(entryPath, 'node_modules', pkGroupName, name); const pkgJsonPath = path.join(pkgDir, 'package.json'); if (fs.existsSync(pkgJsonPath)) { return pkgJsonPath; } } // 递归查找子目录 const found = findPackageJson(entryPath, pkgName); if (found) return found; } } return null; } // 从 node_modules/.pnpm 开始查找 const pnpmDir = path.join(__dirname, '../', 'node_modules', '.pnpm'); for (const pkgName of targetPackages) { const packageJsonPath = findPackageJson(pnpmDir, pkgName); if (packageJsonPath) { try { const packageJSON = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8')); if (packageJSON.main === 'index.ts') { const libName = packageJSON.name.replace('@', '').replace('/', '-'); packageJSON.main = `dist/${libName}.esm.js`; packageJSON.module = `dist/${libName}.esm.js`; const typings = 'dist/types/index.d.ts'; packageJSON.typings = typings; const [pwd] = packageJsonPath.split('package.json'); const typingsUrl = path.resolve(pwd, typings); const dir = fs.existsSync(typingsUrl); if (!dir)…

汤乾华
2025年4月17日
724000
前端

前端graphql拼接复杂的数据类型结构

在前端开发中，有时需要自定义视图，但手写 GraphQL 查询语句非常繁琐，特别是当查询很复杂时。本文将介绍如何使用平台内置的API buildSingleItemParam 来简化这个过程。使用方法 buildSingleItemParam 方法接受两个参数：字段结构数据下面是一个示例代码： import { IModelField, buildSingleItemParam } from '@kunlun/dependencies'; const onSaveViewData = async (data) => { // 定义字段的数据结构 const modelFields = [ { name: 'conversationId', ttype: ModelFieldType.String }, { name: 'msgId', ttype: ModelFieldType.String }, { name: 'rating', ttype: ModelFieldType.Integer }, { name: 'tags', ttype: ModelFieldType.OneToMany, modelFields: [ { name: 'id', ttype: ModelFieldType.String }, { name: 'name', ttype: ModelFieldType.String } ] }, { name: 'text', ttype: ModelFieldType.String } ] as IModelField[]; // 构建 GraphQL 查询语句 const gqlStr = await buildSingleItemParam(modelFields, data); const gqlBody = `mutation { chatMessageFeedbackMutation { create( data: ${gqlStr} ) { conversationId msgId rating tags { id } text } } }`; // 向服务器发送请求 const rst = await http.query('ModuleName', gqlBody) // todo }; // 调用示例 onSaveViewData({ conversationId: '12', msgId: '123', tags: [ { id: '122', name: '222' }, { id: '122', name: '222' } ] }); 以上是使用 buildSingleItemParam 简化 GraphQL 查询语句的示例代码。通过这种方式，我们可以更高效地构建复杂的查询语句，提高开发效率。

oinone
2023年11月1日
3.2K000
前端

前端自定义左树右表中的树

在 oinone 平台中，提供了默认的左树右表的视图，用户可以通过界面设计器配置，默认的树视图不一定满足所有需求，尤其当需要自定义功能或复杂的交互时，我们可以通过自定义视图来实现更灵活的展现。本文将带你一步步了解如何自定义左树右表视图中的树组件。自定义树视图 1. 使用界面设计器配置视图首先，我们需要通过界面设计器生成基础的左树右表视图。界面设计器允许用户根据不同需求进行拖拽配置，快速创建可视化界面。配置完视图之后，我们可以重写左侧的树组件。Oinone 的默认树组件是 TableSearchTreeWidget，通过自定义的方式，我们可以实现更高级的功能。 2. 重写 TableSearchTreeWidget import { BaseElementWidget, SPI, TableSearchTreeWidget, ViewType } from '@kunlun/dependencies'; import CustomTableSearchTree from './CustomTableSearchTree.vue'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: [ViewType.Table, ViewType.Form], widget: 'tree', model: 'resource.k2.Model0000000100' // 改成自己的模型 }) ) export class CustomTableSearchTreeWidget extends TableSearchTreeWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomTableSearchTree); return this; } } 3. 定义 Vue 树组件接下来，我们来实现 CustomTableSearchTree.vue 组件。这个组件将处理树的数据加载、节点选中等逻辑。你可以根据项目的需要修改其中的交互逻辑或 UI 设计。 <template> <a-tree :load-data="onLoadData" :tree-data="treeData" @select="onSelected" /> </template> <script lang="ts"> import { OioTreeNode, TreeUtils } from '@kunlun/dependencies'; import { computed, defineComponent } from 'vue'; export default defineComponent({ props: { rootNode: { type: Object }, loadData: { type: Function, required: true }, onSelected: { type: Function, required: true } }, setup(props) { // // 计算树的数据源，使用 TreeUtils 处理 const treeData = computed(() => { return TreeUtils.fillLoadMoreAction([…(props.rootNode?.children || [])]); }); // 异步加载子节点 const onLoadData = async (node) => { return await props.loadData(node.dataRef); }; // 处理节点选中事件 const onSelected = ( selectedKeys: string[], e: { nativeEvent: PointerEvent; node: { dataRef: OioTreeNode }; selected: boolean } ) => { props.onSelected?.(e.node.dataRef, e.selected); }; return { treeData, onLoadData, onSelected }; } }); </script> 4. 自定义…

汤乾华
2024年10月21日
3.2K000

Please Login to Comment

shao 2024年11月25日

支持其他的国家的语言，需要在资源里面创建，如果有其他的疑问，也可以群内联系我们哈

Comment on 6.4 国际化之多语言
xiao3 2024年11月25日

只支持英语吗？如何添加其他语种？

Comment on 6.4 国际化之多语言
psyy 2024年8月21日

1.4 Oinone对软件特性的思考，技术原理一段，几余（几->冗） 1.4 Oinone对软件特性的思考，协同演进一段，新特生（生->性）

Comment on 1.4 Oinone对软件特性的思考
望闲 2024年6月21日

感谢反馈，已修正

Comment on 1.5 Oinone与行业对比
xinf 2024年6月14日

bug反馈：采用无一体设计 -> 采用低无一体设计

Comment on 1.5 Oinone与行业对比

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

视图的元数据

当前视图的元数据(metadataRuntimeContext)

运行时模型(model)

当前视图的 dsl(viewDsl)

默认值(getDefaultValue)

根视图的元数据(rootRuntimeContext)

视图数据

formData

dataSource

rootData

activeRecords

openerActiveRecords

特殊数据

activeTreeContext 树组件的选中数据

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

相关推荐

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

自定义的「视图、字段」调用界面设计器配置的按钮（包含权限控制）

「前端」关闭源码依赖

前端graphql拼接复杂的数据类型结构

前端自定义左树右表中的树

Leave a Reply

当前视图的元数据(`metadataRuntimeContext`)

运行时模型(`model`)

当前视图的 dsl(`viewDsl`)

默认值(`getDefaultValue`)

根视图的元数据(`rootRuntimeContext`)