表单子表视图的使用方法

表单子表视图的使用方法

作者:


视图就是过滤某些子表数据不显示

基于插件的实现

参考:apps/link/src/extensions/business/bizform/project/calendar/participant-item-view/

{
  "$scheme": "http://front.q7link.com:3000/json-schema/manifest.json",
  "name": "form.calendarEntry.participantItemView",
  "publisher": "wangshushuo",
  "version": "1.0.0",
  "activationEvents": ["Construct"],
  "dependencies": {
    "tableView": "*"
  },
  "contributes": {
    "tableView": [
      {
        "cp": "form.tableView.participants.display",
        "name": "form.calendarEntry.participantsView"
      }
    ]
  }
}

cp和name中的participants是子表字段名

import { IFormActiveContext } from '@q7/micro-form-base-app/biz-form/index';

export default {
  activate(ctx: IFormActiveContext) {
    ctx.tableView.enhance('form.calendarEntry.participantsView', (parent) => {
      return ctx.tableView.createFilterView({
        source: parent,
        filter: (item) => {
          return item.participantType?.id !== 'User'
        }
      });
    })
  }
}

旧的实现方案——DynamicView

  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。