<template>
|
<div class="app-container">
|
<el-card class="box-card" >
|
<div slot="header" class="clearfix" style="display: flex">
|
<div style="flex: 1" class="el-icon-document">{{`任务办理：` + processName}}</div>
|
<div style="flex: 2">{{projectName + '——' + flowName}}</div>
|
<el-button style="float: right;" size="mini" type="danger" @click="goBack">关闭</el-button>
|
</div>
|
<el-tabs tab-position="top" v-model="activeName" @tab-click="handleClick">
|
<!--表单信息-->
|
<el-tab-pane label="表单信息" name="1">
|
<!--初始化流程加载表单信息-->
|
<el-col :span="16" :offset="4" v-if="formDataList && formDataList.length > 0">
|
<div v-for="(formDataObj, index) in formDataList" :key="index" class="form-warp" style="position: relative">
|
<!-- 前置节点可驳回 -->
|
<div v-if="!formDataObj.current" style="position: absolute; top: 4px; right: 4px">
|
<el-button type="danger" size="small" @click="openRejectTask(formDataObj.beforeNodeDefId)">驳 回</el-button>
|
</div>
|
<!-- 当前节点可协同、转办等操作 -->
|
<div v-else style="position: absolute; top: 4px; right: 4px; display: flex;justify-content: center; align-items: center;">
|
<el-button size="small" type="primary" @click="submitForm">确认并提交</el-button>
|
<el-button size="small" type="primary" disabled @click="submitForm">协同办理(功能开发中)</el-button>
|
<el-button size="small" type="primary" @click="openDelegation(formDataList[0].beforeNodeName)">转办</el-button>
|
</div>
|
<div v-if="formDataObj.current" style="margin-bottom: 15px;color: #E6A23C">当前阶段：<span style="color: #409EFF">{{formDataObj.beforeNodeName}}</span></div>
|
<div v-else style="margin-bottom: 15px;color: #E6A23C">前置阶段：<span style="color: #F56C6C">{{formDataObj.beforeNodeName}}</span></div>
|
<v-form-render :form-data="formDataObj.formJson" :ref="'form' + index"/>
|
</div>
|
</el-col>
|
</el-tab-pane>
|
<!--流程图-->
|
<el-tab-pane label="流程图" name="2">
|
<bpmn-viewer :flowData="flowData"/>
|
</el-tab-pane>
|
</el-tabs>
|
<!--选择流程接收人-->
|
<el-dialog :title="taskTitle" :visible.sync="taskOpen" width="65%" append-to-body>
|
<flow-user v-if="checkSendUser" :checkType="checkType" @handleUserSelect="handleUserSelect"/>
|
<flow-role v-if="checkSendRole" @handleRoleSelect="handleRoleSelect"/>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="taskOpen = false">取 消</el-button>
|
<el-button type="primary" @click="submitTask">提 交</el-button>
|
</span>
|
</el-dialog>
|
</el-card>
|
|
|
<el-dialog
|
:title="`驳回：` + rejectForm.projectName"
|
:visible.sync="rejectShow"
|
width="950px"
|
:destroy-on-close="true"
|
:close-on-click-modal="false"
|
>
|
<div>
|
<el-input
|
type="textarea"
|
:rows="3"
|
placeholder="审核建议"
|
v-model="rejectForm.comment">
|
</el-input>
|
</div>
|
<div class="opBut">
|
<el-button type="danger" size="small" @click="rejectTask">驳回</el-button>
|
</div>
|
</el-dialog>
|
|
<el-dialog
|
:title="`转办：` + delegationForm.taskName"
|
:visible.sync="delegationShow"
|
width="950px"
|
:destroy-on-close="true"
|
:close-on-click-modal="false"
|
>
|
<div>
|
<el-form :model="delegationForm" :rules="delegationFormRules" ref="delegationForm" label-width="100px" class="demo-ruleForm">
|
<el-alert
|
title="请选择要转办的用户对象，用户类型不同处理人不同"
|
type="info"
|
:closable="false"
|
style="margin-bottom: 8px"
|
show-icon>
|
</el-alert>
|
<el-form-item label="用户类型" prop="peopleType">
|
<el-select v-model="delegationForm.peopleType" @change="peopleTypeChange" placeholder="请选择用户类型">
|
<el-option label="指定人员" value="FIX_USER"></el-option>
|
<el-option label="候选人员" value="USER"></el-option>
|
<el-option label="候选部门" value="DEPT"></el-option>
|
<el-option label="候选角色" value="ROLE"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="delegationForm.peopleType === 'DEPT'" label="候选部门" prop="targetId">
|
<MyDept ref="dept" :checkeds="delegationDeptSelect" :show="deptShow" @close="closeDept" @submit="getDeptSelect"/>
|
<div style="display: flex;align-items: center">
|
<div>
|
<el-tag v-for="dept in delegationDeptSelect" :key="dept.id + 'zxc'" type="info" closable @close="removeDept(dept)">{{dept.label}}</el-tag>
|
</div>
|
<el-button style="margin-left: 8px" type="text" @click="editDept">选择</el-button>
|
</div>
|
</el-form-item>
|
<el-form-item v-if="delegationForm.peopleType === 'FIX_USER'" label="指定人员" prop="targetId">
|
<single-user ref="singleUser" :select-user="delegationForm.targetId" :show="singleUserShow" @close="closeSingleUser" @submit="getSingleUserSelect"/>
|
<div style="display: flex;align-items: center">
|
<div>
|
<el-tag v-for="user in delegationUserSelect" :key="user.userId + 'abc'" type="info" closable @close="removeSingleUser(user)">{{user.nickName}}</el-tag>
|
</div>
|
<el-button style="margin-left: 8px" type="text" @click="editSingleUser">选择</el-button>
|
</div>
|
</el-form-item>
|
<el-form-item v-if="delegationForm.peopleType === 'USER'" label="候选人员" prop="targetId">
|
<mult-user ref="multUser" :select-user="delegationUserSelect" :show="multUserShow" @close="closeMultUser" @submit="getMultUserSelect"/>
|
<div style="display: flex;align-items: center">
|
<div>
|
<el-tag v-for="user in delegationUserSelect" :key="user.userId + 'qwe'" type="info" closable @close="removeMultUser(user)">{{user.nickName}}</el-tag>
|
</div>
|
<el-button style="margin-left: 8px" type="text" @click="editMultUser">选择</el-button>
|
</div>
|
</el-form-item>
|
<el-form-item v-if="delegationForm.peopleType === 'ROLE'" label="候选角色" prop="targetId">
|
<my-role ref="role" :select-values="delegationRoleSelect" :show="roleShow" @close="closeRole" @submit="getRoleSelect"/>
|
<div style="display: flex;align-items: center">
|
<div>
|
<el-tag v-for="role in delegationRoleSelect" :key="role.roleId + 'rty'" type="info" closable @close="removeRole(role)">{{role.roleName}}</el-tag>
|
</div>
|
<el-button style="margin-left: 8px" type="text" @click="editRole">选择</el-button>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="opBut">
|
<el-button type="danger" size="small" @click="delegation">转 办</el-button>
|
</div>
|
</el-dialog>
|
|
</div>
|
</template>
|
|
<script>
|
import {definitionStart, flowXmlAndNode} from "@/api/flowable/definition";
|
import BpmnViewer from '@/components/Process/viewer';
|
import MyDept from '@/components/flow/Dept/MyDept'
|
import SingleUser from '@/components/flow/User/SingleUser'
|
import MultUser from '@/components/flow/User/MultUser'
|
import MyRole from '@/components/flow/Role/MyRole'
|
import {completeSubmitFormTask} from "@/api/flowable/process";
|
import { flowTaskForm } from "@/api/flowable/todo";
|
import {getNextFlowNodeByStart} from "@/api/flowable/todo";
|
import {rejectTask} from "@/api/flowable/process";
|
import {taskDelegation} from "@/api/projectProcess/projectProcess";
|
|
export default {
|
name: "Record",
|
components: {
|
BpmnViewer,
|
MyRole,
|
MyDept,
|
SingleUser,
|
MultUser,
|
},
|
props: {},
|
data() {
|
return {
|
projectName: '',
|
flowName: '',
|
roleShow: false, // 角色组显示
|
delegationRoleSelect: [], // 选中角色
|
multUserShow: false, // 用户组显示
|
singleUserShow: false, // 指定用户显示
|
delegationUserSelect: [], // 选中的用户
|
deptShow: false, // 部门组显示
|
delegationDeptSelect: [], // 选中部门
|
delegationFormRules: {
|
peopleType: [
|
{ required: true, message: '请选择用户类型', trigger: 'change' }
|
],
|
targetId: [
|
{ required: true, message: '请选择转办对象', trigger: 'blur' }
|
],
|
},
|
delegationForm: { // 转办表单
|
taskId: '',
|
peopleType: '',
|
targetId: '',
|
taskName: ''
|
},
|
delegationShow: false, // 转办显示
|
rejectShow: false, // 驳回显示
|
goBackParams: {},
|
formDataList: [], // 表单列表
|
taskId: '',
|
processName: '',
|
// 模型xml数据
|
flowData: {},
|
activeName: '1', // 切换tab标签
|
// 查询参数
|
queryParams: {
|
deptId: undefined
|
},
|
// 遮罩层
|
loading: true,
|
deployId: "", // 流程定义编号
|
procDefId: "", // 流程实例编号
|
formRenderData: {},
|
formRenderDataList: [],
|
variables: [], // 流程变量数据
|
taskTitle: null,
|
taskOpen: false,
|
checkSendUser: false, // 是否展示人员选择模块
|
checkSendRole: false,// 是否展示角色选择模块
|
checkType: '', // 选择类型
|
checkValues: null, // 选中任务接收人员数据
|
formData: {}, // 填写的表单数据,
|
multiInstanceVars: '', // 会签节点
|
formJson: {}, // 表单json
|
rejectForm: {
|
comment: '', // 审核意见
|
taskId: '',
|
// rejectedTaskDefKey: '' // 被驳回的任务key
|
}
|
};
|
},
|
mounted() {
|
this.processName = this.$route.query && this.$route.query.processName;
|
this.deployId = this.$route.query && this.$route.query.deployId;
|
this.taskId = this.$route.query && this.$route.query.taskId;
|
this.projectName = this.$route.query && this.$route.query.projectName;
|
this.flowName = this.$route.query && this.$route.query.flowName;
|
// 初始化表单
|
this.procDefId = this.$route.query && this.$route.query.procDefId;
|
this.goBackParams = this.$route.query && this.$route.query.goBackParams;
|
// this.getNextFlowNodeByStart(this.deployId);
|
this.getFlowFormData(this.taskId);
|
},
|
methods: {
|
removeDept(dept) {
|
let index = this.delegationDeptSelect.indexOf(dept);
|
if (index !== -1) {
|
this.delegationDeptSelect.splice(index, 1);
|
}
|
this.delegationForm.targetId = this.delegationDeptSelect.map(item => item.id).join(",")
|
},
|
removeRole(role) {
|
let index = this.delegationRoleSelect.indexOf(role);
|
if (index !== -1) {
|
this.delegationRoleSelect.splice(index, 1);
|
}
|
this.delegationForm.targetId = this.delegationRoleSelect.map(item => item.roleId).join(",")
|
},
|
removeMultUser(user) {
|
let index = this.delegationUserSelect.indexOf(user);
|
if (index !== -1) {
|
this.delegationUserSelect.splice(index, 1);
|
}
|
this.delegationForm.targetId = this.delegationUserSelect.map(item => item.userId).join(",")
|
},
|
removeSingleUser(user) {
|
// 因为只能选一个用户，所以删了就没了
|
this.delegationUserSelect = []
|
this.delegationForm.targetId = ''
|
},
|
getTips() {
|
if (this.delegationForm.peopleType === 'USER' || this.delegationForm.peopleType === 'FIX_USER') {
|
return this.delegationUserSelect.map(item => item.nickName).join("、")
|
} else if (this.delegationForm.peopleType === 'DEPT') {
|
return this.delegationDeptSelect.map(item => item.label).join("、")
|
} else if (this.delegationForm.peopleType === 'ROLE') {
|
return this.delegationRoleSelect.map(item => item.roleName).join("、")
|
}
|
},
|
delegation() {
|
this.$refs['delegationForm'].validate((valid) => {
|
if (valid) {
|
this.$confirm(`确定要将此任务交由【${this.getTips()}】处理吗?`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
taskDelegation(this.delegationForm).then(res => {
|
this.$message.success("已发起转办申请")
|
this.goBack()
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消转办操作'
|
});
|
});
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
peopleTypeChange(val) {
|
if (val === 'DEPT') {
|
this.$nextTick(() => {
|
this.$refs.dept.setCheckList(this.delegationDeptSelect)
|
})
|
this.deptShow = true
|
} else if (val === 'FIX_USER') {
|
this.singleUserShow = true
|
} else if (val === 'USER') {
|
this.multUserShow = true
|
} else if (val === 'ROLE') {
|
this.roleShow = true
|
}
|
},
|
editDept() {
|
this.$nextTick(() => {
|
this.$refs.dept.setCheckList(this.delegationDeptSelect)
|
})
|
this.deptShow = true
|
},
|
editSingleUser() {
|
if (this.delegationUserSelect && this.delegationUserSelect.length > 0) {
|
this.$nextTick(() => {
|
this.$refs.singleUser.setChecked(this.delegationUserSelect[0])
|
})
|
}
|
this.singleUserShow = true
|
},
|
editRole() {
|
if (this.delegationRoleSelect && this.delegationRoleSelect.length > 0) {
|
this.$nextTick(() => {
|
this.$refs.role.setChecked(this.delegationRoleSelect)
|
})
|
}
|
this.roleShow = true
|
},
|
editMultUser() {
|
if (this.delegationForm.targetId) {
|
this.$nextTick(() => {
|
this.$refs.multUser.setChecked(this.delegationUserSelect)
|
})
|
}
|
this.multUserShow = true
|
},
|
getDeptSelect(deptList) {
|
if (deptList && deptList.length > 0) {
|
this.delegationForm.targetId = deptList.map(item => item.id).join(",")
|
this.delegationDeptSelect = deptList
|
} else {
|
this.delegationDeptSelect = []
|
}
|
this.deptShow = false
|
},
|
getMultUserSelect(userList) {
|
if (userList && userList.length > 0) {
|
this.delegationForm.targetId = userList.map(item => item.userId).join(",")
|
this.delegationUserSelect = userList
|
} else {
|
this.delegationForm.targetId = ''
|
this.delegationUserSelect = []
|
}
|
this.multUserShow = false
|
},
|
getRoleSelect(roleList) {
|
if (roleList && roleList.length > 0) {
|
this.delegationForm.targetId = roleList.map(item => item.roleId).join(",")
|
this.delegationRoleSelect = roleList
|
} else {
|
this.delegationForm.targetId = ''
|
this.delegationRoleSelect = []
|
}
|
this.roleShow = false
|
},
|
getSingleUserSelect(user) {
|
if (user) {
|
this.delegationForm.targetId = user.userId
|
this.delegationUserSelect = [user]
|
} else {
|
this.delegationForm.targetId = ''
|
this.delegationUserSelect = []
|
}
|
this.singleUserShow = false
|
},
|
closeDept() {
|
this.deptShow = false
|
},
|
closeSingleUser() {
|
this.singleUserShow = false
|
},
|
closeRole() {
|
this.roleShow = false
|
},
|
closeMultUser() {
|
this.multUserShow = false
|
},
|
openDelegation(taskName) {
|
this.delegationForm.taskName = taskName
|
this.delegationForm.taskId = this.taskId
|
this.delegationShow = true
|
},
|
rejectTask() {
|
rejectTask(this.rejectForm).then(res => {
|
this.rejectShow = false
|
this.$message.success("驳回成功")
|
})
|
},
|
openRejectTask(rejectedTaskDefKey) {
|
// this.rejectForm.rejectedTaskDefKey = rejectedTaskDefKey;
|
this.rejectForm.taskId = this.taskId;
|
this.rejectShow = true
|
},
|
handleClick(tab, event) {
|
if (tab.name === '2'){
|
flowXmlAndNode({deployId:this.deployId}).then(res => {
|
this.flowData = res.data;
|
})
|
}
|
},
|
/** 流程表单数据 */
|
getFlowFormData(taskId) {
|
const params = {taskId: taskId}
|
flowTaskForm(params).then(res => {
|
this.formDataList = res.data
|
if (this.formDataList && this.formDataList.length > 0) {
|
this.$nextTick(() => {
|
this.formDataList.forEach((formDataObj, index) => {
|
console.log("表单数据列表", formDataObj.formJson)
|
let that = this
|
console.log(eval("that.$refs.form" +index)[0])
|
eval("that.$refs.form" +index)[0].setFormJson(formDataObj.formJsonObj.formJson);
|
|
eval("that.$refs.form" +index)[0].setFormData(formDataObj.formJsonObj);
|
})
|
this.formJson = this.formDataList[0].formJsonObj.formJson
|
})
|
|
}
|
// if (res.data.formJson) {
|
// // 回显表单
|
// this.$refs.vFormRef.setFormJson(res.data.formJson);
|
// this.formJson = res.data.formJson;
|
// this.$nextTick(() => {
|
// // 加载表单填写的数据
|
// this.$refs.vFormRef.setFormData(res.data);
|
// // this.$nextTick(() => {
|
// // // 表单禁用
|
// // this.$refs.vFormRef.disableForm();
|
// // })
|
// })
|
// } else {
|
// this.$nextTick(() => {
|
// // 回显数据
|
// this.$refs.vFormRef.setFormJson(res.data);
|
// this.formJson = res.data;
|
// })
|
// }
|
}).catch(res => {
|
this.goBack();
|
})
|
},
|
/** 返回页面 */
|
goBack() {
|
// 关闭当前标签页
|
this.$store.dispatch("tagsView/delView", this.$route);
|
// 跳转路由
|
this.$router.push({
|
path: '/projectFlow/detail',
|
query: {
|
projectId: this.goBackParams.projectId,
|
processDefId: this.goBackParams.processDefId,
|
processName: this.goBackParams.processName
|
}
|
})
|
},
|
/** 申请流程表单数据提交 */
|
submitForm() {
|
let that = this
|
eval("that.$refs.form" +0)[0].getFormData().then(formData => {
|
// 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
|
getNextFlowNodeByStart({deploymentId: this.deployId, variables: formData}).then(res => {
|
const data = res.data;
|
if (data) {
|
this.formData = formData;
|
if (data.dataType === 'dynamic') {
|
if (data.type === 'assignee') { // 指定人员
|
this.checkSendUser = true;
|
this.checkType = "single";
|
} else if (data.type === 'candidateUsers') { // 候选人员(多个)
|
this.checkSendUser = true;
|
this.checkType = "multiple";
|
} else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
|
this.checkSendRole = true;
|
} else { // 会签
|
// 流程设计指定的 elementVariable 作为会签人员列表
|
this.multiInstanceVars = data.vars;
|
this.checkSendUser = true;
|
this.checkType = "multiple";
|
}
|
this.taskOpen = true;
|
this.taskTitle = "选择任务接收";
|
} else {
|
if (this.procDefId) {
|
const param = {
|
formJson: this.formJson,
|
}
|
// 复制对象的属性值给新的对象
|
Object.assign(param, formData);
|
// 完成任务
|
completeSubmitFormTask(this.taskId, param).then(res => {
|
this.$modal.msgSuccess(res.msg);
|
this.goBack();
|
})
|
// // 启动流程并将表单数据加入流程变量
|
// definitionStart(this.procDefId, param).then(res => {
|
// this.$modal.msgSuccess(res.msg);
|
// this.goBack();
|
// })
|
}
|
}
|
}
|
})
|
}).catch(error => {
|
// this.$modal.msgError(error)
|
})
|
},
|
/** 重置表单 */
|
resetForm() {
|
this.$refs.vFormRef.resetForm();
|
},
|
/** 提交流程 */
|
submitTask() {
|
if (!this.checkValues && this.checkSendUser){
|
this.$modal.msgError("请选择任务接收!");
|
return;
|
}
|
if (!this.checkValues && this.checkSendRole){
|
this.$modal.msgError("请选择流程接收角色组!");
|
return;
|
}
|
if (this.formData) {
|
const param = {
|
formJson: this.formJson,
|
}
|
// 复制对象的属性值给新的对象
|
Object.assign(param, this.formData);
|
if (this.multiInstanceVars) {
|
this.$set(param, this.multiInstanceVars, this.checkValues);
|
} else {
|
this.$set(param, "approval", this.checkValues);
|
}
|
// 完成任务
|
completeSubmitFormTask(this.taskId, param).then(res => {
|
this.$modal.msgSuccess(res.msg);
|
this.goBack();
|
})
|
// // 启动流程并将表单数据加入流程变量
|
// definitionStart(this.procDefId, param).then(res => {
|
// this.$modal.msgSuccess(res.msg);
|
// this.goBack();
|
// })
|
}
|
},
|
// 用户信息选中数据
|
handleUserSelect(selection) {
|
if (selection) {
|
if (selection instanceof Array) {
|
const selectVal = selection.map(item => item.userId);
|
if (this.multiInstanceVars) {
|
this.checkValues = selectVal;
|
} else {
|
this.checkValues = selectVal.join(',');
|
}
|
} else {
|
this.checkValues = selection.userId;
|
}
|
}
|
},
|
// 角色信息选中数据
|
handleRoleSelect(selection) {
|
if (selection) {
|
if (selection instanceof Array) {
|
const selectVal = selection.map(item => item.roleId);
|
this.checkValues = selectVal.join(',')
|
} else {
|
this.checkValues = selection;
|
}
|
}
|
},
|
}
|
};
|
</script>
|
<style lang="scss" scoped>
|
.opBut {
|
display: flex;justify-content: center;align-items: center;width: 100%; margin-top: 8px
|
}
|
.test-form {
|
margin: 15px auto;
|
width: 800px;
|
padding: 15px;
|
}
|
|
.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;
|
}
|
|
.my-label {
|
background: #E1F3D8;
|
}
|
|
.form-warp {
|
min-width: 700px;
|
padding: 20px;
|
margin-top: 5px;
|
margin-bottom: 20px;
|
box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
|
}
|
</style>
|
