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('

表单的页面封装逻辑（PC端）

如果是流程相关的页面，入口页面在secondDev目录下，以审批流程为例，第一个调用的是FormInformation组件。

接下来进入到FormInformation，根据template部分可以得知，表单分为两种，其中低开模式会加载SimpleForm，也就是真实的表单，通过JSON渲染，其他模式，无论是数据优先，还是页面优先，都加载SystemForm。

<template>
    <!-- 表单信息 无关代码省略-->
    <div v-show="activeIndex == index">
        <!-- 如果是生成文件模式 formType = 0，也就是FormType.SYSTEM，会加载对应项目的Form.vue-->
        <SystemForm v-if="item.formType == FormType.SYSTEM" :ref="setItemRef" :formModel="item.formModel" :isViewProcess="props.disabled" :systemComponent="item.systemComponent" :workflowConfig="item" class="form-box" />
        <SimpleForm v-else-if="item.formType == FormType.CUSTOM" :ref="setItemRef" :formModel="item.formModel" :formProps="item.formProps" :isWorkFlow="true" class="form-box" />
    </div>
</template>

SystemForm的参数最重要的就是图中部分，这里包括表单的JSON配置，模块名和功能名（共同组成文件路径）：入口页面

SystemForm是一个hooks，核心代码是根据上面提供的路径，动态加载表单文件：入口页面

这里利用了两点：

（1）Vite/Webpack这类打包工具，在没进行混淆时，是用模块路径作为文件名的。

（2）Vite和defineAsyncComponent搭配时，会自动完成目录扫描、分卷、懒加载等功能，这点和Webpack不同，正如官网文档所说：

入口页面

表单的页面封装逻辑（移动端）

移动端的表单加载逻辑与组件结构和PC端类似，入口页面在pages/workflow目录下。不过它将流程表单部分单独封装了一个组件，即FlowInfo，在发起流程（launch）和流程审批（approval）两个组件中复用。流程页面

在flowInfo组件中，和PC端一致，第一个调用的也是FormInformation组件。

flowInfo组件

下面的组件结构和PC端基本一致，不过表单组件的加载方式不同。移动端在生成代码时会将表单的组件直接写死到system-form/index组件中。

flowInfo组件

这里使用了uni-app的easycom，是一种组件自动注册机制。在pages.json中配置后，在页面中可以直接使用组件名，从而不需要手动引入。

flowInfo组件

在判断加载哪一个form组件的逻辑上，参数的获取是和PC端一致的，判断逻辑则是在computed中用获取的参数拼凑出组件名与组件上写死的组件名相比较。

flowInfo组件

',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};