yyuap-template

1.2.6 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i yyuap-template

Weekly Downloads

12

Version

1.2.6

License

MIT

Unpacked Size

1.55 MB

Total Files

67

Last publish

Collaborators

  • litongf
  • zhouleim