自定义页面提交子表单数据

最新推荐文章于 2024-01-30 21:58:21 发布

∂∂∂∂

最新推荐文章于 2024-01-30 21:58:21 发布

阅读量164

点赞数 3

文章标签：低代码

本文链接：https://blog.csdn.net/2301_80286061/article/details/135895028

版权

本文详细讲解了如何在Vue项目中设置数据源，绑定表单按钮，以及使用`onSaveData`和`tableToTable`函数实现子表单数据的提交与转换。

摘要由CSDN通过智能技术生成

自定义页面增加子表单组件

配置数据源

绑定按钮事件

编写代码实现效果

// 提交数据
export async function onSaveData() {
  const tableData = this.$('tableField_lboikgjj').getValue();
  if (tableData.length === 1 && (!tableData[0].textField_lboikgjl && !tableData[0].numberField_lboikgjm)) {
    this.utils.toast({
      title: '请至少输入一条数据',
      type: 'warring'
    });
    return;
  };
  const loading = this.utils.toast({
    title: '数据提交中...',
    type: 'loading'
  });
  this.$('button_lboilnqx').set('loading', true);
  await this.dataSourceMap.saveData.load({
    formUuid: 'FORM-D2B665D13MU56OUNA26OY50SUEMP3ATXEIOBL63',
    appType: window.pageConfig.appType,
    formDataJson: JSON.stringify({
      tableField_lboihyyq: this.tableToTable(tableData, [{
        target: 'textField_lboikgjl',
        current: 'textField_lboihyyr'
      }, {
        target: 'numberField_lboikgjm',
        current: 'numberField_lboihyys'
      }])
    })
  }).then(res => {
    loading();
    this.utils.toast({
      title: '数据提交成功',
      type: 'success'
    });
    this.$('button_lboilnqx').set('loading', false);
    this.$('tableField_lboikgjj').reset();
  }).catch(error => {
    loading();
    this.utils.toast({
      title: error.message,
      type: 'error'
    });
    this.$('button_lboilnqx').set('loading', false);
  });
}

// 子表单填充子表单，快速生成子表单数据
// tableData：目标子表单组件数据
// relation：字段映射关系 target：目标子表单字段唯一标识，current：当前子表单字段唯一标识
export function tableToTable(tableData = [], relation = []) {
  const result = []; // 数据处理结果
  if (!tableData.length || !relation.length) { return result };
  for (let i = 0; i < tableData.length; i++) {
    const itemObj = {};
    for (let j = 0; j < relation.length; j++) {
      itemObj[relation[j].current] = tableData[i][relation[j].target]
    };
    result.push(itemObj);
  };
  return result;
}