完成流程定义的列表的实现

This commit is contained in:
YunaiV
2022-01-03 11:08:47 +08:00
parent 509e11a7b0
commit f8b34d5b6d
10 changed files with 154 additions and 45 deletions

View File

@ -8,9 +8,9 @@ export function getDefinitionPage(query) {
})
}
export function exportProcessDefinition(query) {
export function getDefinitionBpmnXML(id) {
return request({
url: '/workflow/process/definition/export?processDefinitionId='+query.id,
url: '/bpm/definition/get-bpmn-xml?id=' + id,
method: 'get'
})
}

View File

@ -2,10 +2,57 @@
<div class="app-container">
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="ID" align="center" prop="id" />
<el-table-column label="流程名字" align="center" prop="name" />
<el-table-column label="定义编号" align="center" prop="id" />
<el-table-column label="定义名称" align="center" prop="name" width="200">
<template slot-scope="scope">
<el-button type="text" @click="handleBpmnDetail(scope.row)">
<span>{{ scope.row.name }}</span>
</el-button>
</template>
</el-table-column>
<el-table-column label="定义分类" align="center" prop="category" width="100">
<template slot-scope="scope">
<span>{{ getDictDataLabel(DICT_TYPE.BPM_MODEL_CATEGORY, scope.row.category) }}</span>
</template>
</el-table-column>
<el-table-column label="表单信息" align="center" prop="formId">
<template slot-scope="scope">
<el-button v-if="scope.row.formId" type="text" @click="handleFormDetail(scope.row)">
<span>{{ scope.row.formName }}</span>
</el-button>
<label v-else>暂无表单</label>
</template>
</el-table-column>
<el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
<template slot-scope="scope">
<el-tag size="medium" v-if="scope.row">v{{ scope.row.version }}</el-tag>
<el-tag size="medium" type="warning" v-else>未部署</el-tag>
</template>
</el-table-column>
<el-table-column label="激活状态" align="center" prop="version" width="80">
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.suspensionState === 1">激活</el-tag>
<el-tag type="warning" v-if="scope.row.suspensionState === 2">挂起</el-tag>
</template>
</el-table-column>
<el-table-column label="部署时间" align="center" prop="deploymentTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.deploymentTime) }}</span>
</template>
</el-table-column>
<el-table-column label="定义描述" align="center" prop="description" width="300" show-overflow-tooltip />
</el-table>
<!-- 流程表单配置详情 -->
<el-dialog title="表单详情" :visible.sync="detailOpen" width="50%" append-to-body>
<parser :key="new Date().getTime()" :form-conf="detailForm" />
</el-dialog>
<!-- 流程模型图的预览 -->
<el-dialog title="流程图" :visible.sync="showBpmnOpen" width="80%" append-to-body>
<my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
</el-dialog>
<!-- 分页组件 -->
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
@pagination="getList"/>
@ -13,10 +60,17 @@
</template>
<script>
import {getDefinitionPage} from "@/api/bpm/definition";
import {getDefinitionBpmnXML, getDefinitionPage} from "@/api/bpm/definition";
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
import {getForm} from "@/api/bpm/form";
import {decodeFields} from "@/utils/formGenerator";
import Parser from '@/components/parser/Parser'
export default {
name: "processDefinition",
components: {
Parser
},
data() {
return {
// 遮罩层
@ -29,7 +83,23 @@ export default {
queryParams: {
pageNo: 1,
pageSize: 10
}
},
// 流程表单详情
detailOpen: false,
detailForm: {
fields: []
},
// BPMN 数据
showBpmnOpen: false,
bpmnXML: null,
bpmnControlForm: {
prefix: "activiti"
},
// 数据字典
categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
};
},
created() {
@ -50,7 +120,33 @@ export default {
}
);
},
/** 流程表单的详情按钮操作 */
handleFormDetail(row) {
getForm(row.formId).then(response => {
// 设置值
const data = response.data
this.detailForm = {
...JSON.parse(data.conf),
fields: decodeFields(data.fields)
}
// 弹窗打开
this.detailOpen = true
})
},
/** 流程图的详情按钮操作 */
handleBpmnDetail(row) {
getDefinitionBpmnXML(row.id).then(response => {
this.bpmnXML = response.data
// 弹窗打开
this.showBpmnOpen = true
})
},
}
};
</script>
<style lang="scss">
.my-process-designer {
height: calc(100vh - 200px);
}
</style>

View File

@ -26,7 +26,7 @@
<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="['infra:config:create']">新建流程</el-button>
v-hasPermi="['infra:config:create']">新建流程模型</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
@ -72,7 +72,7 @@
:active-value="1" :inactive-value="2" @change="handleStatusChange(scope.row)" />
</template>
</el-table-column>
<el-table-column label="部署时间" align="center" prop="createTime" width="180">
<el-table-column label="部署时间" align="center" prop="deploymentTime" width="180">
<template slot-scope="scope">
<span v-if="scope.row.processDefinition">{{ parseTime(scope.row.processDefinition.deploymentTime) }}</span>
</template>
@ -256,9 +256,7 @@ export default {
</script>
<style lang="scss">
.my-process-designer {
height: calc(100vh - 200px);
}
</style>