fix -- 修改流程定义新增和编辑操作，添加弹窗编辑流程基础信息。流程分类信息不写入xml文件中。

ruoyi-ui/src/components/ProcessDesigner/index.vue

@@ -6,8 +6,6 @@
       v-bind="controlForm"
       keyboard
       ref="processDesigner"
-      :processId="flowEntryInfo.processDefinitionKey"
-      :processName="flowEntryInfo.processDefinitionName"
       :events="[
         'element.click',
         'connection.added',
@@ -26,7 +24,7 @@
 <script>
 import Vue from 'vue';
 import '@/plugins/package/theme/index.scss';
-import { BpmnProcessDesigner, BmpnProcessPenal } from '@/plugins/package/index.js';
+import { BpmnProcessDesigner, BmpnProcessPenal } from '@/plugins/package/index';
 // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
 import CustomContentPadProvider from '@/plugins/package/designer/plugins/content-pad';
 // 自定义左侧菜单（修改 默认任务 为 用户任务）
@@ -38,7 +36,11 @@ Vue.use(vuePlugin);
 export default {
   name: 'ProcessDesigner',
   props: {
-    flowEntryInfo: {
+    bpmnXml: {
+      type: String,
+      required: true
+    },
+    designerForm: {
       type: Object,
       required: true
     }
@@ -51,11 +53,11 @@ export default {
     return {
       height: document.documentElement.clientHeight - 94.5 + "px;",
       reloadIndex: 0,
-      xmlString: this.flowEntryInfo.bpmnXml,
+      xmlString: this.bpmnXml,
       modeler: null,
       controlForm: {
-        processId: '',
+        processId: this.designerForm.processId || '',
-        processName: '',
+        processName: this.designerForm.processName || '',
         simulation: false,
         labelEditing: false,
         labelVisible: false,
@@ -77,8 +79,7 @@ export default {
     handlerEvent (eventName, element) {
     },
     onSaveProcess (saveData) {
-      let modeler = this.modeler;
+      this.$emit('save', saveData);
-      this.$emit('save', { saveData, modeler });
     }
   }
 }

ruoyi-ui/src/plugins/package/penal/base/ElementBaseInfo.vue

@@ -14,11 +14,6 @@
       </el-form-item>
       <!--流程的基础属性-->
       <template v-if="elementBaseInfo.$type === 'bpmn:Process'">
-        <el-form-item label="流程分类">
-          <el-select v-model="elementBaseInfo.processCategory" placeholder="请选择" clearable @change="updateBaseInfo('processCategory')">
-            <el-option v-for="item in categoryOptions" :key="item.categoryId" :label="item.categoryName" :value="item.code" />
-          </el-select>
-        </el-form-item>
         <el-form-item label="版本标签">
           <el-input v-model="elementBaseInfo.versionTag" clearable @change="updateBaseInfo('versionTag')" />
         </el-form-item>
@@ -30,7 +25,6 @@
   </div>
 </template>
 <script>
-import { listCategory } from "@/api/workflow/category";
 
 export default {
   name: "ElementBaseInfo",
@@ -45,7 +39,6 @@ export default {
   data() {
     return {
       elementBaseInfo: {},
-      categoryOptions: []
     };
   },
   watch: {
@@ -58,11 +51,6 @@ export default {
       }
     }
   },
-  created() {
-    listCategory().then(response => {
-      this.categoryOptions = response.rows
-    })
-  },
   methods: {
     resetBaseInfo() {
       this.bpmnElement = window?.bpmnInstances?.bpmnElement;

ruoyi-ui/src/views/workflow/definition/designer.vue

@@ -3,7 +3,8 @@
     <process-designer
       v-loading="loading"
       :key="`designer-${loadIndex}`"
-      :flowEntryInfo="formFlowEntryData"
+      :bpmnXml="bpmnXml"
+      :designerForm="designerForm"
       @save="onSaveFlowEntry"
     />
   </div>
@@ -20,59 +21,42 @@ export default {
     return {
       loadIndex: 0,
       loading: false,
-      formFlowEntryData: {
+      bpmnXml: '',
-        entryId: undefined,
+      designerForm: {
-        processDefinitionName: undefined,
+        definitionId: undefined,
-        processDefinitionKey: undefined,
+        processId: undefined,
-        categoryId: undefined,
+        processName: undefined,
-        bindFormType: [
+        category: undefined
-          {
-            id: 0,
-            name: '动态表单',
-            symbol: 'ONLINE_FORM'
-          },
-          {
-            id: 1,
-            name: '路由表单',
-            symbol: 'ROUTER_FORM'
       }
-        ],
-        pageId: undefined,
-        defaultFormId: undefined,
-        defaultRouterName: undefined,
-        bpmnXml: undefined
-      },
     }
   },
   created() {
-    const definitionId = this.$route.query && this.$route.query.definitionId;
+    const query = this.$route.query
+    if (query) {
+      this.designerForm = query;
       //  查询流程xml
-    if (definitionId) {
+      if (query.definitionId) {
-      this.getModelDetail(definitionId);
+        this.getModelDetail(query.definitionId);
+      }
     }
-    this.getDicts("sys_process_category").then(res => {
-      this.categorys = res.data;
-    });
   },
   methods: {
     /** xml 文件 */
     getModelDetail(definitionId) {
       this.loading = true;
       // 发送请求，获取xml
-      readXml(definitionId).then(res =>{
+      readXml(definitionId).then(res => {
-        this.formFlowEntryData.bpmnXml = res.data;
+        this.bpmnXml = res.data;
         this.loadIndex = definitionId;
         this.loading = false;
       })
     },
-    onSaveFlowEntry ({ saveData, modeler }) {
+    onSaveFlowEntry (saveData) {
-      this.formFlowEntryData.bpmnXml = saveData;
+      this.bpmnXml = saveData;
-      // TODO 2022/01/05 改进获取流程名称的方式
-      const process = modeler.get('elementRegistry').find(el => el.type === 'bpmn:Process');
       saveXml({
-        name: process.businessObject.name,
+        name: this.designerForm.processName,
-        category: process.businessObject.processCategory,
+        category: this.designerForm.category,
-        xml: this.formFlowEntryData.bpmnXml
+        xml: this.bpmnXml
       }).then(res => {
         this.$message(res.msg)
         // 关闭当前标签页并返回上个页面

ruoyi-ui/src/views/workflow/definition/index.vue

@@ -40,7 +40,7 @@
           plain
           icon="el-icon-plus"
           size="mini"
-          @click="handleLoadXml"
+          @click="handleAdd"
         >新增</el-button>
       </el-col>
       <el-col :span="1.5">
@@ -77,7 +77,11 @@
           </el-button>
         </template>
       </el-table-column>
-      <el-table-column label="流程分类" align="center" prop="categoryCode" />
+      <el-table-column label="流程分类" align="center" prop="categoryName">
+        <template slot-scope="scope">
+          <span>{{ categoryOptions.find(k => k.code === scope.row.categoryCode).categoryName }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="业务表单" align="center" :show-overflow-tooltip="true">
         <template slot-scope="scope">
           <el-button v-if="scope.row.formId" type="text" @click="handleForm(scope.row.formId)">
@@ -104,7 +108,7 @@
             type="text"
             size="mini"
             icon="el-icon-edit"
-            @click="handleLoadXml(scope.row)"
+            @click="handleUpdate(scope.row)"
           >编辑</el-button>
           <el-button
             type="text"
@@ -181,6 +185,27 @@
        <process-viewer :xml="processView.xmlData" :style="{height: '400px'}" />
     </el-dialog>
 
+    <!--  编辑流程  -->
+    <el-dialog :title="process.title" :visible.sync="process.open" width="500px" append-to-body>
+      <el-form :model="process.form" size="mini" label-width="80px">
+        <el-form-item label="流程标识">
+          <el-input v-model="process.form.processKey" clearable disabled />
+        </el-form-item>
+        <el-form-item label="流程名称">
+          <el-input v-model="process.form.processName" clearable />
+        </el-form-item>
+        <el-form-item label="流程分类">
+          <el-select v-model="process.form.categoryCode" placeholder="请选择" clearable style="width:100%">
+            <el-option v-for="item in categoryOptions" :key="item.categoryId" :label="item.categoryName" :value="item.code" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handleLoadXml(process.form)">确 定</el-button>
+        <el-button @click="process.open = false">取 消</el-button>
+      </div>
+    </el-dialog>
+
     <!-- 版本管理 -->
     <el-dialog title="版本管理" :visible.sync="publish.open" width="50%" append-to-body>
       <el-table v-loading="publish.loading" :data="publish.dataList" @selection-change="handleSelectionChange">
@@ -288,10 +313,11 @@
 
 <script>
 import { listDefinition, publishList, updateState, delDeployment, exportDeployment, definitionStart, readXml} from "@/api/workflow/definition";
-import { getToken } from "@/utils/auth";
 import { getForm, addDeployForm ,listForm } from "@/api/workflow/form";
+import { listCategory } from '@/api/workflow/category'
 import Parser from '@/utils/generator/parser'
 import ProcessViewer from '@/components/ProcessViewer'
+import { getToken } from "@/utils/auth";
 
 export default {
   name: "Definition",
@@ -315,6 +341,12 @@ export default {
       total: 0,
       // 流程定义表格数据
       definitionList: [],
+      categoryOptions: [],
+      process: {
+        title: '',
+        open: false,
+        form: {}
+      },
       publish: {
         open: false,
         loading: false,
@@ -385,6 +417,9 @@ export default {
     };
   },
   created() {
+    listCategory().then(response => {
+      this.categoryOptions = response.rows
+    })
     this.getList();
   },
   methods: {
@@ -438,10 +473,16 @@ export default {
       this.multiple = !selection.length
     },
     /** 跳转到流程设计页面 */
-    handleLoadXml(row){
+    handleLoadXml(row) {
+      this.process.open = false;
       this.$router.push({
         path: '/definition/designer/index',
-        query: { definitionId: row.definitionId }
+        query: {
+          definitionId: row.definitionId,
+          processId: row.processKey,
+          processName: row.processName,
+          category: row.categoryCode
+        }
       })
     },
     handlePublish(row) {
@@ -525,15 +566,20 @@ export default {
         this.getPublishList();
       });
     },
+    handleAdd() {
+      const dateTime = new Date().getTime();
+      this.process.title = '新增流程';
+      this.process.form = {
+        processKey: `Process_${dateTime}`,
+        processName: `业务流程_${dateTime}`
+      };
+      this.process.open = true;
+    },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
+      this.process.title = '编辑流程';
-      const id = row.id || this.ids
+      this.process.form = JSON.parse(JSON.stringify(row));
-      getDeployment(id).then(response => {
+      this.process.open = true;
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改流程定义";
-      });
     },
     /** 删除按钮操作 */
     handleDelete(row) {