二开说明

全代码框架提供了全部的前端源码，因此你可以使用任何已有的前端知识去解决问题，本文档只是提供了一个推荐的思路。

类似的，如果你觉得封装组件过于繁琐，在保证功能和界面一致的前提下，可以使用antdesign-vue提供的原始组件，如数据表格、对话框等。

二开准备

本文档所有二开都是基于使用脚本将表单拆分后进行。为了封装的一致性，以及低开模式的实现，表单的主体是一个比较复杂的封装，通过JSON的配置数据实现字段渲染，虽然配置数据提供了校验、事件的接口，由于JSON文件和表单的主要文件在不同位置，在函数调用、值传递等方面有很多不便。因此我们提供了一个脚本，可以将JSON的配置文件拆分为若干个FormItem，以方便二开。

PC端表单拆分

脚本位于dev_tools目录，进入页面的components目录，如src/views/jianyi/test1/components，执行：

node ..\..\..\..\..\dev_tools\template_extend.js

如果是目录层级不一样，需要调整相对路径的层级。如果提示文件解析失败，需要调整配置代码，保证export const formProps: FormProps这一段定义的表单主体文件，必须为纯JS，而且不能有任何外部模块的引入（代码只是使用eval的方式读取表单的ID等信息，并不会真的使用这些模块）。

可以参考二开脚本中的对应代码，临时定义一些虚假的模块使文件能顺利解析：

console.log('total rows: ' + confArr.length);
const funStr = `
    const uploadApi = ''; // 修复文件上传引用的API
    return ${confArr.join('\n')}
`;
const fun = new Function(funStr);
formProps = fun();

拆分成功后，目录里会多出CustomDevForm、CustomDevSumForm、CustomDevTableItem这些文件，如果有多个表格，也会有1、2这样的序号附加。

找到模块目录/components下的Form.vue，用我们自己的表单（需要引用）替换掉原来的SimpleForm：

<template>
  <CustomDevForm
    ref="systemFormRef"
    :formProps="data.formDataProps"
    :formModel="{}"
    :isWorkFlow="props.fromPage!=FromPageType.MENU"
  />
</template>
<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
  import { formProps, formEventConfigs } from './config';
  //注释掉原来的引入
  //import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
  //引入二开拆分后的文件，注意template部分也要换掉
  import CustomDevForm from "/@/views/jianyi/devgaofirst/components/CustomDevForm.vue";
 </script>

如果模块没有经过定制，此时除了界面略有差别，应该和原有功能一致。

移动端表单拆分

移动端表单拆分的执行逻辑大体和PC端一致，脚本位于common/tools目录，进入页面的components目录，如pages/jianyi/test1/components，执行：

node ..\..\..\..\common\tools\template_extend.js

如果目录层级难以确定，需要调整相对路径的层级。最简单的方法是直接将脚本文件复制到对应目录下，然后在文件目录的层级下执行脚本。需要注意的是，移动端表单生成的config/index.js文件中的formProps参数被压缩成为一行，在执行脚本前需将其格式化为标准的Object格式。同样的，找到模块目录/components下的Form.vue，用我们自己的表单（需要引用）替换掉原来的SimpleForm：

<template>
	<view class="form-fixed">
    <CustomDevForm ref="formRef" :key="renderKey" :formProps="formConfig.formProps" :disabled="disabled"  :control="formConfig.type"></CustomDevForm>
	</view>
</template>

<script setup>
import { ref, reactive,onMounted } from 'vue';
import SimpleForm from '@/components/simple-form/SimpleForm.vue';
import CustomDevForm from './CustomDevForm.vue';
</script>