hrms-recruit/src/modules/01_exam/components/Form/Education.vue

<!-- card วุฒิที่ใช้สมัครสอบ -->
<template>
  <HeaderTop
    v-model:edit="edit"
    header="วุฒิที่ใช้สมัครสอบ"
    icon="mdi-briefcase"
    :addData="true"
    :editOnly="false"
    :editData="false"
  />
  <q-form ref="myform">
    <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
      <div class="col-12 row q-col-gutter-sm">
        <div class="col-xs-12 col-sm-3">
          <q-select
            :class="getClass(status == 'register' || status == 'rejectRegister')"
            :readonly="!(status == 'register' || status == 'rejectRegister')"
            :borderless="!(status == 'register' || status == 'rejectRegister')"
            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            emit-value
            map-options
            option-label="name"
            option-value="id"
            :options="educationLevelOptions"
            v-model="defaultEducation.educationLevelExamId"
            :rules="[(val) => !!val || `${'กรุณาเลือก วุฒิที่ใช้สมัครสอบ'}`]"
            :label="`${'วุฒิที่ใช้สมัครสอบ'}`"
            @update:model-value="(value) => checkInputName()"
          />
        </div>
        <div class="col-xs-12 col-sm-3" v-if="showEducationName">
          <q-input
            :class="getClass(status == 'register' || status == 'rejectRegister')"
            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            autogrow
            :readonly="!(status == 'register' || status == 'rejectRegister')"
            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="defaultEducation.educationName"
            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อปริญญา'}`]"
            :label="`${'ชื่อปริญญา'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-3">
          <q-input
            :class="getClass(status == 'register' || status == 'rejectRegister')"
            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            autogrow
            :readonly="!(status == 'register' || status == 'rejectRegister')"
            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="defaultEducation.educationMajor"
            :rules="[(val) => !!val || `${'กรุณากรอก สาขาวิชา/วิชาเอก'}`]"
            :label="`${'สาขาวิชา/วิชาเอก'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-3">
          <q-input
            :class="getClass(status == 'register' || status == 'rejectRegister')"
            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            autogrow
            :readonly="!(status == 'register' || status == 'rejectRegister')"
            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="defaultEducation.educationLocation"
            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อสถานศึกษา'}`]"
            :label="`${'ชื่อสถานศึกษา'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-3">
          <q-select
            :class="getClass(status == 'register' || status == 'rejectRegister')"
            :readonly="!(status == 'register' || status == 'rejectRegister')"
            :borderless="!(status == 'register' || status == 'rejectRegister')"
            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            emit-value
            map-options
            option-label="name"
            option-value="id"
            :options="educationTypeOptions"
            v-model="defaultEducation.educationType"
            :rules="[(val) => !!val || `${'กรุณาเลือก ประเภทสถานศึกษา'}`]"
            :label="`${'ประเภทสถานศึกษา'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-3">
          <datepicker
            menu-class-name="modalfix"
            :readonly="!(status == 'register' || status == 'rejectRegister')"
            v-model="defaultEducation.educationEndDate"
            :locale="'th'"
            autoApply
            :enableTimePicker="false"
            week-start="0"
            :max-date="new Date()"
            :disabled="!(status == 'register' || status == 'rejectRegister')"
          >
            <template #year="{ year }">
              {{ year + 543 }}
            </template>
            <template #year-overlay-value="{ value }">
              {{ parseInt(value + 543) }}
            </template>
            <template #trigger>
              <q-input
                :class="getClass(status == 'register' || status == 'rejectRegister')"
                :outlined="status == 'register' || status == 'rejectRegister'"
                dense
                lazy-rules
                :readonly="!(status == 'register' || status == 'rejectRegister')"
                :borderless="!(status == 'register' || status == 'rejectRegister')"
                :model-value="
                  defaultEducation.educationEndDate == null
                    ? null
                    : date2Thai(defaultEducation.educationEndDate)
                "
                :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`]"
                :label="`${'วันที่สำเร็จการศึกษา'}`"
              >
                <template v-slot:prepend>
                  <q-icon
                    name="event"
                    class="cursor-pointer"
                    :style="
                      status == 'register' || status == 'rejectRegister'
                        ? 'color: var(--q-primary)'
                        : 'color: var(--q-grey)'
                    "
                  >
                  </q-icon>
                </template>
              </q-input>
            </template>
          </datepicker>
        </div>
        <div class="col-xs-12 col-sm-3">
          <q-input
            :class="getClass(status == 'register' || status == 'rejectRegister')"
            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            type="number"
            :readonly="!(status == 'register' || status == 'rejectRegister')"
            :borderless="!(status == 'register' || status == 'rejectRegister')"
            v-model="defaultEducation.educationScores"
            :rules="[(val) => !!val || `${'กรุณากรอก คะแนนเฉลี่ยสะสม'}`]"
            :label="`${'คะแนนเฉลี่ยสะสม'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-3">
          <q-select
            :class="getClass(status == 'register' || status == 'rejectRegister')"
            :readonly="!(status == 'register' || status == 'rejectRegister')"
            :borderless="!(status == 'register' || status == 'rejectRegister')"
            :outlined="status == 'register' || status == 'rejectRegister'"
            dense
            lazy-rules
            emit-value
            map-options
            option-label="name"
            option-value="id"
            :options="educationLevelOptions"
            v-model="defaultEducation.educationLevelHighId"
            :rules="[(val) => !!val || `${'กรุณาเลือก วุฒิการศึกษาสูงสุด'}`]"
            :label="`${'วุฒิการศึกษาสูงสุด'}`"
          />
        </div>
      </div>
    </div>
  </q-form>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, PropType } from 'vue'
import http from '@/plugins/http'
import config from '@/app.config'
import type { DataOption, Education } from '@/modules/01_exam/interface/index/Main'
import { defaultEducation, changeData } from '@/modules/01_exam/interface/index/Main'
import HeaderTop from '@/components/top.vue'
import { useRoute } from 'vue-router'

import { useCounterMixin } from '@/stores/mixin'
import { useDataStore } from '@/stores/data'
import { useQuasar } from 'quasar'

const props = defineProps({
  status: {
    type: String,
    required: true
  },
  form: {
    type: Object,
    required: true
  },
  educationLevelOptions: {
    type: Array as PropType<DataOption[]>,
    required: true
  }
})

const $q = useQuasar()
const edit = ref<boolean>(true)
const showEducationName = ref<boolean>(true)
const myform = ref<any>({})
const route = useRoute()
const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString())
const educationTypeOptions = ref<any>([
  {
    name: 'รัฐบาล',
    id: 'รัฐบาล'
  },
  {
    name: 'เอกชน',
    id: 'เอกชน'
  }
])

const mixin = useCounterMixin()
const { messageError, date2Thai } = mixin
const dataStore = useDataStore()
const { loaderPage } = dataStore

const emit = defineEmits(['update:form'])

watch(myform, async (count: any, prevCount: any) => {
  emit('update:form', count)
})

watch(defaultEducation, async (count: Education, prevCount: Education) => {
  await changeData('education', count)
})

onMounted(async () => {
  await fetchData()
})

const fetchData = async () => {
  loaderPage(true)
  await http
    .get(config.API.candidateEducation(examId.value, positionId.value))
    .then((res) => {
      const data = res.data.result
      defaultEducation.value.educationLevelExamId = data.educationLevelExamId
      defaultEducation.value.educationName = data.educationName
      defaultEducation.value.educationMajor = data.educationMajor
      defaultEducation.value.educationLocation = data.educationLocation
      defaultEducation.value.educationType = data.educationType
      defaultEducation.value.educationEndDate =
        data.educationEndDate == null ? null : new Date(data.educationEndDate)
      defaultEducation.value.educationScores = data.educationScores
      defaultEducation.value.educationLevelHighId = data.educationLevelHighId
      checkInputName()
    })
    .catch((e) => {
      //   messageError($q, e)
    })
    .finally(() => {
      loaderPage(false)
    })
}

const checkInputName = () => {
  showEducationName.value =
    props.educationLevelOptions.filter(
      (x) =>
        x.id == defaultEducation.value.educationLevelExamId &&
        (x.name == 'ปริญญาตรี' || x.name == 'ปริญญาโท' || x.name == 'ปริญญาเอก')
    ).length == 0
      ? false
      : true
}

const getClass = (val: boolean) => {
  return {
    'full-width inputgreen cursor-pointer': val,
    'full-width cursor-pointer': !val
  }
}
</script>