front/src/views/questioncenter/homework.vue

<template>
  <div class="app-container">
    <el-card>
      <div class="fx-row fx-end-cen mb10">
        <el-button icon="el-icon-refresh" circle @click="queryParams.pageNum=1,getList()"></el-button>
      </div>
      <dynamic-table :columns="columns" :rows="rows">
        <template #type="{display}">
          {{ translateType(display) }}
        </template>
        <template #status="{row}">
          {{ row.isDo ? '已完成' : '未完成' }}
        </template>
        <template #action="{row}">
          <el-button v-if="useVideoAction(row)" type="text" icon="el-icon-video-camera"
                     @click="handleVideo(row)">观看
          </el-button>
          <el-button v-if="usePaperAction(row)" type="text" :icon="row.isDo?'el-icon-view':'el-icon-edit'"
                     @click="handlePaper(row)">{{ row.isDo ? '查看' : '做题' }}
          </el-button>
        </template>
      </dynamic-table>
      <pagination v-if="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getList"></pagination>
      <el-dialog v-if="videoOption.visible" :visible.sync="videoOption.visible" :title="videoOption.title"
                 :close-on-click-modal="false" width="800px" @close="handleVideoClosed">
        <mx-video :src="videoOption.src" :ali-id-type="videoOption.aliIdType"></mx-video>
      </el-dialog>
      <!--elDrawer不要内嵌在elDialog中，否则遮罩可能重迭-->
      <el-drawer v-if="paperOption.visible" :visible.sync="paperOption.visible" :title="paperOption.title"
                 :close-on-click-modal="false" size="100%" @close="handlePaperClose">
        <div class="pl30 pr30 pb30">
          <homework-paper :params="paperOption.params"></homework-paper>
        </div>
      </el-drawer>
    </el-card>
  </div>
</template>

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

export default {
  name: 'homework',
  components: { HomeworkPaper, DynamicTable },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 20
      },
      columns: [
        { prop: 'id', label: 'ID', width: '80px' },
        { prop: 'type', label: '类型', width: '120px', slotBody: 'type' },
        { prop: 'createTime', label: '创建时间', width: '180px' },
        { prop: 'title', label: '标题' },
        { prop: 'remark', label: '备注' },
        { prop: 'status', label: '状态', width: '80px', slotBody: 'status' },
        { prop: 'action', label: '操作', width: '120px', slotBody: 'action' }
      ],
      rows: [],
      total: 0,
      // dialog video
      videoOption: {
        visible: false,
        title: '',
        src: null,
        aliIdType: consts.enum.aliIdType.AliIdResourcePerson
      },
      paperOption: {
        visible: false,
        params: {
          id: '',
          type: ''
        },
        title: ''
      }
    }
  },
  mounted() {
    this.getList()
  },
  deactivated() {
    // NOTE: 强制跳出时（如浏览器后退），主动隐藏弹层，否则遮罩可能不会自动隐藏
    this.videoOption.visible = false
    this.paperOption.visible = false
  },
  methods: {
    async getList() {
      const res = await getStudentHomeworks(this.queryParams)
      this.rows = res.rows || res.data
      this.total = res.total || this.rows.length
    },
    translateType(type) {
      const enumType = consts.enum.homeworkTypes.find(t => t.value == type)
      return enumType?.label || type
    },
    usePaperAction(row) {
      return consts.enum.homeworkTypes.find(t => t.value == row.type)?.usePaper
    },
    useVideoAction(row) {
      return consts.enum.homeworkTypes.find(t => t.value == row.type)?.useVideo
    },
    handleVideo(row) {
      this.videoOption.src = row.content
      this.videoOption.title = row.title
      this.videoOption.visible = true
    },
    handleVideoClosed() {
      // 稍等，先让视频观看记录自动提交，再触发刷新，以获取到新的作业完成状态
      setTimeout(() => this.getList(), 200)
    },
    handlePaper(row) {
      this.paperOption.params.id = row.id
      this.paperOption.params.type = row.type
      this.paperOption.title = this.translateType(row.type)
      this.paperOption.visible = true
    },
    handlePaperClose() {
      setTimeout(() => this.getList(), 200)
    }
  }
}
</script>

<style scoped>

</style>