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>