1.前言

此代码以RuoYi-Vue-Flowable源码基础，将流程表单由原来的在线设计并保存为数据库的方式，改为直接指向前端vue文件的方式，解决了一些原来vue代码中存在的报错问题，并且修改、增加或删除部分功能。在此提醒下，此代码需要付费获取的。当然，也可以RuoYi-Vue-Flowable的git地址中下载源码，自己进行二次开发，非常感谢RuoYi-Vue-Flowable提供的免费源码。

2.功能完善

1.流程定义

解决流程图设计过程中，配置指定人员前端控制台报错问题。删除每个流程节点中的流程表单绑定功能，改为由流程统一配置。

2.表单配置

由原来的在线设计表单改为指向前端vue保存路径。

3.已发任务

已完成任务，不能取消申请和删除。查询功能完善。

4.新增流程

新增保存功能和发起功能。保存功能将流程保存在待办任务中，能够进行修改。发起功能将流程直接发起。

5.详细

在表单只能查看时，由于element-ui中的表单样式容易看不清，将样式设置为和能填写时一样的样式（element-ui中的表单组件都能实现）。

6.待办任务

解决流程填写节点可以允许多人填写，在待办任务中，此填写节点所有人都能修改和发起的问题。改为待办任务的填写节点，只能由发起人修改和发起。

根据流程的当前节点不同，显示不同功能。如果当前节点为起始节点，任务只显示在发起人的待办任务中，并且只有保存和发起功能。流程进行到下一节点过程前，需要填写审批意见，对于“启动”或“发起”功能，系统会自动填写审批意见，不需要自己手动填写。如果当前节点为其他节点时，显示“审批”、“选择退回”、“退回上级”、“退回初始”等功能。

7.全部任务（新增功能）

查看所有任务，此功能中所有流程都可以进行删除。

3.使用流程

1.项目启动

项目前后配置和启动过程和若依框架前后端分离版一致，工作流需要多执行一个sql文件。如果不知道若依项目如何启动和配置，可以查看我的文章《从零开始学若依框架-下载和环境初始化》。

2.表单配置

设置vue文件的路径，具体格式可根据提示进行设置。

3.流程定义

1.设置流程图和每个流程节点审批人员，保存模型。

2.配置表单

4.已发任务

1.点击“新增流程”按钮，新增流程，如下图：

2.点击“发起流程”按钮，创建流程，如下图：

3.填写表单信息后，点击“保存”按钮，会将流程保存到待办任务中。如果点击“发起”按钮，流程会直接启动。在这里以“保存”功能为例，进行测试。

5.待办任务

1.待办任务可以分为两类，一类是自己保存或者被退回的任务，这类任务本人能够修改表单，并且具有和新增流程一样的功能；另一类是需要审批的任务，这类任务只能进行审批、退回等操作，但是不能修改表单。由于上面将流程保存了，可以修改后，发起流程。点击“处理”按钮，处理已保存任务。

2.点击“启动”按钮，启动流程。

3.登录审批账号，在待办任务中查看当前流程（由于这个文档，非一次写完，当中间隔时间较长，接收时间和新增时间差距较大）。点击处理按钮，处理任务。

4.点击“审批”按钮，审批通过当前流程（其他功能后面介绍）。

5.填写处理意见，点击“确定”按钮。

6.已办任务

查看自己办理的流程信息。

7.已发任务

查看自己发起流程的流程状态，目前测试流程为“已完成”状态。

4.流程开发

1.流程配置

将vue文件地址保存数据库，使用表单时，根据地址动态导入。填写地址时需要按照一定格式进行填写，否则导入表单会报错。由于此功能一般给开发人员使用，我没有进行格式检测，最好检测下格式是否满足需求。

2.流程定义

1.流程需要在此功能中进行表单配置，每个流程只能配置一个表单。

2.为了更好的测试表单功能，在“流程配置”和“流程定义”等开发过程中，查看表单功能时，是允许修改的，没有提交按钮。但是，文件上传功能，会立刻将文件上传到文件路径中。在查看表单详情时，上传文件，需要自己删除文件路径中的文件。如果不删除，会占用一定空间，不会影响整体功能。

3.表单设置

1.使用案例在py/test.vue中，其中包含element-ui中所有表单组件。

2.在这些组件中，其他组件使用较简单，下面详细介绍下upload组件的使用。upload组件使用过程中，涉及文件上传成功、删除文件、预览文件等操作，较为复杂。在使用文件过程上传功能过程中，最好和案例中使用方式一致，已经测试好功能。

<el-form-item label="测试文件" prop="testFile">
  <el-upload ref="upload" accept=".jpg, .png" :action="upload.url" :headers="upload.headers" multiple
    :file-list="upload.fileList" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
    :auto-upload="true" :on-preview="handleFileUploadPreview" :on-remove="handleRemove">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <div v-if="!fill">
      <transition-group tag="ul" class="el-upload-list" name="el-list">
        <li v-for="(file, index) in form.fileList" class="el-upload-list__item"
          tabindex="0" :key="file">
          <a class="el-upload-list__item-name" @click="handleFilePreview(file)">
            <i class="el-icon-document"></i>{{file.substring(file.lastIndexOf("/") + 1)}}
          </a>
        </li>
      </transition-group>
    </div>
    <div v-else slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</el-form-item>

3.允许操作时，如下图：

4.不允许操作时，如下图：

5.预留了文件预览方法。在点击文件时，会打印文件映射路径。其中，handleFilePreview方法是预览不允许表单操作的文件预览，handleFileUploadPreview方法是允许表单操作的文件预览。

6.文件保存位置通过后端的application.yml进行设置。

7.获取组件中的传值，fill代表是否能够操作，formData是表单数据。需要将表单数据保存，如果可以修改时，将保存的文件路径，转换为上传组件接收的格式。

props: {
  fill: {
    type: Boolean,
      default: true
  },
  formData: {
    type: Object,
      default: undefined
  }
},
created() {

  if (this.formData) {
    this.form = this.formData;
  }

  // 如果可以修改，并且文件列表数量大于0，将路径转换为文件
  if (this.fill && this.form && this.form.fileList && this.form.fileList.length > 0) {
    this.upload.fileList = this.form.fileList.map((url, index) => ({
      name: url.substring(url.lastIndexOf("/") + 1),
      url: url,
      status: 'success'
    }));
  }

},

8.数据保存时，父组件会调用子组件的submitForm函数，然后子组件调用父组件的saveForm函数进行保存。因此，保存函数是不需要改变的，如果在数据保存前有逻辑处理，可以自己添加。这样反复调用函数，是为了检查表单是否满足规则，满足规则才允许提交。如果想做表单重置功能，可以参考表单提交功能。

4.已发任务

删除流程后，会导致与此流程相关的任务无法查询。目前，为了防止已完成流程丢失，前端进行了判断，已完成流程隐藏了删除按钮。但是，我没有进行后端判断，出于安全考虑，最好在后端也进行一下判断。或者在后端代码加上仅管理员能调用删除接口的权限（下面任务中的删除功能，都是调用同一接口）。

5.待办任务

1.有批量删除功能，但是被我隐藏了。删除功能是针对的是流程，而不是任务，如果这地方删除，会导致整个流程消失，感觉这个功能没必要，就隐藏了。如果确实需要这个功能，可以自己删除注释，能够直接使用。

2.“审批”功能：表示流程审批同意，填写处理意见后，流程进行到下一节点。

3.“选择退回”功能：选择需要退回的节点，填写退回意见后，退回到选择节点。

4.“退回上级”：表示流程退回到当前节点的上级节点，填写驳回意见后，退回到上级节点。

5.“退回初始”功能：表示流程退回到初始填写节点，填写退回意见后，退回到填写节点。

6.上述四个功能按照实际情况进行使用，其他功能可以注释掉。

6.已办任务

1.和待办任务一样，已办任务的删除功能也隐藏了。

2.撤回功能谨慎使用，会从当前节点进行回退，有时候会导致流程节点混乱，最好注释掉。如果确实想使用此功能，加上权限，只让管理员进行使用。

7.全部任务

这个功能是新增功能，根据日常管理需要设置的功能，此功能够查询所有的流程信息，并且，能够进行流程删除。此功能最好只供管理员使用，用于日常的流程管理，将其他模块中的删除功能去掉。如果这样，可以将删除接口权限设置为仅管理员进行操作（特别需要注意的是，操作流程时，需要确认流程编号，这个在流程新增后就不会改变，但是任务编号会根据流程进行而一直改变）。

8.表单变量

1.流程变量都保存在表sys_flowable_form_variable中，保存流程编号、变量名称、变量类型和变量值。

2.数据在保存数据库之前，通过getVarType函数获取变量类型。如果用到新的数据类型，可以在此函数中进行添加。

3.从数据库获取数据后，通过getFormData数据，将字符串转换固定格式的数据。如果需要新数据类型转换，添加在此函数中。

9.权限管理

流程相关的后端接口权限配置并不是很好，可以根据实际情况结合菜单管理中的权限，统一进行配置。如果功能使用过程中，管理员账号使用功能正常，但是其他账号出现权限问题，说明权限没有配置好。权限具体配置方式 ，可以访问若依框架前后端分离版后端权限配置。

10.启动设置

1.找到后端application.yml文件，设置Redis密码。如果Redis未设置密码，可以忽略此设置。

2.创建数据库，按照先后顺序执行sql文件夹下的sql文件。如果不使用任务调度功能，可以不执行quartz.sql文件。

3.找到后端application-druid.yml文件，设置数据库名称、账号和密码。

4.如果想开启Flowable相关代码的控制台打印功能，可以去掉以下注释。

5.总结和代码获取方式

1.总结

此代码以RuoYi-Vue-Flowable源码基础，以我的日常需求进行了二次开发，可能有些功能需要按照实际需求进行完善，或者代码存在bug，需要自己进行修改。当然，如果能力和时间都允许的情况下，我也会尝试更新的。

2.资源获取方式

在文章开始，我就强调代码是收费的，请大家见谅！需要打赏文章10元，然后私信给我截图和QQ号，我拉进群自行下载（有时候通过不及时，请见谅）。如果已经打赏过我的其他文章，已经加了我QQ号，可以打赏8元，然后QQ私信我，我拉你入新群。8元红包需要打赏两次（6元+2元），如果怕麻烦，也可以直接打赏10元。我觉得如果不是特别需要，真的没必要花钱获取资源。哪怕大家不需要代码，也可以通过这个文章了解下RuoYi-Vue-Flowable，最后再次感谢RuoYi-Vue-Flowable提供的免费源码，也谢谢大家的支持。
注意：流程图插件使用源码自带功能，推荐简单流程使用，复杂流程不要使用此代码，如果无法绘制，需要自行解决。
由于发布时间过久，打赏后只提供代码，需要自己根据文章使用，不提供任何代码问题解答。如果能接受再进行打赏！！！如果能接受再进行打赏！！！如果能接受再进行打赏！！！如果代码由于环境等原因无法使用，只能自己尝试csdn申请退款！！！