完善 bpmnProcessDesigner 流程设计器的使用，基本可用了！

yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue

@@ -4,7 +4,7 @@
       <slot name="control-header"></slot>
       <template v-if="!$slots['control-header']">
         <el-button-group key="file-control">
-          <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-folder-opened" @click="$refs.refFile.click()">打开文件</el-button>
+          <el-button :size="headerButtonSize" icon="el-icon-folder-opened" @click="$refs.refFile.click()">打开文件</el-button>
           <el-tooltip effect="light">
             <div slot="content">
               <el-button :size="headerButtonSize" type="text" @click="downloadProcessAsXml()">下载为XML文件</el-button>
@@ -13,7 +13,7 @@
               <br />
               <el-button :size="headerButtonSize" type="text" @click="downloadProcessAsBpmn()">下载为BPMN文件</el-button>
             </div>
-            <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-download">下载文件</el-button>
+            <el-button :size="headerButtonSize" icon="el-icon-download">下载文件</el-button>
           </el-tooltip>
           <el-tooltip effect="light">
             <div slot="content">
@@ -21,10 +21,10 @@
               <br />
               <el-button :size="headerButtonSize" type="text" @click="previewProcessJson">预览JSON</el-button>
             </div>
-            <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-view">预览</el-button>
+            <el-button :size="headerButtonSize" icon="el-icon-view">预览</el-button>
           </el-tooltip>
           <el-tooltip v-if="simulation" effect="light" :content="this.simulationStatus ? '退出模拟' : '开启模拟'">
-            <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-cpu" @click="processSimulation">
+            <el-button :size="headerButtonSize" icon="el-icon-cpu" @click="processSimulation">
               模拟
             </el-button>
           </el-tooltip>
@@ -72,6 +72,7 @@
             <el-button :size="headerButtonSize" icon="el-icon-refresh" @click="processRestart" />
           </el-tooltip>
         </el-button-group>
+        <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-plus" @click="processSave">保存模型</el-button>
       </template>
       <!-- 用于打开本地文件-->
       <input type="file" id="files" ref="refFile" style="display: none" accept=".xml, .bpmn" @change="importLocalFile" />
@@ -111,8 +112,9 @@ export default {
   componentName: "MyProcessDesigner",
   props: {
     value: String, // xml 字符串
-    processId: String,
-    processName: String,
+    processId: String, // 流程 key 标识
+    processName: String, // 流程 name 名字
+    formId: Number, // 流程 form 表单编号
     translations: Object, // 自定义的翻译文件
     additionalModel: [Object, Array], // 自定义model
     moddleExtension: Object, // 自定义moddle
@@ -244,6 +246,11 @@ export default {
       this.bpmnModeler = null;
     });
   },
+  watch: {
+    value: function (newValue) { // 在 xmlString 发生变化时，重新创建，从而绘制流程图
+      this.createNewDiagram(newValue);
+    }
+  },
   methods: {
     initBpmnModeler() {
       if (this.bpmnModeler) return;
@@ -445,6 +452,17 @@ export default {
         this.previewType = "json";
         this.previewModelVisible = true;
       });
+    },
+    /* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
+    async processSave() {
+      const { err, xml } = await this.bpmnModeler.saveXML();
+      // 读取异常时抛出异常
+      if (err) {
+        this.msgError('保存模型失败，请重试！')
+        return
+      }
+      // 触发 save 事件
+      this.$emit('save', xml)
     }
   }
 };

yudao-admin-ui/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue

@@ -3,7 +3,8 @@
     <el-collapse v-model="activeTab">
       <el-collapse-item name="base">
         <div slot="title" class="panel-tab__title"><i class="el-icon-info"></i>常规</div>
-        <element-base-info :id-edit-disabled="idEditDisabled" :business-object="elementBusinessObject" :type="elementType" />
+        <element-base-info :id-edit-disabled="idEditDisabled" :business-object="elementBusinessObject" :type="elementType"
+                           :model="model" />
       </el-collapse-item>
       <el-collapse-item name="condition" v-if="elementType === 'Process'" key="message">
         <div slot="title" class="panel-tab__title"><i class="el-icon-s-comment"></i>消息与信号</div>
@@ -89,7 +90,8 @@ export default {
     idEditDisabled: {
       type: Boolean,
       default: false
-    }
+    },
+    model: Object, // 流程模型的数据
   },
   provide() {
     return {
@@ -159,6 +161,7 @@ export default {
     // 初始化数据
     initFormOnChanged(element) {
       let activatedElement = element;
+      // debugger
       if (!activatedElement) {
         activatedElement =
           window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Process") ??

yudao-admin-ui/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue

@@ -1,43 +1,53 @@
 <template>
   <div class="panel-tab__content">
-    <el-form size="mini" label-width="90px" @submit.native.prevent>
-      <el-form-item label="ID">
-        <el-input
-          v-model="elementBaseInfo.id"
-          :disabled="idEditDisabled || elementBaseInfo.$type === 'bpmn:Process'"
-          clearable
-          @change="updateBaseInfo('id')"
-        />
+    <el-form size="mini" label-width="90px" :model="model" :rules="rules" @submit.native.prevent>
+      <el-form-item label="流程标识" prop="key">
+        <el-input v-model="model.key" placeholder="请输入流标标识"
+                  :disabled="model.id !== undefined && model.id.length > 0"/>
       </el-form-item>
-      <el-form-item label="名称">
-        <el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
+      <el-form-item label="流程名称" prop="name">
+        <el-input v-model="model.name" placeholder="请输入流程名称" clearable />
+      </el-form-item>
+      <el-form-item label="流程分类" prop="category">
+        <el-select v-model="model.category" placeholder="请选择流程分类" clearable style="width: 100%">
+          <el-option v-for="dict in categoryDictDatas" :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="流程表单" prop="formId">
+        <el-select v-model="model.formId" placeholder="请选择流程表单，非必选哟！" clearable style="width: 100%">
+          <el-option v-for="form in forms" :key="form.id" :label="form.name" :value="form.id"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="流程描述" prop="description">
+        <el-input type="textarea" v-model="model.description" clearable />
       </el-form-item>
-      <!--流程的基础属性-->
-      <template v-if="elementBaseInfo.$type === 'bpmn:Process'">
-        <el-form-item label="版本标签">
-          <el-input v-model="elementBaseInfo.versionTag" clearable @change="updateBaseInfo('versionTag')" />
-        </el-form-item>
-        <el-form-item label="可执行">
-          <el-switch v-model="elementBaseInfo.isExecutable" active-text="是" inactive-text="否" @change="updateBaseInfo('isExecutable')" />
-        </el-form-item>
-      </template>
     </el-form>
   </div>
 </template>
 <script>
+import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+import {getSimpleForms} from "@/api/bpm/form";
+import {getModel} from "@/api/bpm/model";
+
 export default {
   name: "ElementBaseInfo",
   props: {
     businessObject: Object,
-    type: String,
-    idEditDisabled: {
-      type: Boolean,
-      default: true
-    }
+    model: Object, // 流程模型的数据
   },
   data() {
     return {
-      elementBaseInfo: {}
+      elementBaseInfo: {},
+      // 流程表单的下拉框的数据
+      forms: [],
+      // 流程模型的校验
+      rules: {
+        key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
+        name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
+        category: [{ required: true, message: "流程分类不能为空", trigger: "blur" }],
+      },
+      // 数据字典
+      categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
     };
   },
   watch: {
@@ -50,12 +60,19 @@ export default {
       }
     }
   },
+  created() {
+    // 获得流程表单的下拉框的数据
+    getSimpleForms().then(response => {
+      this.forms = response.data
+    })
+  },
   methods: {
     resetBaseInfo() {
       this.bpmnElement = window?.bpmnInstances?.bpmnElement;
       this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject));
     },
     updateBaseInfo(key) {
+      // 触发 elementBaseInfo 对应的字段
       const attrObj = Object.create(null);
       attrObj[key] = this.elementBaseInfo[key];
       if (key === "id") {