初步完善模型发布流程

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

@@ -8,3 +8,41 @@ export function page(query) {
     params: query
   })
 }
+export function exportBpmnXml(query) {
+  return request({
+    url: '/workflow/models/exportBpmnXml',
+    method: 'get',
+    params: query
+  })
+}
+
+export function modelUpdate(data) {
+  return request({
+    url: '/workflow/models/update',
+    method: 'POST',
+    data: data
+  })
+}
+
+export function modelSave(data) {
+  return request({
+    url: '/workflow/models/create',
+    method: 'POST',
+    data: data
+  })
+}
+
+export function modelDelete(data) {
+  return request({
+    url: '/workflow/models/delete?modelId='+ data.modelId,
+    method: 'POST',
+    data: data
+  })
+}
+export function modelDeploy(data) {
+  return request({
+    url: '/workflow/models/deploy?modelId='+ data.modelId,
+    method: 'POST',
+    data: data
+  })
+}

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

@@ -2,10 +2,7 @@
   <div>
     <el-button-group>
       <el-tooltip class="item" effect="dark" content="保存并发布" placement="bottom">
-        <el-button type="primary" size="small" @click="deploy"><i class="fa fa-save"> 保存并发布</i></el-button>
-      </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="保存草稿" placement="bottom">
-        <el-button type="primary" size="small" @click="save"><i class="fa fa-save"> 保存草稿</i></el-button>
+        <el-button type="primary" size="small" @click="save"><i class="fa fa-save"> 保存</i></el-button>
       </el-tooltip>
       <el-tooltip class="item" effect="dark" content="打开流程文件" placement="bottom">
         <el-button type="primary" size="small"  @click="importXml"><i class="fa fa-folder-open"></i></el-button>
@@ -32,10 +29,13 @@
       <el-tooltip class="item" effect="dark" content="缩小" placement="bottom">
         <el-button size="small" @click="zoom(-0.05)"><i class="fa fa-search-minus"></i></el-button>
       </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="重置" placement="bottom">
+      <el-tooltip class="item" effect="dark" content="重置大小" placement="bottom">
         <el-button size="small" @click="zoom(0)"><i class="fa fa-arrows"></i></el-button>
       </el-tooltip>
     </el-button-group>
+
+    <div class="closeClass" @click="beforeClose()"><i class="el-icon-close"></i></div>
+
   </div>
 </template>
 
@@ -74,15 +74,15 @@
           }
           _svg = svg;
         })
-        that.post(this.Apis.deployProcess, {
-          processKey: "s1111",
-          processName: "阿达达",
-          resourceName: "test01",
-          xml: _xml,
-          svg: _svg
-        }, function (data) {
-          console.log(data)
-        });
+        // that.post(this.Apis.deployProcess, {
+        //   processKey: "s1111",
+        //   processName: "阿达达",
+        //   resourceName: "test01",
+        //   xml: _xml,
+        //   svg: _svg
+        // }, function (data) {
+        //   console.log(data)
+        // });
       },
       save(){
         let that = this;
@@ -129,11 +129,24 @@
         let newScale = !val ? 1.0 : ((this.scale + val) <= 0.2) ? 0.2 : (this.scale + val);
         this.modeler.get('canvas').zoom(newScale);
         this.scale = newScale;
+      },
+      beforeClose(val) {
+        this.$emit("beforeClose");
       }
     }
   }
 </script>
 
 <style scoped>
+.closeClass{
 
+  float: right;
+  width: 50px;
+  height: 50px;
+  font-size: 20px;
+}
+
+.closeClass:hover{
+  cursor:pointer;
+}
 </style>

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

@@ -4,7 +4,7 @@
     <el-row>
       <el-col :span="24">
         <vue-header class="bpmn-viewer-header" :processData="initData" :modeler="bpmnModeler" @restart="restart" @importXml="importXml"
-                    @handleExportSvg="handleExportSvg" @handleExportBpmn="handleExportBpmn" @processSave="processSave"></vue-header>
+                    @handleExportSvg="handleExportSvg" @handleExportBpmn="handleExportBpmn" @processSave="processSave" @beforeClose="beforeClose"></vue-header>
       </el-col>
     </el-row>
     <el-row style="margin-left: 1%">
@@ -61,6 +61,7 @@
     },
     props: {
       product: String,
+      bpmnData: Object,
       bpmnXml: {
         type: String,
         required: false
@@ -80,8 +81,13 @@
     mounted() {
       let processId = new Date().getTime();
       this.initTemplate = templateXml.initTemplate(processId)
-      this.initData = {key: "process" + processId, name: "流程" + processId, xml: this.initTemplate}
-      if (this.bpmnXml != null) {
+
+      this.initData = {
+        key: this.bpmnData.key ? this.bpmnData.key : "process" + processId,
+        name: this.bpmnData.name ? this.bpmnData.name : "流程" + processId,
+        description: this.bpmnData.metaInfo ? JSON.parse(this.bpmnData.metaInfo).description : "" ,
+        xml: this.initTemplate}
+      if (this.bpmnXml != null && this.bpmnXml !== "") {
         this.initTemplate = this.bpmnXml
       }
       this.init();
@@ -205,14 +211,21 @@
       },
       processSave(data){
         let initData = this.initData;
-        data.procId = initData.key;
-        data.name = initData.name;
-        this.$emit("processSave",data);
+        const dataXml = this.bpmnData
+        dataXml.bpmnXml = this.xmlShow;
+        dataXml.name = initData.name;
+        dataXml.key = initData.key;
+        dataXml.description = initData.description;
+        this.$emit("processSave",dataXml);
       },
       restart() {
         let processId = new Date().getTime();
         this.initTemplate = templateXml.initTemplate(processId)
-        this.initData = {key: "process" + processId, name: "流程" + processId, xml: this.initTemplate}
+        this.initData = {
+          key: this.bpmnData.key ? this.bpmnData.key : "process" + processId,
+          name: this.bpmnData.name ? this.bpmnData.name : "流程" + processId,
+          description: this.bpmnData.metaInfo ? JSON.parse(this.bpmnData.metaInfo).description : "" ,
+          xml: this.initTemplate}
         this.initDiagram(this.initTemplate)
       },
       importXml() {
@@ -244,6 +257,9 @@
           }
         }
         return moddleExtensions;
+      },
+      beforeClose() {
+        this.$emit("beforeClose");
       }
     }
   }

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

@@ -10,17 +10,18 @@
         <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="warning" icon="el-icon-download" size="mini" @click="handleExport"
-                   v-hasPermi="['system:login-log:export']">导出</el-button>
-        <el-button type="warning" icon="el-icon-download" size="mini" @click="openBpmn"
-                   v-hasPermi="['system:login-log:export']">新建</el-button>
+        <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="name" align="center" prop="metaInfo" >
@@ -33,18 +34,30 @@
           <span>{{ JSON.parse(scope.row.metaInfo).description }}</span>
         </template>
       </el-table-column>
+      <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 title="新建流程" :visible.sync="showBpmnBool" :before-close="close" :fullscreen="true">
-      <vue-bpmn product="activiti" @processSave="processSave"></vue-bpmn>
+    <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/model";
+import { page, exportBpmnXml, modelUpdate, modelSave, modelDelete, modelDeploy } from "@/api/bpm/model";
 import VueBpmn from "@/components/bpmn/VueBpmn";
 
 export default {
@@ -61,6 +74,7 @@ export default {
       // 表格数据
       list: [],
       bpmnXML: null,
+      bpmnData: {},
       // 查询参数
       queryParams: {
         pageNo: 1,
@@ -98,27 +112,81 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams;
-      this.$confirm('是否确认导出所有操作日志数据项?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-          return exportLoginLog(queryParams);
-        }).then(response => {
-          this.downloadExcel(response, '登录日志.xls');
+    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("保存成功");
         })
-    },
-    processSave() {
-      console.log("processSave")
+        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("部署成功");
+        })
+      })
     }
   }
 };