From 7f8f232e28af328e0f0a48353552e39a2ebdd49f Mon Sep 17 00:00:00 2001 From: gaoyunqi Date: Sat, 8 Jun 2024 10:22:20 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E8=B0=83=E6=95=B4=E6=8B=86=E5=88=86?= =?UTF-8?q?=E8=A1=A8=E5=8D=95=E7=9A=84=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/dev_readme.md | 76 --------------------- docs/表单二开/1_拆分表单.md | 103 +++++++++++++++++++++++++++++ docs/表单二开/2_拆分表单中的明细表 | 0 3 files changed, 103 insertions(+), 76 deletions(-) create mode 100644 docs/表单二开/1_拆分表单.md create mode 100644 docs/表单二开/2_拆分表单中的明细表 diff --git a/docs/dev_readme.md b/docs/dev_readme.md index e0f128d..8006597 100644 --- a/docs/dev_readme.md +++ b/docs/dev_readme.md @@ -90,82 +90,6 @@ tabStore.changeTitle(fullPath, `选项卡标题`); // 顺便tabStore也支持关闭选项卡 tabStore.closeTab(currentRoute, router); ``` -## 如何进行表单二开 -首先，打开项目dev_tools/formprops.js，将其中的内容替换为模块config，注意nodejs不加参数必须用module.exports不能用export default写法。 - -然后执行template_extend.js，会在同目录生成template.txt，这个文件就是将config文件在第一层展开的模版内容。 - -接下来找到要二开的表单，在components目录里定义新建一个vue文件，然后用下面的内容初始化，这个文件实际上就是SimpleForm的继承，我们要用自己的模版覆盖掉原来的循环。由于不是每个字段都有dataIndex（如布局类、标题），使用数组展开在二次修改后会比较混乱，此处定义了映射表，可以通过key找到组件，同时简化了原来的两个函数。 -```vue - - - -``` -找到components目录下的Form.vue，用我们自己的表单替换掉原来的SimpleForm（假设我们的文件为CascadeDemoForm.vue）： -```vue - -``` -展开后的文件和原有表单一致，每个字段都已经拆开，因此可以自由使用v-if/v-show等进行显隐控制，以及在字段之间插入内容、做自动计算等。 - -**注：该展开方法不能用Grid、Tab等布局嵌套，如果需要，建议自行写代码套容器，不要用编辑器自带的布局组件。** ## 如何在表单二开中自定义布局 ```vue diff --git a/docs/表单二开/1_拆分表单.md b/docs/表单二开/1_拆分表单.md new file mode 100644 index 0000000..d91c9d2 --- /dev/null +++ b/docs/表单二开/1_拆分表单.md @@ -0,0 +1,103 @@ +## 如何拆分表单 +默认情况下，生成的表单以JSON存储，每个字段都是由循环产生，因此在二开之前需要将每个字段拆开，以便进行二开。 + +首先，打开项目dev_tools/formprops.js，将其中的内容替换为 +``` +/views/模块类别/模块名/components/config.ts +``` +中的表单配置，注意nodejs不加参数必须用module.exports不能用export default写法，因此formprops只需要替换赋值的对象即可。config.ts中有三部分组成，前两部分为表头搜索定义和列表页定义，不要替换错了。 + +然后使用nodejs执行template_extend.js，会在同目录生成template.txt，这个文件就是将config文件在第一层展开的模版内容。生成的文件包含一系列字段，如： +``` + + + + +``` + +可以看到，每个字段的显隐由三个函数控制，这三个函数为： +- showComponent：某些组件只在工作流或者非工作流内展示 +- getIfShow2，对应原来的getIfShow，读取的是字段的ifShow参数 +- getIsShow2，对应原来的getIsShow，读取的是字段的show参数，由流程权限控制。字段本身的isShow也会控制显隐，这部分在SimpleFormItem中控制。 + +接下来找到要二开的表单，在components目录里定义新建一个vue文件，这个文件用来写二开的表单，假设模块名叫CascadeDemo，这个文件就可以起名CascadeDemoForm.vue，然后用下面的内容初始化。 + +这个文件实际上就是SimpleForm的继承，保留了script部分，只修改模板，我们要用自己的模版覆盖掉原来的循环。由于不是每个字段都有dataIndex（如布局类、标题），为了保证生成代码的整洁，此处定义了映射表，可以通过key找到组件，同时简化了原来的两个函数。 +```vue + + + +``` +找到模块目录/components下的Form.vue，用我们自己的表单（需要引用）替换掉原来的SimpleForm（假设我们的文件为CascadeDemoForm.vue）： +```vue + +``` +展开后的文件和原有表单一致，每个字段都已经拆开，因此可以自由使用v-if/v-show等进行显隐控制，以及在字段之间插入内容、做自动计算等。 + +**注：该展开方法不能用Grid、Tab等布局嵌套，如果需要，建议自行写代码套容器，不要用编辑器自带的布局组件。** diff --git a/docs/表单二开/2_拆分表单中的明细表 b/docs/表单二开/2_拆分表单中的明细表 new file mode 100644 index 0000000..e69de29