hrms-mgt/src/modules/03_recruiting/components/Occupation.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-pb-lg">
        <q-input
          :class="getClass(status == 'checkRegister' || status == 'payment')"
          hide-bottom-space
          dense
          lazy-rules
          type="textarea"
          autogrow
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          v-model="defaultOccupation.official"
          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
          :disable="
            defaultOccupation.status !== 'official' ||
            !(status == 'checkRegister' || status == 'payment')
          "
        >
          <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 == 'checkRegister' || status == 'payment')"
              size="md"
              style="font-size: 14px; color: black"
            />
          </template>
        </q-input>
        <q-input
          :class="getClass(status == 'checkRegister' || status == 'payment')"
          hide-bottom-space
          dense
          lazy-rules
          type="textarea"
          autogrow
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          v-model="defaultOccupation.personnel"
          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
          :disable="
            defaultOccupation.status !== 'personnel' ||
            !(status == 'checkRegister' || status == 'payment')
          "
        >
          <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 == 'checkRegister' || status == 'payment')"
              size="md"
              style="font-size: 14px; color: black"
            />
          </template>
        </q-input>
        <q-input
          :class="getClass(status == 'checkRegister' || status == 'payment')"
          hide-bottom-space
          dense
          lazy-rules
          type="textarea"
          autogrow
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          v-model="defaultOccupation.officialsOther"
          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
          :disable="
            defaultOccupation.status !== 'officialsOther' ||
            !(status == 'checkRegister' || status == 'payment')
          "
        >
          <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 == 'checkRegister' || status == 'payment')"
              size="md"
              style="font-size: 14px; color: black"
            />
          </template>
        </q-input>
        <q-input
          :class="getClass(status == 'checkRegister' || status == 'payment')"
          hide-bottom-space
          dense
          lazy-rules
          type="textarea"
          autogrow
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          v-model="defaultOccupation.employee"
          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
          :disable="
            defaultOccupation.status !== 'employee' ||
            !(status == 'checkRegister' || status == 'payment')
          "
        >
          <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 == 'checkRegister' || status == 'payment')"
              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 == 'checkRegister' || status == 'payment')"
          size="md"
          style="font-size: 14px; color: black"
        />
        <q-input
          :class="getClass(status == 'checkRegister' || status == 'payment')"
          hide-bottom-space
          dense
          lazy-rules
          type="textarea"
          autogrow
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          v-model="defaultOccupation.other"
          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
          :disable="
            defaultOccupation.status !== 'other' ||
            !(status == 'checkRegister' || status == 'payment')
          "
        >
          <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 == 'checkRegister' || status == 'payment')"
              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 == 'checkRegister' || status == 'payment')"
          :outlined="status == 'checkRegister' || status == 'payment'"
          dense
          lazy-rules
          type="textarea"
          autogrow
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          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 == 'checkRegister' || status == 'payment')"
          :outlined="status == 'checkRegister' || status == 'payment'"
          dense
          lazy-rules
          type="textarea"
          autogrow
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          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 == 'checkRegister' || status == 'payment')"
          :outlined="status == 'checkRegister' || status == 'payment'"
          dense
          lazy-rules
          type="textarea"
          autogrow
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          v-model="defaultOccupation.email"
          :rules="[
            (val) => !!val || 'กรุณากรอก E-mail address',
            (val) =>
              /^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/.test(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 == 'checkRegister' || status == 'payment')"
          :outlined="status == 'checkRegister' || status == 'payment'"
          dense
          :counter="
            status == 'checkRegister' || status == 'payment' ? true : false
          "
          maxlength="10"
          lazy-rules
          type="tel"
          mask="##########"
          autogrow
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          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/03_recruiting/interface/index/Main";
import {
  defaultOccupation,
  changeData,
} from "@/modules/03_recruiting/interface/index/Main";
import HeaderTop from "@/modules/03_recruiting/components/top.vue";
import { useRoute } from "vue-router";

import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";

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

const $q = useQuasar();
const edit = ref<boolean>(true);
const myform = ref<any>({});
const route = useRoute();
const candidateId = ref<string>(route.params.candidateId.toString());

const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;

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 () => {
  showLoader();
  await http
    .get(config.API.candidateOccupation(candidateId.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((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

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