表单子表视图的使用方法

表单子表视图的使用方法

作者:


  1. 主表在formPresenter的getDataOptions中声明给哪个子表设置视图
getDataOptions(): DataOptions {
  return {
    dynamicViews: {
      [F_BudgetAccount_refDocMappings(子表名字)]: 'viewName(视图名字)',
    },
  };
}

  1. 子表presenter,需要做下面几件事
// 视图的数据
private viewData = observable.array([]);

// 查看态,渲染视图
onFormViewed(form: EntityForm<any>, disposers: IDisposer[]) {
  this.addView(disposers)
}

// 编辑态,渲染视图
onFormCreated(form: EntityForm<any>, disposers: IDisposer[]) {
  this.addView(disposers)
}

addView = (disposers) => {
  this.formPresenter.formController.addDynamicView(
    this.logicPath,
    'viewName',
    this.viewData,
  )

  disposers.push(
    // 监听子表的数据变化
    reaction(
      () => {
        return this.form.select(this.logicPath).value.slice();
      },
      this.updateData,
      { fireImmediately: true },
    ),
  );
}

// 将子表数据进行处理后赋值给视图数据
updateData = () => {
  const data = this.form.select(this.logicPath).value
  this.viewData.replace(data.filter());
}

注意事项

  1. this.viewData.replace()这里要求参数是js原生数据类型,不能是observable。