Wondering what’s next for npm?Check out our public roadmap! »

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

    Install

    npm i yyuap-template

    DownloadsWeekly Downloads

    88

    Version

    1.2.6

    License

    MIT

    Unpacked Size

    1.55 MB

    Total Files

    67

    Last publish

    Collaborators

    • avatar
    • avatar