跳到主要内容

表单中子表单点击新增一项序号组件加一

1.使用场景

在某些特定的场景下,子表单内的序号不能直接使用,我们想要将子表单的序号填入到子表单内的组件后在其他的地方使用,比如业务关联规则或者是公式等,可以参考以下案例。

2. 实现功能

2.1 子表单序号生成函数

// 生成子表单序号
// tableFieldId:子表单组件唯一标识
// orderFieldId:序号字段唯一标识
// beforeText:序号前缀文案
// afterText:序号后缀文案
export function setOrderNum(tableFieldId, orderFieldId, beforeText = '', afterText = '') {
if (!tableFieldId || !orderFieldId) { return };
const tableField = this.$(tableFieldId);
const items = tableField.getItems();
items.forEach((item, index) => {
const updateObject = {};
updateObject[orderFieldId] = `${beforeText}${index + 1}${afterText}`;
tableField.updateItemValue(item, updateObject);
});
}

2.2 子表单 onChange 时调用该函数

已在子表单 onChange 中处理新增一项逻辑。

export function onTableChange({ value, extra }) {
const { formGroupId, from, changes = {}, tableFieldId } = extra || {};
// 必须,避免使用 updateItemValue 更新子表数据后,再次触发 onChange 陷入死循环
if (from === 'setItemValue' || from === 'form_change') { return };
this.setOrderNum('tableField_lblkphmo', 'textField_lblyqnvb'); // 普通序号
this.setOrderNum('tableField_lblkphmo', 'textField_lblyqnvc', '前文案-'); // 带前缀序号
this.setOrderNum('tableField_lblkphmo', 'textField_lblyqnvd', '', '-后文案'); // 带后缀序号
this.setOrderNum('tableField_lblkphmo', 'textField_lblyqnvg', '前文案-', '-后文案'); // 带前后缀序号
}

2.3 页面初始化 didMount 时调用该函数

// 当页面渲染完毕后马上调用下面的函数,这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
// 详情页不触发
if (!this.utils.isSubmissionPage()) { return };
this.setOrderNum('tableField_lblkphmo', 'textField_lblyqnvb'); // 普通序号
this.setOrderNum('tableField_lblkphmo', 'textField_lblyqnvc', '前文案-'); // 带前缀序号
this.setOrderNum('tableField_lblkphmo', 'textField_lblyqnvd', '', '-后文案'); // 带后缀序号
this.setOrderNum('tableField_lblkphmo', 'textField_lblyqnvg', '前文案-', '-后文案'); // 带前后缀序号
}

3. 实现效果

4. 在线试玩

Copyright © 2024钉钉(中国)信息技术有限公司和/或其关联公司浙ICP备18037475号-4