前端渲染-原子表单

schema

在实际业务场景中，在原子主表中往往需要记录明细表的统计值，比如模块test-flow中的采购订单提供了两个字段：detailsCount和detailsAmount，分别记录了明细条数和总金额

因此，原子schema需要解决两个问题：

如何渲染明细表
如何实现明细统计值的动态同步更新

src/module/test-flow/backend/src/config/validation/schema/purchaseOrder.js

module.exports = app => {
  const moduleInfo = app.meta.mockUtil.parseInfoFromPackage(__dirname);
  const schemas = {};
  // purchase order
  schemas.purchaseOrder = {
    type: 'object',
    properties: {
      ...
      // Stats
      __groupStats: {
        ebType: 'group-flatten',
        ebTitle: 'Stats',
      },
      detailsCount: {
        type: 'number',
        ebType: 'detailsStat',
        ebTitle: 'Quantity',
        ebParams: {
          detailClass: {
            module: moduleInfo.relativeName,
            detailClassName: 'default',
          },
          expression: 'details.length',
        },
        ebReadOnly: true,
      },
      detailsAmount: {
        type: 'number',
        ebType: 'detailsStat',
        ebTitle: 'Amount',
        ebParams: {
          detailClass: {
            module: moduleInfo.relativeName,
            detailClassName: 'default',
          },
          expression: 'details.reduce(function(a,b){return a+b.amount;},0)',
        },
        ebAutoSubmit: true,
        ebCurrency: true,
        ebReadOnly: true,
      },
      // Details
      __groupDetails: {
        ebType: 'group-flatten',
        ebGroupWhole: true,
        ebParams: {
          titleHidden: true,
        },
      },
      details: {
        ebType: 'details',
        ebTitle: 'Details',
        ebParams: {
          detailClass: {
            module: moduleInfo.relativeName,
            detailClassName: 'default',
          },
        },
      },
    },
  };
  return schemas;
};

__groupStats：
- ebType：设为group-flatten，从而渲染一个分组
detailsCount：
- ebType：设为detailsStat，从而提供明细统计值的动态同步更新机制
- ebParams：与明细统计值相关的参数
  - detailClass：针对哪个明细类型
  - expression：动态表达式
- ebReadOnly：设为true，从而渲染为只读模式
detailsAmount：
- ebType：也设为detailsStat
- ebAutoSubmit：设为true，从而当这个值完成同步更新时，自动保存原子数据
- ebCurrency：设为true，从而渲染为货币格式（两位小数）
__groupDetails：
- ebType：设为group-flatten，从而渲染一个分组
- ebGroupWhole：设为true，从而使改组占据整行
- ebParams：
  - titleHidden：设为true，从而隐藏title。因为下面的details会渲染title
details：
- ebType：设为details，从而渲染明细表。自动实现自适应布局，默认情况下，mobile场景渲染成list，pc场景下渲染成table

schema

评论: