add -- 新增流程审核可选择抄送流程功能

This commit is contained in:
konbai
2022-05-29 18:10:18 +08:00
parent ab1c50ca06
commit 64eb962366
13 changed files with 863 additions and 102 deletions

View File

@@ -1,7 +1,8 @@
<template>
<div class="app-container">
<el-tabs tab-position="top">
<el-tab-pane label="任务办理" v-if="finished === 'true'">
<el-tabs tab-position="top" :value="finished === 'true' ? 'approval' : 'form'">
<el-tab-pane label="任务办理" name="approval" v-if="finished === 'true'">
<el-card class="box-card" shadow="never">
<el-row>
<el-col :span="20" :offset="2">
@@ -9,6 +10,17 @@
<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 userData.copyUser"
closable
:disable-transitions="false"
@close="handleClose(item)">
{{ item.label }}
</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>
</el-row>
@@ -34,7 +46,8 @@
</el-row>
</el-card>
</el-tab-pane>
<el-tab-pane label="表单信息">
<el-tab-pane label="表单信息" name="form">
<el-card class="box-card" shadow="never">
<!--流程处理表单模块-->
<el-col :span="20" :offset="2" v-if="variableOpen">
@@ -52,9 +65,9 @@
</el-card>
</el-tab-pane >
<el-tab-pane label="流转记录">
<el-tab-pane label="流转记录" name="record">
<el-card class="box-card" shadow="never">
<el-col :span="18" :offset="3">
<el-col :span="20" :offset="2">
<div class="block">
<el-timeline>
<el-timeline-item v-for="(item,index) in flowRecordList" :key="index" :icon="setIcon(item.finishTime)" :color="setColor(item.finishTime)">
@@ -82,7 +95,7 @@
</el-card>
</el-tab-pane>
<el-tab-pane label="流程跟踪">
<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="null"
@@ -110,7 +123,7 @@
</span>
</el-dialog>
<el-dialog :title="userDialogTitle" :visible.sync="userOpen" width="60%" append-to-body>
<el-dialog :title="userData.title" :visible.sync="userData.open" width="60%" append-to-body>
<el-row type="flex" :gutter="20">
<!--部门数据-->
<el-col :span="5">
@@ -133,8 +146,16 @@
</el-card>
</el-col>
<el-col :span="18">
<el-table ref="userTable" height="500" :data="userList" highlight-current-row @current-change="changeCurrentUser">
<el-table-column width="30">
<el-table 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'" 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>
@@ -152,9 +173,8 @@
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="userOpen = false"> </el-button>
<el-button type="primary" v-if="userDialogTitle === '委派任务'" @click="submitDelegate"> </el-button>
<el-button type="primary" v-if="userDialogTitle === '转办任务'" @click="submitTransfer"> </el-button>
<el-button @click="userData.open = false"> </el-button>
<el-button type="primary" @click="submitUserData"> </el-button>
</span>
</el-dialog>
</div>
@@ -220,6 +240,7 @@ export default {
deptName: undefined,
// 部门树选项
deptOptions: undefined,
userLoading: false,
// 用户表格数据
userList: null,
deptProps: {
@@ -248,6 +269,7 @@ export default {
deployId: "", // 流程定义编号
taskId: "" ,// 流程任务编号
definitionId: "", // 流程编号
copyUserIds: "", // 抄送人Id
vars: "",
targetKey:""
},
@@ -268,9 +290,16 @@ export default {
returnOpen: false,
rejectOpen: false,
rejectTitle: null,
userData: {
title: '',
type: 'copy',
open: false,
currentUserId: null,
copyUser: [],
},
userMultipleSelection: [],
userDialogTitle: '',
userOpen: false,
userData:[],
userOpen: false
};
},
activated() {
@@ -300,11 +329,13 @@ export default {
},
/** 查询用户列表 */
getList() {
this.userLoading = true;
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.userList = response.rows;
this.total = response.total;
}
);
this.userList = response.rows;
this.total = response.total;
this.toggleSelection(this.userMultipleSelection);
this.userLoading = false;
});
},
// 筛选节点
filterNode(value, data) {
@@ -356,21 +387,25 @@ export default {
},
// 多选框选中数据
handleSelectionChange(selection) {
this.userData = selection
const val = selection.map(item => item.userId)[0];
if (val instanceof Array) {
this.taskForm.values = {
"approval": val.join(',')
}
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.taskForm.values = {
"approval": val
}
this.$refs.userTable.clearSelection();
}
},
// 关闭标签
handleClose(tag) {
this.userData.splice(this.userData.indexOf(tag), 1);
let userObj = this.userMultipleSelection.find(item => item.userId === tag.id);
this.userMultipleSelection.splice(this.userMultipleSelection.indexOf(userObj), 1);
this.userData.copyUser.splice(this.userData.copyUser.indexOf(tag), 1);
},
/** 流程变量赋值 */
handleCheckChange(val) {
@@ -389,7 +424,6 @@ export default {
const params = {procInsId: procInsId, deployId: deployId}
getDetailInstance(params).then(res => {
this.flowRecordList = res.data.flowList;
console.log("res flowList => ", this.flowRecordList)
// 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
if (res.data.formData) {
this.formConf = res.data.formData;
@@ -399,14 +433,6 @@ export default {
this.goBack();
})
},
fillFormData(form, data) {
form.fields.forEach(item => {
const val = data[item.__vModel__]
if (val) {
item.__config__.defaultValue = val
}
})
},
/** 获取流程变量内容 */
processVariables(taskId) {
if (taskId) {
@@ -417,50 +443,32 @@ export default {
});
}
},
/** 根据当前任务或者流程设计配置的下一步节点 */
getNextFlowNode(taskId) {
// 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
const params = {taskId: taskId}
getNextFlowNode(params).then(res => {
const data = res.data;
if (data) {
if (data.type === 'assignee') {
this.userDataList = res.data.userList;
} else if (data.type === 'candidateUsers') {
this.userDataList = res.data.userList;
this.taskForm.multiple = true;
} else if (data.type === 'candidateGroups') {
res.data.roleList.forEach(role => {
role.userId = role.roleId;
role.nickName = role.roleName;
})
this.userDataList = res.data.roleList;
this.taskForm.multiple = false;
} else if (data.type === 'multiInstance') {
this.userDataList = res.data.userList;
this.taskForm.multiple = true;
}
this.taskForm.sendUserShow = true;
}
})
onSelectUsers() {
this.userData.title = '添加抄送人';
this.userData.type = 'copy';
this.getTreeSelect();
this.getList()
this.userData.open = true;
this.$refs.userTable.clearSelection();
},
/** 通过任务 */
handleComplete() {
this.$refs['taskForm'].validate(valid => {
if (valid) {
complete(this.taskForm).then(response => {
this.$modal.msgSuccess(response.msg);
this.goBack();
});
}
if (valid) {
complete(this.taskForm).then(response => {
this.$modal.msgSuccess(response.msg);
this.goBack();
});
}
});
},
/** 委派任务 */
handleDelegate() {
this.$refs["taskForm"].validate(valid => {
if (valid) {
this.userDialogTitle = '委派任务'
this.userOpen = true;
this.userData.type = 'delegate';
this.userData.title = '委派任务'
this.userData.open = true;
this.getTreeSelect();
}
})
@@ -469,8 +477,9 @@ export default {
handleTransfer(){
this.$refs["taskForm"].validate(valid => {
if (valid) {
this.userDialogTitle = '转办任务'
this.userOpen = true;
this.userData.type = 'transfer';
this.userData.title = '转办任务';
this.userData.open = true;
this.getTreeSelect();
}
})
@@ -534,35 +543,48 @@ export default {
}
}
},
submitDelegate() {
if (!this.taskForm.comment) {
this.$modal.msgError("请输入审批意见");
return false;
submitUserData() {
let type = this.userData.type;
if (type === 'copy') {
if (!this.userMultipleSelection || this.userMultipleSelection.length <= 0) {
this.$modal.msgError("请选择用户");
return false;
}
this.userData.copyUser = this.userMultipleSelection.map(k => {
return { id: k.userId, label: k.nickName }
})
this.userData.open = false;
} else {
if (!this.taskForm.comment) {
this.$modal.msgError("请输入审批意见");
return false;
}
if (!this.currentUserId) {
this.$modal.msgError("请选择用户");
return false;
}
// 若有选择抄送用户获取抄送用户ID
if (this.userData.copyUser && this.userData.copyUser.length > 0) {
const val = this.userData.copyUser.map(item => item.id);
this.taskForm.copyUserIds = val instanceof Array ? val.join(',') : val;
} else {
this.taskForm.copyUserIds = '';
}
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();
});
}
}
if (!this.currentUserId) {
this.$modal.msgError("请选择委派用户");
return false;
}
this.taskForm.userId = this.currentUserId;
delegate(this.taskForm).then(res => {
this.$modal.msgSuccess(res.msg);
this.goBack();
});
},
submitTransfer() {
if (!this.taskForm.comment) {
this.$modal.msgError("请输入审批意见");
return false;
}
if (!this.currentUserId) {
this.$modal.msgError("请选择受理用户");
return false;
}
this.taskForm.userId = this.currentUserId;
transfer(this.taskForm).then(res => {
this.$modal.msgSuccess(res.msg);
this.goBack();
});
},
/** 可退回任务列表 */
handleReturn() {
@@ -629,4 +651,8 @@ export default {
.el-col {
border-radius: 4px;
}
.button-new-tag {
margin-left: 10px;
}
</style>