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

<template>
  <el-card>
    <div class="fx-row fx-end-cen mb10">
      <el-button icon="el-icon-refresh" circle @click="handleQuery"></el-button>
    </div>
    <dynamic-table :rows="rows" :columns="columns">
      <template #type="{display}">
        {{ translateType(display) }}
      </template>
      <template #status="{row}">
        <div class="homework-status">
          <el-badge :value="row.doneCount" type="primary">
            <el-tag type="primary">已完成</el-tag>
          </el-badge>
          <el-badge :value="row.totalCount - row.doneCount" type="danger">
            <el-tag type="danger">未完成</el-tag>
          </el-badge>
        </div>
      </template>
      <template #action="{row}">
        <el-button type="text" icon="el-icon-view" @click="handleViewDetail(row)">查看</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="detailOption.visible" :visible.sync="detailOption.visible" :title="detailOption.title"
               width="900px">
      <paper-work-history-detail :work-id="detailOption.workId"
                                 @paperView="handlePaperView"></paper-work-history-detail>
    </el-dialog>
    <!--elDrawer不要内嵌在elDialog中，否则遮罩可能重迭-->
    <el-drawer v-if="paperOption.visible" :visible.sync="paperOption.visible" :title="paperOption.title" size="100%">
      <div class="pl30 pr30 pb30">
        <homework-paper :params="paperOption.params"></homework-paper>
      </div>
    </el-drawer>
  </el-card>
</template>

<script>
import { getTeacherHomeworks } from '@/api/webApi/homework'
import consts from '@/common/mx-const'
import DynamicTable from '@/components/dynamic-table/index'
import PaperWorkHistoryDetail from '@/views/questioncenter/components/generate-tabs/paper-work-history-detail'
import HomeworkPaper from '@/views/questioncenter/components/homework-paper'

export default {
  name: 'paper-work-history',
  components: { HomeworkPaper, PaperWorkHistoryDetail, DynamicTable },
  data() {
    return {
      extraData: { type: consts.enum.generateScene.paperWork.value },
      paperWorkType: Object.freeze(consts.enum.homeworkTypes.find(t => t.value == 1)),
      queryParams: {
        pageNum: 1,
        pageSize: 20
      },
      columns: [
        { prop: 'id', label: 'ID', width: '80px' },
        { prop: 'type', label: '类型', width: '120px', slotBody: 'type' },
        { prop: 'title', label: '标题' },
        { prop: 'createTime', label: '创建时间', width: '180px' },
        { prop: 'status', label: '状态', width: '160px', slotBody: 'status' },
        { prop: 'action', label: '操作', width: '120px', slotBody: 'action' }
      ],
      rows: [],
      total: 0,
      detailOption: {
        visible: false,
        title: '',
        workId: ''
      },
      paperOption: {
        visible: false,
        title: '',
        params: {
          type: '',
          examineeId: ''
        }
      }
    }
  },
  mounted() {
    this.getList()
  },
  deactivated() {
    this.detailOption.visible = false
    this.paperOption.visible = false
  },
  methods: {
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    async getList() {
      const res = await getTeacherHomeworks(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
    },
    handleViewDetail(row) {
      this.detailOption.workId = row.id
      this.detailOption.title = row.title
      this.detailOption.visible = true
    },
    handlePaperView(row) {
      this.paperOption.title = this.translateType(row.type)
      this.paperOption.params.type = row.type
      this.paperOption.params.examineeId = row.id
      this.paperOption.visible = true
    }
  }
}
</script>

<style lang="scss">
.homework-status {
  .el-badge + .el-badge {
    margin-left: 15px;
  }

  .el-badge__content.is-fixed {
    top: 8px;
  }
}
</style>