DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
konbai
2022-07-19 20:59:32 +08:00
parent 0ae300919d
commit 8acdf651a9
20 changed files with 609 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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();

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

@@ -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}")

10
ruoyi-flowable/src/main/java/com/ruoyi/flowable/utils/ModelUtils.java
View File

@@ -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);
}
/**
* 获取开始节点
*

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

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

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

@@ -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)

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

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

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

@@ -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);
/**
* 查询流程挂着的表单

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

@@ -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);
}

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

@@ -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

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

@@ -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());

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

@@ -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 newModel;
// 查询模型信息
Model model = repositoryService.getModel(modelBo.getModelId());
if (ObjectUtil.isNull(model)) {
newModel = repositoryService.newModel();
} else {
if (modelBo.getNewVersion() != null && modelBo.getNewVersion()) {
newModel = repositoryService.newModel();
newModel.setVersion(model.getVersion() + 1);
} else {
newModel = model;
}
throw new RuntimeException("流程模型不存在！");
}
BpmnModel bpmnModel = ModelUtils.getBpmnModel(modelBo.getBpmnXml());
if (ObjectUtil.isEmpty(bpmnModel)) {
throw new RuntimeException("获取模型设计失败！");
}
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(), metaInfo.getFormId());
}
deployFormService.saveInternalDeployForm(deployment.getId(), formKey);
}
private String buildMetaInfo(WfModelBo modelBo) {
WfMetaInfoDto metaInfo = new WfMetaInfoDto();
/**
* 构建模型扩展信息
* @return
*/
private String buildMetaInfo(WfMetaInfoDto metaInfo, String description) {
// 只有非空，才进行设置，避免更新时的覆盖
if (StringUtils.isNotEmpty(modelBo.getDescription())) {
metaInfo.setDescription(modelBo.getDescription());
if (StringUtils.isNotEmpty(description)) {
metaInfo.setDescription(description);
}
if (ObjectUtil.isNotNull(modelBo.getFormType())) {
metaInfo.setFormType(modelBo.getFormType());
metaInfo.setFormId(modelBo.getFormId());
if (StringUtils.isNotEmpty(metaInfo.getCreateUser())) {
metaInfo.setCreateUser(LoginHelper.getUsername());
}
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));
}
}
}

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

@@ -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启动流程实例
*

20
ruoyi-ui/src/api/workflow/model.js
View File

@@ -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
})

8
ruoyi-ui/src/api/workflow/process.js
View File

@@ -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) {

2
ruoyi-ui/src/plugins/package/designer/ProcessDesigner.vue
View File

@@ -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">

15
ruoyi-ui/src/plugins/package/penal/PropertiesPanel.vue
View File

@@ -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">-->
<!-- <div slot="title" class="panel-tab__title"><i class="el-icon-s-order"></i>表单</div>-->
<!-- <element-form :id="elementId" :type="elementType" />-->
<!-- </el-collapse-item>-->
<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>
<element-form :id="elementId" :type="elementType" />
</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;

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

@@ -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-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-form-item label="表单" prop="formKey">
<el-select v-model="formKey" placeholder="请选择表单" @change="updateElementFormKey" clearable>
<el-option v-for="item in formOptions" :key="item.formId" :label="item.formName" :value="`key_${item.formId}`" />
</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">
<el-divider><i class="el-icon-coin"></i> 表单字段</el-divider>
<el-table :data="fieldList" size="mini" max-height="240" border fit>
<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="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="操作" width="90px">
<template slot-scope="{ row, $index }">
<el-button size="mini" type="text" @click="openFieldForm(row, $index)">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeField(row, $index)">移除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="element-drawer__button">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openFieldForm(null, -1)">添加字段</el-button>
</div>
<!-- <div class="element-property list-property">-->
<!-- <el-divider><i class="el-icon-coin"></i> 表单字段</el-divider>-->
<!-- <el-table :data="fieldList" size="mini" max-height="240" border fit>-->
<!-- <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="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="操作" width="90px">-->
<!-- <template slot-scope="{ row, $index }">-->
<!-- <el-button size="mini" type="text" @click="openFieldForm(row, $index)">编辑</el-button>-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeField(row, $index)">移除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </div>-->
<!-- <div class="element-drawer__button">-->
<!-- <el-button size="mini" type="primary" icon="el-icon-plus" @click="openFieldForm(null, -1)">添加字段</el-button>-->
<!-- </div>-->
<!--字段配置侧边栏-->
<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-item label="字段ID">
<el-input v-model="formFieldForm.id" clearable />
</el-form-item>
<el-form-item label="类型">
<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-select>
</el-form-item>
<el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">
<el-input v-model="formFieldForm.type" clearable />
</el-form-item>
<el-form-item label="名称">
<el-input v-model="formFieldForm.label" clearable />
</el-form-item>
<el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">
<el-input v-model="formFieldForm.datePattern" clearable />
</el-form-item>
<el-form-item label="默认值">
<el-input v-model="formFieldForm.defaultValue" clearable />
</el-form-item>
</el-form>
<!-- <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-item label="字段ID">-->
<!-- <el-input v-model="formFieldForm.id" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="类型">-->
<!-- <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-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
<!-- <el-input v-model="formFieldForm.type" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="名称">-->
<!-- <el-input v-model="formFieldForm.label" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">-->
<!-- <el-input v-model="formFieldForm.datePattern" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="默认值">-->
<!-- <el-input v-model="formFieldForm.defaultValue" clearable />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- 枚举值设置 -->
<template v-if="formFieldForm.type === 'enum'">
<el-divider key="enum-divider" />
<p class="listener-filed__title" key="enum-title">
<span><i class="el-icon-menu"></i>枚举值列表：</span>
<el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'enum')">添加枚举值</el-button>
</p>
<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="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />
<el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />
<el-table-column label="操作" width="90px">
<template slot-scope="{ row, $index }">
<el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'enum')">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'enum')">移除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<!-- &lt;!&ndash; 枚举值设置 &ndash;&gt;-->
<!-- <template v-if="formFieldForm.type === 'enum'">-->
<!-- <el-divider key="enum-divider" />-->
<!-- <p class="listener-filed__title" key="enum-title">-->
<!-- <span><i class="el-icon-menu"></i>枚举值列表：</span>-->
<!-- <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'enum')">添加枚举值</el-button>-->
<!-- </p>-->
<!-- <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="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template slot-scope="{ row, $index }">-->
<!-- <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'enum')">编辑</el-button>-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'enum')">移除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </template>-->
<!-- 校验规则 -->
<el-divider key="validation-divider" />
<p class="listener-filed__title" key="validation-title">
<span><i class="el-icon-menu"></i>约束条件列表：</span>
<el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'constraint')">添加约束</el-button>
</p>
<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="约束名称" prop="name" min-width="100px" show-overflow-tooltip />
<el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />
<el-table-column label="操作" width="90px">
<template slot-scope="{ row, $index }">
<el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'constraint')">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'constraint')">移除</el-button>
</template>
</el-table-column>
</el-table>
<!-- &lt;!&ndash; 校验规则 &ndash;&gt;-->
<!-- <el-divider key="validation-divider" />-->
<!-- <p class="listener-filed__title" key="validation-title">-->
<!-- <span><i class="el-icon-menu"></i>约束条件列表：</span>-->
<!-- <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'constraint')">添加约束</el-button>-->
<!-- </p>-->
<!-- <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="约束名称" prop="name" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template slot-scope="{ row, $index }">-->
<!-- <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'constraint')">编辑</el-button>-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'constraint')">移除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- 表单属性 -->
<el-divider key="property-divider" />
<p class="listener-filed__title" key="property-title">
<span><i class="el-icon-menu"></i>字段属性列表：</span>
<el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'property')">添加属性</el-button>
</p>
<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="属性编号" prop="id" min-width="100px" show-overflow-tooltip />
<el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
<el-table-column label="操作" width="90px">
<template slot-scope="{ row, $index }">
<el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'property')">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'property')">移除</el-button>
</template>
</el-table-column>
</el-table>
<!-- &lt;!&ndash; 表单属性 &ndash;&gt;-->
<!-- <el-divider key="property-divider" />-->
<!-- <p class="listener-filed__title" key="property-title">-->
<!-- <span><i class="el-icon-menu"></i>字段属性列表：</span>-->
<!-- <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'property')">添加属性</el-button>-->
<!-- </p>-->
<!-- <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="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template slot-scope="{ row, $index }">-->
<!-- <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'property')">编辑</el-button>-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'property')">移除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- 底部按钮 -->
<div class="element-drawer__button">
<el-button size="mini">取 消</el-button>
<el-button size="mini" type="primary" @click="saveField">保 存</el-button>
</div>
</el-drawer>
<!-- &lt;!&ndash; 底部按钮 &ndash;&gt;-->
<!-- <div class="element-drawer__button">-->
<!-- <el-button size="mini">取 消</el-button>-->
<!-- <el-button size="mini" type="primary" @click="saveField">保 存</el-button>-->
<!-- </div>-->
<!-- </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.elExtensionElements.values.filter(ex => ex.$type === `${this.prefix}:FormData`)?.[0] ||
window.bpmnInstances.moddle.create(`${this.prefix}:FormData`, { fields: [] });
// this.formData =
// this.elExtensionElements.values.filter(ex => ex.$type === `${this.prefix}:FormData`)?.[0] ||
// 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 });

295
ruoyi-ui/src/views/workflow/model/designer.vue
View File

@@ -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>

300
ruoyi-ui/src/views/workflow/model/index.vue
View File

@@ -36,16 +36,16 @@
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-upload"
size="mini"
@click="handleImport"
v-hasPermi="['workflow:model:import']"
>导入</el-button>
</el-col>
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- plain-->
<!-- icon="el-icon-upload"-->
<!-- size="mini"-->
<!-- @click="handleImport"-->
<!-- v-hasPermi="['workflow:model:import']"-->
<!-- >导入</el-button>-->
<!-- </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-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>
<!-- 添加或修改模型信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="30%" append-to-body @close="cancel()">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="模型标识" prop="modelKey">
<el-input v-model="form.modelKey" clearable disabled />
</el-form-item>
<el-form-item label="模型名称" prop="modelName">
<el-input v-model="form.modelName" clearable :disabled="form.modelId !== undefined" />
</el-form-item>
<el-form-item label="流程分类" prop="category">
<el-select v-model="form.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="form.description" type="textarea" placeholder="请输入内容" maxlength="200" show-word-limit/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="cancel('uploadForm')">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</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
v-if="designerOpen"
:modelId="designerData.modelId"
:processName="designerData.processName"
:processKey="designerData.processKey"
@save="submitSave()"
@close="designerOpen = false"
/>
<el-dialog :title="designerData.title" :visible.sync="designerOpen" append-to-body fullscreen>
<process-designer
:key="designerOpen"
style="border:1px solid rgba(0, 0, 0, 0.1);"
ref="modelDesigner"
v-loading="designerData.loading"
: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,
processKey: null
form: {
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 (form) {
// 重置form表单
this.$refs['upload'].clearFiles()
cancel() {
this.reset();
// 关闭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 = {
processKey: `Process_${dateTime}`,
processName: `业务流程_${dateTime}`
this.form = {
modelKey: `Process_${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) {

8
ruoyi-ui/src/views/workflow/work/start.vue
View File

@@ -14,8 +14,7 @@
</template>
<script>
import { getFormByDeployId } from '@/api/workflow/deploy'
import { startProcess } from '@/api/workflow/process'
import { getProcessForm, 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