|
@@ -0,0 +1,279 @@
|
|
|
+<template>
|
|
|
+ <div class="content">
|
|
|
+ <div class="bg-white pl50 pt30 pr30 pb30">
|
|
|
+ <div class="header">
|
|
|
+ <div class="w-full flex h44 bg-primary-yellow items-center">
|
|
|
+ <div class="w-1/4 font16 font-bold">车型</div>
|
|
|
+ <div class="w-1/4 font16 font-bold">科目</div>
|
|
|
+ <div class="w-1/4 font16 font-bold">成绩</div>
|
|
|
+ <div class="w-1/4 font16 font-bold">考场时间</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="body">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in list"
|
|
|
+ :key="index"
|
|
|
+ :class="{
|
|
|
+ 'bg-primary-pink': index % 2 !== 0,
|
|
|
+ }"
|
|
|
+ class="w-full flex lh44 items-center"
|
|
|
+ >
|
|
|
+ <div class="w-1/4 font16 font-bold border-gray-right h-full">
|
|
|
+ {{ item.type }}
|
|
|
+ </div>
|
|
|
+ <div class="w-1/4 font16 font-bold border-gray-right h-full">
|
|
|
+ {{ item.kskm }}
|
|
|
+ </div>
|
|
|
+ <div class="w-1/4 font16 font-bold border-gray-right h-full">
|
|
|
+ {{ item.score }}
|
|
|
+ </div>
|
|
|
+ <div class="w-1/4 font16 font-bold border-gray-right h-full">
|
|
|
+ {{ item.createTime }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pt30">
|
|
|
+ <div class="flex w-full justify-center">
|
|
|
+ <div
|
|
|
+ @click="changePageNum(pageNum - 1)"
|
|
|
+ class="w80 lh36 border-yellow1 mr22 cursor-pointer"
|
|
|
+ >
|
|
|
+ 《上一页
|
|
|
+ </div>
|
|
|
+ <div class="flex" v-if="pageTotalNum <= 7">
|
|
|
+ <div
|
|
|
+ class="border-yellow1 lh36 w36 mr22 cursor-pointer"
|
|
|
+ v-for="(item, index) in pageTotalNum"
|
|
|
+ @click="changePageNum(item)"
|
|
|
+ :class="{
|
|
|
+ 'bg-primary-pink': item == pageNum,
|
|
|
+ }"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ {{ index + 1 }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex" v-if="pageTotalNum > 7">
|
|
|
+ <div
|
|
|
+ :class="{
|
|
|
+ 'bg-primary-pink': 1 == pageNum,
|
|
|
+ }"
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ pageNum = 1;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ class="border-yellow1 lh36 w36 mr22 cursor-pointer"
|
|
|
+ >
|
|
|
+ {{ 1 }}
|
|
|
+ </div>
|
|
|
+ <div v-if="pageNum > 3" class="lh36 w36 mr22 font-bold">...</div>
|
|
|
+ <div
|
|
|
+ class="cursor-pointer"
|
|
|
+ v-for="(item, index) in pageTotalNum"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ pageNum = item;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ v-if="
|
|
|
+ item > 1 &&
|
|
|
+ item < pageTotalNum &&
|
|
|
+ item <= pageNum + 2 &&
|
|
|
+ item >= pageNum - 2
|
|
|
+ "
|
|
|
+ :class="{
|
|
|
+ 'bg-primary-pink': item == pageNum,
|
|
|
+ }"
|
|
|
+ class="lh36 w36 border-yellow1 mr22 overflow-hidden"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="pageNum + 1 < pageTotalNum"
|
|
|
+ class="lh36 w36 mr22 font-bold"
|
|
|
+ >
|
|
|
+ ...
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ pageNum = pageTotalNum;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ :class="{
|
|
|
+ 'bg-primary-pink': pageTotalNum == pageNum,
|
|
|
+ }"
|
|
|
+ class="border-yellow1 lh36 w36 mr22 cursor-pointer"
|
|
|
+ >
|
|
|
+ {{ pageTotalNum }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ @click="changePageNum(pageNum + 1)"
|
|
|
+ class="w80 lh36 border-yellow1 cursor-pointer"
|
|
|
+ >
|
|
|
+ 下一页》
|
|
|
+ </div>
|
|
|
+ <div class="lh36 ml10">共{{ pageTotalNum }}页</div>
|
|
|
+ <div class="lh36 ml10">到</div>
|
|
|
+ <div class="lh36 w36 ml10">
|
|
|
+ <input
|
|
|
+ class="outline-none w36 h36 text-center"
|
|
|
+ v-model.number="inputPageNum"
|
|
|
+ type="text"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="w61 lh36 bg-primary-yellow ml10 round5 cursor-pointer"
|
|
|
+ @click="changePageNum(inputPageNum)"
|
|
|
+ >
|
|
|
+ 确定
|
|
|
+ </div>
|
|
|
+ <span class="lh36 ml10">页</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import { message } from "ant-design-vue";
|
|
|
+import { computed, defineComponent, ref } from "vue";
|
|
|
+import api from "@/api";
|
|
|
+export default defineComponent({
|
|
|
+ setup() {
|
|
|
+ const pageTotal = ref(0);
|
|
|
+ const pageSize = 10;
|
|
|
+ const pageNum = ref(1);
|
|
|
+ const pageTotalNum = computed(() => {
|
|
|
+ return pageTotal.value % pageSize == 0
|
|
|
+ ? pageTotal.value / pageSize
|
|
|
+ : Math.floor(pageTotal.value / pageSize) + 1;
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ inputPageNum: ref(1),
|
|
|
+ list: ref([
|
|
|
+ {
|
|
|
+ createTime: "2023-07-10 09:53:11",
|
|
|
+ updateTime: null,
|
|
|
+ id: 1821,
|
|
|
+ userId: 8,
|
|
|
+ type: "摩托车",
|
|
|
+ kskm: "科目一",
|
|
|
+ score: 100,
|
|
|
+ deviceType: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ createTime: "2023-07-10 09:53:11",
|
|
|
+ updateTime: null,
|
|
|
+ id: 1821,
|
|
|
+ userId: 8,
|
|
|
+ type: "摩托车",
|
|
|
+ kskm: "科目一",
|
|
|
+ score: 100,
|
|
|
+ deviceType: 2,
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ pageTotal,
|
|
|
+ pageNum,
|
|
|
+ pageSize,
|
|
|
+ pageTotalNum: pageTotalNum,
|
|
|
+ changePageNum(newPageNum: number) {
|
|
|
+ if (newPageNum < 1) {
|
|
|
+ message.warn({
|
|
|
+ content: "小于最小值",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (newPageNum > pageTotalNum.value) {
|
|
|
+ message.warn({
|
|
|
+ content: "超过最大值",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ pageNum.value = newPageNum;
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ message.loading({
|
|
|
+ content: "加载中",
|
|
|
+ });
|
|
|
+ api.score
|
|
|
+ .scoreInfoList({
|
|
|
+ pageNum: this.pageNum,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.list = res.rows;
|
|
|
+ console.log(res);
|
|
|
+ this.pageTotal = res.total;
|
|
|
+ message.destroy();
|
|
|
+ message.success({
|
|
|
+ content: "加载成功",
|
|
|
+ duration:1
|
|
|
+ });
|
|
|
+ // this.pageTotal = res.total
|
|
|
+ });
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ pageNum(newValue, oldValue) {
|
|
|
+ if (newValue !== oldValue) {
|
|
|
+ message.loading({
|
|
|
+ content: "加载中",
|
|
|
+ });
|
|
|
+ api.score
|
|
|
+ .scoreInfoList({
|
|
|
+ pageNum: this.pageNum,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.list = res.rows;
|
|
|
+ console.log(res);
|
|
|
+ this.pageTotal = res.total;
|
|
|
+ message.destroy();
|
|
|
+ message.success({
|
|
|
+ content: "加载成功",
|
|
|
+ duration:1
|
|
|
+ });
|
|
|
+ // this.pageTotal = res.total
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.content {
|
|
|
+ padding: 0 30px;
|
|
|
+ padding-top: 21px;
|
|
|
+ padding-bottom: 30px;
|
|
|
+
|
|
|
+ .vertical-line {
|
|
|
+ width: 5px;
|
|
|
+ height: 20px;
|
|
|
+ background: #f9de5b;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ .bg-primary-yellow {
|
|
|
+ background-color: #f9de5b;
|
|
|
+ }
|
|
|
+ .bg-primary-pink {
|
|
|
+ background: #fff5cc;
|
|
|
+ }
|
|
|
+ .border-gray-right {
|
|
|
+ border-right: 1px solid #e0e0e0;
|
|
|
+ }
|
|
|
+ .border-yellow1 {
|
|
|
+ border: 1px solid #f9de5b;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|