background
Process templates are mainly used for process modeling. For business users, a business process navigation page is needed to display the business process list by category for initiating new processes.
And it needs to be filtered according to the current user, and only processes initiated with permission are displayed.
Processing of business process categories
Depending on the size of the enterprise, there may be dozens, dozens or even hundreds of business processes in an enterprise. If they are not classified and all are mixed together, it will be difficult to find and use them. From a management perspective, business processes should be classified.
The business process category only needs a name and does not require additional attributes. In this case, it is more convenient to use the platform data dictionary to create a new dictionary type than to create a new entity.
Create a new business process navigation controller
Create a new navigation controller under the module businessflow, expose a get method, and return process data
/**
* 获取流程模板及其分类
*/
@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);
}
Create a new business process navigation front-end page
Create a new navigation page. The rendering is as follows:
The implementation source code is as follows:
<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>
Initiate process
Click the corresponding process template button on the navigation page to initiate a new process. The rendering is as follows:
The source code is as follows:
<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>
Process initiation permission control
This function actually assists process navigation. There may be dozens or hundreds of processes in an enterprise, and different employees have different permissions. In the process navigation, only the processes that the employee has the permission to initiate are displayed.
The process initiation permissions here are actually very similar to the system menus and belong to the category of functional permissions, so the permission control functions of the platform are reused.
In the place where platform permission items are maintained, a new category "Process" is added for business process permission control.
Each business process corresponds to a permission item.
For most daily processes, such as leave process and reimbursement process, they are open to everyone. Create a new role called General Process Initiator and set process initiation permissions for this role.
For some processes that require special permissions, you can create roles in groups or create an independent role for each process.
Development platform information
Platform name: 123 development platform
Introduction: Enterprise-level general development platform
Design information: csdn column
Open source address: Gitee
open source agreement: MIT
open source is not easy. Welcome to collect, like and comment.