流程实例管理界面新增流程图功能按钮

@@ -9,8 +9,10 @@ export const create = params => { return http.post(`${baseUrl}/deployment/create
 
 
 
-//实例管理
+//流程实例管理
 export const instanceList = params => { return http.get(`${baseUrl}/process/instanceList`,  params); };
+export const processDiagram = params => { return http.getStream(`${baseUrl}/processDiagram`,  params); };
+
 //任务管理
 export const allTask = params => { return http.get(`${baseUrl}/task/allTask`,  params); };
 export const allTaskHistory = params => { return http.get(`${baseUrl}/task/allTaskHistory`,  params); };

@@ -459,7 +459,7 @@ let routes = [
         iconCls: 'el-icon-goods',
         children: [
             {path:'/technological',component:technological,name:'部署管理'},
-            {path:'/example',component:example,name:'部署实例管理'},
+            {path:'/example',component:example,name:'流程实例管理'},
             {path:'/task',component:task,name:'任务管理'},
             {path:'/definition',component:definition,name:'部署定义管理'},
         ]

@@ -23,7 +23,7 @@
                 <el-table
                         v-loading="tableloading"
                         :data="tableData"
-                        style="width: 100%"
+                        style="width: 100%"npm run dev
                         :default-sort = "{prop: 'date', order: 'descending'}"
                         :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small">
                     <el-table-column type="expand">
@@ -79,29 +79,29 @@
                     </el-table-column>
                     <el-table-column
                             label="名称"
-                            prop="name "
+                            prop="name"
                             width="160">
                     </el-table-column>
                     <el-table-column
                             label="描述"
-                            prop="description "
+                            prop="description"
                             width="160">
                     </el-table-column>
                     <el-table-column
                             label="关键字"
-                            prop="key ">
+                            prop="key">
                     </el-table-column>
                     <el-table-column
                             label="版本"
-                            prop="version ">
+                            prop="version">
                     </el-table-column>
                     <el-table-column
                             label="已升级"
-                            prop="isUpdated ">
+                            prop="isUpdated">
                     </el-table-column>
                     <el-table-column
                             label="删除状态"
-                            prop="isDeleted ">
+                            prop="isDeleted">
 <!--                        <template slot-scope="scope">-->
 <!--                            <span  v-if="scope.row.suspensionState ==='1'">活跃</span>-->
 <!--                            <span  v-if="scope.row.suspensionState ==='2'">中断</span>-->

@@ -41,6 +41,15 @@
                         </template>
                     </el-table-column>
                     <el-table-column
+                            fixed="left"
+                            label="操作">
+                        <template slot-scope="scope">
+                            <el-button type="success" size="mini" @click="chart(scope.$index,scope.row)">流程图</el-button>
+                            <!--                            <el-button type="warning" size="mini" @click="remove(scope.$index,scope.row)">删除</el-button>-->
+                            <!--                            <el-button type="danger" size="mini" @click="removeDel(scope.$index,scope.row)">彻底删除</el-button>-->
+                        </template>
+                    </el-table-column>
+                    <el-table-column
                             label="实例名称"
                             prop="processDefinitionName"
                             width="160">
@@ -92,12 +101,30 @@
                     </div>
                 </el-col>
             </el-row>
+<!--            流程图弹框-->
+            <el-row>
+                <el-dialog title="流程图" :visible.sync="dialogFormVisible">
+                    <el-form :model="form">
+                        <el-form-item>
+                            <div class="demo-image__preview">
+                                <el-image
+
+                                        :src="form.url">
+                                </el-image>
+                            </div>
+                        </el-form-item>
+                    </el-form>
+                    <div slot="footer" class="dialog-footer">
+                        <el-button @click="dialogFormVisible = false">取 消</el-button>
+                    </div>
+                </el-dialog>
+            </el-row>
         </el-main>
     </el-container>
 </template>
 
 <script>
-    import {instanceList} from "../../api/technological";
+    import {instanceList,processDiagram} from "../../api/technological";
 
     export default {
         name: "example",
@@ -112,6 +139,10 @@
                 total:0,
                 tableData: [],
                 tableloading:false,
+                dialogFormVisible: false,
+                form: {
+                    url: ''
+                }
             }
         },
         mounted() {
@@ -151,6 +182,17 @@
 
                 })
             },
+            // 打开流程图
+            chart(index, row) {
+                this.dialogFormVisible = true
+
+                processDiagram({processId:row.processInstanceId}).then(res =>{
+                    // eslint-disable-next-line no-console
+                    console.log(res)
+                        this.form.url=window.URL.createObjectURL(res.data);
+                    });
+
+            },
         }
     }
 </script>

 {
-  "nmmsVer": "1.26"
+  "nmmsVer": "1.27"
 }