aiot-platform-ui/apps/web-antd/src/components/bpmn-process-designer/package/designer/ProcessViewer.vue

<script lang="ts" setup>
import { defineProps, onBeforeUnmount, onMounted, ref, watch } from 'vue';

import { BpmProcessInstanceStatus, DICT_TYPE } from '@vben/constants';
import { UndoOutlined, ZoomInOutlined, ZoomOutOutlined } from '@vben/icons';
import { dateFormatter, formatPast2 } from '@vben/utils';

import { Button, ButtonGroup, Modal, Row, Table } from 'ant-design-vue';
import BpmnViewer from 'bpmn-js/lib/Viewer';
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';

import { DictTag } from '#/components/dict-tag';

import '../theme/index.scss';

const props = defineProps({
  xml: {
    type: String,
    required: true,
  },
  view: {
    type: Object,
    require: true,
    default: () => ({}),
  },
});

const processCanvas = ref();
const bpmnViewer = ref<any | BpmnViewer>(null);
const customDefs = ref();
const defaultZoom = ref(1); // 默认缩放比例
const isLoading = ref(false); // 是否加载中

const processInstance = ref<any>({}); // 流程实例
const tasks = ref([]); // 流程任务

const dialogVisible = ref(false); // 弹窗可见性
const dialogTitle = ref<string | undefined>(undefined); // 弹窗标题
const selectActivityType = ref<string | undefined>(undefined); // 选中 Task 的活动编号
const selectTasks = ref<any[]>([]); // 选中的任务数组

/** Zoom：恢复 */
const processReZoom = () => {
  defaultZoom.value = 1;
  bpmnViewer.value?.get('canvas').zoom('fit-viewport', 'auto');
};

/** Zoom：放大 */
const processZoomIn = (zoomStep = 0.1) => {
  const newZoom = Math.floor(defaultZoom.value * 100 + zoomStep * 100) / 100;
  if (newZoom > 4) {
    throw new Error(
      '[Process Designer Warn ]: The zoom ratio cannot be greater than 4',
    );
  }
  defaultZoom.value = newZoom;
  bpmnViewer.value?.get('canvas').zoom(defaultZoom.value);
};

/** Zoom：缩小 */
const processZoomOut = (zoomStep = 0.1) => {
  const newZoom = Math.floor(defaultZoom.value * 100 - zoomStep * 100) / 100;
  if (newZoom < 0.2) {
    throw new Error(
      '[Process Designer Warn ]: The zoom ratio cannot be less than 0.2',
    );
  }
  defaultZoom.value = newZoom;
  bpmnViewer.value?.get('canvas').zoom(defaultZoom.value);
};

/** 流程图预览清空 */
const clearViewer = () => {
  if (processCanvas.value) {
    processCanvas.value.innerHTML = '';
  }
  if (bpmnViewer.value) {
    bpmnViewer.value.destroy();
  }
  bpmnViewer.value = null;
};

/** 添加自定义箭头 */
// TODO 芋艿：自定义箭头不生效，有点奇怪！！！！相关的 marker-end、marker-start 暂时也注释了！！！
const addCustomDefs = () => {
  if (!bpmnViewer.value) {
    return;
  }
  const canvas = bpmnViewer.value?.get('canvas');
  const svg = canvas?._svg;
  svg.append(customDefs.value);
};

/** 节点选中 */
const onSelectElement = (element: any) => {
  // 清空原选中
  selectActivityType.value = undefined;
  dialogTitle.value = undefined;
  if (!element || !processInstance.value?.id) {
    return;
  }

  // UserTask 的情况
  const activityType = element.type;
  selectActivityType.value = activityType;
  if (activityType === 'bpmn:UserTask') {
    dialogTitle.value = element.businessObject
      ? element.businessObject.name
      : undefined;
    selectTasks.value = tasks.value.filter(
      (item: any) => item?.taskDefinitionKey === element.id,
    );
    dialogVisible.value = true;
  } else if (
    activityType === 'bpmn:EndEvent' ||
    activityType === 'bpmn:StartEvent'
  ) {
    dialogTitle.value = '审批信息';
    selectTasks.value = [
      {
        assigneeUser: processInstance.value.startUser,
        createTime: processInstance.value.startTime,
        endTime: processInstance.value.endTime,
        status: processInstance.value.status,
        durationInMillis: processInstance.value.durationInMillis,
      },
    ];
    dialogVisible.value = true;
  }
};

/** 初始化 BPMN 视图 */
const importXML = async (xml: string) => {
  // 清空流程图
  clearViewer();

  // 初始化流程图
  if (xml !== null && xml !== '') {
    try {
      bpmnViewer.value = new BpmnViewer({
        additionalModules: [MoveCanvasModule],
        container: processCanvas.value,
      });
      // 增加点击事件
      bpmnViewer.value.on('element.click', ({ element }: { element: any }) => {
        onSelectElement(element);
      });

      // 初始化 BPMN 视图
      isLoading.value = true;
      await bpmnViewer.value.importXML(xml);
      // 自定义成功的箭头
      addCustomDefs();
    } catch {
      clearViewer();
    } finally {
      isLoading.value = false;
      // 高亮流程
      setProcessStatus(props.view);
    }
  }
};

/** 高亮流程 */
const setProcessStatus = (view: any) => {
  // 设置相关变量
  if (!view || !view.processInstance) {
    return;
  }
  processInstance.value = view.processInstance;
  tasks.value = view.tasks;
  if (isLoading.value || !bpmnViewer.value) {
    return;
  }
  const {
    unfinishedTaskActivityIds,
    finishedTaskActivityIds,
    finishedSequenceFlowActivityIds,
    rejectedTaskActivityIds,
  } = view;
  const canvas: any = bpmnViewer.value.get('canvas');
  const elementRegistry: any = bpmnViewer.value.get('elementRegistry');

  // 已完成节点
  if (Array.isArray(finishedSequenceFlowActivityIds)) {
    finishedSequenceFlowActivityIds.forEach((item: any) => {
      if (item !== null) {
        canvas.addMarker(item, 'success');
        const element = elementRegistry.get(item);
        const conditionExpression = element.businessObject.conditionExpression;
        if (conditionExpression) {
          canvas.addMarker(item, 'condition-expression');
        }
      }
    });
  }
  if (Array.isArray(finishedTaskActivityIds)) {
    finishedTaskActivityIds.forEach((item: any) =>
      canvas.addMarker(item, 'success'),
    );
  }

  // 未完成节点
  if (Array.isArray(unfinishedTaskActivityIds)) {
    unfinishedTaskActivityIds.forEach((item: any) =>
      canvas.addMarker(item, 'primary'),
    );
  }

  // 被拒绝节点
  if (Array.isArray(rejectedTaskActivityIds)) {
    rejectedTaskActivityIds.forEach((item: any) => {
      if (item !== null) {
        canvas.addMarker(item, 'danger');
      }
    });
  }

  // 特殊：处理 end 节点的高亮。因为 end 在拒绝、取消时，被后端计算成了 finishedTaskActivityIds 里
  if (
    [BpmProcessInstanceStatus.CANCEL, BpmProcessInstanceStatus.REJECT].includes(
      processInstance.value.status,
    )
  ) {
    const endNodes = elementRegistry.filter(
      (element: any) => element.type === 'bpmn:EndEvent',
    );
    endNodes.forEach((item: any) => {
      canvas.removeMarker(item.id, 'success');
      if (processInstance.value.status === BpmProcessInstanceStatus.CANCEL) {
        canvas.addMarker(item.id, 'cancel');
      } else {
        canvas.addMarker(item.id, 'danger');
      }
    });
  }
};

watch(
  () => props.xml,
  (newXml) => {
    importXML(newXml);
  },
  { immediate: true },
);

watch(
  () => props.view,
  (newView) => {
    setProcessStatus(newView);
  },
  { immediate: true },
);

/** mounted：初始化 */
onMounted(() => {
  importXML(props.xml);
  setProcessStatus(props.view);
});

/** unmount：销毁 */
onBeforeUnmount(() => {
  clearViewer();
});
</script>

<template>
  <div class="process-viewer">
    <div style="height: 100%" ref="processCanvas" v-show="!isLoading"></div>
    <!-- 自定义箭头样式，用于已完成状态下流程连线箭头 -->
    <defs ref="customDefs">
      <marker
        id="sequenceflow-end-white-success"
        viewBox="0 0 20 20"
        refX="11"
        refY="10"
        markerWidth="10"
        markerHeight="10"
        orient="auto"
      >
        <path
          class="success-arrow"
          d="M 1 5 L 11 10 L 1 15 Z"
          style="
            stroke-width: 1px;
            stroke-linecap: round;
            stroke-dasharray: 10000, 1;
          "
        />
      </marker>
      <marker
        id="conditional-flow-marker-white-success"
        viewBox="0 0 20 20"
        refX="-1"
        refY="10"
        markerWidth="10"
        markerHeight="10"
        orient="auto"
      >
        <path
          class="success-conditional"
          d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
          style="
            stroke-width: 1px;
            stroke-linecap: round;
            stroke-dasharray: 10000, 1;
          "
        />
      </marker>
    </defs>

    <!-- 审批记录 -->
    <Modal
      :title="dialogTitle || '审批记录'"
      v-model:open="dialogVisible"
      :width="1000"
    >
      <Row>
        <Table :data-source="selectTasks" size="small" :bordered="true">
          <Table.Column title="序号" align="center" width="50">
            <template #default="{ index }">
              {{ index + 1 }}
            </template>
          </Table.Column>
          <Table.Column
            title="审批人"
            width="100"
            align="center"
            v-if="selectActivityType === 'bpmn:UserTask'"
          >
            <template #default="{ record }">
              {{ record.assigneeUser?.nickname || record.ownerUser?.nickname }}
            </template>
          </Table.Column>
          <Table.Column
            title="发起人"
            data-index="assigneeUser.nickname"
            width="100"
            align="center"
            v-else
          />
          <Table.Column title="部门" width="100" align="center">
            <template #default="{ record }">
              {{ record.assigneeUser?.deptName || record.ownerUser?.deptName }}
            </template>
          </Table.Column>
          <Table.Column
            :custom-render="({ text }) => dateFormatter(text)"
            align="center"
            title="开始时间"
            data-index="createTime"
            width="140"
          />
          <Table.Column
            :custom-render="({ text }) => dateFormatter(text)"
            align="center"
            title="结束时间"
            data-index="endTime"
            width="140"
          />
          <Table.Column
            align="center"
            title="审批状态"
            data-index="status"
            width="90"
          >
            <template #default="{ record }">
              <DictTag
                :type="DICT_TYPE.BPM_TASK_STATUS"
                :value="record.status"
              />
            </template>
          </Table.Column>
          <Table.Column
            align="center"
            title="审批建议"
            data-index="reason"
            width="120"
            v-if="selectActivityType === 'bpmn:UserTask'"
          />
          <Table.Column
            align="center"
            title="耗时"
            data-index="durationInMillis"
            width="100"
          >
            <template #default="{ record }">
              {{ formatPast2(record.durationInMillis) }}
            </template>
          </Table.Column>
        </Table>
      </Row>
    </Modal>

    <!-- Zoom：放大、缩小 -->
    <div style="position: absolute; top: 0; left: 0; width: 100%">
      <Row justify="end">
        <ButtonGroup key="scale-control">
          <Button
            :disabled="defaultZoom <= 0.3"
            :icon="ZoomOutOutlined"
            @click="processZoomOut()"
          />
          <Button style="width: 90px">
            {{ `${Math.floor(defaultZoom * 10 * 10)}%` }}
          </Button>
          <Button
            :disabled="defaultZoom >= 3.9"
            :icon="ZoomInOutlined"
            @click="processZoomIn()"
          />
          <Button :icon="UndoOutlined" @click="processReZoom()" />
        </ButtonGroup>
      </Row>
    </div>
  </div>
</template>