表单的页面封装逻辑（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组件。

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

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

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