hrms-mgt/src/modules/15_development/components/historyEmployee/AddPage.vue

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

/** importType*/
import type {
  FormAddHistoryEmployee,
  FormAddHistoryProject,
} from "@/modules/15_development/interface/request/Main";

/** importStore*/
import { useCounterMixin } from "@/stores/mixin";

/** use*/
const router = useRouter();
const route = useRoute();
const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin;

const id = ref<string>(route.params.id as string);
const dateOrder = ref<Date | null>(null);
const order = ref<string>("");

/** ตัวแปรข้อมูลข้าราชการ */
const formMain = reactive<FormAddHistoryEmployee>({
  id: "",
  name: "", //ชื่อ - นามสกุล
  prefix: "", //คำนำหน้าชื่อ
  rank: "", //ยศ
  firstName: "", //ชื่อ
  lastName: "", //นามสกุล
  citizenId: "", //เลขประจําตัวประชาชน
  level: "", //ระดับตําแหน่ง
  type: "", //ประเภทตําแหน่ง
  posLevelId: "", //id ระดับตําแหน่ง
  posTypeId: "", //id ประเภทตําแหน่ง
  position: "", //ตําแหน่ง
  posNo: "", //เลขที่ตำแหน่ง
  oc: "", //หน่วยงานที่สังกัด
});

/** ตัวแปรข้อมูลโครงสร้าง */
const formMainProject = reactive<FormAddHistoryProject>({
  id: "",
  project: "", //ชื่อโครงการ/หลักสูตรการฝึกอบรม
  year: "", //ปีงบประมาณที่เข้ารับการฝึกอบรม
  trainingStart: null, //วันเริ่มต้นการฝึกอบรม
  trainingEnd: null, //วันสิ้นสุดการฝึกอบรม
  totalTraining: "", //รวมระยะเวลาในการฝึกอบรม
  location: "", //สถานที่ไปศึกษาดูงาน
  topic: "", //หัวข้อการไปศึกษาดูงาน
  // studyStart: "", //วันเริ่มต้นการศึกษาดูงาน
  // studyEnd: "", //วันสิ้นสุดการศึกษาดูงาน
  organizingTraining: "", //หน่วยงานที่รับผิดชอบจัดการอบรม
});

function getClass() {
  return "inputgreen";
}

function fetchDataDetail() {
  showLoader();
  http
    .get(config.API.developmentHistoryListByid("employee", id.value))
    .then((res) => {
      const data = res.data.result;
      formMain.id = id.value;
      formMain.citizenId = data.citizenId ? data.citizenId : null;
      formMain.name = data.firstName
        ? `${data.prefix}${data.firstName} ${data.lastName}`
        : null;
      formMain.prefix = data.prefix ? data.prefix : null;
      formMain.firstName = data.firstName ? data.firstName : null;
      formMain.lastName = data.lastName ? data.lastName : null;

      formMain.position = data.position ? data.position : null;
      formMain.posLevelId = data.posLevelId ? data.posLevelId : null;
      formMain.posTypeId = data.posTypeId ? data.posTypeId : null;
      formMain.type = data.posTypeName ? data.posTypeName : null;
      formMain.level = data.posLevelName ? data.posLevelName : null;
      formMain.positionSide = data.positionSide ? data.positionSide : null;
      formMain.oc = data.org ? data.org : null;

      formMainProject.id = data.developmentId ? data.developmentId : null;
      formMainProject.project = data.projectName ? data.projectName : null;
      formMainProject.year = data.year ? data.year : null;
      formMainProject.trainingStart = data.dateStart ? data.dateStart : null;
      formMainProject.trainingEnd = data.dateEnd ? data.dateEnd : null;
      formMainProject.totalTraining = data.totalDate ? data.totalDate : null;
      formMainProject.location = data.addressAcademic
        ? data.addressAcademic
        : null;
      formMainProject.topic = data.topicAcademic ? data.topicAcademic : null;
      formMainProject.studyStart = data.dateStudyStart
        ? data.dateStudyStart
        : null;
      formMainProject.studyEnd = data.dateStudyEnd ? data.dateStudyEnd : null;
      formMainProject.organizingTraining = data.org ? data.org : null;

      dateOrder.value = data.dateOrder;
      order.value = data.order;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

onMounted(() => {
  if (id.value) {
    fetchDataDetail();
  }
});
</script>

<template>
  <div class="toptitle text-dark">
    <q-btn
      icon="mdi-arrow-left"
      unelevated
      round
      dense
      flat
      color="primary"
      class="q-mr-sm"
      @click="router.go(-1)"
    />
    <span> ประวัติฝึกอบรม/ดูงานลูกจ้าง </span>
  </div>
  <q-card flat bordered>
    <q-card-section>
      <!-- Card ข้อมูลลูกจ้าง -->
      <q-card flat bordered style="border: 1px solid #d6dee1">
        <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
          ข้อมูลลูกจ้าง
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="row q-pa-md q-col-gutter-md">
          <div class="col-6">
            <div class="row q-col-gutter-md">
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  เลขประจําตัวประชาชน
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ formMain.citizenId ?? "-" }}
                </div>
              </div>
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  ชื่อ - นามสกุล
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ formMain.name ?? "-" }}
                </div>
              </div>
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  ตำแหน่ง
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ formMain.position ?? "-" }}
                </div>
              </div>
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  กลุ่มงาน
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ formMain.type ?? "-" }}
                </div>
              </div>
            </div>
          </div>
          <div class="col-6">
            <div class="row q-col-gutter-md">
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  ระดับชั้นงาน
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ formMain.level ?? "-" }}
                </div>
              </div>
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  หน่วยงานที่สังกัด
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ formMain.oc ?? "-" }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </q-card>

      <!-- Card ข้อมูลโครงการ -->
      <q-card flat bordered class="q-mt-md" style="border: 1px solid #d6dee1">
        <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
          ข้อมูลโครงการ
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="row q-pa-md q-col-gutter-md">
          <div class="col-6">
            <div class="row q-col-gutter-md">
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  ชื่อโครงการ/หลักสูตรการฝึกอบรม
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ formMainProject.project ?? "-" }}
                </div>
              </div>
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  ปีงบประมาณที่เข้ารับการฝึกอบรม/ศึกษาดูงาน
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ Number(formMainProject.year) + 543 ?? "-" }}
                </div>
              </div>
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  หัวข้อการไปฝึกอบรม/ศึกษาดูงาน
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ formMainProject.topic ?? "-" }}
                </div>
              </div>
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  สถานที่ไปฝึกอบรม/ศึกษาดูงาน
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ formMainProject.location ?? "-" }}
                </div>
              </div>
            </div>
          </div>
          <div class="col-6">
            <div class="row q-col-gutter-md">
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  วันเริ่มต้นการฝึกอบรม/ศึกษาดูงาน
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{
                    formMainProject.trainingStart
                      ? date2Thai(formMainProject.trainingStart)
                      : "-"
                  }}
                </div>
              </div>
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  วันสิ้นสุดการฝึกอบรม/ศึกษาดูงาน
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{
                    formMainProject.trainingEnd
                      ? date2Thai(formMainProject?.trainingEnd)
                      : "-"
                  }}
                </div>
              </div>
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  รวมระยะเวลาในการฝึกอบรม/ศึกษาดูงาน
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ formMainProject.totalTraining ?? "-" }}
                </div>
              </div>
              <div class="row col-12">
                <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
                  หน่วยงานที่รับผิดชอบ
                </div>

                <div class="col-12 col-sm-12 col-md-7">
                  {{ formMainProject.organizingTraining ?? "-" }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </q-card>

      <div class="row q-col-gutter-sm q-mt-md">
        <div class="col-3">
          <q-input
            readonly
            label="เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ"
            v-model="order"
            dense
            outlined
            :class="getClass()"
            hide-bottom-space
            :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`,]"
          />
        </div>
        <div class="col-3">
          <datepicker
            readonly
            menu-class-name="modalfix"
            v-model="dateOrder"
            :locale="'th'"
            autoApply
            borderless
            :enableTimePicker="false"
            week-start="0"
          >
            <template #year="{ year }">
              {{ year + 543 }}
            </template>
            <template #year-overlay-value="{ value }">
              {{ parseInt(value + 543) }}
            </template>
            <template #trigger>
              <q-input
                readonly
                outlined
                dense
                :class="getClass()"
                hide-bottom-space
                :model-value="dateOrder != null ? date2Thai(dateOrder) : null"
                :rules="[(val:string) => !!val || `${'กรุณากรอกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,]"
                label="คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่"
              >
                <template v-slot:prepend>
                  <q-icon
                    name="event"
                    class="cursor-pointer"
                    style="color: var(--q-primary)"
                  >
                  </q-icon>
                </template>
              </q-input>
            </template>
          </datepicker>
        </div>
      </div>
    </q-card-section>
  </q-card>
</template>