feat: 我的考试UI

src/views/myexam/index.vue

@@ -0,0 +1,185 @@
+<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">
+      <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>
+          <span slot="action" slot-scope="text, record, index">
+            <a v-if="index % 2 == 0" @click="handlerGoExam">进入考试</a>
+            <a v-if="index % 2 == 1" disabled>已预约</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>
+          <span slot="action" slot-scope="text, record, index">
+            <a @click="handlerGoReport">查看详情</a>
+          </span>
+        </s-table>
+      </a-tab-pane>
+    </a-tabs>
+  </a-card>
+</template>
+
+<script>
+import { STable, SearchCom } from '@/components'
+import { getCourseList } from '@/api/course/course'
+
+export default {
+  components: { STable, SearchCom },
+  data () {
+    return {
+      loading: false,
+      activeTab: '1',
+      queryParam: {
+        examType: '' // 课程分类
+      },
+      queryOptions: [
+        { type: 'select-dic-tree', placeholder: '考试分类', key: 'examType', options: [] }
+      ],
+      examColumns: [
+        {
+          title: '序号',
+          width: '80px',
+          scopedSlots: { customRender: 'index' },
+          align: 'center'
+        },
+        {
+          title: '考试科目',
+          dataIndex: 'name'
+        },
+        {
+          title: '准考证号',
+          dataIndex: 'carId'
+        },
+        {
+          title: '考试形式',
+          dataIndex: 'type'
+        },
+        {
+          title: '考试时间',
+          dataIndex: 'date'
+        },
+        {
+          title: '考试时长',
+          dataIndex: 'length'
+        },
+        {
+          title: '考试资格',
+          dataIndex: 'zige'
+        },
+        {
+          title: '操作',
+          width: '150px',
+          dataIndex: 'action',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      examDoneColumns: [
+        {
+          title: '序号',
+          width: '80px',
+          scopedSlots: { customRender: 'index' },
+          align: 'center'
+        },
+        {
+          title: '考试科目',
+          dataIndex: 'name'
+        },
+        {
+          title: '准考证号',
+          dataIndex: 'carId'
+        },
+        {
+          title: '考试形式',
+          dataIndex: 'type'
+        },
+        {
+          title: '答卷时间',
+          dataIndex: 'date'
+        },
+        {
+          title: '考试时长',
+          dataIndex: 'length'
+        },
+        {
+          title: '考试成绩',
+          dataIndex: 'zige'
+        },
+        {
+          title: '操作',
+          width: '150px',
+          dataIndex: 'action',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      loadExamData: parameter => {
+        return getCourseList(Object.assign(parameter, this.queryParam)).then(res => {
+          return res
+        })
+      },
+      loadExamDoneData: parameter => {
+        return getCourseList(Object.assign(parameter, this.queryParam)).then(res => {
+          return res
+        })
+      }
+    }
+  },
+  mounted () {
+    this.getExamTypeList()
+  },
+  methods: {
+    // 搜索
+    handleRefresh () {
+      const { activeTab } = this
+      if (activeTab === '1') {
+        this.$refs.examTable.refresh()
+      } else {
+        this.$refs.examDoneColumns.refresh()
+      }
+    },
+    handlerGoExam () {
+      this.$router.push({ path: '/myexamDetail', query: { type: 'exam' } })
+    },
+    handlerGoReport () {
+      this.$router.push({ path: '/myreport', query: { type: 'exam' } })
+    },
+    // 获取考试分类列表
+    getExamTypeList () {
+
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>