工作流组件 未例

src/views/index.vue

@@ -11,6 +11,10 @@
       <ueditor />
     </el-row>
 
+    <el-row>
+      <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
+    </el-row>
+
     <el-row :gutter="32">
       <el-col :xs="24" :sm="24" :lg="8">
         <div class="chart-wrapper">
@@ -29,7 +33,9 @@
       </el-col>
     </el-row>
 
-    
+
+
+
   </div>
 </template>
 
@@ -40,6 +46,9 @@ import RaddarChart from './dashboard/RaddarChart'
 import PieChart from './dashboard/PieChart'
 import BarChart from './dashboard/BarChart'
 import Ueditor from '@/components/Ueditor'
+import {
+  getProcessDefinitionBpmnXMLByKey
+} from "@/api/bpm/definition";
 
 const lineChartData = {
   newVisitis: {
@@ -72,12 +81,26 @@ export default {
   },
   data() {
     return {
-      lineChartData: lineChartData.newVisitis
+      lineChartData: lineChartData.newVisitis,
+
+      // BPMN 数据
+      bpmnXML: null,
+      bpmnControlForm: {
+        prefix: "activiti"
+      },
     }
   },
+  created() {
+    this.handlerBpm();
+  },
   methods: {
     handleSetLineChartData(type) {
       this.lineChartData = lineChartData[type]
+    },
+    handlerBpm(){
+      getProcessDefinitionBpmnXMLByKey("free_apply").then(response => {
+        this.bpmnXML = response.data
+      })
     }
   }
 }
@@ -101,4 +124,12 @@ export default {
     padding: 8px;
   }
 }
+.my-process-designer {
+  height: calc(100vh - 200px);
+}
+
+.box-card {
+  width: 100%;
+  margin-bottom: 20px;
+}
 </style>