p38192567
/
ruoyi-vue-pro1
mirror of https://gitee.com/zhijiantianya/ruoyi-vue-pro.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
YunaiV 2022-01-12 00:33:50 +08:00
parent 24c03cf176
commit 8c7db2af70
5 changed files with 120 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

2
yudao-admin-ui/src/router/index.js
View File

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

1
yudao-admin-ui/src/utils/dict.js
View File

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

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

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