键值对

表单

键值对 (FormMapFieldWidget)

表单键值对基础类，用于处理键值对的通用功能。默认使用 FormMapFieldWidget.ts 作为该功能的基类，表单键值对继承了 FormFieldWidget<Record<string, string>>。

@SPI.ClassFactory(
  FormFieldWidget.Token({
    ttype: ModelFieldType.Map,
    viewType: [ViewType.Form, ViewType.Detail],
  })
)
export class FormMapFieldWidget extends FormFieldWidget<
  Record<string, string>
> {}

参数

• mountedCallChaining: 响应式变量，表示挂载链式调用（钩子）。
• items: 响应式变量，表示存储{ name: '', value: '' }的键值的数组，默认值为[]。
• limit: 响应式变量，表示 items 的最大数量限制。

方法

addRecord()

• 类型: 非响应式方法
• 描述: 添加记录。

@Widget.Method()
protected addRecord() {}

removeRecord(index)

• 类型: 非响应式方法
• 描述: 删除记录，触发this.onHandleChange()和this.blur()事件。
• 入参:
  • index (number): 要删除的记录的索引。

@Widget.Method()
protected removeRecord(index: number) {}

onHandleChange()

• 类型: 非响应式方法
• 描述: 修改值为this.items生成的键值对。

@Widget.Method()
protected onHandleChange() {}

generatorValue()

• 类型: 非响应式方法
• 描述: 根据 this.items 生成键值对。
• 返回值:
  • Record<string, string> | null | undefined: 生成的键值对。

protected generatorValue(): Record<string, string> | null | undefined {}

submit(submitValue)

• 类型: 非响应式方法
• 描述: 将当前字段键值对数据合并到总待提交数据 submitValue 中，返回当前字段键值对数据。
• 入参:
  • submitValue (SubmitValue): 总待提交数据。
• 返回值:
  • ReturnPromise<void>: 生成字段名和输入值的键值对或undefined。

public async submit(submitValue: SubmitValue): ReturnPromise<void> {}

validator()

• 类型: 非响应式方法
• 描述: 验证当前字段的值是否合法，当 this.required 为 true 时，验证非空；验证是否有重复的 key。
• 返回值:
  • Promise<ValidatorInfo>: 包含验证信息的 Promise 对象。

public async validator(): Promise<ValidatorInfo> {}

mountedProcess()

• 类型: 非响应式方法
• 描述: 初始化this.items，将this.value转换成MapItem数组。
• 返回值:
  • ReturnPromise<void>: 生成字段名和输入值的键值对或undefined。

protected mountedProcess(): ReturnPromise<void> {}

$$mounted()

• 类型: 非响应式方法
• 描述: 挂载时调用 this.mountedProcess()。

protected $$mounted() {}

$$unmounted()

• 类型: 非响应式方法
• 描述: 卸载生命周期，取消挂载 this.mountedCallChaining 钩子。

protected $$unmounted() {}

如何替换

import {
  SPI,
  ViewType,
  ModelFieldType,
  FormFieldWidget,
  FormMapFieldWidget,
} from "@kunlun/dependencies";

@SPI.ClassFactory(
  FormFieldWidget.Token({
    ttype: ModelFieldType.Map,
    viewType: [ViewType.Form, ViewType.Detail],
  })
)
export class CustomFormMapFieldWidget extends FormMapFieldWidget {}

表格

键值对 (TableMapFieldWidget)

表格键值对基础类，用于处理键值对在表格中的通用功能。默认使用 TableMapFieldWidget.ts 作为该功能的基类，表格键值对继承了 BaseTableFieldWidget。

@SPI.ClassFactory(
  BaseFieldWidget.Token({ viewType: ViewType.Table, ttype: ModelFieldType.Map })
)
export class TableMapFieldWidget extends BaseTableFieldWidget {}

方法

handleValue()

• 类型: 非响应式方法
• 描述: 将待处理的值数组，转换成 name 为数组索引，value 为原先 value 的数组。
• 入参:
  • value (any): 待处理的值数组。
• 返回值:
  • any: 处理后的数组。

protected handleValue(value): any {}

renderDefaultSlot()

• 类型: 非响应式方法
• 描述: 渲染表格键值对的默认插槽，根据字段值生成 span 元素数组，最后包裹 div元素。
• 入参:
  • context (any): 上下文信息。
• 返回值:
  • VNode[] | string: 渲染结果。

@Widget.Method()
public renderDefaultSlot(context): VNode[] | string {}

如何替换

import {
  SPI,
  ViewType,
  ModelFieldType,
  BaseFieldWidget,
  TableMapFieldWidget,
} from "@kunlun/dependencies";

@SPI.ClassFactory(
  BaseFieldWidget.Token({ viewType: ViewType.Table, ttype: ModelFieldType.Map })
)
export class CustomTableMapFieldWidget extends TableMapFieldWidget {}