hrms-mgt/src/modules/05_placement/components/pass/Detail.vue

<script setup lang="ts">
import { ref } from "vue";
import { defineAsyncComponent } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import cardTop from "@/modules/05_placement/components/pass/StatCard.vue";

const router = useRouter();
const year = ref<string>("2566");
const round = ref<string>("1");
const title = ref<string>("การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ");
const AddTablePosition = defineAsyncComponent(
  () => import("@/modules/05_placement/components/pass/Table.vue")
);
const stat = ref<any>({
  total: 5,
  unContain: 1,
  prepareContain: 3,
  contain: 1,
  disclaim: 0,
});
</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-card bordered class="q-py-sm row col-12">
      <div class="col-12 row bg-white">
        <div class="fit q-px-md q-py-sm">
          <div class="row col-12 q-col-gutter-md fit">
          <cardTop :amount="stat.total" label="จำนวนทั้งหมด" color="#016987" />
          <cardTop :amount="stat.unContain" label="จำนวนที่ยังไม่บรรจุ" color="#02A998" />
          <cardTop :amount="stat.prepareContain" label="จำนวนที่เตรียมบรรจุ" color="#2EA0FF" />
          <cardTop :amount="stat.contain" label="จำนวนที่บรรจุแล้ว" color="#4154B3" />
          <cardTop :amount="stat.disclaim" label="จำนวนที่สละสิทธิ์" color="#FF5C5F" />
        </div>
      </div>
      </div>
    </q-card>
  </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;
  padding-left: 8px;
}
</style>