完善工作流模型。工作流定义

sql/ruoyi-vue-pro.sql

@@ -1194,6 +1194,10 @@ INSERT INTO `sys_menu` VALUES (1122, '请假申请删除', 'oa:leave:delete', 3,
 INSERT INTO `sys_menu` VALUES (1123, '请假申请导出', 'oa:leave:export', 3, 5, 1118, '', '', '', 0, '', '2021-09-20 08:51:03', '', '2021-09-20 08:51:03', b'0');
 INSERT INTO `sys_menu` VALUES (1124, '待办请假', '', 2, 2, 5, 'todo', 'edit', 'oa/todo/index', 0, '1', '2021-09-20 22:10:09', '1', '2021-09-21 23:17:12', b'0');
 INSERT INTO `sys_menu` VALUES (1125, '已办请假', '', 2, 3, 5, 'flow', 'form', 'oa/flow/index', 0, '1', '2021-10-23 22:10:09', '1', '2021-10-23 23:17:12', b'0');
+INSERT INTO `sys_menu` VALUES (1128, '工作流程定义', '', 2, 2, 1126, 'processDefinition/index', '#', 'bpm/processDefinition/index', 0, '1', '2021-11-19 11:18:38', '1', '2021-11-19 11:18:38', b'0');
+INSERT INTO `sys_menu` VALUES (1127, '工作流设计', '', 2, 1, 1126, 'model/index', '#', 'bpm/model/index', 0, '1', '2021-11-19 10:59:36', '1', '2021-11-19 11:01:59', b'0');
+INSERT INTO `sys_menu` VALUES (1126, '工作流管理', '', 1, 5, 0, '/bpm', 'tree-table', NULL, 0, '1', '2021-11-19 10:57:49', '1', '2021-11-19 11:05:05', b'0');
+
 COMMIT;
 
 -- ----------------------------

yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/controller/workflow/ProcessDefinitionController.java

@@ -1,6 +1,13 @@
 package cn.iocoder.yudao.adminserver.modules.bpm.controller.workflow;
 
+import cn.iocoder.yudao.adminserver.modules.bpm.controller.workflow.vo.FileResp;
+import cn.iocoder.yudao.adminserver.modules.bpm.controller.workflow.vo.processdefinition.ProcessDefinitionPageReqVo;
+import cn.iocoder.yudao.adminserver.modules.bpm.controller.workflow.vo.processdefinition.ProcessDefinitionRespVO;
+import cn.iocoder.yudao.adminserver.modules.bpm.service.workflow.BpmProcessDefinitionService;
 import cn.iocoder.yudao.framework.common.pojo.CommonResult;
+import cn.iocoder.yudao.framework.common.pojo.PageResult;
+import cn.iocoder.yudao.framework.common.util.servlet.ServletUtils;
+import io.swagger.annotations.ApiOperation;
 import org.activiti.api.process.runtime.ProcessRuntime;
 import org.activiti.engine.RepositoryService;
 import org.springframework.web.bind.annotation.GetMapping;
@@ -9,6 +16,8 @@ import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
 
 import javax.annotation.Resource;
+import javax.servlet.http.HttpServletResponse;
+import java.io.IOException;
 
 // TODO @json：swagger 和 validation 的注解，后续要补全下哈。可以等 workflow 基本写的差不多之后
 @RestController
@@ -20,15 +29,30 @@ public class ProcessDefinitionController {
 
     @Resource
     private ProcessRuntime processRuntime;
+    @Resource
+    private BpmProcessDefinitionService bpmProcessDefinitionService;
 
 
     @GetMapping(value = "/getStartForm")
     public CommonResult<String> getStartForm(@RequestParam("processKey") String processKey){
-        //这样查似乎有问题？？， 暂时写死
 //        final ProcessDefinition processDefinition = repositoryService.createProcessDefinitionQuery().
 //                processDefinitionKey(processKey).latestVersion().singleResult();
 //        processRuntime.processDefinition(processDefinition.getId()).getFormKey();
+        //这样查似乎有问题？？， 暂时写死
         return CommonResult.success("/flow/leave/apply");
     }
 
+    @GetMapping ("/page")
+    @ApiOperation(value = "流程定义分页数据")
+    public CommonResult<PageResult<ProcessDefinitionRespVO>> pageList(ProcessDefinitionPageReqVo processDefinitionPageReqVo) {
+        return CommonResult.success(bpmProcessDefinitionService.pageList(processDefinitionPageReqVo));
+    }
+
+    @GetMapping ("/export")
+    @ApiOperation(value = "流程定义的bpmnXml导出")
+    public void pageList(@RequestParam String processDefinitionId, HttpServletResponse response) throws IOException {
+        FileResp fileResp = bpmProcessDefinitionService.export(processDefinitionId);
+        ServletUtils.writeAttachment(response, fileResp.getFileName(), fileResp.getFileByte());
+    }
+
 }

yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/controller/workflow/vo/processdefinition/ProcessDefinitionPageReqVo.java

@@ -0,0 +1,20 @@
+package cn.iocoder.yudao.adminserver.modules.bpm.controller.workflow.vo.processdefinition;
+
+import cn.iocoder.yudao.framework.common.pojo.PageParam;
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import lombok.ToString;
+
+/**
+ * @author yunlong.li
+ */
+@Data
+@ToString(callSuper = true)
+@EqualsAndHashCode(callSuper = true)
+@ApiModel("流程定义分页 Request VO")
+public class ProcessDefinitionPageReqVo extends PageParam {
+    @ApiModelProperty("流程名字")
+    private String name;
+}

yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/controller/workflow/vo/processdefinition/ProcessDefinitionRespVO.java

@@ -0,0 +1,18 @@
+package cn.iocoder.yudao.adminserver.modules.bpm.controller.workflow.vo.processdefinition;
+
+import io.swagger.annotations.ApiModel;
+import lombok.Data;
+
+/**
+ * @author yunlong.li
+ */
+@Data
+@ApiModel("流程定义数据返回 Request VO")
+public class ProcessDefinitionRespVO {
+
+    private String formKey;
+    private String id;
+    private String key;
+    private String name;
+    private Integer version;
+}

yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/convert/workflow/ProcessDefinitionConvert.java

@@ -0,0 +1,17 @@
+package cn.iocoder.yudao.adminserver.modules.bpm.convert.workflow;
+
+import cn.iocoder.yudao.adminserver.modules.bpm.controller.workflow.vo.processdefinition.ProcessDefinitionRespVO;
+import org.activiti.engine.repository.ProcessDefinition;
+import org.mapstruct.Mapper;
+import org.mapstruct.factory.Mappers;
+
+/**
+ * @author yunlong.li
+ */
+@Mapper
+public interface ProcessDefinitionConvert {
+    ProcessDefinitionConvert INSTANCE = Mappers.getMapper(ProcessDefinitionConvert.class);
+
+    ProcessDefinitionRespVO convert(ProcessDefinition processDefinition);
+
+}

yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/service/workflow/BpmProcessDefinitionService.java

@@ -0,0 +1,26 @@
+package cn.iocoder.yudao.adminserver.modules.bpm.service.workflow;
+
+import cn.iocoder.yudao.adminserver.modules.bpm.controller.workflow.vo.FileResp;
+import cn.iocoder.yudao.adminserver.modules.bpm.controller.workflow.vo.processdefinition.ProcessDefinitionPageReqVo;
+import cn.iocoder.yudao.adminserver.modules.bpm.controller.workflow.vo.processdefinition.ProcessDefinitionRespVO;
+import cn.iocoder.yudao.framework.common.pojo.PageResult;
+
+/**
+ * 流程定义接口
+ * @author yunlong.li
+ */
+public interface BpmProcessDefinitionService {
+    /**
+     * 流程定义分页
+     * @param processDefinitionPageReqVo 分页入参
+     * @return 分页model
+     */
+    PageResult<ProcessDefinitionRespVO> pageList(ProcessDefinitionPageReqVo processDefinitionPageReqVo);
+
+    /**
+     * 导出流程 bpmn 模型
+     * @param processDefinitionId 分页入参
+     * @return 分页model
+     */
+    FileResp export(String processDefinitionId);
+}

yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/service/workflow/impl/BpmProcessDefinitionServiceImpl.java

@@ -0,0 +1,60 @@
+package cn.iocoder.yudao.adminserver.modules.bpm.service.workflow.impl;
+
+import cn.hutool.core.util.StrUtil;
+import cn.iocoder.yudao.adminserver.modules.bpm.controller.workflow.vo.FileResp;
+import cn.iocoder.yudao.adminserver.modules.bpm.controller.workflow.vo.processdefinition.ProcessDefinitionPageReqVo;
+import cn.iocoder.yudao.adminserver.modules.bpm.controller.workflow.vo.processdefinition.ProcessDefinitionRespVO;
+import cn.iocoder.yudao.adminserver.modules.bpm.convert.workflow.ProcessDefinitionConvert;
+import cn.iocoder.yudao.adminserver.modules.bpm.service.workflow.BpmProcessDefinitionService;
+import cn.iocoder.yudao.framework.common.pojo.PageResult;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.activiti.api.process.runtime.ProcessRuntime;
+import org.activiti.bpmn.converter.BpmnXMLConverter;
+import org.activiti.bpmn.model.BpmnModel;
+import org.activiti.engine.RepositoryService;
+import org.activiti.engine.repository.ProcessDefinition;
+import org.activiti.engine.repository.ProcessDefinitionQuery;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+import java.util.stream.Collectors;
+
+/**
+ * 流程定义实现
+ * @author yunlongn
+ */
+@Slf4j
+@Service
+@RequiredArgsConstructor
+public class BpmProcessDefinitionServiceImpl implements BpmProcessDefinitionService {
+
+    private final RepositoryService repositoryService;
+
+    private final ProcessRuntime processRuntime;
+
+    @Override
+    public PageResult<ProcessDefinitionRespVO> pageList(ProcessDefinitionPageReqVo processDefinitionPageReqVo) {
+        ProcessDefinitionQuery processDefinitionQuery = repositoryService.createProcessDefinitionQuery();
+        String likeName = processDefinitionPageReqVo.getName();
+        if (StrUtil.isNotBlank(likeName)){
+            processDefinitionQuery.processDefinitionNameLike("%"+likeName+"%");
+        }
+        List<ProcessDefinition> processDefinitions = processDefinitionQuery.orderByProcessDefinitionId().desc()
+                .listPage((processDefinitionPageReqVo.getPageNo() - 1) * processDefinitionPageReqVo.getPageSize(),
+                        processDefinitionPageReqVo.getPageSize());
+        final List<ProcessDefinitionRespVO> respVOList = processDefinitions.stream()
+                .map(ProcessDefinitionConvert.INSTANCE::convert).collect(Collectors.toList());
+        return new PageResult<>(respVOList, processDefinitionQuery.count());
+    }
+
+    @Override
+    public FileResp export(String processDefinitionId) {
+        BpmnModel bpmnModel = repositoryService.getBpmnModel(processDefinitionId);
+        byte[] bpmnBytes = new BpmnXMLConverter().convertToXML(bpmnModel);
+        FileResp fileResp = new FileResp();
+        fileResp.setFileName( "export");
+        fileResp.setFileByte(bpmnBytes);
+        return fileResp;
+    }
+}

yudao-admin-ui/src/api/bpm/processDefinition.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+
+export function page(query) {
+  return request({
+    url: '/workflow/process/definition/page',
+    method: 'get',
+    params: query
+  })
+}
+
+export function exportProcessDefinition(query) {
+  return request({
+    url: '/workflow/process/definition/export?processDefinitionId='+query.id,
+    method: 'get'
+  })
+}

yudao-admin-ui/src/components/bpmn/VueBpmn.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="">
+  <div class="bpmnclass">
     <ImportDialog :dialogVisibleBool="importXmlShow" @closeShowXmlDialog="closeShowXmlDialog"></ImportDialog>
     <el-row>
       <el-col :span="24">
@@ -28,25 +28,25 @@
 </template>
 
 <script>
-  import templateXml from "./data/template";
+import templateXml from "./data/template";
-  import ImportDialog from "./dialog/ImportDialog";
+import ImportDialog from "./dialog/ImportDialog";
-  // import activitiCom from "../provider/activiti";
+// import activitiCom from "../provider/activiti";
-  // import BpmnModeler2 from 'bpmn-js/lib/Modeler';
+// import BpmnModeler2 from 'bpmn-js/lib/Modeler';
-  import BpmnModeler from 'jeeplus-bpmn/lib/Modeler'
+import BpmnModeler from 'jeeplus-bpmn/lib/Modeler'
-  import customTranslate from "./data/translate/customTranslate";
+import customTranslate from "./data/translate/customTranslate";
-  import VueHeader from "./Header";
+import VueHeader from "./Header";
-  import BpmnPanel from "./panel/index";
+import BpmnPanel from "./panel/index";
-  import activitiModule from './data/activiti.json'
+import activitiModule from './data/activiti.json'
-  import flowableModule from './data/flowable.json'
+import flowableModule from './data/flowable.json'
-  import './assets/css/vue-bmpn.css'
+import './assets/css/vue-bmpn.css'
-  import './assets/css/font-awesome.min.css'
+import './assets/css/font-awesome.min.css'
 
-  import 'bpmn-js/dist/assets/diagram-js.css'
+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.css'
-  import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
-  import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
-  import './assets/css/vue-bmpn.css'
+
-  export default {
+export default {
     name: "VueBpmn",
     data() {
       return {

yudao-admin-ui/src/components/bpmn/assets/css/vue-bmpn.css

@@ -31,25 +31,25 @@
 .el-collapse-item__header{
     padding-left: 15px;
 }
-.djs-direct-editing-parent{
+.bpmnclass .djs-direct-editing-parent{
     /*display: none;*/
 }
-.bpmn-panel {
+.bpmnclass .bpmn-panel {
     /*width: 370px;*/
     border: 1px solid #eeeeee;
     padding: 0 5px;
 }
-.el-select--small{
+.bpmnclass .el-select--small{
     width: 100%;
 }
-.el-dialog > .el-dialog__header{
+.bpmnclass > .is-fullscreen > .el-dialog__header:first-of-type{
-    padding: 5px 20px  ;
+    padding: 0  ;
 }
-.el-dialog > .el-dialog__body{
+.bpmnclass .el-dialog > .el-dialog__body{
     padding: 0px;
-    margin: 0 20px;
+    margin: 0 ;
-    border: 1px solid #cccccc;
+    /*border: 1px solid #cccccc;*/
 }
-.default-undo{
+.bpmnclass .default-undo{
     color: #c0c4cc;
 }

yudao-admin-ui/src/components/bpmn/dialog/ImportDialog.vue

@@ -67,7 +67,5 @@ export default {
 </script>
 
 <style scoped>
-/deep/.el-dialog > .el-dialog__header{
+
-  padding: 24px 20px
-}
 </style>

yudao-admin-ui/src/components/bpmn/panel/NodePropertyPanel.vue

@@ -129,7 +129,8 @@
 <script>
 import EventListenerDialog from "./dialog/EventListenerDialog"
 import UserSelectDialog from "./dialog/UserSelectDialog"
-  export default {
+
+export default {
     name: "NodePropertyPanel",
     data() {
       return {
@@ -269,32 +270,32 @@ import UserSelectDialog from "./dialog/UserSelectDialog"
 </script>
 
 <style scoped>
-.title span{
+.bpmnclass .title span{
   font-weight: bold;
   margin-left: 5px;
 }
-/deep/.el-select .el-input .el-select__caret{
+.bpmnclass .el-select .el-input .el-select__caret{
   margin-top: 5px;
 }
-/deep/.el-input__icon{
+.bpmnclass .el-input__icon{
   height: 20px !important;
   line-height: 20px !important;
 }
-/deep/.el-input-group__append{
+.bpmnclass .el-input-group__append{
   padding: 0 5px !important;
 }
-.icon-div{
+.bpmnclass .icon-div{
   font-size: 1.2em;
   font-weight: bold !important;
   width: 100%;
 }
-.icon-div i{
+.bpmnclass .icon-div i{
   padding: 5px;
 }
-.icon-div i:hover{
+.bpmnclass .icon-div i:hover{
   cursor:pointer;
 }
-.ant-divider-vertical {
+.bpmnclass .ant-divider-vertical {
   position: relative;
   top: -0.08em;
   display: inline-block;
@@ -303,7 +304,7 @@ import UserSelectDialog from "./dialog/UserSelectDialog"
   /*margin: 0 8px;*/
   vertical-align: middle;
 }
-.ant-divider {
+.bpmnclass .ant-divider {
   box-sizing: border-box;
   margin: 0;
   padding: 0;

yudao-admin-ui/src/components/bpmn/panel/ProcessPropertyPanel.vue

@@ -95,9 +95,10 @@
 </template>
 
 <script>
-  import GlobalEventListenerDialog from "./dialog/GlobalEventListenerDialog"
+import GlobalEventListenerDialog from "./dialog/GlobalEventListenerDialog"
-  import EventListenerDialog from "./dialog/EventListenerDialog"
+import EventListenerDialog from "./dialog/EventListenerDialog"
-  export default {
+
+export default {
     name: "ProcessProperty",
     data() {
       return {
@@ -232,7 +233,7 @@
 </script>
 
 <style scoped>
-.title span{
+.bpmnclass .title span{
   font-weight: bold;
   margin-left: 5px;
 }

yudao-admin-ui/src/components/bpmn/panel/StartEventNodePropertyPanel.vue

@@ -67,8 +67,8 @@
 
 <script>
 import EventListenerDialog from "./dialog/EventListenerDialog"
-import GlobalEventListenerDialog from "./dialog/GlobalEventListenerDialog";
+
-  export default {
+export default {
     name: "NodePropertyPanel",
     data() {
       return {
@@ -233,7 +233,7 @@ import GlobalEventListenerDialog from "./dialog/GlobalEventListenerDialog";
 </script>
 
 <style scoped>
-.title span{
+.bpmnclass .title span{
   font-weight: bold;
   margin-left: 5px;
 }

yudao-admin-ui/src/components/bpmn/panel/dialog/EventListenerDialog.vue

@@ -115,7 +115,5 @@ export default {
 </script>
 
 <style scoped>
-/deep/.el-dialog > .el-dialog__header{
+
-  padding: 24px 20px
-}
 </style>

yudao-admin-ui/src/components/bpmn/panel/dialog/GlobalEventListenerDialog.vue

@@ -111,7 +111,5 @@ export default {
 </script>
 
 <style scoped>
-/deep/.el-dialog > .el-dialog__header{
+
-  padding: 24px 20px
-}
 </style>

yudao-admin-ui/src/components/bpmn/panel/dialog/UserSelectDialog.vue

@@ -167,7 +167,5 @@ export default {
 </script>
 
 <style scoped>
-/deep/.el-dialog > .el-dialog__header{
+
-  padding: 24px 20px
-}
 </style>

yudao-admin-ui/src/router/index.js

@@ -1,11 +1,9 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-
-Vue.use(Router)
-
 /* Layout */
 import Layout from '@/layout'
-import ParentView from '@/components/ParentView';
+
+Vue.use(Router)
 
 /**
  * Note: 路由配置项
@@ -98,19 +96,6 @@ export const constantRoutes = [
       }
     ]
   },
-  {
-    path: '/bpmn',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: 'model',
-        component: (resolve) => require(['@/views/bpm/model'], resolve),
-        name: 'model',
-        meta: { title: '工作流模型', icon: '' }
-      }
-    ]
-  },
   {
     path: '/job',
     component: Layout,

yudao-admin-ui/src/views/bpm/model/index.vue

@@ -50,14 +50,14 @@
 
     <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                 @pagination="getList"/>
-    <el-dialog :visible.sync="showBpmnBool" :before-close="close" :fullscreen="true">
+    <el-dialog class="bpmnclass dialogClass" :visible.sync="showBpmnBool" :before-close="close" :fullscreen="true">
       <vue-bpmn v-if="showBpmnBool" product="activiti" @processSave="processSave" :bpmnXml="bpmnXML" :bpmnData="bpmnData" @beforeClose="close"></vue-bpmn>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { page, exportBpmnXml, modelUpdate, modelSave, modelDelete, modelDeploy } from "@/api/bpm/model";
+import {exportBpmnXml, modelDelete, modelDeploy, modelSave, modelUpdate, page} from "@/api/bpm/model";
 import VueBpmn from "@/components/bpmn/VueBpmn";
 
 export default {
@@ -202,5 +202,8 @@ export default {
 .v-modal{
   z-index: 2000!important;
 }
+.dialogClass{
+  padding: 0  ;
+}
 </style>
 

yudao-admin-ui/src/views/bpm/processDefinition/index.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="模型名字" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入模型名字" clearable style="width: 240px;" size="small"
+                  @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          size="mini"
+          @click="openBpmn"
+          v-hasPermi="['infra:config:create']"
+        >新建流程</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="ID" align="center" prop="id" />
+      <el-table-column label="流程名字" align="center" prop="name" />
+<!--      <el-table-column label="创建时间" align="center" prop="createTime" >-->
+<!--        <template slot-scope="scope">-->
+<!--          <span>{{ parseTime(scope.row.createTime) }}</span>-->
+<!--        </template>-->
+<!--      </el-table-column>-->
+      <el-table-column label="操作" align="center" >
+        <template slot-scope="scope">
+<!--          <el-button size="mini" type="text" icon="el-icon-setting" @click="change(scope.row)">设计流程</el-button>-->
+<!--          <el-button size="mini" type="text" icon="el-icon-delete" @click="modelDelete(scope.row)">删除</el-button>-->
+<!--          <el-button size="mini" type="text" icon="el-icon-thumb" @click="modelDeploy(scope.row)">发布</el-button>-->
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+    <el-dialog :visible.sync="showBpmnBool" :before-close="close" :fullscreen="true">
+      <vue-bpmn v-if="showBpmnBool" product="activiti" @processSave="processSave" :bpmnXml="bpmnXML" :bpmnData="bpmnData" @beforeClose="close"></vue-bpmn>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {page} from "@/api/bpm/processDefinition";
+import VueBpmn from "@/components/bpmn/VueBpmn";
+
+export default {
+  name: "processDefinition",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      showBpmnBool: false,
+      // 总条数
+      total: 0,
+      // 表格数据
+      list: [],
+      bpmnXML: null,
+      bpmnData: {},
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10
+      }
+    };
+  },
+  components: {VueBpmn},
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询登录日志列表 */
+    getList() {
+      this.loading = true;
+      page(this.queryParams).then(response => {
+          this.list = response.data.list;
+          this.total = response.data.total;
+          this.loading = false;
+        }
+      );
+
+    },
+    // 登录状态字典翻译
+    statusFormat(row, column) {
+      return this.selectDictLabel(this.statusOptions, row.status);
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    processSave(data) {
+      const that = this;
+      // 如果存在id 说明是修改
+      if (data.id) {
+        let postData = JSON.parse(data.metaInfo)
+        postData.bpmnXml = data.bpmnXml
+        postData.id = data.id
+        postData.name = data.name
+        postData.key = data.key
+        postData.description = data.description
+        modelUpdate(postData).then(response => {
+          this.msgSuccess("保存成功");
+        })
+        this.showBpmnBool = false
+        this.getList();
+        return
+      }
+      modelSave(data).then(response => {
+        that.bpmnData.id = response.data
+        this.msgSuccess("保存成功");
+      })
+
+      this.showBpmnBool = false
+      this.getList();
+    },
+    openBpmn() {
+      this.bpmnData = {}
+      this.bpmnXML = ""
+      this.showBpmnBool = true
+    },
+    close() {
+      this.showBpmnBool = false
+      this.getList();
+    },
+    change(row) {
+      const that = this;
+      this.bpmnXML = ""
+      this.bpmnData = {}
+      exportBpmnXml({
+        modelId: row.id
+      }).then(response => {
+        that.bpmnXML = response
+        that.bpmnData = row
+        that.showBpmnBool = true
+      })
+    },
+    modelDelete(row) {
+      const that = this;
+      this.$confirm('是否删除该流程！！', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function() {
+        modelDelete({
+          modelId: row.id
+        }).then(response => {
+          that.getList();
+          that.msgSuccess("删除成功");
+        })
+      })
+    },
+    modelDeploy(row) {
+      const that = this;
+      this.$confirm('是否部署该流程！！', "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "success"
+      }).then(function() {
+        modelDeploy({
+          modelId: row.id
+        }).then(response => {
+          that.getList();
+          that.msgSuccess("部署成功");
+        })
+      })
+    }
+  }
+};
+</script>
+<style>
+.el-dialog > .el-dialog__body{
+  margin: 0;
+  border: 0;
+}
+.bpmn-viewer-header{
+  background: white;
+}
+.v-modal{
+  z-index: 2000!important;
+}
+</style>
+