58 lines
19 KiB
JavaScript
58 lines
19 KiB
JavaScript
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};
|