Yyuap-template NPM

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为控件设置值

yyuap template