clone code
This commit is contained in:
Kittapath
parent
c9597d1e38
commit
d57bcd1719
362 changed files with 104804 additions and 0 deletions
340
src/modules/03_recruiting/components/Occupation.vue
Normal file
340
src/modules/03_recruiting/components/Occupation.vue
Normal file
|
|
@ -0,0 +1,340 @@
|
|||
<!-- 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 { useDataStore } from "@/stores/data";
|
||||
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 dataStore = useDataStore();
|
||||
const { loaderPage } = dataStore;
|
||||
const mixin = useCounterMixin();
|
||||
const { messageError } = 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 () => {
|
||||
loaderPage(true);
|
||||
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(() => {
|
||||
loaderPage(false);
|
||||
});
|
||||
};
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue