mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-26 09:11:52 +08:00
BPM 模型重构 4：修改模型，修改成单独的弹窗
This commit is contained in:
YunaiV
parent
24c03cf176
commit
8c7db2af70
@ -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;
|
||||
|
||||
}
|
||||
|
||||
@ -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());
|
||||
|
||||
@ -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: '设计流程' }
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user