crowd-test-service-frontend/src/components/report/ReportList.vue

<template>
  <div class="report-container">
    <!-- <el-row :gutter="2" v-for="report,index in reportList" :key="index">
      <el-col :span="6">
        <span>{{report.name}}</span>
      </el-col>
      <el-col :span="10">
        <span>{{report.file}}</span>
      </el-col>
    </el-row>-->

    <el-table :showHeader="true" :data="reportList" style="width: 100%">
      <el-table-column prop="type" label="报告类型" title="报告类型">
        <template slot-scope="scope">
          <span class="badge">{{scope.row.type}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="file" sortable label="报告文件">
        <template slot-scope="scope">
          <span v-if="scope.row.content==null || scope.row.content==''">暂无文件</span>
          <a :href="scope.row.file" v-if="scope.row.content!=null" target="_blank"><i
            class="fa fa-file-text-o"></i> {{scope.row.content}}</a>
        </template>
      </el-table-column>
      <el-table-column align="right" label="操作">
        <template slot-scope="scope">
          <div class="btn btn-small btn-info" @click="handleEdit(scope.$index, scope.row)">查看详情</div>
          <div class="btn btn-small btn-danger" @click="handleDelete(scope.$index, scope.row)">删除</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>

export default {
  name: 'report-list',
  props: {
    reports: {},
    projectId: '',
    taskId: ''
  },
  data () {
    return {
      editIndex: -1,
      reportList: this.reports == null ? [] : this.reports,
      pid: this.projectId,
      tid: this.taskId,
    }
  },
  methods: {
    handleEdit (index, row) {
      if (this.tid == null) {
        this.$router.push({
          name: 'ProjectReport',
          params: {
            reportId: row.code,
            projectId: this.pid
          }
        })
      } else {
        this.$router.push({
          name: 'TaskReport',
          params: {
            reportId: row.code,
            projectId: this.pid,
            taskId: this.tid
          }
        })
      }

      // this.editIndex = index;
    },
    handleDelete (index, row) {
      this.reportList.splice(index, 1)
    },
    cancelEdit (index, row) {
      this.editIndex = -1
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handleExceed (files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
          } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    beforeFileUpload () {
    }
  },
  watch: {
    reports () {
      this.reportList = this.reports
    },
    projectId () {
      this.pid = this.projectId
    },
    taskId () {
      this.tid = this.taskId
    }
  }
}
</script>


<style lang="less" scoped>
  .report-container {
    margin: 0 30px;
  }

  .el-row {
    margin-bottom: 20px;
  }
</style>