hrms-mgt/src/modules/03_recruiting/components/Occupation.vue

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";

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 CurrencyInput from "@/modules/03_recruiting/components/CurruncyInput.vue";

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

const $q = useQuasar();
const route = useRoute();
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;

const candidateId = ref<string>(route.params.candidateId.toString());
const edit = ref<boolean>(true);
const myform = ref<object | null>(null);

const emit = defineEmits(["update:form"]);

async function fetchData() {
  showLoader();
  await http
    .get(config.API.candidateOccupation(candidateId.value))
    .then((res) => {
      const data = res.data.result;
      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;
      defaultOccupation.value.tel = data.occupationTelephone;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

function getClass(val: boolean) {
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
}

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();
});
</script>

<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">
      <div class="col-12 q-pb-sm">
        <q-radio
          v-model="defaultOccupation.positionType"
          label="ลูกจ้างประจำ"
          color="teal"
          val="prem"
          :disable="!(status == 'checkRegister' || status == 'payment')"
        />
        <q-radio
          v-model="defaultOccupation.positionType"
          label="ลูกจ้างชั่วคราว"
          color="teal"
          val="temp"
          :disable="!(status == 'checkRegister' || status == 'payment')"
        />
        <q-radio
          v-model="defaultOccupation.positionType"
          label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
          color="teal"
          val="other"
          :disable="!(status == 'checkRegister' || status == 'payment')"
        />
      </div>
      <div class="col-12 row q-col-gutter-sm">
        <div class="col-4">
          <q-input
            :class="getClass(status == 'checkRegister' || status == 'payment')"
            :outlined="status == 'checkRegister' || status == 'payment'"
            dense
            lazy-rules
            autogrow
            :readonly="!(status == 'checkRegister' || status == 'payment')"
            :borderless="!(status == 'checkRegister' || status == 'payment')"
            v-model="defaultOccupation.position"
            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`]"
            :label="`${'ชื่อตำแหน่ง'}`"
          />
        </div>
        <div class="col-4">
          <CurrencyInput
            :class="getClass(status == 'checkRegister' || status == 'payment')"
            :outlined="status == 'checkRegister' || status == 'payment'"
            :options="{
              currency: 'THB',
            }"
            v-model="defaultOccupation.salary"
            :readonly="!(status == 'checkRegister' || status == 'payment')"
            :borderless="!(status == 'checkRegister' || status == 'payment')"
            :rules="[(val:number| undefined) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
            :label="`${'เงินเดือน'}`"
          />
        </div>

        <div class="col-4">
          <q-input
            :class="getClass(status == 'checkRegister' || status == 'payment')"
            :outlined="status == 'checkRegister' || status == 'payment'"
            dense
            lazy-rules
            autogrow
            :readonly="!(status == 'checkRegister' || status == 'payment')"
            :borderless="!(status == 'checkRegister' || status == 'payment')"
            v-model="defaultOccupation.group"
            :rules="[(val:string) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
            :label="`${'กลุ่ม/ฝ่าย'}`"
          />
        </div>
        <div class="col-4">
          <q-input
            :class="getClass(status == 'checkRegister' || status == 'payment')"
            :outlined="status == 'checkRegister' || status == 'payment'"
            dense
            lazy-rules
            autogrow
            :readonly="!(status == 'checkRegister' || status == 'payment')"
            :borderless="!(status == 'checkRegister' || status == 'payment')"
            v-model="defaultOccupation.pile"
            :rules="[(val:string) => !!val || `${'กรุณากรอก กอง'}`]"
            :label="`${'กอง'}`"
          />
        </div>
        <div class="col-4">
          <q-input
            :class="getClass(status == 'checkRegister' || status == 'payment')"
            :outlined="status == 'checkRegister' || status == 'payment'"
            dense
            lazy-rules
            autogrow
            :readonly="!(status == 'checkRegister' || status == 'payment')"
            :borderless="!(status == 'checkRegister' || status == 'payment')"
            v-model="defaultOccupation.org"
            :rules="[(val:string) => !!val || `${'กรุณากรอก สังกัด'}`]"
            :label="`${'สังกัด'}`"
          />
        </div>
        <div class="col-4">
          <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) =>
                (val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
                'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง',
            ]"
            :label="`${'เบอร์โทรที่ทำงาน'}`"
          />
        </div>
      </div>
    </div>
  </q-form>
</template>