welfare-admin/src/views/myexam/index.vue

<template>
  <a-card :bordered="false" :loading="loading">
    <div class="table-page-search-wrapper">
      <SearchCom
        :form="queryParam"
        :list="queryOptions"
        @search="handleRefresh"
        @reset="
          () => {
            queryParam = {}
            handleRefresh()
          }
        "></SearchCom>
    </div>
    </br>
    <a-tabs :default-active-key="activeTab" @change="(key)=>{activeTab = key}">
      <a-tab-pane key="1" tab="预约考试">
        <s-table
          ref="examTable"
          :pageSize="5"
          :columns="examColumns"
          :data="loadExamData"
          :rowKey="record => record.id">
          <span slot="index" slot-scope="text, record, index">
            {{ index + 1 }}
          </span>
          <template slot="testType" slot-scope="text, record">
            <a-tag v-if="record.testType == '1'" color="red">线上</a-tag>
          </template>
          <template slot="zige" slot-scope="text, record">
            <a-tag color="blue">学完后考试</a-tag>
          </template>
          <template slot="examTime" slot-scope="text, record">
            {{ record.examTime }}分钟
          </template>
          <span slot="action" slot-scope="text, record">
              <a v-if="record.examCondition === 2" @click="handlerMarker(record)">预约考试</a>
              <a v-if="record.examCondition === 1" @click="handlerGoReport(record)">查看详情</a>
              <a v-if="record.examCondition === 3" @click="handlerGoExam(record)">进入考试</a>
          </span>
        </s-table>
      </a-tab-pane>
      <a-tab-pane key="2" tab="已参加考试">
        <s-table
          ref="examDoneTable"
          :pageSize="5"
          :columns="examDoneColumns"
          :data="loadExamDoneData"
          :rowKey="record => record.id">
          <span slot="index" slot-scope="text, record, index">
            {{ index + 1 }}
          </span>
          <template slot="testType" slot-scope="text, record">
            <a-tag v-if="record.testType == '1'" color="red">线上</a-tag>
          </template>
          <template slot="zige" slot-scope="text, record">
            <a-tag color="blue">学完后考试</a-tag>
          </template>
          <template slot="examTime" slot-scope="text, record">
            {{ record.examTime }}分钟
          </template>
          <span slot="action" slot-scope="text, record">
            <a v-if="record.isAttendStatus === 1" @click="handlerGoReport(record)">预约考试</a>
            <template v-else>
              <a @click="handlerGoReport(record)">查看详情</a>
            </template>
          </span>
        </s-table>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
import { STable, SearchCom } from '@/components'
import { reqExamList, reqExamAttendList, reqExamSubscribe } from '@/api/myexam/exam'
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
import { dictToTree } from '@/utils/util'

export default {
  components: { STable, SearchCom },
  data () {
    return {
      loading: false,
      activeTab: '1',
      queryParam: {
        examClassify: '' // 课程分类
      },
      queryOptions: [
        { type: 'select-dic-tree', placeholder: '课程分类', key: 'examClassify', options: [] }
      ],
      examColumns: [
        {
          title: '序号',
          width: '80px',
          scopedSlots: { customRender: 'index' },
          align: 'center'
        },
        {
          title: '考试科目',
          dataIndex: 'projectName'
        },
        {
          title: '准考证号',
          dataIndex: 'candidateNo'
        },
        {
          title: '考试形式',
          dataIndex: 'testType',
          scopedSlots: { customRender: 'testType' }
        },
        {
          title: '考试时间',
          dataIndex: 'examSdate'
        },
        {
          title: '考试时长',
          dataIndex: 'examTime',
          scopedSlots: { customRender: 'examTime' }
        },
        {
          title: '考试资格',
          dataIndex: 'zige',
          scopedSlots: { customRender: 'zige' }
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      examDoneColumns: [
        {
          title: '序号',
          width: '80px',
          scopedSlots: { customRender: 'index' },
          align: 'center'
        },
        {
          title: '考试科目',
          dataIndex: 'projectName'
        },
        {
          title: '准考证号',
          dataIndex: 'candidateNo'
        },
        {
          title: '考试形式',
          dataIndex: 'testType',
          scopedSlots: { customRender: 'testType' }
        },
        {
          title: '答卷时间',
          dataIndex: 'practiceSdate'
        },
        {
          title: '考试时长',
          dataIndex: 'examTime',
          scopedSlots: { customRender: 'examTime' }
        },
        {
          title: '考试成绩',
          dataIndex: 'score'
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      loadExamData: parameter => {
        return reqExamList(Object.assign(parameter, this.queryParam)).then(res => {
          return res
        })
      },
      loadExamDoneData: parameter => {
        return reqExamAttendList(Object.assign(parameter, this.queryParam)).then(res => {
          return res
        })
      }
    }
  },
  mounted () {
    this.dictionaryDropDown()
  },
  methods: {
    dictionaryDropDown () {
      dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
        const result = dictToTree(res.data, [], 0)
        this.queryOptions[0].options = result
				this.loading = false
      })
    },
    // 搜索
    handleRefresh () {
      const { activeTab } = this
      console.log('activeTab', activeTab)
      if (activeTab === '1') {
        this.$refs.examTable.refresh()
      } else {
        this.$refs.examDoneTable.refresh()
      }
    },
    // 预约考试
    handlerMarker (data) {
      const _this = this
      this.$confirm({
        title: '提示',
        content: '确定要预约考试吗?',
        onOk () {
          reqExamSubscribe({ projectId: data.id }).then(res => {
            this.$message.success('预约成功!')
            _this.handleRefresh()
          })
        },
        onCancel () {}
      })
    },
    handlerGoExam (row) {
      // 考试前5分钟才能进入考试界面(待办...)
      // const diff = new Date().getTime() - new Date(examSdate).getTime()
      // if(diff > -1000*60*5){}
      this.$router.push({ path: '/myexamDetail', query: { type: 'exam', projectId: row.id } })
    },
    handlerGoReport (row) {
      this.$router.push({ path: '/myreport', query: { type: 'exam', reportId: row.id } })
    }
  }
}
</script>

<style lang="less" scoped>

</style>