---初始化后台管理web页面项目
This commit is contained in:
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};
|
||||
Reference in New Issue
Block a user