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"
  />

  <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
    <div class="col-12">
      <q-radio
        v-model="defaultOccupation.positionType"
        label="ลูกจ้างประจำ"
        color="teal"
        val="prem"
        :disable="!isStatusRegister"
      />
      <q-radio
        v-model="defaultOccupation.positionType"
        label="ลูกจ้างชั่วคราว"
        color="teal"
        val="temp"
        :disable="!isStatusRegister"
      />
      <q-radio
        v-model="defaultOccupation.positionType"
        label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
        color="teal"
        val="other"
        :disable="!isStatusRegister"
      />
    </div>
    <div class="col-12 row">
      <div class="col-3">
        <q-input
          :class="getClass(isStatusRegister)"
          :outlined="isStatusRegister"
          dense
          lazy-rules
          autogrow
          :readonly="!isStatusRegister"
          :borderless="!isStatusRegister"
          v-model="defaultOccupation.position"
          :rules="[(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`]"
          :label="`${'ชื่อตำแหน่ง'}`"
        />
      </div>
      <div class="col-3">
        <CurrencyInput
          class="q-pl-sm"
          :class="getClass(isStatusRegister)"
          :outlined="isStatusRegister"
          :options="{
            currency: 'THB'
          }"
          lazy-rules
          :readonly="!isStatusRegister"
          :borderless="!isStatusRegister"
          v-model="defaultOccupation.salary"
          :rules="[(val:number| undefined) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
          :label="`${'เงินเดือน'}`"
        />
      </div>
    </div>
    <div class="col-12 row">
      <div class="col-3">
        <q-input
          :class="getClass(isStatusRegister)"
          :outlined="isStatusRegister"
          dense
          lazy-rules
          autogrow
          :readonly="!isStatusRegister"
          :borderless="!isStatusRegister"
          v-model="defaultOccupation.group"
          :rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
          :label="`${'กลุ่ม/ฝ่าย'}`"
        />
      </div>
      <div class="col-3">
        <q-input
          class="q-pl-sm"
          :class="getClass(isStatusRegister)"
          :outlined="isStatusRegister"
          dense
          lazy-rules
          autogrow
          :readonly="!isStatusRegister"
          :borderless="!isStatusRegister"
          v-model="defaultOccupation.pile"
          :rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]"
          :label="`${'กอง'}`"
        />
      </div>
      <div class="col-3">
        <q-input
          class="q-pl-sm"
          :class="getClass(isStatusRegister)"
          :outlined="isStatusRegister"
          dense
          lazy-rules
          autogrow
          :readonly="!isStatusRegister"
          :borderless="!isStatusRegister"
          v-model="defaultOccupation.org"
          :rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]"
          :label="`${'สังกัด'}`"
        />
      </div>
      <div class="col-3">
        <q-input
          class="q-pl-sm"
          :class="getClass(isStatusRegister)"
          :outlined="isStatusRegister"
          dense
          lazy-rules
          :readonly="!isStatusRegister"
          :borderless="!isStatusRegister"
          v-model="defaultOccupation.tel"
          :rules="[(val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์']"
          :label="`${'เบอร์โทรที่ทำงาน'}`"
          maxlength="20"
        />
        <!-- :counter="isStatusRegister ? true : false" -->
        <!-- (val) =>
                (val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
                'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง' -->
        <!-- type="tel" mask="##########" autogrow -->
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import http from '@/plugins/http'
import CurrencyInput from '@/components/CurruncyInput.vue'
import config from '@/app.config'
import { useCounterMixin } from '@/stores/mixin'
import { useDataStore } from '@/stores/data'
import { useRoute } from 'vue-router'
import { useQuasar } from 'quasar'
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'

const props = defineProps({
  status: {
    type: String,
    required: true
  },
  form: {
    type: Object,
    required: true
  },
  isStatusRegister: {
    type: Boolean,
    required: true
  }
})
const emit = defineEmits(['update:form'])

const $q = useQuasar()
const dataStore = useDataStore()
const { loaderPage } = dataStore
const mixin = useCounterMixin()
const { messageError } = mixin
const edit = 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())

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 () => {
  loaderPage(true)
  await http
    .get(config.API.candidateOccupation(examId.value, positionId.value))
    .then((res) => {
      const data = res.data.result
      if (data != null) {
        defaultOccupation.value.org = data.occupationOrg
        defaultOccupation.value.pile = data.occupationPile
        defaultOccupation.value.group = data.occupationGroup
        defaultOccupation.value.salary = data.occupationSalary
        defaultOccupation.value.position = data.occupationPosition
        defaultOccupation.value.positionType =
          data.occupationPositionType == null ? 'other' : data.occupationPositionType
        defaultOccupation.value.tel = data.occupationTelephone
      }
    })
    .catch((e) => {
      messageError($q, e)
    })
    .finally(() => {
      loaderPage(false)
    })
}

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