geg-gas-web/docs/assets/field_events.html-C6V_tkoR.js

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">&#39;events&#39;</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">&#39;events&#39;</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">&#39;events&#39;</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">&#39;string&#39;</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">&#39;schema&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;formModel&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;formActionType&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;extParams&#39;</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">&#39;function&#39;</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">&#39;on&#39;</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">&amp;&amp;</span> field <span class="token operator">&amp;&amp;</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">&#39;error&#39;</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">&#39;Tip&#39;</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">&#39;触发事件填写有误！&#39;</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">&lt;</span>template<span class="token operator">&gt;</span></span>
<span class="line">    <span class="token operator">&lt;</span>Col v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;getIfShow2(&#39;9a8db2186edb49879f59162ae2660b21&#39;)&quot;</span> v<span class="token operator">-</span>show<span class="token operator">=</span><span class="token string">&quot;getIsShow2(&#39;9a8db2186edb49879f59162ae2660b21&#39;)&quot;</span> <span class="token operator">:</span>span<span class="token operator">=</span><span class="token string">&quot;getColWidth(schemaMap[&#39;9a8db2186edb49879f59162ae2660b21&#39;])&quot;</span><span class="token operator">&gt;</span></span>
<span class="line">        <span class="token operator">&lt;</span>template v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;showComponent(schemaMap[&#39;9a8db2186edb49879f59162ae2660b21&#39;])&quot;</span><span class="token operator">&gt;</span></span>
<span class="line">            <span class="token operator">&lt;</span>FormItem</span>
<span class="line">                <span class="token operator">:</span>label<span class="token operator">=</span><span class="token string">&quot;&#39;审计内容&#39;&quot;</span></span>
<span class="line">                <span class="token operator">:</span>rules<span class="token operator">=</span><span class="token string">&quot;schemaMap[&#39;9a8db2186edb49879f59162ae2660b21&#39;].rules&quot;</span></span>
<span class="line">                name<span class="token operator">=</span><span class="token string">&quot;title&quot;</span></span>
<span class="line">                <span class="token operator">:</span>required<span class="token operator">=</span><span class="token string">&quot;true&quot;</span></span>
<span class="line">            <span class="token operator">&gt;</span></span>
<span class="line">                <span class="token operator">&lt;</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">&quot;formModel[schemaMap[&#39;9a8db2186edb49879f59162ae2660b21&#39;].field]&quot;</span> @blur<span class="token operator">=</span><span class="token string">&quot;blurInput&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span></span>
<span class="line">            <span class="token operator">&lt;</span><span class="token operator">/</span>FormItem<span class="token operator">&gt;</span></span>
<span class="line">        <span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span></span>
<span class="line">    <span class="token operator">&lt;</span><span class="token operator">/</span>Col<span class="token operator">&gt;</span></span>
<span class="line"><span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</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};