Skip to main content

Application of common scenarios of Subforms

In the process of building YIDA applications, you may encounter the following problems.

  • How to set a custom verification function in the subform? The currently entered components are verified with other components in the current row. For example, when batch outbound, the outbound number cannot exceed the inventory number.
  • How to enable and disable component verification dynamically in the subform, for example, when a condition is met, verification is required for some components in the current row.
  • How to dynamically set the component status in the subform, for example, when a condition is met, the status of some components in the current row is set to read-only or disabled.
  • How to achieve the effect of data linkage in Subforms

Prerequisites​

This tutorial uses some basic functions of YIDA. You can first learn about the following functions.

Effect​

Subform custom verification​

Dynamic verification of Subforms​

Subform dynamically sets component status​

Data Linkage in Subforms​

Implementation steps​

Subform custom verification​

Create a common form page​

Create a common form page. For more information, seeCommon form.

Drag the following components into the canvas area.

  • Subform: Named as subform
    • Drop-down single choice: Named Product Information
    • Numerical value: named inventory
    • Numerical value: Named as outbound number

Configure custom verification​

Copy the following code to the JS panel of the page and change the unique identifier in the code.

// 出库数自定义校验（出库数不得大于库存数）
// numberField_lonxsiwh 为子表单内库存数字段的唯一标识，请按需修改
export function validateRuleForOutbound(value) {
  const { values } = this.item;
  const inventoryCount = values.numberField_lonxsiwh || 0; // 获取库存数
  return value <= inventoryCount;
}

The preceding function is called in the custom function of the outbound count component.

function validateRule(value) {
  return this.validateRuleForOutbound(value);
}

Save page​

Dynamic verification of Subforms​

Note: This method does not remove the required * mark, but has practical effects.

Create a common form page​

Create a common form page. For more information, seeCommon form.

Drag the following components into the canvas area.

  • Subform: Named as subform
    • Single choice: Named whether to enable product information verification
    • Drop-down single choice: Named Product Information

Configure component events​

Copy the following code to the JS panel of the page and change the unique identifier in the code.

// 子表单动态设置校验（enableValid / disableValid）
export function onChange({ value }) {
  if (value === '是') {
    this.$('selectField_lonxsixa').enableValid();
  } else {
    this.$('selectField_lonxsixa').disableValid();
  }
}

Whether to enable the product information verification component onChange bind the above function.

Save page​

Subform dynamically sets component status​

Create a common form page​

Create a common form page. For more information, seeCommon form.

Drag the following components into the canvas area.

  • Subform: Named as subform
    • Single choice: Named Product Information field status
      • Select configuration
    • Drop-down single choice: Named Product Information

Configure component events​

Copy the following code to the JS panel of the page and change the unique identifier in the code.

// 产品信息字段状态组件 onChange
export function onChange({ value }) {
  this.$('selectField_lonxsiwo').setBehavior(value);
}

The product information field status component onChange is bound to the preceding function.

Save page​

Data Linkage in Subforms​

Create a common form page​

Create a common form page. For more information, seeCommon form.

Drag the following components into the canvas area.

  • Single line text: Named as type

Drag the following components into the canvas area.

  • Drop-down single choice: Named as item type
    • Configure [associate other form data]]
  • Single line text: Named as item name

Drag the following components into the canvas area.

  • Subform: Named as subform
    • Drop-down single choice: Named as item type
    • Drop-down single choice: Named as item name

Add a data source​

Bind the following variables to the request address.

`/${window.pageConfig.appType || window.g_config.appKey}/v1/form/searchFormDatas.json`

Item type configuration [associate other form data]]​

Copy the following code to the page JS panel.

/**
* 子表单子组件添加选项
* @param formUuid: {String} 被关联表单的 formUuid
* @param relationFieldId: {String} 被关联字段的唯一标识
* @param searchFieldJson: {Object} 筛选条件
* @param tableFieldId: {String} 需要添加选项组件的子表单唯一标识
* @param fieldId: {String} 需要添加选项组件的唯一标识
* @param childFieldItems: {Array} 需要添加选项组件的行标识，不传或传空默认全部添加
* @param isUniq: {Boolean} 是否按选项值去重
*/
export function getTableSelectFieldDataSource(formUuid = '', relationFieldId = '', searchFieldJson = {}, tableFieldId = '', fieldId = '', childFieldItems = [], isUniq = false) {
  const tableField = this.$(tableFieldId); // 获取子表单定义
  // 如果未传 childFieldItems，默认获取子表单所有行
  const items = _.isEmpty(childFieldItems) ? tableField.getItems() : childFieldItems;
  this.dataSourceMap.getData.load({
    formUuid,
    pageSize: 100,
    searchFieldJson: JSON.stringify(searchFieldJson),
  }).then((res) => {
    const { data = [] } = res;
    const tableSelectField = data.map((item) => {
      const { formData = {} } = item;
      return {
        text: formData[relationFieldId], // 显示值
        value: formData[relationFieldId], // 选项值
      };
    });
    items.forEach((item) => {
      tableField.setComponentProps(item, fieldId, {
        dataSource: isUniq ? _.uniqBy(tableSelectField, 'value') : tableSelectField, // 按选项值去重
      });
    });
  }).catch(({ message }) => {
    this.utils.toast({
      title: message,
      type: 'error',
    });
  });
}

When the page is initialized, we need to configure options for the item type, so we need to call it when didMount, and pay attention to modifying the form formUuid and the unique identifier of the component. HereFORM-8B5130A6967A4D4DA36F5EC3FF6D4B1CUD57YesItem typeThe formUuid of the table.

export function didMount() {
  this.getTableSelectFieldDataSource(
    'FORM-8B5130A6967A4D4DA36F5EC3FF6D4B1CUD57',
    'textField_lz87gtfq',
    {},
    'tableField_lz88ervv',
    'selectField_lz88ervw'
  );
}

When adding a new item to the subform, you also need to call it to configure the option for the item type of the new row. Add a new item to the subform to bind the following function.

// 新增一项
export function onAddClick(newGroupId) {
  // 为新增物品类型赋值选项
  this.getTableSelectFieldDataSource(
    'FORM-A98628AA71774B7EA636E8CB875508DD24K3',
    'textField_lz87gtfq',
    {},
    'tableField_lz88ervv',
    'selectField_lz88ervw',
    [newGroupId]
  );
}

Item Name configuration [data linkage]]​

The following function is bound to subform onChange.FORM-C04CAE23888848A885997B5726AADF647LC9YesItem listThe form formUuid.

// 子表单 onChange
export function onTableChange({ value, extra }) {
  const { formGroupId, from, tableFieldId, fieldId, changes = {} } = extra || {};
  // 必须，避免使用 updateItemValue 更新子表数据后，再次触发 onChange 陷入死循环
  if (from === 'setItemValue') { return; };
  const tableField = this.$(tableFieldId); // 获取子表单定义
  if (fieldId && fieldId === 'selectField_lz88ervw') {
    // 当前 onChange 字段是物品类型时为物品名称赋值选项
    if (changes.value) {
      this.getTableSelectFieldDataSource(
        'FORM-43F11FA3281F485683EBBC684C658928O08P',
        'textField_lz87hsan',
        {
          selectField_lz87hsam: changes.value,
        },
        tableFieldId,
        'selectField_lz88ervx',
        [formGroupId]
      );
    } else {
      tableField.updateItemValue(formGroupId, {
        selectField_lz88ervx: '',
      }); // 清空选项值
      tableField.setComponentProps(formGroupId, 'selectField_lz88ervx', {
        dataSource: [],
      }); // 清空 dataSource
    }
  }
}

The item name onVisibleChange is bound to the following function and is compatible with editing on the details page.

// 下拉框是否显示（兼容详情页面编辑）
export function onVisibleChange(visible) {
  const { id } = this.item; // 获取当前行的行标识
  const type = this.$('selectField_lz88ervw').getValue(); // 获取物品类型的值
  const dataSource = this.$('selectField_lz88ervx').props.dataSource; // 获取当前下拉选项的选项
  if (visible && !this.utils.isSubmissionPage() && !_.isEmpty(type) && _.isEmpty(dataSource)) {
    // 弹层显示且详情页且物品类型不为空且当前下拉没有选项时请求选项，节省资源
    this.getTableSelectFieldDataSource(
      'FORM-C04CAE23888848A885997B5726AADF647LC9',
      'textField_lz87hsan',
      {
        selectField_lz87hsam: this.$('selectField_lz88ervw').getValue(),
      },
      'tableField_lz88ervv',
      'selectField_lz88ervx',
      [id]
    );
  }
}

Save page​

Try it online​

This doc is generated using machine translation. Any discrepancies or differences created in the translation are not binding and have no legal effect for compliance or enforcement purposes.
Copyright © 2024钉钉（中国）信息技术有限公司和／或其关联公司浙ICP备18037475号-4