方法(methods)

设计者可以在脚本中按照Vue的方法 使用方式，执行个性化的业务逻辑。如：监听数据变化后，通过方法计算页面数据或者调用自动化等。

内置变量

表单数据 (form)

如设计的表单中包含标识符为(name)的单行文本

// 获取表单字段(name)数据
console.log(this.form.name);
// 设置表单字段(name)数据
this.form.name = '张三';

informat

全局可用对象informat。页面加载完成后，平台会在window对象上绑定informat对象 ，设计者可使用informat调用客户端脚本提供的功能函数

内置函数

submitForm

提交表单

this.submitForm(isValidate);

参数	类型	描述
isValidate	boolean	提交表单时是否校验表单,isValidate不传递时默认值为true

// 提交表单前校验表单
this.submitForm(true).then(() => {
    console.log('submitForm fired');
});

// 提交表单不校验表单
this.submitForm(false).then(() => {
    console.log('submitForm fired');
});

reset

重置表单(reset)

this.reset().then(() => {
    console.log('reset form');
});

getData

获取表单数据

this.getData(isValidate)

参数	类型	描述
isValidate	boolean	获取表单数据时是否校验表单,isValidate不传递时默认值为true

this.getData(true).then((formData) => {
    console.log(formData);
})

validate

校验表单数据

this.validate(fields);

参数	类型	描述
fields	String、Array<String>	校验表单的字段标识符,fields不传递时则会校验整个表单的所有字段

// 单字段校验
this.validate('name').then(function () {
    console.log('validate success');
}).catch(function (error) {
    console.log('validate error', error);
});

// 多字段校验
this.validate(['name', 'sex']).then(function () {
    console.log('validate success');
}).catch(function (error) {
    console.log('validate error', error);
});

// 校验整个表单
this.validate().then(() => {
    console.log('validate success');
}).catch(function (error) {
    console.log('validate error', error);
});

display

设置表单字段展示

this.display(fields);

参数	类型	描述
fields	String、Array<String>	展示的字段标识符集合

// 设置标识符为name的字段展示
this.display('name').then(() => {
    console.log('display execute');
}).catch(function (error) {
    console.log('display execute error', error);
});

// 设置标识符为name和sex的字段展示
this.display(['name', 'sex']).then(() => {
    console.log('display execute');
}).catch(function (error) {
    console.log('display execute error', error);
});

hide

设置表单字段隐藏

this.hide(fields);

参数	类型	描述
fields	String、Array<String>	展示的字段标识符集合

// 设置标识符为name的字段隐藏
this.hide('name').then(function () {
    console.log('hide execute');
}).catch(function (error) {
    console.log('hide execute error', error);
});

// 设置标识符为name和sex的字段隐藏
this.hide(['name', 'sex']).then(function () {
    console.log('hide execute');
}).catch(function (error) {
    console.log('hide execute error', error);
});

disabled

设置字段禁用状态

this.disabled('name', true); // 设置标识符为name的字段禁用

参数	类型	描述
fields	String、Array<String>	展示的字段标识符集合
disabled	Boolean	是否禁用字段。可选参数,不传递则默认为true

// 设置标识符为name的字段禁用
this.disabled('name', true).then(function () {
    console.log('disabled execute');
}).catch(function (error) {
    console.log('disabled execute error', error);
});

// 设置标识符为name和sex的字段禁用
this.disabled(['name', 'sex'], true).then(function () {
    console.log('disabled execute');
}).catch(function (error) {
    console.log('disabled execute error', error);
});

// 设置标识符为name的字段启用
this.disabled('name', false).then(function () {
    console.log('disabled execute');
}).catch(function (error) {
    console.log('disabled execute error', error);
});

// 设置标识符为name和sex的字段启用
this.disabled(['name', 'sex'], false).then(function () {
    console.log('disabled execute');
}).catch(function (error) {
    console.log('disabled execute error', error);
});

dialogOpen

打开对话框

this.dialogOpen(dialogMode);

参数	类型	描述
dialogMode	String	对话框标识符

// 打开标识符为dialogSubForm的对话框
this.dialogOpen('dialogSubForm').then(function () {
    console.log('dialogOpen execute');
}).catch(function (error) {
    console.log('dialogOpen execute error', error);
});

dialogClose

关闭对话框

this.dialogClose(dialogMode);

参数	类型	描述
dialogMode	String	对话框标识符

// 关闭标识符为dialogSubForm的对话框
this.dialogClose('dialogSubForm').then(function () {
    console.log('dialogClose execute');
}).catch(function (error) {
    console.log('dialogClose execute error', error);
});

onEvent

添加监听事件

this.onEvent(eventType, handler, field);

参数	类型	描述
eventType	String	监听的事件类型
handler	Function	监听的处理方法
field	String	监听的事件触发来源字段标识符，不传递则监听表单中该类型的所有事件

// 全局监听页面字段数据变化
this.onEvent('onChange', function (data) {
    console.log('onChange', data);
}).then(function () {
    console.log('onEvent execute');
}).catch(function (error) {
    console.log('onEvent execute error', error);
});

// 指定监听页面字段(name)数据变化
this.onEvent('onChange', function (data) {
    console.log('onNameChange', data);
}, 'name').then(function () {
    console.log('onEvent execute');
}).catch(function (error) {
    console.log('onEvent execute error', error);
});

onceEvent

添加单次监听事件

this.onceEvent(eventType, handler, field);

参数	类型	描述
eventType	String	监听的事件类型
handler	Function	监听的处理方法
field	String	监听的事件触发来源字段标识符，不传递则监听表单中该类型的所有事件

// 指定监听页面所有字段数据变化
this.onceEvent('onChange', function (data) {
    console.log('onNameChange', data);
}).then(function () {
    console.log('onceEvent execute');
}).catch(function (error) {
    console.log('onceEvent execute error', error);
});

// 指定监听页面字段(name)数据变化
this.onceEvent('onChange', function (data) {
    console.log('onNameChange', data);
}, 'name').then(function () {
    console.log('onceEvent execute');
}).catch(function (error) {
    console.log('onceEvent execute error', error);
});

offEvent

移除监听事件

this.offEvent(eventType, handler, field);

参数	类型	描述
eventType	String	监听的事件类型
handler	Function	监听的处理方法，不传递则移除该事件类型下的所有监听
field	String	监听的事件触发来源字段标识符，不传递则移除所有该事件类型的监听

// 移除全局监听页面字段数据变化
this.offEvent('onChange', function (data) {
    console.log('onChange', data);
}).then(function () {
    console.log('offEvent execute');
});

// 移除指定监听页面字段(name)数据变化
this.offEvent('onChange', function (data) {
    console.log('onNameChange', data);
}, 'name').then(function () {
    console.log('offEvent execute');
});

完整示例

{
    props: {
        // 定义页面属性
        uname:{
            type:String;
        }
    },
    data: function () {
        return {
            // 定义下拉框的可选数据项列表
            sexList: [
                {
                    key: 'f',
                    label: '男'
                },
                {
                    key: 'm',
                    label: '女'
                }
            ]
        };
    },
    // 页面组件创建实例时
    created: function () {

    },
    // 页面挂载完成后执行业务逻辑
    mounted: function () {
        var that = this;
        setTimeout(function () {
            that.setup();
        }, 0);
    },
    // 页面组件销毁前
    beforeDestroy: function () {

    },
    methods: {
        // 页面挂载完成后执行自定义处理
        setup: function () {
            var that = this;
            // 输出上下文的属性
            console.log(this.uname);
            // 设置当前表单字段(name)的数据
            that.form.name = '张三';
            // 调用脚本绑定的API函数
            informat.system.getToken().then(res => {
                console.log(res);
            });
            // 全局监听页面字段数据变化
            that.onEvent('onChange', function (data) {
                console.log('onChange', data);
            });
            // 监听页面按钮(buttonSubmit)点击事件
            that.onEvent('onClick', function (data) {
                that.getData(true).then((res) => {
                    informat.app.callAutomatic({
                        automaticId: 'formdesignerInvoker',
                        args: [res]
                    });
                    // console.log('onClick.getData',res);
                });
            }, 'buttonSubmit');
            // 监听页面按钮(buttonAdd)点击事件后，弹出对话框(dialog_e2duygzp)
            that.onEvent('onClick', function (data) {
                that.dialogOpen('dialog_e2duygzp');
            }, 'buttonAdd');
            // 监听页面按钮(buttonCancel)点击事件后，重置表单
            that.onEvent('onClick', function (data) {
                that.reset();
            }, 'buttonCancel');
            // 指定监听页面字段(name)数据变化
            that.onceEvent('onChange', function (data) {
                console.log('onNameChange', data);
                // 获取当前全部的表单数据
                console.log('onNameChange.form', that.form);
            }, 'name');
            // 指定监听页面对话框(dialog_e2duygzp)点击取消时间
            that.onceEvent('onDialogCancel', function (data) {
                console.log('onDialogCancel', data);
                that.dialogClose('dialog_e2duygzp');
            }, 'dialog_e2duygzp');
        }
    }
}