DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(workflow): 移除工作流相关代码和文件

Browse Source 
移除工作流模块的前端代码，包括API接口、路由配置、组件和页面视图
删除与工作流相关的表单、分类、任务、模型等API调用和页面逻辑
清理不再使用的组件和依赖项
This commit is contained in:
砂糖
2025-12-29 16:29:08 +08:00
parent 1193421167
commit 0ad31d6c86
26 changed files with 2 additions and 4620 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
klp-ui/src/api/workflow/category.js
View File

@@ -1,53 +0,0 @@
import request from '@/utils/request'
// 查询流程分类列表
export function listCategory(query) {
return request({
url: '/workflow/category/list',
method: 'get',
params: query
})
}
// 查询流程分类列表
export function listAllCategory(query) {
return request({
url: '/workflow/category/listAll',
method: 'get',
params: query
})
}
// 查询流程分类详细
export function getCategory(categoryId) {
return request({
url: '/workflow/category/' + categoryId,
method: 'get'
})
}
// 新增流程分类
export function addCategory(data) {
return request({
url: '/workflow/category',
method: 'post',
data: data
})
}
// 修改流程分类
export function updateCategory(data) {
return request({
url: '/workflow/category',
method: 'put',
data: data
})
}
// 删除流程分类
export function delCategory(categoryId) {
return request({
url: '/workflow/category/' + categoryId,
method: 'delete'
})
}

51
klp-ui/src/api/workflow/deploy.js
View File

@@ -1,51 +0,0 @@
import request from '@/utils/request'
// 查询流程部署列表
export function listDeploy(query) {
return request({
url: '/workflow/deploy/list',
method: 'get',
params: query
})
}
export function listPublish(query) {
return request({
url: '/workflow/deploy/publishList',
method: 'get',
params: query
})
}
// 获取流程模型流程图
export function getBpmnXml(definitionId) {
return request({
url: '/workflow/deploy/bpmnXml/' + definitionId,
method: 'get'
})
}
// 修改流程状态
export function changeState(params) {
return request({
url: '/workflow/deploy/changeState',
method: 'put',
params: params
})
}
// 删除流程部署
export function delDeploy(deployIds) {
return request({
url: '/workflow/deploy/' + deployIds,
method: 'delete'
})
}
// 查询流程部署关联表单信息
export function getFormByDeployId(deployId) {
return request({
url: '/workflow/deploy/form/' + deployId,
method: 'get',
})
}

10
klp-ui/src/api/workflow/finished.js
View File

@@ -1,10 +0,0 @@
import request from '@/utils/request'
// 撤回任务
export function revokeProcess(data) {
return request({
url: '/workflow/task/revokeProcess',
method: 'post',
data: data
})
}

52
klp-ui/src/api/workflow/form.js
View File

@@ -1,52 +0,0 @@
import request from '@/utils/request'
// 查询流程表单列表
export function listForm(query) {
return request({
url: '/workflow/form/list',
method: 'get',
params: query
})
}
// 查询流程表单详细
export function getForm(formId) {
return request({
url: '/workflow/form/' + formId,
method: 'get'
})
}
// 新增流程表单
export function addForm(data) {
return request({
url: '/workflow/form',
method: 'post',
data: data
})
}
// 修改流程表单
export function updateForm(data) {
return request({
url: '/workflow/form',
method: 'put',
data: data
})
}
// 挂载表单
export function addDeployForm(data) {
return request({
url: '/workflow/form/addDeployForm',
method: 'post',
data: data
})
}
// 删除流程表单
export function delForm(formId) {
return request({
url: '/workflow/form/' + formId,
method: 'delete'
})
}

10
klp-ui/src/api/workflow/instance.js
View File

@@ -1,10 +0,0 @@
import request from '@/utils/request'
// 查询流程实例详情信息
export function getDetailInstance(query) {
return request({
url: '/workflow/instance/detail',
method: 'get',
params: query
})
}

84
klp-ui/src/api/workflow/model.js
View File

@@ -1,84 +0,0 @@
import request from '@/utils/request'
// 查询流程模型信息
export function listModel(query) {
return request({
url: '/workflow/model/list',
method: 'get',
params: query
})
}
// 查询流程模型信息
export function historyModel(query) {
return request({
url: '/workflow/model/historyList',
method: 'get',
params: query
})
}
export function getModel(modelId) {
return request({
url: '/workflow/model/' + modelId,
method: 'get'
})
}
// 新增模型信息
export function addModel(data) {
return request({
url: '/workflow/model',
method: 'post',
data: data
})
}
// 修改模型信息
export function updateModel(data) {
return request({
url: '/workflow/model',
method: 'put',
data: data
})
}
// 保存流程模型
export function saveModel(data) {
return request({
url: '/workflow/model/save',
method: 'post',
data: data
})
}
export function latestModel(params) {
return request({
url: '/workflow/model/latest',
method: 'post',
params: params
})
}
export function delModel(modelIds) {
return request({
url: '/workflow/model/' + modelIds,
method: 'delete'
})
}
export function deployModel(params) {
return request({
url: '/workflow/model/deploy',
method: 'post',
params: params
})
}
// 获取流程模型流程图
export function getBpmnXml(modelId) {
return request({
url: '/workflow/model/bpmnXml/' + modelId,
method: 'get'
})
}

106
klp-ui/src/api/workflow/process.js
View File

@@ -1,106 +0,0 @@
import request from '@/utils/request'
// 查询流程列表
export function listProcess(query) {
return request({
url: '/workflow/process/list',
method: 'get',
params: query
})
}
// 查询流程列表
export function getProcessForm(query) {
return request({
url: '/workflow/process/getProcessForm',
method: 'get',
params: query
})
}
// 部署流程实例
export function startProcess(processDefId, data) {
return request({
url: '/workflow/process/start/' + processDefId,
method: 'post',
data: data
})
}
// 删除流程实例
export function delProcess(ids) {
return request({
url: '/workflow/process/instance/' + ids,
method: 'delete'
})
}
// 获取流程图
export function getBpmnXml(processDefId) {
return request({
url: '/workflow/process/bpmnXml/' + processDefId,
method: 'get'
})
}
export function detailProcess(query) {
return request({
url: '/workflow/process/detail',
method: 'get',
params: query
})
}
// 我的发起的流程
export function listOwnProcess(query) {
return request({
url: '/workflow/process/ownList',
method: 'get',
params: query
})
}
// 我待办的流程
export function listTodoProcess(query) {
return request({
url: '/workflow/process/todoList',
method: 'get',
params: query
})
}
// 我待签的流程
export function listClaimProcess(query) {
return request({
url: '/workflow/process/claimList',
method: 'get',
params: query
})
}
// 我已办的流程
export function listFinishedProcess(query) {
return request({
url: '/workflow/process/finishedList',
method: 'get',
params: query
})
}
// 查询流程抄送列表
export function listCopyProcess(query) {
return request({
url: '/workflow/process/copyList',
method: 'get',
params: query
})
}
// 取消申请
export function stopProcess(data) {
return request({
url: '/workflow/task/stopProcess',
method: 'post',
data: data
})
}

64
klp-ui/src/api/workflow/task.js
View File

@@ -1,64 +0,0 @@
import request from '@/utils/request'
// 完成任务
export function complete(data) {
return request({
url: '/workflow/task/complete',
method: 'post',
data: data
})
}
// 委派任务
export function delegate(data) {
return request({
url: '/workflow/task/delegate',
method: 'post',
data: data
})
}
// 转办任务
export function transfer(data) {
return request({
url: '/workflow/task/transfer',
method: 'post',
data: data
})
}
// 退回任务
export function returnTask(data) {
return request({
url: '/workflow/task/return',
method: 'post',
data: data
})
}
// 拒绝任务
export function rejectTask(data) {
return request({
url: '/workflow/task/reject',
method: 'post',
data: data
})
}
// 签收任务
export function claimTask(data) {
return request({
url: '/workflow/task/claim',
method: 'post',
data: data
})
}
// 可退回任务列表
export function returnList(data) {
return request({
url: '/workflow/task/returnList',
method: 'post',
data: data
})
}

132
klp-ui/src/components/HomeModules/FlowTable.vue
View File

@@ -1,132 +0,0 @@
<template>
<div class="order-analysis-dashboard" v-loading="loading">
<!-- 业绩区 -->
<el-tabs v-model="activeTab">
<el-tab-pane label="我的流程" name="my">
<KLPTable v-loading="loading" :data="ownProcessList">
<el-table-column label="流程编号" align="center" prop="procInsId" :show-overflow-tooltip="true" />
<el-table-column label="流程名称" align="center" prop="procDefName" :show-overflow-tooltip="true" />
<el-table-column label="流程类别" align="center" prop="category" />
<el-table-column label="流程版本" align="center" width="80px">
<template slot-scope="scope">
<el-tag size="medium">v{{ scope.row.procDefVersion }}</el-tag>
</template>
</el-table-column>
<el-table-column label="当前节点" align="center" prop="taskName" />
<el-table-column label="提交时间" align="center" prop="createTime" width="180" />
<el-table-column label="流程状态" align="center" width="100">
<template slot-scope="scope">
<dict-tag :options="dict.type.wf_process_status" :value="scope.row.processStatus" />
</template>
</el-table-column>
<el-table-column label="耗时" align="center" prop="duration" width="180" />
</KLPTable>
</el-tab-pane>
<el-tab-pane label="代办任务" name="todo">
<KLPTable v-loading="loading" :data="todoList">
<el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true" />
<el-table-column label="流程名称" align="center" prop="procDefName" />
<el-table-column label="任务节点" align="center" prop="taskName" />
<el-table-column label="流程版本" align="center">
<template slot-scope="scope">
<el-tag size="medium">v{{ scope.row.procDefVersion }}</el-tag>
</template>
</el-table-column>
<el-table-column label="流程发起人" align="center">
<template slot-scope="scope">
<label>{{ scope.row.startUserName }}</label>
</template>
</el-table-column>
<el-table-column label="接收时间" align="center" prop="createTime" width="180" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleProcess(scope.row)"
v-hasPermi="['workflow:process:approval']">办理
</el-button>
</template>
</el-table-column>
</KLPTable>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { listOwnProcess } from '@/api/workflow/process';
import { listTodoProcess } from '@/api/workflow/process';
export default {
name: 'OrderAnalysisDashboard',
data() {
return {
loading: false,
activeTab: 'my',
ownProcessList: [],
todoList: [],
queryParams: {
pageNum: 1,
pageSize: 20
},
dateRange: []
}
},
dicts: ['wf_process_status'],
created() {
this.loading = true;
Promise.all([this.getList1(), this.getList2()]).then(() => {
this.loading = false;
});
},
methods: {
/** 查询流程定义列表 */
async getList1() {
const response = await listOwnProcess(this.addDateRange(this.queryParams, this.dateRange));
this.ownProcessList = response.rows;
},
async getList2() {
const response = await listTodoProcess(this.addDateRange(this.queryParams, this.dateRange));
this.todoList = response.rows;
},
}
}
</script>
<style scoped>
.order-analysis-dashboard {
padding: 24px;
box-sizing: border-box;
}
.section-row {
margin-bottom: 30px;
}
.section-title {
margin-bottom: 20px;
padding: 0 10px;
}
.section-title h2 {
margin: 0 0 8px 0;
font-size: 20px;
font-weight: 600;
color: #303133;
}
.section-title p {
margin: 0;
font-size: 14px;
color: #909399;
}
.top-row,
.chart-row {
margin-bottom: 20px;
}
.chart-row>.el-col {
display: flex;
flex-direction: column;
justify-content: stretch;
}
</style>

2
klp-ui/src/plugins/package/penal/form/ElementForm.vue
View File

@@ -162,7 +162,7 @@
</template> </template>
<script> <script>
import { listForm } from "@/api/workflow/form"; // import { listForm } from "@/api/workflow/form";
export default { export default {
name: "ElementForm", name: "ElementForm",

20
klp-ui/src/router/index.js
View File

@@ -175,26 +175,6 @@ export const dynamicRoutes = [
} }
] ]
}, },
{
path: '/workflow/process',
component: Layout,
hidden: true,
permissions: ['workflow:process:query'],
children: [
{
path: 'start/:deployId([\\w|\\-]+)',
component: () => import('@/views/workflow/work/start'),
name: 'WorkStart',
meta: { title: '发起流程', icon: '' }
},
{
path: 'detail/:procInsId([\\w|\\-]+)',
component: () => import('@/views/workflow/work/detail'),
name: 'WorkDetail',
meta: { title: '流程详情', activeMenu: '/work/own' }
}
]
},
] ]
// 防止连续点击多次路由报错 // 防止连续点击多次路由报错

132
klp-ui/src/views/components/FlowTable.vue
View File

@@ -1,132 +0,0 @@
<template>
<div class="order-analysis-dashboard" v-loading="loading">
<!-- 业绩区 -->
<el-tabs v-model="activeTab">
<el-tab-pane label="我的流程" name="my">
<KLPTable v-loading="loading" :data="ownProcessList">
<el-table-column label="流程编号" align="center" prop="procInsId" :show-overflow-tooltip="true" />
<el-table-column label="流程名称" align="center" prop="procDefName" :show-overflow-tooltip="true" />
<el-table-column label="流程类别" align="center" prop="category" />
<el-table-column label="流程版本" align="center" width="80px">
<template slot-scope="scope">
<el-tag size="medium">v{{ scope.row.procDefVersion }}</el-tag>
</template>
</el-table-column>
<el-table-column label="当前节点" align="center" prop="taskName" />
<el-table-column label="提交时间" align="center" prop="createTime" width="180" />
<el-table-column label="流程状态" align="center" width="100">
<template slot-scope="scope">
<dict-tag :options="dict.type.wf_process_status" :value="scope.row.processStatus" />
</template>
</el-table-column>
<el-table-column label="耗时" align="center" prop="duration" width="180" />
</KLPTable>
</el-tab-pane>
<el-tab-pane label="代办任务" name="todo">
<KLPTable v-loading="loading" :data="todoList">
<el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true" />
<el-table-column label="流程名称" align="center" prop="procDefName" />
<el-table-column label="任务节点" align="center" prop="taskName" />
<el-table-column label="流程版本" align="center">
<template slot-scope="scope">
<el-tag size="medium">v{{ scope.row.procDefVersion }}</el-tag>
</template>
</el-table-column>
<el-table-column label="流程发起人" align="center">
<template slot-scope="scope">
<label>{{ scope.row.startUserName }}</label>
</template>
</el-table-column>
<el-table-column label="接收时间" align="center" prop="createTime" width="180" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleProcess(scope.row)"
v-hasPermi="['workflow:process:approval']">办理
</el-button>
</template>
</el-table-column>
</KLPTable>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { listOwnProcess } from '@/api/workflow/process';
import { listTodoProcess } from '@/api/workflow/process';
export default {
name: 'OrderAnalysisDashboard',
data() {
return {
loading: false,
activeTab: 'my',
ownProcessList: [],
todoList: [],
queryParams: {
pageNum: 1,
pageSize: 20
},
dateRange: []
}
},
dicts: ['wf_process_status'],
created() {
this.loading = true;
Promise.all([this.getList1(), this.getList2()]).then(() => {
this.loading = false;
});
},
methods: {
/** 查询流程定义列表 */
async getList1() {
const response = await listOwnProcess(this.addDateRange(this.queryParams, this.dateRange));
this.ownProcessList = response.rows;
},
async getList2() {
const response = await listTodoProcess(this.addDateRange(this.queryParams, this.dateRange));
this.todoList = response.rows;
},
}
}
</script>
<style scoped>
.order-analysis-dashboard {
padding: 24px;
box-sizing: border-box;
}
.section-row {
margin-bottom: 30px;
}
.section-title {
margin-bottom: 20px;
padding: 0 10px;
}
.section-title h2 {
margin: 0 0 8px 0;
font-size: 20px;
font-weight: 600;
color: #303133;
}
.section-title p {
margin: 0;
font-size: 14px;
color: #909399;
}
.top-row,
.chart-row {
margin-bottom: 20px;
}
.chart-row>.el-col {
display: flex;
flex-direction: column;
justify-content: stretch;
}
</style>

2
klp-ui/src/views/index.vue
View File

@@ -20,7 +20,6 @@
<script> <script>
import StatisticGroup from '@/components/HomeModules/StatisticGroup.vue' import StatisticGroup from '@/components/HomeModules/StatisticGroup.vue'
import AllApplications from '@/components/HomeModules/AllApplications.vue' import AllApplications from '@/components/HomeModules/AllApplications.vue'
import FlowTable from '@/components/HomeModules/FlowTable.vue'
import MiniCalendar from '@/components/HomeModules/MiniCalendar.vue' import MiniCalendar from '@/components/HomeModules/MiniCalendar.vue'
const lineChartData = { const lineChartData = {
@@ -48,7 +47,6 @@ export default {
// PanelGroup, // PanelGroup,
StatisticGroup, StatisticGroup,
AllApplications, AllApplications,
FlowTable,
MiniCalendar, MiniCalendar,
}, },
data() { data() {

2
klp-ui/src/views/tool/build/index.vue
View File

@@ -155,7 +155,7 @@ import DraggableItem from './DraggableItem'
import { getDrawingList, saveDrawingList, getIdGlobal, saveIdGlobal, getFormConf } from '@/utils/db' import { getDrawingList, saveDrawingList, getIdGlobal, saveIdGlobal, getFormConf } from '@/utils/db'
import loadBeautifier from '@/utils/loadBeautifier' import loadBeautifier from '@/utils/loadBeautifier'
import Tinymce from '@/components/tinymce/index.vue' import Tinymce from '@/components/tinymce/index.vue'
import { getForm, addForm, updateForm } from '@/api/workflow/form' // import { getForm, addForm, updateForm } from '@/api/workflow/form'
import axios from 'axios' import axios from 'axios'
import Vue from 'vue'; import Vue from 'vue';

290
klp-ui/src/views/workflow/category/index.vue
View File

@@ -1,290 +0,0 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="分类名称" prop="categoryName">
<el-input
v-model="queryParams.categoryName"
placeholder="请输入分类名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="分类编码" prop="code">
<el-input
v-model="queryParams.code"
placeholder="请输入分类编码"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['workflow:category:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['workflow:category:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['workflow:category:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['workflow:category:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<KLPTable v-loading="loading" :data="categoryList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="分类编号" align="center" prop="categoryId" v-if="true"/>
<el-table-column label="分类名称" align="center" prop="categoryName" />
<el-table-column label="分类编码" align="center" prop="code" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['workflow:category:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['workflow:category:remove']"
>删除</el-button>
</template>
</el-table-column>
</KLPTable>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改【请填写功能名称】对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="分类名称" prop="categoryName">
<el-input v-model="form.categoryName" placeholder="请输入分类名称" />
</el-form-item>
<el-form-item label="分类编码" prop="code">
<el-input v-model="form.code" placeholder="请输入分类编码" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listCategory, getCategory, delCategory, addCategory, updateCategory } from "@/api/workflow/category";
export default {
name: "Category",
data() {
return {
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 【请填写功能名称】表格数据
categoryList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
categoryName: undefined,
code: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
categoryName: [
{ required: true, message: "分类名称不能为空", trigger: "blur" }
],
code: [
{ required: true, message: "分类编码不能为空", trigger: "blur" }
]
}
};
},
created() {
this.getList();
},
methods: {
/** 查询【请填写功能名称】列表 */
getList() {
this.loading = true;
listCategory(this.queryParams).then(response => {
this.categoryList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
categoryId: undefined,
categoryName: undefined,
code: undefined,
createBy: undefined,
createTime: undefined,
updateBy: undefined,
updateTime: undefined,
remark: undefined,
delFlag: undefined
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.categoryId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加流程分类";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.loading = true;
this.reset();
const categoryId = row.categoryId || this.ids
getCategory(categoryId).then(response => {
this.loading = false;
this.form = response.data;
this.open = true;
this.title = "修改流程分类";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.buttonLoading = true;
if (this.form.categoryId != null) {
updateCategory(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addCategory(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const categoryIds = row.categoryId || this.ids;
this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + categoryIds + '"的数据项？').then(() => {
this.loading = true;
return delCategory(categoryIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('workflow/category/export', {
...this.queryParams
}, `category_${new Date().getTime()}.xlsx`)
}
}
};
</script>

335
klp-ui/src/views/workflow/deploy/index.vue
View File

@@ -1,335 +0,0 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="流程标识" prop="processKey">
<el-input
v-model="queryParams.processKey"
placeholder="请输入流程标识"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="流程名称" prop="processName">
<el-input
v-model="queryParams.processName"
placeholder="请输入流程名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="流程分类" prop="category">
<el-select v-model="queryParams.category" clearable placeholder="请选择" size="small">
<el-option
v-for="item in categoryOptions"
:key="item.categoryId"
:label="item.categoryName"
:value="item.code">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="state">
<el-select v-model="queryParams.state" size="small" clearable placeholder="请选择状态">
<el-option :key="1" label="激活" value="active" />
<el-option :key="2" label="挂起" value="suspended" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['workflow:deploy:remove']"
>删除</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-row :gutter="10" class="mb8">
<KLPTable v-loading="loading" fit :data="deployList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="流程标识" align="center" prop="processKey" :show-overflow-tooltip="true" />
<el-table-column label="流程名称" align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-button type="text" @click="handleProcessView(scope.row)">
<span>{{ scope.row.processName }}</span>
</el-button>
</template>
</el-table-column>
<el-table-column label="流程分类" align="center" prop="categoryName" :formatter="categoryFormat" />
<el-table-column label="流程版本" align="center">
<template slot-scope="scope">
<el-tag size="medium" >v{{ scope.row.version }}</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" align="center">
<template slot-scope="scope">
<el-tag type="success" v-if="!scope.row.suspended">激活</el-tag>
<el-tag type="warning" v-if="scope.row.suspended">挂起</el-tag>
</template>
</el-table-column>
<el-table-column label="部署时间" align="center" prop="deploymentTime" width="180"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
type="text"
size="mini"
icon="el-icon-price-tag"
@click.native="handlePublish(scope.row)"
v-hasPermi="['workflow:deploy:list']"
>版本管理</el-button>
<el-button
type="text"
size="mini"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['workflow:deploy:remove']"
>删除</el-button>
</template>
</el-table-column>
</KLPTable>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-row>
<!-- 流程图 -->
<el-dialog :title="processView.title" :visible.sync="processView.open" width="70%" append-to-body>
<process-viewer :key="`designer-${processView.index}`" :xml="processView.xmlData" :style="{height: '400px'}" />
</el-dialog>
<!-- 版本管理 -->
<el-dialog title="版本管理" :visible.sync="publish.open" width="50%" append-to-body>
<KLPTable v-loading="publish.loading" :data="publish.dataList">
<el-table-column label="流程标识" align="center" prop="processKey" :show-overflow-tooltip="true" />
<el-table-column label="流程名称" align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-button type="text" @click="handleProcessView(scope.row)">
<span>{{ scope.row.processName }}</span>
</el-button>
</template>
</el-table-column>
<el-table-column label="流程版本" align="center">
<template slot-scope="scope">
<el-tag size="medium" >v{{ scope.row.version }}</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" align="center">
<template slot-scope="scope">
<el-tag type="success" v-if="!scope.row.suspended">激活</el-tag>
<el-tag type="warning" v-if="scope.row.suspended">挂起</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
type="text"
size="mini"
icon="el-icon-video-pause"
v-if="!scope.row.suspended"
@click.native="handleChangeState(scope.row, 'suspended')"
v-hasPermi="['workflow:deploy:status']"
>挂起</el-button>
<el-button
type="text"
size="mini"
icon="el-icon-video-play"
v-if="scope.row.suspended"
@click.native="handleChangeState(scope.row, 'active')"
v-hasPermi="['workflow:deploy:status']"
>激活</el-button>
<el-button
type="text"
size="mini"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['workflow:deploy:remove']"
>删除</el-button>
</template>
</el-table-column>
</KLPTable>
<pagination
v-show="publishTotal > 0"
:total="publishTotal"
:page.sync="publishQueryParams.pageNum"
:limit.sync="publishQueryParams.pageSize"
@pagination="getPublishList"
/>
</el-dialog>
</div>
</template>
<script>
import { listAllCategory } from '@/api/workflow/category'
import { listDeploy, listPublish, getBpmnXml, changeState, delDeploy } from '@/api/workflow/deploy'
import ProcessViewer from '@/components/ProcessViewer'
export default {
name: 'Deploy',
components: {
ProcessViewer
},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
processKey: null,
processName: null,
category: null,
state: null
},
deployList: [],
categoryOptions: [],
processView: {
title: '',
open: false,
index: undefined,
xmlData:"",
},
publish: {
open: false,
loading: false,
dataList: []
},
publishTotal: 0,
publishQueryParams: {
pageNum: 1,
pageSize: 20,
processKey: ""
},
}
},
created() {
this.getCategoryList();
this.getList();
},
methods: {
/** 查询流程分类列表 */
getCategoryList() {
listAllCategory().then(response => this.categoryOptions = response.data);
},
/** 查询流程部署列表 */
getList() {
this.loading = true;
listDeploy(this.queryParams).then(response => {
this.deployList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 表单重置
reset() {
this.form = {
id: null,
processKey: null,
processName: null,
category: null,
state: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.deploymentId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 查看流程图 */
handleProcessView(row) {
let definitionId = row.definitionId;
this.processView.title = "流程图";
this.processView.index = definitionId;
// 发送请求，获取xml
getBpmnXml(definitionId).then(response => {
this.processView.xmlData = response.data;
})
this.processView.open = true;
},
getPublishList() {
this.publish.loading = true;
listPublish(this.publishQueryParams).then(response => {
this.publish.dataList = response.rows;
this.publishTotal = response.total;
this.publish.loading = false;
})
},
handlePublish(row) {
this.publishQueryParams.processKey = row.processKey;
this.publish.open = true;
this.getPublishList();
},
/** 挂起/激活流程 */
handleChangeState(row, state) {
const params = {
definitionId: row.definitionId,
state: state
}
changeState(params).then(res => {
this.$modal.msgSuccess(res.msg)
this.getPublishList();
});
},
handleDelete(row) {
const deploymentIds = row.deploymentId || this.ids;
this.$modal.confirm('是否确认删除选中的数据项？').then(() => {
this.loading = true;
return delDeploy(deploymentIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).finally(() => {
this.loading = false;
});
},
categoryFormat(row, column) {
return this.categoryOptions.find(k => k.code === row.category)?.categoryName ?? '';
}
}
}
</script>
<style scoped>
</style>

311
klp-ui/src/views/workflow/form/index.vue
View File

@@ -1,311 +0,0 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="表单名称" prop="formName">
<el-input
v-model="queryParams.formName"
placeholder="请输入表单名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['workflow:form:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['workflow:form:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['workflow:form:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['workflow:form:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<KLPTable v-loading="loading" :data="formList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="表单主键" align="center" prop="formId" />
<el-table-column label="表单名称" align="center" prop="formName" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleDetail(scope.row)"
>详情</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['workflow:form:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['workflow:form:remove']"
>删除</el-button>
</template>
</el-table-column>
</KLPTable>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改流程表单对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="表单名称" prop="formName">
<el-input v-model="form.formName" placeholder="请输入表单名称" />
</el-form-item>
<el-form-item label="表单内容">
<editor v-model="form.content" :min-height="192"/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!--表单配置详情-->
<el-dialog :title="formTitle" :visible.sync="formConfOpen" width="60%" append-to-body>
<div class="test-form">
<parser :key="new Date().getTime()" :form-conf="formConf" />
</div>
</el-dialog>
</div>
</template>
<script>
import { listForm, getForm, delForm, addForm, updateForm } from "@/api/workflow/form";
import Editor from '@/components/Editor';
import Parser from '@/utils/generator/parser'
export default {
name: "Form",
components: {
Editor,
Parser
},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 流程表单表格数据
formList: [],
// 弹出层标题
title: "",
formConf: {}, // 默认表单数据
formConfOpen: false,
formTitle: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
formName: null,
content: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
}
};
},
created() {
this.getList();
},
activated() {
this.getList();
},
methods: {
/** 查询流程表单列表 */
getList() {
this.loading = true;
listForm(this.queryParams).then(response => {
this.formList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
formId: null,
formName: null,
content: null,
createTime: null,
updateTime: null,
createBy: null,
updateBy: null,
remark: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.formId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 表单配置信息 */
handleDetail(row){
this.formConfOpen = true;
this.formTitle = "流程表单配置详细";
this.formConf = JSON.parse(row.content)
},
/** 新增按钮操作 */
handleAdd() {
// this.reset();
// this.open = true;
// this.title = "添加流程表单";
this.$router.push({ path: '/tool/build/index', query: {formId: null }})
},
/** 修改按钮操作 */
handleUpdate(row) {
// this.reset();
// const formId = row.formId || this.ids
// getForm(formId).then(response => {
// this.form = response.data;
// this.open = true;
// this.title = "修改流程表单";
// });
this.$router.push({ path: '/tool/build/index', query: {formId: row.formId }})
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.formId != null) {
updateForm(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addForm(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const formIds = row.formId || this.ids;
this.$confirm('是否确认删除流程表单编号为"' + formIds + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return delForm(formIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
},
/** 导出按钮操作 */
handleExport() {
let _this = this
this.$confirm('是否确认导出所有流程表单数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
_this.download('/workflow/form/export', {
..._this.queryParams
}, `form_${new Date().getTime()}.xlsx`)
})
}
}
};
</script>
<style lang="scss" scoped>
.test-form {
margin: 15px auto;
width: 800px;
padding: 15px;
}
</style>

635
klp-ui/src/views/workflow/model/index.vue
View File

@@ -1,635 +0,0 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="模型标识" prop="modelKey">
<el-input
v-model="queryParams.modelKey"
placeholder="请输入模型标识"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="模型名称" prop="modelName">
<el-input
v-model="queryParams.modelName"
placeholder="请输入模型名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="流程分类" prop="category">
<el-select v-model="queryParams.category" clearable placeholder="请选择" size="small">
<el-option
v-for="item in categoryOptions"
:key="item.categoryId"
:label="item.categoryName"
:value="item.code">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- plain-->
<!-- icon="el-icon-upload"-->
<!-- size="mini"-->
<!-- @click="handleImport"-->
<!-- v-hasPermi="['workflow:model:import']"-->
<!-- >导入</el-button>-->
<!-- </el-col>-->
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['workflow:model:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['workflow:model:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['workflow:model:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<KLPTable v-loading="loading" fit :data="modelList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="模型标识" align="center" prop="modelKey" :show-overflow-tooltip="true" />
<el-table-column label="模型名称" align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-button type="text" @click="handleProcessView(scope.row)">
<span>{{ scope.row.modelName }}</span>
</el-button>
</template>
</el-table-column>
<el-table-column label="流程分类" align="center" prop="categoryName" :formatter="categoryFormat" />
<el-table-column label="模型版本" align="center">
<template slot-scope="scope">
<el-tag size="medium" >v{{ scope.row.version }}</el-tag>
</template>
</el-table-column>
<el-table-column label="描述" align="center" prop="description" :show-overflow-tooltip="true" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['workflow:model:edit']"
>修改</el-button>
<el-button
type="text"
size="mini"
icon="el-icon-brush"
@click="handleDesigner(scope.row)"
v-hasPermi="['workflow:model:designer']"
>设计</el-button>
<el-button
type="text"
size="mini"
icon="el-icon-video-play"
v-hasPermi="['workflow:model:deploy']"
@click.native="handleDeploy(scope.row)"
>部署</el-button>
<el-dropdown size="mini" v-hasPermi="['workflow:model:query', 'workflow:model:list', 'workflow:model:remove']">
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
icon="el-icon-view"
@click.native="handleProcessView(scope.row)"
v-hasPermi="['workflow:model:query']"
>流程图</el-dropdown-item>
<el-dropdown-item
icon="el-icon-price-tag"
@click.native="handleHistory(scope.row)"
v-hasPermi="['workflow:model:list']"
>历史</el-dropdown-item>
<el-dropdown-item
icon="el-icon-delete"
@click.native="handleDelete(scope.row)"
v-hasPermi="['workflow:model:remove']"
>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</KLPTable>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改模型信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="30%" append-to-body @close="cancel()">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="模型标识" prop="modelKey">
<el-input v-model="form.modelKey" clearable disabled />
</el-form-item>
<el-form-item label="模型名称" prop="modelName">
<el-input v-model="form.modelName" clearable :disabled="form.modelId !== undefined" />
</el-form-item>
<el-form-item label="流程分类" prop="category">
<el-select v-model="form.category" placeholder="请选择" clearable style="width:100%">
<el-option v-for="item in categoryOptions" :key="item.categoryId" :label="item.categoryName" :value="item.code" />
</el-select>
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input v-model="form.description" type="textarea" placeholder="请输入内容" maxlength="200" show-word-limit/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel()">取 消</el-button>
</div>
</el-dialog>
<!-- &lt;!&ndash; bpmn20.xml导入对话框 &ndash;&gt;-->
<!-- <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body @close="cancel('uploadForm')">-->
<!-- <el-upload-->
<!-- ref="upload"-->
<!-- :limit="1"-->
<!-- accept=".xml"-->
<!-- :headers="upload.headers"-->
<!-- :action="upload.url + '?name=' + upload.name+'&category='+ upload.category"-->
<!-- :disabled="upload.isUploading"-->
<!-- :on-progress="handleFileUploadProgress"-->
<!-- :on-success="handleFileSuccess"-->
<!-- :auto-upload="false"-->
<!-- drag-->
<!-- >-->
<!-- <i class="el-icon-upload"></i>-->
<!-- <div class="el-upload__text">-->
<!-- 将文件拖到此处，或-->
<!-- <em>点击上传</em>-->
<!-- </div>-->
<!-- <div class="el-upload__tip" slot="tip">-->
<!-- <el-form ref="uploadForm" :model="upload" size="mini" :rules="rules" label-width="80px">-->
<!-- <el-form-item label="流程名称" prop="name">-->
<!-- <el-input v-model="upload.name" clearable/>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="流程分类" prop="category">-->
<!-- <el-select v-model="upload.category" placeholder="请选择" clearable style="width:100%">-->
<!-- <el-option v-for="item in categoryOptions" :key="item.categoryId" :label="item.categoryName"-->
<!-- :value="item.code"/>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </div>-->
<!-- <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“bpmn20.xml”格式文件！</div>-->
<!-- </el-upload>-->
<!-- <div slot="footer" class="dialog-footer">-->
<!-- <el-button type="primary" @click="submitFileForm">确 定</el-button>-->
<!-- <el-button @click="cancel('uploadForm')">取 消</el-button>-->
<!-- </div>-->
<!-- </el-dialog>-->
<!-- 流程图 -->
<el-dialog :title="processView.title" :visible.sync="processView.open" width="70%" append-to-body>
<process-viewer :key="`designer-${processView.index}`" :xml="processView.xmlData" :style="{height: '400px'}" />
</el-dialog>
<el-dialog title="模型历史" :visible.sync="history.open" width="70%" >
<KLPTable v-loading="history.loading" fit :data="historyList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="模型标识" align="center" prop="modelKey" :show-overflow-tooltip="true" />
<el-table-column label="模型名称" align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-button type="text" @click="handleProcessView(scope.row)">
<span>{{ scope.row.modelName }}</span>
</el-button>
</template>
</el-table-column>
<el-table-column label="流程分类" align="center" prop="categoryName" :formatter="categoryFormat" />
<el-table-column label="模型版本" align="center">
<template slot-scope="scope">
<el-tag size="medium" >v{{ scope.row.version }}</el-tag>
</template>
</el-table-column>
<el-table-column label="描述" align="center" prop="description" :show-overflow-tooltip="true" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
type="text"
size="mini"
icon="el-icon-video-play"
v-hasPermi="['workflow:model:deploy']"
@click.native="handleDeploy(scope.row)"
>部署</el-button>
<el-button
type="text"
size="mini"
icon="el-icon-star-off"
v-hasPermi="['workflow:model:save']"
@click.native="handleLatest(scope.row)"
>设为最新</el-button>
</template>
</el-table-column>
</KLPTable>
<pagination
v-show="historyTotal > 0"
:total="historyTotal"
:page.sync="queryHistoryParams.pageNum"
:limit.sync="queryHistoryParams.pageSize"
@pagination="getHistoryList"
/>
</el-dialog>
<el-dialog :title="designerData.title" :visible.sync="designerOpen" append-to-body fullscreen>
<process-designer
:key="designerOpen"
style="border:1px solid rgba(0, 0, 0, 0.1);"
ref="modelDesigner"
v-loading="designerData.loading"
:bpmnXml="designerData.bpmnXml"
:designerForm="designerData.form"
@save="onSaveDesigner"
/>
</el-dialog>
</div>
</template>
<script>
import { getBpmnXml, listModel, historyModel, latestModel, addModel, updateModel, saveModel, delModel, deployModel } from "@/api/workflow/model";
import { listCategory } from '@/api/workflow/category'
import ProcessDesigner from '@/components/ProcessDesigner';
import ProcessViewer from '@/components/ProcessViewer'
import { getToken } from "@/utils/auth";
export default {
name: "Model",
components: {
ProcessDesigner,
ProcessViewer,
},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 流程模型表格数据
modelList: [],
categoryOptions: [],
title: '',
open: false,
form: {},
// 表单校验
rules: {
modelKey: [
{ required: true, message: "模型标识不能为空", trigger: "blur" }
],
modelName: [
{ required: true, message: "模型名称不能为空", trigger: "blur" }
],
category: [
{ required: true, message: "请选择类型", trigger: "change" }
],
},
designerOpen: false,
designerData: {
loading: false,
bpmnXml: '',
modelId: null,
form: {
processName: null,
processKey: null
}
},
designerModelId: null,
processView: {
title: '',
open: false,
index: undefined,
xmlData:"",
},
// bpmn.xml 导入
upload: {
// 是否显示弹出层（xml导入）
open: false,
// 弹出层标题（xml导入）
title: "",
// 是否禁用上传
isUploading: false,
name: null,
category: null,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/workflow/definition/import"
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
modelKey: null,
modelName: null,
category: null
},
currentRow: null,
history: {
open: false,
loading: false
},
historyList: [],
historyTotal: 0,
queryHistoryParams: {
pageNum: 1,
pageSize: 20,
modelKey: null
}
};
},
created() {
this.getCategoryList();
this.getList();
},
methods: {
/** 查询流程分类列表 */
getCategoryList() {
listCategory().then(response => this.categoryOptions = response.rows)
},
/** 查询流程模型列表 */
getList() {
this.loading = true;
listModel(this.queryParams).then(response => {
this.modelList = response.rows;
this.total = response.total;
this.loading = false;
});
},
cancel() {
this.reset();
// 关闭dialog
this.open = false
},
// 表单重置
reset() {
this.form = {
modelId: undefined,
modelKey: undefined,
modelName: undefined,
category: undefined,
description: undefined
};
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.$refs.queryForm.resetFields()
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.modelId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 部署流程 */
handleDeploy(row) {
this.loading = true;
deployModel({
modelId: row.modelId
}).then(response => {
this.$modal.msgSuccess(response.msg);
let obj = { name: 'Deploy', path: '/workflow/deploy' }
return this.$store.dispatch('tagsView/delCachedView', obj).then(() => {
this.$router.push(obj);
});
}).finally(() => {
this.loading = false;
})
},
/** 查看流程图 */
handleProcessView(row) {
let modelId = row.modelId;
this.processView.title = "流程图";
this.processView.index = modelId;
// 发送请求，获取xml
getBpmnXml(modelId).then(response => {
this.processView.xmlData = response.data;
})
this.processView.open = true;
},
getHistoryList() {
this.history.loading = true;
historyModel(this.queryHistoryParams).then(response => {
this.historyTotal = response.total;
this.historyList = response.rows;
this.history.loading = false;
})
},
handleHistory(row) {
this.history.open = true;
this.queryHistoryParams.modelKey = row.modelKey;
this.getHistoryList();
},
/** 设为最新版 */
handleLatest(row) {
this.$modal.confirm('是否确认将此版本设为最新？').then(() => {
this.history.loading = true;
latestModel({
modelId: row.modelId
}).then(response => {
this.history.open = false;
this.getList();
this.$modal.msgSuccess(response.msg);
}).finally(() => {
this.history.loading = false;
})
})
},
handleCurrentChange(data) {
if (data) {
this.currentRow = JSON.parse(data.content);
}
},
handleAdd() {
this.title = "新增流程模型";
const dateTime = new Date().getTime();
this.form = {
modelKey: `Process_${dateTime}`,
modelName: `业务流程_${dateTime}`
}
this.open = true;
},
/** 修改按钮操作 */
handleUpdate(row) {
this.title = "修改流程模型";
this.form = {
modelId: row.modelId,
modelKey: row.modelKey,
modelName: row.modelName,
category: row.category,
description: row.description
};
this.open = true;
},
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.modelId !== undefined) {
updateModel(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addModel(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 设计按钮操作 */
handleDesigner(row) {
this.designerData.title = "流程设计 - " + row.modelName;
this.designerData.modelId = row.modelId;
this.designerData.form = {
processName: row.modelName,
processKey: row.modelKey
}
if (row.modelId) {
this.designerData.loading = true;
getBpmnXml(row.modelId).then(response => {
this.designerData.bpmnXml = response.data || '';
this.designerData.loading = false;
this.designerOpen = true;
})
}
},
onSaveDesigner(bpmnXml) {
this.bpmnXml = bpmnXml;
let dataBody = {
modelId: this.designerData.modelId,
bpmnXml: this.bpmnXml
}
this.$confirm("是否将此模型保存为新版本？", "提示", {
distinguishCancelAndClose: true,
confirmButtonText: '是',
cancelButtonText: '否'
}).then(() => {
this.confirmSave(dataBody, true)
}).catch(action => {
if (action === 'cancel') {
this.confirmSave(dataBody, false)
}
})
},
confirmSave(body, newVersion) {
this.designerData.loading = true;
saveModel(Object.assign(body, {
newVersion: newVersion
})).then(() => {
this.designerOpen = false;
this.getList();
}).finally(() => {
this.designerData.loading = false;
})
},
/** 删除按钮操作 */
handleDelete(row) {
const modelIds = row.modelId || this.ids;
this.$modal.confirm('是否确认删除模型编号为"' + modelIds + '"的数据项？').then(() => {
this.loading = true;
return delModel(modelIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('workflow/model/export', {
...this.queryParams
}, `wf_model_${new Date().getTime()}.xlsx`)
},
/** 导入bpmn.xml文件 */
handleImport() {
this.upload.title = "bpmn20.xml文件导入";
this.upload.open = true;
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$message.success(response.msg);
this.getList();
},
// 提交上传文件
submitFileForm() {
this.$refs.uploadForm.validate(valid => {
if (valid) {
this.$refs.upload.submit();
}
});
},
categoryFormat(row, column) {
return this.categoryOptions.find(k => k.code === row.category)?.categoryName ?? '';
},
submitSave() {
this.getList();
}
}
};
</script>

175
klp-ui/src/views/workflow/work/claim.vue
View File

@@ -1,175 +0,0 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="流程名称" prop="processName">
<el-input
v-model="queryParams.processName"
placeholder="请输入流程名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="接收时间">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd HH:mm:ss"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
v-hasPermi="['workflow:process:claimExport']"
@click="handleExport"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<KLPTable v-loading="loading" :data="claimList">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true"/>
<el-table-column label="流程名称" align="center" prop="procDefName"/>
<el-table-column label="任务节点" align="center" prop="taskName"/>
<el-table-column label="流程版本" align="center">
<template slot-scope="scope">
<el-tag size="medium" >v{{scope.row.procDefVersion}}</el-tag>
</template>
</el-table-column>
<el-table-column label="流程发起人" align="center">
<template slot-scope="scope">
<label>{{scope.row.startUserName}}</label>
</template>
</el-table-column>
<el-table-column label="接收时间" align="center" prop="createTime" width="180"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-s-claim"
@click="handleClaim(scope.row)"
v-hasPermi="['workflow:process:claim']"
>签收
</el-button>
</template>
</el-table-column>
</KLPTable>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import { listClaimProcess } from '@/api/workflow/process';
import { claimTask } from '@/api/workflow/task';
export default {
name: 'Claim',
components: {},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 流程待办任务表格数据
claimList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 日期范围
dateRange: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
name: null,
processName: null
},
// 表单参数
form: {},
// 表单校验
rules: {}
};
},
beforeRouteEnter(to, from, next) {
next(vm => {
vm.getList()
})
},
methods: {
/** 查询流程定义列表 */
getList() {
this.loading = true;
listClaimProcess(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.claimList = response.rows;
this.total = response.total;
this.loading = false;
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.handleQuery();
},
/** 签收 */
handleClaim(row) {
claimTask({taskId: row.taskId}).then(response => {
this.$modal.msgSuccess(response.msg);
this.$router.push({
path: '/work/todo'
})
})
},
/** 导出按钮操作 */
handleExport() {
this.download('workflow/process/claimExport', {
...this.queryParams
}, `wf_claim_process_${new Date().getTime()}.xlsx`)
}
}
};
</script>
<style scoped>
</style>

207
klp-ui/src/views/workflow/work/copy.vue
View File

@@ -1,207 +0,0 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="流程名称" prop="processName">
<el-input
v-model="queryParams.processName"
placeholder="请输入流程名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="发起人" prop="originatorName">
<el-input
v-model="queryParams.originatorName"
placeholder="请输入发起人"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
v-hasPermi="['workflow:process:copyExport']"
@click="handleExport"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<KLPTable v-loading="loading" :data="copyList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="抄送编号" align="center" prop="copyId" />
<el-table-column label="标题" align="center" prop="title" :show-overflow-tooltip="true" />
<el-table-column label="流程名称" align="center" prop="processName" :show-overflow-tooltip="true" />
<el-table-column label="发起人" align="center" prop="originatorName" />
<el-table-column label="创建时间" align="center" prop="createTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-tickets"
@click="handleFlowRecord(scope.row)"
v-hasPermi="['workflow:process:query']"
>详情</el-button>
</template>
</el-table-column>
</KLPTable>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import { listCopyProcess } from "@/api/workflow/process"
export default {
name: "Copy",
data() {
return {
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 流程抄送表格数据
copyList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
processId: undefined,
processName: undefined,
categoryId: undefined,
taskId: undefined,
userId: undefined,
originatorName: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
copyId: [
{ required: true, message: "抄送主键不能为空", trigger: "blur" }
],
processId: [
{ required: true, message: "流程主键不能为空", trigger: "blur" }
],
processName: [
{ required: true, message: "流程名称不能为空", trigger: "blur" }
],
categoryId: [
{ required: true, message: "流程分类主键不能为空", trigger: "blur" }
],
taskId: [
{ required: true, message: "任务主键不能为空", trigger: "blur" }
],
userId: [
{ required: true, message: "用户主键不能为空", trigger: "blur" }
]
}
};
},
created() {
this.getList();
},
methods: {
/** 查询流程抄送列表 */
getList() {
this.loading = true;
listCopyProcess(this.queryParams).then(response => {
this.copyList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
copyId: undefined,
processId: undefined,
processName: undefined,
categoryId: undefined,
taskId: undefined,
userId: undefined,
originatorName: undefined,
createBy: undefined,
createTime: undefined,
updateBy: undefined,
updateTime: undefined,
delFlag: undefined
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.copyId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 查看详情 */
handleFlowRecord(row){
console.log(row);
this.$router.push({
path: '/workflow/process/detail/' + row.instanceId,
query: {
processed: false
}
})
},
/** 导出按钮操作 */
handleExport() {
this.download('workflow/process/copyExport', {
...this.queryParams
}, `wf_copy_process_${new Date().getTime()}.xlsx`)
}
}
};
</script>

670
klp-ui/src/views/workflow/work/detail.vue
View File

@@ -1,670 +0,0 @@
<template>
<div class="app-container">
<el-tabs tab-position="top" :value="processed === true ? 'approval' : 'form'">
<el-tab-pane label="任务办理" name="approval" v-if="processed === true">
<el-card class="box-card" shadow="hover" v-if="taskFormOpen">
<div slot="header" class="clearfix">
<span>填写表单</span>
</div>
<el-col :span="20" :offset="2">
<parser :form-conf="taskFormData" ref="taskFormParser"/>
</el-col>
</el-card>
<el-card class="box-card" shadow="hover">
<div slot="header" class="clearfix">
<span>审批流程</span>
</div>
<el-row>
<el-col :span="20" :offset="2">
<el-form ref="taskForm" :model="taskForm" :rules="rules" label-width="120px">
<el-form-item label="审批意见" prop="comment">
<el-input type="textarea" :rows="5" v-model="taskForm.comment" placeholder="请输入 审批意见" />
</el-form-item>
<el-form-item label="抄送人" prop="copyUserIds">
<el-tag
:key="index"
v-for="(item, index) in copyUser"
closable
:disable-transitions="false"
@close="handleClose('copy', item)">
{{ item.nickName }}
</el-tag>
<el-button class="button-new-tag" type="primary" icon="el-icon-plus" size="mini" circle @click="onSelectCopyUsers" />
</el-form-item>
<el-form-item label="指定审批人" prop="copyUserIds">
<el-tag
:key="index"
v-for="(item, index) in nextUser"
closable
:disable-transitions="false"
@close="handleClose('next', item)">
{{ item.nickName }}
</el-tag>
<el-button class="button-new-tag" type="primary" icon="el-icon-plus" size="mini" circle @click="onSelectNextUsers" />
<div class="form-item-tip">
<i class="el-icon-info"></i>
<span>您可以指定下一个任务的处理人，系统将自动将任务分配给指定的人员</span>
</div>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-row :gutter="10" type="flex" justify="center" >
<el-col :span="1.5">
<el-button icon="el-icon-circle-check" type="success" @click="handleComplete">通过</el-button>
</el-col>
<el-col :span="1.5">
<el-button icon="el-icon-chat-line-square" type="primary" @click="handleDelegate">委派</el-button>
</el-col>
<el-col :span="1.5">
<el-button icon="el-icon-thumb" type="success" @click="handleTransfer">转办</el-button>
</el-col>
<el-col :span="1.5">
<el-button icon="el-icon-refresh-left" type="warning" @click="handleReturn">退回</el-button>
</el-col>
<el-col :span="1.5">
<el-button icon="el-icon-circle-close" type="danger" @click="handleReject">拒绝</el-button>
</el-col>
</el-row>
</el-card>
</el-tab-pane>
<el-tab-pane label="表单信息" name="form">
<div v-if="formOpen">
<el-card class="box-card" shadow="never" v-for="(formInfo, index) in processFormList" :key="index">
<div slot="header" class="clearfix">
<span>{{ formInfo.title }}</span>
</div>
<!--流程处理表单模块-->
<el-col :span="20" :offset="2">
<parser :form-conf="formInfo"/>
</el-col>
</el-card>
</div>
</el-tab-pane >
<el-tab-pane label="流转记录" name="record">
<el-card class="box-card" shadow="never">
<el-col :span="20" :offset="2">
<div class="block">
<el-timeline>
<el-timeline-item v-for="(item,index) in historyProcNodeList" :key="index" :icon="setIcon(item.endTime)" :color="setColor(item.endTime)">
<p style="font-weight: 700">{{ item.activityName }}</p>
<el-card v-if="item.activityType === 'startEvent'" class="box-card" shadow="hover">
{{ item.assigneeName }} 在 {{ item.createTime }} 发起流程
</el-card>
<el-card v-if="item.activityType === 'userTask'" class="box-card" shadow="hover">
<el-descriptions :column="5" :labelStyle="{'font-weight': 'bold'}">
<el-descriptions-item label="实际办理">{{ item.assigneeName || '-'}}</el-descriptions-item>
<el-descriptions-item label="候选办理">{{ item.candidate || '-'}}</el-descriptions-item>
<el-descriptions-item label="接收时间">{{ item.createTime || '-'}}</el-descriptions-item>
<el-descriptions-item label="办结时间">{{ item.endTime || '-' }}</el-descriptions-item>
<el-descriptions-item label="耗时">{{ item.duration || '-'}}</el-descriptions-item>
</el-descriptions>
<div v-if="item.commentList && item.commentList.length > 0">
<div v-for="(comment, index) in item.commentList" :key="index">
<el-divider content-position="left">
<el-tag :type="approveTypeTag(comment.type)" size="mini">{{ commentType(comment.type) }}</el-tag>
<el-tag type="info" effect="plain" size="mini">{{ comment.time }}</el-tag>
</el-divider>
<span>{{ comment.fullMessage }}</span>
</div>
</div>
</el-card>
<el-card v-if="item.activityType === 'endEvent'" class="box-card" shadow="hover">
{{ item.createTime }} 结束流程
</el-card>
</el-timeline-item>
</el-timeline>
</div>
</el-col>
</el-card>
</el-tab-pane>
<el-tab-pane label="流程跟踪" name="track">
<el-card class="box-card" shadow="never">
<process-viewer :key="`designer-${loadIndex}`" :style="'height:' + height" :xml="xmlData"
:finishedInfo="finishedInfo" :allCommentList="historyProcNodeList"
/>
</el-card>
</el-tab-pane>
</el-tabs>
<!--退回流程-->
<el-dialog :title="returnTitle" :visible.sync="returnOpen" width="40%" append-to-body>
<el-form ref="taskForm" :model="taskForm" label-width="80px" >
<el-form-item label="退回节点" prop="targetKey">
<el-radio-group v-model="taskForm.targetKey">
<el-radio-button
v-for="item in returnTaskList"
:key="item.id"
:label="item.id"
>{{item.name}}</el-radio-button>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="returnOpen = false">取 消</el-button>
<el-button type="primary" @click="submitReturn">确 定</el-button>
</span>
</el-dialog>
<el-dialog :title="userData.title" :visible.sync="userData.open" width="60%" append-to-body>
<el-row type="flex" :gutter="20">
<!--部门数据-->
<el-col :span="5">
<el-card shadow="never" style="height: 100%">
<div slot="header">
<span>部门列表</span>
</div>
<div class="head-container">
<el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search"/>
<el-tree
:data="deptOptions"
:props="deptProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
default-expand-all
@node-click="handleNodeClick"
/>
</div>
</el-card>
</el-col>
<el-col :span="18">
<KLPTable ref="userTable"
:key="userData.type"
height="500"
v-loading="userLoading"
:data="userList"
highlight-current-row
@current-change="changeCurrentUser"
@selection-change="handleSelectionChange">
<el-table-column v-if="userData.type === 'copy' || userData.type === 'next'" width="55" type="selection" />
<el-table-column v-else width="30">
<template slot-scope="scope">
<el-radio :label="scope.row.userId" v-model="currentUserId">{{''}}</el-radio>
</template>
</el-table-column>
<el-table-column label="用户名" align="center" prop="nickName" />
<el-table-column label="手机" align="center" prop="phonenumber" />
<el-table-column label="部门" align="center" prop="dept.deptName" />
</KLPTable>
<pagination
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="userData.open = false">取 消</el-button>
<el-button type="primary" @click="submitUserData">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { detailProcess } from '@/api/workflow/process'
import Parser from '@/utils/generator/parser'
import { complete, delegate, transfer, rejectTask, returnList, returnTask } from '@/api/workflow/task'
import { selectUser, deptTreeSelect } from '@/api/system/user'
import ProcessViewer from '@/components/ProcessViewer'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Treeselect from '@riophae/vue-treeselect'
export default {
name: "WorkDetail",
components: {
ProcessViewer,
Parser,
Treeselect
},
props: {},
computed: {
commentType() {
return val => {
switch (val) {
case '1': return '通过'
case '2': return '退回'
case '3': return '驳回'
case '4': return '委派'
case '5': return '转办'
case '6': return '终止'
case '7': return '撤回'
}
}
},
approveTypeTag() {
return val => {
switch (val) {
case '1': return 'success'
case '2': return 'warning'
case '3': return 'danger'
case '4': return 'primary'
case '5': return 'success'
case '6': return 'danger'
case '7': return 'info'
}
}
}
},
data() {
return {
height: document.documentElement.clientHeight - 205 + 'px;',
// 模型xml数据
loadIndex: 0,
xmlData: undefined,
finishedInfo: {
finishedSequenceFlowSet: [],
finishedTaskSet: [],
unfinishedTaskSet: [],
rejectedTaskSet: []
},
historyProcNodeList: [],
// 部门名称
deptName: undefined,
// 部门树选项
deptOptions: undefined,
userLoading: false,
// 用户表格数据
userList: null,
deptProps: {
children: "children",
label: "label"
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
deptId: undefined
},
total: 0,
// 遮罩层
loading: true,
taskForm:{
comment:"", // 意见内容
procInsId: "", // 流程实例编号
taskId: "" ,// 流程任务编号
copyUserIds: "", // 抄送人Id
vars: "",
targetKey:""
},
rules: {
comment: [{ required: true, message: '请输入审批意见', trigger: 'blur' }],
},
currentUserId: null,
variables: [], // 流程变量数据
taskFormOpen: false,
taskFormData: {}, // 流程变量数据
processFormList: [], // 流程变量数据
formOpen: false, // 是否加载流程变量数据
returnTaskList: [], // 回退列表数据
processed: false,
returnTitle: null,
returnOpen: false,
rejectOpen: false,
rejectTitle: null,
userData: {
title: '',
type: '',
open: false,
},
copyUser: [],
nextUser: [],
userMultipleSelection: [],
userDialogTitle: '',
userOpen: false
};
},
created() {
this.initData();
},
methods: {
initData() {
this.taskForm.procInsId = this.$route.params && this.$route.params.procInsId;
this.taskForm.taskId = this.$route.query && this.$route.query.taskId;
this.processed = this.$route.query && eval(this.$route.query.processed || false);
// 流程任务重获取变量表单
this.getProcessDetails(this.taskForm.procInsId, this.taskForm.taskId);
this.loadIndex = this.taskForm.procInsId;
},
/** 查询部门下拉树结构 */
getTreeSelect() {
deptTreeSelect().then(response => {
this.deptOptions = response.data;
});
},
/** 查询用户列表 */
getList() {
this.userLoading = true;
selectUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.userList = response.rows;
this.total = response.total;
this.toggleSelection(this.userMultipleSelection);
this.userLoading = false;
});
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 节点单击事件
handleNodeClick(data) {
this.queryParams.deptId = data.id;
this.getList();
},
setIcon(val) {
if (val) {
return "el-icon-check";
} else {
return "el-icon-time";
}
},
setColor(val) {
if (val) {
return "#2bc418";
} else {
return "#b3bdbb";
}
},
// 多选框选中数据
handleSelectionChange(selection) {
this.userMultipleSelection = selection
},
toggleSelection(selection) {
if (selection && selection.length > 0) {
this.$nextTick(()=> {
selection.forEach(item => {
let row = this.userList.find(k => k.userId === item.userId);
this.$refs.userTable.toggleRowSelection(row);
})
})
} else {
this.$nextTick(() => {
this.$refs.userTable.clearSelection();
});
}
},
// 关闭标签
handleClose(type, tag) {
let userObj = this.userMultipleSelection.find(item => item.userId === tag.id);
this.userMultipleSelection.splice(this.userMultipleSelection.indexOf(userObj), 1);
if (type === 'copy') {
this.copyUser = this.userMultipleSelection;
// 设置抄送人ID
if (this.copyUser && this.copyUser.length > 0) {
const val = this.copyUser.map(item => item.id);
this.taskForm.copyUserIds = val instanceof Array ? val.join(',') : val;
} else {
this.taskForm.copyUserIds = '';
}
} else if (type === 'next') {
this.nextUser = this.userMultipleSelection;
// 设置抄送人ID
if (this.nextUser && this.nextUser.length > 0) {
const val = this.nextUser.map(item => item.id);
this.taskForm.nextUserIds = val instanceof Array ? val.join(',') : val;
} else {
this.taskForm.nextUserIds = '';
}
}
},
/** 流程变量赋值 */
handleCheckChange(val) {
if (val instanceof Array) {
this.taskForm.values = {
"approval": val.join(',')
}
} else {
this.taskForm.values = {
"approval": val
}
}
},
getProcessDetails(procInsId, taskId) {
const params = {procInsId: procInsId, taskId: taskId}
detailProcess(params).then(res => {
const data = res.data;
this.xmlData = data.bpmnXml;
this.processFormList = data.processFormList;
this.taskFormOpen = data.existTaskForm;
if (this.taskFormOpen) {
this.taskFormData = data.taskFormData;
}
this.historyProcNodeList = data.historyProcNodeList;
this.finishedInfo = data.flowViewer;
this.formOpen = true
})
},
onSelectCopyUsers() {
this.userMultipleSelection = this.copyUser;
this.onSelectUsers('添加抄送人', 'copy')
},
onSelectNextUsers() {
this.userMultipleSelection = this.nextUser;
this.onSelectUsers('指定审批人', 'next')
},
onSelectUsers(title, type) {
this.userData.title = title;
this.userData.type = type;
this.getTreeSelect();
this.getList()
this.userData.open = true;
},
/** 通过任务 */
handleComplete() {
// 校验表单
const taskFormRef = this.$refs.taskFormParser;
const isExistTaskForm = taskFormRef !== undefined;
// 若无任务表单，则 taskFormPromise 为 true，即不需要校验
const taskFormPromise = !isExistTaskForm ? true : new Promise((resolve, reject) => {
taskFormRef.$refs[taskFormRef.formConfCopy.formRef].validate(valid => {
valid ? resolve() : reject()
})
});
const approvalPromise = new Promise((resolve, reject) => {
this.$refs['taskForm'].validate(valid => {
valid ? resolve() : reject()
})
});
Promise.all([taskFormPromise, approvalPromise]).then(() => {
if (isExistTaskForm) {
this.taskForm.variables = taskFormRef[taskFormRef.formConfCopy.formModel]
}
complete(this.taskForm).then(response => {
this.$modal.msgSuccess(response.msg);
this.goBack();
});
})
},
/** 委派任务 */
handleDelegate() {
this.$refs["taskForm"].validate(valid => {
if (valid) {
this.userData.type = 'delegate';
this.userData.title = '委派任务'
this.userData.open = true;
this.getTreeSelect();
}
})
},
/** 转办任务 */
handleTransfer(){
this.$refs["taskForm"].validate(valid => {
if (valid) {
this.userData.type = 'transfer';
this.userData.title = '转办任务';
this.userData.open = true;
this.getTreeSelect();
}
})
},
/** 拒绝任务 */
handleReject() {
this.$refs["taskForm"].validate(valid => {
if (valid) {
const _this = this;
this.$modal.confirm('拒绝审批单流程会终止，是否继续？').then(function() {
return rejectTask(_this.taskForm);
}).then(res => {
this.$modal.msgSuccess(res.msg);
this.goBack();
});
}
});
},
changeCurrentUser(val) {
this.currentUserId = val.userId
},
/** 返回页面 */
goBack() {
// 关闭当前标签页并返回上个页面
this.$tab.closePage(this.$route)
this.$router.back()
},
/** 接收子组件传的值 */
getData(data) {
if (data) {
const variables = [];
data.fields.forEach(item => {
let variableData = {};
variableData.label = item.__config__.label
// 表单值为多个选项时
if (item.__config__.defaultValue instanceof Array) {
const array = [];
item.__config__.defaultValue.forEach(val => {
array.push(val)
})
variableData.val = array;
} else {
variableData.val = item.__config__.defaultValue
}
variables.push(variableData)
})
this.variables = variables;
}
},
submitUserData() {
let type = this.userData.type;
if (type === 'copy' || type === 'next') {
if (!this.userMultipleSelection || this.userMultipleSelection.length <= 0) {
this.$modal.msgError("请选择用户");
return false;
}
let userIds = this.userMultipleSelection.map(k => k.userId);
if (type === 'copy') {
// 设置抄送人ID信息
this.copyUser = this.userMultipleSelection;
this.taskForm.copyUserIds = userIds instanceof Array ? userIds.join(',') : userIds;
} else if (type === 'next') {
// 设置下一级审批人ID信息
this.nextUser = this.userMultipleSelection;
this.taskForm.nextUserIds = userIds instanceof Array ? userIds.join(',') : userIds;
}
this.userData.open = false;
} else {
if (!this.taskForm.comment) {
this.$modal.msgError("请输入审批意见");
return false;
}
if (!this.currentUserId) {
this.$modal.msgError("请选择用户");
return false;
}
this.taskForm.userId = this.currentUserId;
if (type === 'delegate') {
delegate(this.taskForm).then(res => {
this.$modal.msgSuccess(res.msg);
this.goBack();
});
}
if (type === 'transfer') {
transfer(this.taskForm).then(res => {
this.$modal.msgSuccess(res.msg);
this.goBack();
});
}
}
},
/** 可退回任务列表 */
handleReturn() {
this.$refs['taskForm'].validate(valid => {
if (valid) {
this.returnTitle = "退回流程";
returnList(this.taskForm).then(res => {
this.returnTaskList = res.data;
this.taskForm.values = null;
this.returnOpen = true;
})
}
});
},
/** 提交退回任务 */
submitReturn() {
this.$refs["taskForm"].validate(valid => {
if (valid) {
if (!this.taskForm.targetKey) {
this.$modal.msgError("请选择退回节点！");
}
returnTask(this.taskForm).then(res => {
this.$modal.msgSuccess(res.msg);
this.goBack()
});
}
});
}
}
};
</script>
<style lang="scss" scoped>
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 100%;
margin-bottom: 20px;
}
.el-tag + .el-tag {
margin-left: 10px;
}
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.button-new-tag {
margin-left: 10px;
}
.form-item-tip {
margin-top: 8px;
font-size: 12px;
color: #909399;
line-height: 1.5;
i {
margin-right: 4px;
color: #E6A23C;
}
}
</style>

243
klp-ui/src/views/workflow/work/finished.vue
View File

@@ -1,243 +0,0 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="流程名称" prop="processName">
<el-input
v-model="queryParams.processName"
placeholder="请输入流程名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="审批时间">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd HH:mm:ss"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
v-hasPermi="['workflow:process:finishedExport']"
@click="handleExport"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<KLPTable v-loading="loading" :data="finishedList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true"/>
<el-table-column label="流程名称" align="center" prop="procDefName" :show-overflow-tooltip="true"/>
<el-table-column label="任务节点" align="center" prop="taskName" />
<el-table-column label="流程发起人" align="center">
<template slot-scope="scope">
<label>{{scope.row.startUserName}}</label>
</template>
</el-table-column>
<el-table-column label="接收时间" align="center" prop="createTime" width="180"/>
<el-table-column label="审批时间" align="center" prop="finishTime" width="180"/>
<el-table-column label="耗时" align="center" prop="duration" width="180"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-tickets"
@click="handleFlowRecord(scope.row)"
v-hasPermi="['workflow:process:query']"
>流转记录</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-tickets"
@click="handleRevoke(scope.row)"
v-hasPermi="['workflow:process:revoke']"
>撤回
</el-button>
</template>
</el-table-column>
</KLPTable>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import { listFinishedProcess } from '@/api/workflow/process';
import { revokeProcess } from "@/api/workflow/finished";
export default {
name: "Finished",
components: {
},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 已办任务列表数据
finishedList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
src: "",
dateRange: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
name: null,
category: null,
key: null,
tenantId: null,
deployTime: null,
derivedFrom: null,
derivedFromRoot: null,
parentDeploymentId: null,
engineVersion: null
},
// 表单参数
form: {},
// 表单校验
rules: {
}
};
},
beforeRouteEnter(to, from, next) {
next(vm => {
vm.getList()
})
},
methods: {
/** 查询流程定义列表 */
getList() {
this.loading = true;
listFinishedProcess(this.queryParams).then(response => {
this.finishedList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
category: null,
key: null,
tenantId: null,
deployTime: null,
derivedFrom: null,
derivedFromRoot: null,
parentDeploymentId: null,
engineVersion: null
};
this.resetForm("form");
},
setIcon(val){
if (val){
return "el-icon-check";
}else {
return "el-icon-time";
}
},
setColor(val){
if (val){
return "#2bc418";
}else {
return "#b3bdbb";
}
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加流程定义";
},
/** 流程流转记录 */
handleFlowRecord(row){
this.$router.push({
path: '/workflow/process/detail/' + row.procInsId,
query: {
processed: false
}
})
},
/** 撤回任务 */
handleRevoke(row) {
const params = {
procInsId: row.procInsId,
taskId: row.taskId
};
revokeProcess(params).then(res => {
this.$modal.msgSuccess(res.msg);
this.getList();
});
},
/** 导出按钮操作 */
handleExport() {
this.download('workflow/process/finishedExport', {
...this.queryParams
}, `wf_finished_process_${new Date().getTime()}.xlsx`)
}
}
};
</script>

204
klp-ui/src/views/workflow/work/index.vue
View File

@@ -1,204 +0,0 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="流程标识" prop="processKey">
<el-input
v-model="queryParams.processKey"
placeholder="请输入流程标识"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="流程名称" prop="processName">
<el-input
v-model="queryParams.processName"
placeholder="请输入流程名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="流程分类" prop="category">
<el-select v-model="queryParams.category" clearable placeholder="请选择" size="small">
<el-option
v-for="item in categoryOptions"
:key="item.categoryId"
:label="item.categoryName"
:value="item.code">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
v-hasPermi="['workflow:process:startExport']"
@click="handleExport"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<KLPTable v-loading="loading" fit :data="processList">
<el-table-column label="序号" type="index" width="50"></el-table-column>
<el-table-column label="流程标识" align="center" prop="processKey" :show-overflow-tooltip="true" />
<el-table-column label="流程名称" align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-button type="text" @click="handleProcessView(scope.row)">
<span>{{ scope.row.processName }}</span>
</el-button>
</template>
</el-table-column>
<el-table-column label="流程分类" align="center" prop="categoryName" :formatter="categoryFormat" />
<el-table-column label="流程版本" align="center">
<template slot-scope="scope">
<el-tag size="medium" >v{{ scope.row.version }}</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" align="center">
<template slot-scope="scope">
<el-tag type="success" v-if="!scope.row.suspended">激活</el-tag>
<el-tag type="warning" v-if="scope.row.suspended">挂起</el-tag>
</template>
</el-table-column>
<el-table-column label="部署时间" align="center" prop="deploymentTime" width="180"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
type="text"
size="mini"
icon="el-icon-video-play"
@click="handleStart(scope.row)"
v-hasPermi="['workflow:process:start']"
>发起</el-button>
</template>
</el-table-column>
</KLPTable>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 流程图 -->
<el-dialog :title="processView.title" :visible.sync="processView.open" width="70%" append-to-body>
<process-viewer :key="`designer-${processView.index}`" :xml="processView.xmlData" :style="{height: '400px'}" />
</el-dialog>
</div>
</template>
<script>
import { listProcess, getBpmnXml } from "@/api/workflow/process";
import { listAllCategory } from '@/api/workflow/category'
import ProcessViewer from '@/components/ProcessViewer'
export default {
name: 'WorkProcess',
components: {
ProcessViewer
},
data() {
return {
// 遮罩层
loading: true,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
processKey: undefined,
processName: undefined,
category: undefined
},
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
filterCategoryText: '',
categoryOptions: [],
categoryProps: {
label: 'categoryName',
value: 'code'
},
// 流程定义表格数据
processList: [],
processView: {
title: '',
open: false,
index: undefined,
xmlData:"",
}
}
},
created() {
this.getCategoryList();
this.getList();
},
methods: {
/** 查询流程分类列表 */
getCategoryList() {
listAllCategory().then(response => this.categoryOptions = response.data)
},
/** 查询流程定义列表 */
getList() {
this.loading = true;
listProcess(this.queryParams).then(response => {
this.processList = response.rows;
this.total = response.total;
this.loading = false
})
},
// 搜索按钮操作
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
// 重置按钮操作
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 查看流程图 */
handleProcessView(row) {
let definitionId = row.definitionId;
this.processView.title = "流程图";
this.processView.index = definitionId;
// 发送请求，获取xml
getBpmnXml(definitionId).then(res => {
this.processView.xmlData = res.data;
})
this.processView.open = true;
},
handleStart(row) {
this.$router.push({
path: '/workflow/process/start/' + row.deploymentId,
query: {
definitionId: row.definitionId,
}
})
},
/** 导出按钮操作 */
handleExport() {
this.download('workflow/process/startExport', {
...this.queryParams
}, `wf_start_process_${new Date().getTime()}.xlsx`)
},
categoryFormat(row, column) {
return this.categoryOptions.find(k => k.code === row.category)?.categoryName ?? '';
}
}
}
</script>
<style scoped>
</style>

301
klp-ui/src/views/workflow/work/own.vue
View File

@@ -1,301 +0,0 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="流程标识" prop="processKey">
<el-input
v-model="queryParams.processKey"
placeholder="请输入流程标识"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="流程名称" prop="processName">
<el-input
v-model="queryParams.processName"
placeholder="请输入流程名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="流程分类" prop="category">
<el-select v-model="queryParams.category" clearable placeholder="请选择" size="small">
<el-option
v-for="item in categoryOptions"
:key="item.categoryId"
:label="item.categoryName"
:value="item.code">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="提交时间">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd HH:mm:ss"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
v-hasPermi="['workflow:process:ownExport']"
@click="handleExport"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<KLPTable v-loading="loading" :data="ownProcessList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="流程编号" align="center" prop="procInsId" :show-overflow-tooltip="true"/>
<el-table-column label="流程名称" align="center" prop="procDefName" :show-overflow-tooltip="true"/>
<el-table-column label="流程类别" align="center" prop="category" :formatter="categoryFormat" />
<el-table-column label="流程版本" align="center" width="80px">
<template slot-scope="scope">
<el-tag size="medium" >v{{ scope.row.procDefVersion }}</el-tag>
</template>
</el-table-column>
<el-table-column label="当前节点" align="center" prop="taskName"/>
<el-table-column label="提交时间" align="center" prop="createTime" width="180"/>
<el-table-column label="流程状态" align="center" width="100">
<template slot-scope="scope">
<dict-tag :options="dict.type.wf_process_status" :value="scope.row.processStatus"/>
</template>
</el-table-column>
<el-table-column label="耗时" align="center" prop="duration" width="180"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
type="text"
size="mini"
icon="el-icon-tickets"
@click="handleFlowRecord(scope.row)"
v-hasPermi="['workflow:process:query']"
>详情</el-button>
<el-button
type="text"
size="mini"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-if="scope.row.finishTime"
v-hasPermi="['workflow:process:remove']"
>删除</el-button>
<el-button
type="text"
size="mini"
icon="el-icon-circle-close"
@click="handleStop(scope.row)"
v-hasPermi="['workflow:process:cancel']"
>取消</el-button>
<el-button
type="text"
size="mini"
icon="el-icon-refresh-right"
v-hasPermi="['workflow:process:start']"
@click="handleAgain(scope.row)"
>重新发起</el-button>
</template>
</el-table-column>
</KLPTable>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import { listOwnProcess, stopProcess, delProcess } from '@/api/workflow/process';
import { listAllCategory } from '@/api/workflow/category';
export default {
name: "Own",
dicts: ['wf_process_status'],
components: {
},
data() {
return {
// 遮罩层
loading: true,
processLoading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
categoryOptions: [],
processTotal:0,
// 我发起的流程列表数据
ownProcessList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
src: "",
definitionList:[],
// 日期范围
dateRange: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
processKey: undefined,
processName: undefined,
category: undefined
},
// 表单参数
form: {},
// 表单校验
rules: {
},
};
},
created() {
this.getCategoryList();
},
beforeRouteEnter(to, from, next) {
next(vm => {
vm.getList()
})
},
methods: {
/** 查询流程分类列表 */
getCategoryList() {
listAllCategory().then(response => this.categoryOptions = response.data)
},
/** 查询流程定义列表 */
getList() {
this.loading = true;
listOwnProcess(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.ownProcessList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
category: null,
key: null,
tenantId: null,
deployTime: null,
derivedFrom: null,
derivedFromRoot: null,
parentDeploymentId: null,
engineVersion: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.procInsId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
handleAgain(row) {
this.$router.push({
path: '/workflow/process/start/' + row.deployId,
query: {
definitionId: row.procDefId,
procInsId: row.procInsId
}
})
},
/** 取消流程申请 */
handleStop(row){
const params = {
procInsId: row.procInsId
}
stopProcess(params).then( res => {
this.$modal.msgSuccess(res.msg);
this.getList();
});
},
/** 流程流转记录 */
handleFlowRecord(row) {
this.$router.push({
path: '/workflow/process/detail/' + row.procInsId,
query: {
processed: false
}
})
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.procInsId || this.ids;
this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return delProcess(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
},
/** 导出按钮操作 */
handleExport() {
this.download('workflow/process/ownExport', {
...this.queryParams
}, `wf_own_process_${new Date().getTime()}.xlsx`)
},
categoryFormat(row, column) {
return this.categoryOptions.find(k => k.code === row.category)?.categoryName ?? '';
}
}
};
</script>

328
klp-ui/src/views/workflow/work/start.vue
View File

@@ -1,328 +0,0 @@
<template>
<div class="app-container">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>发起流程</span>
</div>
<el-col :span="18" :offset="3">
<div class="form-conf" v-if="formOpen">
<parser :key="parserKey" :form-conf="formData" ref="parser" @getData="getData"/>
</div>
<!-- 审批负责人设置 -->
<el-col :span="10" :offset="3">
<el-form ref="approvalForm" :model="approvalForm" label-width="120px">
<el-form-item label="指定审批人">
<el-tag
:key="index"
v-for="(item, index) in approvalUsers"
closable
:disable-transitions="false"
@close="handleClose(item)">
{{ item.nickName }}
</el-tag>
<el-button class="button-new-tag" type="primary" icon="el-icon-plus" size="mini" circle @click="onSelectUsers" />
</el-form-item>
</el-form>
</el-col>
<!-- 提交和重置按钮 -->
<div class="submit-buttons" v-if="formOpen">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</div>
</el-col>
</el-card>
<!-- 用户选择对话框 -->
<el-dialog title="选择审批人" :visible.sync="userData.open" width="60%" append-to-body>
<el-row type="flex" :gutter="20">
<!--部门数据-->
<el-col :span="5">
<el-card shadow="never" style="height: 100%">
<div slot="header">
<span>部门列表</span>
</div>
<div class="head-container">
<el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search"/>
<el-tree
:data="deptOptions"
:props="deptProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
default-expand-all
@node-click="handleNodeClick"
/>
</div>
</el-card>
</el-col>
<el-col :span="18">
<KLPTable ref="userTable"
height="500"
v-loading="userLoading"
:data="userList"
highlight-current-row
@selection-change="handleSelectionChange">
<el-table-column width="55" type="selection" />
<el-table-column label="用户名" align="center" prop="nickName" />
<el-table-column label="手机" align="center" prop="phonenumber" />
<el-table-column label="部门" align="center" prop="dept.deptName" />
</KLPTable>
<pagination
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="userData.open = false">取 消</el-button>
<el-button type="primary" @click="submitUserData">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { getProcessForm, startProcess } from '@/api/workflow/process'
import Parser from '@/utils/generator/parser'
import { selectUser, deptTreeSelect } from '@/api/system/user'
import Pagination from '@/components/Pagination'
export default {
name: 'WorkStart',
components: {
Parser,
Pagination
},
data() {
return {
definitionId: null,
deployId: null,
procInsId: null,
formOpen: false,
formData: {},
parserKey: 1,
// 审批表单
approvalForm: {
approvalType: 1, // 默认指定用户
},
// 审批用户
approvalUsers: [],
userMultipleSelection: [],
// 部门名称
deptName: undefined,
// 部门树选项
deptOptions: undefined,
userLoading: false,
// 用户表格数据
userList: null,
deptProps: {
children: "children",
label: "label"
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
deptId: undefined
},
total: 0,
// 用户数据
userData: {
open: false
}
}
},
created() {
this.initData();
},
methods: {
initData() {
this.deployId = this.$route.params && this.$route.params.deployId;
this.definitionId = this.$route.query && this.$route.query.definitionId;
this.procInsId = this.$route.query && this.$route.query.procInsId;
getProcessForm({
definitionId: this.definitionId,
deployId: this.deployId,
procInsId: this.procInsId
}).then(res => {
if (res.data) {
this.formData = res.data;
// 表单按钮隐藏
this.formData.formBtns = false;
this.parserKey++ // 只有加载新表单时才更新 key
this.formOpen = true
}
})
},
/** 接收子组件传的值 */
getData(data) {
if (data) {
const variables = [];
data.fields.forEach(item => {
const variableData = {};
variableData.label = item.__config__.label
// 表单值为多个选项时
if (item.__config__.defaultValue instanceof Array) {
const array = [];
item.__config__.defaultValue.forEach(val => {
array.push(val)
})
variableData.val = array;
} else {
variableData.val = item.__config__.defaultValue
}
variables.push(variableData)
})
this.variables = variables;
}
},
// 提交表单
submitForm() {
const parserRef = this.$refs.parser;
if (!parserRef) {
this.$modal.msgError("表单未加载完成");
return;
}
// 获取表单数据
parserRef.getData();
// 验证表单
parserRef.$refs[parserRef.formConfCopy.formRef].validate(valid => {
if (valid) {
const formData = parserRef[parserRef.formConfCopy.formModel];
// 添加审批人信息到表单数据
// 根据审批类型添加不同的审批人信息
if (this.approvalForm.approvalType === 1 && this.approvalUsers.length > 0) {
// 指定用户
formData.flowable = formData.flowable || {};
formData.flowable.candidateUsers = this.approvalUsers.map(user => user.userId).join(',');
formData.flowable.candidateGroups = '';
formData.flowable.text = this.approvalUsers.map(user => user.nickName).join(',');
}
// 启动流程并将表单数据加入流程变量
if (this.definitionId) {
startProcess(this.definitionId, JSON.stringify(formData)).then(res => {
this.$modal.msgSuccess(res.msg);
this.$tab.closeOpenPage({
path: '/work/own'
});
});
} else {
this.$modal.msgError("流程定义ID不存在");
}
} else {
this.$modal.msgError("表单验证失败，请检查填写的内容");
}
});
},
// 重置表单
resetForm() {
const parserRef = this.$refs.parser;
if (parserRef) {
parserRef.$refs[parserRef.formConfCopy.formRef].resetFields();
}
this.approvalUsers = [];
this.userMultipleSelection = [];
this.approvalForm.approvalType = 1;
},
/** 查询部门下拉树结构 */
getTreeSelect() {
deptTreeSelect().then(response => {
this.deptOptions = response.data;
});
},
/** 查询用户列表 */
getList() {
this.userLoading = true;
selectUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.userList = response.rows;
this.total = response.total;
this.toggleSelection(this.userMultipleSelection);
this.userLoading = false;
});
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 节点单击事件
handleNodeClick(data) {
this.queryParams.deptId = data.id;
this.getList();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.userMultipleSelection = selection;
},
toggleSelection(selection) {
if (selection && selection.length > 0) {
this.$nextTick(()=> {
selection.forEach(item => {
let row = this.userList.find(k => k.userId === item.userId);
if (row) {
this.$refs.userTable.toggleRowSelection(row);
}
})
})
} else {
this.$nextTick(() => {
this.$refs.userTable.clearSelection();
});
}
},
// 关闭标签
handleClose(tag) {
let userObj = this.userMultipleSelection.find(item => item.userId === tag.userId);
if (userObj) {
this.userMultipleSelection.splice(this.userMultipleSelection.indexOf(userObj), 1);
}
this.approvalUsers = this.userMultipleSelection;
},
onSelectUsers() {
this.userMultipleSelection = this.approvalUsers;
this.userData.open = true;
this.getTreeSelect();
this.getList();
},
submitUserData() {
if (!this.userMultipleSelection || this.userMultipleSelection.length <= 0) {
this.$modal.msgError("请选择用户");
return false;
}
this.approvalUsers = this.userMultipleSelection;
this.userData.open = false;
},
// 添加日期范围
addDateRange(params, dateRange, propName) {
let search = params;
search = typeof(search) === 'object' && search !== null && !Array.isArray(search) ? search : {};
dateRange = Array.isArray(dateRange) ? dateRange : [];
if (typeof(propName) === 'undefined') {
search['beginTime'] = dateRange[0];
search['endTime'] = dateRange[1];
} else {
search['begin' + propName] = dateRange[0];
search['end' + propName] = dateRange[1];
}
return search;
}
}
}
</script>
<style lang="scss" scoped>
.form-conf {
margin: 15px auto;
width: 80%;
padding: 15px;
}
</style>

203
klp-ui/src/views/workflow/work/todo.vue
View File

@@ -1,203 +0,0 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="流程名称" prop="processName">
<el-input
v-model="queryParams.processName"
placeholder="请输入流程名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="接收时间">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd HH:mm:ss"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
v-hasPermi="['workflow:process:todoExport']"
@click="handleExport"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<KLPTable v-loading="loading" :data="todoList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true"/>
<el-table-column label="流程名称" align="center" prop="procDefName"/>
<el-table-column label="任务节点" align="center" prop="taskName"/>
<el-table-column label="流程版本" align="center">
<template slot-scope="scope">
<el-tag size="medium" >v{{scope.row.procDefVersion}}</el-tag>
</template>
</el-table-column>
<el-table-column label="流程发起人" align="center">
<template slot-scope="scope">
<label>{{scope.row.startUserName}}</label>
</template>
</el-table-column>
<el-table-column label="接收时间" align="center" prop="createTime" width="180"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit-outline"
@click="handleProcess(scope.row)"
v-hasPermi="['workflow:process:approval']"
>办理
</el-button>
</template>
</el-table-column>
</KLPTable>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import { listTodoProcess } from '@/api/workflow/process';
export default {
name: "Todo",
components: {},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 流程待办任务表格数据
todoList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 日期范围
dateRange: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
name: null,
category: null
},
// 表单参数
form: {},
// 表单校验
rules: {}
};
},
beforeRouteEnter(to, from, next) {
next(vm => {
vm.getList()
})
},
methods: {
/** 查询流程定义列表 */
getList() {
this.loading = true;
listTodoProcess(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.todoList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 跳转到处理页面
handleProcess(row) {
this.$router.push({
path: '/workflow/process/detail/' + row.procInsId,
query: {
taskId: row.taskId,
processed: true
}
})
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
category: null,
key: null,
tenantId: null,
deployTime: null,
derivedFrom: null,
derivedFromRoot: null,
parentDeploymentId: null,
engineVersion: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加流程定义";
},
/** 导出按钮操作 */
handleExport() {
this.download('workflow/process/todoExport', {
...this.queryParams
}, `wf_todo_process_${new Date().getTime()}.xlsx`)
}
}
};
</script>