用宜搭关联多选表单填充子表单JS代码后,实际工作中存在下列问题 1.仓库在勾选清单进行入库操作后,通常是勾选一个清单,勾选的清单默认会带出应入库的数量,此时仓库修改本次要入库的数量,并且再次选择其他要入库的清单,并再次重复此操作,按照宜搭的代码,每次多选其他项时,修改的数量会被重置成应入库数量,无法满足实际工作中边进行清点边进行录单操作。如果要修改话,能实现吗,有没有大神懂得,原宜搭代码如下```js
export async function onAssociationFormChange({ value }) {
if (value.length) {
const batchFetchResult = []; // 请求结果
const failedInstId = []; // 请求失败的实例ID
const batchFetchLoading = this.utils.toast({
title: `处理中,请不要关闭浏览器,预计需要 ${value.length / 5} 秒`,
type: 'loading'
});
for (let i = 0; i < value.length; i++) {
const delay = i === 0 ? 0 : 200;
const formInstId = value[i].instanceId;
await new Promise((resolve => {
// 注意节流,每次请求间隔 200 ms
setTimeout(async () => {
await this.dataSourceMap.getDataById.load({
// 数据源参数
formInstId,
}).then(res => {
// 处理每次返回的结果
if (!res) { return };
batchFetchResult.push(res || {});
}).catch(error => {
// 处理错误,收集错误的实例ID
failedInstId.push(formInstId);
});
resolve();
}, delay);
}));
};
batchFetchLoading();
if (failedInstId.length > 0) {
let content = (
<div>
{failedInstId.map((instId) => {
return <p>{instId}</p>
})}
</div>
);
this.utils.dialog({
method: 'alert',
title: `处理完成,失败 ${failedInstId.length} 条`,
content,
onOk: () => { },
onCancel: () => { },
});
};
// 上述代码均不需要修改
// 下述代码按照实际情况修改字段映射即可
const tableData = batchFetchResult.map(item => {
const { formData = {} } = item;
return {
textField_l9pa49io: formData.textField_l9p9znox || '', // 付款说明
numberField_l9pa49ip: formData.numberField_l9p9znoy || 0 // 付款金额
}
});
this.$('tableField_l9pa49in').setValue(tableData);
} else {
// 初始化子表单
this.$('tableField_l9pa49in').setValue([]);
};
}
附上最后成功实现的代码:
const currentData = this.$('tableField_liyfl2t2').getValue();
const batchFetchLoading = this.utils.toast({
title: `处理中,请不要关闭浏览器,预计需要 ${Math.ceil(value.length / 5)} 秒`,
type: 'loading'
});
try {
const batchFetchResult = await Promise.all(
value.map(async (form) => {
const res = await this.dataSourceMap.getDataById.load({
formInstId: form.instanceId
});
return res || {};
})
);
batchFetchLoading();
const newData = batchFetchResult.map((item) => {
const { formData = {} } = item;
const existingData = currentData.find((data) => data && data._id === item.formInstId);
if (existingData) {
// 数据项已存在,不填充任何字段
return existingData;
} else {
// 数据项不存在,创建新行并填充所有字段
return {
_id: item.formInstId,
textField_liyfl2t6: formData.textField_lhyfrduh || '',
textField_liyfl2t3: formData.textField_lha93y6t || '',
textField_liyfl2t4: formData.textField_lha93y6u || '',
textField_liyfl2t5: formData.textField_lha93y6v || '',
numberField_liyfl2ta: formData.numberField_lha93y6y || 0,
numberField_liyfl2tb: (formData.numberField_lhabu22e || 0) * (formData.numberField_lha93y6y || 0),
numberField_liyfl2td: formData.numberField_lhbsvhio || 0,
numberField_liyfl2tc: (formData.numberField_lhbsvhio || 0) * (formData.numberField_lhabu22e || 0),
numberField_liyfl2t9: formData.numberField_lhabu22e || 0,
numberField_lj3luf14: formData.numberField_lhabu22e || 0,
textField_liyfl2t7: formData.textField_lgq6n9dz || '',
textField_liyibdac: formData.textField_lha93y6w || ''
};
}
});
this.$('tableField_liyfl2t2').setValue(newData);
} catch (error) {
batchFetchLoading();
this.utils.dialog({
method: 'alert',
title: '处理出错',
content: '请求关联数据失败。',
onOk: () => { },
onCancel: () => { }
});
}
}
在宜搭中,如果你在关联项多选填充子表单时修改了某行,并希望再次添加多选项时保持修改的数据行不被重置,可以通过以下步骤来实现:
在主表单中,创建一个数据变量(Variable)来存储已修改的数据行。你可以将该变量设置为表格的数据源,用于保存用户修改的数据。
设置关联项多选(Association Multi-Select)组件的事件触发器,在用户选择关联项后触发更新数据行的操作。
在事件触发器中,获取用户选择的关联项,并将其与已修改的数据行进行比对。如果已修改的数据行已存在于数据变量中,则不进行重置;否则,将新的数据行添加到数据变量中。
下面是一个示例步骤:
在主表单中创建一个数据变量,例如 selectedRows
,用于存储已修改的数据行。
设置关联项多选组件的事件触发器,例如 onValueChanged
,在用户选择关联项后触发。
在事件触发器中,使用 JavaScript 代码获取用户选择的关联项和已修改的数据行:
// 获取当前选择的关联项
var selectedOptions = this.value;
// 获取已修改的数据行
var modifiedRows = form.getData('selectedRows') || [];
// 检查当前选择的关联项是否已存在于已修改的数据行中
var isExistingRow = modifiedRows.some(function(row) {
return row.id === selectedOptions.id; // 假设数据行的唯一标识为 id
});
// 如果已存在,则不进行重置;否则,将新的数据行添加到已修改的数据行中
if (!isExistingRow) {
modifiedRows.push(selectedOptions);
}
// 更新数据变量
form.setData('selectedRows', modifiedRows);
通过上述步骤,你可以在关联项多选填充子表单时保持已修改的数据行不被重置。
根据您的描述,现有的宜搭代码无法满足实际工作需求,因为每次勾选其他项时,修改的数量会被重置成应入库数量。为了解决这个问题,您可以尝试进行以下修改:
在勾选清单时,将应入库的数量存储为一个变量,而不是直接在表单中显示。 在每次选择其他要入库的清单时,先获取当前已输入的数量,然后将其设置为上一次选择的数量。 当再次修改本次要入库的数量时,更新存储的变量,并将其显示在表单中。 这样,无论选择多少次其他项,都可以保留上一次输入的数量。
以下是一个示例代码片段,演示了上述修改的思路:
// 存储应入库的数量 var defaultQuantity = 0;
// 监听选择清单的事件 $('#clearance-list').on('change', function() { var selectedQuantity = parseInt($(this).val()); // 获取当前选择的数量
// 如果输入框中没有值,则设置为上一次选择的数量 if ($('#quantity-input').val() === '') { $('#quantity-input').val(defaultQuantity); }
// 更新应入库的数量 defaultQuantity = selectedQuantity; }); 请注意,这只是一个示例代码片段,并不能直接适用于您现有的代码环境。您需要根据自己的实际情况进行调整和集成。如果您对宜搭代码的修改有任何疑问,建议咨询宜搭开发人员或寻求专业的开发支持。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。