4.尚硅谷全套JAVA教程—实战项目（71.89GB）/尚硅谷-云尚办公系统/视频/80-尚硅谷-云尚办公系统-审批设置模块-添加审批模板功能.mp4原创

各位同学，刚才呢，咱们完成了审批模板列表功能，那下面呢，我们继续往下来实现，咱们实现添加审批模板功能，那这个功能呢，要做成什么样子，咱们先做个分析，然后咱们进行实现，那咱们看到这个线上系统中，咱们看这怎么做啊，首先我们现在点击添加。大家看到啊，进入到的是是一个页面中啊，然后这个页面中我们发现啊，它里面有三个部分，第一部分咱们填写审批模板中的基本信息，咱们看到啊，有这个选择所有的审批类型，填写名称，选择图标，包括加上描述，这是第一部分，也就我这里写到的啊，我们填一些基本信息，然后第二部分我们这里边，比如现在啊，我随便填一个，我就写个T为测试啊，选择一个图标。描述叫test，然后点击下一步大家看啊，我们到这个页面，这个页面中呢，咱要试一下这个表单，比如说我们现在用户端或者说员工端，它里面要填写信息，然后走这个审批流程，那这里边要写一个表单部分，这个表单呢，在里边我们用的是一个表单的一个设计工具，叫form create，通过它生成一个动态的这么一个效果，其实它本人就是一段Dis数据，用它来生成，来用它进行实现，这是第二部分。

这里边比如说我们现在啊，随便写一个，咱们加上一个输入框啊，然后在里边预览就长这个样子，然后再再点下一步到这个页面，这个页面中做什么呢？我这里写到啊，将activity流程设计文件拖拽到此处，就咱通过它完成流程定义的部署，这里边我们用一个ZP的格式进行上传，所以这位置我们需要上传这个最终点提交咱们完成保存。以上啊，是里边一个基本过程，咱们再重复一遍啊，我们现在就是在审批模板这个列表中点击添加，进入到一个添加页面，在第一个页面中咱们填写一些基本信息。

然后第二部分我们生成一个动态表单，这个表单生成咱们用的是一个工具叫form create，通过它生成一个动态渲染的这个表单，然后之后呢，我们再点下一步到这个页面中上传咱们的流程设计文件，这里边我们用ZP的压缩文件格进行上传，然后最终完成个添加，完成添加之后，在数据这个表里就是会加入我们相关的这个数据。这是我们进行一个分析，所以大家啊知道这个过程，那这个具体该怎么做，咱做说明啊，首先第一个这个前端部分我这都写好了，因为咱们直接整合可以了，咱们看后端中，后端里边呢，我们主要需要有这么几个接口，首先第一个接口，因为我们在第一个页面中，也就是这个页面中。

咱们看到啊，这个位置是不是要显示所有的审批类型啊，所以咱第一个接口要写一个查询所有审批类型的接口，把这个做到，另外还有第二个接口，就是咱们在这个页面中。大家看这里是不是要点击上传呀，咱们上传一个ZP的这个设计文件，把它上传到我们项目中来，比如咱也给它上传到我们这个class里边这位置，比如咱们建文件夹，类似于我们之前这种格式，所以第二部分呢，我们需要写一个上传流程，这个接口就是把文件上传到咱们的文件里去，这个啊是们要做的两部分，所下面的我们先来写一下这两个接口，首先写第一个接口，获取全部的审批这个分类或者查询全部的。

审批分类。这个啊，咱们写一下。那现在我来写一下啊，我们来到这里边这个。S Type Ctr，咱们把它打开，打开之后呢，在里边加上这个接口。我想这个位置啊，就是查询。所有的审批分类。然后咱们加上这个方法，我们加上一个。提交里边起个名字就叫做范啊，咱跟他保持一致，然后在里边呢，加上这个具体方法public。Result。加上这个范。然后咱们直接做个查询啊，这里边不需要什么参数啊，咱直接查就可以了，调用里边的方法得到它这个最终的列表，然后咱们把这列表最终做一个。

点入这个list，所以现在啊，这个接口我们就完成了查询所有的审批分类，这是我们这里，然后这个之后我们再看下一个接口，就是上传你流程定义那个文件，把它上传到我们的固定的文件夹中来，那在下面啊来写一下这个部分。这个因我们那个是的部，咱们来个这个在里边加上我们的这个接口啊，然后这个接口呢，就是前面部分我就直接复制一下里边内咱们详细来写一下啊。我写到这位上传流程的这个定义，就是咱那个流程设计文件，然后大家看啊，这是我的名字。Loadad，然后在里边我们一个数数记file文件，这个咱们就完成，然后得到之后怎么做呢？其实很简单啊，然后把这文件给它直接上传到咱们的这个文件夹中是不可以了，注意传到你这个里去，因为这是最终你之后的目录，比如咱可以建个文件夹叫process，然后里边传咱们的文件。

所以下面呢，把这段代码给各位来写一下啊。那这个该怎么做呢？咱们来说一下啊，首先第一部分，因为咱们最终要给它上传到是不是这个目录下去，所以第一部分呢，我们获取这个。这个目录的这个位置，或者说获取他这个绝对路径啊，比如他在C盘或者在D盘，把他这个目录的位置给他得到，那这个怎么得到，给各位来说一下啊，我现在这么来做啊，我先写个方法，咱们先做个测试，把里边的目录位置我们给它获取一下，那怎么做呢？我写一下啊，首先在里边就直接啊上一个file啊，当然这里边有多种方式实现，我这里用其中的一种方式做到，然后咱用个工具类叫这个resource。

有这个。里有个ul里这个。就是咱说经常说的那个类路径，其实就是然后加上之后呢，咱们在里边继续来写啊，在这位置我们继续调用里边的这个方法，这个方法咱们这个啊这里。点上一个叫get pass，把它的路径得到啊，这里边有异常来用开给他补换一下，然后得到之后呢，我们再调方法得到这个实际的这个路径。

啊，就是这个方法。所以现在就完成了啊，完成之后咱把这个pass路径给它输出一下，看他得到的值是什么，是不是咱们想要这个结果，我们做一个输出啊，把方法直接执行一下，然后咱们看一下结果。获取类路径就是卡pass里边的一个东西啊，啊，这里边提示啊，它缺少符号啊，我们看一下啊，是哪里写的不对啊。缺少符号，我们检查一下啊。啊，大家看啊，应该是这个方法啊，这里有一个错误，咱们先re吞一个nu，先不让它报错，然后把这个我们执行一下，大家看一下这个效果啊，我们做一个执行。然后咱看里边这个路径是不是得到了，得到我们这个类路径下这个位置，或者说class这个文件夹的位置，咱们像这里边来上传文件啊，这时候我们写一个方法，通过工具类进行实现，然后把这部分然开它就直接复制过来，放到这里边得到你这个路径。

然后得到之后我们继续往下来做，下面怎么做呢？给大家写一下啊，就是下面比如说啊，我现在想这么做，我想在这个class里边呢，再来建个文件夹，然后里边创文件，把咱上传文件写入到我建这个空文件中去，我现在这么来实现用这种方式做这个操作，那咱们继续来写啊。下一步操作我在里边呢，就是设置一下我这个上传到文件夹，或者说你上传到目录，那我们操作一下啊，咱们上一个。然后在里边呢，加上这个pass，就刚才这个路径，你这路径我们刚才测试过了，在我们的里边，然后里边我建个文件夹，这个文件夹我就跟课件中名字保持一致的啊了，咱们前端方便叫这个process。啊，这个目录。

然后最终返回一个BY啊，这个咱们起个名字啊，叫这个。Temp这个啊，就这个名字啊，就是设置上传到文件夹。然后这个文件夹我们强调啊，就是它可能不存在，不存在的话，咱给它做一个创建。我加了这个位置。如果说它不存在，就这个time点它的值，如果说不存在。那这个时候我们进行创建。点上这个MKDS，因为它有多层目录啊，这部分我们就完成了，完成之后呢，下面咱怎么做呢？我们创建一个的文件，然后实现这个上传，或者说实现文件的写入啊，把这个上传文件的内容写入到咱的空文件中去，在这里边我们进行创建，因为这是文件夹已经有了，咱们建个空文啊，继续上一个啊，咱就写的简单点啊，用这个new file给它验出来了。

那下面后面继续来写啊，加上这个。Pass。然后加上里边这个路径啊，叫这个。后面呢，咱们加上一个文件的名称，文件名称呢，咱们跟上传文件的名字保持一致，加上它这个实际的文件名。我们这个。这个啊，调到这里，然后把它。拿过来。这里边啊，给它创建一下，这是咱们创建出来这个文件啊，咱们叫F。或者叫zip，最终是这么一个格式文件啊。现在就完成，完成之后呢，下面咱们来保存文件，或者说完成文件的写入，就是保存文件流到咱到本地。啊，保存文件最后一步骤啊，咱们用这个file是上传的文件，就是它点上一个方法，这方法是什呢？然后上咱们这个z file，把本地的文件中去，本地文件中有我们最终这个内容。

所以现在这部分就完成了，里边有一咱们加上给它捕获一下。这个啊，我们完成到这里，然后这里边如有异常，那咱们给它就抛出一个，我们之前自己写那个异常，或者说给它成一个file都可以啊。我这里就蕊吞一下啊，退。点上这个。在。啊，这个啊是咱们加上的，然后这个完成之后，最后呢，咱就返回一些相关的信息，返回什么呢？比如你这个文件的一个路径啊，包括你文件中一些相关一些名字等等那种，咱把这个作为返回，比如咱用文件称作为咱们后面那个流程定义的key，就是把它后缀名给它去掉啊这个部分。

那这个啊，我就直接从课件中拿过来了，通过map集合返回一些相关的数据，我到后面我们操作进行使用。然后大家来看啊，就在这里边。首先啊，我们里边new map集合第一部分咱们返回它的路径，就这里边加文件名，然后第二部分呢，我们返回它这个文件名称，咱们用文件名称作为流程定义那个默认的key了，后面操作进行使用。所以现在啊，这部分我们就完成了。以上啊，是咱们写的这个第二个接口，上传流程定义接口，说到这里，这里边缺少的两个接口我们就都做到了。然后介绍做到之后，最后呢，咱把前端整合一下，然后最终完成它的测试，那咱最后啊，把这个来看一下前端部分啊。

在前端里边呢，首先啊，这个页面部分我们已经做到了，然后咱们看，首先咱拥有工具叫form create，它会动态生成一个表单，其实最终啊，它生成就是一段Jason数据，比如说大家看我们的表里边啊，我们看里边有两个字段，一个叫form purpose，一个叫option里相关然里式通过这个工具进行生成，那这工具能实现一个拖拉拽的效果，最终用它来看到。然后咱们这里边提到啊，就是根据两个字段进行关联，那在下面把它集成下啊，因为是前端部分，我这里已经提前写过了，但是咱们把这流程给各位再详细说一遍啊。首先第一部分我们现在要集成这个叫form create，咱们需要在里边添加依赖，那怎么添加呢？注意啊，各位把这两行加到你这个前端项目的点里面去。

那咱们看一下啊，在我这项目的packson这个文件夹里，就这个文件里边啊，咱们在这个置加入这两行，因为要引入这两个依赖，关于这个form create的依赖啊，包括一个页面部分，一个设计部分，这给它要复制过来，这是第一部分，然后复制之后在man.J中加入这几行代码，为了咱们在项目中能使用这两个相关依赖。大家看一下啊，咱们在点JS这个文件里边，就在这。加入这几行代码，把这两个引入，最终在位务中进行使用，这是第二部分，然后之后呢，我们怎么做呢？咱们创建一个页面，这页面为了咱们做竞价做准备，对页面的路径啊，咱们这么来看。大家找到这个列表list.view页面中，咱们往下来看看这个位置往下找啊。

大家看这里。这个方法什么意思，是不是添加呀，当我点添加这个操作，它就会通过路由跳转到咱这个页面，然后咱按照它来建页面，那怎么建，各位看里边啊，我们在这个位置就这里。一个叫然后里有，然后最终会到我们这个页面中来，最终到这个面中进行实现啊，这里边我们加上一个路由，通过路由跳转，最终它会到我们这个页面，所以你按照这个部分把这个页面进行创建，我这里已经创建过了。然后创建之后，这里边的接口咱做到了啊，接口做到之后呢，这里边咱需要做个定义，刚才有一个查询全部审批分类接口在GS中我们给它定义一下。咱们找到process type里边这个进行定义啊，已经做到了啊，查询所有审批分类列表。

包括这个上传接口刚才也写完了，然后最终啊，在我们刚才的那个页面中，把这个最终添加到完整代码写进去，就是这个页面。set.wave你把这个直接加进去就可以了啊，这是那些图标啊，现在我们就完成了啊，这个前端。给各位按照这个过程把它呢整出来，然后这个完成之后，最终咱做个测试。测试之前呢？我们先简单做个准备工作啊，比如我现在啊，我准备好一个文件啊，这个文件。然后准备好之后插文件啊，比如咱就叫这个。请假点叉啊，我就叫这个名字啊，包括这里边他这个。ID改成叫请假，然后这个写完之后把它。创建成一个ZP的压缩文件，因为咱们上传是ZP这个类型文件，这些就都准备好了，然后都准备好之后，咱下面怎么做呢？现在我就把项目启动，然后咱们最终完成这个测试。

我这里启动下啊，首先我把这个后端先启动后，前端的地们也需要给重启一下，包括你这个依赖就要下载。另外特别说明啊，这个课件中没有写到，但各位应该能想到，我刚才在用这个叫form create的时候，咱们是不是放了依，你把这个之后，你在这里需要把依下载一下，怎么下载用这个命令NM。In啊，咱之前前端讲过啊，你把依赖下载下来，然后再启动，要不然它不会生效，这点特别注意一下啊，这里边学你的网速，我这应该很快啊，马上就能下载下来。然后咱们先看啊，后端已经正常启动了，咱就要看前端。

前端里边也下载好了，然后咱们运行项目NPMDV把它运行起来，最终我们做一个添加审批模板的这个测试。咱最终试一下啊。等他先清起来。现在啊，完成启动，然后咱们来到页面中测试啊，现在我点击审批模板。在审批模板中进入到他的列表中，大家看啊，目前有三条记录，我的数据库里边目前也是有三条记录，那在下面做添加，怎么添加呢？注意我的操作啊，点击添加审批模板，大家看到是不是到这界面啊，这咱就出来了啊，然后在里边选择类型，就是刚才我写的接口，比如现在我写一个叫人事。这位置给它起个名字啊，这个名字呢，咱为了测试啊，我就直接来一个测试这个添加啊，咱就叫这个名字啊，为了测试使用，这里边选择一个图标，就是我刚才在页面中加入的就是这些图标啊，我都给他写固定了，因为这固定的一些地址，就咱们随便选一个图标描述，就叫测试添加这个之后点击下一步，咱们就到刚才说那个叫form create这个工具中来设计你的表单，比如现在啊，我来设计一下。

咱们加入一个输入框，直接拖进去就可以了，在输入框的位置呢，我们给他改个名字，比如说现在，比如现在我们做的是一个请假啊，那请假的话肯定有这个，比如说假如说这个是什么呢？是我们这个请假的这个理由。或者说你用别的框啊，我用这个来写了，比如这个叫请假的理由这个啊，然后之后呢，我们再来看这里边呢，比如咱找一个叫。时间或者叫日期选择器，或者叫时间选择器啊，再来一个日期。这里边写一下，这表示你的请假的开始时间。

然后咱再加一个叫结束时间。这个比如说我再加上一个，就这个叫请假的天数。掉到这个位置啊。就是请假天数现在啊，这些都加上了，加上之后咱们这里边你注意啊，在这个过程中。它里面其实有很多给咱们封装好的效果，比如说咱看这个表单中啊，它里边就是可以显示检验错误信息，包括它的尺寸，包括它是居左居右等等。你看有各种效果啊，然后这个之后，咱们现在呢，就是把这个点预览，大家看效果是不是这么一个基本表单，这里边呢，选择日期，比如说请假2月1号啊，到这个2月17号等等，这里边都有，所以现在啊，这个表单我们就动态显示出来了，然后显示之后最终呢，它存到我们数据库中，会存入一段Jason数据，一会咱会看到啊，这步完成，完成之后往下来做，下面我们点下一步到这个界面。

然后大家看啊。这个文件呢，我在前端其实是做了一个判断啊，咱找一下这个前端部分啊，有一个上传的这个部分，前端有一个基本的判断，咱们他就找一下啊。就是在这个位置啊，你看啊。这是文件类型，如果说你传到不是ZP的类型，那它里边会提示你说文件格式不正确，如果你的大小大于两兆啊，也会提示有问题，所以这里边做了一个校验，或者做了一个判断，那咱下面传一个类型，我刚才呢已经创建了一个C文件，咱把它直接传就可以了，现在我点击上传。选择本地的JP文件打开，然后现在开始上传。

现在你看啊，就完成了，其实到这步之后呢，我们在这个项目中，咱们看一下啊，你看在我的target里边多文件夹叫process里边是不是有这个叫请假减ZP，就是咱刚才上传成这个文件，通过我们这个代码已经完成这个上传，就完成这个流程的这个文件上传，这就做到了啊做到之后最后咱们点击提交保存数据可以加到数据库中，那咱们点击。大家看完成了啊，完成之后我们看最后一条叫测试添加，这是那个图标，这是人事啊测试添加包括有时间等等内容，然后这个时候呢，我们看一下这个数据库里边刷新。大家看到啊，数据是不是加进来了，然后按照我刚才说到的，你看它的表单部分是不是就是一段这些数据。啊，所以这个啊，我们就完成了以上啊，是咱们做的里面这个功能，添加审批模板，咱们通过整合一个form create生成动态表单，就是最终生成的就是一段这些数据，然后咱们上传一个流程定义的ZP文件，最终完成这个添加审批模板的功能。