fix(流程模型和部署): 修改流程模型设计方案，模型信息和流程图分开操作，表单在开始节点设置。

ruoyi-admin/src/main/java/com/ruoyi/web/controller/workflow/WfModelController.java

@@ -7,6 +7,8 @@ import com.ruoyi.common.core.controller.BaseController;
 import com.ruoyi.common.core.domain.PageQuery;
 import com.ruoyi.common.core.domain.R;
 import com.ruoyi.common.core.page.TableDataInfo;
+import com.ruoyi.common.core.validate.AddGroup;
+import com.ruoyi.common.core.validate.EditGroup;
 import com.ruoyi.common.enums.BusinessType;
 import com.ruoyi.workflow.domain.bo.WfModelBo;
 import com.ruoyi.workflow.domain.vo.WfModelVo;
@@ -16,6 +18,7 @@ import io.swagger.annotations.ApiOperation;
 import io.swagger.annotations.ApiParam;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
+import org.springframework.validation.annotation.Validated;
 import org.springframework.web.bind.annotation.*;
 
 import javax.validation.constraints.NotEmpty;
@@ -62,12 +65,37 @@ public class WfModelController extends BaseController {
     /**
      * 获取流程表单详细信息
      */
+    @ApiOperation("查询流程表单详细信息")
     @SaCheckPermission("workflow:model:query")
     @GetMapping(value = "/bpmnXml/{modelId}")
     public R<String> getBpmnXml(@ApiParam("主键") @NotNull(message = "主键不能为空") @PathVariable("modelId") String modelId) {
         return R.ok("操作成功", modelService.queryBpmnXmlById(modelId));
     }
 
+    /**
+     * 新增流程模型
+     */
+    @ApiOperation("新增流程模型")
+    @SaCheckPermission("workflow:model:add")
+    @Log(title = "流程模型", businessType = BusinessType.INSERT)
+    @PostMapping
+    public R<Void> add(@Validated(AddGroup.class) @RequestBody WfModelBo modelBo) {
+        modelService.insertModel(modelBo);
+        return R.ok();
+    }
+
+    /**
+     * 修改流程模型
+     */
+    @ApiOperation("修改流程模型")
+    @SaCheckPermission("workflow:model:edit")
+    @Log(title = "流程模型", businessType = BusinessType.UPDATE)
+    @PutMapping
+    public R<Void> edit(@Validated(EditGroup.class) @RequestBody WfModelBo modelBo) {
+        modelService.updateModel(modelBo);
+        return R.ok();
+    }
+
     /**
      * 保存流程模型
      */
@@ -75,7 +103,7 @@ public class WfModelController extends BaseController {
     @SaCheckPermission("workflow:model:save")
     @Log(title = "保存流程模型", businessType = BusinessType.INSERT)
     @RepeatSubmit()
-    @PostMapping()
+    @PostMapping("/save")
     public R<String> save(@RequestBody WfModelBo modelBo) {
         modelService.saveModel(modelBo);
         return R.ok();

ruoyi-admin/src/main/java/com/ruoyi/web/controller/workflow/WfProcessController.java

@@ -5,6 +5,7 @@ import com.ruoyi.common.core.controller.BaseController;
 import com.ruoyi.common.core.domain.PageQuery;
 import com.ruoyi.common.core.domain.R;
 import com.ruoyi.common.core.page.TableDataInfo;
+import com.ruoyi.common.utils.JsonUtils;
 import com.ruoyi.workflow.domain.bo.WfCopyBo;
 import com.ruoyi.workflow.domain.bo.WfProcessBo;
 import com.ruoyi.workflow.domain.vo.WfCopyVo;
@@ -44,6 +45,15 @@ public class WfProcessController extends BaseController {
         return processService.processList(pageQuery);
     }
 
+    @GetMapping("/getProcessForm")
+    @SaCheckPermission("workflow:process:start")
+    @ApiOperation(value = "查询流程部署关联表单信息")
+    public R<?> getForm(@ApiParam(value = "流程定义id") @RequestParam(value = "definitionId") String definitionId,
+                      @ApiParam(value = "流程部署id") @RequestParam(value = "deployId") String deployId) {
+        String formContent = processService.selectFormContent(definitionId, deployId);
+        return R.ok(JsonUtils.parseObject(formContent, Map.class));
+    }
+
     @ApiOperation(value = "根据流程定义id启动流程实例")
     @SaCheckPermission("workflow:process:start")
     @PostMapping("/start/{processDefId}")

ruoyi-flowable/src/main/java/com/ruoyi/flowable/utils/ModelUtils.java

@@ -27,6 +27,16 @@ public class ModelUtils {
         return bpmnXMLConverter.convertToBpmnModel(new StringStreamSource(xml), false, false);
     }
 
+    /**
+     * bpmnModel转xml对象
+     *
+     * @param bpmnModel bpmnModel对象
+     * @return xml
+     */
+    public static byte[] getBpmnXml(BpmnModel bpmnModel) {
+        return bpmnXMLConverter.convertToXML(bpmnModel);
+    }
+
     /**
      * 获取开始节点
      *

ruoyi-system/src/main/java/com/ruoyi/workflow/domain/WfDeployForm.java

@@ -16,6 +16,11 @@ import lombok.Data;
 public class WfDeployForm {
     private static final long serialVersionUID = 1L;
 
+    /**
+     * 表单主键
+     */
+    private String formKey;
+
     /**
      * 流程定义主键
      */

ruoyi-system/src/main/java/com/ruoyi/workflow/domain/bo/WfModelBo.java

@@ -1,5 +1,7 @@
 package com.ruoyi.workflow.domain.bo;
 
+import com.ruoyi.common.core.validate.AddGroup;
+import com.ruoyi.common.core.validate.EditGroup;
 import io.swagger.annotations.ApiModel;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
@@ -16,33 +18,31 @@ import javax.validation.constraints.NotNull;
 public class WfModelBo {
 
     @ApiModelProperty(value = "模型主键")
+    @NotNull(message = "模型主键不能为空", groups = { EditGroup.class })
     private String modelId;
 
     @ApiModelProperty(value = "模型名称", required = true)
-    @NotNull(message = "模型名称不能为空")
+    @NotNull(message = "模型名称不能为空", groups = { AddGroup.class, EditGroup.class })
     private String modelName;
 
     @ApiModelProperty(value = "模型Key", required = true)
-    @NotNull(message = "模型Key不能为空")
+    @NotNull(message = "模型Key不能为空", groups = { AddGroup.class, EditGroup.class })
     private String modelKey;
 
     @ApiModelProperty(value = "流程分类", required = true)
-    @NotBlank(message = "流程分类不能为空")
+    @NotBlank(message = "流程分类不能为空", groups = { AddGroup.class, EditGroup.class })
     private String category;
 
     @ApiModelProperty(value = "描述")
     private String description;
 
     @ApiModelProperty(value = "表单类型", required = true)
-    @NotBlank(message = "表单类型不能为空")
     private Integer formType;
 
     @ApiModelProperty(value = "表单主键", required = true)
-    @NotBlank(message = "表单不能为空")
     private Long formId;
 
     @ApiModelProperty(value = "流程xml", required = true)
-    @NotBlank(message = "流程xml不能为空")
     private String bpmnXml;
 
     @ApiModelProperty(value = "是否保存为新版本", required = true)

ruoyi-system/src/main/java/com/ruoyi/workflow/domain/dto/WfMetaInfoDto.java

@@ -9,6 +9,11 @@ import lombok.Data;
 @Data
 public class WfMetaInfoDto {
 
+    /**
+     * 创建者（username）
+     */
+    private String createUser;
+
     /**
      * 流程描述
      */

ruoyi-system/src/main/java/com/ruoyi/workflow/service/IWfDeployFormService.java

@@ -22,10 +22,10 @@ public interface IWfDeployFormService {
     /**
      * 保存流程实例关联表单
      * @param deployId
-     * @param formId
+     * @param formKey
      * @return
      */
-    int saveInternalDeployForm(String deployId, Long formId);
+    int saveInternalDeployForm(String deployId, String formKey);
 
     /**
      * 查询流程挂着的表单

ruoyi-system/src/main/java/com/ruoyi/workflow/service/IWfModelService.java

@@ -13,19 +13,53 @@ import java.util.Collection;
  */
 public interface IWfModelService {
 
+    /**
+     * 查询流程模型列表
+     */
     TableDataInfo<WfModelVo> list(WfModelBo modelBo, PageQuery pageQuery);
 
+    /**
+     * 查询流程模型列表
+     */
     TableDataInfo<WfModelVo> historyList(WfModelBo modelBo, PageQuery pageQuery);
 
+    /**
+     * 查询流程模型详情信息
+     */
     WfModelVo getModel(String modelId);
 
+    /**
+     * 查询流程表单详细信息
+     */
     String queryBpmnXmlById(String modelId);
 
+    /**
+     * 新增模型信息
+     */
+    void insertModel(WfModelBo modelBo);
+
+    /**
+     * 修改模型信息
+     */
+    void updateModel(WfModelBo modelBo);
+
+    /**
+     * 保存流程模型信息
+     */
     void saveModel(WfModelBo modelBo);
 
+    /**
+     * 设为最新流程模型
+     */
     void latestModel(String modelId);
 
+    /**
+     * 删除流程模型
+     */
     void deleteByIds(Collection<String> ids);
 
+    /**
+     * 部署流程模型
+     */
     void deployModel(String modelId);
 }

ruoyi-system/src/main/java/com/ruoyi/workflow/service/IWfProcessService.java

@@ -21,6 +21,13 @@ public interface IWfProcessService {
      */
     TableDataInfo<WfDefinitionVo> processList(PageQuery pageQuery);
 
+    /**
+     * 查询流程部署关联表单信息
+     * @param definitionId 流程定义ID
+     * @param deployId 部署ID
+     */
+    String selectFormContent(String definitionId, String deployId);
+
     /**
      * 启动流程实例
      * @param procDefId 流程定义ID

ruoyi-system/src/main/java/com/ruoyi/workflow/service/impl/WfDeployFormServiceImpl.java

@@ -1,10 +1,12 @@
 package com.ruoyi.workflow.service.impl;
 
+import cn.hutool.core.convert.Convert;
 import cn.hutool.core.util.ObjectUtil;
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.toolkit.Wrappers;
 import com.ruoyi.common.exception.ServiceException;
+import com.ruoyi.common.utils.StringUtils;
 import com.ruoyi.workflow.domain.WfDeployForm;
 import com.ruoyi.workflow.domain.WfForm;
 import com.ruoyi.workflow.domain.vo.WfFormVo;
@@ -48,10 +50,11 @@ public class WfDeployFormServiceImpl implements IWfDeployFormService {
 
     @Override
     @Transactional(rollbackFor = Exception.class)
-    public int saveInternalDeployForm(String deployId, Long formId) {
+    public int saveInternalDeployForm(String deployId, String formKey) {
         WfDeployForm deployForm = new WfDeployForm();
         deployForm.setDeployId(deployId);
-        deployForm.setFormId(formId);
+        deployForm.setFormKey(formKey);
+        Long formId = Convert.toLong(StringUtils.substringAfter(formKey, "key_"));
         WfForm wfForm = formMapper.selectById(formId);
         if (ObjectUtil.isNotNull(wfForm)) {
             deployForm.setContent(wfForm.getContent());

ruoyi-system/src/main/java/com/ruoyi/workflow/service/impl/WfModelServiceImpl.java

@@ -5,6 +5,7 @@ import cn.hutool.core.util.StrUtil;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.ruoyi.common.core.domain.PageQuery;
 import com.ruoyi.common.core.page.TableDataInfo;
+import com.ruoyi.common.helper.LoginHelper;
 import com.ruoyi.common.utils.JsonUtils;
 import com.ruoyi.common.utils.StringUtils;
 import com.ruoyi.flowable.common.constant.ProcessConstants;
@@ -21,6 +22,7 @@ import com.ruoyi.workflow.service.IWfModelService;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.flowable.bpmn.model.BpmnModel;
+import org.flowable.bpmn.model.StartEvent;
 import org.flowable.engine.repository.Deployment;
 import org.flowable.engine.repository.Model;
 import org.flowable.engine.repository.ModelQuery;
@@ -156,36 +158,75 @@ public class WfModelServiceImpl extends FlowServiceFactory implements IWfModelSe
     @Override
     public String queryBpmnXmlById(String modelId) {
         byte[] bpmnBytes = repositoryService.getModelEditorSource(modelId);
-        if (ObjectUtil.isNull(bpmnBytes)) {
-            throw new RuntimeException("流程图不存在！");
-        }
         return StrUtil.utf8Str(bpmnBytes);
     }
 
+    @Override
+    public void insertModel(WfModelBo modelBo) {
+        Model model = repositoryService.newModel();
+        model.setName(modelBo.getModelName());
+        model.setKey(modelBo.getModelKey());
+        model.setCategory(modelBo.getCategory());
+        String metaInfo = buildMetaInfo(new WfMetaInfoDto(), modelBo.getDescription());
+        model.setMetaInfo(metaInfo);
+        // 保存流程模型
+        repositoryService.saveModel(model);
+    }
+
+    @Override
+    public void updateModel(WfModelBo modelBo) {
+        // 根据模型Key查询模型信息
+        Model model = repositoryService.getModel(modelBo.getModelId());
+        if (ObjectUtil.isNull(model)) {
+            throw new RuntimeException("流程模型不存在！");
+        }
+        model.setCategory(modelBo.getCategory());
+        WfMetaInfoDto metaInfoDto = JsonUtils.parseObject(model.getMetaInfo(), WfMetaInfoDto.class);
+        String metaInfo = buildMetaInfo(metaInfoDto, modelBo.getDescription());
+        model.setMetaInfo(metaInfo);
+        // 保存流程模型
+        repositoryService.saveModel(model);
+    }
+
     @Override
     @Transactional(rollbackFor = Exception.class)
     public void saveModel(WfModelBo modelBo) {
-        // 根据模型Key查询模型信息
+        // 查询模型信息
-        Model model = repositoryService.createModelQuery().modelKey(modelBo.getModelKey()).singleResult();
+        Model model = repositoryService.getModel(modelBo.getModelId());
-        Model newModel;
         if (ObjectUtil.isNull(model)) {
-            newModel = repositoryService.newModel();
+            throw new RuntimeException("流程模型不存在！");
-        } else {
+        }
-            if (modelBo.getNewVersion() != null && modelBo.getNewVersion()) {
+        BpmnModel bpmnModel = ModelUtils.getBpmnModel(modelBo.getBpmnXml());
-                newModel = repositoryService.newModel();
+        if (ObjectUtil.isEmpty(bpmnModel)) {
-                newModel.setVersion(model.getVersion() + 1);
+            throw new RuntimeException("获取模型设计失败！");
-            } else {
+        }
-                newModel = model;
+        String processName = bpmnModel.getMainProcess().getName();
-            }
+        // 获取开始节点
+        StartEvent startEvent = ModelUtils.getStartEvent(bpmnModel);
+        if (ObjectUtil.isNull(startEvent)) {
+            throw new RuntimeException("开始节点不存在，请检查流程设计是否有误！");
+        }
+        // 获取开始节点配置的表单Key
+        if (StrUtil.isBlank(startEvent.getFormKey())) {
+            throw new RuntimeException("请配置流程表单");
+        }
+        Model newModel;
+        if (Boolean.TRUE.equals(modelBo.getNewVersion())) {
+            newModel = repositoryService.newModel();
+            newModel.setName(processName);
+            newModel.setKey(model.getKey());
+            newModel.setCategory(model.getCategory());
+            newModel.setMetaInfo(model.getMetaInfo());
+            newModel.setVersion(model.getVersion() + 1);
+        } else {
+            newModel = model;
+            // 设置流程名称
+            newModel.setName(processName);
         }
-        newModel.setName(modelBo.getModelName());
-        newModel.setKey(modelBo.getModelKey());
-        newModel.setCategory(modelBo.getCategory());
-        newModel.setMetaInfo(buildMetaInfo(modelBo));
         // 保存流程模型
         repositoryService.saveModel(newModel);
         // 保存 BPMN XML
-        saveModelBpmnXml(newModel.getId(), modelBo.getBpmnXml());
+        repositoryService.addModelEditorSource(newModel.getId(), ModelUtils.getBpmnXml(bpmnModel));
     }
 
     @Override
@@ -214,7 +255,7 @@ public class WfModelServiceImpl extends FlowServiceFactory implements IWfModelSe
         // 保存流程模型
         repositoryService.saveModel(newModel);
         // 保存 BPMN XML
-        saveModelBpmnXml(newModel.getId(), bpmnXml);
+        repositoryService.addModelEditorSource(newModel.getId(), StrUtil.utf8Bytes(bpmnXml));
     }
 
     @Override
@@ -237,10 +278,18 @@ public class WfModelServiceImpl extends FlowServiceFactory implements IWfModelSe
         if (ObjectUtil.isNull(model)) {
             throw new RuntimeException("流程模型不存在！");
         }
-        WfMetaInfoDto metaInfo = getMetaInfo(model.getMetaInfo());
         // 获取流程图
         String bpmnXml = queryBpmnXmlById(modelId);
         BpmnModel bpmnModel = ModelUtils.getBpmnModel(bpmnXml);
+        // 获取开始节点
+        StartEvent startEvent = ModelUtils.getStartEvent(bpmnModel);
+        if (ObjectUtil.isNull(startEvent)) {
+            throw new RuntimeException("开始节点不存在，请检查流程设计是否有误！");
+        }
+        String formKey = startEvent.getFormKey();
+        if (StringUtils.isEmpty(formKey)) {
+            throw new RuntimeException("请配置流程表单");
+        }
         String processName = model.getName() + ProcessConstants.SUFFIX;
         Deployment deployment = repositoryService.createDeployment()
             .name(model.getName())
@@ -249,38 +298,22 @@ public class WfModelServiceImpl extends FlowServiceFactory implements IWfModelSe
             .category(model.getCategory())
             .deploy();
         // 保存部署表单
-        if (FormType.PROCESS.getType().equals(metaInfo.getFormType())) {
+        deployFormService.saveInternalDeployForm(deployment.getId(), formKey);
-            deployFormService.saveInternalDeployForm(deployment.getId(), metaInfo.getFormId());
+
-        }
     }
 
-    private String buildMetaInfo(WfModelBo modelBo) {
+    /**
-        WfMetaInfoDto metaInfo = new WfMetaInfoDto();
+     * 构建模型扩展信息
+     * @return
+     */
+    private String buildMetaInfo(WfMetaInfoDto metaInfo, String description) {
         // 只有非空，才进行设置，避免更新时的覆盖
-        if (StringUtils.isNotEmpty(modelBo.getDescription())) {
+        if (StringUtils.isNotEmpty(description)) {
-            metaInfo.setDescription(modelBo.getDescription());
+            metaInfo.setDescription(description);
         }
-        if (ObjectUtil.isNotNull(modelBo.getFormType())) {
+        if (StringUtils.isNotEmpty(metaInfo.getCreateUser())) {
-            metaInfo.setFormType(modelBo.getFormType());
+            metaInfo.setCreateUser(LoginHelper.getUsername());
-            metaInfo.setFormId(modelBo.getFormId());
         }
         return JsonUtils.toJsonString(metaInfo);
     }
-
-    private WfMetaInfoDto getMetaInfo(String metaInfoJson) {
-        WfMetaInfoDto metaInfo = JsonUtils.parseObject(metaInfoJson, WfMetaInfoDto.class);
-        if (ObjectUtil.isNull(metaInfo) || ObjectUtil.hasNull(metaInfo.getFormType(), metaInfo.getFormId())) {
-            throw new RuntimeException("未配置表单信息！");
-        }
-        return metaInfo;
-    }
-
-    private void saveModelBpmnXml(String modelId, String bpmnXml) {
-        if (StringUtils.isBlank(modelId)) {
-            throw new RuntimeException("模板主键不能为空！");
-        }
-        if (StringUtils.isNotEmpty(bpmnXml)) {
-            repositoryService.addModelEditorSource(modelId, StrUtil.utf8Bytes(bpmnXml));
-        }
-    }
 }

ruoyi-system/src/main/java/com/ruoyi/workflow/service/impl/WfProcessServiceImpl.java

@@ -3,6 +3,9 @@ package com.ruoyi.workflow.service.impl;
 import cn.hutool.core.collection.CollUtil;
 import cn.hutool.core.date.BetweenFormatter;
 import cn.hutool.core.date.DateUtil;
+import cn.hutool.core.io.IORuntimeException;
+import cn.hutool.core.io.IoUtil;
+import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.google.common.collect.Lists;
 import com.ruoyi.common.core.domain.PageQuery;
@@ -14,14 +17,19 @@ import com.ruoyi.common.utils.DateUtils;
 import com.ruoyi.common.utils.StringUtils;
 import com.ruoyi.flowable.common.constant.TaskConstants;
 import com.ruoyi.flowable.factory.FlowServiceFactory;
+import com.ruoyi.flowable.utils.ModelUtils;
 import com.ruoyi.flowable.utils.TaskUtils;
 import com.ruoyi.system.service.ISysUserService;
+import com.ruoyi.workflow.domain.WfDeployForm;
 import com.ruoyi.workflow.domain.bo.WfProcessBo;
 import com.ruoyi.workflow.domain.vo.WfDefinitionVo;
 import com.ruoyi.workflow.domain.vo.WfTaskVo;
+import com.ruoyi.workflow.mapper.WfDeployFormMapper;
 import com.ruoyi.workflow.service.IWfProcessService;
 import com.ruoyi.workflow.service.IWfTaskService;
 import lombok.RequiredArgsConstructor;
+import org.flowable.bpmn.model.BpmnModel;
+import org.flowable.bpmn.model.StartEvent;
 import org.flowable.engine.history.HistoricProcessInstance;
 import org.flowable.engine.history.HistoricProcessInstanceQuery;
 import org.flowable.engine.repository.Deployment;
@@ -35,6 +43,7 @@ import org.flowable.task.api.history.HistoricTaskInstanceQuery;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 
+import java.io.InputStream;
 import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
@@ -50,6 +59,7 @@ public class WfProcessServiceImpl extends FlowServiceFactory implements IWfProce
 
     private final IWfTaskService wfTaskService;
     private final ISysUserService userService;
+    private final WfDeployFormMapper deployFormMapper;
 
     /**
      * 流程定义列表
@@ -82,7 +92,6 @@ public class WfProcessServiceImpl extends FlowServiceFactory implements IWfProce
             vo.setProcessKey(processDefinition.getKey());
             vo.setProcessName(processDefinition.getName());
             vo.setVersion(processDefinition.getVersion());
-            vo.setCategory(processDefinition.getCategory());
             vo.setDeploymentId(processDefinition.getDeploymentId());
             vo.setSuspended(processDefinition.isSuspended());
             // 流程定义时间
@@ -95,6 +104,23 @@ public class WfProcessServiceImpl extends FlowServiceFactory implements IWfProce
         return TableDataInfo.build(page);
     }
 
+    @Override
+    public String selectFormContent(String definitionId, String deployId) {
+        InputStream inputStream = repositoryService.getProcessModel(definitionId);
+        String bpmnString;
+        try {
+            bpmnString = IoUtil.readUtf8(inputStream);
+        } catch (IORuntimeException exception) {
+            throw new RuntimeException("获取流程设计失败！");
+        }
+        BpmnModel bpmnModel = ModelUtils.getBpmnModel(bpmnString);
+        StartEvent startEvent = ModelUtils.getStartEvent(bpmnModel);
+        WfDeployForm deployForm = deployFormMapper.selectVoOne(new LambdaQueryWrapper<WfDeployForm>()
+            .eq(WfDeployForm::getDeployId, deployId)
+            .eq(WfDeployForm::getFormKey, startEvent.getFormKey()));
+        return deployForm.getContent();
+    }
+
     /**
      * 根据流程定义ID启动流程实例
      *

ruoyi-ui/src/api/workflow/model.js

@@ -25,10 +25,28 @@ export function getModel(modelId) {
   })
 }
 
+// 新增模型信息
+export function addModel(data) {
+  return request({
+    url: '/workflow/model',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改模型信息
+export function updateModel(data) {
+  return request({
+    url: '/workflow/model',
+    method: 'put',
+    data: data
+  })
+}
+
 // 保存流程模型
 export function saveModel(data) {
   return request({
-    url: '/workflow/model',
+    url: '/workflow/model/save',
     method: 'post',
     data: data
   })

ruoyi-ui/src/api/workflow/process.js

@@ -9,6 +9,14 @@ export function listProcess(query) {
   })
 }
 
+// 查询流程列表
+export function getProcessForm(query) {
+  return request({
+    url: '/workflow/process/getProcessForm',
+    method: 'get',
+    params: query
+  })
+}
 
 // 部署流程实例
 export function startProcess(processDefId, data) {

ruoyi-ui/src/plugins/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-edit-outline" @click="onSave">保存流程</el-button>-->
+          <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-edit-outline" @click="onSave">保存流程</el-button>
           <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-folder-opened" @click="$refs.refFile.click()">打开文件</el-button>
           <el-tooltip effect="light">
             <div slot="content">

ruoyi-ui/src/plugins/package/penal/PropertiesPanel.vue

@@ -13,10 +13,10 @@
         <div slot="title" class="panel-tab__title"><i class="el-icon-s-promotion"></i>流转条件</div>
         <flow-condition :business-object="elementBusinessObject" :type="elementType" />
       </el-collapse-item>
-<!--      <el-collapse-item name="condition" v-if="formVisible" key="form">-->
+      <el-collapse-item name="condition" v-if="formVisible" key="form">
-<!--        <div slot="title" class="panel-tab__title"><i class="el-icon-s-order"></i>表单</div>-->
+        <div slot="title" class="panel-tab__title"><i class="el-icon-s-order"></i>表单</div>
-<!--        <element-form :id="elementId" :type="elementType" />-->
+        <element-form :id="elementId" :type="elementType" />
-<!--      </el-collapse-item>-->
+      </el-collapse-item>
       <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
         <div slot="title" class="panel-tab__title"><i class="el-icon-s-claim"></i>任务</div>
         <element-task :id="elementId" :type="elementType" />
@@ -53,7 +53,7 @@ import FlowCondition from "./flow-condition/FlowCondition";
 import SignalAndMassage from "./signal-message/SignalAndMessage";
 import ElementListeners from "./listeners/ElementListeners";
 import ElementProperties from "./properties/ElementProperties";
-// import ElementForm from "./form/ElementForm";
+import ElementForm from "./form/ElementForm";
 import UserTaskListeners from "./listeners/UserTaskListeners";
 /**
  * 侧边栏
@@ -65,7 +65,7 @@ export default {
   name: "BpmnPropertiesPanel",
   components: {
     UserTaskListeners,
-    // ElementForm,
+    ElementForm,
     ElementProperties,
     ElementListeners,
     SignalAndMassage,
@@ -183,7 +183,8 @@ export default {
         activatedElement.source &&
         activatedElement.source.type.indexOf("StartEvent") === -1
       );
-      this.formVisible = this.elementType === "UserTask" || this.elementType === "StartEvent";
+      this.formVisible = this.elementType === "StartEvent";
+      // this.formVisible = this.elementType === "UserTask" || this.elementType === "StartEvent";
     },
     beforeDestroy() {
       window.bpmnInstances = null;

ruoyi-ui/src/plugins/package/penal/form/ElementForm.vue

@@ -1,128 +1,133 @@
 <template>
   <div class="panel-tab__content">
     <el-form size="mini" label-width="80px" @submit.native.prevent>
-      <el-form-item label="表单标识">
+      <el-form-item label="表单" prop="formKey">
-        <el-input v-model="formKey" clearable @change="updateElementFormKey" />
+        <el-select v-model="formKey" placeholder="请选择表单" @change="updateElementFormKey" clearable>
-      </el-form-item>
+          <el-option v-for="item in formOptions" :key="item.formId" :label="item.formName" :value="`key_${item.formId}`" />
-      <el-form-item label="业务标识">
-        <el-select v-model="businessKey" @change="updateElementBusinessKey">
-          <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />
-          <el-option label="无" value="" />
         </el-select>
       </el-form-item>
+<!--      <el-form-item label="表单标识">-->
+<!--        <el-input v-model="formKey" clearable @change="updateElementFormKey" />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="业务标识">-->
+<!--        <el-select v-model="businessKey" @change="updateElementBusinessKey">-->
+<!--          <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />-->
+<!--          <el-option label="无" value="" />-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
     </el-form>
 
     <!--字段列表-->
-    <div class="element-property list-property">
+<!--    <div class="element-property list-property">-->
-      <el-divider><i class="el-icon-coin"></i> 表单字段</el-divider>
+<!--      <el-divider><i class="el-icon-coin"></i> 表单字段</el-divider>-->
-      <el-table :data="fieldList" size="mini" max-height="240" border fit>
+<!--      <el-table :data="fieldList" size="mini" max-height="240" border fit>-->
-        <el-table-column label="序号" type="index" width="50px" />
+<!--        <el-table-column label="序号" type="index" width="50px" />-->
-        <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />
+<!--        <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
-        <el-table-column label="字段类型" prop="type" min-width="80px" :formatter="row => fieldType[row.type] || row.type" show-overflow-tooltip />
+<!--        <el-table-column label="字段类型" prop="type" min-width="80px" :formatter="row => fieldType[row.type] || row.type" show-overflow-tooltip />-->
-        <el-table-column label="默认值" prop="defaultValue" min-width="80px" show-overflow-tooltip />
+<!--        <el-table-column label="默认值" prop="defaultValue" min-width="80px" show-overflow-tooltip />-->
-        <el-table-column label="操作" width="90px">
+<!--        <el-table-column label="操作" width="90px">-->
-          <template slot-scope="{ row, $index }">
+<!--          <template slot-scope="{ row, $index }">-->
-            <el-button size="mini" type="text" @click="openFieldForm(row, $index)">编辑</el-button>
+<!--            <el-button size="mini" type="text" @click="openFieldForm(row, $index)">编辑</el-button>-->
-            <el-divider direction="vertical" />
+<!--            <el-divider direction="vertical" />-->
-            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeField(row, $index)">移除</el-button>
+<!--            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeField(row, $index)">移除</el-button>-->
-          </template>
+<!--          </template>-->
-        </el-table-column>
+<!--        </el-table-column>-->
-      </el-table>
+<!--      </el-table>-->
-    </div>
+<!--    </div>-->
-    <div class="element-drawer__button">
+<!--    <div class="element-drawer__button">-->
-      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openFieldForm(null, -1)">添加字段</el-button>
+<!--      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openFieldForm(null, -1)">添加字段</el-button>-->
-    </div>
+<!--    </div>-->
 
     <!--字段配置侧边栏-->
-    <el-drawer :visible.sync="fieldModelVisible" title="字段配置" :size="`${width}px`" append-to-body destroy-on-close>
+<!--    <el-drawer :visible.sync="fieldModelVisible" title="字段配置" :size="`${width}px`" append-to-body destroy-on-close>-->
-      <el-form :model="formFieldForm" label-width="90px" size="mini" @submit.native.prevent>
+<!--      <el-form :model="formFieldForm" label-width="90px" size="mini" @submit.native.prevent>-->
-        <el-form-item label="字段ID">
+<!--        <el-form-item label="字段ID">-->
-          <el-input v-model="formFieldForm.id" clearable />
+<!--          <el-input v-model="formFieldForm.id" clearable />-->
-        </el-form-item>
+<!--        </el-form-item>-->
-        <el-form-item label="类型">
+<!--        <el-form-item label="类型">-->
-          <el-select v-model="formFieldForm.typeType" placeholder="请选择字段类型" clearable @change="changeFieldTypeType">
+<!--          <el-select v-model="formFieldForm.typeType" placeholder="请选择字段类型" clearable @change="changeFieldTypeType">-->
-            <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />
+<!--            <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />-->
-          </el-select>
+<!--          </el-select>-->
-        </el-form-item>
+<!--        </el-form-item>-->
-        <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">
+<!--        <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
-          <el-input v-model="formFieldForm.type" clearable />
+<!--          <el-input v-model="formFieldForm.type" clearable />-->
-        </el-form-item>
+<!--        </el-form-item>-->
-        <el-form-item label="名称">
+<!--        <el-form-item label="名称">-->
-          <el-input v-model="formFieldForm.label" clearable />
+<!--          <el-input v-model="formFieldForm.label" clearable />-->
-        </el-form-item>
+<!--        </el-form-item>-->
-        <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">
+<!--        <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">-->
-          <el-input v-model="formFieldForm.datePattern" clearable />
+<!--          <el-input v-model="formFieldForm.datePattern" clearable />-->
-        </el-form-item>
+<!--        </el-form-item>-->
-        <el-form-item label="默认值">
+<!--        <el-form-item label="默认值">-->
-          <el-input v-model="formFieldForm.defaultValue" clearable />
+<!--          <el-input v-model="formFieldForm.defaultValue" clearable />-->
-        </el-form-item>
+<!--        </el-form-item>-->
-      </el-form>
+<!--      </el-form>-->
 
-      <!-- 枚举值设置 -->
+<!--      &lt;!&ndash; 枚举值设置 &ndash;&gt;-->
-      <template v-if="formFieldForm.type === 'enum'">
+<!--      <template v-if="formFieldForm.type === 'enum'">-->
-        <el-divider key="enum-divider" />
+<!--        <el-divider key="enum-divider" />-->
-        <p class="listener-filed__title" key="enum-title">
+<!--        <p class="listener-filed__title" key="enum-title">-->
-          <span><i class="el-icon-menu"></i>枚举值列表：</span>
+<!--          <span><i class="el-icon-menu"></i>枚举值列表：</span>-->
-          <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'enum')">添加枚举值</el-button>
+<!--          <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'enum')">添加枚举值</el-button>-->
-        </p>
+<!--        </p>-->
-        <el-table :data="fieldEnumList" size="mini" key="enum-table" max-height="240" border fit>
+<!--        <el-table :data="fieldEnumList" size="mini" key="enum-table" max-height="240" border fit>-->
-          <el-table-column label="序号" width="50px" type="index" />
+<!--          <el-table-column label="序号" width="50px" type="index" />-->
-          <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />
+<!--          <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
-          <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />
+<!--          <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
-          <el-table-column label="操作" width="90px">
+<!--          <el-table-column label="操作" width="90px">-->
-            <template slot-scope="{ row, $index }">
+<!--            <template slot-scope="{ row, $index }">-->
-              <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'enum')">编辑</el-button>
+<!--              <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'enum')">编辑</el-button>-->
-              <el-divider direction="vertical" />
+<!--              <el-divider direction="vertical" />-->
-              <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'enum')">移除</el-button>
+<!--              <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'enum')">移除</el-button>-->
-            </template>
+<!--            </template>-->
-          </el-table-column>
+<!--          </el-table-column>-->
-        </el-table>
+<!--        </el-table>-->
-      </template>
+<!--      </template>-->
 
-      <!-- 校验规则 -->
+<!--      &lt;!&ndash; 校验规则 &ndash;&gt;-->
-      <el-divider key="validation-divider" />
+<!--      <el-divider key="validation-divider" />-->
-      <p class="listener-filed__title" key="validation-title">
+<!--      <p class="listener-filed__title" key="validation-title">-->
-        <span><i class="el-icon-menu"></i>约束条件列表：</span>
+<!--        <span><i class="el-icon-menu"></i>约束条件列表：</span>-->
-        <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'constraint')">添加约束</el-button>
+<!--        <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'constraint')">添加约束</el-button>-->
-      </p>
+<!--      </p>-->
-      <el-table :data="fieldConstraintsList" size="mini" key="validation-table" max-height="240" border fit>
+<!--      <el-table :data="fieldConstraintsList" size="mini" key="validation-table" max-height="240" border fit>-->
-        <el-table-column label="序号" width="50px" type="index" />
+<!--        <el-table-column label="序号" width="50px" type="index" />-->
-        <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />
+<!--        <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />-->
-        <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />
+<!--        <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />-->
-        <el-table-column label="操作" width="90px">
+<!--        <el-table-column label="操作" width="90px">-->
-          <template slot-scope="{ row, $index }">
+<!--          <template slot-scope="{ row, $index }">-->
-            <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'constraint')">编辑</el-button>
+<!--            <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'constraint')">编辑</el-button>-->
-            <el-divider direction="vertical" />
+<!--            <el-divider direction="vertical" />-->
-            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'constraint')">移除</el-button>
+<!--            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'constraint')">移除</el-button>-->
-          </template>
+<!--          </template>-->
-        </el-table-column>
+<!--        </el-table-column>-->
-      </el-table>
+<!--      </el-table>-->
 
-      <!-- 表单属性 -->
+<!--      &lt;!&ndash; 表单属性 &ndash;&gt;-->
-      <el-divider key="property-divider" />
+<!--      <el-divider key="property-divider" />-->
-      <p class="listener-filed__title" key="property-title">
+<!--      <p class="listener-filed__title" key="property-title">-->
-        <span><i class="el-icon-menu"></i>字段属性列表：</span>
+<!--        <span><i class="el-icon-menu"></i>字段属性列表：</span>-->
-        <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'property')">添加属性</el-button>
+<!--        <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'property')">添加属性</el-button>-->
-      </p>
+<!--      </p>-->
-      <el-table :data="fieldPropertiesList" size="mini" key="property-table" max-height="240" border fit>
+<!--      <el-table :data="fieldPropertiesList" size="mini" key="property-table" max-height="240" border fit>-->
-        <el-table-column label="序号" width="50px" type="index" />
+<!--        <el-table-column label="序号" width="50px" type="index" />-->
-        <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />
+<!--        <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
-        <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
+<!--        <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
-        <el-table-column label="操作" width="90px">
+<!--        <el-table-column label="操作" width="90px">-->
-          <template slot-scope="{ row, $index }">
+<!--          <template slot-scope="{ row, $index }">-->
-            <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'property')">编辑</el-button>
+<!--            <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'property')">编辑</el-button>-->
-            <el-divider direction="vertical" />
+<!--            <el-divider direction="vertical" />-->
-            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'property')">移除</el-button>
+<!--            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'property')">移除</el-button>-->
-          </template>
+<!--          </template>-->
-        </el-table-column>
+<!--        </el-table-column>-->
-      </el-table>
+<!--      </el-table>-->
 
-      <!-- 底部按钮 -->
+<!--      &lt;!&ndash; 底部按钮 &ndash;&gt;-->
-      <div class="element-drawer__button">
+<!--      <div class="element-drawer__button">-->
-        <el-button size="mini">取 消</el-button>
+<!--        <el-button size="mini">取 消</el-button>-->
-        <el-button size="mini" type="primary" @click="saveField">保 存</el-button>
+<!--        <el-button size="mini" type="primary" @click="saveField">保 存</el-button>-->
-      </div>
+<!--      </div>-->
-    </el-drawer>
+<!--    </el-drawer>-->
 
     <el-dialog :visible.sync="fieldOptionModelVisible" :title="optionModelTitle" width="600px" append-to-body destroy-on-close>
       <el-form :model="fieldOptionForm" size="mini" label-width="96px" @submit.native.prevent>
@@ -148,6 +153,8 @@
 </template>
 
 <script>
+import { listForm } from "@/api/workflow/form";
+
 export default {
   name: "ElementForm",
   props: {
@@ -160,6 +167,7 @@ export default {
   },
   data() {
     return {
+      formOptions: [],
       formKey: "",
       businessKey: "",
       optionModelTitle: "",
@@ -192,7 +200,15 @@ export default {
       }
     }
   },
+  created() {
+    /** 查询流程分类列表 */
+    this.getFormList();
+  },
   methods: {
+    /** 查询表单列表 */
+    getFormList() {
+      listForm().then(response => this.formOptions = response.rows)
+    },
     resetFormList() {
       this.bpmnELement = window.bpmnInstances.bpmnElement;
       this.formKey = this.bpmnELement.businessObject.formKey;
@@ -200,21 +216,20 @@ export default {
       this.elExtensionElements =
         this.bpmnELement.businessObject.get("extensionElements") || window.bpmnInstances.moddle.create("bpmn:ExtensionElements", { values: [] });
       // 获取元素表单配置 或者 创建新的表单配置
-      this.formData =
+      // this.formData =
-        this.elExtensionElements.values.filter(ex => ex.$type === `${this.prefix}:FormData`)?.[0] ||
+      //   this.elExtensionElements.values.filter(ex => ex.$type === `${this.prefix}:FormData`)?.[0] ||
-        window.bpmnInstances.moddle.create(`${this.prefix}:FormData`, { fields: [] });
+      //   window.bpmnInstances.moddle.create(`${this.prefix}:FormData`, { fields: [] });
-
       // 业务标识 businessKey， 绑定在 formData 中
-      this.businessKey = this.formData.businessKey;
+      // this.businessKey = this.formData.businessKey;
 
       // 保留剩余扩展元素，便于后面更新该元素对应属性
       this.otherExtensions = this.elExtensionElements.values.filter(ex => ex.$type !== `${this.prefix}:FormData`);
 
       // 复制原始值，填充表格
-      this.fieldList = JSON.parse(JSON.stringify(this.formData.fields || []));
+      // this.fieldList = JSON.parse(JSON.stringify(this.formData.fields || []));
 
       // 更新元素扩展属性，避免后续报错
-      this.updateElementExtensions();
+      // this.updateElementExtensions();
     },
     updateElementFormKey() {
       window.bpmnInstances.modeling.updateProperties(this.bpmnELement, { formKey: this.formKey });

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

@@ -1,295 +0,0 @@
-<template>
-  <div class="workflow-designer">
-    <el-container>
-      <el-header height="70px">
-        <el-row type="flex" align="middle">
-          <el-col :span="3">
-            <div style="display:flex;justify-content:center;">
-              <el-button type="danger" @click="onClose()">关闭</el-button>
-              <el-button type="primary" @click="onPrevious()" :disabled="activeStep <= 0">上一步</el-button>
-            </div>
-          </el-col>
-          <el-col :offset="1" :span="16">
-            <el-steps :active="activeStep" finish-status="success" align-center>
-              <el-step title="基础设置"></el-step>
-              <el-step title="流程设计"></el-step>
-              <el-step title="完成"></el-step>
-            </el-steps>
-          </el-col>
-          <el-col :offset="1" :span="3">
-            <div style="display:flex;justify-content:center;">
-              <el-button type="primary" @click="onNext()" :disabled="activeStep >= 1">下一步</el-button>
-              <el-button type="success" @click="onSave()" :disabled="activeStep !== 1">保存</el-button>
-            </div>
-          </el-col>
-        </el-row>
-      </el-header>
-      <el-main>
-        <div v-if="activeStep === 0">
-          <div class="app-container">
-            <el-row :gutter="20">
-              <el-col :span="10">
-                <el-divider content-position="left">
-                  <span style="font-size: 18px">基础信息</span>
-                </el-divider>
-                <el-form :model="designerForm" ref="designerForm" size="small" label-width="80px" :rules="rules">
-                  <el-form-item label="模型标识" prop="processKey">
-                    <el-input v-model="designerForm.processKey" clearable disabled />
-                  </el-form-item>
-                  <el-form-item label="模型名称" prop="processName">
-                    <el-input v-model="designerForm.processName" clearable />
-                  </el-form-item>
-                  <el-form-item label="分类" prop="category">
-                    <el-select v-model="designerForm.category" 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-item label="描述" prop="description">
-                    <el-input v-model="designerForm.description" type="textarea" placeholder="请输入内容" maxlength="200" show-word-limit/>
-                  </el-form-item>
-                  <el-form-item label="表单类型" prop="formType">
-                    <el-radio-group v-model="designerForm.formType">
-                      <el-radio :label="0">内置表单</el-radio>
-                    </el-radio-group>
-                  </el-form-item>
-                  <el-form-item label="表单" prop="formId">
-                    <el-select v-model="designerForm.formId" placeholder="请选择表单" @change="handleFormChange(designerForm.formId)" clearable style="width:100%">
-                      <el-option v-for="item in formOptions" :key="item.formId" :label="item.formName" :value="item.formId" />
-                    </el-select>
-                  </el-form-item>
-                </el-form>
-              </el-col>
-              <el-col :span="13" :offset="1">
-                <el-divider content-position="left">
-                  <span style="font-size: 18px">表单预览</span>
-                </el-divider>
-                <parser v-if="formShow" :form-conf="formContent" />
-                <el-empty v-else description="暂无数据" />
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-        <div v-if="activeStep === 1">
-          <process-designer
-            ref="modelDesigner"
-            v-loading="loading"
-            :bpmnXml="bpmnXml"
-            :designerForm="designerForm"
-          />
-        </div>
-        <div v-if="activeStep === 2">
-          <el-result :icon="result.icon" :title="result.title" :subTitle="result.describe">
-            <template slot="extra">
-              <el-button type="primary" size="medium" @click="onClose()">关闭</el-button>
-            </template>
-          </el-result>
-        </div>
-
-      </el-main>
-      <el-footer>
-      </el-footer>
-    </el-container>
-  </div>
-
-</template>
-
-<script>
-import { getModel, getBpmnXml, saveModel } from "@/api/workflow/model";
-import { getForm, listForm } from "@/api/workflow/form";
-import ProcessDesigner from '@/components/ProcessDesigner';
-import Parser from '@/utils/generator/parser'
-import { listAllCategory } from '@/api/workflow/category';
-
-export default {
-  name: 'Designer',
-  components: { ProcessDesigner, Parser },
-  props: {
-    modelId: {
-      type: String
-    },
-    processName: {
-      type: String
-    },
-    processKey: {
-      type: String
-    }
-  },
-  data () {
-    return {
-      activeStep: 0,
-      designerForm: {},
-      rules: {
-        modelKey: [
-          { required: true, message: '请输入模型标识', trigger: 'blur' }
-        ],
-        modelName: [
-          { required: true, message: '请输入模型名称', trigger: 'blur' }
-        ],
-        category: [
-          { required: true, message: '请选择分类', trigger: 'change' }
-        ],
-        formType: [
-          { required: true, message: '请选择表单类型', trigger: 'change' }
-        ],
-        formId: [
-          { required: true, message: '请选择表单', trigger: 'change' }
-        ]
-      },
-      categoryOptions: [],
-      formOptions: [],
-      formShow: false,
-      formContent: {},
-      loadIndex: 0,
-      loading: false,
-      bpmnXml: '',
-      result: {
-        icon: 'info',
-        title: null,
-        describe: null
-      }
-    };
-  },
-  created() {
-    this.onLoad();
-  },
-  methods: {
-    onClose () {
-      this.$emit('close');
-    },
-    onPrevious() {
-      this.activeStep--;
-    },
-    onNext() {
-      this.activeStep++;
-    },
-    /**
-     * 初始化加载
-     */
-    onLoad() {
-      this.getCategoryList();
-      this.getFormList();
-      if (this.modelId) {
-        getModel(this.modelId).then(response => {
-          const data = response.data
-          this.designerForm = {
-            processName: data.modelName,
-            processKey: data.modelKey,
-            category: data.category,
-            description: data.description,
-            formType: data.formType,
-            formId: data.formId
-          }
-          if (data.bpmnXml) {
-            this.bpmnXml = data.bpmnXml
-          }
-          if (data.content) {
-            this.formContent = JSON.parse(data.content)
-            this.formShow = true
-          }
-        })
-      } else {
-        this.designerForm = {
-          processName: this.processName,
-          processKey: this.processKey,
-          formType: 0
-        }
-      }
-    },
-    /** 查询流程分类列表 */
-    getCategoryList() {
-      listAllCategory().then(response => this.categoryOptions = response.data)
-    },
-    /** 查询流程分类列表 */
-    getFormList() {
-      listForm().then(response => this.formOptions = response.rows)
-    },
-    handleFormChange(formId) {
-      this.formShow = false
-      if (formId) {
-        getForm(formId).then(res =>{
-          this.formContent = JSON.parse(res.data.content)
-          this.formShow = true
-        })
-      }
-    },
-    onSave() {
-
-      let refProcessDesigner = this.$refs.modelDesigner.$refs.processDesigner;
-      refProcessDesigner.onSave().then(xml => {
-        this.bpmnXml = xml;
-        let dataBody = {
-          modelName: this.designerForm.processName,
-          modelKey: this.designerForm.processKey,
-          category: this.designerForm.category,
-          description: this.designerForm.description,
-          formType: this.designerForm.formType,
-          formId: this.designerForm.formId,
-          bpmnXml: this.bpmnXml
-        }
-        this.$confirm("是否将此模型保存为新版本？", "提示", {
-          distinguishCancelAndClose: true,
-          confirmButtonText: '是',
-          cancelButtonText: '否'
-        }).then(() => {
-          this.confirmSave(dataBody, true)
-        }).catch(action => {
-          if (action === 'cancel') {
-            this.confirmSave(dataBody, false)
-          }
-        })
-      })
-    },
-    confirmSave(body, newVersion) {
-      this.loading = true;
-      saveModel(Object.assign(body, {
-        newVersion: newVersion
-      })).then(res => {
-        this.result.icon = 'success';
-        this.result.title = '成功';
-        this.result.describe = res.msg;
-      }).catch(res => {
-        this.result.icon = 'error';
-        this.result.title = '失败';
-        this.result.describe = res.msg;
-      }).finally(() => {
-        this.loading = false;
-        this.onNext();
-        this.$emit('save');
-      })
-    },
-    /** xml 文件 */
-    getModelDetail(modelId) {
-      this.loading = true;
-      // 发送请求，获取xml
-      getBpmnXml(modelId).then(res => {
-        this.bpmnXml = res.data;
-        this.loadIndex = modelId;
-        this.loading = false;
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.workflow-designer {
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  background: #ebeef5;
-  top: 0;
-  left: 0;
-  z-index: 1010;
-  padding: 10px;
-}
-.workflow-designer >>> .el-header {
-  padding: 10px;
-  background: #ffffff;
-  margin-bottom: 5px;
-}
-
-.workflow-designer >>> .el-main {
-  background: #ffffff;
-  padding: 0;
-}
-</style>

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

@@ -36,16 +36,16 @@
     </el-form>
 
     <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
+<!--      <el-col :span="1.5">-->
-        <el-button
+<!--        <el-button-->
-          type="primary"
+<!--          type="primary"-->
-          plain
+<!--          plain-->
-          icon="el-icon-upload"
+<!--          icon="el-icon-upload"-->
-          size="mini"
+<!--          size="mini"-->
-          @click="handleImport"
+<!--          @click="handleImport"-->
-          v-hasPermi="['workflow:model:import']"
+<!--          v-hasPermi="['workflow:model:import']"-->
-        >导入</el-button>
+<!--        >导入</el-button>-->
-      </el-col>
+<!--      </el-col>-->
       <el-col :span="1.5">
         <el-button
           type="success"
@@ -100,6 +100,13 @@
       <el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['workflow:model:edit']"
+          >修改</el-button>
           <el-button
             type="text"
             size="mini"
@@ -148,46 +155,71 @@
       @pagination="getList"
     />
 
-    <!-- bpmn20.xml导入对话框 -->
+    <!--  添加或修改模型信息对话框  -->
-    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body @close="cancel('uploadForm')">
+    <el-dialog :title="title" :visible.sync="open" width="30%" append-to-body @close="cancel()">
-      <el-upload
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        ref="upload"
+        <el-form-item label="模型标识" prop="modelKey">
-        :limit="1"
+          <el-input v-model="form.modelKey" clearable disabled />
-        accept=".xml"
+        </el-form-item>
-        :headers="upload.headers"
+        <el-form-item label="模型名称" prop="modelName">
-        :action="upload.url + '?name=' + upload.name+'&category='+ upload.category"
+          <el-input v-model="form.modelName" clearable :disabled="form.modelId !== undefined" />
-        :disabled="upload.isUploading"
+        </el-form-item>
-        :on-progress="handleFileUploadProgress"
+        <el-form-item label="流程分类" prop="category">
-        :on-success="handleFileSuccess"
+          <el-select v-model="form.category" placeholder="请选择" clearable style="width:100%">
-        :auto-upload="false"
+            <el-option v-for="item in categoryOptions" :key="item.categoryId" :label="item.categoryName" :value="item.code" />
-        drag
+          </el-select>
-      >
+        </el-form-item>
-        <i class="el-icon-upload"></i>
+        <el-form-item label="描述" prop="description">
-        <div class="el-upload__text">
+          <el-input v-model="form.description" type="textarea" placeholder="请输入内容" maxlength="200" show-word-limit/>
-          将文件拖到此处，或
+        </el-form-item>
-          <em>点击上传</em>
+      </el-form>
-        </div>
-        <div class="el-upload__tip" slot="tip">
-          <el-form ref="uploadForm" :model="upload" size="mini" :rules="rules" label-width="80px">
-            <el-form-item label="流程名称" prop="name">
-              <el-input v-model="upload.name" clearable/>
-            </el-form-item>
-            <el-form-item label="流程分类" prop="category">
-              <el-select v-model="upload.category" 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>
-        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“bpmn20.xml”格式文件！</div>
-      </el-upload>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel('uploadForm')">取 消</el-button>
+        <el-button @click="cancel()">取 消</el-button>
       </div>
     </el-dialog>
 
+
+  <!--  &lt;!&ndash; bpmn20.xml导入对话框 &ndash;&gt;-->
+  <!--  <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body @close="cancel('uploadForm')">-->
+  <!--    <el-upload-->
+  <!--      ref="upload"-->
+  <!--      :limit="1"-->
+  <!--      accept=".xml"-->
+  <!--      :headers="upload.headers"-->
+  <!--      :action="upload.url + '?name=' + upload.name+'&category='+ upload.category"-->
+  <!--      :disabled="upload.isUploading"-->
+  <!--      :on-progress="handleFileUploadProgress"-->
+  <!--      :on-success="handleFileSuccess"-->
+  <!--      :auto-upload="false"-->
+  <!--      drag-->
+  <!--    >-->
+  <!--      <i class="el-icon-upload"></i>-->
+  <!--      <div class="el-upload__text">-->
+  <!--        将文件拖到此处，或-->
+  <!--        <em>点击上传</em>-->
+  <!--      </div>-->
+  <!--      <div class="el-upload__tip" slot="tip">-->
+  <!--        <el-form ref="uploadForm" :model="upload" size="mini" :rules="rules" label-width="80px">-->
+  <!--          <el-form-item label="流程名称" prop="name">-->
+  <!--            <el-input v-model="upload.name" clearable/>-->
+  <!--          </el-form-item>-->
+  <!--          <el-form-item label="流程分类" prop="category">-->
+  <!--            <el-select v-model="upload.category" 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>-->
+  <!--      <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“bpmn20.xml”格式文件！</div>-->
+  <!--    </el-upload>-->
+  <!--    <div slot="footer" class="dialog-footer">-->
+  <!--      <el-button type="primary" @click="submitFileForm">确 定</el-button>-->
+  <!--      <el-button @click="cancel('uploadForm')">取 消</el-button>-->
+  <!--    </div>-->
+  <!--  </el-dialog>-->
+
     <!-- 流程图 -->
     <el-dialog :title="processView.title" :visible.sync="processView.open" width="70%" append-to-body>
       <process-viewer :key="`designer-${processView.index}`" :xml="processView.xmlData" :style="{height: '400px'}" />
@@ -218,7 +250,7 @@
               type="text"
               size="mini"
               icon="el-icon-video-play"
-              v-hasPermi="['workflow:model:designer']"
+              v-hasPermi="['workflow:model:deploy']"
               @click.native="handleDeploy(scope.row)"
             >部署</el-button>
             <el-button
@@ -241,33 +273,34 @@
       />
     </el-dialog>
 
-    <designer
+    <el-dialog :title="designerData.title" :visible.sync="designerOpen" append-to-body fullscreen>
-      v-if="designerOpen"
+      <process-designer
-      :modelId="designerData.modelId"
+        :key="designerOpen"
-      :processName="designerData.processName"
+        style="border:1px solid rgba(0, 0, 0, 0.1);"
-      :processKey="designerData.processKey"
+        ref="modelDesigner"
-      @save="submitSave()"
+        v-loading="designerData.loading"
-      @close="designerOpen = false"
+        :bpmnXml="designerData.bpmnXml"
-    />
+        :designerForm="designerData.form"
-
+        @save="onSaveDesigner"
+      />
+    </el-dialog>
   </div>
+
 </template>
 
 <script>
 import { exportDeployment, definitionStart } from "@/api/workflow/definition";
-import { getBpmnXml, listModel, historyModel, latestModel, delModel, deployModel } from "@/api/workflow/model";
+import { getBpmnXml, listModel, historyModel, latestModel, addModel, updateModel, saveModel, delModel, deployModel } from "@/api/workflow/model";
 import { listCategory } from '@/api/workflow/category'
-import Parser from '@/utils/generator/parser'
+import ProcessDesigner from '@/components/ProcessDesigner';
 import ProcessViewer from '@/components/ProcessViewer'
-import Designer from './designer'
 import { getToken } from "@/utils/auth";
 
 export default {
   name: "Model",
   components: {
-    Parser,
+    ProcessDesigner,
     ProcessViewer,
-    Designer
   },
   data() {
     return {
@@ -286,11 +319,30 @@ export default {
       // 流程模型表格数据
       modelList: [],
       categoryOptions: [],
+      title: '',
+      open: false,
+      form: {},
+      // 表单校验
+      rules: {
+        modelKey: [
+          { required: true, message: "模型标识不能为空", trigger: "blur" }
+        ],
+        modelName: [
+          { required: true, message: "模型名称不能为空", trigger: "blur" }
+        ],
+        category: [
+          { required: true, message: "请选择类型", trigger: "change" }
+        ],
+      },
       designerOpen: false,
       designerData: {
+        loading: false,
+        bpmnXml: '',
         modelId: null,
-        processName: null,
+        form: {
-        processKey: null
+          processName: null,
+          processKey: null
+        }
       },
       designerModelId: null,
       processView: {
@@ -323,17 +375,6 @@ export default {
         category: null
       },
       currentRow: null,
-      // 表单校验
-      rules: {
-        name: [
-          { required: true, message: "流程定义名称不能为空", trigger: "blur" }
-        ],
-        category: [{
-          required: true,
-          message: '请选择任意一项',
-          trigger: 'change'
-        }],
-      },
       history: {
         open: false,
         loading: false
@@ -365,12 +406,20 @@ export default {
         this.loading = false;
       });
     },
-    // 点击取消时关闭dialog并且清空form表格的数据
+    cancel() {
-    cancel (form) {
+      this.reset();
-      // 重置form表单
-      this.$refs['upload'].clearFiles()
       // 关闭dialog
-      this.upload.open = false
+      this.open = false
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        modelId: undefined,
+        modelKey: undefined,
+        modelName: undefined,
+        category: undefined,
+        description: undefined
+      };
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -379,7 +428,7 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
+      this.$refs.queryForm.resetFields()
       this.handleQuery();
     },
     // 多选框选中数据
@@ -400,7 +449,11 @@ export default {
       deployModel({
         modelId: row.modelId
       }).then(response => {
-        this.$modal.msgSuccess(response.msg)
+        this.$modal.msgSuccess(response.msg);
+        let obj = { name: 'Deploy', path: '/workflow/deploy' }
+        return this.$store.dispatch('tagsView/delCachedView', obj).then(() => {
+          this.$router.push(obj);
+        });
       }).finally(() => {
         this.loading = false;
       })
@@ -450,17 +503,92 @@ export default {
       }
     },
     handleAdd() {
+      this.title = "新增流程模型";
       const dateTime = new Date().getTime();
-      this.designerData = {
+      this.form = {
-        processKey: `Process_${dateTime}`,
+        modelKey: `Process_${dateTime}`,
-        processName: `业务流程_${dateTime}`
+        modelName: `业务流程_${dateTime}`
       }
-      this.designerOpen = true;
+      this.open = true;
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.title = "修改流程模型";
+      this.form = {
+        modelId: row.modelId,
+        modelKey: row.modelKey,
+        modelName: row.modelName,
+        category: row.category,
+        description: row.description
+      };
+      this.open = true;
+    },
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.modelId !== undefined) {
+            updateModel(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addModel(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
     },
     /** 设计按钮操作 */
     handleDesigner(row) {
+      this.designerData.title = "流程设计 - " + row.modelName;
       this.designerData.modelId = row.modelId;
-      this.designerOpen = true;
+      this.designerData.form = {
+        processName: row.modelName,
+        processKey: row.modelKey
+      }
+      if (row.modelId) {
+        this.designerData.loading = true;
+        getBpmnXml(row.modelId).then(response => {
+          this.designerData.bpmnXml = response.data || '';
+          this.designerData.loading = false;
+          this.designerOpen = true;
+        })
+      }
+    },
+    onSaveDesigner(bpmnXml) {
+      this.bpmnXml = bpmnXml;
+      let dataBody = {
+        modelId: this.designerData.modelId,
+        bpmnXml: this.bpmnXml
+      }
+      this.$confirm("是否将此模型保存为新版本？", "提示", {
+        distinguishCancelAndClose: true,
+        confirmButtonText: '是',
+        cancelButtonText: '否'
+      }).then(() => {
+        this.confirmSave(dataBody, true)
+      }).catch(action => {
+        if (action === 'cancel') {
+          this.confirmSave(dataBody, false)
+        }
+      })
+    },
+    confirmSave(body, newVersion) {
+      this.designerData.loading = true;
+      saveModel(Object.assign(body, {
+        newVersion: newVersion
+      })).then(res => {
+        this.$modal.msgSuccess(res.msg)
+        this.designerOpen = false;
+        this.getList();
+      }).catch(res => {
+        this.$modal.msgError(res.msg)
+        this.designerData.loading = false;
+      })
     },
     /** 删除按钮操作 */
     handleDelete(row) {

ruoyi-ui/src/views/workflow/work/start.vue

@@ -14,8 +14,7 @@
 </template>
 
 <script>
-import { getFormByDeployId } from '@/api/workflow/deploy'
+import { getProcessForm, startProcess } from '@/api/workflow/process'
-import { startProcess } from '@/api/workflow/process'
 import Parser from '@/utils/generator/parser'
 
 export default {
@@ -40,7 +39,10 @@ export default {
     initData() {
       this.definitionId = this.$route.query && this.$route.query.definitionId;
       this.deployId = this.$route.query && this.$route.query.deployId;
-      getFormByDeployId(this.deployId).then(res => {
+      getProcessForm({
+        definitionId: this.definitionId,
+        deployId: this.deployId
+      }).then(res => {
         if (res.data) {
           this.formData = res.data;
           this.formOpen = true