BPM 模型重构 4：修改模型，修改成单独的弹窗

yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/controller/model/vo/BpmModelBaseVO.java

@@ -27,7 +27,15 @@ public class BpmModelBaseVO {
     @NotEmpty(message = "流程分类不能为空")
     private String category;
 
-    @ApiModelProperty(value = "表单编号", example = "1024")
+    @ApiModelProperty(value = "表单类型", notes = "参见 bpm_model_form_type 数据字典", example = "1")
+    private Integer formType;
+    @ApiModelProperty(value = "表单编号", example = "1024", notes = "在表单类型为 {@link BpmModelFormTypeEnum#CUSTOM} 时，必须非空")
     private Long formId;
+    @ApiModelProperty(value = "自定义表单的提交路径，使用 Vue 的路由地址", example = "/bpm/oa/leave/create",
+            notes = "在表单类型为 {@link BpmModelFormTypeEnum#CUSTOM} 时，必须非空")
+    private String formCustomCreatePath;
+    @ApiModelProperty(value = "自定义表单的查看路径，使用 Vue 的路由地址", example = "/bpm/oa/leave/view",
+            notes = "在表单类型为 {@link BpmModelFormTypeEnum#CUSTOM} 时，必须非空")
+    private String formCustomViewPath;
 
 }

yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/convert/model/BpmModelConvert.java

@@ -12,6 +12,7 @@ import org.activiti.engine.repository.Deployment;
 import org.activiti.engine.repository.Model;
 import org.activiti.engine.repository.ProcessDefinition;
 import org.mapstruct.Mapper;
+import org.mapstruct.MappingTarget;
 import org.mapstruct.factory.Mappers;
 
 import java.util.List;
@@ -44,18 +45,15 @@ public interface BpmModelConvert {
     default BpmModelPageItemRespVO convert(Model model, BpmFormDO form, Deployment deployment, ProcessDefinition processDefinition) {
         BpmModelPageItemRespVO modelRespVO = new BpmModelPageItemRespVO();
         modelRespVO.setId(model.getId());
-        modelRespVO.setName(model.getName());
-        modelRespVO.setKey(model.getKey());
-        modelRespVO.setCategory(model.getCategory());
         modelRespVO.setCreateTime(model.getCreateTime());
-        BpmModelMetaInfoRespDTO metaInfo = JsonUtils.parseObject(model.getMetaInfo(), BpmModelMetaInfoRespDTO.class);
+        // 通用 copy
-        if (metaInfo != null) {
+        copyTo(model, modelRespVO);
-            modelRespVO.setDescription(metaInfo.getDescription());
+        // Form
-        }
         if (form != null) {
             modelRespVO.setFormId(form.getId());
             modelRespVO.setFormName(form.getName());
         }
+        // ProcessDefinition
         modelRespVO.setProcessDefinition(this.convert(processDefinition));
         if (modelRespVO.getProcessDefinition() != null) {
             modelRespVO.getProcessDefinition().setSuspensionState(processDefinition.isSuspended() ?
@@ -68,18 +66,23 @@ public interface BpmModelConvert {
     default BpmModelRespVO convert(Model model) {
         BpmModelRespVO modelRespVO = new BpmModelRespVO();
         modelRespVO.setId(model.getId());
-        modelRespVO.setName(model.getName());
-        modelRespVO.setKey(model.getKey());
-        modelRespVO.setCategory(model.getCategory());
         modelRespVO.setCreateTime(model.getCreateTime());
-        BpmModelMetaInfoRespDTO metaInfo = JsonUtils.parseObject(model.getMetaInfo(), BpmModelMetaInfoRespDTO.class);
+        // 通用 copy
-        if (metaInfo != null) {
+        copyTo(model, modelRespVO);
-            modelRespVO.setFormId(metaInfo.getFormId());
-            modelRespVO.setDescription(metaInfo.getDescription());
-        }
         return modelRespVO;
     }
 
+    default void copyTo(Model model, BpmModelBaseVO to) {
+        to.setName(model.getName());
+        to.setKey(model.getKey());
+        to.setCategory(model.getCategory());
+        // metaInfo
+        BpmModelMetaInfoRespDTO metaInfo = JsonUtils.parseObject(model.getMetaInfo(), BpmModelMetaInfoRespDTO.class);
+        copyTo(metaInfo, to);
+    }
+
+    void copyTo(BpmModelMetaInfoRespDTO from, @MappingTarget BpmModelBaseVO to);
+
     default BpmDefinitionCreateReqDTO convert2(Model model) {
         BpmDefinitionCreateReqDTO createReqDTO = new BpmDefinitionCreateReqDTO();
         createReqDTO.setModelId(model.getId());

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

@@ -169,7 +169,7 @@ export const constantRoutes = [
     hidden: true,
     children: [
       {
-        path: 'manager/model/edit',
+        path: 'manager/model/design',
         component: (resolve) => require(['@/views/bpm/model/modelEditor'], resolve),
         name: '设计流程',
         meta: { title: '设计流程' }

yudao-admin-ui/src/utils/dict.js

@@ -36,6 +36,7 @@ export const DICT_TYPE = {
 
   // bpm
   BPM_MODEL_CATEGORY: 'bpm_model_category',
+  BPM_MODEL_FORM_TYPE: 'bpm_model_form_type',
   BPM_PROCESS_INSTANCE_STATUS: 'bpm_process_instance_status',
   BPM_PROCESS_INSTANCE_RESULT: 'bpm_process_instance_result',
   OA_LEAVE_STATUS: 'flow_status',

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

@@ -26,11 +26,11 @@
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
-                   v-hasPermi="['bpm:model:create']">新建流程模型</el-button>
+                   v-hasPermi="['bpm:model:create']">新建流程</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport"
-                   v-hasPermi="['bpm:model:import']">导入流程模型</el-button>
+                   v-hasPermi="['bpm:model:import']">导入流程</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
@@ -82,9 +82,11 @@
           </template>
         </el-table-column>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="300">
+      <el-table-column label="操作" align="center" width="380" fixed="right">
         <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="el-icon-setting" @click="handleUpdate(scope.row)"
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['bpm:model:update']">修改流程</el-button>
+          <el-button size="mini" type="text" icon="el-icon-setting" @click="handleDesign(scope.row)"
                      v-hasPermi="['bpm:model:update']">设计流程</el-button>
           <el-button size="mini" type="text" icon="el-icon-thumb" @click="handleDeploy(scope.row)"
                      v-hasPermi="['bpm:model:deploy']">发布流程</el-button>
@@ -109,21 +111,50 @@
       <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
     </el-dialog>
 
-    <!-- 对话框(添加) -->
+    <!-- 对话框(添加 / 修改) -->
-    <el-dialog title="新建模型" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
         <el-form-item label="流程标识" prop="key">
-          <el-input v-model="form.key" placeholder="请输入流标标识" style="width: 350px;" />
+          <el-input v-model="form.key" placeholder="请输入流标标识" style="width: 330px;" :disabled="form.id" />
-          <el-tooltip class="item" effect="light" content="新建后，流程标识不可修改！" placement="top">
+          <el-tooltip v-if="!form.id" class="item" effect="light" content="新建后，流程标识不可修改！" placement="top">
+            <i style="padding-left: 5px;" class="el-icon-question" />
+          </el-tooltip>
+          <el-tooltip v-else class="item" effect="light" content="流程标识不可修改！" placement="top">
             <i style="padding-left: 5px;" class="el-icon-question" />
           </el-tooltip>
         </el-form-item>
         <el-form-item label="流程名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入流程名称" clearable />
+          <el-input v-model="form.name" placeholder="请输入流程名称" :disabled="form.id" clearable />
         </el-form-item>
         <el-form-item label="流程描述" prop="description">
           <el-input type="textarea" v-model="form.description" clearable />
         </el-form-item>
+        <div v-if="form.id">
+          <el-form-item label="表单类型" prop="formType">
+            <el-radio-group v-model="form.formType">
+              <el-radio v-for="dict in modelFormTypeDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
+                {{dict.label}}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="form.formType === 10" label="流程表单" prop="formId" required error="流程表单不能为空">
+            <el-select v-model="form.formId" 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 v-if="form.formType === 20" label="表单提交路由" prop="formCustomCreatePath" required error="表单提交路由不能为空">
+            <el-input v-model="form.formCustomCreatePath" placeholder="请输入表单提交路由" style="width: 330px;" />
+            <el-tooltip class="item" effect="light" content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create" placement="top">
+              <i style="padding-left: 5px;" class="el-icon-question" />
+            </el-tooltip>
+          </el-form-item>
+          <el-form-item v-if="form.formType === 20" label="表单查看路由" prop="formCustomViewPath" required error="表单查看路由不能为空">
+            <el-input v-model="form.formCustomViewPath" placeholder="请输入表单查看路由" style="width: 330px;" />
+            <el-tooltip class="item" effect="light" content="自定义表单的查看路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/view" placement="top">
+              <i style="padding-left: 5px;" class="el-icon-question" />
+            </el-tooltip>
+          </el-form-item>
+        </div>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -132,7 +163,7 @@
     </el-dialog>
 
     <!-- 用户导入对话框 -->
-    <el-dialog title="导入流程模型" :visible.sync="upload.open" width="400px" append-to-body>
+    <el-dialog title="导入流程" :visible.sync="upload.open" width="400px" append-to-body>
       <el-upload ref="upload" :limit="1" accept=".bpmn, .xml" :headers="upload.headers" :action="upload.url"
         :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
         :auto-upload="false" name="bpmnFile" :data="upload.form" drag>
@@ -168,7 +199,15 @@
 </template>
 
 <script>
-import {deleteModel, deployModel, getModelPage, getModel, updateModelState, createModel} from "@/api/bpm/model";
+import {
+  deleteModel,
+  deployModel,
+  getModelPage,
+  getModel,
+  updateModelState,
+  createModel,
+  updateModel
+} from "@/api/bpm/model";
 import {DICT_TYPE, getDictDatas} from "@/utils/dict";
 import {getForm, getSimpleForms} from "@/api/bpm/form";
 import {decodeFields} from "@/utils/formGenerator";
@@ -210,12 +249,14 @@ export default {
       },
 
       // 流程表单
+      title: "",
       open: false,
       form: {},
       // 表单校验
       rules: {
         key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
         name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
+        formType: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
       },
 
       // 流程导入参数
@@ -241,6 +282,7 @@ export default {
 
       // 数据字典
       categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
+      modelFormTypeDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_FORM_TYPE)
     };
   },
   created() {
@@ -269,9 +311,14 @@ export default {
     // 表单重置
     reset() {
       this.form = {
+        id: undefined,
         key: undefined,
         name: undefined,
-        description: undefined
+        description: undefined,
+        formType: undefined,
+        formId: undefined,
+        formCustomCreatePath: undefined,
+        formCustomViewPath: undefined
       };
       this.resetForm("form");
     },
@@ -289,12 +336,25 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
+      this.title = "新建模型";
       this.open = true;
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
+      this.reset();
+      this.title = "修改模型";
+      this.open = true;
+      // 设置 form
+      this.form = {
+        ...row
+      };
+      // 触发一次校验
+      this.$refs["form"].validate();
+    },
+    /** 设计按钮操作 */
+    handleDesign(row) {
       this.$router.push({
-        path:"/bpm/manager/model/edit",
+        path:"/bpm/manager/model/design",
         query:{
           modelId: row.id
         }
@@ -306,8 +366,23 @@ export default {
         if (!valid) {
           return;
         }
+        // 更新
+        if (this.form.id) {
+          updateModel({
+            ...this.form,
+            formId: this.form.formType === 10 ? this.form.formId : undefined,
+            formCustomCreatePath: this.form.formType === 20 ? this.form.formCustomCreatePath : undefined,
+            formCustomViewPath: this.form.formType === 20 ? this.form.formCustomViewPath : undefined,
+          }).then(response => {
+            this.msgSuccess("修改模型成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 创建
         createModel(this.form).then(response => {
-          this.msgSuccess("新建流程模型成功");
+          this.msgSuccess("新建流程成功");
           this.open = false;
           this.getList();
         });
@@ -404,7 +479,7 @@ export default {
       // 重置表单
       this.uploadClose();
       // 提示，并刷新
-      this.msgSuccess("导入流程模型成功！请点击【设计流程】按钮，进行编辑保存后，才可以进行【发布流程】");
+      this.msgSuccess("导入流程成功！请点击【设计流程】按钮，进行编辑保存后，才可以进行【发布流程】");
       this.getList();
     },
     uploadClose() {