hrms-mgt/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue

<script setup lang="ts">
import { onMounted, reactive } from "vue";

/** importType*/
import type {
  EducationForm,
  CertificatesForm,
} from "@/modules/12_evaluatePersonal/interface/index/evalute";

/** importComponents*/
import TableData from "@/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue";

/** import Store*/
import { useCounterMixin } from "@/stores/mixin";
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";

/** use*/
const mixin = useCounterMixin();
const store = useEvaluateDetailStore();

const {
  columnsCertificates,
  columnSalaries,
  columnTraining,
  columnProjectsProposed,
} = store;
const { date2Thai, showLoader, hideLoader } = mixin;

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
});

const formDetail = reactive({
  citizenId: "",
  prefix: "",
  fullName: "",
  position: "",
  oc: "",
  salary: "",
  positionLevel: "",
  posNo: "",
  birthDate: "",
  govAge: "",
  educations: [] as EducationForm[],
  certificates: [],
  salaries: [],
  trainings: [],
  assessments: [],
});

function formattedNumber(x: number) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

onMounted(() => {
  if (props.data) {
    showLoader();
    formDetail.prefix = props.data.prefix;
    formDetail.fullName = props.data.fullName;
    formDetail.position = props.data.position;
    formDetail.oc = props.data.oc;
    formDetail.salary = props.data.salary
      ? formattedNumber(props.data.salary)
      : "-";
    formDetail.positionLevel = props.data.positionLevel;
    formDetail.posNo = props.data.posNo;
    formDetail.birthDate =
      props.data.birthDate && date2Thai(props.data.birthDate);
    formDetail.govAge = props.data.govAge;
    formDetail.educations = props.data.educations;

    formDetail.certificates = props.data.certificates
      ? props.data.certificates.map((e: CertificatesForm) => ({
          certificateNo: e.certificateNo,
          certificateType: e.certificateType,
          expireDate: date2Thai(e.expireDate),
          issueDate: date2Thai(e.issueDate),
          issuer: e.issuer,
        }))
      : [];

    formDetail.salaries = props.data.salaries
      ? props.data.salaries.map((e: any) => ({
          amount: e.amount,
          date: date2Thai(e.date),
          mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
          posNo: e.posNo,
          position: e.position,
          positionSalaryAmount: e.positionSalaryAmount
            ? e.positionSalaryAmount
            : 0,
          refCommandDate: e.refCommandDate ? e.refCommandDate : "",

          refCommandNo: e.refCommandNo ? e.refCommandNo : "",
          salaryClass: e.salaryClass ? e.salaryClass : "",
          salaryRef: e.salaryRef ? e.salaryRef : "",
          salaryStatus: e.salaryStatus ? e.salariesStatus : "",
          //
          oc: "-",
          lineWork: "-",
          side: "-",
          positionType: "-",
          level: "-",
          positionsAdministrative: "-",
          aspectAdministrative: "-",
        }))
      : [];

    formDetail.trainings = props.data.trainings
      ? props.data.trainings.map((e: any) => ({
          dateOrder: date2Thai(e.dateOrder),
          department: e.department,
          duration: e.duration,
          endDate: date2Thai(e.endDate),
          name: e.name,
          numberOrder: e.numberOrder,
          place: e.place,
          startDate: date2Thai(e.startDate),
          topic: e.topic,
          yearly: e.yearly,
        }))
      : [];
    formDetail.assessments = props.data.assessments;
    setTimeout(() => {
      hideLoader();
    }, 1000);
  }
});
</script>

<template>
  <q-card
    bordered
    class="col-12 row shadow-0 q-pa-sm"
    :style="$q.screen.lt.sm ? '' : 'max-height: 64vh; overflow: scroll;'"
  >
    <div class="row col-12">
      <q-card class="col-12 cardSp1" bordered>
        <div class="text-weight-bold row items-center bg-grey-2 col-12">
          <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
        </div>
        <div class="col-12"><q-separator /></div>

        <div class="row col-12 q-pa-sm">
          <div class="row q-col-gutter-sm">
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="formDetail.prefix"
                label="คำนำหน้าชื่อ"
              ></q-input>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="formDetail.fullName"
                label="ชื่อ - นามสกุล"
              />
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                :model-value="formDetail.birthDate"
                readonly
                label="วันเดือนปีเกิด"
              >
              </q-input>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="formDetail.position"
                label="ตำแหน่ง"
              />
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="formDetail.posNo"
                label="ตำแหน่งเลขที่"
              />
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="formDetail.salary"
                label="เงินเดือน"
              />
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="formDetail.positionLevel"
                label="ระดับปัจจุบัน"
              />
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="formDetail.positionLevel"
                label="ระดับที่ประเมิน"
              />
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="formDetail.govAge"
                label="อายุราชการ"
              />
            </div>
            <div class="col-xs-12 col-sm-9">
              <q-input
                borderless
                readonly
                :model-value="formDetail.oc"
                label="สังกัด"
                autogrow
              />
            </div>
          </div>
        </div>
      </q-card>

      <q-card class="col-12 cardSp1" bordered>
        <div class="text-weight-bold row items-center bg-grey-2 col-12">
          <span class="q-ml-lg q-my-sm">ประวัติการศึกษา </span>
        </div>
        <div class="col-12"><q-separator /></div>
        <div
          class="row col-12 q-pa-sm"
          v-if="formDetail.educations && formDetail.educations.length > 0"
        >
          <div
            class="row q-col-gutter-sm"
            v-for="(education, index) in formDetail.educations"
            :key="index"
          >
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="education.educationLevel"
                label="ระดับศึกษา"
              />
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="education.institute"
                label="สถานศึกษา"
              />
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                :model-value="date2Thai(education.startDate)"
                readonly
                label="ตั้งแต่"
              >
              </q-input>
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                :model-value="date2Thai(education.endDate)"
                readonly
                label="ถึง"
              >
              </q-input>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                :model-value="date2Thai(education.finishDate)"
                readonly
                label="วันที่สำเร็จการศึกษา"
              >
              </q-input>
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="education.isEducation ? 'ใช่' : 'ไม่ใช่'"
                label="วุฒิการศึกษาในตําแหน่ง"
              />
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="education.degree"
                label="วุฒิการศึกษา"
              />
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="education.field"
                label="สาขาวิชา/ทาง"
              />
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="education.fundName"
                label="ทุน"
              />
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                :model-value="education.gpa"
                label="เกรดเฉลี่ย"
              />
            </div>

            <div class="col-xs-6 col-sm-4 col-md-6">
              <q-input
                borderless
                readonly
                :model-value="education.country"
                label="ประเทศ"
              />
            </div>
          </div>
        </div>
        <div v-else class="row col-12 q-pa-md">ไม่มีประวัติการศึกษา</div>
      </q-card>

      <q-card class="col-12 cardSp1" bordered>
        <div class="text-weight-bold row items-center bg-grey-2 col-12">
          <span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
        </div>
        <div class="col-12"><q-separator /></div>
        <TableData
          class="col-12"
          :columns="columnsCertificates"
          :row="formDetail.certificates"
        />
      </q-card>

      <q-card class="col-12 cardSp1" bordered>
        <div class="text-weight-bold row items-center bg-grey-2 col-12">
          <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="col-10">
          <TableData :columns="columnSalaries" :row="formDetail.salaries" />
        </div>
      </q-card>

      <q-card class="col-12 cardSp1" bordered>
        <div class="text-weight-bold row items-center bg-grey-2 col-12">
          <span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
        </div>
        <div class="col-12"><q-separator /></div>
        <TableData
          class="col-12"
          :columns="columnTraining"
          :row="formDetail.trainings"
        />
      </q-card>

      <q-card class="col-12 cardSp1" bordered>
        <div class="text-weight-bold row items-center bg-grey-2 col-12">
          <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="col-12 q-pa-sm">-</div>
      </q-card>

      <q-card class="col-12 cardSp1" bordered>
        <div class="text-weight-bold row items-center bg-grey-2 col-12">
          <span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span>
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="col-10">
          <TableData :columns="columnProjectsProposed" />
        </div>
      </q-card>
    </div>
  </q-card>
</template>
<style scoped>
.cardSp1 {
  border: 1px solid #d6dee1;
  margin-bottom: 10px;
  box-shadow: none !important;
}
</style>