在阅读本篇文章之前，您需要学习以下知识点：
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低代码应用平台体验
![[前端]平台内置的基类](https://doc.oinone.top/wp-content/themes/justnews/themer/assets/images/lazy.png)
