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

<!-- card อาชีพ -->
<template>
  <HeaderTop
    v-model:edit="edit"
    header="อาชีพ"
    icon="mdi-briefcase"
    :addData="true"
    :editOnly="false"
    :editData="false"
  />
  <!-- :changeBtn="changeBtn" -->
  <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-pb-lg">
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          hide-bottom-space
          dense
          lazy-rules
          type="textarea"
          autogrow
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultOccupation.official"
          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
          :disable="
            defaultOccupation.status !== 'official' ||
            !(status == 'register' || status == 'rejectRegister')
          "
        >
          <template v-slot:before>
            <q-radio
              v-model="defaultOccupation.status"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="official"
              label="ข้าราชการกรุงเทพมหานคร ตำแหน่ง"
              dense
              :disable="!(status == 'register' || status == 'rejectRegister')"
              size="md"
              style="font-size: 14px; color: black"
            />
          </template>
        </q-input>
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          hide-bottom-space
          dense
          lazy-rules
          type="textarea"
          autogrow
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultOccupation.personnel"
          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
          :disable="
            defaultOccupation.status !== 'personnel' ||
            !(status == 'register' || status == 'rejectRegister')
          "
        >
          <template v-slot:before>
            <q-radio
              v-model="defaultOccupation.status"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="personnel"
              label="บุคลากรกรุงเทพมหานคร ตำแหน่ง"
              dense
              :disable="!(status == 'register' || status == 'rejectRegister')"
              size="md"
              style="font-size: 14px; color: black"
            />
          </template>
        </q-input>
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          hide-bottom-space
          dense
          lazy-rules
          type="textarea"
          autogrow
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultOccupation.officialsOther"
          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
          :disable="
            defaultOccupation.status !== 'officialsOther' ||
            !(status == 'register' || status == 'rejectRegister')
          "
        >
          <template v-slot:before>
            <q-radio
              v-model="defaultOccupation.status"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="officialsOther"
              label="ข้าราชการประเภทอื่น ตำแหน่ง"
              dense
              :disable="!(status == 'register' || status == 'rejectRegister')"
              size="md"
              style="font-size: 14px; color: black"
            />
          </template>
        </q-input>
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          hide-bottom-space
          dense
          lazy-rules
          type="textarea"
          autogrow
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultOccupation.employee"
          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
          :disable="
            defaultOccupation.status !== 'employee' ||
            !(status == 'register' || status == 'rejectRegister')
          "
        >
          <template v-slot:before>
            <q-radio
              v-model="defaultOccupation.status"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="employee"
              label="ลูกจ้าง/พนักงานราชการของส่วนราชการอื่น ตำแหน่ง"
              dense
              :disable="!(status == 'register' || status == 'rejectRegister')"
              size="md"
              style="font-size: 14px; color: black"
            />
          </template>
        </q-input>
        <q-radio
          v-model="defaultOccupation.status"
          checked-icon="task_alt"
          unchecked-icon="panorama_fish_eye"
          val="studying"
          label="กำลังศึกษาต่อ"
          dense
          :disable="!(status == 'register' || status == 'rejectRegister')"
          size="md"
          style="font-size: 14px; color: black"
        />
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          hide-bottom-space
          dense
          lazy-rules
          type="textarea"
          autogrow
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultOccupation.other"
          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
          :disable="
            defaultOccupation.status !== 'other' ||
            !(status == 'register' || status == 'rejectRegister')
          "
        >
          <template v-slot:before>
            <q-radio
              v-model="defaultOccupation.status"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="other"
              label="อื่นๆ"
              dense
              :disable="!(status == 'register' || status == 'rejectRegister')"
              size="md"
              style="font-size: 14px; color: black"
            />
          </template>
        </q-input>
      </div>
      <div class="col-xs-12 col-sm-3 col-md-3">
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          type="textarea"
          autogrow
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultOccupation.company"
          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
          :label="`${'สำนัก/บริษัท'}`"
        />
      </div>
      <div class="col-xs-12 col-sm-3 col-md-3">
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          type="textarea"
          autogrow
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultOccupation.department"
          :rules="[(val) => !!val || `${'กรุณากรอก กอง/ฝ่าย'}`]"
          :label="`${'กอง/ฝ่าย'}`"
        />
      </div>
      <div class="col-xs-12 col-sm-3 col-md-3">
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          type="textarea"
          autogrow
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultOccupation.email"
          :rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
          :label="`${'E-mail address'}`"
        />
      </div>
      <div class="col-xs-12 col-sm-3 col-md-3">
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          counter
          maxlength="10"
          lazy-rules
          type="tel"
          autogrow
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultOccupation.tel"
          :rules="[
            (val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
            (val) => /^[0-9]*$/.test(val) || 'กรุณากรอก โทรศัพท์ให้ถูกต้อง'
          ]"
          :label="`${'โทรศัพท์'}`"
        />
      </div>
    </div>
  </q-form>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import http from '@/plugins/http'
import config from '@/app.config'
import type { Occupation } from '@/modules/01_exam/interface/index/Main'
import { defaultOccupation, changeData } from '@/modules/01_exam/interface/index/Main'
import HeaderTop from '@/components/top.vue'
import { useRoute } from 'vue-router'

const props = defineProps({
  status: {
    type: String,
    required: true
  },
  form: {
    type: Object,
    required: true
  }
})

const edit = ref<boolean>(true)
const myform = ref<any>({})
const loader = ref<boolean>(false)
const route = useRoute()
const examId = ref<string>(route.params.id.toString())

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

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

watch(defaultOccupation, async (count: Occupation, prevCount: Occupation) => {
  await changeData('occupation', count)
})

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

const fetchData = async () => {
  loader.value = true
  await http
    .get(config.API.candidateOccupation(examId.value))
    .then((res) => {
      const data = res.data.result
      defaultOccupation.value.status = data.occupationType
      defaultOccupation.value.company = data.occupationCompany
      defaultOccupation.value.department = data.occupationDepartment
      defaultOccupation.value.email = data.occupationEmail
      defaultOccupation.value.tel = data.occupationTelephone
      defaultOccupation.value.official =
        data.occupationType == 'official' ? data.occupationPosition : null
      defaultOccupation.value.personnel =
        data.occupationType == 'personnel' ? data.occupationPosition : null
      defaultOccupation.value.officialsOther =
        data.occupationType == 'officialsOther' ? data.occupationPosition : null
      defaultOccupation.value.employee =
        data.occupationType == 'employee' ? data.occupationPosition : null
      defaultOccupation.value.other =
        data.occupationType == 'other' ? data.occupationPosition : null
    })
    .catch(() => {})
    .finally(() => {
      loader.value = false
    })
}

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