workflow-engine-web/flowable-engine-web/src/views/workspace/AboutInstance.vue

<template>
  <div>
    <el-table :data="tableData"
              @row-click="clickRow"
              style="width: 100%">
      <el-table-column
          prop="deploymentName"
          label="审批类型"
          width="180"/>
      <el-table-column
          prop="approveName"
          label="发起人"
          width="180"/>
      <el-table-column
          prop="submitTime"
          label="提交时间"/>
      <el-table-column
          prop="endTime"
          label="结束时间"/>
      <el-table-column
          prop="taskName"
          label="当前节点"/>
      <el-table-column
          label="处理耗时">
        <template slot-scope="scope">
          {{ getTimeConsuming(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column
          prop="state"
          label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state === '1'">进行中</el-tag>
          <el-tag v-if="scope.row.state === '4'" type="success">审批通过</el-tag>
          <el-tag v-if="scope.row.state === '3'" type="danger">审批驳回</el-tag>
          <el-tag v-if="scope.row.state === '2'" type="info">已撤销</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button size="min" type="text" icon="el-icon-thumb">再次提交</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
        title="审批详情"
        size="500px"
        :visible.sync="approveOpen"
        direction="rtl">
      <div v-loading="loading">
        <div class="top">
          <div class="top_left">
            <el-avatar size="large" :src="processInstanceData.userInfo.avatar"></el-avatar>
            <span style="text-align: center;color: #19191a;font-size: 14px;">{{ processInstanceData.userInfo.name }}</span>
          </div>
          <div class="top_right">
            <div style="margin-bottom: 12px">
              <span style="font-size: 15px;">{{ selectProcessInstance.deploymentName }}</span>
              <el-tag class="state_tag" v-if="selectProcessInstance.state === '1'" size="mini" >进行中</el-tag>
              <el-tag class="state_tag" v-if="selectProcessInstance.state === '4'" size="mini" type="success">审批通过</el-tag>
              <el-tag class="state_tag" v-if="selectProcessInstance.state === '3'" size="mini" type="danger">审批驳回</el-tag>
              <el-tag class="state_tag" v-if="selectProcessInstance.state === '2'" size="mini" type="info">已撤销</el-tag>
              <el-tooltip class="item" effect="dark" content="查看详细流程" placement="top-start">
                <el-icon class="el-icon-view" style="float: right;font-size: 20px;cursor: pointer" @click.native="processDiagramViewer = true"></el-icon>
              </el-tooltip>
            </div>
            <div>
              <span style="color: rgb(108, 108, 108);">编号: {{ selectProcessInstance.processInstanceId }}</span>
            </div>
          </div>
        </div>
        <div style="height: 15px;background:#f5f5f5;"></div>
        <form-render-view v-if="!loading" ref="taskViewForm" :form-items="processInstanceData.formItems"
                          v-model="processInstanceData.formData"/>
        <div style="height: 15px;background:#f5f5f5;"></div>
        <operation-render v-if="!loading"
                          :operation-list="processInstanceData.operationList"
                          :state="selectProcessInstance.state"/>
        <div style="height: 15px;background:#f5f5f5;"></div>
      </div>
    </el-drawer>

    <el-dialog title="流程详情" :visible.sync="processDiagramViewer" :close-on-click-modal="true">
      <process-diagram-viewer v-if="processDiagramViewer"/>
      <div style="height: 70px;"></div>
    </el-dialog>
  </div>
</template>

<script>
import FormRenderView from '@/views/common/form/FormRenderView'
import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
import {getAboutInstanceList, getInitiatedInstanceInfo} from "@/api/processInstance";
import {timeLength} from '@/utils/date'
import OperationRender from "../common/operation/OperationRender";
export default {
  name: "AboutInstance",
  components: {OperationRender, FormRenderView, ProcessDiagramViewer},
  data() {
    return {
      approveOpen: false,
      processDiagramViewer: false,
      selectProcessInstance: {},
      tableData: [],
      loading: false,
      processInstanceData: {
        userInfo: {},
        formData: {},
        formItems: [],
        processList: [],
        operationList: [],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    clickRow(row) {
      this.approveOpen = true;
      this.loadProcessInstance(row.processInstanceId)
      this.selectProcessInstance = row
    },

    loadProcessInstance(processInstanceId) {
      let that = this;
      this.init();
      getInitiatedInstanceInfo(processInstanceId).then(res => {
        let data = res.data
        that.processInstanceData = data
        that.$store.state.design = data;
        that.$store.state.runningList = data.runningList;
        that.$store.state.endList = data.endList;
        that.$store.state.noTakeList = data.noTakeList;
        that.$store.state.refuseList = data.refuseList;
        that.$store.state.passList = data.passList;
        this.loading = false;
        console.log(data, "获取到的结果数据")
      })
    },

    init() {
      this.processInstanceData = {
        userInfo: {},
        formData: {},
        formItems: [],
        processList: [],
      };

      this.loading = true;
      this.$store.state.design = this.taskData;
      this.$store.state.runningList = [];
      this.$store.state.endList = [];
      this.$store.state.noTakeList = [];
      this.$store.state.refuseList = [];
      this.$store.state.passList = [];
      this.$store.state.diagramMode = "viewer";
      this.$store.state.preview = false;
    },

    getList() {
      getAboutInstanceList().then(res => {
        let data = res.data
        this.tableData = data.rows
      })
    },
    getTimeConsuming(instance) {
      if (instance.state != 1) {
        //dateFormat(开始时间,结束时间)
        return timeLength(instance.submitTime,instance.endTime);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  padding: 0 10px 10px 10px;
  display: flex;

.top_left {
  display: flex;
  flex-direction: column;
  width: 50px;
  align-items: center;
}

.top_right {
  width: 85%;
  display: flex;
  flex-direction: column;
//justify-content: space-between;
  font-size: 13px;
  margin-left: 10px;
}
}

.state_tag{
  font-size: 12px;
  //margin-right: 15px;
}

</style>