CN112631579B - 一种基于erp审批流Vue组件复用的方法 - Google Patents

Abstract

本发明公开了一种基于erp审批流Vue组件复用的方法，包括以下步骤：步骤1.对项目立项资料提交阶段的表单字段按信息类别进行划分，并判断需要复用的类别；步骤2.根据划分的表单字段类别，创建表单组件，并配置各表单组件对应的角色权限；步骤3.在Vue组件中定义两个数组，分别为数组A与数组B，数组A是页面初始化的时候要展示的表单项，数组B是动态变化的；步骤4.将数组B的项对应的表单组件在前端页面渲染；步骤5.在前端页面完成表单填写并提交后，验证各个表单组件的表单项步骤本发明能够设置多个表单，在后续审批节点中，通过动态筛选的方法在多个表单里筛选出所需的表单，然后实现表单的复用。

Description

一种基于erp审批流Vue组件复用的方法

技术领域

本发明涉及信息技术领域，具体为一种基于erp审批流Vue组件复用的方法。

背景技术

erp是企业资源计划的简称，erp系统是指建立在信息技术基础上，以系统化的管理思想，为企业决策层及员工提供决策运行手段的管理平台。

由于互联网的盛行，erp系统为公司业务的开展带来了很多便利。审批流程便是其中的一个。传统的审批过程会产生大量的文件，而且有些项目内容存在很多的不确定性，导致工作更不便利。针对能源相关的erp系统的项目立项有200多个表单字段，并且审批流程需要根据公司人员的组织架构定制化开发，同时部分表单后面需要复用、修改。

针对以上情况，本发明提出了一种存在多个表单，在后续审批节点通过动态筛选只复用一部分表单的方法。

发明内容

本发明的目的在于提供一种基于erp审批流Vue组件复用的方法，以解决上述背景技术中提出的问题。

为了解决上述技术问题，本发明提供如下技术方案：一种基于erp审批流Vue组件复用的方法，包括以下步骤：

步骤1.对项目立项资料提交阶段的表单字段按信息类别进行划分，并判断需要复用的类别；

步骤2.根据划分的表单字段类别，创建表单组件，并配置各表单组件对应的角色权限；

步骤3.在Vue组件中定义两个数组，分别为数组A与数组B，数组A是页面初始化的时候要展示的表单项，数组B是动态变化的；

步骤4.将数组B的项对应的表单组件在前端页面渲染；

步骤5.在前端页面完成表单填写并提交后，验证各个表单组件的表单项；

步骤6.通过对数组B的项进行筛选，达到对所需表单的动态筛选，并实现表单的复用。

本发明根据数组B的可变性，可以在不同情况下，对数组B进行重新赋值，然后循环变遍历数组B的值，通过渲染数组B内值对应的表单组件，从而实现对表单的动态筛选，通过提取筛选后的表单内容，从而实现表单的复用。

进一步的，所述步骤1的具体步骤如下：

步骤1.1.统计项目立项资料提交阶段需要审批人填写的表单字段的总数及名称；

步骤1.2.按信息类别将项目立项资料提交阶段审批人需填写的全部表单字段划分成项目基本信息、代理商信息、屋顶企业信息、配电房情况、商务及技术测算这六类；

步骤1.3.分别对项目基本信息、代理商信息、屋顶企业信息、配电房情况、商务及技术测算里的表单字段名称进行判断，筛选出需要复用的类别。

本发明立项资料提交阶段的表单字段共有200多项，若放到一个表单，不但表单信息庞大且信息种类杂乱，而且在后续审批流程中还需要复用到表单内的一部分信息，信息内容不易筛选。但是根据信息类别将表单字段划分到多个表单中，一方面避免了表单信息内容的臃肿，且使表单信息内容变得有条理，另一方面提高了后续审批流程中筛选需复用的表单内容的效率。

进一步的，所述步骤2的具体步骤如下：

步骤2.1根据步骤1.2中对项目立项资料提交阶段审批人需填写的全部表单字段划分的类别，分别建立六个表单组件，分别为项目基本信息proForm、代理商信息agentForm、屋顶企业信息roofForm、配电房情况houseForm、商务roomForm及技术测算calculatForm；

步骤2.2根据步骤1.3中需要复用的类别，将需要复用的表单匹配到审批人的角色；

步骤2.3在Vue组件中分别引入六个表单组件，所述六个表单组件是Vue组件的子组件。

本发明将项目立项资料提交阶段审批人需填写的全部表单字段按类别划分成六个表单并分别命名，然后将划分的六个表单建成表单组件，为后续审批流程中需要复用的表单设置权限，并匹配到审批人的角色上，这样在后端程序中，只需通过对系统角色进行限定就能实现对表单的动态筛选，当限制的系统角色为审批人时，后端会自动匹配各表单组件的权限是否为审批人，若表单组件的权限为审批人时，则提取该表单组件，若表单组件的权限不为审批人时，则跳过该表单组件，不进行提取。

进一步的，所述步骤3的具体内容如下：

在Vue组件的data中定义两个数组，分别为数组A与数组B，

所述数组A是页面初始化的时候要展示的表单项，用来存储页面初始化时，页面应该渲染的表单名称，所述数组A包含六项，分别是步骤2.1中的六个表单组件的名称，

所述数组B是动态变化的，所述数组B是根据后端传入的数组或者通过索引筛选数组A的项得到的要渲染的数组，

初始状态时，将数组A的值通过深拷贝赋值给数组B。

本发明数组A是页面初始化的时候要展示的表单项，但是在进行页面渲染时判断的是数组B内的表单项，因此，在初始状态时，需要将数组A的值通过深拷贝赋值给数组B，这样就可以在初始状态时，页面同时渲染出六个表单组件的全部内容。同时将数组A的值通过深拷贝的方式给数组B赋值，而不是浅拷贝的方式，是为了避免后续进程中改变数组B内的值，从而导致的数组A内的值一起改变，所述data是Vue组件中编写程序的地方。

进一步的，所述步骤4的具体步骤如下：

步骤4.1运用v-for方式对数组B进行循环遍历；

步骤4.2运用v-if方式对数组B中的项进行判断，看与待渲染的表单名称是否相同，若相同，则在前端页面渲染该表单名称对应的表单组件；

所述前端页面的渲染过程中，Vue组件是通过ref方式拿到待渲染的表单组件的所有dom元素的。

本发明通过遍历数组B可以得到数组B内的每一项对应的表单名称，通过判断遍历得到的表单名称与待渲染的表单名称是否相同，若不相同，则不渲染该表单组件，继续遍历数组B，若相同，则通过Vue组件提取该表单名称所属表单组件的所有dom元素，然后在前端页面进行渲染，所述v-for为Vue组件中遍历数据的方法，所述v-if为Vue组件中判断是否满足条件的方法，所述dom元素是网页中用来表示文档中对象的标准模型，即文档对象模型的简称，所述ref是Vue内获取本页面dom元素的方法。

进一步的，所述步骤5的具体步骤如下：

在完成页面渲染且用户对各子组件表单项的内容进行填写或更改后，需要在Vue组件中验证所有表单项，并完成表单数据的保存，

步骤5.1使用vue.$nextTick方式将回调延迟到下次dom更新循环之后执行，即等页面全部渲染出来再执行回调函数；

步骤5.2该回调函数通过ref方式去拿Vue组件的六个表单组件中的每一项，判断表单组件的每一项是否通过验证，即判断表单组件的每一项是否有值，

若该表单组件该项有值，则通过验证，该表单组件该项的值可以提交保存，

若该表单组件该项没有值，则未通过验证，该表单组件该项的值不可以提交保存，需要重新更改。

本发明中，由于Vue组件实现响应式并不是在数据发生变化之后dom就立即变化的，而是按一定的策略进行dom的更新，即vue组件是异步执行dom更新的。因此，在验证表单项时，需要使用vue.$nextTick方式进行回调延迟，直至下一次dom完成更新，然后才执行回调函数，这样才能够确保验证结果的准确，避免因dom未完成更新而导致的验证错误，所述vue.$nextTick是Vue组件的一个方法，在数据变化后要执行某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

进一步的，所述步骤6的具体步骤如下：

步骤6.1在项目审批的后续流程中需要复用部分立项资料提交阶段的表单内容，且每个流程页面对应的有唯一的编号；

步骤6.2在项目审批的后续流程中通过Vue.$router.query()的方式进行页面路由跳转，跳转到立项资料表单，跳转的同时会将该流程页面的编号参数一同传输到立项资料表单，此时立项资料表单页面会显示立项资料提交阶段的六个表单内容；

步骤6.3立项资料表单页面对应的路由函数会通过if方式对接收的后续流程页面编号参数进行判断，

若接收的后续流程页面编号参数与预设值都不相同，则数组B的项为立项资料提交阶段六个表单组件的名称；

若接收的后续流程页面编号参数与预设值相同，则根据接收的后续流程页面编号参数对数组B的值进行动态筛选，即对数组B重新赋值，所述数组B重新赋的值为该后续流程中需要复用的表单组件名称；

步骤6.4渲染筛选后的数组B内对应的表单组件；

步骤6.5对渲染后的表单组件进行更改并提交，实现表单的复用。

本发明通过判断后续流程的页面编号来对数组B进行重新赋值，从而达到动态筛选表单的效果，所述Vue.$router.query()是Vue组件中的一种传递参数的方法。

进一步的，所述对数组B的值进行动态筛选可通过手动赋值来实现，即在后续流程中需要复用部分立项资料提交阶段的表单内容时，直接在路由函数中对数组B进行重新赋值，

然后再对数组B内对应的表单组件进行渲染，

通过对渲染后的表单组件进行更改并提交，从而实现表单复用的目的。

本发明在后续流程中可根据需复用的表单，直接在路由函数里对数组B进行重新赋值，从而达到动态筛选表单的效果。

进一步的，所述对数组B的值进行动态筛选可通过表单组件对应的角色权限进行筛选，即为审批人角色时能够执行的表单，

若审批人具有该表单组件的执行权限，则该表单组件的名称会在数组B中继续保留，

若审批人不具有该表单组件的执行权限，则该表单组件的名称会从数组B中移除，

通过这种方法从而达到对数组B的值动态筛选的目的，然后再对数组B内对应的表单组件进行渲染，

通过对渲染后的表单组件进行更改并提交，从而实现表单复用。

本发明在后续流程中可根据审批人的角色判断各表单组件的权限，完成对数组B的更改，从而达到动态筛选表单的效果。

与现有技术相比，本发明所达到的有益效果是：本发明将项目立项提交阶段的200多个表单字段按类别划分成六个表单，在后续审批流程中通过对表单的动态筛选，实现对部分表单的复用，为审批人提供了便利，节省了时间。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1是本发明基于erp审批流Vue组件复用的方法的流程示意图；

图2是本发明基于erp审批流Vue组件复用的方法的划分立项资料提交阶段的表单字段类别流程示意图；

图3是本发明基于erp审批流Vue组件复用的方法的创建表单组件及配置角色权限流程示意图；

图4是本发明基于erp审批流Vue组件复用的方法的前端页面渲染流程示意图；

图5是本发明基于erp审批流Vue组件复用的方法的验证子组件表单项的流程示意图；

图6是本发明基于erp审批流Vue组件复用的方法的动态筛选表单并实现表单的复用的流程示意图；

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

请参阅图1-6，本发明提供技术方案：一种基于erp审批流Vue组件复用的方法，包括以下步骤：

步骤1.对项目立项资料提交阶段的表单字段按信息类别进行划分，并判断需要复用的类别；

步骤2.根据划分的表单字段类别，创建表单组件，并配置各表单组件对应的角色权限；

步骤3.在Vue组件中定义两个数组，分别为数组A与数组B，数组A是页面初始化的时候要展示的表单项，数组B是动态变化的；

步骤4.将数组B的项对应的表单组件在前端页面渲染；

步骤5.在前端页面完成表单填写并提交后，验证各个表单组件的表单项；

步骤6.通过对数组B的项进行筛选，达到对所需表单的动态筛选，并实现表单的复用。

所述步骤1的具体步骤如下：

步骤1.1.统计项目立项资料提交阶段需要审批人填写的表单字段的总数及名称；

步骤1.2.按信息类别将项目立项资料提交阶段审批人需填写的全部表单字段划分成项目基本信息、代理商信息、屋顶企业信息、配电房情况、商务及技术测算这六类；

步骤1.3.分别对项目基本信息、代理商信息、屋顶企业信息、配电房情况、商务及技术测算里的表单字段名称进行判断，筛选出需要复用的类别。

例如：在后续的审批节点七中需要复用项目立项资料提交阶段的技术测算这张表单。

所述步骤2的具体步骤如下：

步骤2.1根据步骤1.2中对项目立项资料提交阶段审批人需填写的全部表单字段划分的类别，分别建立六个表单组件，分别为项目基本信息proForm、代理商信息agentForm、屋顶企业信息roofForm、配电房情况houseForm、商务roomForm及技术测算calculatForm；

步骤2.2根据步骤1.3中需要复用的类别，将需要复用的表单匹配到审批人的角色；

例如：在后续的审批节点七中需要复用项目立项资料提交阶段的技术测算这张表单，则将技术测算这张表单的角色权限与审批人对应起来，在审批节点七时，在路由函数中对系统角色进行限制，当系统角色为审批人时，匹配与该角色对应的表单，则得到技术测算这张表单。

步骤2.3在Vue组件中分别引入六个表单组件，所述六个表单组件是Vue组件的子组件。

所述步骤3的具体内容如下：

在Vue组件的data中定义两个数组，分别为数组A与数组B，

所述数组A是页面初始化的时候要展示的表单项，用来存储页面初始化时，页面应该渲染的表单名称，所述数组A包含六项，分别是步骤2.1中的六个表单组件的名称，

所述数组B是动态变化的，所述数组B是根据后端传入的数组或者通过索引筛选数组A的项得到的要渲染的数组，

初始状态时，将数组A的值通过深拷贝赋值给数组B。

本发明将数组A的值通过深拷贝的方式给数组B赋值，而不是浅拷贝的方式，是为了避免后续进程中改变数组B内的值，从而导致的数组A内的值一起改变。

例如：当数组1内的项分别为‘1’和‘2’，数组2为空，

若将数组1的值通过浅拷贝的方式赋值给数组2，则数组1与数组2内的项均为‘1’和‘2’，现在对数组2进行更改，将数组2内的项变为‘1’后，则数组1的项也变为‘1’；

若将数组1的值通过深拷贝的方式赋值给数组2，则数组1与数组2内的项均为‘1’和‘2’，现在对数组2进行更改，将数组2内的项变为‘1’后，则数组1的项不变，依旧为‘1’和‘2’。

所述步骤4的具体步骤如下：

步骤4.1运用v-for方式对数组B进行循环遍历；

步骤4.2运用v-if方式对数组B中的项进行判断，看与待渲染的表单名称是否相同，若相同，则在前端页面渲染该表单名称对应的表单组件；

所述前端页面的渲染过程中，Vue组件是通过ref方式拿到待渲染的表单组件的所有dom元素的。

本发明通过遍历数组B可以得到数组B内的每一项对应的表单名称，通过判断遍历得到的表单名称与待渲染的表单名称是否相同，若不相同，则不渲染该表单组件，继续遍历数组B，若相同，则通过Vue组件提取该表单名称所属表单组件的所有dom元素，然后在前端页面进行渲染。

例如：数组B的项为‘calculatForm’，首先运用v-for方式对数组B进行循环遍历，提取数组B内的项‘calculatForm’，然后运用v-if方式对数组B中提取的项进行判断，与待渲染的表单名称进行比较，因为数组B内的项‘calculatForm’与待渲染的技术测算的表单名称相同，则Vue组件通过ref方式拿到待渲染的技术测算表单组件的所有dom元素，然后在前端页面完成渲染。

所述步骤5的具体步骤如下：

在完成页面渲染且用户对各子组件表单项的内容进行填写或更改后，需要在Vue组件中验证所有表单项，并完成表单数据的保存，

步骤5.1使用vue.$nextTick方式将回调延迟到下次dom更新循环之后执行，即等页面全部渲染出来再执行回调函数；

步骤5.2该回调函数通过ref方式去拿Vue组件的六个表单组件中的每一项，判断表单组件的每一项是否通过验证，即判断表单组件的每一项是否有值，

若该表单组件该项有值，则通过验证，该表单组件该项的值可以提交保存，

若该表单组件该项没有值，则未通过验证，该表单组件该项的值不可以提交保存，需要重新更改。

本发明中，由于Vue组件实现响应式并不是在数据发生变化之后dom就立即变化的，而是按一定的策略进行dom的更新，即vue组件是异步执行dom更新的。因此，在验证表单项时，需要使用vue.$nextTick方式进行回调延迟，直至下一次dom完成更新，然后才执行回调函数，这样才能够确保验证结果的准确，避免因dom未完成更新而导致的验证错误。

例如：没有使用vue.$nextTick方式将回调延迟到下次dom更新循环之后执行，由于Vue组件中的dom更新是异步的，因此可能出现表单相应字段已经填写数据，但由于还未来得及更新，导致执行的验证结果为错误。

所述步骤6的具体步骤如下：

步骤6.1在项目审批的后续流程中需要复用部分立项资料提交阶段的表单内容，且每个流程页面对应的有唯一的编号；

步骤6.2在项目审批的后续流程中通过Vue.$router.query()的方式进行页面路由跳转，跳转到立项资料表单，跳转的同时会将该流程页面的编号参数一同传输到立项资料表单，此时立项资料表单页面会显示立项资料提交阶段的六个表单内容；

步骤6.3立项资料表单页面对应的路由函数会通过if方式对接收的后续流程页面编号参数进行判断，

若接收的后续流程页面编号参数与预设值都不相同，则数组B的项为立项资料提交阶段六个表单组件的名称；

若接收的后续流程页面编号参数与预设值相同，则根据接收的后续流程页面编号参数对数组B的值进行动态筛选，即对数组B重新赋值，所述数组B重新赋的值为该后续流程中需要复用的表单组件名称；

例如：在后续的审批节点七中需要复用项目立项资料提交阶段的技术测算这张表单，且审批节点七的页面编号为11，因此从审批节点七页面跳转到立项资料表单页面时，会同时将页面编号一起传输过来，立项资料表单页面对应的路由函数会通过if方式对接收的页面编号参数进行判断，当接收的页面编号为11时，则对数组B的值进行动态筛选，将技术测算表单的名称重新赋值给数组B。

步骤6.4渲染筛选后的数组B内对应的表单组件；

步骤6.5对渲染后的表单组件进行更改并提交，实现表单的复用。

所述对数组B的值进行动态筛选可通过手动赋值来实现，即在后续流程中需要复用部分立项资料提交阶段的表单内容时，直接在路由函数中对数组B进行重新赋值，

然后再对数组B内对应的表单组件进行渲染，

通过对渲染后的表单组件进行更改并提交，从而实现表单复用的目的。

例如：在后续的审批节点七中需要复用项目立项资料提交阶段的技术测算这张表单，因此可直接在审批节点七对应的路由函数中对数组B进行重新赋值，将技术测算表单的名称重新赋值给数组B。

所述对数组B的值进行动态筛选可通过表单组件对应的角色权限进行筛选，即为审批人角色时能够执行的表单，

若审批人具有该表单组件的执行权限，则该表单组件的名称会在数组B中继续保留，

若审批人不具有该表单组件的执行权限，则该表单组件的名称会从数组B中移除，

通过这种方法从而达到对数组B的值动态筛选的目的，然后再对数组B内对应的表单组件进行渲染，

通过对渲染后的表单组件进行更改并提交，从而实现表单复用。

本发明在后续流程中可根据审批人的角色判断各表单组件的权限，完成对数组B的更改，从而达到动态筛选表单的效果。

例如：在后续的审批节点七中需要复用项目立项资料提交阶段的技术测算这张表单，因此可直接用审批人角色对审批节点七对应的路由函数中的数组B做出限制，即当数组B中的项对应的表单组件属于审批人角色权限，则在数组B中继续保留，当数组B中的项对应的表单组件不属于审批人角色权限，则从数组B中删除，因为只有技术测算表单组件属于审批人角色权限，则数组B的项只包含技术测算表单名称。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。

最后应说明的是：以上所述仅为本发明的优选实施例而已，并不用于限制本发明，尽管参照前述实施例对本发明进行了详细的说明，对于本领域的技术人员来说，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (7)

1.一种基于erp审批流Vue组件复用的方法，其特征在于，包括以下步骤：

步骤1.对项目立项资料提交阶段的表单字段按信息类别进行划分，并判断需要复用的类别；

步骤2.根据划分的表单字段类别，创建表单组件，并配置各表单组件对应的角色权限；

步骤3.在Vue组件中定义两个数组，分别为数组A与数组B，数组A是页面初始化的时候要展示的表单项，数组B是动态变化的；

步骤4.将数组B的项对应的表单组件在前端页面渲染；

步骤5.在前端页面完成表单填写并提交后，验证各个表单组件的表单项；

步骤6.通过对数组B的项进行筛选，达到对所需表单的动态筛选，并实现表单的复用；

所述步骤5的具体步骤如下：

在完成页面渲染且用户对各子组件表单项的内容进行填写或更改后，需要在Vue组件中验证所有表单项，并完成表单数据的保存，

步骤5.1使用vue.$nextTick方式将回调延迟到下次dom更新循环之后执行，即等页面全部渲染出来再执行回调函数；

步骤5.2该回调函数通过ref方式去拿Vue组件的六个表单组件中的每一项，判断表单组件的每一项是否通过验证，即判断表单组件的每一项是否有值，

若该表单组件该项有值，则通过验证，该表单组件该项的值可以提交保存，

若该表单组件该项没有值，则未通过验证，该表单组件该项的值不可以提交保存，需要重新更改；

所述步骤6的具体步骤如下：

步骤6.1在项目审批的后续流程中需要复用部分立项资料提交阶段的表单内容，且每个流程页面对应的有唯一的编号；

步骤6.2在项目审批的后续流程中通过Vue.$router.query()的方式进行页面路由跳转，跳转到立项资料表单，跳转的同时会将该流程页面的编号参数一同传输到立项资料表单，此时立项资料表单页面会显示立项资料提交阶段的六个表单内容；

步骤6.3立项资料表单页面对应的路由函数会通过if方式对接收的后续流程页面编号参数进行判断，

若接收的后续流程页面编号参数与预设值都不相同，则数组B的项为立项资料提交阶段六个表单组件的名称；

若接收的后续流程页面编号参数与预设值相同，则根据接收的后续流程页面编号参数对数组B的值进行动态筛选，即对数组B重新赋值，所述数组B重新赋的值为该后续流程中需要复用的表单组件名称；

步骤6.4渲染筛选后的数组B内对应的表单组件；

步骤6.5对渲染后的表单组件进行更改并提交，实现表单的复用。

2.根据权利要求1所述的一种基于erp审批流Vue组件复用的方法，其特征在于：所述步骤1的具体步骤如下：

步骤1.1.统计项目立项资料提交阶段需要审批人填写的表单字段的总数及名称；

步骤1.2.按信息类别将项目立项资料提交阶段审批人需填写的全部表单字段划分成项目基本信息、代理商信息、屋顶企业信息、配电房情况、商务及技术测算这六类；

步骤1.3.分别对项目基本信息、代理商信息、屋顶企业信息、配电房情况、商务及技术测算里的表单字段名称进行判断，筛选出需要复用的类别。

3.根据权利要求2所述的一种基于erp审批流Vue组件复用的方法，其特征在于：所述步骤2的具体步骤如下：

步骤2.1根据步骤1.2中对项目立项资料提交阶段审批人需填写的全部表单字段划分的类别，分别建立六个表单组件，分别为项目基本信息proForm、代理商信息agentForm、屋顶企业信息roofForm、配电房情况houseForm、商务roomForm及技术测算calculatForm；

步骤2.2根据步骤1.3中需要复用的类别，将需要复用的表单匹配到审批人的角色；

步骤2.3在Vue组件中分别引入六个表单组件，所述六个表单组件是Vue组件的子组件。

4.根据权利要求3所述的一种基于erp审批流Vue组件复用的方法，其特征在于：所述步骤3的具体内容如下：

在Vue组件的data中定义两个数组，分别为数组A与数组B，

所述数组A是页面初始化的时候要展示的表单项，用来存储页面初始化时，页面应该渲染的表单名称，所述数组A包含六项，分别是步骤2.1中的六个表单组件的名称，

所述数组B是动态变化的，所述数组B是根据后端传入的数组或者通过索引筛选数组A的项得到的要渲染的数组，

初始状态时，将数组A的值通过深拷贝赋值给数组B。

5.根据权利要求4所述的一种基于erp审批流Vue组件复用的方法，其特征在于：所述步骤4的具体步骤如下：

步骤4.1运用v-for方式对数组B进行循环遍历；

步骤4.2运用v-if方式对数组B中的项进行判断，看与待渲染的表单名称是否相同，若相同，则在前端页面渲染该表单名称对应的表单组件；

所述前端页面的渲染过程中，Vue组件是通过ref方式拿到待渲染的表单组件的所有dom元素的。

6.根据权利要求1所述的一种基于erp审批流Vue组件复用的方法，其特征在于：所述对数组B的值进行动态筛选可通过手动赋值来实现，即在后续流程中需要复用部分立项资料提交阶段的表单内容时，直接在路由函数中对数组B进行重新赋值，

然后再对数组B内对应的表单组件进行渲染，

通过对渲染后的表单组件进行更改并提交，从而实现表单复用的目的。

7.根据权利要求1所述的一种基于erp审批流Vue组件复用的方法，其特征在于：所述对数组B的值进行动态筛选可通过表单组件对应的角色权限进行筛选，即为审批人角色时能够执行的表单，

若审批人具有该表单组件的执行权限，则该表单组件的名称会在数组B中继续保留，

若审批人不具有该表单组件的执行权限，则该表单组件的名称会从数组B中移除，

通过这种方法从而达到对数组B的值动态筛选的目的，然后再对数组B内对应的表单组件进行渲染，

通过对渲染后的表单组件进行更改并提交，从而实现表单复用。

Images