---初始化后台管理web页面项目
This commit is contained in:
1
docs/assets/404.html-urOlE4ef.js
Normal file
1
docs/assets/404.html-urOlE4ef.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as e,c as o,b as n,o as a}from"./app-CDlLWk6N.js";const l={};function r(s,t){return a(),o("div",null,t[0]||(t[0]=[n("p",null,"404 Not Found",-1)]))}const _=e(l,[["render",r]]),d=JSON.parse('{"path":"/404.html","title":"","lang":"en-US","frontmatter":{"layout":"NotFound"},"headers":[],"git":{},"filePathRelative":null}');export{_ as comp,d as data};
|
||||
54
docs/assets/add_field.html-Lpe0HY5a.js
Normal file
54
docs/assets/add_field.html-Lpe0HY5a.js
Normal file
@ -0,0 +1,54 @@
|
||||
import{_ as n,c as a,a as p,o as e}from"./app-CDlLWk6N.js";const t=""+new URL("base_set_new-D7W3Zm7h.png",import.meta.url).href,o={};function l(r,s){return e(),a("div",null,s[0]||(s[0]=[p(`<h1 id="为表单添加新字段" tabindex="-1"><a class="header-anchor" href="#为表单添加新字段"><span>为表单添加新字段</span></a></h1><p>添加新字段有两种方式，一种是重新生成代码，另一种是直接修改代码。如果已经修改表单生成的源码很多次，建议直接修改代码。</p><p>这里仅提供修改代码添加表单的方式，步骤如下：</p><ol><li>在config.ts文件中，找到formProps对象，按照格式在其中添加新的字段，其中key值与field值必须与其他项不同，均为唯一项。</li></ol><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'9e85022cc6ba44bdb8312bca957cad0a1'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">field</span><span class="token operator">:</span> <span class="token string">'auditContentId'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'关联内容ID'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'input'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token string">'Input'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">colProps</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">span</span><span class="token operator">:</span> <span class="token number">24</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">defaultValue</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">componentProps</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">span</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">defaultValue</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">labelWidthMode</span><span class="token operator">:</span> <span class="token string">'fix'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">labelFixWidth</span><span class="token operator">:</span> <span class="token number">120</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">responsive</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">respNewRow</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">placeholder</span><span class="token operator">:</span> <span class="token string">'请输入问题定性'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">suffix</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">addonBefore</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">addonAfter</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">allowClear</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">showLabel</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">events</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">isSave</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">isShow</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">scan</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'100%'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="2"><li>在CustomDevForm.vue文件中，添加新的formItem项，注意修改key值与config中相同。格式如下</li></ol><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"> <span class="token operator"><</span>Col v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">"getIfShow2('e6a64e2b22c049e1abb65804b565d759')"</span> v<span class="token operator">-</span>show<span class="token operator">=</span><span class="token string">"getIsShow2('e6a64e2b22c049e1abb65804b565d759')"</span> <span class="token operator">:</span>span<span class="token operator">=</span><span class="token string">"getColWidth(schemaMap['e6a64e2b22c049e1abb65804b565d759'])"</span><span class="token operator">></span></span>
|
||||
<span class="line"> <span class="token operator"><</span>template v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">"showComponent(schemaMap['e6a64e2b22c049e1abb65804b565d759'])"</span><span class="token operator">></span></span>
|
||||
<span class="line"> <span class="token operator"><</span>SimpleFormItem v<span class="token operator">-</span>model<span class="token operator">:</span>value<span class="token operator">=</span><span class="token string">"formModel[schemaMap['e6a64e2b22c049e1abb65804b565d759'].field]"</span> <span class="token operator">:</span>form<span class="token operator">-</span>api<span class="token operator">=</span><span class="token string">"formApi"</span> <span class="token operator">:</span>isWorkFlow<span class="token operator">=</span><span class="token string">"isWorkFlow"</span> <span class="token operator">:</span>refreshFieldObj<span class="token operator">=</span><span class="token string">"refreshFieldObj"</span> <span class="token operator">:</span>schema<span class="token operator">=</span><span class="token string">"schemaMap['e6a64e2b22c049e1abb65804b565d759']"</span> <span class="token operator">/</span><span class="token operator">></span></span>
|
||||
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span></span>
|
||||
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>Col<span class="token operator">></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="3"><li>在代码生成的workflowPermission.ts文件中，添加新的字段权限。格式如下：</li></ol><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">view</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">edit</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">isSaveTable</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">tableName</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">fieldName</span><span class="token operator">:</span> <span class="token string">'问题定性'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">fieldId</span><span class="token operator">:</span> <span class="token string">'problemQualitative'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">isSubTable</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">showChildren</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'input'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'xxxxx'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>注意key值和fieldId值必须与config.ts文件中相同。</p><ol start="4"><li>在系统管理的工作流程模块的流程设计页面中，找到对应要修改的流程编辑，在弹窗中点击更新表单 <img src="`+t+'" alt="流程编辑"> 更新成功点击确定。需要注意的是每个流程节点都需要修改字段的权限，字段初始的默认权限是查看编辑并必填。当设置成功后点击右上角保存模版即可。</li></ol><p>需要注意的是，添加新字段后，需要重新创建流程才会生效，旧流程会遵循历史的权限。</p>',12)]))}const i=n(o,[["render",l]]),k=JSON.parse('{"path":"/front_dev/base/add_field.html","title":"为表单添加新字段","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744257372000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":1}],"changelog":[{"hash":"51b826e36d1d26ef2ed843c669a1ab12b3fcb8f5","time":1744257372000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 文档优化 新写 为工具栏添加按钮， 为表单新添加新字段"}]},"filePathRelative":"front_dev/base/add_field.md"}');export{i as comp,k as data};
|
||||
34
docs/assets/ajax.html-CDfrJfFy.js
Normal file
34
docs/assets/ajax.html-CDfrJfFy.js
Normal file
@ -0,0 +1,34 @@
|
||||
import{_ as n,c as a,a as p,o as e}from"./app-CDlLWk6N.js";const t={};function l(o,s){return e(),a("div",null,s[0]||(s[0]=[p(`<h1 id="使用远程数据源" tabindex="-1"><a class="header-anchor" href="#使用远程数据源"><span>使用远程数据源</span></a></h1><p>如果有些组件（联想弹层、下拉框等）的显示数据不想使用预设的数据源或者magicAPI，也可以使用自写的接口。</p><p>如下代码所示，可以在config.ts文件中通过修改对应组件项中的componentProps中的apiCconfig属性来使用自写的接口，datasourceType的属性值应为api。apiParams则为对应的接口请求参数，其中也可以使用当前表单中的参数来充当请求接口的参数，如例子所示。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token literal-property property">datasourceType</span><span class="token operator">:</span> <span class="token string">'api'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">itemId</span><span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">apiConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'CodeGeneration/selection'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'GET'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">apiId</span><span class="token operator">:</span> <span class="token string">'93d735dcb7364a0f8102188ec4d77ac7'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">apiParams</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
|
||||
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Query Params'</span><span class="token punctuation">,</span> <span class="token literal-property property">tableInfo</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
|
||||
<span class="line"> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'projectId'</span><span class="token punctuation">,</span> <span class="token comment">// 参数名称</span></span>
|
||||
<span class="line"> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'{"bindField":"selectProjectId","fieldKey":"xxxxxxxxxxxx"}'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token comment">// bindField是表单中的字段名即field，fieldKey是的key值，这两个值需要和表单中的值对应。</span></span>
|
||||
<span class="line"> <span class="token comment">// 当绑定的表单字段值发生变化时，会自动用新参数重新请求接口。</span></span>
|
||||
<span class="line"> <span class="token comment">// value 也可以是一个固定值，写为正常的字符串即可。</span></span>
|
||||
<span class="line"> <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">dataType</span><span class="token operator">:</span> <span class="token string">'String'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">defaultValue</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">validateType</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">error</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">expression</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">bindType</span><span class="token operator">:</span> <span class="token string">'data'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token comment">//多个参数时，只需要在数组中添加即可。</span></span>
|
||||
<span class="line"> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Header'</span><span class="token punctuation">,</span> <span class="token literal-property property">tableInfo</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Body'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,4)]))}const c=n(t,[["render",l]]),i=JSON.parse('{"path":"/front_dev/base/ajax.html","title":"使用远程数据源","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744278865000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":3}],"changelog":[{"hash":"a3e2cde9db0dbccdbce661749aef03650a6b701f","time":1744278865000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 二开文档优化"},{"hash":"51b826e36d1d26ef2ed843c669a1ab12b3fcb8f5","time":1744257372000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 文档优化 新写 为工具栏添加按钮， 为表单新添加新字段"},{"hash":"bb33c9cfb0a16dc1df1c8e1434b41b052a489710","time":1744192947000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 值计算，修改组件值，自定义校验，使用远程数据源"}]},"filePathRelative":"front_dev/base/ajax.md"}');export{c as comp,i as data};
|
||||
27
docs/assets/app-CDlLWk6N.js
Normal file
27
docs/assets/app-CDlLWk6N.js
Normal file
File diff suppressed because one or more lines are too long
BIN
docs/assets/base_set_new-D7W3Zm7h.png
Normal file
BIN
docs/assets/base_set_new-D7W3Zm7h.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
docs/assets/base_teleport-vbaCZqqF.png
Normal file
BIN
docs/assets/base_teleport-vbaCZqqF.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
1
docs/assets/change_value.html-CS5TpMC0.js
Normal file
1
docs/assets/change_value.html-CS5TpMC0.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as t,c as n,b as e,o as l}from"./app-CDlLWk6N.js";const o={};function r(s,a){return l(),n("div",null,a[0]||(a[0]=[e("h1",{id:"修改组件值",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#修改组件值"},[e("span",null,"修改组件值")])],-1),e("p",null,"正常修改组件显示值的话通过修改formModel中相应的值即可，本身框架封装的组件有做处理，双向绑定机制即可保证数据能够正常回显。",-1),e("p",null,"但是当使用非框架封装组件时，有一些情况下，无法通过直接修改formModel来实现组件的回填显示，使用时需要注意进行一些特殊的转换。",-1),e("p",null,"比如Ant-design-vue的时间/日期组件。该组件的双向绑定值为一个Dayjs对象，而数据库存储一般为‘2025-01-01 00:00:00’的字符串格式，所以无论保存还是插入值需要进行类型的转换才能正常进行存储和显示。",-1),e("p",null,"这里只是举一个例子，具体需要根据组件的实际情况进行处理。",-1)]))}const m=t(o,[["render",r]]),d=JSON.parse('{"path":"/front_dev/base/change_value.html","title":"修改组件值","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744192947000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":1}],"changelog":[{"hash":"bb33c9cfb0a16dc1df1c8e1434b41b052a489710","time":1744192947000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 值计算，修改组件值，自定义校验，使用远程数据源"}]},"filePathRelative":"front_dev/base/change_value.md"}');export{m as comp,d as data};
|
||||
24
docs/assets/components.html-CbpbsXEn.js
Normal file
24
docs/assets/components.html-CbpbsXEn.js
Normal file
@ -0,0 +1,24 @@
|
||||
import{_ as n,c as s,a as t,o as p}from"./app-CDlLWk6N.js";const e={};function o(l,a){return p(),s("div",null,a[0]||(a[0]=[t(`<h1 id="表单封装" tabindex="-1"><a class="header-anchor" href="#表单封装"><span>表单封装</span></a></h1><p>其实，在前端框架中，所有的表单页面，都是基于SimpleForm的封装，无论是主表还是明细表，最外层封装都是SimpleForm（二开使用的是可以复用的SimpleFormSetup），如果需要实现多个子表单的效果，只需要在对应位置插入标题或者布局组件即可。</p><p>默认情况下，SimpleForm是对第一层元素循环，同时处理显隐、响应式布局以及响应式布局的换行，对于非slot组件，都是将属性传给SimpleFormItem</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formRef<span class="token punctuation">"</span></span> <span class="token attr-name">:label-col</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getProps?.labelCol<span class="token punctuation">"</span></span> <span class="token attr-name">:labelAlign</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getProps?.labelAlign<span class="token punctuation">"</span></span> <span class="token attr-name">:layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getProps?.layout<span class="token punctuation">"</span></span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formModel<span class="token punctuation">"</span></span> <span class="token attr-name">:wrapper-col</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getProps?.wrapperCol<span class="token punctuation">"</span></span> <span class="token attr-name">@keypress.enter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>handleEnterPress<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Row</span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getRow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schema in getSchemas<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schema.field<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Col</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getIfShow(schema, formModel[schema.field])<span class="token punctuation">"</span></span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getIsShow(schema, formModel[schema.field])<span class="token punctuation">"</span></span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getColWidth(schema)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schema?.componentProps.respBreakLine<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 1px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>showComponent(schema) && schema.type !== 'slot'<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SimpleFormItem</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formModel[schema.field]<span class="token punctuation">"</span></span> <span class="token attr-name">:form-api</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formApi<span class="token punctuation">"</span></span> <span class="token attr-name">:isWorkFlow</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>isWorkFlow<span class="token punctuation">"</span></span> <span class="token attr-name">:refreshFieldObj</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>refreshFieldObj<span class="token punctuation">"</span></span> <span class="token attr-name">:schema</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schema<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schema.type === 'slot'<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token comment"><!-- 无关代码省略 --></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Row</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ textAlign: getProps.buttonLocation }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!-- 表单可以配置显示提交和清空按钮 也可以在前后添加按钮 --></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>buttonBefore<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>slot</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-button</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getProps.showSubmitButton<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>handleSubmit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ t('提交') }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-button</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!-- 无关代码省略 --></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>buttonAfter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>slot</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>对于完全使用useForm或者SimpleForm构建表单的，封装也提供了提交和清除按钮，但是页面形式的表单或者审批页面不用这2个按钮，而是用的工具栏里的封装。</p>`,5)]))}const u=n(e,[["render",o]]),i=JSON.parse('{"path":"/front_dev/components.html","title":"表单封装","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1743940801000,"contributors":[{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":2}],"changelog":[{"hash":"ade1311d7bba455235b42db2e5f325116e3b86f4","time":1743940801000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新pc端前端文档"},{"hash":"6d1f2ad492629141aa9a6c3928f16e820688a85b","time":1743498223000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新前端文档：传值和显示隐藏部分"}]},"filePathRelative":"front_dev/components.md"}');export{u as comp,i as data};
|
||||
69
docs/assets/computed.html-9QOs6N7a.js
Normal file
69
docs/assets/computed.html-9QOs6N7a.js
Normal file
@ -0,0 +1,69 @@
|
||||
import{_ as s,c as a,a as p,o as e}from"./app-CDlLWk6N.js";const t={};function c(l,n){return e(),a("div",null,n[0]||(n[0]=[p(`<h1 id="值计算" tabindex="-1"><a class="header-anchor" href="#值计算"><span>值计算</span></a></h1><blockquote><p>该章节仅叙述实现思路，具体实现需要根据实际情况进行调整，且PC端与移动端实现基本相同，便不做区分。</p></blockquote><h2 id="一、根据表单的值计算" tabindex="-1"><a class="header-anchor" href="#一、根据表单的值计算"><span>一、根据表单的值计算</span></a></h2><p>如有标题或合计等需要根据其他字段的值进行显示的场景，监听formModel变化并进行相应变更的方法有几种：</p><h3 id="_1-computed计算属性" tabindex="-1"><a class="header-anchor" href="#_1-computed计算属性"><span>1. computed计算属性</span></a></h3><p>推荐在拆分后的组件中使用computed计算属性与模板字符串。可以不在表单生成与存储新的字段，减少前后端开销，但是只能执行同步方法。</p><h3 id="_2-组件事件触发-change-blur" tabindex="-1"><a class="header-anchor" href="#_2-组件事件触发-change-blur"><span>2. 组件事件触发 change/blur</span></a></h3><p>表单组件一般有统一的change/blur事件触发，然后在事件处理函数中计算新的值并存储到其他的字段中。缺陷只适用于需监听字段较少的情况下，且每个需要考虑到的变量都需要绑定响应函数。</p><h3 id="_3-watch监听" tabindex="-1"><a class="header-anchor" href="#_3-watch监听"><span>3. watch监听</span></a></h3><p>在拆分后的组件中使用watch监听formModel变化，根据需要计算新的值并存储到其他的字段中。该方法可以进行异步操作，从后端获取数据。缺陷是开销较大，需要在每次formModel变化时重新计算。watch事件尽量避免使用，后期维护的时候容易察觉不到数据修改源头。</p><h2 id="二、在操作表单前处理数据" tabindex="-1"><a class="header-anchor" href="#二、在操作表单前处理数据"><span>二、在操作表单前处理数据</span></a></h2><p>如从后端获取的表单数据需要处理后才可以在表单中正常显示，那么可以在生成的form组件的onMounted生命周期中的所有判断之后进行formModel的获取与修改操作，然后将处理后的数据使用setFieldsValue函数存储到表单中。（适用于未拆分的组件）</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>props<span class="token punctuation">.</span>fromPage <span class="token operator">==</span> FromPageType<span class="token punctuation">.</span><span class="token constant">MENU</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token function">setMenuPermission</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token comment">// 表单处理部分 略过</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token keyword">let</span> data <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token comment">// 获取及修改表单数据的逻辑</span></span>
|
||||
<span class="line"> <span class="token function">setFieldsValue</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span></span>
|
||||
<span class="line"> <span class="token function">emits</span><span class="token punctuation">(</span><span class="token string">'form-mounted'</span><span class="token punctuation">,</span> formProps<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token comment">// 辅助设置表单数据</span></span>
|
||||
<span class="line"><span class="token keyword">function</span> <span class="token function">setFieldsValue</span><span class="token punctuation">(</span><span class="token parameter">record</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> systemFormRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">setFieldsValue</span><span class="token punctuation">(</span>record<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>或是在拆分后的CustomDevForm组件中直接修改formModel。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>formModel<span class="token punctuation">.</span>xxx <span class="token operator">=</span> <span class="token string">'xxx'</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>移动端则可以在生成的form组件的loadForm函数中进行处理。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">loadForm</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">let</span> id <span class="token operator">=</span> val<span class="token punctuation">[</span>rowKey<span class="token punctuation">]</span></span>
|
||||
<span class="line"> formConfig<span class="token punctuation">.</span>id <span class="token operator">=</span> id<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">const</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> data</span>
|
||||
<span class="line"> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getAppFormSplit</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token comment">// 在这里处理表单数据</span></span>
|
||||
<span class="line"> <span class="token keyword">await</span> formRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">setFormData</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">.</span>formModel<span class="token punctuation">,</span> <span class="token operator">...</span>data<span class="token punctuation">}</span><span class="token punctuation">)</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="三、在提交表单前处理数据" tabindex="-1"><a class="header-anchor" href="#三、在提交表单前处理数据"><span>三、在提交表单前处理数据</span></a></h2><p>在PC端，流程的提交和表单的提交都会触发基础表单的提交事件并且会重新查询并回填数据，因此可以在生成表单的add及update事件中进行处理。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token comment">// 新增api表单数据</span></span>
|
||||
<span class="line"> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">values</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> state<span class="token punctuation">.</span>formModel <span class="token operator">=</span> values<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token comment">// 可以在这里处理表单数据</span></span>
|
||||
<span class="line"> <span class="token keyword">let</span> saveVal <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">addAppFormSplit</span><span class="token punctuation">(</span>values<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">await</span> <span class="token function">submitFormEvent</span><span class="token punctuation">(</span>formEventConfigs<span class="token punctuation">,</span> state<span class="token punctuation">.</span>formModel<span class="token punctuation">,</span></span>
|
||||
<span class="line"> systemFormRef<span class="token punctuation">.</span>value<span class="token punctuation">,</span></span>
|
||||
<span class="line"> formProps<span class="token punctuation">.</span>schemas<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//表单事件：提交表单</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> saveVal<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token comment">// 更新api表单数据</span></span>
|
||||
<span class="line"> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">update</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> values<span class="token punctuation">,</span> rowId <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> values<span class="token punctuation">[</span>RowKey<span class="token punctuation">]</span> <span class="token operator">=</span> rowId<span class="token punctuation">;</span></span>
|
||||
<span class="line"> state<span class="token punctuation">.</span>formModel <span class="token operator">=</span> values<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token comment">// 可以在这里处理表单数据</span></span>
|
||||
<span class="line"> <span class="token keyword">let</span> saveVal <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">updateAppFormSplit</span><span class="token punctuation">(</span>values<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">await</span> <span class="token function">submitFormEvent</span><span class="token punctuation">(</span>formEventConfigs<span class="token punctuation">,</span> state<span class="token punctuation">.</span>formModel<span class="token punctuation">,</span></span>
|
||||
<span class="line"> systemFormRef<span class="token punctuation">.</span>value<span class="token punctuation">,</span></span>
|
||||
<span class="line"> formProps<span class="token punctuation">.</span>schemas<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//表单事件：提交表单</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> saveVal<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>但是流程表单数据的提交现阶段还是取表单的校验后的值，因此如果想修改流程表单的提交数据，则需要在生成的form组件中添加函数并用defineExpose函数暴露</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">function</span> <span class="token function">getFormModel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token comment">// 处理逻辑</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> systemFormRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>formModel</span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后对/SystemForm/src/Form.vue中的getFormModels方法进行修改，将获取表单数据的逻辑替换为调用暴露的函数。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getFormModels</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">(</span>SystemFormRef<span class="token punctuation">.</span>value<span class="token operator">?.</span>getFormModel <span class="token operator">&&</span> SystemFormRef<span class="token punctuation">.</span>value<span class="token operator">?.</span><span class="token function">getFormModel</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token keyword">await</span> <span class="token function">validate</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这样即可在提交流程表单时直接获取表单数据并进行修改</p>`,26)]))}const i=s(t,[["render",c]]),u=JSON.parse('{"path":"/front_dev/base/computed.html","title":"值计算","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"一、根据表单的值计算","slug":"一、根据表单的值计算","link":"#一、根据表单的值计算","children":[{"level":3,"title":"1. computed计算属性","slug":"_1-computed计算属性","link":"#_1-computed计算属性","children":[]},{"level":3,"title":"2. 组件事件触发 change/blur","slug":"_2-组件事件触发-change-blur","link":"#_2-组件事件触发-change-blur","children":[]},{"level":3,"title":"3. watch监听","slug":"_3-watch监听","link":"#_3-watch监听","children":[]}]},{"level":2,"title":"二、在操作表单前处理数据","slug":"二、在操作表单前处理数据","link":"#二、在操作表单前处理数据","children":[]},{"level":2,"title":"三、在提交表单前处理数据","slug":"三、在提交表单前处理数据","link":"#三、在提交表单前处理数据","children":[]}],"git":{"updatedTime":1744251107000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":2}],"changelog":[{"hash":"c84155fcf9531f25802f735edad59713762e5ca9","time":1744251107000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 已写文档优化"},{"hash":"bb33c9cfb0a16dc1df1c8e1434b41b052a489710","time":1744192947000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 值计算，修改组件值，自定义校验，使用远程数据源"}]},"filePathRelative":"front_dev/base/computed.md"}');export{i as comp,u as data};
|
||||
101
docs/assets/custom_field.html-CEs-XIt2.js
Normal file
101
docs/assets/custom_field.html-CEs-XIt2.js
Normal file
@ -0,0 +1,101 @@
|
||||
import{_ as s,c as a,a as t,o as p}from"./app-CDlLWk6N.js";const e={};function o(l,n){return p(),a("div",null,n[0]||(n[0]=[t(`<h1 id="自定义字段" tabindex="-1"><a class="header-anchor" href="#自定义字段"><span>自定义字段</span></a></h1><p>当表单设计里面的组件无法满足业务需求时，可以自己添加字段组件。 这里用评分组件为例，评分组件需要传入一个评分值，但是表单设计里面没有这个组件，所以需要自己添加一个评分组件。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formWrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formRef<span class="token punctuation">"</span></span> <span class="token attr-name">:label-col</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getProps?.labelCol<span class="token punctuation">"</span></span> <span class="token attr-name">:labelAlign</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getProps?.labelAlign<span class="token punctuation">"</span></span> <span class="token attr-name">:layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getProps?.layout<span class="token punctuation">"</span></span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formModel<span class="token punctuation">"</span></span> <span class="token attr-name">:wrapper-col</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getProps?.wrapperCol<span class="token punctuation">"</span></span> <span class="token attr-name">@keypress.enter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>handleEnterPress<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!-- 单行文本 --></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Col</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getIfShow2('9a8db2186edb49879f59162ae2660b21')<span class="token punctuation">"</span></span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getIsShow2('9a8db2186edb49879f59162ae2660b21')<span class="token punctuation">"</span></span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getColWidth(schemaMap['9a8db2186edb49879f59162ae2660b21'])<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>showComponent(schemaMap['9a8db2186edb49879f59162ae2660b21'])<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SimpleFormItem</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formModel[schemaMap['9a8db2186edb49879f59162ae2660b21'].field]<span class="token punctuation">"</span></span> <span class="token attr-name">:form-api</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formApi<span class="token punctuation">"</span></span> <span class="token attr-name">:isWorkFlow</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>isWorkFlow<span class="token punctuation">"</span></span> <span class="token attr-name">:refreshFieldObj</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>refreshFieldObj<span class="token punctuation">"</span></span> <span class="token attr-name">:schema</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schemaMap['9a8db2186edb49879f59162ae2660b21']<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!-- 评分组件添加 --></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Col</span> </span>
|
||||
<span class="line"> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getIfShow2('d7dfec1ff5254cfe9ab7dfa45753bef7')<span class="token punctuation">"</span></span></span>
|
||||
<span class="line"> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getIsShow2('d7dfec1ff5254cfe9ab7dfa45753bef7')<span class="token punctuation">"</span></span></span>
|
||||
<span class="line"> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getColWidth(schemaMap['d7dfec1ff5254cfe9ab7dfa45753bef7'])<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>showComponent(schemaMap['d7dfec1ff5254cfe9ab7dfa45753bef7'])<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span></span>
|
||||
<span class="line"> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>系统评分<span class="token punctuation">"</span></span></span>
|
||||
<span class="line"> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rate<span class="token punctuation">"</span></span></span>
|
||||
<span class="line"> <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[{ required: true, message: '请选择评分' }]<span class="token punctuation">"</span></span></span>
|
||||
<span class="line"> <span class="token attr-name">:label-col</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schemaMap['d7dfec1ff5254cfe9ab7dfa45753bef7']).labelCol<span class="token punctuation">"</span></span></span>
|
||||
<span class="line"> <span class="token attr-name">:wrapperCol</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>itemLabelWidthProp.wrapperCol<span class="token punctuation">"</span></span></span>
|
||||
<span class="line"> <span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-rate</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formModel.rate<span class="token punctuation">"</span></span> <span class="token attr-name">:count</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
|
||||
<span class="line"> <span class="token comment">// 注意，这里继承的是SimpleFormSetup，使用script setup写法的组件无法继承，必须使用特别的版本</span></span>
|
||||
<span class="line"> <span class="token keyword">import</span> SimpleFormSetup <span class="token keyword">from</span> <span class="token string">'/@/components/SimpleForm/src/SimpleFormSetup.vue'</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">import</span> <span class="token punctuation">{</span> Col<span class="token punctuation">,</span> Form<span class="token punctuation">,</span> Row <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">import</span> SimpleFormItem <span class="token keyword">from</span> <span class="token string">'/@/components/SimpleForm/src/components/SimpleFormItem.vue'</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">import</span> <span class="token punctuation">{</span> CheckCircleOutlined <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@ant-design/icons-vue'</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">import</span> CustomDevTableItem1 <span class="token keyword">from</span> <span class="token string">'./CustomDevTableItem1.vue'</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> TabPane<span class="token punctuation">,</span> Tabs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">import</span> <span class="token punctuation">{</span> useItemLabelWidth <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/@/components/Form/src/hooks/useLabelWidth'</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token comment">//根据labelwidth 生成labelCol</span></span>
|
||||
<span class="line"> <span class="token keyword">const</span> formProps <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span><span class="token string">'formProps'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">const</span> itemLabelWidthProp <span class="token operator">=</span> <span class="token function">useItemLabelWidth</span><span class="token punctuation">(</span>schemaMap<span class="token punctuation">[</span><span class="token string">'9a8db2186edb49879f59162ae2660b21'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> formProps<span class="token operator">!</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">const</span> FormItem <span class="token operator">=</span> Form<span class="token punctuation">.</span>Item<span class="token punctuation">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> </span>
|
||||
<span class="line"> CheckCircleOutlined<span class="token punctuation">,</span> </span>
|
||||
<span class="line"> Form<span class="token punctuation">,</span> </span>
|
||||
<span class="line"> Col<span class="token punctuation">,</span> </span>
|
||||
<span class="line"> SimpleFormItem<span class="token punctuation">,</span> </span>
|
||||
<span class="line"> Row<span class="token punctuation">,</span> </span>
|
||||
<span class="line"> FormItem<span class="token punctuation">,</span></span>
|
||||
<span class="line"> CustomDevTableItem1</span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">mixins</span><span class="token operator">:</span> <span class="token punctuation">[</span>SimpleFormSetup<span class="token punctuation">]</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> ctx</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">const</span> ret <span class="token operator">=</span> SimpleFormSetup<span class="token punctuation">.</span><span class="token function">setup</span><span class="token punctuation">(</span>props<span class="token punctuation">,</span> ctx<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">const</span> expose <span class="token operator">=</span> ctx<span class="token punctuation">.</span>expose<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">const</span> activeKey1 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> </span>
|
||||
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> activeKey1<span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token operator">...</span>ret</span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token comment">// 这里需要增加一个计算属性 否则流程关联时字段读写状态会失效</span></span>
|
||||
<span class="line"> <span class="token function">schemaMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">const</span> schemaMap <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>getSchemas<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">schema</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> schemaMap<span class="token punctuation">[</span>schema<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> schema<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span><span class="token punctuation">(</span>schema<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> schema<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">sChild</span><span class="token operator">=></span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span><span class="token punctuation">(</span>sChild<span class="token punctuation">.</span>list<span class="token punctuation">)</span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> sChild<span class="token punctuation">.</span>list<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">lChild</span><span class="token operator">=></span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> schemaMap<span class="token punctuation">[</span>lChild<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> lChild<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span> </span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> schemaMap<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token function-variable function">getIfShow2</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getIfShow</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>schemaMap<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>formModel<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>schemaMap<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">.</span>field<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token function-variable function">getIsShow2</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getIsShow</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>schemaMap<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>formModel<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>schemaMap<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">.</span>field<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>需要注意例子中添加了几个引用，具体可以查看源码。</p>`,4)]))}const u=s(e,[["render",o]]),i=JSON.parse('{"path":"/front_dev/adv/custom_field.html","title":"自定义字段","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744966438000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":3}],"changelog":[{"hash":"64eedad72a7ab401fe654369ea7dcc37fbbe836e","time":1744966438000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 文档优化"},{"hash":"a0f722b8cfdbd98f98edf701d250f0318870372b","time":1744964300000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 自定义字段编写"},{"hash":"9e158e6153179698d51a9c8bcbff1e8041b63b75","time":1744962112000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 自定义字段 form及table 文档"}]},"filePathRelative":"front_dev/adv/custom_field.md"}');export{u as comp,i as data};
|
||||
1
docs/assets/custom_page.html-DIr-Sgm-.js
Normal file
1
docs/assets/custom_page.html-DIr-Sgm-.js
Normal file
File diff suppressed because one or more lines are too long
BIN
docs/assets/custom_page_app_1-7IYO8Eyo.png
Normal file
BIN
docs/assets/custom_page_app_1-7IYO8Eyo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
BIN
docs/assets/custom_page_app_2-BSYSeOjb.png
Normal file
BIN
docs/assets/custom_page_app_2-BSYSeOjb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
docs/assets/custom_page_app_3-B3tOwhE2.png
Normal file
BIN
docs/assets/custom_page_app_3-B3tOwhE2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
docs/assets/custom_page_app_4-2qED3-kx.png
Normal file
BIN
docs/assets/custom_page_app_4-2qED3-kx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
BIN
docs/assets/custom_page_app_5-DVBTSAZJ.png
Normal file
BIN
docs/assets/custom_page_app_5-DVBTSAZJ.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
docs/assets/custom_page_pc_1-CXjVoBOn.png
Normal file
BIN
docs/assets/custom_page_pc_1-CXjVoBOn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
docs/assets/custom_page_pc_2-8e_g1uGT.png
Normal file
BIN
docs/assets/custom_page_pc_2-8e_g1uGT.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
BIN
docs/assets/custom_page_pc_3-PVAgZmk6.png
Normal file
BIN
docs/assets/custom_page_pc_3-PVAgZmk6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
BIN
docs/assets/custom_page_pc_4-BJ6TU5rW.png
Normal file
BIN
docs/assets/custom_page_pc_4-BJ6TU5rW.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
docs/assets/custom_page_pc_5-67hJreQO.png
Normal file
BIN
docs/assets/custom_page_pc_5-67hJreQO.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
BIN
docs/assets/custom_page_pc_6-D0qmIZZb.png
Normal file
BIN
docs/assets/custom_page_pc_6-D0qmIZZb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
docs/assets/custom_searchform-C_-nGOSW.png
Normal file
BIN
docs/assets/custom_searchform-C_-nGOSW.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
39
docs/assets/dialog.html-fkmzKy_f.js
Normal file
39
docs/assets/dialog.html-fkmzKy_f.js
Normal file
@ -0,0 +1,39 @@
|
||||
import{_ as a,c as s,a as t,o as p}from"./app-CDlLWk6N.js";const e={};function l(c,n){return p(),s("div",null,n[0]||(n[0]=[t(`<h1 id="弹窗" tabindex="-1"><a class="header-anchor" href="#弹窗"><span>弹窗</span></a></h1><h3 id="pc端" tabindex="-1"><a class="header-anchor" href="#pc端"><span>PC端</span></a></h3><p>框架提供了一个弹窗组件的封装BasicModal，该组件封装内容较为繁杂，实际使用不需要过多的功能，直接使用ant-design-vue的<a href="https://3x.antdv.com/components/modal-cn/#Modal-" target="_blank" rel="noopener noreferrer">modal对话框</a>组件即可。 下面是一个简单的弹窗组件示例，具体配置项可以点击上方链接查看文档：</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-modal</span></span>
|
||||
<span class="line"> <span class="token attr-name">:closable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span></span>
|
||||
<span class="line"> <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>visible<span class="token punctuation">"</span></span></span>
|
||||
<span class="line"> <span class="token attr-name">centered</span></span>
|
||||
<span class="line"> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>弹窗<span class="token punctuation">"</span></span></span>
|
||||
<span class="line"> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>800px<span class="token punctuation">"</span></span></span>
|
||||
<span class="line"> <span class="token attr-name">@cancel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token comment"><!-- 弹窗正文内容 --></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">#footer</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!-- 弹窗底部按钮内容，有默认，如果需自定义就这么写 --></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>保存<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-button</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>关闭<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-button</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-modal</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
|
||||
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token keyword">const</span> visible <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 弹窗是否显示</span></span>
|
||||
<span class="line"><span class="token keyword">const</span> approveType <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 审批类型</span></span>
|
||||
<span class="line">fuinction <span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 关闭弹窗</span></span>
|
||||
<span class="line"> visible<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"><span class="token keyword">function</span> <span class="token function">submit</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 保存</span></span>
|
||||
<span class="line"> <span class="token comment">// 提交逻辑</span></span>
|
||||
<span class="line"> visible<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="移动端" tabindex="-1"><a class="header-anchor" href="#移动端"><span>移动端</span></a></h3><p>移动端弹窗使用uni-popup弹出层组件，组件源码也在系统中，具体参数配置可以看源码。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>uni-popup</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>finishRef<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dialog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>uni-popup-dialog</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inputClose<span class="token punctuation">"</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>base<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提示<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>确定终止流程吗？<span class="token punctuation">"</span></span></span>
|
||||
<span class="line"> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入内容<span class="token punctuation">"</span></span> <span class="token attr-name">@confirm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flowFinishConfirm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!--弹窗内容--></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>uni-popup-dialog</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>uni-popup</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,7)]))}const u=a(e,[["render",l]]),i=JSON.parse('{"path":"/front_dev/adv/dialog.html","title":"弹窗","lang":"en-US","frontmatter":{},"headers":[{"level":3,"title":"PC端","slug":"pc端","link":"#pc端","children":[]},{"level":3,"title":"移动端","slug":"移动端","link":"#移动端","children":[]}],"git":{"updatedTime":1744948341000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":2}],"changelog":[{"hash":"15bb17fa4abbd90c367c26723576743b542e6c8a","time":1744948341000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 高级二开文档补充"},{"hash":"2e6e32b0e3baba1ad91f570dfa63514a97cb2d2b","time":1744795964000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 表单介绍：字段事件；高级二开：弹窗、表单、表格"}]},"filePathRelative":"front_dev/adv/dialog.md"}');export{u as comp,i as data};
|
||||
51
docs/assets/field_events.html-C6V_tkoR.js
Normal file
51
docs/assets/field_events.html-C6V_tkoR.js
Normal file
@ -0,0 +1,51 @@
|
||||
import{_ as s,c as a,a as p,o as t}from"./app-CDlLWk6N.js";const e={};function o(l,n){return t(),a("div",null,n[0]||(n[0]=[p(`<h1 id="字段事件" tabindex="-1"><a class="header-anchor" href="#字段事件"><span>字段事件</span></a></h1><p>此处PC端和移动端的字段事件整体逻辑是一致的。 在未进行拆分之前，字段事件的逻辑可以写在代码生成的config.ts文件中。具体是在每个字段的componentProps下的events属性中编写。能够接收的事件类型随组件不同而有所差异，如input组件中可以接收onChange、onBlur事件，select组件中可以接收onChange、onOptionsChange事件等，具体能够抛出的事件需要在组件中查看。在events中编写的事件会在simpleFormItem.vue文件中被收集解析并触发。（PC与移动端逻辑相同）</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">if</span> <span class="token punctuation">(</span>componentProps<span class="token punctuation">[</span><span class="token string">'events'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> eventKey <span class="token keyword">in</span> componentProps<span class="token punctuation">[</span><span class="token string">'events'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">const</span> fun <span class="token operator">=</span> componentProps<span class="token punctuation">[</span><span class="token string">'events'</span><span class="token punctuation">]</span><span class="token punctuation">[</span>eventKey<span class="token punctuation">]</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">let</span> event<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> fun <span class="token operator">===</span> <span class="token string">'string'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> event <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Function</span><span class="token punctuation">(</span><span class="token string">'schema'</span><span class="token punctuation">,</span> <span class="token string">'formModel'</span><span class="token punctuation">,</span> <span class="token string">'formActionType'</span><span class="token punctuation">,</span> <span class="token string">'extParams'</span><span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>fun<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">\`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> fun <span class="token operator">===</span> <span class="token string">'function'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> event <span class="token operator">=</span> fun<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> componentProps<span class="token punctuation">[</span><span class="token string">'on'</span> <span class="token operator">+</span> <span class="token function">upperFirst</span><span class="token punctuation">(</span>eventKey<span class="token punctuation">)</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> selectedOptions</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">let</span> cloneFormModel <span class="token operator">=</span> <span class="token function">cloneDeep</span><span class="token punctuation">(</span>formModel<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> item <span class="token keyword">in</span> cloneFormModel<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">let</span> field <span class="token operator">=</span> <span class="token function">camelCaseString</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>field<span class="token punctuation">)</span> cloneFormModel<span class="token punctuation">[</span>field<span class="token punctuation">]</span> <span class="token operator">=</span> cloneFormModel<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token function">event</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>schema<span class="token punctuation">,</span> isCamelCase <span class="token operator">?</span> cloneFormModel <span class="token operator">:</span> formModel<span class="token punctuation">,</span> props<span class="token punctuation">.</span>formApi<span class="token punctuation">,</span> <span class="token punctuation">{</span> formData<span class="token punctuation">,</span> value<span class="token punctuation">,</span> selectedOptions <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>isCamelCase<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> item <span class="token keyword">in</span> formModel<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">let</span> field <span class="token operator">=</span> <span class="token function">camelCaseString</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>cloneFormModel <span class="token operator">&&</span> field <span class="token operator">&&</span> cloneFormModel<span class="token punctuation">[</span>field<span class="token punctuation">]</span> <span class="token operator">!==</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> formModel<span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token operator">=</span> cloneFormModel<span class="token punctuation">[</span>field<span class="token punctuation">]</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'error'</span><span class="token punctuation">,</span> error<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> notification<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'Tip'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'触发事件填写有误！'</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>但是这样会导致代码生成的config.ts文件中会出现大量的事件函数，导致代码可读性降低，且修改表单值及其他变量很是不方便，因此在拆分后不推荐这种方式。</p><p>拆分表单后，可以直接将公共组件暴露出来，写在生成的CustomDevForm.vue文件中，所有的事件显隐等都可以自己进行控制。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token operator"><</span>template<span class="token operator">></span></span>
|
||||
<span class="line"> <span class="token operator"><</span>Col v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">"getIfShow2('9a8db2186edb49879f59162ae2660b21')"</span> v<span class="token operator">-</span>show<span class="token operator">=</span><span class="token string">"getIsShow2('9a8db2186edb49879f59162ae2660b21')"</span> <span class="token operator">:</span>span<span class="token operator">=</span><span class="token string">"getColWidth(schemaMap['9a8db2186edb49879f59162ae2660b21'])"</span><span class="token operator">></span></span>
|
||||
<span class="line"> <span class="token operator"><</span>template v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">"showComponent(schemaMap['9a8db2186edb49879f59162ae2660b21'])"</span><span class="token operator">></span></span>
|
||||
<span class="line"> <span class="token operator"><</span>FormItem</span>
|
||||
<span class="line"> <span class="token operator">:</span>label<span class="token operator">=</span><span class="token string">"'审计内容'"</span></span>
|
||||
<span class="line"> <span class="token operator">:</span>rules<span class="token operator">=</span><span class="token string">"schemaMap['9a8db2186edb49879f59162ae2660b21'].rules"</span></span>
|
||||
<span class="line"> name<span class="token operator">=</span><span class="token string">"title"</span></span>
|
||||
<span class="line"> <span class="token operator">:</span>required<span class="token operator">=</span><span class="token string">"true"</span></span>
|
||||
<span class="line"> <span class="token operator">></span></span>
|
||||
<span class="line"> <span class="token operator"><</span>a<span class="token operator">-</span>input v<span class="token operator">-</span>model<span class="token operator">:</span>value<span class="token operator">=</span><span class="token string">"formModel[schemaMap['9a8db2186edb49879f59162ae2660b21'].field]"</span> @blur<span class="token operator">=</span><span class="token string">"blurInput"</span><span class="token operator">/</span><span class="token operator">></span></span>
|
||||
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>FormItem<span class="token operator">></span></span>
|
||||
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span></span>
|
||||
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>Col<span class="token operator">></span></span>
|
||||
<span class="line"><span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果嫌这样麻烦，并且只是想监听字段变化并进行相应修改的话，也可以在代码生成的form层或者CustomDevForm对formModal的相应表单值进行监听，字段有变化后进行相应修改。</p>`,7)]))}const i=s(e,[["render",o]]),u=JSON.parse('{"path":"/front_dev/field_events.html","title":"字段事件","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744964300000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":2}],"changelog":[{"hash":"a0f722b8cfdbd98f98edf701d250f0318870372b","time":1744964300000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 自定义字段编写"},{"hash":"2e6e32b0e3baba1ad91f570dfa63514a97cb2d2b","time":1744795964000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 表单介绍：字段事件；高级二开：弹窗、表单、表格"}]},"filePathRelative":"front_dev/field_events.md"}');export{i as comp,u as data};
|
||||
138
docs/assets/form.html-B4704WRj.js
Normal file
138
docs/assets/form.html-B4704WRj.js
Normal file
@ -0,0 +1,138 @@
|
||||
import{_ as s,c as a,a as p,o as t}from"./app-CDlLWk6N.js";const e={};function l(c,n){return t(),a("div",null,n[0]||(n[0]=[p(`<h1 id="自定义表单" tabindex="-1"><a class="header-anchor" href="#自定义表单"><span>自定义表单</span></a></h1><blockquote><p>提示：完整的流程审批表单因为流程权限等过于复杂所以不建议手写，最好还是用系统生成及拆分的代码进行二开，以下叙述的场景仅限于简单表单或者是对原表单的扩展。</p></blockquote><h3 id="pc端" tabindex="-1"><a class="header-anchor" href="#pc端"><span>PC端</span></a></h3><p>项目引入了ant-design-vue的表单组件，具体文档<a href="https://3x.antdv.com/components/form-cn/#Form-" target="_blank" rel="noopener noreferrer">点击查看</a> 简单的并且可复用的表单，可以使用和框架表单一样的形式，编写一个公共组件，通过config.ts来编写表单配置，然后使用公共组件simpleFormItem来渲染表单各个字段的组件。这样可以做到表单的复用，减少代码量。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formRef<span class="token punctuation">"</span></span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>record<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Row</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schema in config.schemas<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schema.field<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getColWidth(schema)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SimpleFormItem</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schema[schema.field]<span class="token punctuation">"</span></span> <span class="token attr-name">:schema</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schema<span class="token punctuation">"</span></span> <span class="token attr-name">:refreshFieldObj</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>refreshFieldObj<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Row</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
|
||||
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> onMounted<span class="token punctuation">,</span> ref<span class="token punctuation">,</span>unref<span class="token punctuation">,</span> defineProps<span class="token punctuation">,</span> watch<span class="token punctuation">,</span> nextTick<span class="token punctuation">,</span> computed<span class="token punctuation">,</span> provide <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token keyword">import</span> SimpleFormItem <span class="token keyword">from</span> <span class="token string">'/@/components/SimpleForm/src/components/SimpleFormItem.vue'</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> Form<span class="token punctuation">,</span> Row<span class="token punctuation">,</span> Col <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token keyword">const</span> props <span class="token operator">=</span> <span class="token function">defineProps</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token literal-property property">record</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> Object</span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> Object</span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span class="token function">provide</span><span class="token punctuation">(</span><span class="token string">'formModel'</span><span class="token punctuation">,</span> props<span class="token punctuation">.</span>record<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token function">provide</span><span class="token punctuation">(</span><span class="token string">'formProps'</span><span class="token punctuation">,</span> <span class="token function">ref</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>config<span class="token punctuation">.</span>schemas<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token keyword">const</span> refreshFieldObj <span class="token operator">=</span> ref<span class="token operator"><</span>object<span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">refreshAPI</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">field</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>field<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token function">unref</span><span class="token punctuation">(</span>refreshFieldObj<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>field<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token function">unref</span><span class="token punctuation">(</span>refreshFieldObj<span class="token punctuation">)</span><span class="token punctuation">[</span>field<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token function">unref</span><span class="token punctuation">(</span>refreshFieldObj<span class="token punctuation">)</span><span class="token punctuation">[</span>field<span class="token punctuation">]</span><span class="token operator">++</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token keyword">const</span> wrapWidth <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">1080</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token keyword">function</span> <span class="token function">getColWidth</span><span class="token punctuation">(</span><span class="token parameter">schema</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">const</span> compProps <span class="token operator">=</span> schema<span class="token punctuation">.</span>componentProps<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>compProps<span class="token operator">?.</span>responsive<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>compProps<span class="token punctuation">.</span>respNewRow<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> <span class="token number">24</span><span class="token punctuation">;</span> <span class="token comment">// 响应式布局下独立成行</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">const</span> wrapValue <span class="token operator">=</span> wrapWidth<span class="token punctuation">.</span>value<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>wrapValue <span class="token operator">></span> <span class="token keyword">import</span><span class="token punctuation">.</span>meta<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">VITE_RESP_LG_WIDTH</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> <span class="token number">8</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>wrapValue <span class="token operator">></span> <span class="token keyword">import</span><span class="token punctuation">.</span>meta<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">VITE_RESP_MD_WIDTH</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> <span class="token number">12</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> <span class="token number">24</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> schema<span class="token punctuation">.</span>colProps<span class="token operator">?.</span>span<span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>less<span class="token punctuation">"</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"></span>
|
||||
<span class="line"><span class="token selector">.views-item</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token property">margin-top</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token property">height</span><span class="token punctuation">:</span> 700px<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token property">overflow-y</span><span class="token punctuation">:</span> scroll<span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"><span class="token selector">:deep(.ant-input-disabled)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token property">background-color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span class="token selector">:deep(.ant-form-item-label > label)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token property">white-space</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token property">line-height</span><span class="token punctuation">:</span> 32px<span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>less<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"></span>
|
||||
<span class="line"><span class="token selector">.ant-input-affix-wrapper-disabled</span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"><span class="token selector">.ant-select-disabled</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token selector">.ant-select-selector</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token property">border</span><span class="token punctuation">:</span> none <span class="token important">!important</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token property">background-color</span><span class="token punctuation">:</span> transparent <span class="token important">!important</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token property">padding-left</span><span class="token punctuation">:</span> 0 <span class="token important">!important</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token selector">.ant-select-selection-item</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>0 0 0 / 85%<span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token selector">.ant-select-arrow</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当然如果个性化差异比较大，也可以自己写手写表单的各个组件。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>views-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formRef<span class="token punctuation">"</span></span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>record<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Row</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>责任类型<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>responsibilityType<span class="token punctuation">"</span></span> <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[{ required: true, message: '请选择责任类型' }]<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>record.responsibilityType<span class="token punctuation">"</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>responsibilityTypeOptions<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请选择责任类型<span class="token punctuation">"</span></span> <span class="token attr-name">allowClear</span> <span class="token punctuation">/></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!--以下不一一列举--></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Row</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>less<span class="token punctuation">"</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"></span>
|
||||
<span class="line"> <span class="token selector">:deep(.ant-form-item-label > label)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token property">white-space</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token property">line-height</span><span class="token punctuation">:</span> 32px<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>less<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"></span>
|
||||
<span class="line"> <span class="token selector">.ant-select-disabled</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token selector">.ant-select-selector</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token property">border</span><span class="token punctuation">:</span> none <span class="token important">!important</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token property">background-color</span><span class="token punctuation">:</span> transparent <span class="token important">!important</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token property">padding-left</span><span class="token punctuation">:</span> 0 <span class="token important">!important</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token selector">.ant-select-selection-item</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>0 0 0 / 85%<span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token selector">.ant-select-arrow</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果想主动进行表单校验，可以使用ref来获取表单实例，然后调用validate方法进行校验。这里校验的返回值是一个Promise，需要使用await进行等待。resolve的值是一个对象，如果校验成功则为表单包含数据，如果校验失败则为失败信息。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">const</span> formRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 表单实例</span></span>
|
||||
<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">validate</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// 表单校验</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> <span class="token keyword">await</span> <span class="token function">unref</span><span class="token punctuation">(</span>formRef<span class="token punctuation">)</span><span class="token operator">?.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 表单校验</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>也可以使用相同方法触发重置表单（resetFields）、移除校验结果（clearValidate）等操作。</p><h3 id="移动端" tabindex="-1"><a class="header-anchor" href="#移动端"><span>移动端</span></a></h3><p>项目使用了uniapp的组件，组件源码均在路径@/uni_module下，表单组件在@/uni_module/uni-forms/components下，配置项和PC端类似。参照实际情况即可，可以自己编写也可以直接使用。</p>`,12)]))}const i=s(e,[["render",l]]),u=JSON.parse('{"path":"/front_dev/adv/form.html","title":"自定义表单","lang":"en-US","frontmatter":{},"headers":[{"level":3,"title":"PC端","slug":"pc端","link":"#pc端","children":[]},{"level":3,"title":"移动端","slug":"移动端","link":"#移动端","children":[]}],"git":{"updatedTime":1744962112000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":3}],"changelog":[{"hash":"9e158e6153179698d51a9c8bcbff1e8041b63b75","time":1744962112000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 自定义字段 form及table 文档"},{"hash":"15bb17fa4abbd90c367c26723576743b542e6c8a","time":1744948341000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 高级二开文档补充"},{"hash":"2e6e32b0e3baba1ad91f570dfa63514a97cb2d2b","time":1744795964000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 表单介绍：字段事件；高级二开：弹窗、表单、表格"}]},"filePathRelative":"front_dev/adv/form.md"}');export{i as comp,u as data};
|
||||
BIN
docs/assets/form_load_approveflow-BxWaWX9p.png
Normal file
BIN
docs/assets/form_load_approveflow-BxWaWX9p.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
docs/assets/form_load_form-BQvUCUn9.png
Normal file
BIN
docs/assets/form_load_form-BQvUCUn9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
BIN
docs/assets/form_load_forminformation-fiSfvJc2.png
Normal file
BIN
docs/assets/form_load_forminformation-fiSfvJc2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
9
docs/assets/form_logic.html-CA8-U3gW.js
Normal file
9
docs/assets/form_logic.html-CA8-U3gW.js
Normal file
@ -0,0 +1,9 @@
|
||||
import{_ as n,c as s,a as t,o as p}from"./app-CDlLWk6N.js";const o=""+new URL("form_load_approveflow-BxWaWX9p.png",import.meta.url).href,e=""+new URL("form_load_forminformation-fiSfvJc2.png",import.meta.url).href,l=""+new URL("form_load_form-BQvUCUn9.png",import.meta.url).href,c=""+new URL("vite_readme-BQgKo4m1.png",import.meta.url).href,u=""+new URL("form_logic_approval-W5mFAqfy.png",import.meta.url).href,r=""+new URL("form_logic_flowInfo-DaD_tsW8.png",import.meta.url).href,i=""+new URL("form_logic_system_form-cg_dlB6-.png",import.meta.url).href,m=""+new URL("form_logic_easycom-BG7WxKMV.png",import.meta.url).href,k=""+new URL("form_logic_system_form1-XuFq0MM-.png",import.meta.url).href,f=""+new URL("form_logic_system_form2-DnTonMCc.png",import.meta.url).href,d={};function g(_,a){return p(),s("div",null,a[0]||(a[0]=[t('<h1 id="表单的页面封装逻辑-pc端" tabindex="-1"><a class="header-anchor" href="#表单的页面封装逻辑-pc端"><span>表单的页面封装逻辑（PC端）</span></a></h1><p>如果是流程相关的页面，入口页面在secondDev目录下，以审批流程为例，第一个调用的是FormInformation组件。 <img src="'+o+`" alt="入口页面"></p><p>接下来进入到FormInformation，根据template部分可以得知，表单分为两种，其中低开模式会加载SimpleForm，也就是真实的表单，通过JSON渲染，其他模式，无论是数据优先，还是页面优先，都加载SystemForm。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!-- 表单信息 无关代码省略--></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>activeIndex == index<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!-- 如果是生成文件模式 formType = 0，也就是FormType.SYSTEM，会加载对应项目的Form.vue--></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SystemForm</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.formType == FormType.SYSTEM<span class="token punctuation">"</span></span> <span class="token attr-name">:ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>setItemRef<span class="token punctuation">"</span></span> <span class="token attr-name">:formModel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.formModel<span class="token punctuation">"</span></span> <span class="token attr-name">:isViewProcess</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>props.disabled<span class="token punctuation">"</span></span> <span class="token attr-name">:systemComponent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.systemComponent<span class="token punctuation">"</span></span> <span class="token attr-name">:workflowConfig</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-box<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SimpleForm</span> <span class="token attr-name">v-else-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.formType == FormType.CUSTOM<span class="token punctuation">"</span></span> <span class="token attr-name">:ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>setItemRef<span class="token punctuation">"</span></span> <span class="token attr-name">:formModel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.formModel<span class="token punctuation">"</span></span> <span class="token attr-name">:formProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.formProps<span class="token punctuation">"</span></span> <span class="token attr-name">:isWorkFlow</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-box<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>SystemForm的参数最重要的就是图中部分，这里包括表单的JSON配置，模块名和功能名（共同组成文件路径）： <img src="`+e+'" alt="入口页面"></p><p>SystemForm是一个hooks，核心代码是根据上面提供的路径，动态加载表单文件： <img src="'+l+'" alt="入口页面"></p><p>这里利用了两点：</p><p>（1）Vite/Webpack这类打包工具，在没进行混淆时，是用模块路径作为文件名的。</p><p>（2）Vite和defineAsyncComponent搭配时，会自动完成目录扫描、分卷、懒加载等功能，这点和Webpack不同，正如官网文档所说：</p><p><img src="'+c+'" alt="入口页面"></p><h1 id="表单的页面封装逻辑-移动端" tabindex="-1"><a class="header-anchor" href="#表单的页面封装逻辑-移动端"><span>表单的页面封装逻辑（移动端）</span></a></h1><p>移动端的表单加载逻辑与组件结构和PC端类似，入口页面在pages/workflow目录下。不过它将流程表单部分单独封装了一个组件，即FlowInfo，在发起流程（launch）和流程审批（approval）两个组件中复用。 <img src="'+u+'" alt="流程页面"></p><p>在flowInfo组件中，和PC端一致，第一个调用的也是FormInformation组件。</p><p><img src="'+r+'" alt="flowInfo组件"></p><p>下面的组件结构和PC端基本一致，不过表单组件的加载方式不同。移动端在生成代码时会将表单的组件直接写死到system-form/index组件中。</p><p><img src="'+i+'" alt="flowInfo组件"></p><p>这里使用了uni-app的<a href="https://uniapp.dcloud.net.cn/collocation/pages.html#easycom" target="_blank" rel="noopener noreferrer">easycom</a>，是一种组件自动注册机制。在pages.json中配置后，在页面中可以直接使用组件名，从而不需要手动引入。</p><p><img src="'+m+'" alt="flowInfo组件"></p><p>在判断加载哪一个form组件的逻辑上，参数的获取是和PC端一致的，判断逻辑则是在computed中用获取的参数拼凑出组件名与组件上写死的组件名相比较。</p><p><img src="'+k+'" alt="flowInfo组件"><img src="'+f+'" alt="flowInfo组件"></p>',20)]))}const v=n(d,[["render",g]]),h=JSON.parse('{"path":"/front_dev/form_logic.html","title":"表单的页面封装逻辑（PC端）","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744169755000,"contributors":[{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":2},{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":1}],"changelog":[{"hash":"2a3d23ec1d24173947de6a4bcab9d30b7e90134a","time":1744169755000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 更新文档 APP端 二开前准备及表单介绍部分"},{"hash":"02f57d762a90a2fa7144c0ab769a773211d71110","time":1743502134000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新前端部分的目录"},{"hash":"6b00dc3b796584764f267778542e4e208f169201","time":1743251097000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新表单封装说明"}]},"filePathRelative":"front_dev/form_logic.md"}');export{v as comp,h as data};
|
||||
BIN
docs/assets/form_logic_approval-W5mFAqfy.png
Normal file
BIN
docs/assets/form_logic_approval-W5mFAqfy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
docs/assets/form_logic_easycom-BG7WxKMV.png
Normal file
BIN
docs/assets/form_logic_easycom-BG7WxKMV.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
BIN
docs/assets/form_logic_flowInfo-DaD_tsW8.png
Normal file
BIN
docs/assets/form_logic_flowInfo-DaD_tsW8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
BIN
docs/assets/form_logic_system_form-cg_dlB6-.png
Normal file
BIN
docs/assets/form_logic_system_form-cg_dlB6-.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
BIN
docs/assets/form_logic_system_form1-XuFq0MM-.png
Normal file
BIN
docs/assets/form_logic_system_form1-XuFq0MM-.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
docs/assets/form_logic_system_form2-DnTonMCc.png
Normal file
BIN
docs/assets/form_logic_system_form2-DnTonMCc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
1
docs/assets/index.html-BfpfzkA1.js
Normal file
1
docs/assets/index.html-BfpfzkA1.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as o,c as t,b as n,o as a}from"./app-CDlLWk6N.js";const c={};function i(m,e){return a(),t("div",null,e[0]||(e[0]=[n("p",null,"hello front docs",-1)]))}const s=o(c,[["render",i]]),d=JSON.parse('{"path":"/front_components/","title":"","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1743218718000,"contributors":[{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":1}],"changelog":[{"hash":"fcf15d45f71b9ad206fb628de145043deb2dcd7e","time":1743218718000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"Initial commit"}]},"filePathRelative":"front_components/index.md"}');export{s as comp,d as data};
|
||||
1
docs/assets/index.html-ByXOdSON.js
Normal file
1
docs/assets/index.html-ByXOdSON.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as e,c as i,a as t,o as n}from"./app-CDlLWk6N.js";const o={};function r(s,a){return n(),i("div",null,a[0]||(a[0]=[t('<h1 id="关于全代码框架" tabindex="-1"><a class="header-anchor" href="#关于全代码框架"><span>关于全代码框架</span></a></h1><h1 id="注意事项" tabindex="-1"><a class="header-anchor" href="#注意事项"><span>注意事项</span></a></h1><p>由于表单拆分脚本的限制，为了方便后续的二开，在表单设计时需要遵守一些原则：</p><ul><li>避免在表单设计器里直接拖拽grid布局，系统提供了响应式布局（根据屏幕大小切换2/3列表单）的支持，无需手动绘制grid，如果需要grid或者flex布局，需要在表单拆分后进行。</li><li>避免在表单设计器里使用嵌套布局，目前脚本只支持<strong>非嵌套</strong>的Card、Tab布局和SubForm（明细表/子表）拆分。</li><li>在二开之前，不建议对config.ts文件进行格式化，否则可能会导致数据解析失败。因此，表单拆分应该在<strong>表单字段明确后立刻进行</strong>，越复杂的改动和配置拆分失败的概率越大。</li></ul><p>需要注意的是，表单拆分后依然使用config.ts文件，因此你可以生成新表单后，根据本文档对应章节提供的方法，手动补充缺失的字段，或者修改配置项。</p>',5)]))}const c=e(o,[["render",r]]),l=JSON.parse('{"path":"/","title":"关于全代码框架","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1743498223000,"contributors":[{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":2}],"changelog":[{"hash":"6d1f2ad492629141aa9a6c3928f16e820688a85b","time":1743498223000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新前端文档：传值和显示隐藏部分"},{"hash":"fcf15d45f71b9ad206fb628de145043deb2dcd7e","time":1743218718000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"Initial commit"}]},"filePathRelative":"index.md"}');export{c as comp,l as data};
|
||||
37
docs/assets/index.html-xafVSSBu.js
Normal file
37
docs/assets/index.html-xafVSSBu.js
Normal file
@ -0,0 +1,37 @@
|
||||
import{_ as s,c as a,a as t,o as p}from"./app-CDlLWk6N.js";const e={};function o(c,n){return p(),a("div",null,n[0]||(n[0]=[t(`<h1 id="二开说明" tabindex="-1"><a class="header-anchor" href="#二开说明"><span>二开说明</span></a></h1><p>全代码框架提供了全部的前端源码，因此你可以使用任何已有的前端知识去解决问题，本文档只是提供了一个推荐的思路。</p><p>类似的，如果你觉得封装组件过于繁琐，在保证功能和界面一致的前提下，可以使用antdesign-vue提供的原始组件，如数据表格、对话框等。</p><h1 id="二开准备" tabindex="-1"><a class="header-anchor" href="#二开准备"><span>二开准备</span></a></h1><p>本文档所有二开都是基于使用脚本将<strong>表单拆分</strong>后进行。为了封装的一致性，以及低开模式的实现，表单的主体是一个比较复杂的封装，通过JSON的配置数据实现字段渲染，虽然配置数据提供了校验、事件的接口，由于JSON文件和表单的主要文件在不同位置，在函数调用、值传递等方面有很多不便。因此我们提供了一个脚本，可以将JSON的配置文件拆分为若干个FormItem，以方便二开。</p><h1 id="pc端表单拆分" tabindex="-1"><a class="header-anchor" href="#pc端表单拆分"><span>PC端表单拆分</span></a></h1><p>脚本位于dev_tools目录，进入页面的components目录，如src/views/jianyi/test1/components，执行：</p><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh"><pre><code><span class="line"><span class="token function">node</span> <span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span>dev_tools<span class="token punctuation">\\</span>template_extend.js</span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>如果是目录层级不一样，需要调整相对路径的层级。如果提示文件解析失败，需要调整配置代码，保证export const formProps: FormProps这一段定义的表单主体文件，必须为纯JS，而且不能有任何外部模块的引入（代码只是使用eval的方式读取表单的ID等信息，并不会真的使用这些模块）。</p><p>可以参考二开脚本中的对应代码，临时定义一些虚假的模块使文件能顺利解析：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'total rows: '</span> <span class="token operator">+</span> confArr<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token keyword">const</span> funStr <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string"></span>
|
||||
<span class="line"> const uploadApi = ''; // 修复文件上传引用的API</span>
|
||||
<span class="line"> return </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>confArr<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'\\n'</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></span>
|
||||
<span class="line"></span><span class="token template-punctuation string">\`</span></span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token keyword">const</span> fun <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Function</span><span class="token punctuation">(</span>funStr<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line">formProps <span class="token operator">=</span> <span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>拆分成功后，目录里会多出CustomDevForm、CustomDevSumForm、CustomDevTableItem这些文件，如果有多个表格，也会有1、2这样的序号附加。</p><p>找到模块目录/components下的Form.vue，用我们自己的表单（需要引用）替换掉原来的SimpleForm：</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>CustomDevForm</span></span>
|
||||
<span class="line"> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>systemFormRef<span class="token punctuation">"</span></span></span>
|
||||
<span class="line"> <span class="token attr-name">:formProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>data.formDataProps<span class="token punctuation">"</span></span></span>
|
||||
<span class="line"> <span class="token attr-name">:formModel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{}<span class="token punctuation">"</span></span></span>
|
||||
<span class="line"> <span class="token attr-name">:isWorkFlow</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>props.fromPage!=FromPageType.MENU<span class="token punctuation">"</span></span></span>
|
||||
<span class="line"> <span class="token punctuation">/></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
|
||||
<span class="line"> <span class="token keyword">import</span> <span class="token punctuation">{</span> reactive<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> onMounted <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">import</span> <span class="token punctuation">{</span> formProps<span class="token punctuation">,</span> formEventConfigs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./config'</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token comment">//注释掉原来的引入</span></span>
|
||||
<span class="line"> <span class="token comment">//import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';</span></span>
|
||||
<span class="line"> <span class="token comment">//引入二开拆分后的文件，注意template部分也要换掉</span></span>
|
||||
<span class="line"> <span class="token keyword">import</span> CustomDevForm <span class="token keyword">from</span> <span class="token string">"/@/views/jianyi/devgaofirst/components/CustomDevForm.vue"</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果模块没有经过定制，此时除了界面略有差别，应该和原有功能一致。</p><h1 id="移动端表单拆分" tabindex="-1"><a class="header-anchor" href="#移动端表单拆分"><span>移动端表单拆分</span></a></h1><p>移动端表单拆分的执行逻辑大体和PC端一致，脚本位于common/tools目录，进入页面的components目录，如pages/jianyi/test1/components，执行：</p><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh"><pre><code><span class="line"><span class="token function">node</span> <span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span><span class="token punctuation">..</span><span class="token punctuation">\\</span>common<span class="token punctuation">\\</span>tools<span class="token punctuation">\\</span>template_extend.js</span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>如果目录层级难以确定，需要调整相对路径的层级。最简单的方法是直接将脚本文件复制到对应目录下，然后在文件目录的层级下执行脚本。 需要注意的是，移动端表单生成的config/index.js文件中的formProps参数被压缩成为一行，在执行脚本前需将其格式化为标准的Object格式。 同样的，找到模块目录/components下的Form.vue，用我们自己的表单（需要引用）替换掉原来的SimpleForm：</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-fixed<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>CustomDevForm</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formRef<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>renderKey<span class="token punctuation">"</span></span> <span class="token attr-name">:formProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formConfig.formProps<span class="token punctuation">"</span></span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span> <span class="token attr-name">:control</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formConfig.type<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>CustomDevForm</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
|
||||
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span>onMounted <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token keyword">import</span> SimpleForm <span class="token keyword">from</span> <span class="token string">'@/components/simple-form/SimpleForm.vue'</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token keyword">import</span> CustomDevForm <span class="token keyword">from</span> <span class="token string">'./CustomDevForm.vue'</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,20)]))}const i=s(e,[["render",o]]),u=JSON.parse('{"path":"/front_dev/","title":"二开说明","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744257372000,"contributors":[{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":1},{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":2}],"changelog":[{"hash":"51b826e36d1d26ef2ed843c669a1ab12b3fcb8f5","time":1744257372000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 文档优化 新写 为工具栏添加按钮， 为表单新添加新字段"},{"hash":"2a3d23ec1d24173947de6a4bcab9d30b7e90134a","time":1744169755000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 更新文档 APP端 二开前准备及表单介绍部分"},{"hash":"fcf15d45f71b9ad206fb628de145043deb2dcd7e","time":1743218718000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"Initial commit"}]},"filePathRelative":"front_dev/index.md"}');export{i as comp,u as data};
|
||||
141
docs/assets/pass_value.html-CFBEHlue.js
Normal file
141
docs/assets/pass_value.html-CFBEHlue.js
Normal file
@ -0,0 +1,141 @@
|
||||
import{_ as s,c as a,a as p,o as e}from"./app-CDlLWk6N.js";const t=""+new URL("vmodel_demo--x0CSlwt.png",import.meta.url).href,o={};function l(c,n){return e(),a("div",null,n[0]||(n[0]=[p(`<h1 id="pc端逻辑" tabindex="-1"><a class="header-anchor" href="#pc端逻辑"><span>PC端逻辑</span></a></h1><p>未绑定流程的表单和带流程的标配单赋值逻辑基本一致，在原始框架中，带流程的表单详情取值实际上取得是流程保存的一份冗余数据，而列表读取的是原始表单的数据，这样会导致数据不一致。在后续版本中，这个问题已经被修复。</p><h2 id="赋值过程-表单初始化" tabindex="-1"><a class="header-anchor" href="#赋值过程-表单初始化"><span>赋值过程（表单初始化）</span></a></h2><p>以流程表单为例，入口页面为SystemForm/src/Form，异步组件加载完成之后，会调用loadingCompleted函数。这个函数会调用ref的setWorkFlowForm，函数定义位于生成代码的components/Form.vue中。</p><p>对于非新建场景，id（就是默认的rowKey）存在，因此会调用setFormDataFromId，重新查一次表单数据，避免数据不一致问题，此时formModel实际上是有值的，但是值来自流程冗余，因此因此会调用setFormDataFromId会重新覆盖formModel的值。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">setWorkFlowForm</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">let</span> flowData <span class="token operator">=</span> <span class="token function">changeWorkFlowForm</span><span class="token punctuation">(</span><span class="token function">cloneDeep</span><span class="token punctuation">(</span>formProps<span class="token punctuation">)</span><span class="token punctuation">,</span> obj<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">let</span> <span class="token punctuation">{</span>buildOptionJson<span class="token punctuation">,</span> uploadComponentIds<span class="token punctuation">,</span> formModels<span class="token punctuation">,</span> isViewProcess<span class="token punctuation">}</span> <span class="token operator">=</span> flowData<span class="token punctuation">;</span></span>
|
||||
<span class="line"> data<span class="token punctuation">.</span>formDataProps <span class="token operator">=</span> buildOptionJson<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token function">emits</span><span class="token punctuation">(</span><span class="token string">'changeUploadComponentIds'</span><span class="token punctuation">,</span> uploadComponentIds<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//工作流中必须保存上传组件id【附件汇总需要】</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>isViewProcess<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token function">setDisabledForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//查看</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> state<span class="token punctuation">.</span>formModel <span class="token operator">=</span> formModels<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>formModels<span class="token punctuation">[</span>RowKey<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token function">setFormDataFromId</span><span class="token punctuation">(</span>formModels<span class="token punctuation">[</span>RowKey<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>ex<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>最后，这个函数会调用SimpleForm/SimpleFormSetup的setFieldsValue函数完成表单赋值，因此，最上面template里formModel的定义仅仅是为了防止初值没有报错。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">setFormDataFromId</span><span class="token punctuation">(</span><span class="token parameter">rowId<span class="token punctuation">,</span> skipUpdate</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">const</span> record <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getDevgaofirst</span><span class="token punctuation">(</span>rowId<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>skipUpdate<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> record<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token function">setFieldsValue</span><span class="token punctuation">(</span>record<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> state<span class="token punctuation">.</span>formModel <span class="token operator">=</span> record<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">await</span> <span class="token function">getFormDataEvent</span><span class="token punctuation">(</span>formEventConfigs<span class="token punctuation">,</span> state<span class="token punctuation">.</span>formModel<span class="token punctuation">,</span> systemFormRef<span class="token punctuation">.</span>value<span class="token punctuation">,</span> formProps<span class="token punctuation">.</span>schemas<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//表单事件：获取表单数据</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> record<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="取值过程-表单提交" tabindex="-1"><a class="header-anchor" href="#取值过程-表单提交"><span>取值过程（表单提交）</span></a></h2><p>表单提交时调用的实际上是表单的校验函数，这个函数会返回表单的值：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">saveLaunch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> data<span class="token punctuation">.</span>submitLoading <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> loading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">let</span> validateForms <span class="token operator">=</span> <span class="token keyword">await</span> formInformation<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">validateForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>validateForms<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token comment">// 后面代码省略</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>需要注意的是，这个函数的返回值必须表单中有效的antd-vue表单字段，而且字段必须渲染出来（可以v-show不能v-if，隐藏字段会自动处理）。因此修改提交值可以在模块生成的form.vue中找到validate函数：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">validate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">let</span> values <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> values <span class="token operator">=</span> <span class="token keyword">await</span> systemFormRef<span class="token punctuation">.</span>value<span class="token operator">?.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token comment">//可以修改values，加入需要额外提交给后端的值</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>formDataProps<span class="token punctuation">.</span>hiddenComponent<span class="token operator">?.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token comment">// 其他代码省略</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">finally</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> values<span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="表单值绑定-v-model" tabindex="-1"><a class="header-anchor" href="#表单值绑定-v-model"><span>表单值绑定（v-model）</span></a></h2><p>在拆分后的CustomDevForm中，formModel为响应式的，下面是一个例子，直接利用formModel拼接字符串，同时保持表单样式（提交时不传值）：</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!-- 其余代码省略 --></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getColWidth({responsive: true})<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormItem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vmodel演示<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> {{formModel.danXingWenBen5090 + '/' + formModel.danXingWenBen23227}}</span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FormItem</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果如下： <img src="`+t+`" alt="演示"></p><h1 id="移动端逻辑" tabindex="-1"><a class="header-anchor" href="#移动端逻辑"><span>移动端逻辑</span></a></h1><p>表述与PC端基本一致，不再赘述。流程表单赋值也修改为从原始表单获取而非流程表单。</p><h2 id="赋值过程-表单初始化-1" tabindex="-1"><a class="header-anchor" href="#赋值过程-表单初始化-1"><span>赋值过程（表单初始化）</span></a></h2><p>移动端赋值过程相对PC端简化很多，在流程层获取到流程数据后，向下传递，在FormInformation.vue层存贮到公共文件userFormInfo.js文件中。然后接着通过loadForm方法向下层组件传递。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token comment">// FormInformation.vue</span></span>
|
||||
<span class="line"><span class="token keyword">function</span> <span class="token function">setFormModel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>platform<span class="token operator">==</span><span class="token string">'wx'</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token comment">// 无关代码省略</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> index <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> index <span class="token operator"><</span> itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">.</span>length<span class="token punctuation">;</span> index<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>forms<span class="token punctuation">.</span>formModels<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">!=</span><span class="token string">"{}"</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token comment">//这里放入流程表单数据</span></span>
|
||||
<span class="line"> itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">loadForm</span><span class="token punctuation">(</span>forms<span class="token punctuation">.</span>formModels<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>system-form层同样触发下层form的loadForm方法。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token comment">// system-form层</span></span>
|
||||
<span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">loadForm</span><span class="token punctuation">(</span><span class="token parameter">formModel</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">await</span> systemRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">loadForm</span><span class="token punctuation">(</span>formModel<span class="token punctuation">)</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在生成的表单文件form.vue中，通过传递过来的formModel的rowKey值查询一遍原始表单数据，最后赋值。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token comment">// form.vue</span></span>
|
||||
<span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">loadForm</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">let</span> id <span class="token operator">=</span> val<span class="token punctuation">[</span>rowKey<span class="token punctuation">]</span></span>
|
||||
<span class="line"> formConfig<span class="token punctuation">.</span>id <span class="token operator">=</span> id<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">const</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> data</span>
|
||||
<span class="line"> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getxxx</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">await</span> formRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">setFormData</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">.</span>formModel<span class="token punctuation">,</span> <span class="token operator">...</span>data<span class="token punctuation">}</span><span class="token punctuation">)</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="取值过程-表单提交-1" tabindex="-1"><a class="header-anchor" href="#取值过程-表单提交-1"><span>取值过程（表单提交）</span></a></h2><p>移动端与PC端不同的是，在提交表单的时候校验函数和获取表单值的函数是分别进行的，validate函数并没有返回表单的值。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token comment">// 流程提交参数</span></span>
|
||||
<span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">saveLaunch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> uni<span class="token punctuation">.</span><span class="token function">showLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token comment">// 校验表单</span></span>
|
||||
<span class="line"> <span class="token keyword">let</span> validateForms <span class="token operator">=</span> <span class="token keyword">await</span> flowInfoRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">validateForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>validateForms<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">let</span> successValidate <span class="token operator">=</span> validateForms<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">ele</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> ele<span class="token punctuation">.</span>validate<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>successValidate<span class="token punctuation">.</span>length <span class="token operator">==</span> validateForms<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token comment">// 获取表单值</span></span>
|
||||
<span class="line"> mainFormModels<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">await</span> flowInfoRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">getFormModels</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token comment">// 其他代码省略</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token comment">// 其他代码省略</span></span>
|
||||
<span class="line"> </span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这里获取表单值的函数的最底层是在simpleForm.vue公共组件，在这里getFormData函数返回与表单双向绑定的formModelRef的值，然后每一层都有一个getFormData函数向外暴露，以方便在最外层获取表单的值。在FormInformation.vue中，因为原始框架支持多表单，所以对多个表单值进行了合并处理。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getFormModels</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">let</span> formModes <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>platform<span class="token operator">==</span><span class="token string">'wx'</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token comment">// 无关代码省略</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> index <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> index <span class="token operator"><</span> forms<span class="token punctuation">.</span>configs<span class="token punctuation">.</span>length<span class="token punctuation">;</span> index<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">let</span> formModel <span class="token operator">=</span> <span class="token keyword">await</span> itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token operator">?.</span><span class="token function">getFormData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span><span class="token punctuation">(</span>itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>formType<span class="token operator">==</span>FormType<span class="token punctuation">.</span><span class="token constant">SYSTEM</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">let</span> formModelIdVal <span class="token operator">=</span> <span class="token keyword">await</span> itemRefs<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token operator">?.</span><span class="token function">submit</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> formModel <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token operator">...</span>formModel<span class="token punctuation">,</span><span class="token operator">...</span>formModelIdVal<span class="token punctuation">}</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> formModes<span class="token punctuation">[</span>forms<span class="token punctuation">.</span>configs<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>formKey<span class="token punctuation">]</span> <span class="token operator">=</span> formModel<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token comment">// 无关代码省略</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="表单值绑定-v-model-1" tabindex="-1"><a class="header-anchor" href="#表单值绑定-v-model-1"><span>表单值绑定（v-model）</span></a></h2><p>该部分逻辑基本与PC端一致，不再赘述。</p>`,33)]))}const u=s(o,[["render",l]]),r=JSON.parse('{"path":"/front_dev/pass_value.html","title":"PC端逻辑","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"赋值过程（表单初始化）","slug":"赋值过程-表单初始化","link":"#赋值过程-表单初始化","children":[]},{"level":2,"title":"取值过程（表单提交）","slug":"取值过程-表单提交","link":"#取值过程-表单提交","children":[]},{"level":2,"title":"表单值绑定（v-model）","slug":"表单值绑定-v-model","link":"#表单值绑定-v-model","children":[]},{"level":2,"title":"赋值过程（表单初始化）","slug":"赋值过程-表单初始化-1","link":"#赋值过程-表单初始化-1","children":[]},{"level":2,"title":"取值过程（表单提交）","slug":"取值过程-表单提交-1","link":"#取值过程-表单提交-1","children":[]},{"level":2,"title":"表单值绑定（v-model）","slug":"表单值绑定-v-model-1","link":"#表单值绑定-v-model-1","children":[]}],"git":{"updatedTime":1744251107000,"contributors":[{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":3},{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":2}],"changelog":[{"hash":"c84155fcf9531f25802f735edad59713762e5ca9","time":1744251107000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 已写文档优化"},{"hash":"2a3d23ec1d24173947de6a4bcab9d30b7e90134a","time":1744169755000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 更新文档 APP端 二开前准备及表单介绍部分"},{"hash":"ade1311d7bba455235b42db2e5f325116e3b86f4","time":1743940801000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新pc端前端文档"},{"hash":"6d1f2ad492629141aa9a6c3928f16e820688a85b","time":1743498223000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新前端文档：传值和显示隐藏部分"},{"hash":"6b00dc3b796584764f267778542e4e208f169201","time":1743251097000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新表单封装说明"}]},"filePathRelative":"front_dev/pass_value.md"}');export{u as comp,r as data};
|
||||
57
docs/assets/show_and_hide.html-Bai-A-AK.js
Normal file
57
docs/assets/show_and_hide.html-Bai-A-AK.js
Normal file
@ -0,0 +1,57 @@
|
||||
import{_ as n,c as a,a as p,o as e}from"./app-CDlLWk6N.js";const t={};function o(l,s){return e(),a("div",null,s[0]||(s[0]=[p(`<h1 id="pc端设计" tabindex="-1"><a class="header-anchor" href="#pc端设计"><span>PC端设计</span></a></h1><h2 id="默认情况下的显示-隐藏设计" tabindex="-1"><a class="header-anchor" href="#默认情况下的显示-隐藏设计"><span>默认情况下的显示/隐藏设计</span></a></h2><p>以默认的组件封装为例，我们可以看到3个控制显隐的部分</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Col</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getIfShow(schema, formModel[schema.field])<span class="token punctuation">"</span></span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getIsShow(schema, formModel[schema.field])<span class="token punctuation">"</span></span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getColWidth(schema)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>showComponent(schema) && schema.type !== 'slot'<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SimpleFormItem</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formModel[schema.field]<span class="token punctuation">"</span></span> <span class="token attr-name">:form-api</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formApi<span class="token punctuation">"</span></span> <span class="token attr-name">:isWorkFlow</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>isWorkFlow<span class="token punctuation">"</span></span> <span class="token attr-name">:refreshFieldObj</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>refreshFieldObj<span class="token punctuation">"</span></span> <span class="token attr-name">:schema</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>schema<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Col</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>showComponent是某些特殊组件的显隐控制，和组件类型有关，目前只有2个用到该值，一个是隐藏字段，一个是在非流程中隐藏审批意见字段。</p><p>而getIfShow和getIsShow的逻辑完全相同，都是判断ifShow和isShow（读的是show）的值，这两个值可以是bool也可以是函数，区别是：</p><ul><li>isShow是直接控制表单字段显隐的属性，无需流程绑定，可以在表单编辑器配置，也可以在config.ts里修改</li><li>ifShow是用于框架内部逻辑，是的，全开的内置页面（包括系统设置、权限管理等）也使用同样的封装逻辑，假如内置页面需要某些字段在特定时候才能修改，就会使用ifShow字段</li></ul><p>对于流程绑定的显隐是show字段，这个字段由useWorkflowForm将流程节点配置的view参数转化得到，这里你也可以看到，流程通过dynamicDisabled字段控制只读编辑：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">function</span> <span class="token function">getSchemePermissionItem</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>permissionConfig<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token comment">//查看</span></span>
|
||||
<span class="line"> schema<span class="token punctuation">.</span>show <span class="token operator">=</span> permissionConfig<span class="token punctuation">.</span>view<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token comment">// 无用代码省略</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>isViewProcess<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> schema<span class="token punctuation">.</span>dynamicDisabled <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> schema<span class="token punctuation">.</span>show <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> schema<span class="token punctuation">.</span>dynamicDisabled <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在SimpleFormItem里会读取这个show参数：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">function</span> <span class="token function">getShow</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">schema</span><span class="token operator">:</span> FormSchema</span><span class="token punctuation">)</span><span class="token operator">:</span> boolean <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> show <span class="token punctuation">}</span> <span class="token operator">=</span> schema<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">let</span> isIfShow <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isBoolean</span><span class="token punctuation">(</span>show<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> isIfShow <span class="token operator">=</span> show<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> isIfShow<span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>注意show的优先级大于isShow，这点从代码可以看出来，getIsShow函数中，如果show有值会覆盖掉isShow的值。</p><h2 id="二开控制显隐" tabindex="-1"><a class="header-anchor" href="#二开控制显隐"><span>二开控制显隐</span></a></h2><p>对于拆分后的代码，所有字段都是Col和SimpleFormItem，因此直接使用v-show控制显隐即可。对于非拆分的字段，可以复写配置的ifShow，注意以配置文件复写的ifShow在外层，和key同级：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token comment">// 无关属性省略</span></span>
|
||||
<span class="line"><span class="token keyword">const</span> field <span class="token operator">=</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'044e8bc1f9c345e0afa024ed7f21fe50'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">field</span><span class="token operator">:</span> <span class="token string">'duoXingWenBen3343'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'多行文本'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'textarea'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token comment">// 四个参数分别为当前字段值、整个页面的model、当前字段配置、当前字段名</span></span>
|
||||
<span class="line"> <span class="token function-variable function">ifShow</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>values<span class="token punctuation">,</span> model<span class="token punctuation">,</span> schema<span class="token punctuation">,</span> field<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> model<span class="token punctuation">.</span>danXingWenBen23227<span class="token operator">?.</span>length <span class="token operator">></span> <span class="token number">10</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果被控制的组件位于tab、grid等嵌套组件内，我们建议直接拆分后二开，对于非拆分二开，这里提供个思路：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token keyword">function</span> <span class="token function">getIsShow</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">schema</span><span class="token operator">:</span> FormSchema</span><span class="token punctuation">)</span><span class="token operator">:</span> boolean <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> componentProps<span class="token punctuation">,</span> show <span class="token punctuation">}</span> <span class="token operator">=</span> schema <span class="token keyword">as</span> any<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">let</span> isShow <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isBoolean</span><span class="token punctuation">(</span>componentProps<span class="token operator">?.</span>isShow<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> isShow <span class="token operator">=</span> componentProps<span class="token punctuation">.</span>isShow<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> componentProps<span class="token operator">?.</span>isShow <span class="token operator">===</span> <span class="token string">'function'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token comment">// 支持isShow的函数格式，这里的formModel为响应式，可以拿到表单的动态值</span></span>
|
||||
<span class="line"> isShow <span class="token operator">=</span> componentProps<span class="token punctuation">.</span><span class="token function">isShow</span><span class="token punctuation">(</span>formModel<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isBoolean</span><span class="token punctuation">(</span>show<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token comment">// 要求show和isShow同时为真才显示</span></span>
|
||||
<span class="line"> isShow <span class="token operator">=</span> show <span class="token operator">&&</span> isShow<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> isShow<span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这样就可以将isShow改为函数，动态计算显隐状态。</p><h1 id="移动端设计" tabindex="-1"><a class="header-anchor" href="#移动端设计"><span>移动端设计</span></a></h1><p>移动端组件显隐逻辑基本与PC端一致，不再赘述。</p>`,20)]))}const i=n(t,[["render",o]]),u=JSON.parse('{"path":"/front_dev/show_and_hide.html","title":"PC端设计","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"默认情况下的显示/隐藏设计","slug":"默认情况下的显示-隐藏设计","link":"#默认情况下的显示-隐藏设计","children":[]},{"level":2,"title":"二开控制显隐","slug":"二开控制显隐","link":"#二开控制显隐","children":[]}],"git":{"updatedTime":1747389721000,"contributors":[{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":3},{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":1}],"changelog":[{"hash":"188cbc46624542e1a9abf959efad3722b26c8754","time":1747389721000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新grid等嵌套组件的显隐控制方法"},{"hash":"2a3d23ec1d24173947de6a4bcab9d30b7e90134a","time":1744169755000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 更新文档 APP端 二开前准备及表单介绍部分"},{"hash":"ade1311d7bba455235b42db2e5f325116e3b86f4","time":1743940801000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新pc端前端文档"},{"hash":"6d1f2ad492629141aa9a6c3928f16e820688a85b","time":1743498223000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新前端文档：传值和显示隐藏部分"}]},"filePathRelative":"front_dev/show_and_hide.md"}');export{i as comp,u as data};
|
||||
1
docs/assets/style-CQp7YV5d.css
Normal file
1
docs/assets/style-CQp7YV5d.css
Normal file
File diff suppressed because one or more lines are too long
225
docs/assets/table.html-BrzZNtYJ.js
Normal file
225
docs/assets/table.html-BrzZNtYJ.js
Normal file
@ -0,0 +1,225 @@
|
||||
import{_ as s,c as a,a as t,o as p}from"./app-CDlLWk6N.js";const e=""+new URL("custom_searchform-C_-nGOSW.png",import.meta.url).href,l=""+new URL("table_1-Dc0vlV5m.png",import.meta.url).href,c=""+new URL("table_2-BfgKP28D.png",import.meta.url).href,o=""+new URL("table_3-DJgiqMOC.png",import.meta.url).href,i={};function u(r,n){return p(),a("div",null,n[0]||(n[0]=[t(`<h1 id="表格" tabindex="-1"><a class="header-anchor" href="#表格"><span>表格</span></a></h1><h2 id="pc端" tabindex="-1"><a class="header-anchor" href="#pc端"><span>PC端</span></a></h2><h3 id="自定义表格搜索功能" tabindex="-1"><a class="header-anchor" href="#自定义表格搜索功能"><span>自定义表格搜索功能</span></a></h3><p>在某些场景，如级联、表单联动，则需要自定义搜索功能，首先，我们需要取消全开框架生成的搜索功能，需要在生成的模块中找到<strong>index.vue</strong>文件，找到<strong>useTable</strong>并<strong>schemas</strong>属性给删掉，并在需要添加<strong>showSubmitButton: false</strong>，此属性是取消原来搜索功能的搜索按钮，将<strong>showResetButton</strong>设置为false，隐藏原来搜索功能的重置按钮，经过以上操作就会发现表格自带的搜索功能消失不见。</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
|
||||
<span class="line"><span class="token comment">// 前面代码省略</span></span>
|
||||
<span class="line"><span class="token keyword">const</span> <span class="token punctuation">[</span>registerTable<span class="token punctuation">,</span> <span class="token punctuation">{</span> reload<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useTable</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">(</span>formName <span class="token operator">+</span> <span class="token string">'列表'</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">api</span><span class="token operator">:</span> getTestTablePage<span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">rowKey</span><span class="token operator">:</span> <span class="token string">'id'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">columns</span><span class="token operator">:</span> filterColumns<span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">formConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token literal-property property">rowProps</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token literal-property property">gutter</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">schemas</span><span class="token operator">:</span> searchFormSchema<span class="token punctuation">,</span> <span class="token comment">// 原始表单显示的表单项的配置</span></span>
|
||||
<span class="line"> <span class="token literal-property property">fieldMapToTime</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">showResetButton</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 控制原始表单的重置功能，一般为“重置”按钮</span></span>
|
||||
<span class="line"> <span class="token literal-property property">showSubmitButton</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">// 控制原始表单触发搜索的按钮的显隐，一般为“搜索”按钮</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token function-variable function">beforeFetch</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token operator">...</span>params<span class="token punctuation">,</span> <span class="token literal-property property">FormId</span><span class="token operator">:</span> formIdComputedRef<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token constant">PK</span><span class="token operator">:</span> <span class="token string">'id'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token function-variable function">afterFetch</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> tableRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">setToolBarWidth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">useSearchForm</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否使用搜索表单</span></span>
|
||||
<span class="line"> <span class="token literal-property property">showTableSetting</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token literal-property property">striped</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">actionColumn</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">160</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'操作'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">dataIndex</span><span class="token operator">:</span> <span class="token string">'action'</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">slots</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">customRender</span><span class="token operator">:</span> <span class="token string">'action'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">tableSetting</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">setting</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token comment">// 后面省略代码</span></span>
|
||||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后，自定义搜索表单，可以用ant-design-vue中的a-form，特别注意的，自定义搜索表单的字段必须存在表格已经定义的字段里面，若不存在的话，可能会导致该字段搜索无效，具体字段可以查看<strong>index.vue</strong>所在目录下的<strong>components</strong>对应的<strong>config.ts</strong>的<strong>searchFormSchema</strong>中的<strong>field</strong>，如下：</p><p>config.ts</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line">/** 省略代码 **/</span>
|
||||
<span class="line">export const searchFormSchema: FormSchema[] = [</span>
|
||||
<span class="line"> {</span>
|
||||
<span class="line"> field: 'mingZi8847',</span>
|
||||
<span class="line"> label: '名字',</span>
|
||||
<span class="line"> component: 'Input',</span>
|
||||
<span class="line"> },</span>
|
||||
<span class="line"> {</span>
|
||||
<span class="line"> field: 'zhi4547',</span>
|
||||
<span class="line"> label: '值',</span>
|
||||
<span class="line"> component: 'Input',</span>
|
||||
<span class="line"> },</span>
|
||||
<span class="line">];</span>
|
||||
<span class="line">/** 省略代码 **/</span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>接下来就是重写搜索功能，全开框架的<strong>BasicTable</strong>组件预留了一个<strong>headerContent</strong>的插槽，自定义的搜索功能就是写在这个插槽里面，而<strong>BasicTable</strong>组件提供了一个搜索表格方法<strong>beforeSearchInfoChange</strong>，我们只需要把搜索的字段和对应的值传入这个方法，接口实现与表格的联动，如下：</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>BasicTable</span> <span class="token attr-name">@register</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>registerTable<span class="token punctuation">"</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tableRef<span class="token punctuation">"</span></span> <span class="token attr-name">@row-dbClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dbClickRow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">#headerContent</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-form</span></span>
|
||||
<span class="line"> <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inline<span class="token punctuation">"</span></span></span>
|
||||
<span class="line"> <span class="token attr-name">@submit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>customHandleSubmit<span class="token punctuation">"</span></span></span>
|
||||
<span class="line"> <span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>名字<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-input</span> <span class="token attr-name"><span class="token namespace">v-model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>customSearchForm.mingZi8847<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入名称<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form-item</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-form-item</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">html-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>搜索<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-button</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form-item</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!-- 其余代码省略 --></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>BasicTable</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
|
||||
<span class="line"><span class="token comment">// 前面代码省略</span></span>
|
||||
<span class="line"><span class="token keyword">const</span> customSearchForm <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token literal-property property">mingZi8847</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span class="token keyword">function</span> <span class="token function">customHandleSubmit</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> tableRef<span class="token punctuation">.</span>value<span class="token operator">?.</span><span class="token function">beforeSearchInfoChange</span><span class="token punctuation">(</span>customSearchForm<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"><span class="token comment">// 后面省略代码</span></span>
|
||||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>特别注意</strong>：</p><p>1、在比较早的全开框架版本中，<strong>BasicTable</strong>组件的<strong>beforeSearchInfoChange</strong>并没有导出，最新版本则已经导出；若没有，则需要自己找到<strong>BasicTable</strong>组件手动导出，如下：</p><p>BasicTable.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
|
||||
<span class="line"><span class="token comment">// 前面代码省略</span></span>
|
||||
<span class="line"><span class="token keyword">function</span> <span class="token function">beforeSearchInfoChange</span><span class="token punctuation">(</span><span class="token parameter">info</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token function">setSearchFormData</span><span class="token punctuation">(</span>info<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token function">handleSearchInfoChange</span><span class="token punctuation">(</span>info<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"><span class="token comment">// 中间代码省略</span></span>
|
||||
<span class="line"><span class="token function">expose</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token operator">...</span>tableAction<span class="token punctuation">,</span> beforeSearchInfoChange<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token comment">// 后面省略代码</span></span>
|
||||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>2、全开框架的<strong>BasicTable</strong>组件预留了一个<strong>headerContent</strong>的插槽默认是在最右侧，若需让它靠左的话，可在<strong>index.vue</strong>中添加以下样式。</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>less<span class="token punctuation">"</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"></span>
|
||||
<span class="line"> <span class="token selector">// 前面代码省略</span>
|
||||
<span class="line"> :deep(.ant-table-title)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token selector">.items-center</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="带有展开功能的搜索二开" tabindex="-1"><a class="header-anchor" href="#带有展开功能的搜索二开"><span>带有展开功能的搜索二开</span></a></h3><p>如果你的搜索条件比较多，而且需要保持原有的样式，可以按照下面的方式进行二开。这里隐藏了原始代码，只给出template和样式的修改部分，事件绑定可以参考源文件里的组件定义。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>BasicTable</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tableRef<span class="token punctuation">"</span></span> <span class="token attr-name">@register</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>registerTable<span class="token punctuation">"</span></span> <span class="token attr-name">@row-dbClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dbClickRow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">#headerContent</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!-- 默认form-item有下边距，这里写死高度，因为展开的时候还要保持下边距 --></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 32px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vben-basic-form<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!-- suspensionRow样式默认带了弹出效果 但是必须和vben-basic-form连用 --></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-row</span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ suspensionRow: isAdv }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!-- 注意这里的层级，row部分是搜索表单，col里面的action是搜索按钮 --></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-row</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>搜索字段1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入名称<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form-item</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-col</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>搜索字段2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入名称<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form-item</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-col</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>搜索字段3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入名称<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form-item</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-col</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!-- 不展开的时候其余的字段隐藏 注意默认样式col-8在搜索中定死了宽度280px --></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{display: isAdv ? 'block' : 'none'}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>搜索字段4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入名称<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form-item</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-col</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{display: isAdv ? 'block' : 'none'}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>搜索字段5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入名称<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form-item</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-col</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{display: isAdv ? 'block' : 'none'}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>搜索字段6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入名称<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form-item</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-col</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-row</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-col</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!-- 只要绑定事件就行 默认就开启了搜索、重置、展开这3个按钮 --></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form-action</span> <span class="token attr-name">:is-advanced</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>isAdv<span class="token punctuation">"</span></span> <span class="token attr-name">@toggle-advanced</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>toggleAdv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form-action</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-col</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-row</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>BasicTable</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
|
||||
<span class="line"> <span class="token keyword">import</span> FormAction <span class="token keyword">from</span> <span class="token string">'/@/components/Form/src/components/FormAction.vue'</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token keyword">const</span> isAdv <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token keyword">function</span> <span class="token function">toggleAdv</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token comment">// 注意form-action的展开状态不是自己保存的 需要外部状态控制</span></span>
|
||||
<span class="line"> isAdv<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token operator">!</span>isAdv<span class="token punctuation">.</span>value<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"></span>
|
||||
<span class="line"> <span class="token comment">/*隐藏原来表单的区域 否则中间会被占满*/</span></span>
|
||||
<span class="line"> <span class="token selector">:deep(.ant-table-title .items-center)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"> <span class="token comment">/* 让展开时的搜索按钮和表单左右显示 */</span></span>
|
||||
<span class="line"> <span class="token selector">:deep(.ant-row.suspensionRow)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token property">flex-wrap</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果如下 <img src="`+e+`" alt="搜索二开效果"></p><h3 id="自定义表格列" tabindex="-1"><a class="header-anchor" href="#自定义表格列"><span>自定义表格列</span></a></h3><p>在某些场景，我们需要对表格的某些列进行定制化开发，例如显示进度条，tag标签等，可在<strong>BasicTable</strong>的<strong>bodyCell</strong>插槽里面添加，在<strong>bodyCell</strong>插槽里面尽量使用<strong>v-if/v-else-if</strong>，防止匹配多列的情况，其中：<strong>column</strong>为列的配置，<strong>record</strong>为数据源。<strong>特别注意</strong>：自定义表格列会覆盖原有的列，示例代码如下：</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>BasicTable</span> <span class="token attr-name">@register</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>registerTable<span class="token punctuation">"</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tableRef<span class="token punctuation">"</span></span> <span class="token attr-name">@row-dbClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dbClickRow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!-- 前面代码省略 --></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">#bodyCell</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ column, record }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!-- 前面代码省略 --></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">v-else-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>column.dataIndex === 'zhi4547'<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-progress</span> <span class="token attr-name">:percent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>record[column.dataIndex]<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>BasicTable</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果：</p><p><img src="`+l+`" alt="自定义表格列效果"></p><h3 id="修改分页" tabindex="-1"><a class="header-anchor" href="#修改分页"><span>修改分页</span></a></h3><p>若你不需要分页，可以在<strong>BasicTable</strong>组件上，将<strong>pagination</strong>置为<strong>false</strong>即可取消分页，如下：</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token comment"><!-- 前面代码省略 --></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>BasicTable</span> <span class="token attr-name">@register</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>registerTable<span class="token punctuation">"</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tableRef<span class="token punctuation">"</span></span> <span class="token attr-name">:pagination</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span> <span class="token attr-name">@row-dbClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dbClickRow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token comment"><!-- 中间代码省略 --></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>BasicTable</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token comment"><!-- 后面代码省略 --></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>修改分页，若需要调整分页的样式，<strong>BasicTable</strong>组件提供了获取分页配置接口<strong>getPaginationRef</strong>和设置分页配置接口<strong>setPagination</strong>，分页配置里面具体的参数可以参考<strong>Ant-Design-Vue</strong>的分页<strong>Pagination</strong>，修改分页配置生命周期<strong>onMounted</strong>修改，如下：我将分页修改成简单分页以及每页只展示1条数据。</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line">// 前面代码省略</span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
|
||||
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> nextTick <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token comment">// 中间代码省略</span></span>
|
||||
<span class="line"><span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token comment">// 中间代码省略</span></span>
|
||||
<span class="line"> <span class="token function">nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">const</span> pagination <span class="token operator">=</span> tableRef<span class="token punctuation">.</span>value<span class="token operator">?.</span><span class="token function">getPaginationRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> pagination<span class="token punctuation">.</span>simple <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> pagination<span class="token punctuation">.</span>pageSize <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> tableRef<span class="token punctuation">.</span>value<span class="token operator">?.</span><span class="token function">setPagination</span><span class="token punctuation">(</span>pagination<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token comment">// 后面代码省略</span></span>
|
||||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果如下：</p><p><img src="`+c+`" alt="修改表格分页效果"></p><h3 id="表格的其他功能" tabindex="-1"><a class="header-anchor" href="#表格的其他功能"><span>表格的其他功能</span></a></h3><p><strong>BasicTable</strong>组件还提供了其他功能，如<strong>useTable</strong>中提供了<strong>beforeFetch</strong>和<strong>afterFetch</strong>方法，<strong>beforeFetch</strong>是表格发送请求前的拦截，可以在这里对参数进行处理；<strong>afterFetch</strong>是表格请求后返回的数据，可以在这里对返回的数据进行格式处理等，若你在<strong>afterFetch</strong>对数据进行处理，你必须把处理完的结果<strong>return</strong>回去，否则无法生效，如：我对表格返回的数据中的<strong>zhi4547</strong>全部设置为100。</p><p>index.vue</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
|
||||
<span class="line"><span class="token comment">// 前面代码省略</span></span>
|
||||
<span class="line"><span class="token keyword">const</span> <span class="token punctuation">[</span>registerTable<span class="token punctuation">,</span> <span class="token punctuation">{</span> reload<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useTable</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token comment">// 中间代码省略</span></span>
|
||||
<span class="line"> <span class="token function-variable function">beforeFetch</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token comment">// 可以对筛选的参数params进行处理</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token operator">...</span>params<span class="token punctuation">,</span> <span class="token literal-property property">FormId</span><span class="token operator">:</span> formIdComputedRef<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token constant">PK</span><span class="token operator">:</span> <span class="token string">'id'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token function-variable function">afterFetch</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">const</span> newRes <span class="token operator">=</span> res<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token operator">...</span>item<span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">zhi4547</span><span class="token operator">:</span> <span class="token number">100</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
|
||||
<span class="line"> tableRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">setToolBarWidth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> newRes<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token comment">// 中间代码省略</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"><span class="token comment">// 后面代码省略</span></span>
|
||||
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果如下：表格zhi4547字段所在的列（表格列名为：值）进度都为100%。</p><p><img src="`+o+'" alt="拦截表格请求"></p><h3 id="移动端" tabindex="-1"><a class="header-anchor" href="#移动端"><span>移动端</span></a></h3><p>移动端暂不支持表格组件，移动端的子表展示形式是多组表单的形式，这里不多赘述。</p>',46)]))}const d=s(i,[["render",u]]),v=JSON.parse('{"path":"/front_dev/adv/table.html","title":"表格","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"PC端","slug":"pc端","link":"#pc端","children":[{"level":3,"title":"自定义表格搜索功能","slug":"自定义表格搜索功能","link":"#自定义表格搜索功能","children":[]},{"level":3,"title":"带有展开功能的搜索二开","slug":"带有展开功能的搜索二开","link":"#带有展开功能的搜索二开","children":[]},{"level":3,"title":"自定义表格列","slug":"自定义表格列","link":"#自定义表格列","children":[]},{"level":3,"title":"修改分页","slug":"修改分页","link":"#修改分页","children":[]},{"level":3,"title":"表格的其他功能","slug":"表格的其他功能","link":"#表格的其他功能","children":[]},{"level":3,"title":"移动端","slug":"移动端","link":"#移动端","children":[]}]}],"git":{"updatedTime":1748592359000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":3},{"name":"Chen_Jie_Wen","username":"","email":"chen_junior@163.com","commits":5},{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":1}],"changelog":[{"hash":"59b422a86f2f849b8c6b350ebbee8d78762110e1","time":1748592359000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"docs: 更新高级搜索的二开介绍"},{"hash":"dc0d515ab82a6e8e8bba217158197b368453eff7","time":1748426738000,"email":"chen_junior@163.com","author":"Chen_Jie_Wen","message":"feat: table文档-表格其他功能"},{"hash":"1cd0de4d9c53c6e980cce3a5d661a68e82d399ad","time":1748403560000,"email":"chen_junior@163.com","author":"Chen_Jie_Wen","message":"feat: table文档-修改分页"},{"hash":"4af82936ff5b6445d26bbb2e9d4a24bf28f96f16","time":1748339132000,"email":"chen_junior@163.com","author":"Chen_Jie_Wen","message":"feat: table文档自定义表格列"},{"hash":"262bfff5fb69dad24a8cd9532291de38cca325c1","time":1748329306000,"email":"chen_junior@163.com","author":"Chen_Jie_Wen","message":"feat: 调整自定义表格搜索功能文档"},{"hash":"412c2a8d273e8041c74673e5a1585dcaf6d120d1","time":1748314623000,"email":"chen_junior@163.com","author":"Chen_Jie_Wen","message":"feat: 重写table文档之自定义表格搜索功能"},{"hash":"9e158e6153179698d51a9c8bcbff1e8041b63b75","time":1744962112000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 自定义字段 form及table 文档"},{"hash":"15bb17fa4abbd90c367c26723576743b542e6c8a","time":1744948341000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 高级二开文档补充"},{"hash":"2e6e32b0e3baba1ad91f570dfa63514a97cb2d2b","time":1744795964000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 表单介绍：字段事件；高级二开：弹窗、表单、表格"}]},"filePathRelative":"front_dev/adv/table.md"}');export{d as comp,v as data};
|
||||
BIN
docs/assets/table_1-Dc0vlV5m.png
Normal file
BIN
docs/assets/table_1-Dc0vlV5m.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
docs/assets/table_2-BfgKP28D.png
Normal file
BIN
docs/assets/table_2-BfgKP28D.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
docs/assets/table_3-DJgiqMOC.png
Normal file
BIN
docs/assets/table_3-DJgiqMOC.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
46
docs/assets/teleport.html-BIP5te2y.js
Normal file
46
docs/assets/teleport.html-BIP5te2y.js
Normal file
@ -0,0 +1,46 @@
|
||||
import{_ as n,c as s,a as t,o as p}from"./app-CDlLWk6N.js";const e=""+new URL("base_teleport-vbaCZqqF.png",import.meta.url).href,l={};function o(c,a){return p(),s("div",null,a[0]||(a[0]=[t(`<h1 id="为工具栏添加按钮" tabindex="-1"><a class="header-anchor" href="#为工具栏添加按钮"><span>为工具栏添加按钮</span></a></h1><h2 id="pc端" tabindex="-1"><a class="header-anchor" href="#pc端"><span>PC端</span></a></h2><p>关于表单头部工具栏添加新的自定义按钮，可以使用vue的teleport组件。首先在需要添加按钮的元素上添加一个任意Id。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page-bg-wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-spin</span> <span class="token attr-name">:spinning</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>loading<span class="token punctuation">"</span></span> <span class="token attr-name">tip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>加载中...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>geg-flow-page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top-toolbar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!-- 在a-space上添加id approveExtendButton --></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-space</span> <span class="token attr-name">:size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">wrap</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>approveExtendButton<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>second-dev-space<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!-- 这里是原本的按钮 省略 --></span></span>
|
||||
<span class="line"> </span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-space</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flow-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FormInformation</span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>randKey<span class="token punctuation">"</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formInformation<span class="token punctuation">"</span></span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span> <span class="token attr-name">:formAssignmentData</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>data.formAssignmentData<span class="token punctuation">"</span></span> <span class="token attr-name">:formInfos</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>data.formInfos<span class="token punctuation">"</span></span> <span class="token attr-name">:opinions</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>data.opinions<span class="token punctuation">"</span></span> <span class="token attr-name">:opinionsComponents</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>data.opinionsComponents<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!-- 无用代码省略 --></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-spin</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后可以在生成的form.vue文件中或者拆分的CustomDevForm.vue文件中添加teleport组件</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Teleport</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#approveExtendButton<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-button</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-right</span><span class="token punctuation">:</span> 10px</span><span class="token punctuation">"</span></span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reInquiry<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> 重新查询</span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-button</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-button</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-right</span><span class="token punctuation">:</span> 10px</span><span class="token punctuation">"</span></span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>endInquiry<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> 结束查询</span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-button</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Teleport</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>需要注意的是，teleport组件的to属性必须是一个存在的元素的id。不然会报错导致渲染失效。</p><p><img src="`+e+`" alt="teleport报错"></p><p>如果可以判断目标元素不存在，可以用:disabled或者v-if来禁止teleport的使用以避免报错。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Teleport</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#approveExtendButton<span class="token punctuation">"</span></span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>!isExist<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-button</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-right</span><span class="token punctuation">:</span> 10px</span><span class="token punctuation">"</span></span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reInquiry<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> 重新查询</span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-button</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-button</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-right</span><span class="token punctuation">:</span> 10px</span><span class="token punctuation">"</span></span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>endInquiry<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> 结束查询</span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-button</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Teleport</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>按钮默认添加位置是在原按钮之后，如果想在特殊位置添加按钮，比如原有按钮之前，可以在按钮前添加id特殊的一个元素如span，然后再用teleport组件添加相应按钮。</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue"><pre><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-space</span> <span class="token attr-name">:size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">wrap</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>approveExtendButton<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>approveExtendButtonLeft<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"> <span class="token comment"><!-- 原按钮位置 --></span></span>
|
||||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-space</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果有特殊需求比如不使用原按钮，也是可以的。这里举例一种方法：定义一个参数控制原按钮块的显隐，新写一个按钮块区域显隐逻辑与原按钮块相反，然后定义一个函数变化这个参数，并将这个函数使用provide传递给孙子组件；在form或者CustomDevForm组件中接收控制原按钮块隐藏，然后将新的teleport组件内容传送到新按钮块中。这里仅仅说明思路仅供参考，具体实现可以根据实际需求进行调整。</p><p>移动端暂不支持添加按钮</p>`,14)]))}const i=n(l,[["render",o]]),k=JSON.parse('{"path":"/front_dev/base/teleport.html","title":"为工具栏添加按钮","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"PC端","slug":"pc端","link":"#pc端","children":[]}],"git":{"updatedTime":1744278865000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":3}],"changelog":[{"hash":"a3e2cde9db0dbccdbce661749aef03650a6b701f","time":1744278865000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 二开文档优化"},{"hash":"51b826e36d1d26ef2ed843c669a1ab12b3fcb8f5","time":1744257372000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 文档优化 新写 为工具栏添加按钮， 为表单新添加新字段"},{"hash":"bb33c9cfb0a16dc1df1c8e1434b41b052a489710","time":1744192947000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 值计算，修改组件值，自定义校验，使用远程数据源"}]},"filePathRelative":"front_dev/base/teleport.md"}');export{i as comp,k as data};
|
||||
47
docs/assets/validation.html-B_JW048n.js
Normal file
47
docs/assets/validation.html-B_JW048n.js
Normal file
@ -0,0 +1,47 @@
|
||||
import{_ as s,c as a,a as p,o as e}from"./app-CDlLWk6N.js";const t={};function c(l,n){return e(),a("div",null,n[0]||(n[0]=[p(`<h1 id="自定义校验" tabindex="-1"><a class="header-anchor" href="#自定义校验"><span>自定义校验</span></a></h1><p>如果为常规的校验（如是否填写，常规正则校验），可以直接将校验规则提那家在表单生成的config.ts文件中相应字段的rules属性中。如果校验逻辑比较复杂，不想在config.ts文件中写，可以在拆分出的CustomDevForm.vue文件中的schemaMap中添加相应的校验。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token comment">// 这里需要增加一个计算属性 否则流程关联时字段读写状态会失效</span></span>
|
||||
<span class="line"> <span class="token function">schemaMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">const</span> schemaMap <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>getSchemas<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">schema</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token comment">// 在这里修改</span></span>
|
||||
<span class="line"> schemaMap<span class="token punctuation">[</span>schema<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> schema<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span><span class="token punctuation">(</span>schema<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> schema<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">sChild</span><span class="token operator">=></span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span><span class="token punctuation">(</span>sChild<span class="token punctuation">.</span>list<span class="token punctuation">)</span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> sChild<span class="token punctuation">.</span>list<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">lChild</span><span class="token operator">=></span><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token comment">// tab等结构的子元素在这里</span></span>
|
||||
<span class="line"> schemaMap<span class="token punctuation">[</span>lChild<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> lChild<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span> </span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> schemaMap<span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>可以使用remote远程校验，也可以使用regex校验函数。不过一般的form表单组件都自带对pattern的正则解析，所以一般不需要使用regex校验函数。具体rules的格式可查看<a href="https://3x.antdv.com/components/form-cn/#Form-" target="_blank" rel="noopener noreferrer">ant-design-vue Form</a>的文档或者APP端<a href="https://uniapp.dcloud.net.cn/component/form.html#form" target="_blank" rel="noopener noreferrer">uni-app Form</a>的文档。 这里只举一个远程校验的例子：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
|
||||
<span class="line"> <span class="token punctuation">{</span> </span>
|
||||
<span class="line"> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> </span>
|
||||
<span class="line"> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'请输入用户名'</span><span class="token punctuation">,</span> </span>
|
||||
<span class="line"> <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">'blur'</span> </span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token function-variable function">validator</span><span class="token operator">:</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">rule<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/api/user/check'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">username</span><span class="token operator">:</span> value <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>exists<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">'该用户名已被使用'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
|
||||
<span class="line"> <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">'验证服务不可用'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
|
||||
<span class="line"> <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">'blur'</span></span>
|
||||
<span class="line"> <span class="token punctuation">}</span></span>
|
||||
<span class="line"> <span class="token punctuation">]</span></span>
|
||||
<span class="line"><span class="token punctuation">}</span></span>
|
||||
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,5)]))}const i=s(t,[["render",c]]),u=JSON.parse('{"path":"/front_dev/base/validation.html","title":"自定义校验","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744257372000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":3}],"changelog":[{"hash":"51b826e36d1d26ef2ed843c669a1ab12b3fcb8f5","time":1744257372000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 文档优化 新写 为工具栏添加按钮， 为表单新添加新字段"},{"hash":"c84155fcf9531f25802f735edad59713762e5ca9","time":1744251107000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 已写文档优化"},{"hash":"bb33c9cfb0a16dc1df1c8e1434b41b052a489710","time":1744192947000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 值计算，修改组件值，自定义校验，使用远程数据源"}]},"filePathRelative":"front_dev/base/validation.md"}');export{i as comp,u as data};
|
||||
BIN
docs/assets/vite_readme-BQgKo4m1.png
Normal file
BIN
docs/assets/vite_readme-BQgKo4m1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
docs/assets/vmodel_demo--x0CSlwt.png
Normal file
BIN
docs/assets/vmodel_demo--x0CSlwt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Reference in New Issue
Block a user