เช็คเบอร์โทร

This commit is contained in:
Suphonchai Phoonsawat 2023-10-15 16:46:06 +07:00
parent 457164331d
commit 2f6ac4318c
3 changed files with 951 additions and 730 deletions

View file

@ -1,109 +1,154 @@
<!-- 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.length == 10 || `${'กรุณากรอก โทรศัพท์'}`,
(val) =>
/^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`,
]"
/>
</div>
</div>
</q-form>
<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) ||
'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง',
]"
/>
</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,
Contact,
DataOption,
} from "@/modules/03_recruiting/interface/index/Main";
import {
defaultContact,
changeData,
defaultContact,
changeData,
} from "@/modules/03_recruiting/interface/index/Main";
import HeaderTop from "@/modules/03_recruiting/components/top.vue";
import { useRoute } from "vue-router";
@ -112,18 +157,18 @@ 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,
},
status: {
type: String,
required: true,
},
form: {
type: Object,
required: true,
},
prefixOptions: {
type: Array as PropType<DataOption[]>,
required: true,
},
});
const emit = defineEmits(["update:form"]);
@ -136,43 +181,43 @@ const route = useRoute();
const candidateId = ref<string>(route.params.candidateId.toString());
watch(myform, async (count: any, prevCount: any) => {
emit("update:form", count);
emit("update:form", count);
});
watch(defaultContact, async (count: Contact, prevCount: Contact) => {
await changeData("contact", count);
await changeData("contact", count);
});
onMounted(async () => {
await fetchData();
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();
});
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,
};
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>

File diff suppressed because it is too large Load diff

View file

@ -1,139 +1,210 @@
<!-- 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">
<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) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`]"
:label="`${'ชื่อตำแหน่ง'}`"
/>
</div>
<div class="col-4">
<q-input
:class="getClass(status == 'checkRegister' || status == 'payment')"
:outlined="status == 'checkRegister' || status == 'payment'"
dense
lazy-rules
type="number"
autogrow
:readonly="!(status == 'checkRegister' || status == 'payment')"
:borderless="!(status == 'checkRegister' || status == 'payment')"
v-model="defaultOccupation.salary"
:rules="[(val) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
:label="`${'เงินเดือน'}`"
/>
</div>
<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) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`,
]"
:label="`${'ชื่อตำแหน่ง'}`"
/>
</div>
<div class="col-4">
<q-input
:class="
getClass(
status == 'checkRegister' || status == 'payment'
)
"
:outlined="
status == 'checkRegister' || status == 'payment'
"
dense
lazy-rules
type="number"
autogrow
:readonly="
!(status == 'checkRegister' || status == 'payment')
"
:borderless="
!(status == 'checkRegister' || status == 'payment')
"
v-model="defaultOccupation.salary"
:rules="[(val) => !!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) => !!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) => !!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) => !!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 == 10 || `${'กรุณากรอก เบอร์โทรที่ทำงาน'}`,
(val) =>
/^[0-9]*$/.test(val) || 'กรุณากรอก เบอร์โทรที่ทำงานให้ถูกต้อง',
]"
:label="`${'เบอร์โทรที่ทำงาน'}`"
/>
</div>
</div>
</div>
</q-form>
<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) => !!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) => !!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) => !!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) ||
'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง',
]"
:label="`${'เบอร์โทรที่ทำงาน'}`"
/>
</div>
</div>
</div>
</q-form>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
@ -141,8 +212,8 @@ import http from "@/plugins/http";
import config from "@/app.config";
import type { Occupation } from "@/modules/03_recruiting/interface/index/Main";
import {
defaultOccupation,
changeData,
defaultOccupation,
changeData,
} from "@/modules/03_recruiting/interface/index/Main";
import HeaderTop from "@/modules/03_recruiting/components/top.vue";
import { useRoute } from "vue-router";
@ -151,14 +222,14 @@ import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
const props = defineProps({
status: {
type: String,
required: true,
},
form: {
type: Object,
required: true,
},
status: {
type: String,
required: true,
},
form: {
type: Object,
required: true,
},
});
const $q = useQuasar();
@ -173,43 +244,43 @@ const { messageError, showLoader, hideLoader } = mixin;
const emit = defineEmits(["update:form"]);
watch(myform, async (count: any, prevCount: any) => {
emit("update:form", count);
emit("update:form", count);
});
watch(defaultOccupation, async (count: Occupation, prevCount: Occupation) => {
await changeData("occupation", count);
await changeData("occupation", count);
});
onMounted(async () => {
await fetchData();
await fetchData();
});
const fetchData = async () => {
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();
});
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();
});
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>