xg_total_process_master_cloud_vue/src/views/flowable/task/FlowHisTableCcpm.vue

<!--文件上传组件-->
<template>
  <div>
    <!--审批流程-->
    <el-divider v-if="showDivider" content-position="left"><i class="el-icon-document"></i> {{dividerName}}</el-divider>

    <el-steps :active="3" simple style="margin-top: 10px;margin-bottom: 10px;font-weight: bold;">
      <el-step v-for="item in flowChart" :title="item.taskName" ></el-step>
    </el-steps>

    <vxe-table
        border="inner"
        show-footer
        show-overflow="title"
        ref="flowHisTable"
        class="vxe-table-element"
        :data="histoicFlowList"
        :loading="loading"
      >
        <vxe-table-column min-width="80" align="center" field="taskName" title="审批环节" >
          <template #default="scope">
            <span v-if="commonJS.isNotEmpty(scope.row.durationTime)" style="color:#409EFF">{{scope.row.taskName}}</span>
            <span v-else-if="commonJS.isEmpty(scope.row.durationTime) && commonJS.isNotEmpty(scope.row.beginDate)" style="color:#F56C6C">{{scope.row.taskName}}</span>
            <span v-else >{{scope.row.taskName}}</span>
          </template>
        </vxe-table-column>
        <vxe-table-column min-width="80" align="center" field="roleName" title="审批角色" ></vxe-table-column>
        <vxe-table-column min-width="80" align="center" field="assigneeName" title="审批人"  ></vxe-table-column>
        <vxe-table-column min-width="80" align="center" field="beginDate" title="开始时间"  ></vxe-table-column>
        <vxe-table-column min-width="80" align="center" field="endDate" title="结束时间" ></vxe-table-column>
        <vxe-table-column min-width="80" align="center" field="comment" title="提交意见"  ></vxe-table-column>
        <vxe-table-column min-width="80" align="center" field="durationTime" title="任务历时" ></vxe-table-column>
      </vxe-table>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        dividerName: '',
        loading: false,
        histoicFlowList: [],
        flowChart: [],
        showDivider: true
      }
    },
    watch: {
    },
    created () {
    },
    components: {
    },
    mounted () {
    },
    methods: {
      /**
       * dividerName: 组件中divider的名称赋值
       * showDivider: 组件中divider是否展示
       *     注：值为空时，默认值为true 展示
       *    showDivider=false时 Divider隐藏
       **/
      setDividerName (dividerName, showDivider) {
        this.showDivider = true
        if (this.commonJS.isNotEmpty(showDivider)) {
          if (showDivider === false) {
            this.showDivider = false
          }
        }
        this.dividerName = '审批流程'
        if (this.commonJS.isNotEmpty(dividerName)) {
          this.dividerName = dividerName
        }
      },
      /**
       * 组件初始化
       * @param flowChart 流程流向图
       * @param histoicFlowList 流程历史
       * @param dividerName 组件中divider的名称  默认为'审批流程'
       * @param showDivider 组件中divider是否展示  默认值为true 展示
       */
      setFlowHis (flowChart, histoicFlowList, dividerName, showDivider) {
        this.histoicFlowList = []
        if (this.commonJS.isNotEmpty(histoicFlowList)) {
          this.histoicFlowList = histoicFlowList
        }
        this.flowChart = []
        if (this.commonJS.isNotEmpty(flowChart)) {
          this.flowChart = flowChart
        }
        this.dividerName = '审批流程'
        if (this.commonJS.isNotEmpty(dividerName)) {
          this.dividerName = dividerName
        }
        this.showDivider = true
        if (this.commonJS.isNotEmpty(showDivider)) {
          if (showDivider === false) {
            this.showDivider = false
          }
        }
      },
      /**
       * 关闭时清除组件中的数据
       */
      clearFlowHis () {
        this.histoicFlowList = []
        this.flowChart = []
      },
      // 开启/关闭页面的加载中状态
      changeLoading (loading) {
        this.loading = false
        if (this.commonJS.isNotEmpty(loading)) {
          this.loading = loading
        }
      }
    }
  }
</script>
<style scoped>
  .el-divider__text {
    font-size: 16px;
    font-weight: bold;
  }
</style>