开发者社区> 问答> 正文

宜搭如何实现关联项多选填充子表单时,修改了某行,再次添加多选项时,修改的数据行不被重置

用宜搭关联多选表单填充子表单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([]);
  };
}

展开
收起
游客4zbhbvwug7seq 2023-06-26 13:09:34 314 0
3 条回答
写回答
取消 提交回答
  • 附上最后成功实现的代码:

      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: () => { }
        });
      }
    }
    
    2023-06-27 21:02:55
    赞同 展开评论 打赏
  • 在宜搭中,如果你在关联项多选填充子表单时修改了某行,并希望再次添加多选项时保持修改的数据行不被重置,可以通过以下步骤来实现:

    1. 在主表单中,创建一个数据变量(Variable)来存储已修改的数据行。你可以将该变量设置为表格的数据源,用于保存用户修改的数据。

    2. 设置关联项多选(Association Multi-Select)组件的事件触发器,在用户选择关联项后触发更新数据行的操作。

    3. 在事件触发器中,获取用户选择的关联项,并将其与已修改的数据行进行比对。如果已修改的数据行已存在于数据变量中,则不进行重置;否则,将新的数据行添加到数据变量中。

    下面是一个示例步骤:

    1. 在主表单中创建一个数据变量,例如 selectedRows,用于存储已修改的数据行。

    2. 设置关联项多选组件的事件触发器,例如 onValueChanged,在用户选择关联项后触发。

    3. 在事件触发器中,使用 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);
    

    通过上述步骤,你可以在关联项多选填充子表单时保持已修改的数据行不被重置。

    2023-06-27 10:23:44
    赞同 1 展开评论 打赏
  • 值得去的地方都没有捷径

    根据您的描述,现有的宜搭代码无法满足实际工作需求,因为每次勾选其他项时,修改的数量会被重置成应入库数量。为了解决这个问题,您可以尝试进行以下修改:

    在勾选清单时,将应入库的数量存储为一个变量,而不是直接在表单中显示。 在每次选择其他要入库的清单时,先获取当前已输入的数量,然后将其设置为上一次选择的数量。 当再次修改本次要入库的数量时,更新存储的变量,并将其显示在表单中。 这样,无论选择多少次其他项,都可以保留上一次输入的数量。

    以下是一个示例代码片段,演示了上述修改的思路:

    // 存储应入库的数量 var defaultQuantity = 0;

    // 监听选择清单的事件 $('#clearance-list').on('change', function() { var selectedQuantity = parseInt($(this).val()); // 获取当前选择的数量

    // 如果输入框中没有值,则设置为上一次选择的数量 if ($('#quantity-input').val() === '') { $('#quantity-input').val(defaultQuantity); }

    // 更新应入库的数量 defaultQuantity = selectedQuantity; }); 请注意,这只是一个示例代码片段,并不能直接适用于您现有的代码环境。您需要根据自己的实际情况进行调整和集成。如果您对宜搭代码的修改有任何疑问,建议咨询宜搭开发人员或寻求专业的开发支持。

    2023-06-26 14:03:55
    赞同 1 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
宜搭 - 企业智能化应用搭建平台 立即下载
《云市场-宜搭解决方案》 立即下载
《宜搭开发手册》 立即下载