"Refactoring code module 05_placement 01_Main,02_transferMain,03_receiveMain

src/modules/05_placement/components/PersonalList/PersonalListPage.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { tokenParsed } from "@/plugins/auth";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { usePlacementDataStore } from "@/modules/05_placement/store";
+
+import CardTop from "@/modules/05_placement/components/PersonalList/StatCard.vue";
+import AddTablePosition from "@/modules/05_placement/components/PersonalList/Table.vue";
+
+const DataStore = usePlacementDataStore();
+
+let roleAdmin = ref<boolean>(false);
+const $q = useQuasar;
+const mixin = useCounterMixin();
+const { messageError, showLoader, hideLoader } = mixin;
+const router = useRouter();
+const route = useRoute();
+const examId = route.params.examId;
+const year = ref<string>("");
+const round = ref<string>("");
+const title = ref<string>("");
+const examData = ref<any>();
+
+const stat = ref<any>({
+  total: 0,
+  unContain: 0,
+  prepareContain: 0,
+  contain: 0,
+  disclaim: 0,
+});
+
+/** เรียกข้อมูล Stat */
+async function getStat() {
+  const examIdString = Array.isArray(examId) ? examId[0] : examId;
+  await http
+    .get(config.API.getStatCard(examIdString))
+    .then((res) => {
+      const statCard = res.data.result;
+      // อัปเดตค่าในตัวแปร stat
+      stat.value = {
+        total: statCard.total,
+        unContain: statCard.unContain,
+        prepareContain: statCard.prepareContain,
+        contain: statCard.contain,
+        disclaim: statCard.disclaim,
+      };
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+/** get รายละเอียด ของการสอบ */
+async function fetchPlacementData() {
+  showLoader();
+  await http
+    .get(config.API.MainDetail(0))
+    .then(async (res) => {
+      DataStore.DataMainOrig = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** เมื่อเริ่มโหลดหน้า ให้ ใช้ฟังชั่น get stat
+ * เเละหา ชื่อรอบ รอบ ปี
+ */
+onMounted(async () => {
+  if (DataStore.DataMainOrig.length == 0) {
+    await fetchPlacementData();
+  }
+
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
+  }
+
+  await getStat();
+
+  examData.value = await DataStore.DataMainOrig.find(
+    (x: any) => x.id == examId
+  );
+
+  title.value = examData.value == null ? null : examData.value.examRound;
+  round.value = examData.value == null ? null : examData.value.examOrder;
+  year.value = examData.value == null ? null : examData.value.fiscalYear;
+});
+</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.push(`/placement`)"
+      />
+      รายชื่อผู้สอบในรอบ {{ 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
+              v-if="roleAdmin"
+              :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 :statCard="getStat" class="q-pa-none" />
+    </div>
+  </q-card>
+</template>
+
+<style lang="scss">
+.cardNum {
+  border-radius: 5px;
+  padding-left: 8px;
+}
+</style>