背景

流程模板主要是用于流程建模的，对于业务用户而言，需要一个业务流程的导航页，分门别类展示业务流程清单，用于发起新的流程。
并且需要根据当前用户过滤，只显示有权限发起的流程。

业务流程类别的处理

一个企业的业务流程，视企业规模的大小，会有十几个、几十个甚至上百个，如不进行分类，都混放在一起，则难以查找和使用。从管理角度，应该为业务流程分类。

业务流程类别只需要一个名称就好了，不需要额外属性，这种情况下，使用平台数据字典，新建一个字典类型，比新建一个实体要更便捷。

新建业务流程导航控制器

在模块businessflow下新建一个navigate的控制器，暴露一个get方法，返回流程数据

    /**
     * 获取流程模板及其分类
     */
    @GetMapping("/")
    @SystemLog(value = "流程一览-查询数据")
    @PreAuthorize("hasPermission(null,'businessflow:navigate:query')")
    public ResponseEntity<Result> get() {


        //获取当前用户拥有启动权限流程权限接口
        List<WorkflowTemplate> flowTemplateList = flowTemplateService.listByPermission();

        // 为空无需继续处理，直接返回即可
        if (CollectionUtils.isEmpty(flowTemplateList)) {
            return ResultUtil.success();
        }

        // 获取分类
        List<DictionaryItem> categoryList = dictionaryTypeService.getItem("ProcessDefinitionCategory");


        // 组装数据
        List<WorkflowTemplateCategoryVO> data = new ArrayList<>();
        for (int i = 0; i < categoryList.size(); i++) {
            WorkflowTemplateCategoryVO category = new WorkflowTemplateCategoryVO();
            String categoryCode = categoryList.get(i).getCode();
            category.setCode(categoryCode);
            category.setName(categoryList.get(i).getName());
            List<WorkflowTemplate> childTemplateList = flowTemplateList.stream()
                    .filter(x -> x.getCategory().equals(categoryCode)).collect(Collectors.toList());
            if (CollectionUtils.isNotEmpty(childTemplateList)) {
                List<WorkflowTemplateVO> childList =mapperFacade.mapAsList(childTemplateList, WorkflowTemplateVO.class);
                category.setWorkflowTemplateVOList(childList);
                // 只有存在业务流程时才添加分类
                data.add(category);
            }
        }
        return ResultUtil.success(data);
    }

新建业务流程导航前端页面

新建导航页，效果图如下：

实现源码如下：

<template>
  <el-collapse v-model="activeNames" @change="handleChange">
    <el-collapse-item
      v-for="category in templateData"
      :key="category.code"
      :name="category.code"
      class="m-3"
    >
      <template #title>
        <div class="m-3 font-bold font-black" style="font-size: 18px"> {{ category.name }}</div>
      </template>
      <el-button
        v-for="template in category.workflowTemplateVOList"
        :key="template.code"
        type="primary"
        class="m-3"
        @click="createFlow(template.code, template.name, template.processDefinitionId)"
        >{{ template.name }}</el-button
      >
    </el-collapse-item>
  </el-collapse>
</template>

<script lang="ts">
export default {
  name: 'FlowNavigate',
  data() {
    return {
      activeNames: [],
      // 流程模板数据
      templateData: []
    }
  },
  mounted() {
    this.$api.businessflow.navigate.get().then((res) => {
      this.templateData = res.data
      const nameArray = this.templateData.map((item) => {
        return item.code
      })
      this.activeNames = nameArray
    })
  },
  methods: {
    handleChange(val) {
      console.log(val)
    },
    createFlow(processDefinitionKey, processDefinitionName, processDefinitionId) {
      this.$router.push({
        name: 'flowCreate',
        query: { processDefinitionKey, processDefinitionName, processDefinitionId }
      })
    }
  }
}
</script>

<style scoped></style>

发起流程

在导航页面点击对应的流程模板按钮，发起新的流程，效果图如下：

源码如下：

<template>
  <el-container>
    <el-header height="35" style="padding: 0">
      <el-row style="background-color: #1890ff; padding: 0; align-items: center">
        <span class="title">{{ taskData.processDefinitionName }}</span>
        <el-button-group style="position: absolute; right: 0">
          <el-button v-show="taskData.isSaved" type="primary" @click="commit">提交</el-button>
          <el-button v-show="taskData.isSaved" type="primary" @click="jump">跳转</el-button>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button type="primary" @click="viewDiagram">流程图</el-button>
          <el-button type="primary" @click="close">关闭</el-button>
        </el-button-group>
        <FlowPreview ref="flowPreview" />
      </el-row>
    </el-header>
    <el-main style="padding: 0">
      <commit ref="commit" :task-id="taskData.taskId" default-comment="发起申请" @success="close" />
      <jump ref="jump" default-comment="跳转" @success="close" />
      <component :is="taskData.processDefinitionKey" ref="flowComponent" @save="saved" />
    </el-main>
  </el-container>
</template>

<script>
import Commit from '@/modules/workflow/view/task/commit.vue'
import Jump from '../task/jump.vue'
import * as flowComponent from '@/modules/businessflow/view/dictionary/list'
import { flowMixin } from '@/mixin/flowMixin'
export default {
  name: 'FlowCreate',
  components: { ...flowComponent, Commit, Jump },
  mixins: [flowMixin],
  data() {
    return {}
  },
  mounted() {
    this.taskData.processDefinitionKey = this.$route.query.processDefinitionKey
    this.taskData.processDefinitionName = this.$route.query.processDefinitionName
    this.taskData.processDefinitionId = this.$route.query.processDefinitionId
    this.$nextTick(function () {
      this.$refs.flowComponent.add(this.taskData.processDefinitionId)
    })
  },
  methods: {
    viewDiagram() {
      this.$refs.flowPreview.show(this.taskData.processDefinitionId)
    },
    saved(processInstanceId) {
      this.taskData.isSaved = true
      this.taskData.processInstanceId = processInstanceId
    }
  }
}
</script>

<style scoped>
.title {
  float: left;
  color: #fff;
  margin: 10px 20px;
}
</style>

流程发起权限控制

该功能实际是辅助流程导航的，一个企业里流程可能有数十条或数百条，不同员工的权限是不同的，在流程导航中只显示该员工拥有的发起权限的流程即可。
这里的流程发起权限，实际跟系统的菜单非常类似，属于功能权限的范畴，因此复用的平台的权限控制功能。

在平台权限项维护的地方，新增类别“流程”，用于业务流程权限控制。
每条业务流程对应一条权限项。
对于大多数日常流程，如请假流程、报销流程，对所有人开放，新建一个角色，叫通用流程发起，为该角色设置流程启动权限。
对于一些需要特殊权限的流程，可以分组建立角色或为每条流程独立建一个角色。

开发平台资料

平台名称：一二三开发平台
简介： 企业级通用开发平台
设计资料：csdn专栏
开源地址：Gitee
开源协议：MIT
开源不易，欢迎收藏、点赞、评论。