yyuap-template/README.md

template project which is based on tinper

## New Template

|参数|说明|类型|默认值|是否必须
|:---|:-----|:----|:------|:------|
|templateComponentName|模板显示位置的dom的id|String||是|
|url|模板服务地址|String|http://workbench.yyuap.com|否|
|nexuskey|模板的必要参数nexuskey|String||是|
|funcnode|模板的必要参数funcnode| String||是|
|templateType|模板的类型| String|空字符串|否|
|hideButton|隐藏表单的操作按钮| Boolean|false|否|
|onSave|点击保存按钮的回调函数|Function||是|
|onCancel|点击取消按钮的回调函数|Function||是|
|onDelete|点击取消按钮的回调函数|Function||是|
|onHeadFormDataChange|当主表发生变化时的回调函数| Function||是|
|onBodyFormDataChange|当子表发生变化时的回调函数| Function||是|
|handleComponentCallback|控件值发生变化时触发的回调函数|Function||是|

### 如何使用

* npm方式安装
```
    npm install yyuap-template
    注：如果采用es6的方式引入使用需要配置相应的css-loader等进行css样式的解析。
```
* 通过require或者script方式。可参考demo
```
    cdn地址: https://design.yonyoucloud.com/static/ui-templates/1.0.22/js/uiTemplate.js
```
```    
    需要引用build文件夹下面的uiTemplate.js
    <script type="text/javascript" src="https://design.yonyoucloud.com/static/ui-templates/1.0.22/js/uiTemplate.js"></script>
    此时会获得uiTempalte方法可直接实例化使用。
```

```
编写配置参数
const options = {
    // 模板生成dom的id
    templateComponentName : 'root',
    nexuskey : 'psn', // 实例模板
    funcnode : '001PSN_TEST', // 实例模板
    templateType:"hr",
    afterInit : function () {
        template.updateTemplateData()
    },
    // 保存的回调方法
    onSave : function (params) {
        console.log(params.rowData);
        params.doSave();
    },
    // 取消的回调方法
    onCancel : function (params) {
        params.doCancel();
    },
    // 删除行的回调方法
    onDelete : function (rowData) {
        console.log(rowData);
    },
    onHeadFormDataChange : function (headFormData) {
        console.log(headFormData);
    },
    onBodyFormDataChange : function (bodyFormData) {
        console.log(bodyFormData);
    },
    // 当输入控件的值发生改变时回调此方法来进行一些关联性的赋值操作
    handleComponentCallback : function (params) {
        if (params.itemCode === 'staff.staff_bankacc.bank') {
            params.setValue({itemCode:'staff.staff_bankacc.bankname',value:params.currentRef.id})
        }                                                   
        if (params.itemCode === 'adminorg.orgmgr') { // A控件改变B控件，同时通知改变C控件
            params.setValue({itemCode:'adminorg.branchleader',value:params.id,nextComponent:{itemCode:"adminorg.region",value:params.value}})
        }                                                   
        if (params.itemCode === 'adminorg.branchleader') {// B控件改变C控件
            params.setValue({itemCode:'adminorg.region',value:params.value.id})
        }                                                   
    }
}
// 初始化
var template = new uiTemplate(options);
// 开始创建
template.startCreate();
```
## 提供的API能力
```
在 new uiTempalte()之后会得到一个模板的实例化对象。这个实例带有如下方法：
```
```
1、updateTemplateData ---- 更新模板数据
2、setFormEdit ---- 设置表单为编辑状态 *(如果想在模板创建完成后立即设置为编辑状态，请放到afterInit方法中执行)*
3、setFormNotEdit ---- 设置表单为非编辑状态
4、saveForm ---- 获取保存数据(只有表单校验通过后返回json数据，否则页面会做出相应提示)
5、getTemplateInfo ---- 获取模板信息（返回json）
6、getValueByItemCode ---- 需要传入itemCode,根据itemCode返回value
7、setReferenceParamByItemCode ---- 运行时为参照控件追加参数（建议放到afterInit中执行设置）
8、resetForm ---- 将主表清空
9、setValueByItemCode ---- 根据itemCode为控件设置值
```