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

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