clone code
This commit is contained in:
Kittapath
parent
c9597d1e38
commit
d57bcd1719
362 changed files with 104804 additions and 0 deletions
363
src/modules/03_recruiting/components/Family.vue
Normal file
363
src/modules/03_recruiting/components/Family.vue
Normal file
|
|
@ -0,0 +1,363 @@
|
|||
<!-- card ข้อมูลครอบครัว -->
|
||||
<template>
|
||||
<HeaderTop
|
||||
v-model:edit="edit"
|
||||
header="ข้อมูลครอบครัว"
|
||||
icon="mdi-account-group"
|
||||
:addData="true"
|
||||
:editOnly="false"
|
||||
:editData="false"
|
||||
/>
|
||||
<q-form ref="myform" class="col-12">
|
||||
<div class="row col-12 items-center q-col-gutter-xs">
|
||||
<div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
|
||||
<label class="text-weight-bold">• คู่สมรส</label>
|
||||
<q-radio
|
||||
v-model="defaultFamily.same"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="1"
|
||||
label="มี"
|
||||
dense
|
||||
:disable="!(status == 'checkRegister' || status == 'payment')"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="defaultFamily.same"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="0"
|
||||
label="ไม่มี"
|
||||
dense
|
||||
:disable="!(status == 'checkRegister' || status == 'payment')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-2 col-md-2" v-if="defaultFamily.same == '1'">
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
: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="defaultFamily.prefixIdC"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="prefixOptions"
|
||||
option-value="id"
|
||||
:label="`${'คำนำหน้า'}`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-3 col-md-3" v-if="defaultFamily.same == '1'">
|
||||
<q-input
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
hide-bottom-space
|
||||
:outlined="status == 'checkRegister' || status == 'payment'"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!(status == 'checkRegister' || status == 'payment')"
|
||||
:borderless="!(status == 'checkRegister' || status == 'payment')"
|
||||
v-model="defaultFamily.firstnameC"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
||||
:label="`${'ชื่อ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3" v-if="defaultFamily.same == '1'">
|
||||
<q-input
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
hide-bottom-space
|
||||
:outlined="status == 'checkRegister' || status == 'payment'"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!(status == 'checkRegister' || status == 'payment')"
|
||||
:borderless="!(status == 'checkRegister' || status == 'payment')"
|
||||
v-model="defaultFamily.lastnameC"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
||||
:label="`${'นามสกุล'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-2 col-md-2" v-if="defaultFamily.same == '1'">
|
||||
<q-input
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
hide-bottom-space
|
||||
:outlined="status == 'checkRegister' || status == 'payment'"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!(status == 'checkRegister' || status == 'payment')"
|
||||
:borderless="!(status == 'checkRegister' || status == 'payment')"
|
||||
v-model="defaultFamily.occupationC"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
|
||||
:label="`${'อาชีพ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-2 col-md-2" v-if="defaultFamily.same == '1'">
|
||||
<q-input
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
hide-bottom-space
|
||||
:outlined="status == 'checkRegister' || status == 'payment'"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!(status == 'checkRegister' || status == 'payment')"
|
||||
:borderless="!(status == 'checkRegister' || status == 'payment')"
|
||||
v-model="defaultFamily.nationalityC"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
|
||||
:label="`${'สัญชาติ'}`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 text-weight-bold">• บิดา</div>
|
||||
<div class="col-xs-12 col-sm-2 col-md-2">
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
: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="defaultFamily.prefixIdM"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="prefixOptions"
|
||||
option-value="id"
|
||||
:label="`${'คำนำหน้า'}`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
hide-bottom-space
|
||||
:outlined="status == 'checkRegister' || status == 'payment'"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!(status == 'checkRegister' || status == 'payment')"
|
||||
:borderless="!(status == 'checkRegister' || status == 'payment')"
|
||||
v-model="defaultFamily.firstnameM"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
||||
:label="`${'ชื่อ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
hide-bottom-space
|
||||
:outlined="status == 'checkRegister' || status == 'payment'"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!(status == 'checkRegister' || status == 'payment')"
|
||||
:borderless="!(status == 'checkRegister' || status == 'payment')"
|
||||
v-model="defaultFamily.lastnameM"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
||||
:label="`${'นามสกุล'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-2 col-md-2">
|
||||
<q-input
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
hide-bottom-space
|
||||
:outlined="status == 'checkRegister' || status == 'payment'"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!(status == 'checkRegister' || status == 'payment')"
|
||||
:borderless="!(status == 'checkRegister' || status == 'payment')"
|
||||
v-model="defaultFamily.occupationM"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
|
||||
:label="`${'อาชีพ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-2 col-md-2">
|
||||
<q-input
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
hide-bottom-space
|
||||
:outlined="status == 'checkRegister' || status == 'payment'"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!(status == 'checkRegister' || status == 'payment')"
|
||||
:borderless="!(status == 'checkRegister' || status == 'payment')"
|
||||
v-model="defaultFamily.nationalityM"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
|
||||
:label="`${'สัญชาติ'}`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 text-weight-bold">• มารดา</div>
|
||||
<div class="col-xs-12 col-sm-2 col-md-2">
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
: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="defaultFamily.prefixIdF"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="prefixOptions"
|
||||
option-value="id"
|
||||
:label="`${'คำนำหน้า'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
hide-bottom-space
|
||||
:outlined="status == 'checkRegister' || status == 'payment'"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!(status == 'checkRegister' || status == 'payment')"
|
||||
:borderless="!(status == 'checkRegister' || status == 'payment')"
|
||||
v-model="defaultFamily.firstnameF"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
||||
:label="`${'ชื่อ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
hide-bottom-space
|
||||
:outlined="status == 'checkRegister' || status == 'payment'"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!(status == 'checkRegister' || status == 'payment')"
|
||||
:borderless="!(status == 'checkRegister' || status == 'payment')"
|
||||
v-model="defaultFamily.lastnameF"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
||||
:label="`${'นามสกุล'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-2 col-md-2">
|
||||
<q-input
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
hide-bottom-space
|
||||
:outlined="status == 'checkRegister' || status == 'payment'"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!(status == 'checkRegister' || status == 'payment')"
|
||||
:borderless="!(status == 'checkRegister' || status == 'payment')"
|
||||
v-model="defaultFamily.occupationF"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
|
||||
:label="`${'อาชีพ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-2 col-md-2">
|
||||
<q-input
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
hide-bottom-space
|
||||
:outlined="status == 'checkRegister' || status == 'payment'"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!(status == 'checkRegister' || status == 'payment')"
|
||||
:borderless="!(status == 'checkRegister' || status == 'payment')"
|
||||
v-model="defaultFamily.nationalityF"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
|
||||
:label="`${'สัญชาติ'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import type { PropType } from "vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import type {
|
||||
Family,
|
||||
DataOption,
|
||||
} from "@/modules/03_recruiting/interface/index/Main";
|
||||
import {
|
||||
defaultFamily,
|
||||
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 { useDataStore } from "@/stores/data";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
const props = defineProps({
|
||||
prefixOptions: {
|
||||
type: Array as PropType<DataOption[]>,
|
||||
required: true,
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
form: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const $q = useQuasar();
|
||||
const dataStore = useDataStore();
|
||||
const { loaderPage } = dataStore;
|
||||
const mixin = useCounterMixin();
|
||||
const { messageError } = mixin;
|
||||
const edit = ref<boolean>(true);
|
||||
const myform = ref<any>({});
|
||||
const route = useRoute();
|
||||
const candidateId = ref<string>(route.params.candidateId.toString());
|
||||
|
||||
const emit = defineEmits(["update:form"]);
|
||||
|
||||
watch(myform, async (count: any, prevCount: any) => {
|
||||
emit("update:form", count);
|
||||
});
|
||||
|
||||
watch(defaultFamily, async (count: Family, prevCount: Family) => {
|
||||
await changeData("family", count);
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchData();
|
||||
});
|
||||
|
||||
const fetchData = async () => {
|
||||
loaderPage(true);
|
||||
await http
|
||||
.get(config.API.candidateFamily(candidateId.value))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
defaultFamily.value.prefixIdC = data.marryPrefixId;
|
||||
defaultFamily.value.firstnameC = data.marryFirstName;
|
||||
defaultFamily.value.lastnameC = data.marryLastName;
|
||||
defaultFamily.value.occupationC = data.marryOccupation;
|
||||
defaultFamily.value.nationalityC = data.marryNationality;
|
||||
defaultFamily.value.prefixIdM = data.fatherPrefixId;
|
||||
defaultFamily.value.firstnameM = data.fatherFirstName;
|
||||
defaultFamily.value.lastnameM = data.fatherLastName;
|
||||
defaultFamily.value.occupationM = data.fatherOccupation;
|
||||
defaultFamily.value.nationalityM = data.fatherNationality;
|
||||
defaultFamily.value.prefixIdF = data.motherPrefixId;
|
||||
defaultFamily.value.firstnameF = data.motherFirstName;
|
||||
defaultFamily.value.lastnameF = data.motherLastName;
|
||||
defaultFamily.value.occupationF = data.motherOccupation;
|
||||
defaultFamily.value.nationalityF = data.motherNationality;
|
||||
defaultFamily.value.same =
|
||||
data.marry == true ? "1" : data.marry == false ? "0" : 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