hrms-user/src/modules/06_evaluate/components/viewstep/viewStep1.vue

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";

import TableData from "@/modules/06_evaluate/components/viewstep/tableStep1.vue";

import { useCounterMixin } from "@/stores/mixin";
import { useEvaluateDetailStore } from "@/modules/06_evaluate/stores/evaluteDetail";

const mixin = useCounterMixin();
const store = useEvaluateDetailStore();
const $q = useQuasar();

const { showLoader, hideLoader, messageError, date2Thai } = mixin;
const {
  columnsLicense,
  columnPeriodhistory,
  columnTrainingHistory,
  columnProjectsProposed,
} = store;

const emit = defineEmits(["update:formDeital"]);

const formDetail = reactive({
  UserId: "",
  CitizenId: "",
  Prefix: "",
  FullName: "",
  Position: "",
  Oc: "",
  Salary: "",
  PositionLevel: "",
  PosNo: "",
  BirthDate: "",
  GovAge: "",
  Educations: [],
  Certificates: [],
  Salaries: [],
  Trainings: [],
  Assessments: [],
  // Type: "",
  // Step: "",
});

async function fetchDetail() {
  showLoader();
  await http
    .get(config.API.evaluationDetail())
    .then((res) => {
      const data = res.data.result;
      formDetail.UserId = data.id;
      formDetail.CitizenId = data.citizenId;
      formDetail.Prefix = data.prefix;
      formDetail.FullName = `${data.firstName}  ${data.lastName}`;
      formDetail.Position = data.position;
      formDetail.Oc = data.oc;
      formDetail.Salary = data.salary;
      formDetail.PositionLevel = data.positionLevel;
      formDetail.PosNo = data.posNo;
      formDetail.BirthDate = data.birthDate && date2Thai(data.birthDate);
      formDetail.GovAge = data.govAge;
      formDetail.Educations = data.educations;
      formDetail.Certificates = data.certificates;
      formDetail.Salaries = data.salaries;
      formDetail.Trainings = data.trainings;
      formDetail.Assessments = data.assessments;
      // fromDetail.Type = data.
      // fromDetail.Step = data.

      emit("update:formDeital", data);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

onMounted(async () => {
  fetchDetail();
});
</script>

<template>
  <q-scroll-area style="height: 450px; max=width: 100%">
    <div class="q-pa-xs">
      <q-card class="q-gutter-md" style="max-width: 100%">
        <q-card bordered style="border: 1px solid #d6dee1">
          <div class="text-weight-bold row items-center bg-grey-2">
            <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
          </div>
          <q-separator />

          <div class="row q-pa-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="วันเดือนปีเกิด"
              >
                <template v-slot:prepend>
                  <q-icon class="size-icon" name="o_calendar_today" />
                </template>
              </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.Oc"
                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>
        </q-card>

        <q-card bordered style="border: 1px solid #d6dee1">
          <div class="text-weight-bold row items-center bg-grey-2">
            <span class="q-ml-lg q-my-sm">ประวัติการศึกษา</span>
          </div>
          <q-separator />
          <div class="row q-pa-sm">
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                model-value="ปริญญาตรี"
                label="ระดับศึกษา"
              />
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                model-value="มหาวิทยาลัยก."
                label="สถานศึกษา"
              />
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                model-value="19/03/44"
                readonly
                label="ตั้งแต่"
              >
                <template v-slot:prepend>
                  <q-icon class="size-icon" name="o_calendar_today" />
                </template>
              </q-input>
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input borderless model-value="19/03/44" readonly label="ถึง">
                <template v-slot:prepend>
                  <q-icon class="size-icon" name="o_calendar_today" />
                </template>
              </q-input>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                model-value="19/03/44"
                readonly
                label="วันทราสำเร็จการศึกษา"
              >
                <template v-slot:prepend>
                  <q-icon class="size-icon" name="o_calendar_today" />
                </template>
              </q-input>
            </div>

            <div class="col-xs-6 col-sm-4 col-md-3">
              <q-input
                borderless
                readonly
                model-value="ปริญญาตรี"
                label="วุฒิการศึกษาในตําแหน่ง"
              />
            </div>

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

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

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

            <div class="col-xs-6 col-sm-4 col-md-6">
              <q-input borderless readonly model-value="ไทย" label="ประเทศ" />
            </div>
          </div>
        </q-card>

        <q-card bordered style="border: 1px solid #d6dee1">
          <div class="text-weight-bold row items-center bg-grey-2">
            <span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
          </div>
          <q-separator />
          <div class="row q-pa-sm">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <TableData :columns="columnsLicense" />
            </div>
          </div>
        </q-card>

        <q-card bordered style="border: 1px solid #d6dee1">
          <div class="text-weight-bold row items-center bg-grey-2">
            <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
          </div>
          <q-separator />
          <div class="row q-pa-sm">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <TableData :columns="columnPeriodhistory" />
            </div>
          </div>
        </q-card>

        <q-card bordered style="border: 1px solid #d6dee1">
          <div class="text-weight-bold row items-center bg-grey-2">
            <span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
          </div>
          <q-separator />
          <div class="row q-pa-sm">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <TableData :columns="columnTrainingHistory" />
            </div>
          </div>
        </q-card>

        <q-card bordered style="border: 1px solid #d6dee1">
          <div class="text-weight-bold row items-center bg-grey-2">
            <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
          </div>
          <q-separator />
          <div class="row q-pa-sm">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <TableData :columns="columnTrainingHistory" />
            </div>
          </div>
        </q-card>

        <q-card bordered style="border: 1px solid #d6dee1">
          <div class="text-weight-bold row items-center bg-grey-2">
            <span class="q-ml-lg q-my-sm">ผลงานทีเคยเสนอขอประเมิน (ถ้ามี)</span>
          </div>
          <q-separator />
          <div class="row q-pa-sm">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <TableData :columns="columnProjectsProposed" />
            </div>
          </div>
        </q-card>
      </q-card>
    </div>
  </q-scroll-area>
</template>

<style scoped></style>