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

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

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

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

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

/** use*/
const mixin = useCounterMixin();
const store = useEvaluateDetailStore();
const {
  columnsCertificates,
  columnSalaries,
  columnTraining,
  columnAssessments,
} = store;
const { date2Thai, showLoader, hideLoader } = mixin;

/**
 * props
 */
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 ? education.educationLevel : '-'
                "
                label="ระดับศึกษา"
              />
            </div>

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

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

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                :model-value="
                  education.endDate ? date2Thai(education.endDate) : '-'
                "
                readonly
                label="ถึง"
              >
              </q-input>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                :model-value="
                  education.finishDate ? 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 ? education.degree:'-'"
                label="วุฒิการศึกษา"
              />
            </div>

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

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

            <div class="col-xs-6 col-sm-4 col-md-6">
              <q-input
                borderless
                readonly
                :model-value="education.country ? education.country : '-'"
                label="ประเทศ"
              />
            </div>
            <div
              v-if="index + 1 !== formDetail.educations.length"
              class="col-12"
            >
              <q-separator size="2px" />
            </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="columnAssessments"
            :row="formDetail.assessments"
          />
        </div>
      </q-card>
    </div>
  </q-card>
</template>

<style scoped>
.cardSp1 {
  border: 1px solid #d6dee1;
  margin-bottom: 10px;
  box-shadow: none !important;
}
</style>