自定义表单配置规范
<p>[TOC]</p>
<h3>按钮摆放置</h3>
<hr />
<h4>一.创建工具栏</h4>
<p>首先，我们建议将按钮组单独放置在页面的工具栏(<code>toolbar</code>)中。</p>
<h4>二.插入样式容器</h4>
<p>接下来，在工具栏中插入布局容器，如 <code>flex</code> 容器或其他次级容器，并配置其样式。根据需求调整按钮组的布局位置。以下示例将展示如何将按钮组放置在页面右上角。</p>
<h4>三.插入 <code>service</code></h4>
<p>在容器中插入可以存储变量的容器组件 <code>service</code>，并配置 URL，例如 <code>${apiUrl}hr/actExtend/findFormDataBut</code>。这个接口用于判断驳回按钮是否应显示，并存储变量 <code>rejectShow</code>。</p>
<h4>四.在 <code>service</code> 中加入按钮组</h4>
<p>在 <code>service</code> 中加入以下按钮组：[返回, 驳回, 同意, 提交]。每个按钮的可见性规则如下：</p>
<ul>
<li>"提交"按钮：当表单处于添加或编辑模式时显示，即 <code>visibleOn</code> 规则为表达式 <code>&quot;${pageMode == \&quot;add\&quot; || pageMode == \&quot;edit\&quot;}&quot;</code>。</li>
<li>"同意"按钮：当表单处于审核模式时显示，即 <code>visibleOn</code> 规则为表达式 <code>&quot;${pageMode == \&quot;examine\&quot;}&quot;</code>。</li>
<li>"驳回"按钮：当表单处于审核模式且变量 <code>rejectShow</code> 等于 1 时显示，即 <code>visibleOn</code> 规则为表达式 <code>&quot;${rejectShow == \&quot;1\&quot; &amp;&amp; pageMode == \&quot;examine\&quot;}&quot;</code>。</li>
<li>"返回"按钮：始终可见。</li>
</ul>
<p>每个按钮的点击事件配置如下：</p>
<ul>
<li>"提交"按钮：</li>
</ul>
<pre><code class="language-JSON">
&quot;onEvent&quot;: {
&quot;click&quot;: {
&quot;actions&quot;: [
{
&quot;actionType&quot;: &quot;submit&quot;, // 动作类型：提交表单
&quot;componentId&quot;: &quot;form&quot;, // 表单 ID
&quot;outputVar&quot;: &quot;submitResult&quot;, // 提交结果
&quot;ignoreError&quot;: false,
&quot;args&quot;: {}
}
]
}
},</code></pre>
<ul>
<li>"同意"按钮：</li>
</ul>
<pre><code class="language-JSON">
&quot;onEvent&quot;: {
&quot;click&quot;: {
&quot;actions&quot;: [
{
&quot;actionType&quot;: &quot;validateFormItem&quot;, // 动作类型：校验表单项
&quot;ignoreError&quot;: false,
&quot;componentId&quot;: &quot;comments&quot;, // 表单 ID
&quot;outputVar&quot;: &quot;validateFormItemResult&quot; // 校验结果
},
{
&quot;ignoreError&quot;: false,
&quot;actionType&quot;: &quot;toast&quot;, // 动作类型：吐司提示
&quot;expression&quot;: &quot;${comments == \&quot;\&quot; || comments == null || comments == \&quot;undefined\&quot;}&quot;, // 执行条件
&quot;args&quot;: { // 吐司内容
&quot;msgType&quot;: &quot;error&quot;,
&quot;position&quot;: &quot;top-center&quot;,
&quot;closeButton&quot;: true,
&quot;showIcon&quot;: true,
&quot;msg&quot;: &quot;必须填写审核意见&quot;,
&quot;title&quot;: &quot;提示&quot;,
&quot;className&quot;: &quot;theme-toast-action-scope&quot;
}
},
{
&quot;actionType&quot;: &quot;ajax&quot;, // 动作类型：调接口
&quot;ignoreError&quot;: false,
&quot;outputVar&quot;: &quot;responseResult&quot;, // 请求结果
&quot;expression&quot;: &quot;${comments !== \&quot;\&quot; &amp;&amp; comments !== null &amp;&amp; comments !== \&quot;undefined\&quot;}&quot;, // 执行条件
&quot;api&quot;: { // 请求内容
&quot;url&quot;: &quot;${apiUrl}workflow/flownew/claimAndCompleteTaskByTaskId&quot;,
&quot;method&quot;: &quot;post&quot;,
&quot;requestAdaptor&quot;: &quot;// 定义一个函数来获取查询参数\r\nfunction getQueryParam(params, key, defaultValue = \&quot;\&quot;, isBoolean = false) {\r\n let value = params.get(key);\r\n if (value === null) {\r\n return defaultValue;\r\n }\r\n if (isBoolean) {\r\n value = value == \&quot;0\&quot; ? true : false;\r\n }\r\n return value;\r\n}\r\n\r\nconst hash = window.location.hash;\r\nconst params = new URLSearchParams(hash.slice(hash.indexOf('?')));\r\nlet data = {\r\n taskId: getQueryParam(params, \&quot;taskId\&quot;),\r\n userId: JSON.parse(localStorage.getItem(\&quot;USER\&quot;)).id.toString(),\r\n isAgree: \&quot;1\&quot;,\r\n remarke: \&quot;同意\&quot;,\r\n comments: api.body.comments\r\n}\r\n\r\nreturn {\r\n ...api,\r\n data\r\n};&quot;,
&quot;dataType&quot;: &quot;json&quot;,
&quot;headers&quot;: {
&quot;Authentication&quot;: &quot;${token}&quot;
},
&quot;data&quot;: {
&quot;comments&quot;: &quot;${comments}&quot;
}
}
},
{
&quot;ignoreError&quot;: false,
&quot;script&quot;: &quot;\nconsole.log(`Before setTimeout: `, event.data);\nif (event.data.responseResult.responseData.code == \&quot;200\&quot;) {\n setTimeout(() =&gt; {\n window.$customFormEvent.$emit('form:search');\n doAction({\n \&quot;actionType\&quot;: \&quot;goBack\&quot;\n });\n }, 1500);\n}\n&quot;, // 自定义 JS，判断请求结果后，执行 goBack 动作并调用 VUE 项目中定义的 window.$customFormEvent 跳转回到请假列表页面
&quot;actionType&quot;: &quot;custom&quot; // 动作类型：自定义 JS
}
]
}
}</code></pre>
<ul>
<li>"驳回"按钮除接口部分与同意按钮不同以外基本一致，故除ajax部分以外部分不做累述:</li>
</ul>
<pre><code class="language-JSON">
...
{
&quot;actionType&quot;: &quot;ajax&quot;,
&quot;outputVar&quot;: &quot;responseResult&quot;,
&quot;ignoreError&quot;: false,
&quot;api&quot;: {
&quot;url&quot;: &quot;${apiUrl}workflow/flownew/claimAndCompleteTaskByTaskId&quot;,
&quot;method&quot;: &quot;post&quot;,
&quot;requestAdaptor&quot;: &quot;\r\n// 定义一个函数来获取查询参数\r\nfunction getQueryParam(params, key, defaultValue = \&quot;\&quot;, isBoolean = false) {\r\n let value = params.get(key);\r\n if (value === null) {\r\n return defaultValue;\r\n }\r\n if (isBoolean) {\r\n value = value == \&quot;0\&quot; ? true : false;\r\n }\r\n return value;\r\n}\r\n\r\nconst hash = window.location.hash;\r\nconst params = new URLSearchParams(hash.slice(hash.indexOf('?')));\r\nlet data = {\r\n taskId: getQueryParam(params, \&quot;taskId\&quot;),\r\n userId: JSON.parse(localStorage.getItem(\&quot;USER\&quot;)).id.toString(),\r\n isAgree: \&quot;0\&quot;,\r\n remarke: \&quot;驳回\&quot;,\r\n comments: api.body.comments\r\n}\r\n\r\nreturn {\r\n ...api,\r\n data\r\n};&quot;,
&quot;dataType&quot;: &quot;json&quot;,
&quot;headers&quot;: {
&quot;Authentication&quot;: &quot;${token}&quot;
},
&quot;data&quot;: {
&quot;comments&quot;: &quot;${comments}&quot;
}
},
&quot;expression&quot;: &quot;${comments !== \&quot;\&quot; &amp;&amp; comments !== null &amp;&amp; comments !== \&quot;undefined\&quot;}&quot;
}
...</code></pre>
<h4>五.注意事项</h4>
<ol>
<li>由于表单提交按钮单独放置在工具栏(<code>toolbar</code>)中，因此需要将内容区表单自带的操作区中的提交按钮进行隐藏。</li>
<li>按钮中用到的个别变量是在页面定义并赋值的 <code>data</code> 变量，详见文档-表单配置规范-页面初始化配置。</li>
</ol>
<h2>页面初始化配置</h2>
<h3>页面 <code>page</code> 基本参数</h3>
<p>…</p>