add:管理员修正数据功能-指派流程、修改审批人、加减签、审批记录、流程变更记录、未完成流程表单变更功能
This commit is contained in:
zhaojuncheng
@ -1,164 +1,201 @@
|
||||
<template>
|
||||
<div style="margin:20px;">
|
||||
当前流程审批人：{{currentTaskAssigneeNames.replaceAll(",","、")}}
|
||||
</div>
|
||||
<div style="margin:20px;" v-if="currentTaskAssignees">
|
||||
节点审批人：
|
||||
<div v-for="(assignees,taskKey) in currentTaskAssignees" :key="taskKey">
|
||||
<span>{{assignees[0].taskName}}{{currentTaskInfo?.taskDefinitionKey==taskKey?'（当前审批节点）':''}}：</span>
|
||||
<span v-for="(assignee,index) in assignees" :key="index">
|
||||
{{assignee.assigneeNameStr?(assignee.assigneeNameStr?.replaceAll(",","/") + (index<assignees.length-1?'、':'')):('')}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 流程信息 -->
|
||||
<div class="flow-record-box">
|
||||
<div id="bpmnCanvas" class="canvas" ref="bpmnCanvas"></div>
|
||||
<div style="margin:20px;">
|
||||
当前流程审批人：{{currentTaskAssigneeNames.replaceAll(",","、")}}
|
||||
</div>
|
||||
<div style="margin:20px;" v-if="currentTaskAssignees">
|
||||
节点审批人：
|
||||
<div v-for="(assignees,taskKey) in currentTaskAssignees" :key="taskKey">
|
||||
<span>{{assignees[0].taskName}}{{currentTaskInfo?.taskDefinitionKey==taskKey?'（当前审批节点）':''}}：</span>
|
||||
<span :class="canClick ? 'custom-cursor' : ''" v-for="(assignee,index) in assignees" :key="index" @click="openView(assignee)">
|
||||
{{assignee.assigneeNameStr?(assignee.assigneeNameStr?.replaceAll(",","/") + (index<assignees.length-1?'、':'')):('')}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 流程信息 -->
|
||||
<div class="flow-record-box">
|
||||
<div id="bpmnCanvas" class="canvas" ref="bpmnCanvas"></div>
|
||||
</div>
|
||||
|
||||
<div class="fixed-bottom">
|
||||
<ZoomInOrOut @in="zoomViewport(false)" @out="zoomViewport(true)" />
|
||||
</div>
|
||||
<div class="fixed-bottom">
|
||||
<ZoomInOrOut @in="zoomViewport(false)" @out="zoomViewport(true)" />
|
||||
</div>
|
||||
|
||||
<a-modal v-if="visibleFlowRecordModal" :visible="true" :width="1000" title="编辑节点" @close="() => {
|
||||
visibleFlowRecordModal = false;
|
||||
}" @cancel="() => {
|
||||
visibleFlowRecordModal = false;
|
||||
}" @ok="() => {
|
||||
visibleFlowRecordModal = false;
|
||||
initBpmnModeler()
|
||||
}">
|
||||
<CurrentNode :schemaId="schemaId" :currentTaskAssigneeNames="currentTaskAssigneeNames"
|
||||
:clickedTaskAssignees="clickedTaskAssignees" :processId="processId">
|
||||
</CurrentNode>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import CustomModeler from '/@bpmn/modeler';
|
||||
import { ZoomInOrOut } from '/@/components/ModalPanel';
|
||||
import { getFinishedTask } from '/@/api/workflow/task';
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import CustomModeler from '/@bpmn/modeler';
|
||||
import { ZoomInOrOut } from '/@/components/ModalPanel';
|
||||
import { getFinishedTask } from '/@/api/workflow/task';
|
||||
import { ref, reactive, onMounted, provide } from 'vue';
|
||||
import CurrentNode from '../../../../actHiTaskinst/components/Form.vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
xml: string;
|
||||
processId: string;
|
||||
currentTaskAssignees: any;
|
||||
currentTaskAssigneeNames: string;
|
||||
currentTaskInfo:any;
|
||||
}>(),
|
||||
{
|
||||
xml: '',
|
||||
processId: '',
|
||||
currentTaskAssigneeNames:'无',
|
||||
currentTaskAssignees: {},
|
||||
currentTaskInfo:{}
|
||||
},
|
||||
);
|
||||
const bpmnCanvas = ref();
|
||||
let data: {
|
||||
bpmnViewer: any;
|
||||
zoom: number;
|
||||
xmlString: string;
|
||||
} = reactive({
|
||||
bpmnViewer: null,
|
||||
zoom: 1,
|
||||
xmlString: '',
|
||||
});
|
||||
onMounted(() => {
|
||||
data.xmlString = props.xml;
|
||||
if (data.xmlString) initBpmnModeler();
|
||||
});
|
||||
const visibleFlowRecordModal = ref(false);
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
xml: string;
|
||||
processId: string;
|
||||
currentTaskAssignees: any;
|
||||
currentTaskAssigneeNames: string;
|
||||
currentTaskInfo:any;
|
||||
schemaId: string;
|
||||
clickedTaskAssignees: any;
|
||||
canClick: boolean;
|
||||
}>(),
|
||||
{
|
||||
xml: '',
|
||||
processId: '',
|
||||
currentTaskAssigneeNames:'无',
|
||||
currentTaskAssignees: {},
|
||||
currentTaskInfo:{},
|
||||
schemaId: '',
|
||||
clickedTaskAssignees: {},
|
||||
canClick: false
|
||||
},
|
||||
);
|
||||
const taskNode = ref<Array<{ 'taskId': string, 'taskName': string }>>([]);
|
||||
const bpmnCanvas = ref();
|
||||
let data: {
|
||||
bpmnViewer: any;
|
||||
zoom: number;
|
||||
xmlString: string;
|
||||
} = reactive({
|
||||
bpmnViewer: null,
|
||||
zoom: 1,
|
||||
xmlString: '',
|
||||
});
|
||||
onMounted(() => {
|
||||
data.xmlString = props.xml;
|
||||
if (data.xmlString) initBpmnModeler();
|
||||
});
|
||||
|
||||
async function initBpmnModeler() {
|
||||
data.bpmnViewer = await new CustomModeler({
|
||||
container: bpmnCanvas.value,
|
||||
additionalModules: [
|
||||
{
|
||||
labelEditingProvider: ['value', ''], //禁用节点编辑
|
||||
paletteProvider: ['value', ''], //禁用/清空左侧工具栏
|
||||
contextPadProvider: ['value', ''], //禁用图形菜单
|
||||
bendpoints: ['value', {}], //禁用连线拖动
|
||||
move: ['value', ''], //禁用单个图形拖动
|
||||
},
|
||||
],
|
||||
async function initBpmnModeler() {
|
||||
data.bpmnViewer = await new CustomModeler({
|
||||
container: bpmnCanvas.value,
|
||||
additionalModules: [
|
||||
{
|
||||
labelEditingProvider: ['value', ''], //禁用节点编辑
|
||||
paletteProvider: ['value', ''], //禁用/清空左侧工具栏
|
||||
contextPadProvider: ['value', ''], //禁用图形菜单
|
||||
bendpoints: ['value', {}], //禁用连线拖动
|
||||
move: ['value', ''], //禁用单个图形拖动
|
||||
},
|
||||
],
|
||||
});
|
||||
await redrawing();
|
||||
if (props.processId) {
|
||||
let res = await getFinishedTask(props.processId);
|
||||
setColors(
|
||||
res.finishedNodes ? res.finishedNodes : [],
|
||||
res.currentNodes ? res.currentNodes : [],
|
||||
);
|
||||
}
|
||||
}
|
||||
async function redrawing() {
|
||||
try {
|
||||
await data.bpmnViewer.importXML(data.xmlString);
|
||||
data.bpmnViewer.get('elementRegistry').getAll().forEach(ele => {
|
||||
if ((ele.di.get('bpmnElement').id as String).startsWith('Activity')) {
|
||||
taskNode.value.push({ 'taskName': ele.di.get('bpmnElement').name, 'taskId': ele.di.get('bpmnElement').id })
|
||||
}
|
||||
});
|
||||
let canvas = data.bpmnViewer.get('canvas');
|
||||
canvas.zoom('fit-viewport', 'auto');
|
||||
} catch (err) {
|
||||
console.log('err: ', err);
|
||||
}
|
||||
}
|
||||
|
||||
provide('taskNode', taskNode);
|
||||
|
||||
function setColors(finishedIds: Array<string>, currentIds: Array<string>) {
|
||||
// finishedIds 完成的节点id
|
||||
// currentIds 进行中节点id
|
||||
let modeling = data.bpmnViewer.get('modeling');
|
||||
const elementRegistry = data.bpmnViewer.get('elementRegistry');
|
||||
if (finishedIds.length > 0) {
|
||||
finishedIds.forEach((it) => {
|
||||
let Event = elementRegistry.get(it);
|
||||
|
||||
modeling.setColor(Event, {
|
||||
stroke: 'green',
|
||||
fill: 'white',
|
||||
});
|
||||
});
|
||||
await redrawing();
|
||||
if (props.processId) {
|
||||
let res = await getFinishedTask(props.processId);
|
||||
setColors(
|
||||
res.finishedNodes ? res.finishedNodes : [],
|
||||
res.currentNodes ? res.currentNodes : [],
|
||||
);
|
||||
}
|
||||
}
|
||||
async function redrawing() {
|
||||
try {
|
||||
await data.bpmnViewer.importXML(data.xmlString);
|
||||
let canvas = data.bpmnViewer.get('canvas');
|
||||
canvas.zoom('fit-viewport', 'auto');
|
||||
} catch (err) {
|
||||
console.log('err: ', err);
|
||||
}
|
||||
if (currentIds.length > 0) {
|
||||
currentIds.forEach((it) => {
|
||||
let Event = elementRegistry.get(it);
|
||||
modeling.setColor(Event, {
|
||||
stroke: '#409eff',
|
||||
fill: 'white',
|
||||
});
|
||||
});
|
||||
}
|
||||
function setColors(finishedIds: Array<string>, currentIds: Array<string>) {
|
||||
// finishedIds 完成的节点id
|
||||
// currentIds 进行中节点id
|
||||
let modeling = data.bpmnViewer.get('modeling');
|
||||
const elementRegistry = data.bpmnViewer.get('elementRegistry');
|
||||
if (finishedIds.length > 0) {
|
||||
finishedIds.forEach((it) => {
|
||||
let Event = elementRegistry.get(it);
|
||||
}
|
||||
function zoomViewport(zoomIn = true) {
|
||||
data.zoom = data.bpmnViewer.get('canvas').zoom();
|
||||
data.zoom += zoomIn ? 0.1 : -0.1;
|
||||
data.bpmnViewer.get('canvas').zoom(data.zoom);
|
||||
}
|
||||
|
||||
modeling.setColor(Event, {
|
||||
stroke: 'green',
|
||||
fill: 'white',
|
||||
});
|
||||
});
|
||||
}
|
||||
if (currentIds.length > 0) {
|
||||
currentIds.forEach((it) => {
|
||||
let Event = elementRegistry.get(it);
|
||||
modeling.setColor(Event, {
|
||||
stroke: '#409eff',
|
||||
fill: 'white',
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
function zoomViewport(zoomIn = true) {
|
||||
data.zoom = data.bpmnViewer.get('canvas').zoom();
|
||||
data.zoom += zoomIn ? 0.1 : -0.1;
|
||||
data.bpmnViewer.get('canvas').zoom(data.zoom);
|
||||
}
|
||||
function openView(val) {
|
||||
if (props.canClick) {
|
||||
visibleFlowRecordModal.value = true;
|
||||
props.clickedTaskAssignees.value = val;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
@import '/@/assets/style/bpmn-js/diagram-js.css';
|
||||
@import '/@/assets/style/bpmn-js/bpmn-font/css/bpmn.css';
|
||||
@import '/@/assets/style/bpmn-js/bpmn-font/css/bpmn-codes.css';
|
||||
@import '/@/assets/style/bpmn-js/bpmn-font/css/bpmn-embedded.css';
|
||||
@import '/@/assets/style/bpmn-js/diagram-js.css';
|
||||
@import '/@/assets/style/bpmn-js/bpmn-font/css/bpmn.css';
|
||||
@import '/@/assets/style/bpmn-js/bpmn-font/css/bpmn-codes.css';
|
||||
@import '/@/assets/style/bpmn-js/bpmn-font/css/bpmn-embedded.css';
|
||||
|
||||
.bjs-powered-by {
|
||||
display: none !important;
|
||||
}
|
||||
.bjs-powered-by {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.flow-record-box {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
position: relative;
|
||||
margin-top: 50px;
|
||||
}
|
||||
.flow-record-box {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
position: relative;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
/* 画布 */
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 画布 */
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 按钮（放大 缩小 清除） */
|
||||
.fixed-bottom {
|
||||
position: absolute;
|
||||
top: 110px;
|
||||
font-size: 30px;
|
||||
left: 40%;
|
||||
display: flex;
|
||||
}
|
||||
/* 按钮（放大 缩小 清除） */
|
||||
.fixed-bottom {
|
||||
position: absolute;
|
||||
top: 110px;
|
||||
font-size: 30px;
|
||||
left: 40%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flow-record-box{
|
||||
// 选择节点的蓝框
|
||||
.djs-outline{
|
||||
display: none;
|
||||
}
|
||||
// 编辑节点的按钮
|
||||
.djs-overlay-container{
|
||||
display: none;
|
||||
}
|
||||
.flow-record-box{
|
||||
// 选择节点的蓝框
|
||||
.djs-outline{
|
||||
display: none;
|
||||
}
|
||||
// 编辑节点的按钮
|
||||
.djs-overlay-container{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user