### 说明

常规方法就是后端写好接口，前端表单可以直接在init的时候，发起一个请求到后端，后端处理后将结果
返回给前端。下面讲述的是另一种方法：

前端表单打开的时候，都会调用模块`/base/base-ui/base-ui-service`的
`/api/ui/customize/init`接口获取自定义表单UI配置。

借此接口，该模块开放了视图监听接口`com.usoftchina.saas.ui.api.ViewListener`，
其他模块可以实现该接口，该接口会自动调用，返回的数据放在`viewModel`

```
// 后端封装的地方
@GetMapping("/init")
public Result onViewInit(@RequestParam("name") String name, String bizType) {
    List<Config> configs = configService.getConfig(name);
    // 扩展视图初始化参数
    View view = uiListenerFactory.initView(name, bizType);
    return Result.success(new ModelMap("metadata", configs).addAttribute("viewModel", view.getViewModel().getData()));
}
```

```
// 前端封装的地方
initView: function (view) {
    let me = this,
        url = me.getInitUrl;
    return Ext.Ajax.promise({
        url,
        params: {
            name: view.viewName,
            bizType: view.caller
        },
        async: true
    }).then(function (res) {
            let cfg = me.decodeViewConfig(res.data.metadata);
            // 扩展视图初始化参数
            me.mergeViewModel(view, res.data.viewModel);
            return cfg;
        })
        .catch(function (e) {
            saas.util.BaseUtil.showErrorToast('读取界面配置失败：' + e.message);
            return null;
        });
},

mergeViewModel: function(view, data) {
    if (data) {
        var vm = view.getViewModel();
        Ext.Object.each(data, function (key, value) {
            vm.set(key, value);
        });
    }
}
```

### 案例一

> 给配置了审批流程的表单，设置显示“提交”按钮

扩展模块在`/base/base-process/base-process`，
代码在`com.usoftchina.saas.process.listener.ProcessViewListener.onViewInit`，
通过查找审批规则表，设置该视图是否需要显示“提交”按钮

```
@Override
public void onViewInit(View view) {
    if (!StringUtils.isEmpty(view.getBizType())) {
        ProcessRule rule = processRuleService.findByBizType(view.getBizType(), BaseContextHolder.getCompanyId());
        // 显示提交流程按钮
        view.getViewModel().set("showSubmitBtn", null != rule && rule.wasEnabled());
    }
}
```

相对常规方法而言，这样做会简单很多