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

<!-- card บุคคลที่สามารถติดต่อได้ -->
<template>
	<HeaderTop
		v-model:edit="edit"
		header="บุคคลที่สามารถติดต่อได้"
		icon="mdi-account-circle"
		: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-xs-12 col-sm-3 col-md-2">
				<q-select
					:class="
						getClass(
							status == 'checkRegister' || status == 'payment'
						)
					"
					:readonly="
						!(status == 'checkRegister' || status == 'payment')
					"
					:borderless="
						!(status == 'checkRegister' || status == 'payment')
					"
					:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
					:outlined="status == 'checkRegister' || status == 'payment'"
					dense
					lazy-rules
					v-model="defaultContact.contactPrefixId"
					emit-value
					map-options
					option-label="name"
					:options="prefixOptions"
					option-value="id"
					: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
					:readonly="
						!(status == 'checkRegister' || status == 'payment')
					"
					:borderless="
						!(status == 'checkRegister' || status == 'payment')
					"
					v-model="defaultContact.contactFirstname"
					: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
					:readonly="
						!(status == 'checkRegister' || status == 'payment')
					"
					:borderless="
						!(status == 'checkRegister' || status == 'payment')
					"
					v-model="defaultContact.contactLastname"
					:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
					:label="`${'นามสกุล'}`"
				/>
			</div>
			<div class="col-xs-12 col-sm-3 col-md-4">
				<q-input
					:class="
						getClass(
							status == 'checkRegister' || status == 'payment'
						)
					"
					:outlined="status == 'checkRegister' || status == 'payment'"
					dense
					lazy-rules
					:readonly="
						!(status == 'checkRegister' || status == 'payment')
					"
					:borderless="
						!(status == 'checkRegister' || status == 'payment')
					"
					v-model="defaultContact.contactRelations"
					:rules="[(val) => !!val || `${'กรุณากรอกความสัมพันธ์'}`]"
					:label="`${'เกี่ยวข้องเป็น'}`"
				/>
			</div>
			<div class="col-xs-12 col-sm-3 col-md-4">
				<q-input
					:outlined="status == 'checkRegister' || status == 'payment'"
					dense
					:counter="
						status == 'checkRegister' || status == 'payment'
							? true
							: false
					"
					lazy-rules
					type="tel"
					mask="##########"
					maxlength="10"
					:class="
						getClass(
							status == 'checkRegister' || status == 'payment'
						)
					"
					:readonly="
						!(status == 'checkRegister' || status == 'payment')
					"
					:borderless="
						!(status == 'checkRegister' || status == 'payment')
					"
					v-model="defaultContact.contactTel"
					:label="`${'โทรศัพท์'}`"
					:rules="[
						(val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
						(val) =>
							(val.length >= 9 &&
								val.length <= 10 &&
								val.startsWith('0')) ||
							'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง',
					]"
				/>
			</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 {
	Contact,
	DataOption,
} from "@/modules/03_recruiting/interface/index/Main";
import {
	defaultContact,
	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,
	},
	prefixOptions: {
		type: Array as PropType<DataOption[]>,
		required: true,
	},
});
const emit = defineEmits(["update:form"]);

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

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

watch(defaultContact, async (count: Contact, prevCount: Contact) => {
	await changeData("contact", count);
});

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

const fetchData = async () => {
	showLoader();
	await http
		.get(config.API.candidateContact(candidateId.value))
		.then((res) => {
			const data = res.data.result;
			if (data != null) {
				defaultContact.value.contactPrefixId = data.contactPrefixId;
				defaultContact.value.contactFirstname = data.contactFirstname;
				defaultContact.value.contactLastname = data.contactLastname;
				defaultContact.value.contactRelations = data.contactRelations;
				defaultContact.value.contactTel = data.contactTel;
			}
		})
		.catch((e) => {
			//   messageError($q, e)
		})
		.finally(() => {
			hideLoader();
		});
};

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