|
|
@@ -1,268 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-col :span="12">
|
|
|
- <!-- 审批记录 -->
|
|
|
- <el-card class="box-card" v-loading="tasksLoad">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <span class="el-icon-picture-outline">审批记录</span>
|
|
|
- </div>
|
|
|
- <div class="block details-bpm-list">
|
|
|
- <el-timeline>
|
|
|
- <el-timeline-item
|
|
|
- v-for="(item, index) in tasks"
|
|
|
- :key="index"
|
|
|
- :icon="getTimelineItemIcon(item)"
|
|
|
- :type="getTimelineItemType(item)"
|
|
|
- >
|
|
|
- <p style="font-weight: 700">任务：{{ item.name }}</p>
|
|
|
- <el-card :body-style="{ padding: '10px' }">
|
|
|
- <label
|
|
|
- v-if="item.assigneeUser"
|
|
|
- style="font-weight: normal; margin-right: 30px"
|
|
|
- >
|
|
|
- 审批人：{{ item.assigneeUser.nickname }}
|
|
|
- <el-tag type="info" size="mini">{{
|
|
|
- item.assigneeUser.deptName
|
|
|
- }}</el-tag>
|
|
|
- </label>
|
|
|
- <label style="font-weight: normal" v-if="item.createTime"
|
|
|
- >创建时间：</label
|
|
|
- >
|
|
|
- <label style="color: #8a909c; font-weight: normal">{{
|
|
|
- item.createTime
|
|
|
- }}</label>
|
|
|
- <label
|
|
|
- v-if="item.endTime"
|
|
|
- style="margin-left: 30px; font-weight: normal"
|
|
|
- >审批时间：</label
|
|
|
- >
|
|
|
- <label
|
|
|
- v-if="item.endTime"
|
|
|
- style="color: #8a909c; font-weight: normal"
|
|
|
- >
|
|
|
- {{ item.endTime }}</label
|
|
|
- >
|
|
|
- <label
|
|
|
- v-if="item.durationInMillis"
|
|
|
- style="margin-left: 30px; font-weight: normal"
|
|
|
- >耗时：</label
|
|
|
- >
|
|
|
- <label
|
|
|
- v-if="item.durationInMillis"
|
|
|
- style="color: #8a909c; font-weight: normal"
|
|
|
- >
|
|
|
- {{ getDateStar(item.durationInMillis) }}
|
|
|
- </label>
|
|
|
- <p v-if="item.reason">
|
|
|
- <el-tag :type="getTimelineItemType(item)">{{
|
|
|
- item.reason
|
|
|
- }}</el-tag>
|
|
|
- </p>
|
|
|
- </el-card>
|
|
|
- </el-timeline-item>
|
|
|
- </el-timeline>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import {
|
|
|
- getProcessDefinitionBpmnXML,
|
|
|
- getProcessInstance,
|
|
|
- getActivityList,
|
|
|
- getTaskListByProcessInstanceId
|
|
|
- } from '@/api/produce/bom.js';
|
|
|
- import store from '@/store';
|
|
|
- // import { getProcessInstance } from '@/api/bpm/processInstance';
|
|
|
- import { getDate } from '@/utils/dateUtils';
|
|
|
- import dictMixins from '@/mixins/dictMixins';
|
|
|
- // import { getTaskListByProcessInstanceId } from '@/api/bpm/task';
|
|
|
- // import { getActivityList } from '@/api/bpm/activity';
|
|
|
- // import Vue from 'vue';
|
|
|
-
|
|
|
- // 流程实例的详情页，可用于审批
|
|
|
- export default {
|
|
|
- name: 'bpmList',
|
|
|
- mixins: [dictMixins],
|
|
|
- emits: ['setCurrenNode'],
|
|
|
- components: {},
|
|
|
- props: {
|
|
|
- // 流程id
|
|
|
- id: {
|
|
|
- default: ''
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // 遮罩层
|
|
|
- processInstanceLoading: true,
|
|
|
- dialogVisible: false,
|
|
|
-
|
|
|
- processInstance: {},
|
|
|
-
|
|
|
- // BPMN 数据
|
|
|
- bpmnXML: null,
|
|
|
- bpmnControlForm: {
|
|
|
- prefix: 'flowable'
|
|
|
- },
|
|
|
- activityList: [],
|
|
|
-
|
|
|
- // 审批记录
|
|
|
- tasksLoad: true,
|
|
|
- tasks: []
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- // this.id = this.$route.query.id;
|
|
|
- // if (!this.id) {
|
|
|
- // this.$message.error('未传递 id 参数，无法查看流程信息');
|
|
|
- // return;
|
|
|
- // }
|
|
|
- this.getDetail();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- /** 获得流程实例 */
|
|
|
- getDetail() {
|
|
|
- // 获得流程实例相关
|
|
|
- this.processInstanceLoading = true;
|
|
|
- getProcessInstance(this.id).then((response) => {
|
|
|
- if (!response) {
|
|
|
- this.$message.error('查询不到流程信息！');
|
|
|
- return;
|
|
|
- }
|
|
|
- // 设置流程信息
|
|
|
- this.processInstance = response;
|
|
|
-
|
|
|
- // //将业务表单，注册为动态组件
|
|
|
- // const path = this.processInstance.processDefinition.formCustomViewPath;
|
|
|
- // Vue.component("async-biz-form-component", function (resolve) {
|
|
|
- // require([`@/views${path}`], resolve);
|
|
|
- // });
|
|
|
- // 加载流程图
|
|
|
- getProcessDefinitionBpmnXML(
|
|
|
- this.processInstance.processDefinition.id
|
|
|
- ).then((response) => {
|
|
|
- this.bpmnXML = response;
|
|
|
- });
|
|
|
- // 加载活动列表
|
|
|
- getActivityList({
|
|
|
- processInstanceId: this.processInstance.id
|
|
|
- }).then((response) => {
|
|
|
- console.log(response, 'response');
|
|
|
- this.activityList = response;
|
|
|
- });
|
|
|
-
|
|
|
- // 取消加载中
|
|
|
- this.processInstanceLoading = false;
|
|
|
- });
|
|
|
-
|
|
|
- // 获得流程任务列表（审批记录）
|
|
|
- this.tasksLoad = true;
|
|
|
- getTaskListByProcessInstanceId(this.id).then((response) => {
|
|
|
- // 审批记录
|
|
|
- this.tasks = [];
|
|
|
- // 移除已取消的审批
|
|
|
- response.forEach((task) => {
|
|
|
- if (task.result !== 4) {
|
|
|
- this.tasks.push(task);
|
|
|
- }
|
|
|
- });
|
|
|
- // 排序，将未完成的排在前面，已完成的排在后面；
|
|
|
- this.tasks.sort((a, b) => {
|
|
|
- // 有已完成的情况，按照完成时间倒序
|
|
|
- if (a.endTime && b.endTime) {
|
|
|
- return b.endTime - a.endTime;
|
|
|
- } else if (a.endTime) {
|
|
|
- return 1;
|
|
|
- } else if (b.endTime) {
|
|
|
- return -1;
|
|
|
- // 都是未完成，按照创建时间倒序
|
|
|
- } else {
|
|
|
- return b.createTime - a.createTime;
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 需要审核的记录
|
|
|
- const userId = store.getters.userId;
|
|
|
- this.tasks.forEach((task) => {
|
|
|
- if (task.result !== 1 && task.result !== 6) {
|
|
|
- // 只有待处理才需要
|
|
|
- return;
|
|
|
- }
|
|
|
- if (!task.assigneeUser || task.assigneeUser.id !== userId) {
|
|
|
- // 自己不是处理人
|
|
|
- return;
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- const currenItem = this.tasks.find((i) => i.result == 1);
|
|
|
- if (currenItem) {
|
|
|
- // 当前处理中的节点
|
|
|
- this.$emit('setCurrenNode', currenItem);
|
|
|
- }
|
|
|
-
|
|
|
- // 取消加载中
|
|
|
- this.tasksLoad = false;
|
|
|
- });
|
|
|
- },
|
|
|
- getDateStar(ms) {
|
|
|
- return getDate(ms);
|
|
|
- },
|
|
|
- getTimelineItemIcon(item) {
|
|
|
- if (item.result === 1) {
|
|
|
- return 'el-icon-time';
|
|
|
- }
|
|
|
- if (item.result === 2) {
|
|
|
- return 'el-icon-check';
|
|
|
- }
|
|
|
- if (item.result === 3) {
|
|
|
- return 'el-icon-close';
|
|
|
- }
|
|
|
- if (item.result === 4) {
|
|
|
- return 'el-icon-remove-outline';
|
|
|
- }
|
|
|
- if (item.result === 5) {
|
|
|
- return 'el-icon-back';
|
|
|
- }
|
|
|
- return '';
|
|
|
- },
|
|
|
- getTimelineItemType(item) {
|
|
|
- if (item.result === 1) {
|
|
|
- return 'primary';
|
|
|
- }
|
|
|
- if (item.result === 2) {
|
|
|
- return 'success';
|
|
|
- }
|
|
|
- if (item.result === 3) {
|
|
|
- return 'danger';
|
|
|
- }
|
|
|
- if (item.result === 4) {
|
|
|
- return 'info';
|
|
|
- }
|
|
|
- if (item.result === 5) {
|
|
|
- return 'warning';
|
|
|
- }
|
|
|
- if (item.result === 6) {
|
|
|
- return 'default';
|
|
|
- }
|
|
|
- return '';
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- .my-process-designer {
|
|
|
- height: calc(100vh - 200px);
|
|
|
- }
|
|
|
-
|
|
|
- .box-card {
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .details-bpm-list {
|
|
|
- max-height: 120px;
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
-</style>
|
lucw