hrms-user/src/modules/06_evaluate/components/step/step1.vue

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

import { useCounterMixin } from "@/stores/mixin";
import { useEvaluateStore } from "@/modules/06_evaluate/store";
import PopupCheckFeatures from "@/modules/06_evaluate/components/PopupCheckFeatures.vue";

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

const { showLoader, hideLoader, messageError } = mixin;

const props = defineProps({
  evaluateId: {
    type: String,
  },
  educations: Array
});

const modal = ref<boolean>(false);
const show = ref<boolean>(false);
const emit = defineEmits(["update:spec"]);

const formData = reactive<any>({
  isEducationalQft: false, // คุณวุฒิการศึกษา
  isGovermantServiceHtr: false, // ประวัติการรับราชการ
  isOperatingExp: false, // ประสบการณ์ในการปฏิบัติงาน
  isMinPeriodOfTenure: false, // ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก
  isHaveSpecificQft: false, // มีคุณสมบัติตรงตามคุณสมบัติเฉพาะสำหรับตำแหน่งที่กำหนด ในมาตราฐานกำหนดตำแหน่ง
  isHaveProLicense: false, // มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ
  isHaveMinPeriodOrHoldPos: false, // มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก]
});
async function updateValue() {
  emit("update:spec", formData);
}

async function fetchCheckSpec(id: string) {
  showLoader();
  await http
    .get(config.API.evaluationCheckspecByid(id))
    .then((res) => {
      const data = res.data.result;
      formData.isEducationalQft = data.isEducationalQft;
      formData.isGovermantServiceHtr = data.isGovermantServiceHtr;
      formData.isOperatingExp = data.isOperatingExp;
      formData.isMinPeriodOfTenure = data.isMinPeriodOfTenure;
      formData.isHaveSpecificQft = data.isHaveSpecificQft;
      formData.isHaveProLicense = data.isHaveProLicense;
      formData.isHaveMinPeriodOrHoldPos = data.isHaveMinPeriodOrHoldPos;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function openModal(status: boolean) {
  modal.value = true;
  show.value = status
}

function closeModal() {
  modal.value = false;
}

onMounted(() => {
  console.log(store.step);

  props.evaluateId && fetchCheckSpec(props.evaluateId);
});
</script>

<template>
  <q-list>
    <q-item v-ripple>
      <q-item-section avatar>
        <q-checkbox
          keep-color
          color="primary"
          v-model="formData.isEducationalQft"
          @update:model-value="updateValue"
        />
      </q-item-section>
      <q-item-section>
        <q-item-label
          >คุณวุฒิการศึกษา
          <q-btn
            flat
            round
            dense
            color="info"
            icon="info"
            @click="openModal(false)"
          >
            <q-tooltip>ข้อมูลเพิ่มเติม</q-tooltip>
          </q-btn>
        </q-item-label>
      </q-item-section>
    </q-item>
    <q-item v-ripple>
      <q-item-section avatar>
        <q-checkbox
          keep-color
          color="primary"
          v-model="formData.isGovermantServiceHtr"
          @update:model-value="updateValue"
        />
      </q-item-section>
      <q-item-section>
        <q-item-label>ประวัติการรับราชการ </q-item-label>
      </q-item-section>
    </q-item>
    <q-item v-ripple>
      <q-item-section avatar>
        <q-checkbox
          keep-color
          color="primary"
          v-model="formData.isOperatingExp"
          @update:model-value="updateValue"
        />
      </q-item-section>
      <q-item-section>
        <q-item-label>ประสบการณ์ในการปฏิบัติงาน </q-item-label>
      </q-item-section>
    </q-item>
    <q-item v-ripple>
      <q-item-section avatar>
        <q-checkbox
          keep-color
          color="primary"
          v-model="formData.isMinPeriodOfTenure"
          @update:model-value="updateValue"
        />
      </q-item-section>
      <q-item-section>
        <q-item-label
          >ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก
          <q-btn
            flat
            round
            dense
            color="info"
            icon="info"
            @click="openModal(true)"
          >
            <q-tooltip>ข้อมูลเพิ่มเติม</q-tooltip>
          </q-btn></q-item-label
        >
      </q-item-section>
    </q-item>
    <q-item v-ripple>
      <q-item-section avatar>
        <q-checkbox
          keep-color
          color="primary"
          v-model="formData.isHaveSpecificQft"
          @update:model-value="updateValue"
        />
      </q-item-section>
      <q-item-section>
        <q-item-label
          >มีคุณสมบัติตรงตามคุณสมบัติเฉพาะ สำหรับตำแหน่งที่กำหนด
          ในมาตรฐานกำหนดตำแหน่ง</q-item-label
        >
      </q-item-section>
    </q-item>
    <q-item v-ripple>
      <q-item-section avatar>
        <q-checkbox
          keep-color
          color="primary"
          v-model="formData.isHaveProLicense"
          @update:model-value="updateValue"
        />
      </q-item-section>
      <q-item-section>
        <q-item-label
          >มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ และ/หรือ
          คุณวุฒิเพิ่มเติมครบถ้วนตามที่ ก.ก. กำหนด (แพทย์พยาบาล วิศวกรโยธา
          สถาปนิก ฯลฯ)</q-item-label
        >
      </q-item-section>
    </q-item>
    <q-item v-ripple>
      <q-item-section avatar>
        <q-checkbox
          keep-color
          color="primary"
          v-model="formData.isHaveMinPeriodOrHoldPos"
          @update:model-value="updateValue"
        />
      </q-item-section>
      <q-item-section>
        <q-item-label
          >มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคย
          ดำรงตำแหน่งในสายงานที่จะคัดเลือก
          ตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก</q-item-label
        >
      </q-item-section>
    </q-item>
  </q-list>

  <PopupCheckFeatures :modal="modal" :show="show" :close-modal="closeModal" :educations="educations"/>
</template>

<style scoped></style>