Refactoring code module 03_recruiting
This commit is contained in:
STW_TTTY\stwtt
parent
b223c2433e
commit
87e2e3b080
36 changed files with 6139 additions and 6335 deletions
|
|
@ -1,4 +1,185 @@
|
|||
<!-- card ข้อมูลส่วนตัว -->
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import type { PropType } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRoute } from "vue-router";
|
||||
import { tokenParsed } from "@/plugins/auth";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import type {
|
||||
Information,
|
||||
DataOption,
|
||||
} from "@/modules/03_recruiting/interface/index/Main";
|
||||
|
||||
import {
|
||||
defaultInformation,
|
||||
changeData,
|
||||
} from "@/modules/03_recruiting/interface/index/Main";
|
||||
import HeaderTop from "@/modules/03_recruiting/components/top.vue";
|
||||
|
||||
const props = defineProps({
|
||||
prefixOptions: {
|
||||
type: Array as PropType<DataOption[]>,
|
||||
required: true,
|
||||
},
|
||||
religionOptions: {
|
||||
type: Array as PropType<DataOption[]>,
|
||||
required: true,
|
||||
},
|
||||
provinceOptions: {
|
||||
type: Array as PropType<DataOption[]>,
|
||||
required: true,
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
form: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, calAge, success } = mixin;
|
||||
|
||||
const districtOptions = ref<DataOption[]>([]);
|
||||
const candidateId = ref<string>(route.params.candidateId.toString());
|
||||
const edit = ref<boolean>(true);
|
||||
const myform = ref<any>({});
|
||||
const img = ref<string>("");
|
||||
const opNat = ref(["ไทย"]);
|
||||
const fileProfile = ref<File[]>([]);
|
||||
|
||||
const { messageError, showLoader, hideLoader } = mixin;
|
||||
|
||||
const emit = defineEmits(["update:form"]);
|
||||
|
||||
/** ดึงข้อมูล */
|
||||
async function fetchData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.candidateInformation(candidateId.value))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
defaultInformation.value.prefixId = data.prefixId;
|
||||
defaultInformation.value.lastname = data.lastName;
|
||||
defaultInformation.value.provinceId = data.citizenProvinceId;
|
||||
defaultInformation.value.districtId = data.citizenDistrictId;
|
||||
defaultInformation.value.birthDate =
|
||||
data.dateOfBirth == null ? null : new Date(data.dateOfBirth);
|
||||
defaultInformation.value.cardIdDate =
|
||||
data.citizenDate == null ? null : new Date(data.citizenDate);
|
||||
defaultInformation.value.cardid = data.citizenId;
|
||||
defaultInformation.value.firstname = data.firstName;
|
||||
defaultInformation.value.religionId = data.religionId;
|
||||
defaultInformation.value.nationality = data.nationality;
|
||||
defaultInformation.value.email = data.email;
|
||||
defaultInformation.value.phone = data.mobilePhone;
|
||||
defaultInformation.value.tel = data.telephone;
|
||||
defaultInformation.value.knowledge = data.knowledge;
|
||||
})
|
||||
.catch(async () => {
|
||||
const user = await tokenParsed();
|
||||
defaultInformation.value.email = user ? user.email : "";
|
||||
defaultInformation.value.firstname = user ? user.given_name : "";
|
||||
defaultInformation.value.lastname = user ? user.family_name : "";
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** ดึงข้อมูล รูปภาพ */
|
||||
async function fetchImgData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.candidateProfile(candidateId.value))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
img.value = data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
/** อัพโหลด รูปภาพ */
|
||||
async function uploadImage(e: any) {
|
||||
let input = e.target.files;
|
||||
if (input.length > 0) {
|
||||
const formData = new FormData();
|
||||
formData.append("", input[0]);
|
||||
await http
|
||||
.put(config.API.candidateProfile(candidateId.value), formData)
|
||||
.then((res) => {
|
||||
success($q, "อัปโหลดรูปสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await fetchImgData();
|
||||
fileProfile.value = [];
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ดึงข้อมูลเขต
|
||||
* @param id อำเภอ
|
||||
*/
|
||||
async function fetchDistrict(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.listDistrict(id))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
let option: DataOption[] = [];
|
||||
data.map((r: DataOption) => {
|
||||
option.push({ id: r.id.toString(), name: r.name.toString() });
|
||||
});
|
||||
districtOptions.value = option;
|
||||
})
|
||||
.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) => {
|
||||
emit("update:form", count);
|
||||
});
|
||||
|
||||
watch(defaultInformation, async (count: Information) => {
|
||||
await changeData("information", count);
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchData();
|
||||
await fetchImgData();
|
||||
if (defaultInformation.value.provinceId != null)
|
||||
await fetchDistrict(defaultInformation.value.provinceId);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<HeaderTop
|
||||
v-model:edit="edit"
|
||||
|
|
@ -136,7 +317,6 @@
|
|||
week-start="0"
|
||||
:max-date="new Date()"
|
||||
:disabled="!(status == 'checkRegister' || status == 'payment')"
|
||||
@update:modelValue="selectBirthDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
|
|
@ -222,120 +402,6 @@
|
|||
:label="`${'เบอร์โทร'}`"
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="col-xs-12 col-sm-3 col-md-3">
|
||||
<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="defaultInformation.provinceId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="provinceOptions"
|
||||
option-value="id"
|
||||
:label="`${'ออกให้ ณ จังหวัด'}`"
|
||||
@update:model-value="(value) => selectProvince(value)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-3">
|
||||
<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="defaultInformation.districtId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="districtOptions"
|
||||
option-value="id"
|
||||
:label="`${'ออกให้ ณ อำเภอ'}`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-3 col-md-3">
|
||||
<datepicker
|
||||
v-model="defaultInformation.cardIdDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:max-date="new Date()"
|
||||
:disabled="!(status == 'checkRegister' || status == 'payment')"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<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')"
|
||||
:model-value="
|
||||
defaultInformation.cardIdDate == null
|
||||
? null
|
||||
: date2Thai(defaultInformation.cardIdDate)
|
||||
"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี ที่ออกบัตร'}`,
|
||||
]"
|
||||
:label="`${'วัน/เดือน/ปี ที่ออกบัตร'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-calendar-outline"
|
||||
class="cursor-pointer"
|
||||
:style="
|
||||
status == 'checkRegister' || status == 'payment'
|
||||
? 'color: var(--q-primary)'
|
||||
: 'color: var(--q-grey)'
|
||||
"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div> -->
|
||||
<!-- <div class="col-xs-12 col-sm-3 col-md-3">
|
||||
<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="defaultInformation.phone"
|
||||
:rules="[
|
||||
(val) => val.length == 10 || `${'กรุณากรอก โทรศัพท์มือถือ'}`,
|
||||
(val) =>
|
||||
/^[0-9]*$/.test(val) ||
|
||||
`${'กรุณากรอกข้อมูลโทรศัพท์มือถือให้ถูกต้อง'}`,
|
||||
]"
|
||||
:label="`${'โทรศัพท์มือถือ'}`"
|
||||
/>
|
||||
</div> -->
|
||||
<div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
|
||||
<q-input
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
|
|
@ -382,220 +448,9 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col-xs-12 col-sm-9 col-md-12">
|
||||
<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="defaultInformation.knowledge"
|
||||
label="ความรู้ความสามารถพิเศษ"
|
||||
type="textarea"
|
||||
/>
|
||||
</div> -->
|
||||
</q-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import type { PropType } from "vue";
|
||||
import type {
|
||||
Information,
|
||||
DataOption,
|
||||
} from "@/modules/03_recruiting/interface/index/Main";
|
||||
import {
|
||||
defaultInformation,
|
||||
changeData,
|
||||
} from "@/modules/03_recruiting/interface/index/Main";
|
||||
import HeaderTop from "@/modules/03_recruiting/components/top.vue";
|
||||
import { tokenParsed } from "@/plugins/auth";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
const props = defineProps({
|
||||
prefixOptions: {
|
||||
type: Array as PropType<DataOption[]>,
|
||||
required: true,
|
||||
},
|
||||
religionOptions: {
|
||||
type: Array as PropType<DataOption[]>,
|
||||
required: true,
|
||||
},
|
||||
provinceOptions: {
|
||||
type: Array as PropType<DataOption[]>,
|
||||
required: true,
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
form: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, calAge, modalError, success, notifyError, calAgeYear } =
|
||||
mixin;
|
||||
const districtOptions = ref<DataOption[]>([]);
|
||||
const route = useRoute();
|
||||
const candidateId = ref<string>(route.params.candidateId.toString());
|
||||
const edit = ref<boolean>(true);
|
||||
const myform = ref<any>({});
|
||||
const img = ref<string>("");
|
||||
const opNat = ref(["ไทย"]);
|
||||
const fileProfile = ref<File[]>([]);
|
||||
const registerEndDate = ref<Date>(new Date());
|
||||
|
||||
const { messageError, showLoader, hideLoader } = mixin;
|
||||
|
||||
const emit = defineEmits(["update:form"]);
|
||||
|
||||
watch(myform, async (count: any, prevCount: any) => {
|
||||
emit("update:form", count);
|
||||
});
|
||||
|
||||
watch(
|
||||
defaultInformation,
|
||||
async (count: Information, prevCount: Information) => {
|
||||
await changeData("information", count);
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchData();
|
||||
await fetchImgData();
|
||||
if (defaultInformation.value.provinceId != null)
|
||||
await fetchDistrict(defaultInformation.value.provinceId);
|
||||
});
|
||||
|
||||
const fetchData = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.candidateInformation(candidateId.value))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
defaultInformation.value.prefixId = data.prefixId;
|
||||
defaultInformation.value.lastname = data.lastName;
|
||||
defaultInformation.value.provinceId = data.citizenProvinceId;
|
||||
defaultInformation.value.districtId = data.citizenDistrictId;
|
||||
defaultInformation.value.birthDate =
|
||||
data.dateOfBirth == null ? null : new Date(data.dateOfBirth);
|
||||
defaultInformation.value.cardIdDate =
|
||||
data.citizenDate == null ? null : new Date(data.citizenDate);
|
||||
defaultInformation.value.cardid = data.citizenId;
|
||||
defaultInformation.value.firstname = data.firstName;
|
||||
defaultInformation.value.religionId = data.religionId;
|
||||
defaultInformation.value.nationality = data.nationality;
|
||||
defaultInformation.value.email = data.email;
|
||||
defaultInformation.value.phone = data.mobilePhone;
|
||||
defaultInformation.value.tel = data.telephone;
|
||||
defaultInformation.value.knowledge = data.knowledge;
|
||||
})
|
||||
.catch(async () => {
|
||||
const user = await tokenParsed();
|
||||
defaultInformation.value.email = user ? user.email : "";
|
||||
defaultInformation.value.firstname = user ? user.given_name : "";
|
||||
defaultInformation.value.lastname = user ? user.family_name : "";
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const fetchImgData = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.candidateProfile(candidateId.value))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
img.value = data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const uploadImage = async (e: any) => {
|
||||
let input = e.target.files;
|
||||
if (input.length > 0) {
|
||||
const formData = new FormData();
|
||||
formData.append("", input[0]);
|
||||
await http
|
||||
.put(config.API.candidateProfile(candidateId.value), formData)
|
||||
.then((res) => {
|
||||
success($q, "อัปโหลดรูปสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await fetchImgData();
|
||||
fileProfile.value = [];
|
||||
});
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const selectProvince = (val: string) => {
|
||||
defaultInformation.value.districtId = "";
|
||||
myform.value.resetValidation();
|
||||
fetchDistrict(val);
|
||||
};
|
||||
|
||||
const fetchDistrict = async (id: string) => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.listDistrict(id))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
let option: DataOption[] = [];
|
||||
data.map((r: DataOption) => {
|
||||
option.push({ id: r.id.toString(), name: r.name.toString() });
|
||||
});
|
||||
districtOptions.value = option;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
const selectBirthDate = async () => {
|
||||
// if (defaultInformation.value.birthDate != null) {
|
||||
// if (
|
||||
// calAgeYear(defaultInformation.value.birthDate, registerEndDate.value) < 18
|
||||
// ) {
|
||||
// defaultInformation.value.birthDate = null;
|
||||
// notifyError($q, "อายุไม่ถึง18");
|
||||
// } else if (
|
||||
// calAgeYear(defaultInformation.value.birthDate, registerEndDate.value) > 60
|
||||
// ) {
|
||||
// defaultInformation.value.birthDate = null;
|
||||
// notifyError($q, "อายุเกิน60");
|
||||
// }
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.containerimage {
|
||||
position: relative;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue