geg-gas-web/src/views/workflow/task/components/flow/ProcessInformation.vue

<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 :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>

<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, provide } from 'vue';
import CurrentNode from '../../../../actHiTaskinst/components/Form.vue';

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', ''], //禁用单个图形拖动
      },
    ],
  });
  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',
      });
    });
  }
  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';

.bjs-powered-by {
  display: none !important;
}

.flow-record-box {
  width: 100%;
  height: 80vh;
  position: relative;
  margin-top: 50px;
}

/* 画布 */
.canvas {
  width: 100%;
  height: 100%;
}

/* 按钮（放大 缩小 清除） */
.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;
  }
}
</style>