脚本

表单设计器脚本在系统模块设计时参考Vue的Mixin 机制。当表单被渲染后，前端会将表单的脚本内容作为一个Mixin混入到当前的页面中。

这也就意味着，在页面的生命周期、prop、data、computed、watch、methods都可以被Vue托管。

特别说明

• 生命周期执行

  由于设计的表单会将脚本内容以Mixin方式引入表单组件，所以脚本生命周期函数会优先 于表单组件的生命周期执行，若期望在表单组件生命周期触发后执行逻辑，需要通过setTimeout包裹需要执行的逻辑来实现。

• 脚本语法标准

  脚本Mixin过程中是将脚本原封不动的形式引入到表单组件，此过程不会有语法标准转换过程；如果遇到兼容性问题，需要考虑在脚本内使用ES5语法编写，以获得更高的兼容性

页面声明周期

设计者可以在生命周期中的不同阶段执行一些特定的业务逻辑

完整示例

{
    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', this.form);
            }, 'name');
            // 指定监听页面对话框(dialog_e2duygzp)点击取消时间
            that.onceEvent('onDialogCancel', function (data) {
                console.log('onDialogCancel', data);
                that.dialogClose('dialog_e2duygzp');
            }, 'dialog_e2duygzp');
        }
    }
}