95 lines
2.7 KiB
Vue
95 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, ref } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import { defineAsyncComponent } from "@vue/runtime-core";
|
|
import { useRouter } from "vue-router";
|
|
const $q = useQuasar();
|
|
const router = useRouter();
|
|
const year = ref<string>("2566");
|
|
const round = ref<string>("1");
|
|
const title = ref<string>("การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ");
|
|
const sizeCard = (val: number) => {
|
|
if (val === 5) {
|
|
return "width:15%;";
|
|
}
|
|
};
|
|
const itemTop = reactive([
|
|
{
|
|
id: 1,
|
|
num: 7,
|
|
title: "จำนวนทั้งหมด",
|
|
color: "#016987",
|
|
},
|
|
{
|
|
id: 2,
|
|
num: 1,
|
|
title: "ยังไม่บรรจุ",
|
|
color: "#02A998",
|
|
},
|
|
{
|
|
id: 3,
|
|
num: 5,
|
|
title: "เตรียมบรรจุ",
|
|
color: "#2EA0FF",
|
|
},
|
|
{
|
|
id: 4,
|
|
num: 1,
|
|
title: "บรรจุเเล้ว",
|
|
color: "#4154B3",
|
|
},
|
|
{
|
|
id: 5,
|
|
num: 0,
|
|
title: "สละสิทธิ์",
|
|
color: "#FF5C5F",
|
|
},
|
|
]);
|
|
const AddTablePosition = defineAsyncComponent(
|
|
() => import("@/modules/05_placement/components/pass/Table.vue")
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
|
|
<div class="toptitle">
|
|
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
|
|
รายชื่อผู้สอบในรอบ {{ title }} ครั้งที่ {{ round }} ปี {{ year }}
|
|
</div>
|
|
<q-space />
|
|
|
|
<div class="q-py-md row col-12">
|
|
<div class="col-12 row bg-white">
|
|
<div class="fit q-pa-md">
|
|
<div class="row col-12 q-col-gutter-md fit">
|
|
<div class="" v-for="item in itemTop" :key="item.id" :style="$q.screen.lt.md ? '' : sizeCard(5)" :class="$q.screen.lt.sm ? 'col-4' : ''">
|
|
<div class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-pa-sm">
|
|
<div class="col-12 row items-center q-pa-sm">
|
|
<div class="col-12 text-h5 text-weight-bold" :style="{ color: item.color }">
|
|
{{ item.num }}
|
|
</div>
|
|
<div class="col-12 text-dark ellipsis">
|
|
{{ item.title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
|
|
<div>
|
|
<AddTablePosition class="q-pa-none" />
|
|
</div>
|
|
</q-card>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.cardNum {
|
|
border-radius: 5px;
|
|
/* border-left: 3px solid #016987 !important; */
|
|
padding-left: 8px;
|
|
}
|
|
</style>
|