单表单
<h1>单表单</h1>
<p>单表单就是我们常见提交数据的form表单，属性与element-UI的el-form属性大多数保持一致
<center><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=bf25712b05ca0b03549180b4c4125219&amp;file=file.png" alt="" /></center></p>
<h3>表单配置</h3>
<table>
<thead>
<tr>
<th>功能</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>表单项标题宽度</td>
<td>element-ui一致</td>
</tr>
<tr>
<td>表单项标题位置</td>
<td>element-ui一致</td>
</tr>
<tr>
<td>表单标题</td>
<td>表单的标题，在表单的左上角显示</td>
</tr>
<tr>
<td>只读表单</td>
<td>当选择为是后，表单项之间的距离会变窄，并且拖拽模型属性进入画布后，都只会展示为只读项</td>
</tr>
<tr>
<td>只读表单</td>
<td>当选择为是后，表单项之间的距离会变窄，并且拖拽模型属性进入画布后，都只会展示为只读项</td>
</tr>
<tr>
<td>功能权限</td>
<td>表单的展示权限</td>
</tr>
</tbody>
</table>
<hr />
<p>在dee配置单表单的画布中，表单由两部分组成：表单项和按钮</p>
<h4>表单项</h4>
<p><strong> 表单项插入有两种形式：
形式一：在左侧模型属性库中将要配置的属性直接拖入画布画布区域中，系统会根据属性的数据类型渲染为对应的表单类型，比如：字典类型会默认渲染为下拉框，字符串默认为输入框
形式二：在左侧组件库中直接选择组件拖拽进入画布区域中，会渲染出当前组件，然后在右侧组件设置页签下设置当前的表单项的标题和属性即可</strong></p>
<h4>表单项的分组</h4>
<p>在表单中，当提交的数据较多时，我们会将功能类型的表单进行分组，如文档新建时，我们会将文档基本属性都放在基本信息模块下
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=d23d36e9fc5105ae6accfb3bec58ef4a&amp;file=file.png" alt="" /></p>
<hr />
<p>在表单中创建一个分组，我们只需要在左侧组件库的基础组件库中的分组组件拖入画布中即可
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=9d7effbd011c7139f91fe24b314eca16&amp;file=file.png" alt="" />
选中分组，分组有以下几个属性可以配置：</p>
<table>
<thead>
<tr>
<th>功能</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>标题</td>
<td>分组右上角显示的标题</td>
</tr>
<tr>
<td>列数</td>
<td>分组是栅栏布局，默认为三列，里边的表单项默认会占一列，如果需要调整表单项宽度，可以选中表单项进行调整</td>
</tr>
<tr>
<td>是否动态控制分组内元素</td>
<td>当勾选为true后，可以通过代码来控制该分组下的表单项</td>
</tr>
<tr>
<td>是否发起后台请求</td>
<td>当配置为true，需要配置请求接口的配置</td>
</tr>
<tr>
<td>控制方法</td>
<td>在里面编写代码，返回需要展示组件的key值，key值即为表单项的绑定属性</td>
</tr>
</tbody>
</table>
<h6>控制方法示例</h6>
<p>我们在返回值只返回了上下文的键值，所以其他的属性就不会显示
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=db3cbafc9b664e3d740f04f4f5b0c0a0&amp;file=file.png" alt="" /></p>
<h4>表单项的配置</h4>
<p>选中表单项，在右侧组件设置页签下可以配置表单项的属性</p>
<table>
<thead>
<tr>
<th>功能</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>标题</td>
<td>表单项的标题</td>
</tr>
<tr>
<td>绑定属性</td>
<td>表单项的键值</td>
</tr>
<tr>
<td>默认值类型</td>
<td>需要给当前属性配置默认值时，首先需要选择当前属性的数据类型</td>
</tr>
<tr>
<td>隐藏表达式</td>
<td>当前表单式为真时，隐藏当前表单项：例如： this.form.name === 'a'</td>
</tr>
<tr>
<td>禁用表单式</td>
<td>当前表单式为真时，禁用当前表单项：例如： this.form.name === 'a'</td>
</tr>
<tr>
<td>说明</td>
<td>输入后标题后会有一个感叹号，鼠标悬浮展示说明</td>
</tr>
<tr>
<td>控件配置</td>
<td>可以配置针对当前控件的属性</td>
</tr>
</tbody>
</table>
<p>隐藏表达式和禁用表达式功能案例展示：
给上下文配置隐藏表达式：this.form.name === 'a' ，密级配置禁用表达式:this.form.name === 'a'，当我们给名称输入框输入a时，上下文表单项隐藏，密级表单项禁止输入了
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=3f731eae8f66a5a8dfe0a15cc196a956&amp;file=file.png" alt="" /></p>
<h4>按钮配置</h4>
<p>表单默认有完成和取消两个按钮，也可以点击添加项添加按钮
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=6aec4736fe8c702e079e534e72e9354a&amp;file=file.png" alt="" /></p>
<h6>按钮属性配置</h6>
<p><center><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=752b0b2bc5c0093bbf1cac2d8fb4d76d&amp;file=file.png" alt="" /></center></p>
<p>**- 图标：配置的图标，当按钮的位置在右上位置显示时，按钮将以工具栏的形式展示，按钮将以图标的形式展示</p>
<ul>
<li>表单事件：表单的事件提供能两种默认事件，提交和取消
当选择为提交时，表单会为该按钮提供必填校验，如果你通过渲染组件dee-as-com去装配该表单组件，可以通过 @on-submit 来监听该事件
当选择为取消时，表单不会为该按钮提供必填校验，但是会触发清空当前表单的操作，如果你通过渲染组件dee-as-com去装配该表单组件，可以通过 @on-cancel 来监听该事件
你也可以输入自定义的事件名称，比如：selfEvent,输入后按钮配置多出<strong>是否触发表单验证</strong>，勾选后该按钮点击触发表单验证，如果你通过渲染组件dee-as-com去装配该表单组件，可以通过 @on-selfEvent 来监听该事件
例子🌰：配置自定义按钮，事件名为selfEvent,是否触发表单验证勾选，预览之后点击自定义按钮触发表单验证<strong>
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=a95993ad3e62a3c18a608b552824eaca&amp;file=file.png" alt="" />
</strong>渲染组件dee-as-com去装配该表单组件代码演示**
<pre><code class="language-javascript">&lt;dee-as-com
:lay-config=&quot;{
typeName: 组件对应的模型,
layKey: 组件的编号
}&quot;
:form=&quot;form&quot;
@on-selfEvent=&quot;selfEvent&quot;
/&gt;</code></pre></li>
<li><strong>点击事件出发后：可以在代码编辑器输入自定义代码，currentObject为当前表单提交的数据，你也可以操作该对象。currentComponent为当前的组件对象，就是当前vue组件的this，你能获取当前组件的所有属性，也可以调用其中的方法</strong>
例子🌰：<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=475a152f0e35023afb70a4e4b6f9903c&amp;file=file.png" alt="" /></li>
<li>业务类型：目前我们提供了四种选项，默认添加、默认编辑、自定义提交数据、关联组件
<strong> 默认添加：默认添加不会为提交的数据进行任何操作，直接调用当前组件对应模型的深度保存接口</strong>
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=371a532194f59e4cc4cbefb95dea8ff9&amp;file=file.png" alt="" />
<strong> 默认编辑：默认编辑不会为提交的数据添加operator: "MODIFY"，然后调用当前组件对应模型的深度保存接口</strong>
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=a91a6916fbccdff1fbfc58dd32413e51&amp;file=file.png" alt="" />
自定义提交数据：可以配置请求的url和请求方式
<strong>请求的url可以包含变量，变量用{{}}，如你提交的数据为：{a:1，b:2},配置的url为 /add/{{a}}/{{b}},则最后提交的url为 add/1/2</strong>
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=f1e71dcafbdb6878c091d95794d0d743&amp;file=file.png" alt="" />
参数设置可以在<strong>点击事件触发后</strong>中进行修改
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=265882fff8deae461c78c07e7b2131b6&amp;file=file.png" alt="" />
关联组件：当点击该按钮不需要提交数据，而是要连接到其他展示信息，这个在只读表单中比较常见
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=738d1d3008bbcec7a32a7b02af490467&amp;file=file.png" alt="" /></li>
<li>提交完成动作：当通过通用页面只加载这一个组件的时候，就会触发该配置</li>
<li>完成发布事件名称：当完成数据提交之后，你还要触发和当前组件在同一个页面的其他组件的事件，你可以在其他组件内通过 this.$bus.$on("完成发布事件名称", () => {})来监听完成动作</li>
</ul>