CKQ/src/components/WorkFlow/ActivityHandleRecord.vue

<template>
  <div class="el-row">
    <el-table :data="flowData.activityInsRecordList">
      <el-table-column type="index" align="center" label="序号" width="50" />

      <el-table-column prop="actionTime" align="center" label="处理时间" width="170">
        <template v-slot="{row}">
          <span><i class="el-icon el-icon-time" />{{ row.actionTime }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="accountAvatar" align="center" label="人员" width="160">
        <template v-slot="{row}">
          <div class="flex-center">
            <el-image style="width: 20px; height: 20px;border-radius:50%" :src="row.accountAvatar" :preview-src-list="[row.accountAvatar]" />
            <span class="name">{{ row.accountName }}</span><span>({{ row.positionName }})</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="activityInsTitle" align="center" label="处理关卡" width="100">
        <template v-slot="{row}">
          <span><el-tag type="success" effect="plain" color="rgb(38 69 90)">{{ row.activityInsTitle }}</el-tag></span>
        </template>
      </el-table-column>

      <el-table-column prop="actionTitle" align="center" label="处理动作" width="100">
        <template v-slot="{row}">
          <span><el-tag type="warning" effect="plain" color="rgb(38 69 90)">{{ row.actionTitle }}</el-tag></span>
        </template>
      </el-table-column>

      <el-table-column prop="actionRemark" label="处理说明">
        <template v-slot="{row}">
          <div class="task-remark">{{ row.actionRemark }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="attachList" label="附件">
        <template v-slot="{row}">
          <div v-if="row.attachList&&row.attachList.length>0" class="assess-attachList">
            <p v-for="(item,index) in row.attachList" :key="index"><attach-list :uri="item.fileUrl" :name="item.fileTitle" /></p>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getWorkflowById } from '@/api/system/wfApi'
import AttachList from '@/components/AttachList'
export default {
  name: 'ActivityHandleRecord',
  components: {
    AttachList
  },
  props: {
    wfInsId: {
      type: [Number],
      default: undefined
    }
  },
  data() {
    return {
      ops: {
        bar: {
          keepShow: false,
          background: 'rgba(144, 147, 153, 0.4)',
          onlyShowBarOnScroll: false
        }
      },
      listLoading: false,
      flowData: {
        wfDefId: 1,
        wfInsId: undefined,
        wfInsTitle: '',
        wfInsStatus: undefined,
        activityIns: undefined,
        activityInsRecordList: []
      },
      rules: {}
    }
  },
  methods: {
    getData(wfInsId) {
      if (!wfInsId) return
      this.listLoading = true
      getWorkflowById(wfInsId).then((resp) => {
        this.listLoading = false
        const { code, data, msg } = resp
        if (code === 0) {
          this.flowData = data
        } else {
          this.$message.error(msg)
        }
      })
    }
  }
}
</script>
<style lang="scss">
</style>
<style lang="scss" scoped>
.assess-attachList{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  p{
    line-height: 1;
  }
}
</style>