feat:考试列表测试数据

ZhangXianQiang

2024-06-20 0e025c01be2ba8c5a0f92be2c7453c6ea6f1f37c

feat:考试列表测试数据

 .env.development

@@ -1 +1 @@
VITE_BASE_API_URL = '';
VITE_BASE_API_URL = 

 components.d.ts

@@ -38,4 +38,7 @@
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
  export interface ComponentCustomProperties {
    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
  }
}

 src/api/index.js

@@ -5,6 +5,7 @@

axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";


const service = axios.create({
  baseURL: import.meta.env.VITE_BASE_API_URL,
  timeout: 15000,
@@ -63,7 +64,7 @@

// response拦截器
service.interceptors.response.use(
  (res) => {
  (response) => {
    if (response.status === 200 && response.data.code === 200) return Promise.resolve(response.data);
    else return Promise.reject(response.data);
  },

 src/api/modules/exam.js

New file
@@ -0,0 +1,6 @@
import service from "@/api";


export const getExamList = () => {
  return service.get('/api/v1/getExamList');
}

 src/mock/exam.js

New file
@@ -0,0 +1,302 @@
export default [
  // 获取考试试卷
  {
    url: '/api/v1/getExamInfo',
    method: 'GET',
    response: () => {
      return {
        code: 200,
        msg: 'Success',
        data: {
          examInfo: {
            id: 1,
            name: '考试1',
            startTime: '2019-01-01 00:00:00',
            endTime: '2019-01-01 00:00:00',
            examQuestionList: [
              {
                questionType: 1,
                questionList: [
                  {
                    "id": null,
                    "questionType": 1,
                    "gradeLevel": null,
                    "subjectId": 2,
                    "title": "1+1=？123",
                    "items": [
                      {
                        "prefix": "A",
                        "content": "1"
                      },
                      {
                        "prefix": "B",
                        "content": "2"
                      },
                      {
                        "prefix": "C",
                        "content": "3"
                      },
                      {
                        "prefix": "D",
                        "content": "4"
                      }
                    ],
                    "analyze": "问小朋友",
                    "correct": "",
                    "score": "3",
                    "difficult": 5
                  },
                  {
                    "id": null,
                    "questionType": 1,
                    "gradeLevel": null,
                    "subjectId": 2,
                    "title": "1+1=？",
                    "items": [
                      {
                        "prefix": "A",
                        "content": "1"
                      },
                      {
                        "prefix": "B",
                        "content": "2"
                      },
                      {
                        "prefix": "C",
                        "content": "3"
                      },
                      {
                        "prefix": "D",
                        "content": "4"
                      }
                    ],
                    "analyze": "问小朋友",
                    "correct": "",
                    "score": "3",
                    "difficult": 5
                  }
                ]
              },
              {
                questionType: 2,
                questionList: [
                  {
                    "id": null,
                    "questionType": 1,
                    "gradeLevel": null,
                    "subjectId": 2,
                    "title": "1+1=？",
                    "items": [
                      {
                        "prefix": "A",
                        "content": "1"
                      },
                      {
                        "prefix": "B",
                        "content": "2"
                      },
                      {
                        "prefix": "C",
                        "content": "3"
                      },
                      {
                        "prefix": "D",
                        "content": "4"
                      }
                    ],
                    "analyze": "问小朋友",
                    "correct": "",
                    "score": "5",
                    "difficult": 5
                  },
                  {
                    "id": null,
                    "questionType": 1,
                    "gradeLevel": null,
                    "subjectId": 2,
                    "title": "1+1=？",
                    "items": [
                      {
                        "prefix": "A",
                        "content": "1"
                      },
                      {
                        "prefix": "B",
                        "content": "2"
                      },
                      {
                        "prefix": "C",
                        "content": "3"
                      },
                      {
                        "prefix": "D",
                        "content": "4"
                      }
                    ],
                    "analyze": "问小朋友",
                    "correct": "",
                    "score": "5",
                    "difficult": 5
                  },
                  {
                    "id": null,
                    "questionType": 1,
                    "gradeLevel": null,
                    "subjectId": 2,
                    "title": "1+1=？",
                    "items": [
                      {
                        "prefix": "A",
                        "content": "1"
                      },
                      {
                        "prefix": "B",
                        "content": "2"
                      },
                      {
                        "prefix": "C",
                        "content": "3"
                      },
                      {
                        "prefix": "D",
                        "content": "4"
                      }
                    ],
                    "analyze": "问小朋友",
                    "correct": "",
                    "score": "5",
                    "difficult": 5
                  },
                  {
                    "id": null,
                    "questionType": 1,
                    "gradeLevel": null,
                    "subjectId": 2,
                    "title": "1+1=？",
                    "items": [
                      {
                        "prefix": "A",
                        "content": "1"
                      },
                      {
                        "prefix": "B",
                        "content": "2"
                      },
                      {
                        "prefix": "C",
                        "content": "3"
                      },
                      {
                        "prefix": "D",
                        "content": "4"
                      }
                    ],
                    "analyze": "问小朋友",
                    "correct": "",
                    "score": "5",
                    "difficult": 5
                  }
                ]
              },
              {
                questionType: 3,
                questionList: [
                  {
                    "id": null,
                    "questionType": 1,
                    "gradeLevel": null,
                    "subjectId": 2,
                    "title": "测试音频1",
                    "audioFile": '/test.mp3',
                    "items": [
                      {
                        "prefix": "A",
                        "content": "1"
                      },
                      {
                        "prefix": "B",
                        "content": "2"
                      },
                      {
                        "prefix": "C",
                        "content": "3"
                      },
                      {
                        "prefix": "D",
                        "content": "4"
                      }
                    ],
                    "analyze": "问小朋友",
                    "correct": "",
                    "score": "3",
                    "difficult": 5
                  },
                  {
                    "id": null,
                    "questionType": 1,
                    "gradeLevel": null,
                    "subjectId": 2,
                    "title": "测试音频2",
                    "audioFile": '/test.mp3',
                    "items": [
                      {
                        "prefix": "A",
                        "content": "1"
                      },
                      {
                        "prefix": "B",
                        "content": "2"
                      },
                      {
                        "prefix": "C",
                        "content": "3"
                      },
                      {
                        "prefix": "D",
                        "content": "4"
                      }
                    ],
                    "analyze": "问小朋友",
                    "correct": "",
                    "score": "3",
                    "difficult": 5
                  }
                ]
              },
            ]
          }
        }
      };
    }
  },
  // 获取考试列表
  {
    url: '/api/v1/getExamList',
    method: 'GET',
    response: () => {
      return {
        code: 200,
        msg: 'Success',
        'data|2-8': [
          {
            'id|+1': 1,
            name: '测试测试测试测试测试测试',
            startTime: '2024-01-01 09:00:00',
            endTime: '2024-01-01 11:00:00',
            // 1:未开始
            // 2:进行中
            // 3:已结束
            'status|1': [
              1,
              2,
              3
            ],
            'examTotal|20-60': 20,
            'examTime|30-120': 120,
            'examScore|60-100': 100
          }
        ]
      }
    }
  }
];

 src/mock/index.js

 src/views/exam-list/data-list/index.vue

@@ -1,38 +1,40 @@
<template>
  <div class="list-container w-full h-full">
    <el-scrollbar>
      <el-card shadow="hover" class="mb-3">
      <el-card shadow="hover" class="mb-3" v-for="item in props.dataList">
        <div class="item flex justify-between items-center">
          <div class="left-container flex flex-col justify-between">
            <div class="top-container flex items-center">
              <div class="title mr-5 text-xl font-bold">测试测试测试测试测试</div>
              <div class="title mr-5 text-xl font-bold">{{ item.name }}</div>
              <div class="tag">
                <el-tag type="primary" effect="light" round>
                  未开始
                <el-tag :type="stateList[item.status].type" effect="light" round>
                  {{ stateList[item.status].text }}
                </el-tag>
              </div>
            </div>
            <div class="mid-container flex items-center my-4 text-gray-700">
              <el-icon class="mr-1"><Timer /></el-icon>
              <el-icon class="mr-1">
                <Timer />
              </el-icon>
              <div class="time">
                考试时间: 2024-6-5 08:00 ~ 2024-6-5 10:00
                考试时间: {{ item.startTime }} ~ {{ item.endTime }}
              </div>
            </div>
            <div class="bottom-container flex text-sm text-gray-400">
              <div class="bottom-item">
                总分: 100
                总分: {{ item.examScore }}
              </div>
              <div class="bottom-item">
                题数: 20
                题数: {{ item.examTotal }}
              </div>
              <div class="bottom-item">
                答题时间: 20分钟
                答题时间: {{ item.examTime }}分钟
              </div>
            </div>
          </div>
          <div class="right-container">
            <div class="button-container">
              <el-button type="primary" size="large" @click="examClick">开始考试</el-button>
              <el-button type="primary" size="large" @click="examClick" :disabled="stateList[item.status].disabled">开始考试</el-button>
            </div>
          </div>
        </div>
@@ -42,10 +44,35 @@
</template>

<script setup>
import {ref} from 'vue';
import { ref } from 'vue';
import { Timer } from '@element-plus/icons-vue';
import {useRouter} from 'vue-router';
import { useRouter } from 'vue-router';
const router = useRouter();

const props = defineProps({
  dataList: {
    type: Array,
    default: () => []
  }
});

const stateList = {
  1: {
    text: '未开始',
    type: 'primary',
    disabled: true
  },
  2: {
    text: '进行中',
    type: 'success',
    disabled: false
  },
  3: {
    text: '已结束',
    type: 'info',
    disabled: true
  }
};

const examClick = () => {
  router.push('/exam');
@@ -58,6 +85,7 @@
  width: 100%;
  min-height: 120px;
}

.bottom-item {
  margin-right: 30px;
}

 src/views/exam-list/index.vue

@@ -5,7 +5,7 @@
    <div class="list-container container grow relative">
      <div class="list-content absolute top-0 bottom-0 left-0 right-0 py-4">
        <div class="list-wrapper w-full h-full">
          <el-card class="h-full" :body-style="{height: '100%'}">
          <el-card class="h-full" :body-style="{ height: '100%' }">
            <div class="card-wrapper w-full h-full flex flex-col px-8 box-border">
              <div class="card-header flex justify-between items-center shrink-0">
                <div class="header-tab">
@@ -22,10 +22,10 @@
                </div>

              </div>
              

              <div class="card-main flex-1 my-5 relative">
                <div class="main-content absolute top-0 bottom-0 left-0 right-0">
                  <DataList></DataList>
                <div class="main-content absolute top-0 bottom-0 left-0 right-0" v-loading="loading">
                  <DataList :dataList="dataList"></DataList>
                </div>
              </div>

@@ -42,11 +42,33 @@

<script setup>
import { ref } from 'vue';

import NormalHeader from '@/components/NormalHeader/index.vue';
import DataList from './data-list/index.vue';

import { Search } from '@element-plus/icons-vue';

import { getExamList } from '@/api/modules/exam.js';


const activeName = ref('1');
const searchText = ref('');

const dataList = ref([]);

const loading = ref(false);

const getData = () => {
  loading.value = true;
  getExamList().then(res => {
    dataList.value = res.data;
    loading.value = false;
  }).catch(err => {
    loading.value = false;
  });
};

getData();

const handleClick = (tab, event) => {
};
@@ -56,5 +78,4 @@
:deep(.el-tabs__nav-wrap:after) {
  display: none;
}

</style>

 vite.config.js

@@ -23,7 +23,7 @@
        }),

        viteMockServe({
            mockPath: 'mock', // mock 数据存放的目录
            mockPath: './src/mock', // mock 数据存放的目录
            localEnabled: true, // 开发环境启用 mock
            prodEnabled: false, // 生产环境禁用 mock
        }),