ferry 工单系统介绍
ferry工单系统是一个集工单统计、任务钩子、RBAC权限管理、灵活配置流程与模版于一身的开源工单系统，固然也能够称之为工做流引擎。前端
权限控制：给予casbin的rbac权限控制开发，能很是灵活的控制左侧菜单及页面按钮，而且能够对api进行权限控制，避免能够经过相似与Postman的工具直接发送请求触发api操做的状况。node
工单统计：对工单进行数据统计，便于之后对根据工单进行分析与调整。git
任务钩子：目前支持在当前阶段离开时来触发任务钩子，进行任务的执行，固然后面会加入进入当前阶段的时候触发任务钩子，来执行任务，而且将表单数据，当成参数传递给任务，方便任务能够根据表单数据进行一系列的操做。github
灵活配置流程及模版：经过后台管理，实现拖拖拽拽就能建立出一个完成的工做流和模版，并能够绑定模版。进行表单输入。后端
固然还有更多更好更妙的功能，好比：并行阶段处理，条件判断处理，会签功能，处理人实现变量管理等等。api
还有已经排入日程的功能开发，好比：表单设计的子表单功能，加签功能，催办功能，多人可自认工单处理功能等等。app
固然若是你以为还有须要加的功能能够给做者留言，或者提交PR。运维
博客：https://www.fdevops.com/ide
github: https://github.com/lanyulei/ferry工具
gitee: https://gitee.com/yllan/ferry
若是能够的话，github或者gitee上点上一个小小的star吧，一份支持，一份动力。
此项目为方便之后加入其余项目，所以代码结构是根据功能区分好的，比较适合作二次开发加入新的项目，例如做者后续就打算加入，CMDB，SQL审计平台等等。
权限控制
粒度很是大的权限控制，页面按钮均可准确控制，而且可对API进行访问控制。
首先先添加菜单及按钮数据。
而后就可经过角色进行权限控制了。
后端使用的casbin及本身维护的扩展表进行权限管理，前端按钮的展现则经过v-permisaction来进行维护管理。
<template>
<div class="app-container">
<el-card class="box-card">
<el-form ref="listQuery" :model="listQuery" :inline="true">
<el-form-item label="工单标题">
<el-input
v-model="listQuery.title"
placeholder="请输入工单标题"
clearable
size="small"
style="width: 240px"
@keyup.enter.native="getList"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="small" @click="getList">搜索</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" border :data="ticketList" @selection-change="handleSelectionChange">
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column label="ID" prop="id" width="120" />
<el-table-column label="标题" prop="title" :show-overflow-tooltip="true" />
<el-table-column label="当前状态" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ scope.row.state[0].label }}</span>
</template>
</el-table-column>
<el-table-column label="当前处理人" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span v-if="scope.row.is_end===0">{{ scope.row.principals }}</span>
</template>
</el-table-column>
<el-table-column label="优先级" :show-overflow-tooltip="true" width="120" align="center">
<template slot-scope="scope">
<span v-if="scope.row.priority===2">
<el-tag type="warning">紧急</el-tag>
</span>
<span v-else-if="scope.row.priority===3">
<el-tag type="danger">很是紧急</el-tag>
</span>
<span v-else>
<el-tag type="success">正常</el-tag>
</span>
</template>
</el-table-column>
<el-table-column label="是否结束" :show-overflow-tooltip="true" width="80" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.is_end===0" size="mini" type="success">否</el-tag>
<el-tag v-else size="mini" type="danger">是</el-tag>
</template>
</el-table-column>
<el-table-column label="建立时间" align="center" prop="create_time" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.create_time) }}</span>
</template>
</el-table-column>
<el-table-column label="操做" align="center" class-name="small-padding fixed-width" width="180">
<template slot-scope="scope">
<el-button
v-permisaction="['process:list:all:select']"
size="mini"
type="text"
icon="el-icon-edit"
@click="handleView(scope.row)"
>查看</el-button>
<el-button
v-if="scope.row.is_end===0"
v-permisaction="['process:list:all:inversion']"
size="mini"
type="text"
icon="el-icon-position"
@click="handleInversion(scope.row)"
>转交</el-button>
<el-button
v-if="scope.row.is_end===0"
v-permisaction="['process:list:all:end']"
size="mini"
type="text"
icon="el-icon-switch-button"
@click="handleUnity(scope.row)"
>结单</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog
title="转交工单"
:visible.sync="dialogVisible"
width="30%"
>
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="60px" class="demo-ruleForm">
<el-form-item label="节点" prop="node_id">
<el-select v-model="ruleForm.node_id" placeholder="选择节点" size="small" style="width: 100%">
<el-option v-for="(item, index) in nodeList" :key="index" :label="item.label" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="用户" prop="user_id">
<el-select v-model="ruleForm.user_id" placeholder="选择用户" size="small" style="width: 100%">
<el-option v-for="(item, index) in users" :key="index" :label="item.nickName" :value="item.userId" />
</el-select>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="ruleForm.remarks" type="textarea" size="small" />
</el-form-item>
<el-form-item style="text-align: right">
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="dialogVisible = false">关闭</el-button>
</el-form-item>
</el-form>
</el-dialog>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageIndex"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-card>
</div>
</template>
<script>
import { workOrderList, unityWorkOrder, inversionWorkOrder } from '@/api/process/work-order'
import { listUser } from '@/api/system/sysuser'
export default {
data() {
return {
users: [],
nodeList: [],
dialogVisible: false,
queryParams: {},
total: 0,
loading: false,
ticketList: [],
listQuery: {
page: 1,
per_page: 10
},
ruleForm: {
work_order_id: '',
node_id: '',
user_id: '',
remarks: ''
},
rules: {
node_id: [
{ required: true, message: '请选择节点', trigger: 'change' }
],
user_id: [
{ required: true, message: '请选择用户', trigger: 'change' }
]
}
}
},
created() {
this.getList()
},
methods: {
getList() {
this.listQuery.classify = 4
workOrderList(this.listQuery).then(response => {
this.ticketList = response.data.data
this.queryParams.pageIndex = response.data.page
this.queryParams.pageSize = response.data.per_page
this.total = response.data.total_count
this.loading = false
})
},
handleView(row) {
this.$router.push({ name: 'ProcessListHandle', query: { workOrderId: row.id, processId: row.process }})
},
handleUnity(row) {
this.$confirm('此操做将会结束该工单, 是否继续?', '提示', {
confirmButtonText: '肯定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
unityWorkOrder({
work_oroder_id: row.id
}).then(response => {
if (response.code === 200) {
this.getList()
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
})
})
},
handleInversion(row) {
this.dialogVisible = true
this.ruleForm.work_order_id = row.id
this.nodeList = row.state
if (this.nodeList.length === 1) {
this.ruleForm.node_id = this.nodeList[0].id
}
listUser({
pageSize: 999999
}).then(response => {
this.users = response.data.list
})
},
handleSelectionChange() {},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
inversionWorkOrder(this.ruleForm).then(response => {
if (response.code === 200) {
this.getList()
this.dialogVisible = false
}
})
}
})
}
}
}
</script>
<style scoped>
</style>
任务钩子
经过对每一个阶段进行任务绑定来实现，流程中的任务执行。
同时可经过Web页面对任务进行管理和维护。
在流程中绑定任务。
灵活定制流程及模版
对流程和模版进行灵活的配置。
首先是流程。
而后设计模版。
工单统计（正在开发阶段）
目前统计的数据：
- 工单总数
- 待办工单总数
- 我的待办总数
- 本周工单统计，曲线图展现，包括工单总数，待办总数，已完成总数
- 本周工单数据提交排名
- 本周待办工单排名
- 本周完成工单排名
<template>
<div class="dashboard-container">
<adminDashboard v-if="dashboardStatus" :panel-group-value="panelGroupValue" />
</div>
</template>
<script>
import adminDashboard from './admin'
import { initData } from '@/api/dashboard'
export default {
name: 'Dashboard',
components: { adminDashboard },
data() {
return {
dashboardStatus: false
}
},
created() {
initData().then(response => {
this.panelGroupValue = response.data
this.dashboardStatus = true
})
}
}
</script>