geg-gas-web/docs/assets/computed.html-9QOs6N7a.js

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">=&gt;</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">&#39;form-mounted&#39;</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">=&gt;</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">&#39;xxx&#39;</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">&amp;&amp;</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};