Merge remote-tracking branch 'origin/bpmn' into zn

ruoyi-ui/src/main.js

@@ -7,6 +7,13 @@ import Cookies from 'js-cookie'
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
 
+// 以下为bpmn工作流绘图工具的样式
+import 'bpmn-js/dist/assets/diagram-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 '@/assets/styles/index.scss' // global css
 import '@/assets/styles/ruoyi.scss' // ruoyi css
 import App from './App'

ruoyi-ui/src/router/index.js

@@ -72,6 +72,24 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/bpmn',
+    component: Layout,
+    hidden: true,
+    name: 'bpmn',
+    meta: {
+      title: "流程图",
+      icon: "form",
+      noCache: false,
+      link: null
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/system/bpmn/index.vue'),
+      }
+    ]
+  },
   {
     path: '/login',
     component: () => import('@/views/login'),

ruoyi-ui/src/views/system/bpmn/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="containers">
+    <div class="canvas" ref="canvas"></div>
+  </div>
+</template>
+<script>
+// 引入相关的依赖
+import BpmnModeler from "bpmn-js/lib/Modeler";
+import { xmlStr } from "./mock/xmlStr"; // 这里是直接引用了xml字符串
+export default {
+  name: "",
+  components: {},
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
+  mounted() {
+    this.init();
+  },
+  data() {
+    return {
+      // bpmn建模器
+      bpmnModeler: null,
+      container: null,
+      canvas: null,
+    };
+  },
+  methods: {
+    init() {
+      // 获取到属性ref为“canvas”的dom节点
+      const canvas = this.$refs.canvas;
+      // 建模
+      this.bpmnModeler = new BpmnModeler({
+        container: canvas,
+      });
+      this.createNewDiagram();
+    },
+    createNewDiagram() {
+      // 将字符串转换成图显示出来
+      this.bpmnModeler.importXML(xmlStr, (err) => {
+        if (err) {
+          // console.error(err)
+        } else {
+          // 这里是成功之后的回调, 可以在这里做一系列事情
+          this.success();
+        }
+      });
+    },
+    success() {
+      // console.log('创建成功!')
+    },
+  },
+};
+</script>
+
+<style scoped>
+.containers {
+  position: absolute;
+  background-color: #ffffff;
+  width: 100%;
+  height: 100%;
+}
+.canvas {
+  width: 100%;
+  height: 100%;
+}
+.panel {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 300px;
+}
+</style>

ruoyi-ui/src/views/system/bpmn/mock/xmlStr.js

@@ -0,0 +1,62 @@
+export default '<?xml version="1.0" encoding="UTF-8"?>\n' +
+  '<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_0fppxr8" targetNamespace="http://bpmn.io/schema/bpmn">\n' +
+  '  <bpmn:process id="Process_1" isExecutable="false">\n' +
+  '    <bpmn:startEvent id="StartEvent_1" name="begin&#10;">\n' +
+  '      <bpmn:outgoing>SequenceFlow_0nrfbee</bpmn:outgoing>\n' +
+  '    </bpmn:startEvent>\n' +
+  '    <bpmn:task id="Task_0ho18x0" name="hello&#10;">\n' +
+  '      <bpmn:incoming>SequenceFlow_0nrfbee</bpmn:incoming>\n' +
+  '      <bpmn:outgoing>SequenceFlow_00ho26x</bpmn:outgoing>\n' +
+  '    </bpmn:task>\n' +
+  '    <bpmn:task id="Task_1ymuvem" name="world">\n' +
+  '      <bpmn:incoming>SequenceFlow_00ho26x</bpmn:incoming>\n' +
+  '      <bpmn:outgoing>SequenceFlow_18df8vb</bpmn:outgoing>\n' +
+  '    </bpmn:task>\n' +
+  '    <bpmn:endEvent id="EndEvent_1c0ed2n" name="end">\n' +
+  '      <bpmn:incoming>SequenceFlow_18df8vb</bpmn:incoming>\n' +
+  '    </bpmn:endEvent>\n' +
+  '    <bpmn:sequenceFlow id="SequenceFlow_0nrfbee" sourceRef="StartEvent_1" targetRef="Task_0ho18x0" />\n' +
+  '    <bpmn:sequenceFlow id="SequenceFlow_00ho26x" sourceRef="Task_0ho18x0" targetRef="Task_1ymuvem" />\n' +
+  '    <bpmn:sequenceFlow id="SequenceFlow_18df8vb" sourceRef="Task_1ymuvem" targetRef="EndEvent_1c0ed2n" />\n' +
+  '  </bpmn:process>\n' +
+  '  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
+  '    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
+  '      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">\n' +
+  '        <dc:Bounds x="173" y="102" width="36" height="36" />\n' +
+  '        <bpmndi:BPMNLabel>\n' +
+  '          <dc:Bounds x="178" y="145" width="27" height="27" />\n' +
+  '        </bpmndi:BPMNLabel>\n' +
+  '      </bpmndi:BPMNShape>\n' +
+  '      <bpmndi:BPMNShape id="Task_0ho18x0_di" bpmnElement="Task_0ho18x0">\n' +
+  '        <dc:Bounds x="485" y="244" width="100" height="80" />\n' +
+  '      </bpmndi:BPMNShape>\n' +
+  '      <bpmndi:BPMNShape id="Task_1ymuvem_di" bpmnElement="Task_1ymuvem">\n' +
+  '        <dc:Bounds x="712" y="391" width="100" height="80" />\n' +
+  '      </bpmndi:BPMNShape>\n' +
+  '      <bpmndi:BPMNShape id="EndEvent_1c0ed2n_di" bpmnElement="EndEvent_1c0ed2n">\n' +
+  '        <dc:Bounds x="1056" y="568" width="36" height="36" />\n' +
+  '        <bpmndi:BPMNLabel>\n' +
+  '          <dc:Bounds x="1065" y="611" width="19" height="14" />\n' +
+  '        </bpmndi:BPMNLabel>\n' +
+  '      </bpmndi:BPMNShape>\n' +
+  '      <bpmndi:BPMNEdge id="SequenceFlow_0nrfbee_di" bpmnElement="SequenceFlow_0nrfbee">\n' +
+  '        <di:waypoint x="209" y="120" />\n' +
+  '        <di:waypoint x="347" y="120" />\n' +
+  '        <di:waypoint x="347" y="284" />\n' +
+  '        <di:waypoint x="485" y="284" />\n' +
+  '      </bpmndi:BPMNEdge>\n' +
+  '      <bpmndi:BPMNEdge id="SequenceFlow_00ho26x_di" bpmnElement="SequenceFlow_00ho26x">\n' +
+  '        <di:waypoint x="585" y="284" />\n' +
+  '        <di:waypoint x="649" y="284" />\n' +
+  '        <di:waypoint x="649" y="431" />\n' +
+  '        <di:waypoint x="712" y="431" />\n' +
+  '      </bpmndi:BPMNEdge>\n' +
+  '      <bpmndi:BPMNEdge id="SequenceFlow_18df8vb_di" bpmnElement="SequenceFlow_18df8vb">\n' +
+  '        <di:waypoint x="812" y="431" />\n' +
+  '        <di:waypoint x="934" y="431" />\n' +
+  '        <di:waypoint x="934" y="586" />\n' +
+  '        <di:waypoint x="1056" y="586" />\n' +
+  '      </bpmndi:BPMNEdge>\n' +
+  '    </bpmndi:BPMNPlane>\n' +
+  '  </bpmndi:BPMNDiagram>\n' +
+  '</bpmn:definitions>\n'