搭建错题本页面

luohairen

2024-11-04 06419b10e17c72e07f1c740836e5abb79df619d0

搭建错题本页面

 src/api/modules/wrong.js

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

export const getWrongList = (postData = {examName: '', pageIndex: 1, pageSize: 10}) => {
    return service.post('/api/student/wrong/pageList',postData);
}

 src/assets/icons/icon3.png

 src/router/index.js

@@ -70,7 +70,12 @@
  {
    path: '/personal-center',
    component: () => import('@/views/personal-center/index.vue'),
  }
  },
  //错题本
  {
    path: '/wrong-list',
    component: () => import('@/views/wrong-list/index.vue'),
  },
];

const router = createRouter({

 src/views/menu/index.vue

@@ -58,6 +58,11 @@
        iconPath: new URL('@/assets/icons/icon1.png', import.meta.url).href,
        path: '/grade-list'
      },
      {
        title: '我的错题',
        iconPath: new URL('@/assets/icons/icon3.png', import.meta.url).href,
        path: '/wrong-list'
      },
    ]
  },
]);

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

New file
@@ -0,0 +1,104 @@
<template>
  <div class="list-container w-full h-full">
    <el-scrollbar>
      <el-table
          v-loading="loading"
          :data="tableData"
          border
          :row-style="{height:'42px'}"
          :cell-style="{padding: '0'}"
      >
        <el-table-column
            align="center"
            label="题目"
            prop="title"
            width="500px"
        ></el-table-column>
        <el-table-column
            label="题型"
            align="center"
            width="100px"
            prop="questionTypeName"
        ></el-table-column>
        <el-table-column
            align="center"
            width="100px"
            label="分数"
            prop="score"
        ></el-table-column>
        <el-table-column
            align="center"
            width="100px"
            label="难度"
            prop="difficult"
        ></el-table-column>
        <el-table-column
            align="center"
            width="150px"
            label="试卷名称"
            prop="examName"
        ></el-table-column>
        <el-table-column
            label="操作"
            align="center"
            fixed="right"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="large" @click="checkWrong(scope.row.id)">查看错题</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="searchForm.currentPage"
                  :limit.sync="searchForm.pageSize"
                  @pagination="dataList"/>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Timer } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { useExamStore } from '@/store/index.js';
import { getExamInfo } from '@/api/modules/exam.js';

const loading = ref(false);
const tableData = ref([]);
const total = ref(0);
const searchForm = ref({
  currentPage: 1,
  pageSize: 10
});

// const router = useRouter();

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


const checkWrong = (id) => {
  router.push({
    name: 'wrong-list',
    params: {
      examId: id
    }
  });
};

</script>

<style lang="scss" scoped>
.item {
  width: 100%;
  min-height: 120px;
}

.bottom-item {
  margin-right: 30px;
}
</style>

 src/views/wrong-list/index.vue

New file
@@ -0,0 +1,81 @@
<template>
  <div class="exam-list-container w-screen h-screen bg-slate-50 flex flex-col items-center">
    <NormalHeader class="shrink-0"></NormalHeader>

    <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%' }">
            <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-search flex items-center">
                  <el-input v-model="searchText" placeholder="请输入考试名称" :prefix-icon="Search" maxlength="20" @input="searchData"/>
                  <el-button type="primary" class="ml-4" @click="searchData">搜索</el-button>
                </div>
              </div>

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

              <div class="card-footer flex justify-center mb-7 shrink-0">
                <el-pagination background layout="prev, pager, next" :total="dataList.length"
                               :default-page-size="20"
                               :currentPage="currentIndex"
                               :hide-on-single-page="true"
                               @current-change="handleCurrentChange"/>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

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

import NormalHeader from '@/components/NormalHeader/index.vue';
import DataList from './data-list/index.vue';
import { getWrongList } from '@/api/modules/wrong.js';


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

const dataList = ref([]);

const loading = ref(false);

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

getData();

const searchData = () => {
  getData();
};

const handleClick = (tab, event) => {
};

const handleCurrentChange = (val) => {
  getData();
}
</script>

<style lang="scss" scoped>
:deep(.el-tabs__nav-wrap:after) {
  display: none;
}
</style>