mec-cloud_-intelligent-manufacturing_crm/ruoyi-ui/src/views/system/bpmnPro/index.vue

<template>
  <div id="app-bpmn">
    <bpmn-toolbar v-if="getEditorConfig.toolbar" />
    <div class="main-content">
      <bpmn-designer :xml.sync="xmlString" />
      <bpmn-panel v-if="getEditorConfig.penalMode === 'custom'" />
      <div v-else class="camunda-panel" id="camunda-panel"></div>
    </div>

    <bpmn-settings />
    <bpmn-context-menu />
  </div>
</template>

<script>
import BpmnDesigner from "./components/Designer";
import BpmnSettings from "./components/Settings";
import { mapGetters } from "vuex";
import BpmnToolbar from "./components/Toolbar";
import BpmnContextMenu from "./components/ContextMenu/ContextMenu";
import BpmnPanel from "./components/Panel";
// 样式
import "bpmn-js/dist/assets/diagram-js.css"; // 基础样式
import "bpmn-js/dist/assets/bpmn-js.css"; // 基础样式
import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css"; // 节点基础图标
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css"; // 节点完整图标
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css"; // 节点完整图标

// 小地图
import "diagram-js-minimap/assets/diagram-js-minimap.css";

import "bpmn-js-properties-panel/dist/assets/element-templates.css";
import "bpmn-js-properties-panel/dist/assets/properties-panel.css";
import "bpmn-js-connectors-extension/dist/connectors-extension.css";
import "@bpmn-io/element-template-chooser/dist/element-template-chooser.css";
import "bpmn-js-bpmnlint/dist/assets/css/bpmn-js-bpmnlint.css";
import "bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css";
export default {
  name: "App",
  components: {
    BpmnPanel,
    BpmnContextMenu,
    BpmnToolbar,
    BpmnSettings,
    BpmnDesigner,
  },
  data() {
    return {
      xmlString: undefined,
    };
  },
  computed: {
    ...mapGetters(["getEditorConfig"]),
  },
  methods: {
    Provence(ev) {
      ev.preventDefault();
    },
  },
  mounted() {
    document.body.addEventListener("contextmenu", this.Provence);
  },
  beforeDestroy() {
    console.log("beforeDestroy");
    document.body.removeEventListener("contextmenu", this.Provence);
  },
};
</script>