huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-22 23:31:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

流程详情页 30% - 表单信息的展示

Browse Source
This commit is contained in:
YunaiV 2022-01-16 22:16:49 +08:00
parent f049bd7530
commit f0963c3941
10 changed files with 100 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/controller/task/BpmTaskController.java
View File

@ -57,12 +57,12 @@ public class BpmTaskController {
return success(true);
}
@GetMapping("/list-by-process-instance-id")
@GetMapping("/historic-list-by-process-instance-id")
@ApiOperation(value = "获得指定流程实例的任务列表", notes = "包括完成的、未完成的")
@ApiImplicitParam(name = "processInstanceId", value = "流程实例的编号", required = true, dataTypeClass = String.class)
public CommonResult<List<BpmTaskRespVO>> getTaskListByProcessInstanceId(
public CommonResult<List<BpmTaskRespVO>> getHistoricTaskListByProcessInstanceId(
@RequestParam("processInstanceId") String processInstanceId) {
return success(taskService.getTaskListByProcessInstanceId(processInstanceId));
return success(taskService.getHistoricTaskListByProcessInstanceId(processInstanceId));
}
/**

1
yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/convert/task/BpmProcessInstanceConvert.java
View File

@ -64,6 +64,7 @@ public interface BpmProcessInstanceConvert {
@Mappings({
@Mapping(source = "id", target = "processInstanceId"),
@Mapping(source = "id", target = "id", ignore = true),
@Mapping(source = "startDate", target = "createTime"),
@Mapping(source = "initiator", target = "startUserId"),
@Mapping(source = "status", target = "status", ignore = true)

2
yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/service/task/BpmTaskService.java
View File

@ -31,7 +31,7 @@ public interface BpmTaskService {
* @param processInstanceId 流程实例的编号
* @return 流程任务列表
*/
List<BpmTaskRespVO> getTaskListByProcessInstanceId(String processInstanceId);
List<BpmTaskRespVO> getHistoricTaskListByProcessInstanceId(String processInstanceId);
/**
* 获得流程任务列表

2
yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/service/task/impl/BpmTaskServiceImpl.java
View File

@ -91,7 +91,7 @@ public class BpmTaskServiceImpl implements BpmTaskService {
}
@Override
public List<BpmTaskRespVO> getTaskListByProcessInstanceId(String processInstanceId) {
public List<BpmTaskRespVO> getHistoricTaskListByProcessInstanceId(String processInstanceId) {
// 获得任务列表
List<HistoricTaskInstance> tasks = historyService.createHistoricTaskInstanceQuery()
.processInstanceId(processInstanceId)

2
yudao-admin-ui/src/api/bpm/processInstance.js
View File

@ -27,7 +27,7 @@ export function cancelProcessInstance(id, reason) {
})
}
export function getMyProcessInstance(id) {
export function getProcessInstance(id) {
return request({
url: '/bpm/process-instance/get?id=' + id,
method: 'get',

6
yudao-admin-ui/src/api/bpm/task.js
View File

@ -40,3 +40,9 @@ export function rejectTask(data) {
})
}
export function getHistoricTaskListByProcessInstanceId(processInstanceId) {
return request({
url: '/bpm/task/historic-list-by-process-instance-id?processInstanceId=' + processInstanceId,
method: 'get',
})
}

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

@ -198,6 +198,12 @@ export const constantRoutes = [
component: (resolve) => require(['@/views/bpm/processInstance/create'], resolve),
name: '发起流程',
meta: { title: '发起流程' }
},
{
path: 'process-instance/detail',
component: (resolve) => require(['@/views/bpm/processInstance/detail'], resolve),
name: '流程详情',
meta: { title: '流程详情' }
}
]
},

2
yudao-admin-ui/src/views/bpm/processInstance/create.vue
View File

@ -70,8 +70,6 @@ export default {
return {
// 遮罩层
loading: true,
// 总条数
total: 0,
// 表格数据
list: [],

146
yudao-admin-ui/src/views/bpm/processInstance/detail.vue
View File

@ -1,54 +1,25 @@
<template>
<div class="app-container">
<!-- 第一步，通过流程定义的列表，选择对应的流程 -->
<div v-if="!selectProcessInstance">
<el-table v-loading="loading" :data="list">
<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="processDefinition.version" width="80">
<template slot-scope="scope">
<el-tag size="medium" v-if="scope.row">v{{ scope.row.version }}</el-tag>
</template>
</el-table-column>
<el-table-column label="流程描述" align="center" prop="description" width="300" show-overflow-tooltip />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button type="text" size="small" icon="el-icon-plus" @click="handleSelect(scope.row)">选择</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 第二步，填写表单，进行流程的提交 -->
<div v-else>
<el-card class="box-card" >
<div slot="header" class="clearfix">
<span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span>
<el-button style="float: right;" type="primary" @click="selectProcessInstance = undefined">选择其它流程</el-button>
<!-- TODO 审批信息 -->
<!-- 申请信息 -->
<el-card class="box-card" v-loading="processInstanceLoading">
<div slot="header" class="clearfix">
<span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
</div>
<el-col :span="16" :offset="6">
<div>
<parser :key="new Date().getTime()" :form-conf="detailForm" @submit="submitForm" />
</div>
<el-col :span="16" :offset="6">
<div>
<parser :key="new Date().getTime()" :form-conf="detailForm" @submit="submitForm" />
</div>
</el-col>
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span class="el-icon-picture-outline">流程图</span>
</div>
<my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
</el-card>
</div>
</el-col>
</el-card>
<!-- TODO 审批记录 -->
<!-- TODO 流程图 -->
<el-card class="box-card" v-loading="processInstanceLoading">
<div slot="header" class="clearfix">
<span class="el-icon-picture-outline">流程图</span>
</div>
<my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
</el-card>
</div>
</template>
@ -58,7 +29,8 @@ import {DICT_TYPE, getDictDatas} from "@/utils/dict";
import {getForm} from "@/api/bpm/form";
import {decodeFields} from "@/utils/formGenerator";
import Parser from '@/components/parser/Parser'
import {createProcessInstance, getMyProcessInstancePage} from "@/api/bpm/processInstance";
import {createProcessInstance, getMyProcessInstancePage, getProcessInstance} from "@/api/bpm/processInstance";
import {getHistoricTaskListByProcessInstanceId} from "@/api/bpm/task";
// 流程实例的详情页，可用于审批
export default {
@ -69,11 +41,10 @@ export default {
data() {
return {
// 遮罩层
loading: true,
// 总条数
total: 0,
// 表格数据
list: [],
processInstanceLoading: true,
// 流程实例
id: undefined, // 流程实例的编号
processInstance: {},
// 流程表单详情
detailForm: {
@ -86,27 +57,65 @@ export default {
prefix: "activiti"
},
// 流程表单
selectProcessInstance: undefined, // 选择的流程实例
// 审批记录
historicTasksLoad: true,
historicTasks: [],
// 数据字典
categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
};
},
created() {
this.getList();
this.id = this.$route.query.id;
if (!this.id) {
this.$message.error('未传递 id 参数，无法查看流程信息');
return;
}
this.getDetail();
},
methods: {
/** 查询流程定义列表 */
getList() {
this.loading = true;
getProcessDefinitionList({
suspensionState: 1
}).then(response => {
this.list = response.data
this.loading = false
/** 获得流程实例 */
getDetail() {
// 获得流程实例相关
this.processInstanceLoading = true;
getProcessInstance(this.id).then(response => {
if (!response.data) {
this.$message.error('查询不到流程信息！');
return;
}
);
// 设置流程信息
this.processInstance = response.data;
// 设置表单信息
this.detailForm = {
...JSON.parse(this.processInstance.processDefinition.formConf),
disabled: true, // 表单禁用
formBtns: false, // 按钮隐藏
fields: decodeFields(this.processInstance.processDefinition.formFields)
}
// 设置表单的值
this.detailForm.fields.forEach(item => {
const val = this.processInstance.formVariables[item.__vModel__]
if (val) {
item.__config__.defaultValue = val
}
})
// 加载流程图
getProcessDefinitionBpmnXML(this.processInstance.processDefinition.id).then(response => {
this.bpmnXML = response.data
})
// 取消加载中
this.processInstanceLoading = false;
});
// 获得流程任务列表（审批记录）
this.historicTasksLoad = true;
getHistoricTaskListByProcessInstanceId(this.id).then(response => {
this.historicTasks = response.data;
this.historicTasksLoad = true;
});
},
/** 处理选择流程的按钮操作 **/
handleSelect(row) {
@ -121,10 +130,7 @@ export default {
fields: decodeFields(row.formFields)
}
// 加载流程图
getProcessDefinitionBpmnXML(row.id).then(response => {
this.bpmnXML = response.data
})
} else if (row.formCustomCreatePath) {
this.$router.push({ path: row.formCustomCreatePath});
// 这里暂时无需加载流程图，因为跳出到另外个 Tab；

6
yudao-admin-ui/src/views/bpm/task/todo.vue
View File

@ -36,7 +36,7 @@
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<!-- TODO 权限、颜色 -->
<el-button size="mini" type="text" icon="el-icon-edit">审批</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleAudit(scope.row)">审批</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click="audit(scope.row, true)">通过</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click="audit(scope.row, false)">不通过</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.suspensionState === 2">激活</el-button>
@ -104,6 +104,10 @@ export default {
this.resetForm("queryForm");
this.handleQuery();
},
/** 处理审批按钮 */
handleAudit(row) {
this.$router.push({ path: "/bpm/process-instance/detail", query: { id: row.processInstance.id}});
},
audit(row, pass) {
if (pass) {
approveTask({