10 lines
9.7 KiB
JavaScript
10 lines
9.7 KiB
JavaScript
import{_ as n,c as s,a as t,o as p}from"./app-CDlLWk6N.js";const o=""+new URL("form_load_approveflow-BxWaWX9p.png",import.meta.url).href,e=""+new URL("form_load_forminformation-fiSfvJc2.png",import.meta.url).href,l=""+new URL("form_load_form-BQvUCUn9.png",import.meta.url).href,c=""+new URL("vite_readme-BQgKo4m1.png",import.meta.url).href,u=""+new URL("form_logic_approval-W5mFAqfy.png",import.meta.url).href,r=""+new URL("form_logic_flowInfo-DaD_tsW8.png",import.meta.url).href,i=""+new URL("form_logic_system_form-cg_dlB6-.png",import.meta.url).href,m=""+new URL("form_logic_easycom-BG7WxKMV.png",import.meta.url).href,k=""+new URL("form_logic_system_form1-XuFq0MM-.png",import.meta.url).href,f=""+new URL("form_logic_system_form2-DnTonMCc.png",import.meta.url).href,d={};function g(_,a){return p(),s("div",null,a[0]||(a[0]=[t('<h1 id="表单的页面封装逻辑-pc端" tabindex="-1"><a class="header-anchor" href="#表单的页面封装逻辑-pc端"><span>表单的页面封装逻辑（PC端）</span></a></h1><p>如果是流程相关的页面，入口页面在secondDev目录下，以审批流程为例，第一个调用的是FormInformation组件。 <img src="'+o+`" alt="入口页面"></p><p>接下来进入到FormInformation，根据template部分可以得知，表单分为两种，其中低开模式会加载SimpleForm，也就是真实的表单，通过JSON渲染，其他模式，无论是数据优先，还是页面优先，都加载SystemForm。</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 comment"><!-- 表单信息 无关代码省略--></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>activeIndex == index<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
|
||
<span class="line"> <span class="token comment"><!-- 如果是生成文件模式 formType = 0，也就是FormType.SYSTEM，会加载对应项目的Form.vue--></span></span>
|
||
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SystemForm</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>item.formType == FormType.SYSTEM<span class="token punctuation">"</span></span> <span class="token attr-name">:ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>setItemRef<span class="token punctuation">"</span></span> <span class="token attr-name">:formModel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.formModel<span class="token punctuation">"</span></span> <span class="token attr-name">:isViewProcess</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>props.disabled<span class="token punctuation">"</span></span> <span class="token attr-name">:systemComponent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.systemComponent<span class="token punctuation">"</span></span> <span class="token attr-name">:workflowConfig</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-box<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>SimpleForm</span> <span class="token attr-name">v-else-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.formType == FormType.CUSTOM<span class="token punctuation">"</span></span> <span class="token attr-name">:ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>setItemRef<span class="token punctuation">"</span></span> <span class="token attr-name">:formModel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.formModel<span class="token punctuation">"</span></span> <span class="token attr-name">:formProps</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.formProps<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>true<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-box<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>div</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 class="line-number"></div></div></div><p>SystemForm的参数最重要的就是图中部分，这里包括表单的JSON配置，模块名和功能名（共同组成文件路径）： <img src="`+e+'" alt="入口页面"></p><p>SystemForm是一个hooks，核心代码是根据上面提供的路径，动态加载表单文件： <img src="'+l+'" alt="入口页面"></p><p>这里利用了两点：</p><p>（1）Vite/Webpack这类打包工具，在没进行混淆时，是用模块路径作为文件名的。</p><p>（2）Vite和defineAsyncComponent搭配时，会自动完成目录扫描、分卷、懒加载等功能，这点和Webpack不同，正如官网文档所说：</p><p><img src="'+c+'" alt="入口页面"></p><h1 id="表单的页面封装逻辑-移动端" tabindex="-1"><a class="header-anchor" href="#表单的页面封装逻辑-移动端"><span>表单的页面封装逻辑（移动端）</span></a></h1><p>移动端的表单加载逻辑与组件结构和PC端类似，入口页面在pages/workflow目录下。不过它将流程表单部分单独封装了一个组件，即FlowInfo，在发起流程（launch）和流程审批（approval）两个组件中复用。 <img src="'+u+'" alt="流程页面"></p><p>在flowInfo组件中，和PC端一致，第一个调用的也是FormInformation组件。</p><p><img src="'+r+'" alt="flowInfo组件"></p><p>下面的组件结构和PC端基本一致，不过表单组件的加载方式不同。移动端在生成代码时会将表单的组件直接写死到system-form/index组件中。</p><p><img src="'+i+'" alt="flowInfo组件"></p><p>这里使用了uni-app的<a href="https://uniapp.dcloud.net.cn/collocation/pages.html#easycom" target="_blank" rel="noopener noreferrer">easycom</a>，是一种组件自动注册机制。在pages.json中配置后，在页面中可以直接使用组件名，从而不需要手动引入。</p><p><img src="'+m+'" alt="flowInfo组件"></p><p>在判断加载哪一个form组件的逻辑上，参数的获取是和PC端一致的，判断逻辑则是在computed中用获取的参数拼凑出组件名与组件上写死的组件名相比较。</p><p><img src="'+k+'" alt="flowInfo组件"><img src="'+f+'" alt="flowInfo组件"></p>',20)]))}const v=n(d,[["render",g]]),h=JSON.parse('{"path":"/front_dev/form_logic.html","title":"表单的页面封装逻辑（PC端）","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744169755000,"contributors":[{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":2},{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":1}],"changelog":[{"hash":"2a3d23ec1d24173947de6a4bcab9d30b7e90134a","time":1744169755000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 更新文档 APP端 二开前准备及表单介绍部分"},{"hash":"02f57d762a90a2fa7144c0ab769a773211d71110","time":1743502134000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新前端部分的目录"},{"hash":"6b00dc3b796584764f267778542e4e208f169201","time":1743251097000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新表单封装说明"}]},"filePathRelative":"front_dev/form_logic.md"}');export{v as comp,h as data};
|