Bug eva

src/modules/06_evaluate/components/PopupPosition.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+import { ref, watch } from "vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { CardDataPos } from "@/modules/10_registry/interface/index/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError, formatDatePosition } =
+  useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const cardData = ref<CardDataPos[]>([
+  {
+    label: "ระยะเวลาดำรงตำแหน่งในสายงาน",
+    data: [],
+  },
+  {
+    label: "ระยะเวลาดำรงตำแหน่งตามระดับ",
+    data: [],
+  },
+  {
+    label: "ระยะเวลาดำรงตำแหน่งทางการบริหาร",
+    data: [],
+  },
+]);
+
+function onClosePopup() {
+  modal.value = false;
+}
+
+async function fetchDataPosition() {
+  showLoader();
+  await http
+    .get(config.API.salaryTenurePosition(""))
+    .then((res) => {
+      const data = res.data.result;
+      if (data) {
+        // map ข้อมูลระยะเวลาดำรงตำแหน่ง
+        const formatData = (list: any) =>
+          list.map((e: any) => ({
+            name: e.name ?? "",
+            time: formatDatePosition(e.year, e.month, e.day),
+          }));
+
+        // แปลงข้อมูลจาก data
+        const position = data.position ? formatData(data.position) : []; //ระยะเวลาดำรงตำแหน่งในสายงาน
+        const posLevel = data.posLevel ? formatData(data.posLevel) : []; //ระยะเวลาดำรงตำแหน่งตามระดับ
+        const posExecutive = data.posExecutive
+          ? formatData(data.posExecutive)
+          : []; //ระยะเวลาดำรงตำแหน่งทางการบริหาร
+
+        // นำข้อมูลไปใส่ใน cardData
+        if (cardData.value[0]) {
+          cardData.value[0].data = position;
+        }
+        if (cardData.value[1]) {
+          cardData.value[1].data = posLevel;
+        }
+        if (cardData.value[2]) {
+          cardData.value[2].data = posExecutive;
+        }
+        //เช็คค่า ระยะเวลาดำรงตำแหน่งทางการบริหาร ถ้าไม่มีให้ลบออกจาก cardData
+        if (posExecutive.length === 0 && cardData.value.length > 2) {
+          cardData.value.splice(2, 1);
+        }
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(modal, (v) => {
+  if (v) {
+    fetchDataPosition();
+  } else {
+    cardData.value.forEach((item) => {
+      item.data = [];
+    });
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 40%">
+      <DialogHeader :tittle="`ตำแหน่ง`" :close="onClosePopup" />
+      <q-separator />
+      <q-card-section>
+        <div class="row q-col-gutter-sm q-pb-sm">
+          <div class="col" v-for="(item, index) in cardData" :key="index">
+            <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
+              <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
+                {{ item.label }}
+              </div>
+              <div class="col-12"><q-separator /></div>
+              <q-card-section class="q-pt-none" style="min-height: 200px">
+                <li v-for="data in item.data">
+                  {{ data.name }} {{ data.time }}
+                </li>
+              </q-card-section>
+            </q-card>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>