表单面板布局
表单设计器分为四部分，最上方为两种表单模式及按钮操作区。头部表单模式用于切换表单模式，设计模式可以通过拖拉拽实现组件的创建，也可以切换到开发模式进行代码开发，头部的按钮区域包括AI助手、从模板导入、预览、逻辑控制配置、属性、保存、清空和关闭按钮。左侧组件区域可以点击或拖拽添加组件到表单画布区域或底部按钮区域。右侧为点击组件的属性，如组件类型、字段名、标签宽度等。表单画布区域和底部按钮区域为拖拽生成的表单和按钮。
表单配置
打开表单此时表单的画布区域和底部按钮区域会自动添加上场景需要的公共字段。左侧组件区域中业务组件的公共组件为创建时自带的组件，如意外删除可以重新添加。
左侧组件区域切换为业务组件，此时会显示在模型设计中创建的数据模型字段。用户可以点击或拖拽指定的组件到表单画布区域，添加组件。如果需要切换类型，调整字段名等可以在右侧属性区域进行设置。如果需要一次性导入多个模型字段可以点击左侧模型右上角的“一键导入”，会自动导入该模型下所有字段。
用户可以从左侧组件区域的基本组件中找到需要的组件进行排版，拖入表单区域后依旧可以通过右侧的数据模型、属性名称添加上模型字段。
按钮配置
按钮组件位于左侧组件属性中业务组件的最下方，点击或拖拽到底部按钮区域即可。
逻辑控制配置
当需要对组件的状态进行控制时，可以使用逻辑控制进行设置。点击头部按钮区域的逻辑配置按钮，在打开的逻辑配置弹窗中进行编辑。<br /><br />选择目标组件为“备注”，状态为“显示”，点击条件配置设置它的控制条件，如当“是否隐藏”组件的值等于1也就是“是”的时候条件成立。如果需要更多控制条件可以点击条件选择增加。设置完成后点击确定即可，仅预览下生效。<br /><br />配置完成后可点击预览查看表单。
开发模式
当需要配置更复杂的功能和样式时可以从开发模式进行编辑。打开开发模式可以看到组件已经全部转为Vue代码。左上角将代码分为了template，script、css三部分。点击右侧的预览按钮可以查看配置的表单详情。
其中template也就是html代码片段不允许编辑。可以看到在html中已将所有组件的相关方法写出，用户只需要在script对指定函数的内容进行修改即可。如果需要修改样式也可切换到css部分，在底部添加相关样式即可。
属性配置
点击头部按钮区域的“属性”按钮，在打开的弹窗中可以对表单属性进行配置，其中表单名称和表单编码在修改表单时展示。
确认表单创建完成即可点击头部按钮区域的保存按钮，此时会弹出表单属性的弹窗，输入表单名称和描述后点击保存即可。
AI助手
表单还具备AI图片识别功能，点击头部按钮区域的AI助手，在弹窗中点击OCR图片表单识别后，点击截图进行上传表单图片。
此时会回显上传的内容，点击右下角“一键生成表单”后，将在表单最下方生成AI识别的组件。
从模板导入
点击头部按钮区域的从模板导入手，在弹出的侧边栏中点击需要的模板，将可以看到该模板的内容。
预览后点击右下角的“一键使用”后，将在表单最下方生成从模板导入的组件。
若有收获，就点个赞吧
0 人点赞
