hrms-mgt/src/modules/05_placement/components/PersonalList/DialogDetail.vue

<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";

import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";

import type { QTableProps } from "quasar";
import type { DataEducation } from "@/modules/05_placement/interface/index/Main";
import type {
  DataPerson,
  Education,
} from "@/modules/05_placement/interface/response/Main";

import DialogHeader from "@/components/DialogHeader.vue";

const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { showLoader, hideLoader, date2Thai, messageError } = mixin;

/** รับค่ามาจากหน้าหลัก */
const props = defineProps({
  Modal: Boolean,
  close: {
    type: Function,
    default: () => console.log("not function"),
  },
  personalId: {
    type: String,
    default: "",
  },
  validate: {
    type: Function,
    default: () => console.log("not function"),
  },
});

const rows = ref<DataEducation[]>([]);
const personalForm = ref<DataPerson>();

/**หัวตาราง */
const columns = ref<QTableProps["columns"]>([
  {
    name: "university",
    align: "center",
    label: "สถานศึกษา",
    sortable: true,
    field: "university",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "degree",
    align: "center",
    label: "วุฒิการศึกษา",
    sortable: true,
    field: "degree",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "major",
    align: "center",
    label: "สาขาวิชาเอก",
    sortable: true,
    field: "major",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "graduation",
    align: "center",
    label: "วันที่สำเร็จการศึกษา",
    sortable: true,
    field: "graduation",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);

/**
 * ฟังก์ชันดึงข้อมูลรายละเอียด
 */
async function fetchData() {
  showLoader();
  await http
    .get(config.API.getDatapersonal(props.personalId))
    .then((res) => {
      personalForm.value = res.data.result;
      personalForm.value?.education.map((e: Education) => {
        rows.value.push({
          university: e.institute,
          degree: e.degree,
          major: e.field,
          graduation: date2Thai(e.finishDate),
        });
      });
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ฟังก์ชันแปลงประเภทข้าราชการ เป็นไทย
 * @param val ประเภทข้าราชการ
 */
function formBmaofficer(val: string) {
  switch (val) {
    case "OFFICER":
      return "ขรก.กทม. สามัญ";
    case "EMPLOYEE_PERM":
      return "ลูกจ้างประจำ";
    case "EMPLOYEE_TEMP":
      return "ลูกจ้างชั่วคราว";
    default:
      return "";
  }
}

/**
 * ปิด POPUP ข้อมูล
 */
async function close() {
  props.close();
  rows.value = [];
}

/**
 * เมื่อ props.Modal เป็น true จะเรียกข้อมูลการศึกษา
 */
watch(props, () => {
  if (props.Modal === true) {
    fetchData();
  }
});
</script>
<template>
  <q-dialog v-model="props.Modal" persistent>
    <q-card style="max-width: 100%; width: 80%">
      <q-form>
        <DialogHeader
          :tittle="`รายละเอียดของ ${personalForm?.fullName}`"
          :close="close"
        />

        <q-separator />

        <div class="contanier-box-main">
          <div class="contanier-box-mini">
            <q-card bordered class="card-panding">
              <div class="row items-center q-pa-xs header-text">
                ข้อมูลทั่วไป
                <span
                  v-if="personalForm?.bmaOfficer != null"
                  class="check-officer"
                >
                  <q-icon name="mdi-check" />
                  {{ formBmaofficer(personalForm.bmaOfficer) }}
                </span>
              </div>

              <div class="row q-pa-xs">
                <div class="col-3 header-sub-text">
                  <div class="q-pb-md">เลขประจำตัวประชาชน</div>
                  <div>วัน/เดือน/ปีเกิด</div>
                </div>

                <div class="col-4 sub-text">
                  <div class="q-pb-md">
                    {{ personalForm?.idCard }}
                  </div>
                  <div>
                    {{ date2Thai(personalForm?.dateOfBirth) }}
                  </div>
                </div>

                <div class="col-2 header-sub-text">
                  <div class="q-pb-md">ชื่อ-นามสกุล</div>
                  <div>เพศ</div>
                </div>
                <div class="col-3 sub-text">
                  <div class="q-pb-md">
                    {{ personalForm?.fullName }}
                  </div>
                  <div>
                    {{ personalForm?.gender }}
                  </div>
                </div>
              </div>
            </q-card>
          </div>

          <div class="contanier-box-mini">
            <q-card bordered class="card-panding">
              <div class="row items-center q-pa-xs header-text">ภูมิลำเนา</div>
              <div class="row q-pa-xs">
                <div class="col-3 header-sub-text">ที่อยู่</div>
                <div class="col-9 sub-text">
                  {{ personalForm?.registAddress }}
                </div>
              </div>
            </q-card>
          </div>

          <div class="contanier-box-mini">
            <q-card bordered class="card-panding">
              <div class="row items-center q-pa-xs header-text">การศึกษา</div>
              <q-table
                ref="table"
                :rows="rows"
                :columns="columns"
                flat
                bordered
                class="custom-header-table"
                virtual-scroll
                :virtual-scroll-sticky-size-start="48"
                dense
                hide-bottom
              >
              </q-table>
            </q-card>
          </div>

          <div class="contanier-box-mini">
            <q-card bordered class="card-panding">
              <div class="row items-center q-pa-xs header-text">การสอบ</div>
              <div class="row q-pa-xs">
                <div class="col-6 q-pt-sm q-pl-lg">
                  <div class="row">
                    <div class="col-7 header-sub-text">
                      <div class="q-pb-sm">ผลการสอบ</div>
                      <div class="q-pb-sm">ลำดับที่สอบได้</div>
                      <div class="q-pb-sm">จำนวนครั้งที่สมัครสอบ</div>
                    </div>
                    <div class="col-5 sub-text-exam">
                      <div class="q-pb-sm">
                        {{ personalForm?.pass }}
                      </div>
                      <div class="q-pb-sm">{{ personalForm?.examNumber }}</div>
                      <div class="q-pb-sm">{{ personalForm?.examRound }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </q-card>
          </div>
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</template>
<style lang="scss" scoped>
.icon-officer {
  color: #00aa86;
  padding-left: 20px;
}

.check-officer {
  font-size: 17px;
  font-weight: 500;
  line-height: 26px;
  color: #00aa86;
  padding-left: 20px;
}

.contanier-box-main {
  padding: 10px 21px 10px 21px;
}

.contanier-box-mini {
  padding: 10px 0px 10px 0px;
}

.card-panding {
  padding: 15px 21px 15px 21px;
}

.header-text {
  font-size: 18px;
  font-weight: 600;
  color: #4f4f4f;
}

.header-sub-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: #818181;
}

.sub-text {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.0025em;
  color: #35373c;
}

.card-exam {
  border-radius: 5px;
  background: #fafafa;
}

.header-sub-text-exam {
  font-size: 15px;
  font-weight: 500;
  line-height: 150%;
  color: #818181;
}

.header-sub-text-exam-2 {
  font-size: 15px;
  font-weight: 500;
  line-height: 150%;
  color: #00aa86;
}

.sub-text-exam {
  font-size: 15px;
  font-weight: 500;
  color: #000000;
}

.checkbox-group {
  font-size: 16px;
  font-weight: 400;
  color: #35373c;
}
</style>