front/src/views/questioncenter/components/generate-tabs/paper-work-history-detail.vue

<template>
  <div>
    <dynamic-table :rows="rows" :columns="columns">
      <template #index="{$index}">
        {{ $index + 1 }}
      </template>
      <template #type="{display}">
        {{ translateType(display) }}
      </template>
      <template #title="{row, display}">
        {{ display }}（{{ row.remark }}）
      </template>
      <template #doneTime="{row, display}">
        <span>{{ row.isDo ? row.doneTime : '' }}</span>
      </template>
      <template #status="{row}">
        {{ row.isDo ? '已完成' : '未完成' }}
      </template>
      <template #rate="{row, display}">
        {{ row.isDo && display ? display + '%' : '' }}
      </template>
      <template #action="{row}">
        <el-button v-if="isPaperDone(row)" type="text" icon="el-icon-view"
                   @click="$emit('paperView',row)">查看
        </el-button>
      </template>
    </dynamic-table>
  </div>
</template>

<script>
import { getHomeworkStudents } from '@/api/webApi/homework'
import DynamicTable from '@/components/dynamic-table/index'
import consts from '@/common/mx-const'
import HomeworkPaper from '@/views/questioncenter/components/homework-paper'

export default {
  name: 'paper-work-history-detail',
  components: { HomeworkPaper, DynamicTable },
  props: ['workId', 'type'],
  data() {
    return {
      rows: []
    }
  },
  computed: {
    useVideo() {
      return !!consts.enum.homeworkTypes.find(t => t.value == this.type)?.useVideo
    },
    columns() {
      return [
        { prop: 'id', label: '序号', width: '80px', slotBody: 'index' },
        { prop: 'type', label: '类型', width: '120px', slotBody: 'type' },
        { prop: 'title', label: '学生', slotBody: 'title' },
        { prop: 'className', label: '班级', sortable: true },
        { prop: 'doneTime', label: '完成时间', width: '180px', slotBody: 'doneTime' },
        { prop: 'isDo', label: '状态', width: '120px', slotBody: 'status', sortable: true },
        { prop: 'scoreRate', label: this.useVideo ? '观看比例' : '得分率', width: '100px', slotBody: 'rate', sortable: true },
        { prop: 'action', label: '操作', width: '80px', slotBody: 'action', hidden: this.useVideo }
      ]
    }
  },
  mounted() {
    getHomeworkStudents({
      workId: this.workId
    }).then(res => {
      this.rows = res.data
    })
  },
  methods: {
    translateType(type) {
      const enumType = consts.enum.homeworkTypes.find(t => t.value == type)
      return enumType?.label || type
    },
    isPaperDone(row) {
      return row.isDo && consts.enum.homeworkTypes.find(t => t.value == row.type)?.usePaper
    }
  }
}
</script>

<style scoped>

</style>