geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
geg-gas-web/docs/front_dev/show_and_hide.html

100 lines
30 KiB
HTML
Raw Permalink Normal View History

---初始化后台管理web页面项目
2025-08-20 14:39:30 +08:00
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="generator" content="VuePress 2.0.0-rc.20" />
<style>
:root {
--vp-c-bg: #fff;
}
[data-theme='dark'] {
--vp-c-bg: #1b1b1f;
}
html,
body {
background-color: var(--vp-c-bg);
}
</style>
<script>
const useChoice = localStorage.getItem('vuepress-color-scheme')
const systemStatus =
'matchMedia' in window
? window.matchMedia('(prefers-color-scheme: dark)').matches
: false
if (useChoice === 'light') {
document.documentElement.dataset.theme = 'light'
} else if (useChoice === 'dark' || systemStatus) {
document.documentElement.dataset.theme = 'dark'
}
</script>
<title>PC端设计 | 全代码框架文档</title><meta name="description" content="">
<link rel="preload" href="assets/style-CQp7YV5d.css" as="style"><link rel="stylesheet" href="assets/style-CQp7YV5d.css">
<link rel="modulepreload" href="assets/app-CDlLWk6N.js"><link rel="modulepreload" href="assets/show_and_hide.html-Bai-A-AK.js">
<link rel="prefetch" href="assets/index.html-ByXOdSON.js" as="script"><link rel="prefetch" href="assets/components.html-CbpbsXEn.js" as="script"><link rel="prefetch" href="assets/field_events.html-C6V_tkoR.js" as="script"><link rel="prefetch" href="assets/form_logic.html-CA8-U3gW.js" as="script"><link rel="prefetch" href="assets/index.html-xafVSSBu.js" as="script"><link rel="prefetch" href="assets/pass_value.html-CFBEHlue.js" as="script"><link rel="prefetch" href="assets/index.html-BfpfzkA1.js" as="script"><link rel="prefetch" href="assets/custom_field.html-CEs-XIt2.js" as="script"><link rel="prefetch" href="assets/custom_page.html-DIr-Sgm-.js" as="script"><link rel="prefetch" href="assets/dialog.html-fkmzKy_f.js" as="script"><link rel="prefetch" href="assets/form.html-B4704WRj.js" as="script"><link rel="prefetch" href="assets/table.html-BrzZNtYJ.js" as="script"><link rel="prefetch" href="assets/add_field.html-Lpe0HY5a.js" as="script"><link rel="prefetch" href="assets/ajax.html-CDfrJfFy.js" as="script"><link rel="prefetch" href="assets/change_value.html-CS5TpMC0.js" as="script"><link rel="prefetch" href="assets/computed.html-9QOs6N7a.js" as="script"><link rel="prefetch" href="assets/teleport.html-BIP5te2y.js" as="script"><link rel="prefetch" href="assets/validation.html-B_JW048n.js" as="script"><link rel="prefetch" href="assets/404.html-urOlE4ef.js" as="script">
</head>
<body>
<div id="app"><!--[--><div class="vp-theme-container external-link-icon" vp-container><!--[--><header class="vp-navbar" vp-navbar><div class="vp-toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a class="route-link" href><!----><span class="vp-site-name" aria-hidden="true">全代码框架文档</span></a></span><div class="vp-navbar-items-wrapper" style=""><!--[--><!--]--><nav class="vp-navbar-items vp-hide-mobile" aria-label="site navigation"><!--[--><div class="vp-navbar-item"><a class="route-link auto-link" href aria-label="首页"><!--[--><!--[--><!--]--><!--]-->首页<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="tutorial/" aria-label="快速上手"><!--[--><!--[--><!--]--><!--]-->快速上手<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="front_components/" aria-label="前端组件"><!--[--><!--[--><!--]--><!--]-->前端组件<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link route-link-active auto-link" href="front_dev/" aria-label="前端二开"><!--[--><!--[--><!--]--><!--]-->前端二开<!--[--><!--[--><!--]--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button type="button" class="vp-toggle-color-mode-button" title="toggle color mode"><svg class="light-icon" viewbox="0 0 32 32" style=""><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg class="dark-icon" viewbox="0 0 32 32" style="display:none;"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><!----></div></header><!--]--><div class="vp-sidebar-mask"></div><!--[--><aside class="vp-sidebar" vp-sidebar><nav class="vp-navbar-items" aria-label="site navigation"><!--[--><div class="vp-navbar-item"><a class="route-link auto-link" href aria-label="首页"><!--[--><!--[--><!--]--><!--]-->首页<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="tutorial/" aria-label="快速上手"><!--[--><!--[--><!--]--><!--]-->快速上手<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="front_components/" aria-label="前端组件"><!--[--><!--[--><!--]--><!--]-->前端组件<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link route-link-active auto-link" href="front_dev/" aria-label="前端二开"><!--[--><!--[--><!--]--><!--]-->前端二开<!--[--><!--[--><!--]--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="vp-sidebar-items"><!--[--><li><a class="route-link route-link-active auto-link vp-sidebar-item vp-sidebar-heading" href="front_dev/" aria-label="二开前准备"><!--[--><!--[--><!--]--><!--]-->二开前准备<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item vp-sidebar-heading" href="front_dev/mobile_app.html" aria-label="对接移动办公"><!--[--><!--[--><!--]--><!--]-->对接移动办
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>getIfShow(schema, formModel[schema.field])<span class="token punctuation">&quot;</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">&quot;</span>getIsShow(schema, formModel[schema.field])<span class="token punctuation">&quot;</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">&quot;</span>getColWidth(schema)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>showComponent(schema) &amp;&amp; schema.type !== &#39;slot&#39;<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>formModel[schema.field]<span class="token punctuation">&quot;</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">&quot;</span>formApi<span class="token punctuation">&quot;</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">&quot;</span>isWorkFlow<span class="token punctuation">&quot;</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">&quot;</span>refreshFieldObj<span class="token punctuation">&quot;</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">&quot;</span>schema<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Col</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</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">&#39;044e8bc1f9c345e0afa024ed7f21fe50&#39;</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">&#39;duoXingWenBen3343&#39;</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">&#39;多行文本&#39;</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">&#39;textarea&#39;</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">&gt;</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">&#39;function&#39;</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">&amp;&amp;</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></div><!--[--><!--]--></div><footer class="vp-page-meta"><!----><div class="vp-meta-item git-info"><div class="vp-meta-item last-updated"><span class="meta-item-label">Last Updated:: </span><time class="meta-item-info" datetime="2025-05-16T10:02:01.000Z" data-allow-mismatch>5/16/25, 6:02 PM</time></div><div class="vp-meta-item contributors"><span class="meta-item-label">Contributors: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: gaoyunqi@gdyd.com">gaoyunqi</span><!--[-->, <!--]--><!--]--><!--[--><span class="contributor" title="email: 1140589958@qq.com">DESKTOP-45LLIKH\11405</span><!----><!--]--><!--]--></span></div></div></footer><nav class="vp-page-nav" aria-label="page navigation"><a class="route-link auto-link prev" href="front_dev/components.html" aria-label="组件的封装"><!--[--><div class="hint"><span class="arrow left"></span> Prev</div><div class="link"><span class="external-link">组件的封装</span></div><!--]--></a><a class="route-link auto-link next" href="front_dev/field_events.html" aria-label="字段事件"><!--[--><div class="hint">Next <span class="arrow right"></span></div><div class="link"><span class="external-link">字段事件</span></div><!--]--></a></nav><!--[--><!--]--></main><!--]--></div><!--[--><!----><!--]--><!--]--></div>
<script type="module" src="assets/app-CDlLWk6N.js" defer></script>
</body>
</html>
Reference in New Issue Copy Permalink