huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-23 07:41:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat:【工作流】添加vue2版本的退回和委派前端代码

Browse Source
This commit is contained in:
liuxiaolu 2023-10-11 16:08:39 +08:00
parent 6388950ab2
commit 9a876cff3d
3 changed files with 230 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
yudao-ui-admin/src/api/bpm/task.js
View File

@ -61,3 +61,25 @@ export function getTaskListByProcessInstanceId(processInstanceId) {
method: 'get',
})
}
export function getReturnList(taskId) {
return request({
url: '/bpm/task/get-return-list?taskId='+ taskId,
method: 'get',
})
}
export function returnTask(data) {
return request({
url: '/bpm/task/return',
method: 'PUT',
data: data
})
}
export function delegateTask(data) {
return request({
url: '/bpm/task/delegate',
method: 'PUT',
data: data
})
}

30
yudao-ui-admin/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
View File

@ -233,6 +233,10 @@ export default {
return 'highlight-reject';
} else if (result === 4) { // 已取消
return 'highlight-cancel';
} else if (result === 5) { // 已退回
return 'highlight-back';
} else if (result === 6) { // 已委派
return 'highlight-todo';
}
return '';
},
@ -475,7 +479,33 @@ export default {
:deep(.highlight-cancel.djs-connection > .djs-visual > path) {
stroke: grey !important;
}
/**驳回 */
.highlight-back.djs-connection > .djs-visual > path {
stroke: #FFBA00 !important;
stroke-dasharray: 4px !important;
fill-opacity: 0.2 !important;
}
.highlight-back.djs-shape .djs-visual > :nth-child(1) {
fill: #FFBA00 !important;
stroke: #FFBA00 !important;
stroke-dasharray: 4px !important;
fill-opacity: 0.2 !important;
}
:deep(.highlight-back.djs-connection > .djs-visual > path) {
stroke: #FFBA00 !important;
stroke-dasharray: 4px !important;
fill-opacity: 0.2 !important;
marker-end: url(#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr);
}
:deep(.highlight-back.djs-shape .djs-visual > :nth-child(1)) {
fill: #FFBA00 !important;
stroke: #FFBA00 !important;
stroke-dasharray: 4px !important;
fill-opacity: 0.2 !important;
}
.element-overlays {
box-sizing: border-box;
padding: 8px;

220
yudao-ui-admin/src/views/bpm/processInstance/detail.vue
View File

@ -5,7 +5,7 @@
<div slot="header" class="clearfix">
<span class="el-icon-picture-outline">审批任务【{{ item.name }}】</span>
</div>
<el-col :span="16" :offset="6" >
<el-col :span="16" :offset="6">
<el-form :ref="'form' + index" :model="auditForms[index]" :rules="auditRule" label-width="100px">
<el-form-item label="流程名" v-if="processInstance && processInstance.name">
{{ processInstance.name }}
@ -15,15 +15,20 @@
<el-tag type="info" size="mini">{{ processInstance.startUser.deptName }}</el-tag>
</el-form-item>
<el-form-item label="审批建议" prop="reason">
<el-input type="textarea" v-model="auditForms[index].reason" placeholder="请输入审批建议" />
<el-input type="textarea" v-model="auditForms[index].reason" placeholder="请输入审批建议"/>
</el-form-item>
</el-form>
<div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px;">
<el-button icon="el-icon-edit-outline" type="success" size="mini" @click="handleAudit(item, true)">通过</el-button>
<el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleAudit(item, false)">不通过</el-button>
<el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleUpdateAssignee(item)">转办</el-button>
<el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate(item)">委派</el-button>
<el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleBack(item)">退回</el-button>
<el-button icon="el-icon-edit-outline" type="success" size="mini" @click="handleAudit(item, true)">通过
</el-button>
<el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleAudit(item, false)">不通过
</el-button>
<el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleUpdateAssignee(item)">转办
</el-button>
<el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate(item)">委派
</el-button>
<el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleBackList(item)">退回
</el-button>
</div>
</el-col>
</el-card>
@ -34,8 +39,8 @@
</div>
<el-col v-if="this.processInstance.processDefinition && this.processInstance.processDefinition.formType === 10"
:span="16" :offset="6">
<div >
<parser :key="new Date().getTime()" :form-conf="detailForm" />
<div>
<parser :key="new Date().getTime()" :form-conf="detailForm"/>
</div>
</el-col>
<div v-if="this.processInstance.processDefinition && this.processInstance.processDefinition.formType === 20">
@ -48,7 +53,7 @@
<div slot="header" class="clearfix">
<span class="el-icon-picture-outline">审批记录</span>
</div>
<el-col :span="16" :offset="4" >
<el-col :span="16" :offset="4">
<div class="block">
<el-timeline>
<el-timeline-item v-for="(item, index) in tasks" :key="index"
@ -62,9 +67,12 @@
<label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
<label style="color:#8a909c; font-weight: normal">{{ parseTime(item.createTime) }}</label>
<label v-if="item.endTime" style="margin-left: 30px;font-weight: normal">审批时间：</label>
<label v-if="item.endTime" style="color:#8a909c;font-weight: normal"> {{ parseTime(item.endTime) }}</label>
<label v-if="item.endTime" style="color:#8a909c;font-weight: normal"> {{
parseTime(item.endTime)
}}</label>
<label v-if="item.durationInMillis" style="margin-left: 30px;font-weight: normal">耗时：</label>
<label v-if="item.durationInMillis" style="color:#8a909c;font-weight: normal"> {{ getDateStar(item.durationInMillis) }} </label>
<label v-if="item.durationInMillis" style="color:#8a909c;font-weight: normal">
{{ getDateStar(item.durationInMillis) }} </label>
<p v-if="item.reason">
<el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
</p>
@ -81,15 +89,16 @@
<span class="el-icon-picture-outline">流程图</span>
</div>
<my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" :activityData="activityList"
:processInstanceData="processInstance" :taskData="tasks" />
:processInstanceData="processInstance" :taskData="tasks"/>
</el-card>
<!-- 对话框(转派审批人) -->
<el-dialog title="转派审批人" :visible.sync="updateAssignee.open" width="500px" append-to-body>
<!-- 对话框(转办审批人) -->
<el-dialog title="转办审批人" :visible.sync="updateAssignee.open" width="500px" append-to-body>
<el-form ref="updateAssigneeForm" :model="updateAssignee.form" :rules="updateAssignee.rules" label-width="110px">
<el-form-item label="新审批人" prop="assigneeUserId">
<el-select v-model="updateAssignee.form.assigneeUserId" clearable style="width: 100%">
<el-option v-for="item in userOptions" :key="parseInt(item.id)" :label="item.nickname" :value="parseInt(item.id)" />
<el-option v-for="item in userOptions" :key="parseInt(item.id)" :label="item.nickname"
:value="parseInt(item.id)"/>
</el-select>
</el-form-item>
</el-form>
@ -98,17 +107,64 @@
<el-button @click="cancelUpdateAssigneeForm">取 消</el-button>
</div>
</el-dialog>
<!-- 对话框(委派审批人) -->
<el-dialog title="委派审批人" :visible.sync="updateDelegate.open" width="500px" append-to-body>
<el-form ref="updateDelegateForm" :model="updateDelegate.form" :rules="updateDelegate.rules" label-width="110px">
<el-form-item label="新审批人" prop="assigneeUserId">
<el-select v-model="updateDelegate.form.delegateUserId" clearable style="width: 100%">
<el-option v-for="item in userOptions" :key="parseInt(item.id)" :label="item.nickname"
:value="parseInt(item.id)"/>
</el-select>
</el-form-item>
<el-form-item label="委派理由" prop="reason">
<el-input v-model="updateDelegate.form.reason" clearable placeholder="请输入委派理由"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitUpdateDelegateForm">确 定</el-button>
<el-button @click="cancelUpdateDelegateForm">取 消</el-button>
</div>
</el-dialog>
<!--退回流程-->
<el-dialog title="退回流程" :visible.sync="returnOpen" width="40%" append-to-body>
<el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="110px">
<el-form-item label="退回节点" prop="targetDefinitionKey">
<el-select v-model="formData.targetDefinitionKey" clearable style="width: 100%">
<el-option
v-for="item in returnList"
:key="item.definitionKey"
:label="item.name"
:value="item.definitionKey"
/>
</el-select>
</el-form-item>
<el-form-item label="回退理由" prop="reason">
<el-input v-model="formData.reason" clearable placeholder="请输入回退理由"/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="returnOpen = false">取 消</el-button>
<el-button :disabled="formLoading" type="primary" @click="submitReturn">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {getProcessDefinitionBpmnXML} from "@/api/bpm/definition";
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
import store from "@/store";
import {decodeFields} from "@/utils/formGenerator";
import Parser from '@/components/parser/Parser'
import {getProcessInstance} from "@/api/bpm/processInstance";
import {approveTask, getTaskListByProcessInstanceId, rejectTask, updateTaskAssignee} from "@/api/bpm/task";
import {
approveTask,
delegateTask,
getReturnList,
getTaskListByProcessInstanceId,
rejectTask,
returnTask,
updateTaskAssignee,
} from "@/api/bpm/task";
import {getDate} from "@/utils/dateUtils";
import {listSimpleUsers} from "@/api/system/user";
import {getActivityList} from "@/api/bpm/activity";
@ -127,12 +183,23 @@ export default {
// 流程实例
id: undefined, // 流程实例的编号
processInstance: {},
formLoading: false,
// 流程表单详情
detailForm: {
fields: []
},
//回退列表数据
returnList: [],
formData: {
id: '',
targetDefinitionKey: undefined,
reason: ''
},
formRules: {
targetDefinitionKey: [{required: true, message: '必须选择回退节点', trigger: 'change'}],
reason: [{required: true, message: '回退理由不能为空', trigger: 'blur'}]
},
returnOpen: false,
// BPMN 数据
bpmnXML: null,
bpmnControlForm: {
@ -148,9 +215,8 @@ export default {
runningTasks: [],
auditForms: [],
auditRule: {
reason: [{ required: true, message: "审批建议不能为空", trigger: "blur" }],
reason: [{required: true, message: "审批建议不能为空", trigger: "blur"}],
},
// 转派审批人
userOptions: [],
updateAssignee: {
@ -159,7 +225,18 @@ export default {
assigneeUserId: undefined,
},
rules: {
assigneeUserId: [{ required: true, message: "新审批人不能为空", trigger: "change" }],
assigneeUserId: [{required: true, message: "新审批人不能为空", trigger: "change"}],
}
},
updateDelegate: {
open: false,
form: {
delegateUserId: undefined,
reason: ''
},
rules: {
delegateUserId: [{required: true, message: "新审批人不能为空", trigger: "change"}],
reason: [{required: true, message: '委派理由不能为空', trigger: 'blur'}]
}
}
};
@ -193,7 +270,7 @@ export default {
//将业务表单，注册为动态组件
const path = this.processInstance.processDefinition.formCustomViewPath;
Vue.component("async-biz-form-component", function(resolve) {
Vue.component("async-biz-form-component", function (resolve) {
require([`@/views${path}`], resolve);
});
@ -260,7 +337,7 @@ export default {
// 需要审核的记录
const userId = store.getters.userId;
this.tasks.forEach(task => {
if (task.result !== 1) { // 只有待处理才需要
if (task.result !== 1 && task.result !== 6) { // 只有待处理才需要
return;
}
if (!task.assigneeUser || task.assigneeUser.id !== userId) { // 自己不是处理人
@ -292,6 +369,9 @@ export default {
if (item.result === 4) {
return 'el-icon-remove-outline';
}
if (item.result === 5) {
return 'el-icon-back'
}
return '';
},
getTimelineItemType(item) {
@ -307,6 +387,12 @@ export default {
if (item.result === 4) {
return 'info';
}
if (item.result === 5) {
return 'warning';
}
if (item.result === 6) {
return 'default'
}
return '';
},
/** 处理审批通过和不通过的操作 */
@ -333,7 +419,7 @@ export default {
}
});
},
/** 处理转派审批人 */
/** 处理转办审批人 */
handleUpdateAssignee(task) {
// 设置表单
this.resetUpdateAssigneeForm();
@ -341,25 +427,25 @@ export default {
// 设置为打开
this.updateAssignee.open = true;
},
/** 提交转派审批人 */
/** 提交转办审批人 */
submitUpdateAssigneeForm() {
this.$refs['updateAssigneeForm'].validate(valid => {
if (!valid) {
return;
}
updateTaskAssignee(this.updateAssignee.form).then(response => {
this.$modal.msgSuccess("转派任务成功！");
this.$modal.msgSuccess("转办任务成功！");
this.updateAssignee.open = false;
this.getDetail(); // 获得最新详情
});
});
},
/** 取消转派审批人 */
/** 取消转办审批人 */
cancelUpdateAssigneeForm() {
this.updateAssignee.open = false;
this.resetUpdateAssigneeForm();
},
/** 重置转派审批人 */
/** 重置转办审批人 */
resetUpdateAssigneeForm() {
this.updateAssignee.form = {
id: undefined,
@ -367,22 +453,72 @@ export default {
};
this.resetForm("updateAssigneeForm");
},
/** 处理审批退回的操作 */
/** 处理审批委派的操作 */
handleDelegate(task) {
this.$modal.msgError("暂不支持【委派】功能，可以使用【转派】替代！");
//this.$modal.msgError("暂不支持【委派】功能，可以使用【转派】替代！");
this.resetUpdateDelegateForm();
this.updateDelegate.form.id = task.id;
// 设置为打开
this.updateDelegate.open = true;
},
/** 提交委派审批人 */
submitUpdateDelegateForm() {
this.$refs['updateDelegateForm'].validate(valid => {
if (!valid) {
return;
}
delegateTask(this.updateDelegate.form).then(response => {
this.$modal.msgSuccess("委派任务成功！");
this.updateDelegate.open = false;
this.getDetail(); // 获得最新详情
});
});
},
/** 取消委派审批人 */
cancelUpdateDelegateForm() {
this.updateDelegate.open = false;
this.resetUpdateDelegateForm();
},
/** 重置委派审批人 */
resetUpdateDelegateForm() {
this.updateDelegate.form = {
id: undefined,
delegateUserId: undefined,
};
this.resetForm("updateDelegateForm");
},
/** 处理审批退回的操作 */
handleBack(task) {
this.$modal.msgError("暂不支持【退回】功能！");
/** 返回退回节点列表 */
handleBackList(task) {
// 可参考 http://blog.wya1.com/article/636697030/details/7296
// const data = {
// id: task.id,
// assigneeUserId: 1
// }
// backTask(data).then(response => {
// this.$modal.msgSuccess("回退成功！");
// this.getDetail(); // 获得最新详情
// });
getReturnList(task.id).then(response => {
this.returnList = response.data;
if (this.returnList.length == 0) {
this.$modal.msgError("当前没有可回退的节点！");
return;
}
this.formData.id = task.id;
this.returnOpen = true;
});
},
/** 提交退回任务 */
submitReturn() {
if (!this.formData.targetDefinitionKey) {
this.$modal.msgError("请选择退回节点！");
}
this.$refs['formRef'].validate(valid => {
if (!valid) {
return;
}
returnTask(this.formData).then(res => {
if (res.data) {
this.$modal.msgSuccess("回退成功！");
this.returnOpen = false;
this.getDetail();
}
});
});
}
}
};