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

fix -- 修复我的流程跳转后表单内容为空，优化流程详情页面显示布局。

Browse Source
This commit is contained in:
konbai
2022-04-02 22:25:12 +08:00
parent 0e0207f2ea
commit cddc5cf121
12 changed files with 297 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
ruoyi-ui/src/api/workflow/instance.js Normal file
View File

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

4
ruoyi-ui/src/api/workflow/process.js
View File

@@ -20,9 +20,9 @@ export function startProcess(processDefId, data) {
}
// 我的发起的流程
export function myProcessList(query) {
export function listOwnProcess(query) {
return request({
url: '/workflow/task/myProcess',
url: '/workflow/process/own',
method: 'get',
params: query
})

247
ruoyi-ui/src/views/workflow/work/detail.vue
View File

@@ -1,21 +1,37 @@
<template>
<div class="app-container">
<el-tabs tab-position="top" v-model="activeTagName">
<el-tab-pane label="基础信息" name="basicInfo">
<el-card class="box-card">
<el-tabs tab-position="top">
<el-tab-pane label="任务办理" v-if="finished === 'true'">
<el-card class="box-card" shadow="never">
<el-row>
<el-col :span="20" :offset="2">
<el-form ref="taskForm" :model="taskForm" :rules="rules" label-width="80px">
<el-form-item label="审批意见" prop="comment">
<el-input type="textarea" :rows="5" v-model="taskForm.comment" placeholder="请输入 审批意见" />
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-row>
<el-col :span="6" :offset="8">
<el-button icon="el-icon-edit-outline" type="success" @click="handleComplete">通过</el-button>
<!-- <el-button icon="el-icon-edit-outline" type="primary" @click="handleDelegate">委派</el-button>-->
<!-- <el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleAssign">转办</el-button>-->
<!-- <el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">签收</el-button>-->
<el-button icon="el-icon-refresh-left" type="warning" @click="handleReturn">退回</el-button>
<el-button icon="el-icon-circle-close" type="danger" @click="handleReject">驳回</el-button>
</el-col>
</el-row>
</el-card>
<!-- </div>-->
</el-tab-pane>
<el-tab-pane label="表单信息">
<el-card class="box-card" shadow="never">
<!--流程处理表单模块-->
<el-col :span="16" :offset="6" v-if="variableOpen">
<el-col :span="20" :offset="2" v-if="variableOpen">
<div>
<parser :key="new Date().getTime()" :form-conf="variablesData"/>
</div>
<div style="margin-left:10%;margin-bottom: 20px;font-size: 14px;" v-if="finished === 'true'">
<el-button icon="el-icon-edit-outline" type="success" size="mini" @click="handleComplete">审批</el-button>
<!-- <el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">委派</el-button>-->
<!-- <el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleAssign">转办</el-button>-->
<!-- <el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">签收</el-button>-->
<el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleReturn">退回</el-button>
<el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">驳回</el-button>
</div>
</el-col>
<!--初始化流程加载表单信息-->
@@ -26,8 +42,8 @@
</el-col>
</el-card>
</el-tab-pane >
<el-tab-pane label="流转记录" name="flowRecord">
<el-card class="box-card">
<el-tab-pane label="流转记录">
<el-card class="box-card" shadow="never">
<el-col :span="16" :offset="4">
<div class="block">
<el-timeline>
@@ -71,8 +87,8 @@
</el-col>
</el-card>
</el-tab-pane>
<el-tab-pane label="流程跟踪" name="processTrack">
<el-card class="box-card">
<el-tab-pane label="流程跟踪">
<el-card class="box-card" shadow="never">
<process-viewer :key="`designer-${loadIndex}`" :style="'height:' + height" :xml="xmlData"
:finishedInfo="finishedInfo" :allCommentList="null"
/>
@@ -80,65 +96,6 @@
</el-tab-pane>
</el-tabs>
<!--审批正常流程-->
<el-dialog :title="completeTitle" :visible.sync="completeOpen" width="60%" append-to-body>
<!-- <el-row :gutter="20">-->
<!-- &lt;!&ndash;部门数据&ndash;&gt;-->
<!-- <el-col :span="4" :xs="24">-->
<!-- <h6>部门列表</h6>-->
<!-- <div class="head-container">-->
<!-- <el-input-->
<!-- v-model="deptName"-->
<!-- placeholder="请输入部门名称"-->
<!-- clearable-->
<!-- size="small"-->
<!-- prefix-icon="el-icon-search"-->
<!-- style="margin-bottom: 20px"-->
<!-- />-->
<!-- </div>-->
<!-- <div class="head-container">-->
<!-- <el-tree-->
<!-- :data="deptOptions"-->
<!-- :props="defaultProps"-->
<!-- :expand-on-click-node="false"-->
<!-- :filter-node-method="filterNode"-->
<!-- ref="tree"-->
<!-- default-expand-all-->
<!-- @node-click="handleNodeClick"-->
<!-- />-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="12" :xs="24">-->
<!-- <h6>待选人员</h6>-->
<!-- <el-table-->
<!-- ref="singleTable"-->
<!-- :data="userList"-->
<!-- border-->
<!-- style="width: 100%"-->
<!-- @selection-change="handleSelectionChange">-->
<!-- <el-table-column type="selection" width="50" align="center" />-->
<!-- <el-table-column label="用户名" align="center" prop="nickName" />-->
<!-- <el-table-column label="部门" align="center" prop="dept.deptName" />-->
<!-- </el-table>-->
<!-- </el-col>-->
<!-- <el-col :span="8" :xs="24">-->
<!-- <h6>已选人员</h6>-->
<!-- <el-tag-->
<!-- v-for="tag in userData"-->
<!-- :key="tag.nickName"-->
<!-- closable-->
<!-- @close="handleClose(tag)">-->
<!-- {{tag.nickName}} {{tag.dept.deptName}}-->
<!-- </el-tag>-->
<!-- </el-col>-->
<!-- </el-row>-->
<span slot="footer" class="dialog-footer">
<el-input style="width: 50%;margin-right: 34%" type="textarea" v-model="taskForm.comment" placeholder="请输入处理意见"/>
<el-button @click="completeOpen = false">取 消</el-button>
<el-button type="primary" @click="taskComplete">确 定</el-button>
</span>
</el-dialog>
<!--退回流程-->
<el-dialog :title="returnTitle" :visible.sync="returnOpen" width="40%" append-to-body>
<el-form ref="taskForm" :model="taskForm" label-width="80px" >
@@ -151,33 +108,19 @@
>{{item.name}}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="退回意见" prop="comment" :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
<el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见"/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="returnOpen = false">取 消</el-button>
<el-button type="primary" @click="taskReturn">确 定</el-button>
<el-button type="primary" @click="submitReturn">确 定</el-button>
</span>
</el-dialog>
<!--驳回流程-->
<el-dialog :title="rejectTitle" :visible.sync="rejectOpen" width="40%" append-to-body>
<el-form ref="taskForm" :model="taskForm" label-width="80px" >
<el-form-item label="驳回意见" prop="comment" :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
<el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见"/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="rejectOpen = false">取 消</el-button>
<el-button type="primary" @click="taskReject">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { flowRecord } from '@/api/workflow/finished'
import { getDetailInstance } from '@/api/workflow/instance'
import Parser from '@/utils/generator/parser'
import { definitionStart, getFlowViewer, getProcessVariables, readXml } from '@/api/workflow/definition'
import { complete, delegate, getNextFlowNode, rejectTask, returnList, returnTask } from '@/api/workflow/todo'
@@ -198,7 +141,6 @@ export default {
data() {
return {
height: document.documentElement.clientHeight - 205 + 'px;',
activeTagName: 'basicInfo',
// 模型xml数据
loadIndex: 0,
xmlData: undefined,
@@ -215,7 +157,7 @@ export default {
deptOptions: undefined,
// 用户表格数据
userList: null,
defaultProps: {
deptProps: {
children: "children",
label: "label"
},
@@ -225,16 +167,14 @@ export default {
},
// 遮罩层
loading: true,
flowRecordList: [], // 流程流转数据
flowRecordList: [],
formConfCopy: {},
src: null,
rules: {}, // 表单校验
variablesForm: {}, // 流程变量数据
variablesForm: {},
taskForm:{
returnTaskShow: false, // 是否展示回退表单
delegateTaskShow: false, // 是否展示回退表单
defaultTaskShow: true, // 默认处理
sendUserShow: false, // 审批用户
returnTaskShow: false,
delegateTaskOpen: false,
defaultTaskShow: true,
sendUserShow: false,
multiple: false,
comment:"", // 意见内容
procInsId: "", // 流程实例编号
@@ -245,6 +185,9 @@ export default {
vars: "",
targetKey:""
},
rules: {
comment: [{ required: true, message: '请输入审批意见', trigger: 'blur' }],
},
userDataList:[], // 流程候选人
assignee: null,
formConf: {}, // 默认表单数据
@@ -254,12 +197,11 @@ export default {
variableOpen: false, // 是否加载流程变量数据
returnTaskList: [], // 回退列表数据
finished: 'false',
completeTitle: null,
completeOpen: false,
returnTitle: null,
returnOpen: false,
rejectOpen: false,
rejectTitle: null,
delegateOpen: false,
userData:[],
};
},
@@ -271,7 +213,7 @@ export default {
this.taskForm.instanceId = this.$route.query && this.$route.query.procInsId;
this.finished = this.$route.query && this.$route.query.finished
// 流程任务重获取变量表单
if (this.taskForm.taskId){
if (this.taskForm.taskId) {
this.processVariables( this.taskForm.taskId)
// this.getNextFlowNode(this.taskForm.taskId)
this.taskForm.deployId = null
@@ -283,7 +225,7 @@ export default {
},
methods: {
/** 查询部门下拉树结构 */
getTreeselect() {
getTreeSelect() {
treeselect().then(response => {
this.deptOptions = response.data;
});
@@ -377,7 +319,7 @@ export default {
/** 流程流转记录 */
getFlowRecordList(procInsId, deployId) {
const params = {procInsId: procInsId, deployId: deployId}
flowRecord(params).then(res => {
getDetailInstance(params).then(res => {
this.flowRecordList = res.data.flowList;
// 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
if (res.data.formData) {
@@ -433,31 +375,28 @@ export default {
}
})
},
/** 审批任务选择 */
/** 通过任务 */
handleComplete() {
this.completeOpen = true;
this.completeTitle = "审批流程";
this.getTreeselect();
},
/** 审批任务 */
taskComplete() {
// if (!this.taskForm.values){
// this.$modal.msgError("请选择流程接收人员");
// return;
// }
if (!this.taskForm.comment){
this.$modal.msgError("请输入审批意见");
return;
}
complete(this.taskForm).then(response => {
this.$modal.msgSuccess(response.msg);
this.goBack();
this.$refs['taskForm'].validate(valid => {
if (valid) {
complete(this.taskForm).then(response => {
this.$modal.msgSuccess(response.msg);
this.goBack();
});
}
});
},
/** 委派任务 */
handleDelegate() {
this.taskForm.delegateTaskShow = true;
this.taskForm.defaultTaskShow = false;
/** 驳回任务 */
handleReject() {
this.$refs["taskForm"].validate(valid => {
if (valid) {
rejectTask(this.taskForm).then(res => {
this.$modal.msgSuccess(res.msg);
this.goBack();
});
}
});
},
handleAssign(){
@@ -507,35 +446,27 @@ export default {
}
}
},
/** 驳回任务 */
handleReject() {
this.rejectOpen = true;
this.rejectTitle = "驳回流程";
},
/** 驳回任务 */
taskReject() {
this.$refs["taskForm"].validate(valid => {
if (valid) {
rejectTask(this.taskForm).then(res => {
this.$modal.msgSuccess(res.msg);
this.goBack();
});
}
});
},
/** 可退回任务列表 */
handleReturn() {
this.returnOpen = true;
this.returnTitle = "退回流程";
returnList(this.taskForm).then(res => {
this.returnTaskList = res.data;
this.taskForm.values = null;
})
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;
})
}
});
},
/** 提交退回任务 */
taskReturn() {
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()
@@ -563,7 +494,7 @@ export default {
},
/** 取消回退任务按钮 */
cancelDelegateTask() {
this.taskForm.delegateTaskShow = false;
this.taskForm.delegateTaskOpen = false;
this.taskForm.defaultTaskShow = true;
this.taskForm.sendUserShow = true;
this.returnTaskList = [];
@@ -595,4 +526,14 @@ export default {
.el-tag + .el-tag {
margin-left: 10px;
}
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
</style>

13
ruoyi-ui/src/views/workflow/work/own.vue
View File

@@ -47,7 +47,7 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="myProcessList" border @selection-change="handleSelectionChange">
<el-table v-loading="loading" :data="ownProcessList" border @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"/>
@@ -110,7 +110,7 @@
</template>
<script>
import { myProcessList, stopProcess, delProcess } from "@/api/workflow/process";
import { listOwnProcess, stopProcess, delProcess } from '@/api/workflow/process';
import { listCategory } from '@/api/workflow/category';
export default {
name: "Own",
@@ -134,7 +134,7 @@ export default {
categoryOptions: [],
processTotal:0,
// 我发起的流程列表数据
myProcessList: [],
ownProcessList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
@@ -172,8 +172,8 @@ export default {
/** 查询流程定义列表 */
getList() {
this.loading = true;
myProcessList(this.queryParams).then(response => {
this.myProcessList = response.rows;
listOwnProcess(this.queryParams).then(response => {
this.ownProcessList = response.rows;
this.total = response.total;
this.loading = false;
});
@@ -226,7 +226,8 @@ export default {
});
},
/** 流程流转记录 */
handleFlowRecord(row){
handleFlowRecord(row) {
console.log("row =========> ", row)
this.$router.push({ path: '/work/detail',
query: {
definitionId: row.procDefId,