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-card>
</template>

<script>
import { getTeacherHomeworks } from '@/api/webApi/homework'
import consts from '@/common/mx-const'
import DynamicTable from '@/components/dynamic-table/index'

export default {
  name: 'paper-work-history',
  components: { 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
    }
  },
  mounted() {
    this.getList()
  },
  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.msgInfo('Not implement')
    }
  }
}
</script>

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

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