kd-aiot-frontend-mes/src/views/outsourcing/components/flow.vue

<template>
  <el-dialog title="流程" :before-close="handleClose" :visible.sync="dialogVisible" :close-on-click-modal="false"
    :append-to-body="true" width="80%">
    <div class="app-container" style="padding: 15px">
      <!-- 审批记录 -->
      <el-card class="box-card" v-loading="tasksLoad">
        <div slot="header" class="clearfix">
          <span class="el-icon-picture-outline">审批记录</span>
        </div>
        <el-col :span="16" :offset="4">
          <div class="block">
            <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-col>
      </el-card>
      <!-- 高亮流程图 -->
      <el-card class="box-card" v-loading="processInstanceLoading">
        <div slot="header" class="clearfix">
          <span class="el-icon-picture-outline">流程图1</span>
        </div>

        <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" :activityData="activityList"
          :processInstanceData="processInstance" :taskData="tasks" />
      </el-card>
    </div>
  </el-dialog>
</template>

<script>
import { getProcessDefinitionBpmnXML } from '@/api/bpm/index';
import store from '@/store';
import { getProcessInstance } from '@/api/bpm/index';
import { getDate } from '@/utils/dateUtils';
import dictMixins from '@/mixins/dictMixins';
import { getTaskListByProcessInstanceId } from '@/api/bpm/index';
import { getActivityList } from '@/api/bpm/index';
// import Vue from 'vue';

// 流程实例的详情页，可用于审批
export default {
  name: 'outsourcing',
  mixins: [dictMixins],

  components: {},
  data() {
    return {
      // 遮罩层
      processInstanceLoading: true,
      dialogVisible: false,

      // 流程实例
      id: undefined, // 流程实例的编号
      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: {
    open(id) {
      this.id = id;
      this.dialogVisible = true;
      this.getDetail();
    },
    /** 获得流程实例 */
    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;
          }
        });

        // 取消加载中
        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 '';
    },
    handleClose() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss">
.my-process-designer {
  height: calc(100vh - 200px);
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}
</style>