页面介绍

表单设计器

1、操作区域

关联数据表

设置表单中引用的数据表，关联后可拖拽数据表字段到表单面板，也可通过表单编辑弹窗修改所关联的数据表。

终端适配

设计者可以通过切换Pc、 Pad、 Mobile,预览在不同类型设备上表单的展示情况

撤销&重做

设计器提供撤销重做操作，防止自己操作出错后导致无法回退。

脚本

支持设计者编写与表单的数据交互的脚本，可以通过该方式实现个性化的业务逻辑

  {
    props: {
        uname:{
            type:String
        }
    }
,
    data: function () {
        return {}
    }
,
    created: function () {

    }
,
    mounted: function () {
        setTimeout(function ()˘{
            this.setup();
        }
    ,
        0
    )
        ;
    }
,
    beforeDestroy: function () {

    }
,
    methods: {
        setup: function () {
            console.log(this.uname);
            informat.system.getToken().then(res => {
                console.log(res);
            });
            this.onEvent('onChange', function (data) {
                console.log('onChange', data);
            });
            this.onEvent('onClick', function (data) {
                // this.getData(true).then((res)=>{
                //     this.client.callAutomatic({
                //         automaticId:'formdesignerInvoker',
                //         args:[res]
                //     })
                //     // console.log('onClick.getData',res);
                // });
                this.submitForm(true);
            }, 'buttonSubmit');
            this.onEvent('onClick', function (data) {
                this.reset();
            }, 'buttonCancel');

            this.onceEvent('onChange', function (data) {
                console.log('onNameChange', data);
            }, 'name');
        }
    }
}

样式

采用样式覆盖的方式来实现，通过添加类名定义，用新的样式覆盖原有的样式，可以通过该方式灵活实现

.form-border {
    background: #f6f7f9;
    border: solid 1px rgb(63, 94, 251);
    border-radius: 8px;
}

预览

预览可以查看设计的表单页面，并且可以通过该功能查看验证、获取表单数据等效果。

2、字段面板

展示表单设计器可以通过 拖拽/单击 来操作的字段，并根据字段功能的不同分别整合为 布局字段、容器字段、基础字段、高级字段、自定义字段。

3、表单画布

可对表单字段进行拖拽调整位置、复制、删除等操作。

4、字段属性面板

对表单字段的属性、样式、事件进行配置，可参考字段使用说明。

5、大纲树面板

展示当前表单的结构树（字段类型、字段标识）。

6、表单属性面板

配置表单的属性、自定义样式等。

表单宽度

设置的表单展示宽度，尺寸单位范围可参考

标签

组件尺寸

表单字段样式