hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ปรับ ui สรรหาสอบคัดเลือก

Browse source
This commit is contained in:
Kittapath 2023-10-02 00:21:32 +07:00
parent 9b910afc6e
commit 178a6ac8c7
10 changed files with 752 additions and 1184 deletions
Download patch file Download diff file Expand all files Collapse all files

324
src/modules/03_recruiting/components/Career.vue
View file

@ -1,4 +1,4 @@
<!-- tab ประวัติการทำงาน/ฝึกงาน --> <!-- tab ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน) -->
<template> <template>
<q-form ref="myForm"> <q-form ref="myForm">
<Table <Table
@ -13,7 +13,7 @@
:edit="clickEdit" :edit="clickEdit"
:addData="false" :addData="false"
:editData="status == 'checkRegister' || status == 'payment'" :editData="status == 'checkRegister' || status == 'payment'"
name="ประวัติการทำงาน/ฝึกงาน" name="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
icon="mdi-briefcase" icon="mdi-briefcase"
> >
<template #columns="props"> <template #columns="props">
@ -25,13 +25,10 @@
@click="selectData(props)" @click="selectData(props)"
class="cursor-pointer" class="cursor-pointer"
> >
<div v-if="col.name == 'salary'" class=""> <div v-if="col.name == 'startDate' || col.name == 'endDate'">
{{ col.value.toLocaleString("en-US") }} {{ date2Thai(col.value) }}
</div> </div>
<div v-else-if="col.name == 'duration'" class=""> <div v-else>
{{ dateThaiRange(col.value) }}
</div>
<div v-else class="">
{{ col.value }} {{ col.value }}
</div> </div>
</q-td> </q-td>
@ -57,27 +54,15 @@
<q-dialog v-model="modal" persistent> <q-dialog v-model="modal" persistent>
<q-card style="width: 600px"> <q-card style="width: 600px">
<q-form ref="myForm"> <q-form ref="myForm">
<DialogHeader tittle="ประวัติการทำงาน/ฝึกงาน" :close="checkClose" /> <DialogHeader
tittle="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
:close="checkClose"
/>
<q-separator /> <q-separator />
<q-card-section class="q-p-sm"> <q-card-section class="q-p-sm">
<div <div
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs" class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
> >
<div class="col-xs-12 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="location"
:rules="[(val) => !!val || `${'กรุณากรอกสถานที่ทำงาน/ฝึกงาน'}`]"
:label="`${'สถานที่ทำงาน/ฝึกงาน'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
/>
</div>
<div class="col-xs-12 col-sm-6 col-md-6"> <div class="col-xs-12 col-sm-6 col-md-6">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -101,24 +86,51 @@
lazy-rules lazy-rules
:readonly="!edit" :readonly="!edit"
:borderless="!edit" :borderless="!edit"
v-model="salary" v-model="group"
:rules="[ :rules="[(val) => !!val || `${'กรุณากรอกกลุ่ม/ฝ่าย'}`]"
(val) => !!val || `${'กรุณากรอกเงินเดือนสุดท้ายก่อนออก'}`, :label="`${'กลุ่ม/ฝ่าย'}`"
]" @update:modelValue="clickEditRow"
:label="`${'เงินเดือนสุดท้ายก่อนออก'}`" hide-bottom-space
/>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="pile"
:rules="[(val) => !!val || `${'กรุณากรอกกอง'}`]"
:label="`${'กอง'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
/>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="org"
:rules="[(val) => !!val || `${'กรุณากรอกสังกัด'}`]"
:label="`${'ตำแหน่ง/ลักษณะงาน'}`"
@update:modelValue="clickEditRow" @update:modelValue="clickEditRow"
type="number"
hide-bottom-space hide-bottom-space
/> />
</div> </div>
<div class="col-xs-12 col-sm-6 col-md-6"> <div class="col-xs-12 col-sm-6 col-md-6">
<datepicker <datepicker
:readonly="!edit" :readonly="!edit"
v-model="duration" v-model="startDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
range
:enableTimePicker="false" :enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0" week-start="0"
> >
<template #year="{ year }"> <template #year="{ year }">
@ -130,19 +142,68 @@
<template #trigger> <template #trigger>
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
class="datepicker"
:outlined="edit" :outlined="edit"
dense dense
lazy-rules lazy-rules
:borderless="!edit" :borderless="!edit"
:model-value="dateThaiRange(duration)" :model-value="date2Thai(startDate)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่ม'}`]"
hide-bottom-space hide-bottom-space
:label="`${'วันที่เริ่ม'}`"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="mdi-calendar-outline" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" :style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<datepicker
:readonly="!edit"
v-model="endDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(endDate)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
hide-bottom-space
:label="`${'วันที่สิ้นสุด'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
> >
</q-icon> </q-icon>
</template> </template>
@ -152,17 +213,15 @@
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-12"> <div class="col-xs-12 col-sm-12 col-md-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(false)"
:outlined="edit" :outlined="false"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!false"
:borderless="!edit" :borderless="!false"
v-model="reason" v-model="rangeDate"
:rules="[(val) => !!val || `${'กรุณากรอกเหตุผลที่ออก'}`]" :label="`${'ระยะเวลา'}`"
:label="`${'เหตุผลที่ออก'}`"
@update:modelValue="clickEditRow" @update:modelValue="clickEditRow"
type="textarea"
hide-bottom-space hide-bottom-space
/> />
</div> </div>
@ -212,15 +271,17 @@ const props = defineProps({
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { dateThaiRange, modalDelete, modalConfirm, dateToISO, success } = mixin; const { date2Thai, modalDelete, modalConfirm, dateToISO, success } = mixin;
const store = useExamDataStore(); const store = useExamDataStore();
const { examData, changeExamColumns } = store; const { examData, changeExamColumns } = store;
const id = ref<string>(""); const id = ref<string>("");
const location = ref<string>(); const position = ref<string | null>();
const position = ref<string>(); const group = ref<string | null>();
const salary = ref<number | null>(); const pile = ref<string | null>();
const duration = ref<[Date, Date]>([new Date(), new Date()]); const org = ref<string | null>();
const reason = ref<string>(); const startDate = ref<Date>(new Date());
const endDate = ref<Date>(new Date());
const rangeDate = ref<string | null>();
const myForm = ref<any>(); //form data input const myForm = ref<any>(); //form data input
const edit = ref<boolean>(true); //เช็คการกดปุ่มแก้ไขใน dialog const edit = ref<boolean>(true); //เช็คการกดปุ่มแก้ไขใน dialog
const modal = ref<boolean>(false); //modal add detail const modal = ref<boolean>(false); //modal add detail
@ -228,13 +289,12 @@ const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้ส
const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่ const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
const route = useRoute(); const route = useRoute();
const candidateId = ref<string>(route.params.candidateId.toString()); const candidateId = ref<string>(route.params.candidateId.toString());
const rows = ref<RequestItemsObject[]>([]); const rows = ref<any>([]);
const filter = ref<string>(""); //search data table const filter = ref<string>(""); //search data table
const { messageError, showLoader, hideLoader } = mixin; const { messageError, showLoader, hideLoader } = mixin;
@ -242,30 +302,21 @@ const visibleColumns = ref<String[]>([]);
examData.career.columns.length == 0 examData.career.columns.length == 0
? (visibleColumns.value = [ ? (visibleColumns.value = [
"location",
"position", "position",
"salary", "group",
"duration", "pile",
"reason", "org",
"startDate",
"endDate",
"rangeDate",
]) ])
: (visibleColumns.value = examData.career.columns); : (visibleColumns.value = examData.career.columns);
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{
name: "location",
align: "left",
label: "สถานที่ทำงาน/ฝึกงาน",
sortable: true,
field: "location",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{ {
name: "position", name: "position",
align: "left", align: "left",
label: "ตำแหน่ง/ลักษณะงาน", label: "ชื่อตำแหน่ง",
sortable: true, sortable: true,
field: "position", field: "position",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
@ -274,33 +325,66 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "salary", name: "group",
align: "left", align: "left",
label: "เงินเดือนสุดท้ายก่อนออก", label: "กลุ่ม/ฝ่าย",
sortable: true, sortable: true,
field: "salary", field: "group",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) => sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "duration", name: "pile",
align: "left",
label: "กอง",
sortable: true,
field: "pile",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "org",
align: "left",
label: "สังกัด",
sortable: true,
field: "org",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "startDate",
align: "left",
label: "เริ่ม",
sortable: true,
field: "startDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "endDate",
align: "left",
label: "สิ้นสุด",
sortable: true,
field: "endDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "rangeDate",
align: "left", align: "left",
label: "ระยะเวลา", label: "ระยะเวลา",
sortable: true, sortable: true,
field: "duration", field: "rangeDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "reason",
align: "left",
label: "เหตุผลที่ออก",
sortable: true,
field: "reason",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px", style: "font-size: 14px",
sort: (a: string, b: string) => sort: (a: string, b: string) =>
@ -323,11 +407,11 @@ const fetchData = async () => {
.then((res) => { .then((res) => {
const data = res.data.result; const data = res.data.result;
rows.value = []; rows.value = [];
data.map((r: ResponseObject) => { data.map((r: any) => {
rows.value.push({ rows.value.push({
...r, ...r,
location: r.name, startDate: r.durationStart,
duration: [r.durationStart, r.durationEnd], endDate: r.durationEnd,
}); });
}); });
}) })
@ -345,11 +429,13 @@ const fetchData = async () => {
const clickPrevious = async () => { const clickPrevious = async () => {
rowIndex.value -= 1; rowIndex.value -= 1;
const row = rows.value[rowIndex.value]; const row = rows.value[rowIndex.value];
location.value = row.location;
position.value = row.position; position.value = row.position;
salary.value = row.salary; group.value = row.group;
duration.value = row.duration; pile.value = row.pile;
reason.value = row.reason; org.value = row.org;
startDate.value = row.startDate;
endDate.value = row.endDate;
rangeDate.value = row.rangeDate;
id.value = row.id; id.value = row.id;
await checkRowPage(); await checkRowPage();
}; };
@ -360,11 +446,13 @@ const clickPrevious = async () => {
const clickNext = () => { const clickNext = () => {
rowIndex.value += 1; rowIndex.value += 1;
const row = rows.value[rowIndex.value]; const row = rows.value[rowIndex.value];
location.value = row.location;
position.value = row.position; position.value = row.position;
salary.value = row.salary; group.value = row.group;
duration.value = row.duration; pile.value = row.pile;
reason.value = row.reason; org.value = row.org;
startDate.value = row.startDate;
endDate.value = row.endDate;
rangeDate.value = row.rangeDate;
id.value = row.id; id.value = row.id;
checkRowPage(); checkRowPage();
}; };
@ -453,12 +541,13 @@ const saveData = async () => {
showLoader(); showLoader();
await http await http
.post(config.API.candidateAdminCareer(candidateId.value), { .post(config.API.candidateAdminCareer(candidateId.value), {
name: location.value,
position: position.value, position: position.value,
salary: salary.value, group: group.value,
durationStart: dateToISO(new Date(duration.value[0])), pile: pile.value,
durationEnd: dateToISO(new Date(duration.value[1])), org: org.value,
reason: reason.value, durationStart: dateToISO(new Date(startDate.value)),
durationEnd: dateToISO(new Date(endDate.value)),
rangeDate: rangeDate.value,
}) })
.then(() => { .then(() => {
success($q, "บันทึกข้อมูลสำเร็จ"); success($q, "บันทึกข้อมูลสำเร็จ");
@ -479,12 +568,13 @@ const editData = async () => {
showLoader(); showLoader();
await http await http
.put(config.API.candidateAdminCareer(id.value), { .put(config.API.candidateAdminCareer(id.value), {
name: location.value,
position: position.value, position: position.value,
salary: salary.value, group: group.value,
durationStart: dateToISO(new Date(duration.value[0])), pile: pile.value,
durationEnd: dateToISO(new Date(duration.value[1])), org: org.value,
reason: reason.value, durationStart: dateToISO(new Date(startDate.value)),
durationEnd: dateToISO(new Date(endDate.value)),
rangeDate: rangeDate.value,
}) })
.then(() => { .then(() => {
success($q, "บันทึกข้อมูลสำเร็จ"); success($q, "บันทึกข้อมูลสำเร็จ");
@ -526,17 +616,19 @@ const clickClose = async () => {
* กดเลือกข้อมูลที่จะแก้ไข * กดเลือกข้อมูลที่จะแก้ไข
* @param props ค่า props ใน row ที่เลือก * @param props ค่า props ใน row ที่เลือก
*/ */
const selectData = (props: DataProps) => { const selectData = (props: any) => {
modalEdit.value = true; modalEdit.value = true;
modal.value = true; modal.value = true;
editRow.value = false; editRow.value = false;
rawItem.value = props.row; rawItem.value = props.row;
rowIndex.value = props.rowIndex; rowIndex.value = props.rowIndex;
location.value = props.row.location;
position.value = props.row.position; position.value = props.row.position;
salary.value = props.row.salary; group.value = props.row.group;
duration.value = props.row.duration; pile.value = props.row.pile;
reason.value = props.row.reason; org.value = props.row.org;
startDate.value = props.row.startDate;
endDate.value = props.row.endDate;
rangeDate.value = props.row.rangeDate;
id.value = props.row.id; id.value = props.row.id;
next.value = false; next.value = false;
previous.value = false; previous.value = false;
@ -548,11 +640,13 @@ const selectData = (props: DataProps) => {
const addRow = () => { const addRow = () => {
modalEdit.value = false; modalEdit.value = false;
modal.value = true; modal.value = true;
location.value = ""; position.value = null;
position.value = ""; group.value = null;
salary.value = null; pile.value = null;
duration.value = [new Date(), new Date()]; org.value = null;
reason.value = ""; startDate.value = new Date();
endDate.value = new Date();
rangeDate.value = null;
}; };
/** /**

6
src/modules/03_recruiting/components/Document.vue
View file

@ -4,8 +4,8 @@
v-model:edit="edit" v-model:edit="edit"
:header=" :header="
$q.screen.gt.xs $q.screen.gt.xs
? 'อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)' ? 'Upload รูปถ่าย (รูปถ่ายหน้าตรง ชุดสุภาพ ไม่สวมหมวก/แว่นตาดำ และไม่มีลวดลายใด ๆ บนรูปถ่าย)'
: 'อัปโหลดเอกสาร' : 'Upload'
" "
icon="mdi-file-document" icon="mdi-file-document"
:addData="true" :addData="true"
@ -242,6 +242,4 @@ const uploadData = async () => {
const downloadData = async (path: string) => { const downloadData = async (path: string) => {
window.open(path); window.open(path);
}; };
</script> </script>

771
src/modules/03_recruiting/components/Education.vue
View file

@ -1,325 +1,246 @@
<!-- tab ประวัติการศึกษา --> <!-- card วุฒิที่ใช้สมัครสอบ -->
<template> <template>
<q-form ref="myForm"> <HeaderTop
<Table v-model:edit="edit"
:rows="rows" header="วุฒิที่ใช้สมัครสอบ"
:columns="columns" icon="mdi-briefcase"
:filter="filter" :addData="true"
:visible-columns="visibleColumns" :editOnly="false"
v-model:inputfilter="filter" :editData="false"
v-model:inputvisible="visibleColumns" />
v-model:editvisible="edit" <q-form ref="myform">
:add="clickAdd" <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
:edit="clickEdit" <div class="col-12 row">
:addData="false" <div class="col-3">
:editData="status == 'checkRegister' || status == 'payment'" <q-select
name="ประวัติการศีกษา" :class="getClass(status == 'checkRegister' || status == 'payment')"
icon="mdi-school" :readonly="!(status == 'checkRegister' || status == 'payment')"
> :borderless="!(status == 'checkRegister' || status == 'payment')"
<template #columns="props"> :outlined="status == 'checkRegister' || status == 'payment'"
<q-tr :props="props"> dense
<q-td lazy-rules
v-for="col in props.cols" emit-value
:key="col.name" map-options
:props="props" option-label="name"
@click="selectData(props)" option-value="id"
class="cursor-pointer" :options="educationLevelOptions"
v-model="defaultEducation.educationLevelExamId"
:rules="[(val) => !!val || `${'กรุณาเลือก วุฒิที่ใช้สมัครสอบ'}`]"
:label="`${'วุฒิที่ใช้สมัครสอบ'}`"
/>
</div>
<div class="col-3">
<q-input
class="q-pl-sm"
: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="defaultEducation.educationName"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อปริญญา'}`]"
:label="`${'ชื่อปริญญา'}`"
/>
</div>
<div class="col-3">
<q-input
class="q-pl-sm"
: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="defaultEducation.educationMajor"
:rules="[(val) => !!val || `${'กรุณากรอก สาขาวิชา/วิชาเอก'}`]"
:label="`${'สาขาวิชา/วิชาเอก'}`"
/>
</div>
</div>
<div class="col-12 row">
<div class="col-3">
<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="defaultEducation.educationLocation"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อสถานศึกษา'}`]"
:label="`${'ชื่อสถานศึกษา'}`"
/>
</div>
<div class="col-3">
<q-select
class="q-pl-sm"
:class="getClass(status == 'checkRegister' || status == 'payment')"
:readonly="!(status == 'checkRegister' || status == 'payment')"
:borderless="!(status == 'checkRegister' || status == 'payment')"
:outlined="status == 'checkRegister' || status == 'payment'"
dense
lazy-rules
emit-value
map-options
option-label="name"
option-value="id"
:options="educationTypeOptions"
v-model="defaultEducation.educationType"
:rules="[(val) => !!val || `${'กรุณาเลือก ประเภทสถานศึกษา'}`]"
:label="`${'ประเภทสถานศึกษา'}`"
/>
</div>
<div class="col-3">
<datepicker
:readonly="!(status == 'checkRegister' || status == 'payment')"
v-model="defaultEducation.educationEndDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
> >
<div v-if="col.name == 'duration'" class=""> <template #year="{ year }">
{{ dateThaiRange(col.value) }} {{ year + 543 }}
</div> </template>
<div v-else class=""> <template #year-overlay-value="{ value }">
{{ col.value }} {{ parseInt(value + 543) }}
</div> </template>
</q-td> <template #trigger>
<q-td
auto-width
v-if="status == 'checkRegister' || status == 'payment'"
>
<q-btn
color="red"
flat
dense
round
size="14px"
icon="mdi-trash-can-outline"
@click="checkDelete(props.row)"
/>
</q-td>
</q-tr>
</template>
</Table>
</q-form>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="ประวัติการศึกษา" :close="checkClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-select
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="educationLevelId"
:rules="[(val) => !!val || `${'กรุณาเลือกวุฒิที่ได้รับ'}`]"
:label="`${'วุฒิที่ได้รับ'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="educationLevelOptions"
option-value="id"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input <q-input
class="q-pl-sm"
:class="getClass(edit)" :class="getClass(edit)"
:outlined="edit" :outlined="edit"
dense dense
lazy-rules lazy-rules
:readonly="!edit"
:borderless="!edit" :borderless="!edit"
v-model="major" :model-value="date2Thai(defaultEducation.educationEndDate)"
:rules="[(val) => !!val || `${'กรุณากรอกสาขาวิชา/วิชาเอก'}`]"
:label="`${'สาขาวิชา/วิชาเอก'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
type="number"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="scores"
:rules="[ :rules="[
(val) => !!val || `${'กรุณากรอกคะแนนเฉลี่ยตลอดหลักสูตร'}`, (val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`,
]" ]"
:label="`${'คะแนนเฉลี่ยตลอดหลักสูตร'}`"
@update:modelValue="clickEditRow"
hide-bottom-space hide-bottom-space
/> :label="`${'วันที่สำเร็จการศึกษา'}`"
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="name"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
:label="`${'ชื่อสถานศึกษา'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
:readonly="!edit"
v-model="duration"
:locale="'th'"
autoApply
range
:enableTimePicker="false"
week-start="0"
> >
<template #year="{ year }"> <template v-slot:prepend>
{{ year + 543 }} <q-icon
</template> name="event"
<template #year-overlay-value="{ value }"> class="cursor-pointer"
{{ parseInt(value + 543) }} :style="
</template> edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
<template #trigger> "
<q-input
:class="getClass(edit)"
class="datepicker"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="dateThaiRange(duration)"
hide-bottom-space
> >
<template v-slot:prepend> </q-icon>
<q-icon
name="mdi-calendar-outline"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template> </template>
</datepicker> </q-input>
</div> </template>
</div> </datepicker>
</q-card-section> </div>
<q-separator /> <div class="col-3">
<DialogFooter <q-input
:edit="clickEdit" class="q-pl-sm"
:save="clickSave" :class="getClass(status == 'checkRegister' || status == 'payment')"
:validate="validateData" :outlined="status == 'checkRegister' || status == 'payment'"
:clickNext="clickNext" dense
:clickPrevious="clickPrevious" lazy-rules
:editData="status == 'checkRegister' || status == 'payment'" type="number"
v-model:editvisible="edit" :readonly="!(status == 'checkRegister' || status == 'payment')"
v-model:next="next" :borderless="!(status == 'checkRegister' || status == 'payment')"
v-model:previous="previous" v-model="defaultEducation.educationScores"
v-model:modalEdit="modalEdit" :rules="[(val) => !!val || `${'กรุณากรอก คะแนนเฉลี่ยสะสม'}`]"
/> :label="`${'คะแนนเฉลี่ยสะสม'}`"
</q-form> />
</q-card> </div>
</q-dialog> </div>
<div class="col-12 row">
<div class="col-3">
<q-select
:class="getClass(status == 'checkRegister' || status == 'payment')"
:readonly="!(status == 'checkRegister' || status == 'payment')"
:borderless="!(status == 'checkRegister' || status == 'payment')"
:outlined="status == 'checkRegister' || status == 'payment'"
dense
lazy-rules
emit-value
map-options
option-label="name"
option-value="id"
:options="educationLevelOptions"
v-model="defaultEducation.educationLevelHighId"
:rules="[(val) => !!val || `${'กรุณาเลือก วุฒิการศึกษาสูงสุด'}`]"
:label="`${'วุฒิการศึกษาสูงสุด'}`"
/>
</div>
</div>
</div>
</q-form>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { QTableProps } from "quasar"; import { ref, onMounted, watch, PropType } from "vue";
import { onMounted, ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useExamDataStore } from "@/modules/03_recruiting/store";
import type { import type {
RequestItemsObject, DataOption,
DataProps, Education,
} from "@/modules/03_recruiting/interface/request/Education"; } from "@/modules/03_recruiting/interface/index/Main";
import type { DataOption } from "@/modules/03_recruiting/interface/index/Main"; import {
import type { ResponseObject } from "@/modules/03_recruiting/interface/response/Education"; defaultEducation,
import Table from "@/modules/03_recruiting/components/TableCan.vue"; changeData,
import DialogHeader from "@/modules/03_recruiting/components/DialogHeader.vue"; } from "@/modules/03_recruiting/interface/index/Main";
import DialogFooter from "@/modules/03_recruiting/components/DialogFooter.vue"; import HeaderTop from "@/modules/03_recruiting/components/top.vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
const props = defineProps({ const props = defineProps({
status: { status: {
type: String, type: String,
required: true, required: true,
}, },
form: {
type: Object,
required: true,
},
educationLevelOptions: {
type: Array as PropType<DataOption[]>,
required: true,
},
}); });
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง const edit = ref<boolean>(true);
const { dateThaiRange, modalDelete, modalConfirm, dateToISO, success } = mixin; const myform = ref<any>({});
const store = useExamDataStore();
const { examData, changeExamColumns } = store;
const id = ref<string>("");
const educationLevel = ref<string>();
const educationLevelId = ref<string>();
const educationLevelOptions = ref<DataOption[]>([]);
const major = ref<string>();
const scores = ref<number | null>();
const name = ref<string>();
const duration = ref<[Date, Date]>([new Date(), new Date()]);
const myForm = ref<any>(); //form data input
const edit = ref<boolean>(true); //เช็คการกดปุ่มแก้ไขใน dialog
const modal = ref<boolean>(false); //modal add detail
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
const rows = ref<RequestItemsObject[]>([]);
const route = useRoute(); const route = useRoute();
const { messageError, showLoader, hideLoader } = mixin;
const candidateId = ref<string>(route.params.candidateId.toString()); const candidateId = ref<string>(route.params.candidateId.toString());
const filter = ref<string>(""); //search data table const educationTypeOptions = ref<any>([
const visibleColumns = ref<String[]>([]);
examData.education.columns.length == 0
? (visibleColumns.value = [
"educationLevel",
"major",
"scores",
"name",
"duration",
])
: (visibleColumns.value = examData.education.columns);
const columns = ref<QTableProps["columns"]>([
{ {
name: "educationLevel", name: "รัฐบาล",
align: "left", id: "รัฐบาล",
label: "วุฒิที่ได้รับ",
sortable: true,
field: "educationLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
{ {
name: "major", name: "เอกชน",
align: "left", id: "เอกชน",
label: "สาขาวิชา/วิชาเอก",
sortable: true,
field: "major",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "scores",
align: "left",
label: "คะแนนเฉลี่ยตลอดหลักสูตร",
sortable: true,
field: "scores",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "name",
align: "left",
label: "ชื่อสถานศึกษา",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "duration",
align: "left",
label: "ระยะเวลา",
sortable: true,
field: "duration",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
}, },
]); ]);
watch(visibleColumns, async (count: String[], prevCount: String[]) => { const mixin = useCounterMixin();
await changeExamColumns("education", count); const { messageError, showLoader, hideLoader, date2Thai } = mixin;
const emit = defineEmits(["update:form"]);
watch(myform, async (count: any, prevCount: any) => {
emit("update:form", count);
});
watch(defaultEducation, async (count: Education, prevCount: Education) => {
await changeData("education", count);
}); });
onMounted(async () => { onMounted(async () => {
await fetchData(); await fetchData();
await fetcheducationLevel();
}); });
const fetchData = async () => { const fetchData = async () => {
@ -328,286 +249,25 @@ const fetchData = async () => {
.get(config.API.candidateEducation(candidateId.value)) .get(config.API.candidateEducation(candidateId.value))
.then((res) => { .then((res) => {
const data = res.data.result; const data = res.data.result;
rows.value = []; if (data != null) {
data.map((r: ResponseObject) => { defaultEducation.value.educationLevelExamId = data.educationLevelExamId;
rows.value.push({ defaultEducation.value.educationName = data.educationName;
...r, defaultEducation.value.educationMajor = data.educationMajor;
educationLevelId: r.educationLevelId, defaultEducation.value.educationLocation = data.educationLocation;
educationLevel: r.educationLevelName, defaultEducation.value.educationType = data.educationType;
duration: [r.durationStart, r.durationEnd], defaultEducation.value.educationEndDate = data.educationEndDate;
}); defaultEducation.value.educationScores = data.educationScores;
}); defaultEducation.value.educationLevelHighId = data.educationLevelHighId;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const fetcheducationLevel = async () => {
showLoader();
await http
.get(config.API.educationLevel)
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: DataOption) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
educationLevelOptions.value = option;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
/**
* กดดูข้อมูลก่อนหน้า
*/
const clickPrevious = () => {
rowIndex.value -= 1;
const row = rows.value[rowIndex.value];
educationLevel.value = row.educationLevel;
educationLevelId.value = row.educationLevelId;
major.value = row.major;
scores.value = row.scores;
name.value = row.name;
duration.value = row.duration;
id.value = row.id;
checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const clickNext = () => {
rowIndex.value += 1;
const row = rows.value[rowIndex.value];
educationLevel.value = row.educationLevel;
educationLevelId.value = row.educationLevelId;
major.value = row.major;
scores.value = row.scores;
name.value = row.name;
duration.value = row.duration;
id.value = row.id;
checkRowPage();
};
/**
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
*/
const checkRowPage = () => {
editRow.value = false;
next.value = true;
previous.value = true;
if (rowIndex.value + 1 >= rows.value.length) {
next.value = false;
}
if (rowIndex.value - 1 < 0) {
previous.value = false;
}
};
/**
* กดปุ่มแก้ไขใน dialog
*/
const clickEdit = () => {
next.value = false;
previous.value = false;
};
/**
* กดปุ่มเพิ่มด้านบน table
*/
const clickAdd = () => {
addRow();
};
const checkDelete = (row: RequestItemsObject) => {
rawItem.value = row;
modalDelete(
$q,
"ยืนยันการลบข้อมูล",
"หากต้องการลบกดให้กดตกลง",
clickDeleteRow
);
};
/**
* ลบข้อมูลใน table
*/
const clickDeleteRow = async () => {
if (rawItem.value != null) {
showLoader();
await http
.delete(config.API.candidateAdminEducation(rawItem.value.id))
.then(() => {
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
} else {
await fetchData();
}
};
/**
* กดบันทึกใน dialog
*/
const clickSave = async () => {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
if (modalEdit.value) {
await editData();
} else {
await saveData();
} }
}
});
};
/**
* บันทึกเพิ่มข้อมูล
*/
const saveData = async () => {
showLoader();
await http
.post(config.API.candidateAdminEducation(candidateId.value), {
educationLevelId: educationLevelId.value,
major: major.value,
scores: scores.value,
name: name.value,
durationStart: dateToISO(new Date(duration.value[0])),
durationEnd: dateToISO(new Date(duration.value[1])),
})
.then(() => {
success($q, "บันทึกข้อมูลสำเร็จ");
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
}) })
.finally(async () => { .finally(() => {
modal.value = false; hideLoader();
await fetchData();
}); });
}; };
/**
* บันทึกแก้ไขข้อมูล
*/
const editData = async () => {
showLoader();
await http
.put(config.API.candidateAdminEducation(id.value), {
educationLevelId: educationLevelId.value,
major: major.value,
scores: scores.value,
name: name.value,
durationStart: dateToISO(new Date(duration.value[0])),
durationEnd: dateToISO(new Date(duration.value[1])),
})
.then(() => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
modal.value = false;
await fetchData();
});
};
const checkClose = async () => {
if (editRow.value == true) {
modalConfirm(
$q,
"ข้อมูลมีการแก้ไข",
"ยืนยันการดำเนินต่อใช่หรือไม่",
clickClose
);
} else {
await clickClose();
}
await fetchData();
};
/**
* กดปิด dialog
*/
const clickClose = async () => {
modal.value = false;
editRow.value = false;
next.value = false;
previous.value = false;
};
/**
* กดเลือกข้อมูลที่จะแก้ไข
* @param props ค่า props ใน row ที่เลือก
*/
const selectData = (props: DataProps) => {
modalEdit.value = true;
modal.value = true;
editRow.value = false;
rawItem.value = props.row;
rowIndex.value = props.rowIndex;
educationLevel.value = props.row.educationLevel;
educationLevelId.value = props.row.educationLevelId;
major.value = props.row.major;
scores.value = props.row.scores;
name.value = props.row.name;
duration.value = props.row.duration;
id.value = props.row.id;
next.value = false;
previous.value = false;
};
/**
* กดปุ่มเพิ่มบน table
*/
const addRow = () => {
modalEdit.value = false;
modal.value = true;
educationLevel.value = "";
educationLevelId.value = "";
major.value = "";
scores.value = null;
name.value = "";
duration.value = [new Date(), new Date()];
};
/**
* เช็คว่ามีการแก้ไขข้อมูล
*/
const clickEditRow = () => {
editRow.value = true;
};
/**
* validate input ใน dialog
*/
const validateData = async () => {
checkValidate.value = true;
await myForm.value.validate().then((result: boolean) => {
if (result == false) {
checkValidate.value = false;
}
});
};
/**
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
*/
const getClass = (val: boolean) => { const getClass = (val: boolean) => {
return { return {
"full-width inputgreen cursor-pointer": val, "full-width inputgreen cursor-pointer": val,
@ -615,8 +275,3 @@ const getClass = (val: boolean) => {
}; };
}; };
</script> </script>
<style lang="scss">
.modalfix {
position: fixed !important;
}
</style>

80
src/modules/03_recruiting/components/Information.vue
View file

@ -16,7 +16,7 @@
<div <div
class="row col-xs-12 col-sm-12 col-md-10 items-center q-col-gutter-x-sm q-col-gutter-y-xs" class="row col-xs-12 col-sm-12 col-md-10 items-center q-col-gutter-x-sm q-col-gutter-y-xs"
> >
<div class="col-xs-12 col-sm-2 col-md-2"> <div class="col-xs-12 col-sm-3 col-md-3">
<q-select <q-select
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="getClass(status == 'checkRegister' || status == 'payment')"
:readonly="!(status == 'checkRegister' || status == 'payment')" :readonly="!(status == 'checkRegister' || status == 'payment')"
@ -34,7 +34,7 @@
:label="`${'คำนำหน้าชื่อ'}`" :label="`${'คำนำหน้าชื่อ'}`"
/> />
</div> </div>
<div class="col-xs-12 col-sm-5 col-md-5"> <div class="col-xs-12 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="getClass(status == 'checkRegister' || status == 'payment')"
:outlined="status == 'checkRegister' || status == 'payment'" :outlined="status == 'checkRegister' || status == 'payment'"
@ -47,7 +47,7 @@
:label="`${'ชื่อ'}`" :label="`${'ชื่อ'}`"
/> />
</div> </div>
<div class="col-xs-12 col-sm-5 col-md-5"> <div class="col-xs-12 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="getClass(status == 'checkRegister' || status == 'payment')"
:outlined="status == 'checkRegister' || status == 'payment'" :outlined="status == 'checkRegister' || status == 'payment'"
@ -73,6 +73,24 @@
:label="`${'สัญชาติ'}`" :label="`${'สัญชาติ'}`"
/> />
</div> </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.religionId"
emit-value
map-options
option-label="name"
:options="religionOptions"
option-value="id"
:label="`${'ศาสนา'}`"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<datepicker <datepicker
v-model="defaultInformation.birthDate" v-model="defaultInformation.birthDate"
@ -145,21 +163,26 @@
/> />
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<q-select <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')" :class="getClass(status == 'checkRegister' || status == 'payment')"
:readonly="!(status == 'checkRegister' || status == 'payment')" :readonly="!(status == 'checkRegister' || status == 'payment')"
:borderless="!(status == 'checkRegister' || status == 'payment')" :borderless="!(status == 'checkRegister' || status == 'payment')"
:rules="[(val) => !!val || `${'กรุณาเลือก ศาสนา'}`]" v-model="defaultInformation.tel"
:outlined="status == 'checkRegister' || status == 'payment'" :rules="[
dense (val) => val.length == 10 || `${'กรุณากรอก เบอร์โทร'}`,
lazy-rules (val) =>
v-model="defaultInformation.religionId" /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลเบอร์โทรให้ถูกต้อง'}`,
emit-value ]"
map-options :label="`${'เบอร์โทร'}`"
option-label="name"
:options="religionOptions"
option-value="id"
:label="`${'ศาสนา'}`"
/> />
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
@ -276,30 +299,7 @@
</template> </template>
</datepicker> </datepicker>
</div> --> </div> -->
<div class="col-xs-12 col-sm-3 col-md-3"> <!-- <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.tel"
:rules="[
(val) => val.length == 10 || `${'กรุณากรอก โทรศัพท์'}`,
(val) =>
/^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`,
]"
:label="`${'โทรศัพท์'}`"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<q-input <q-input
:outlined="status == 'checkRegister' || status == 'payment'" :outlined="status == 'checkRegister' || status == 'payment'"
dense dense
@ -322,7 +322,7 @@
]" ]"
:label="`${'โทรศัพท์มือถือ'}`" :label="`${'โทรศัพท์มือถือ'}`"
/> />
</div> </div> -->
<div class="col-xs-12 col-sm-3 col-md-3 q-pb-md"> <div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
<q-input <q-input
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="getClass(status == 'checkRegister' || status == 'payment')"

374
src/modules/03_recruiting/components/Occupation.vue
View file

@ -1,8 +1,8 @@
<!-- card หน่วยงานผู้รับผิดชอบดำเนินการ --> <!-- card ตำแหน่งปัจจุบัน -->
<template> <template>
<HeaderTop <HeaderTop
v-model:edit="edit" v-model:edit="edit"
header="หน่วยงานผู้รับผิดชอบดำเนินการ" header="ตำแหน่งปัจจุบัน"
icon="mdi-briefcase" icon="mdi-briefcase"
:addData="true" :addData="true"
:editOnly="false" :editOnly="false"
@ -10,241 +10,131 @@
/> />
<q-form ref="myform"> <q-form ref="myform">
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs"> <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"> <div class="col-12">
<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 <q-radio
v-model="defaultOccupation.status" v-model="defaultOccupation.positionType"
checked-icon="task_alt" label="ลูกจ้างประจำ"
unchecked-icon="panorama_fish_eye" color="teal"
val="studying" val="prem"
label="กำลังศึกษาต่อ"
dense
:disable="!(status == 'checkRegister' || status == 'payment')" :disable="!(status == 'checkRegister' || status == 'payment')"
size="md"
style="font-size: 14px; color: black"
/> />
<q-input <q-radio
:class="getClass(status == 'checkRegister' || status == 'payment')" v-model="defaultOccupation.positionType"
hide-bottom-space label="ลูกจ้างชั่วคราว"
dense color="teal"
lazy-rules val="temp"
type="textarea" :disable="!(status == 'checkRegister' || status == 'payment')"
autogrow />
:readonly="!(status == 'checkRegister' || status == 'payment')" <q-radio
:borderless="!(status == 'checkRegister' || status == 'payment')" v-model="defaultOccupation.positionType"
v-model="defaultOccupation.other" label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]" color="teal"
:disable=" val="other"
defaultOccupation.status !== 'other' || :disable="!(status == 'checkRegister' || status == 'payment')"
!(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>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-12 row">
<q-input <div class="col-3">
:class="getClass(status == 'checkRegister' || status == 'payment')" <q-input
:outlined="status == 'checkRegister' || status == 'payment'" :class="getClass(status == 'checkRegister' || status == 'payment')"
dense :outlined="status == 'checkRegister' || status == 'payment'"
lazy-rules dense
type="textarea" lazy-rules
autogrow autogrow
:readonly="!(status == 'checkRegister' || status == 'payment')" :readonly="!(status == 'checkRegister' || status == 'payment')"
:borderless="!(status == 'checkRegister' || status == 'payment')" :borderless="!(status == 'checkRegister' || status == 'payment')"
v-model="defaultOccupation.department" v-model="defaultOccupation.position"
:rules="[(val) => !!val || `${'กรุณากรอก กอง/ฝ่าย'}`]" :rules="[(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`]"
:label="`${'กอง/ฝ่าย'}`" :label="`${'ชื่อตำแหน่ง'}`"
/> />
</div>
<div class="col-3">
<q-input
class="q-pl-sm"
: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> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-12 row">
<q-input <div class="col-3">
:class="getClass(status == 'checkRegister' || status == 'payment')" <q-input
:outlined="status == 'checkRegister' || status == 'payment'" :class="getClass(status == 'checkRegister' || status == 'payment')"
dense :outlined="status == 'checkRegister' || status == 'payment'"
lazy-rules dense
type="textarea" lazy-rules
autogrow autogrow
:readonly="!(status == 'checkRegister' || status == 'payment')" :readonly="!(status == 'checkRegister' || status == 'payment')"
:borderless="!(status == 'checkRegister' || status == 'payment')" :borderless="!(status == 'checkRegister' || status == 'payment')"
v-model="defaultOccupation.email" v-model="defaultOccupation.group"
:rules="[ :rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
(val) => !!val || 'กรุณากรอก E-mail address', :label="`${'กลุ่ม/ฝ่าย'}`"
(val) => />
/^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/.test(val) || </div>
'E-mail address ไม่ถูกต้อง', <div class="col-3">
]" <q-input
:label="`${'E-mail address'}`" class="q-pl-sm"
/> :class="getClass(status == 'checkRegister' || status == 'payment')"
</div> :outlined="status == 'checkRegister' || status == 'payment'"
<div class="col-xs-12 col-sm-3 col-md-3"> dense
<q-input lazy-rules
:class="getClass(status == 'checkRegister' || status == 'payment')" autogrow
:outlined="status == 'checkRegister' || status == 'payment'" :readonly="!(status == 'checkRegister' || status == 'payment')"
dense :borderless="!(status == 'checkRegister' || status == 'payment')"
:counter=" v-model="defaultOccupation.pile"
status == 'checkRegister' || status == 'payment' ? true : false :rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]"
" :label="`${'กอง'}`"
maxlength="10" />
lazy-rules </div>
type="tel" <div class="col-3">
mask="##########" <q-input
autogrow class="q-pl-sm"
:readonly="!(status == 'checkRegister' || status == 'payment')" :class="getClass(status == 'checkRegister' || status == 'payment')"
:borderless="!(status == 'checkRegister' || status == 'payment')" :outlined="status == 'checkRegister' || status == 'payment'"
v-model="defaultOccupation.tel" dense
:rules="[ lazy-rules
(val) => !!val || `${'กรุณากรอก โทรศัพท์'}`, autogrow
(val) => /^[0-9]*$/.test(val) || 'กรุณากรอก โทรศัพท์ให้ถูกต้อง', :readonly="!(status == 'checkRegister' || status == 'payment')"
]" :borderless="!(status == 'checkRegister' || status == 'payment')"
:label="`${'โทรศัพท์'}`" v-model="defaultOccupation.org"
/> :rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]"
:label="`${'สังกัด'}`"
/>
</div>
<div class="col-3">
<q-input
class="q-pl-sm"
: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> </div>
</div> </div>
</q-form> </q-form>
@ -304,23 +194,13 @@ const fetchData = async () => {
.get(config.API.candidateOccupation(candidateId.value)) .get(config.API.candidateOccupation(candidateId.value))
.then((res) => { .then((res) => {
const data = res.data.result; const data = res.data.result;
defaultOccupation.value.status = data.occupationType; defaultOccupation.value.org = data.occupationOrg;
defaultOccupation.value.company = data.occupationCompany; defaultOccupation.value.pile = data.occupationPile;
defaultOccupation.value.department = data.occupationDepartment; defaultOccupation.value.group = data.occupationGroup;
defaultOccupation.value.email = data.occupationEmail; defaultOccupation.value.salary = data.occupationSalary;
defaultOccupation.value.position = data.occupationPosition;
defaultOccupation.value.positionType = data.occupationPositionType;
defaultOccupation.value.tel = data.occupationTelephone; 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) => { .catch((e) => {
messageError($q, e); messageError($q, e);

48
src/modules/03_recruiting/components/Profile.vue
View file

@ -30,12 +30,16 @@
<q-separator class="q-my-lg bg-gray" size="5px" /> <q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm"> <div class="q-px-sm">
<Occupation :status="status" v-model:form="formOccupation" /> <Education
:status="status"
v-model:form="formEducation"
:educationLevelOptions="educationLevelOptions"
/>
</div> </div>
<q-separator class="q-my-lg bg-gray" size="5px" /> <q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm"> <div class="q-px-sm">
<Education :status="status" /> <Occupation :status="status" v-model:form="formOccupation" />
</div> </div>
<q-separator class="q-my-lg bg-gray" size="5px" /> <q-separator class="q-my-lg bg-gray" size="5px" />
@ -77,10 +81,10 @@ const props = defineProps({
type: Object, type: Object,
required: true, required: true,
}, },
// formFamily: { formEducation: {
// type: Object, type: Object,
// required: true, required: true,
// }, },
formOccupation: { formOccupation: {
type: Object, type: Object,
required: true, required: true,
@ -92,9 +96,10 @@ const $q = useQuasar();
const prefixOptions = ref<DataOption[]>([]); const prefixOptions = ref<DataOption[]>([]);
const religionOptions = ref<DataOption[]>([]); const religionOptions = ref<DataOption[]>([]);
const provinceOptions = ref<DataOption[]>([]); const provinceOptions = ref<DataOption[]>([]);
const educationLevelOptions = ref<DataOption[]>([]);
const formInformation = ref<any>({}); const formInformation = ref<any>({});
const formAddress = ref<any>({}); const formAddress = ref<any>({});
// const formFamily = ref<any>({}); const formEducation = ref<any>({});
const formOccupation = ref<any>({}); const formOccupation = ref<any>({});
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin; const { messageError, showLoader, hideLoader } = mixin;
@ -102,7 +107,7 @@ const { messageError, showLoader, hideLoader } = mixin;
const emit = defineEmits([ const emit = defineEmits([
"update:formInformation", "update:formInformation",
"update:formAddress", "update:formAddress",
// "update:formFamily", "update:formEducation",
"update:formOccupation", "update:formOccupation",
]); ]);
@ -114,9 +119,9 @@ watch(formAddress, async (count: Object, prevCount: Object) => {
emit("update:formAddress", count); emit("update:formAddress", count);
}); });
// watch(formFamily, async (count: Object, prevCount: Object) => { watch(formEducation, async (count: Object, prevCount: Object) => {
// emit("update:formFamily", count); emit("update:formEducation", count);
// }); });
watch(formOccupation, async (count: Object, prevCount: Object) => { watch(formOccupation, async (count: Object, prevCount: Object) => {
emit("update:formOccupation", count); emit("update:formOccupation", count);
@ -127,6 +132,7 @@ onMounted(() => {
fetchPrefix(); fetchPrefix();
fetchReligion(); fetchReligion();
fetchProvince(); fetchProvince();
fetchEducationLevel();
}); });
const fetchPrefix = async () => { const fetchPrefix = async () => {
@ -188,4 +194,24 @@ const fetchProvince = async () => {
hideLoader(); hideLoader();
}); });
}; };
const fetchEducationLevel = async () => {
showLoader();
await http
.get(config.API.educationLevel)
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
educationLevelOptions.value = option;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
</script> </script>

149
src/modules/03_recruiting/interface/index/Main.ts
View file

@ -62,16 +62,24 @@ interface Family {
} }
interface Occupation { interface Occupation {
status: string | null; org: string | null;
company: string | null; pile: string | null;
department: string | null; group: string | null;
email: string | null; salary: string | null;
position: string | null;
positionType: string | null;
tel: string | null; tel: string | null;
official: string | null; }
personnel: string | null;
officialsOther: string | null; interface Education {
employee: string | null; educationLevelExamId: string | null;
other: string | null; educationName: string | null;
educationMajor: string | null;
educationLocation: string | null;
educationType: string | null;
educationEndDate: Date;
educationScores: number | null;
educationLevelHighId: string | null;
} }
interface Address { interface Address {
@ -148,99 +156,6 @@ interface ExamCard {
yearly: Date; yearly: Date;
} }
const defaultCard: ExamCard[] = [
{
id: "1",
title: "การสอบภาค ข. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว",
registerRound: 2,
announcementDate: new Date("2022-11-23"),
registerDateStart: new Date("2022-11-09"),
registerDateEnd: new Date("2022-11-10"),
yearly: new Date("2022-01-01"),
},
{
id: "2",
title: "การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว",
registerRound: 1,
announcementDate: new Date("2022-10-14"),
registerDateStart: new Date("2022-10-09"),
registerDateEnd: new Date("2022-11-30"),
yearly: new Date("2022-01-01"),
},
{
id: "2",
title: "การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว",
registerRound: 1,
announcementDate: new Date("2022-10-14"),
registerDateStart: new Date("2022-10-09"),
registerDateEnd: new Date("2022-11-30"),
yearly: new Date("2022-01-01"),
},
{
id: "2",
title: "การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว",
registerRound: 1,
announcementDate: new Date("2022-10-14"),
registerDateStart: new Date("2022-10-09"),
registerDateEnd: new Date("2022-11-30"),
yearly: new Date("2022-01-01"),
},
{
id: "2",
title: "การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว",
registerRound: 1,
announcementDate: new Date("2022-10-14"),
registerDateStart: new Date("2022-10-09"),
registerDateEnd: new Date("2022-11-30"),
yearly: new Date("2022-01-01"),
},
{
id: "2",
title: "การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว",
registerRound: 1,
announcementDate: new Date("2022-10-14"),
registerDateStart: new Date("2022-10-09"),
registerDateEnd: new Date("2022-11-30"),
yearly: new Date("2022-01-01"),
},
{
id: "2",
title: "การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว",
registerRound: 1,
announcementDate: new Date("2022-10-14"),
registerDateStart: new Date("2022-10-09"),
registerDateEnd: new Date("2022-11-30"),
yearly: new Date("2022-01-01"),
},
{
id: "2",
title: "การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว",
registerRound: 1,
announcementDate: new Date("2022-10-14"),
registerDateStart: new Date("2022-10-09"),
registerDateEnd: new Date("2022-11-30"),
yearly: new Date("2022-01-01"),
},
{
id: "2",
title: "การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว",
registerRound: 1,
announcementDate: new Date("2022-10-14"),
registerDateStart: new Date("2022-10-09"),
registerDateEnd: new Date("2022-11-30"),
yearly: new Date("2022-01-01"),
},
{
id: "2",
title: "การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว",
registerRound: 1,
announcementDate: new Date("2022-10-14"),
registerDateStart: new Date("2022-10-09"),
registerDateEnd: new Date("2022-11-30"),
yearly: new Date("2022-01-01"),
},
];
const defaultAddress = ref<Address>({ const defaultAddress = ref<Address>({
address: null, address: null,
provinceId: null, provinceId: null,
@ -303,16 +218,24 @@ const defaultFamily = ref<Family>({
}); });
const defaultOccupation = ref<Occupation>({ const defaultOccupation = ref<Occupation>({
status: null, org: null,
company: null, pile: null,
department: null, group: null,
email: null, salary: null,
position: null,
positionType: null,
tel: null, tel: null,
official: null, });
personnel: null,
officialsOther: null, const defaultEducation = ref<Education>({
employee: null, educationLevelExamId: null,
other: null, educationName: null,
educationMajor: null,
educationLocation: null,
educationType: null,
educationEndDate: new Date(),
educationScores: null,
educationLevelHighId: null,
}); });
const changeData = (system: String, val: any) => { const changeData = (system: String, val: any) => {
@ -320,6 +243,7 @@ const changeData = (system: String, val: any) => {
if (system == "address") defaultAddress.value = val; if (system == "address") defaultAddress.value = val;
if (system == "famliy") defaultFamily.value = val; if (system == "famliy") defaultFamily.value = val;
if (system == "occupation") defaultOccupation.value = val; if (system == "occupation") defaultOccupation.value = val;
if (system == "education") defaultEducation.value = val;
}; };
export { export {
@ -327,7 +251,7 @@ export {
defaultFamily, defaultFamily,
defaultAddress, defaultAddress,
defaultOccupation, defaultOccupation,
defaultCard, defaultEducation,
changeData, changeData,
}; };
export type { export type {
@ -340,6 +264,7 @@ export type {
Address, Address,
zipCodeOption, zipCodeOption,
Occupation, Occupation,
Education,
ExamCard, ExamCard,
UploadType, UploadType,
WebType, WebType,

170
src/modules/03_recruiting/views/02_qualify/ExamForm.vue
View file

@ -44,6 +44,7 @@
v-model:formInformation="formInformation" v-model:formInformation="formInformation"
v-model:formAddress="formAddress" v-model:formAddress="formAddress"
v-model:formOccupation="formOccupation" v-model:formOccupation="formOccupation"
v-model:formEducation="formEducation"
/> />
</div> </div>
<!-- v-model:formFamily="formFamily" --> <!-- v-model:formFamily="formFamily" -->
@ -131,7 +132,7 @@ import {
defaultInformation, defaultInformation,
defaultOccupation, defaultOccupation,
defaultAddress, defaultAddress,
defaultFamily, defaultEducation,
} from "@/modules/03_recruiting/interface/index/Main"; } from "@/modules/03_recruiting/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
@ -151,7 +152,7 @@ const approve = ref<string>("1");
const reason = ref<string>(""); const reason = ref<string>("");
const formInformation = ref<any>({}); const formInformation = ref<any>({});
const formAddress = ref<any>({}); const formAddress = ref<any>({});
// const formFamily = ref<any>({}); const formEducation = ref<any>({});
const formOccupation = ref<any>({}); const formOccupation = ref<any>({});
const status = ref<string>(""); const status = ref<string>("");
@ -233,101 +234,84 @@ const clickSave = async () => {
if (suc) { if (suc) {
await formAddress.value.validate().then(async (suc: boolean) => { await formAddress.value.validate().then(async (suc: boolean) => {
if (suc) { if (suc) {
// await formFamily.value.validate().then(async (suc: boolean) => { await formEducation.value.validate().then(async (suc: boolean) => {
// if (suc) {
await formOccupation.value.validate().then(async (suc: boolean) => {
if (suc) { if (suc) {
const type = ref<string | null>(""); await formOccupation.value
if (defaultOccupation.value.status == "official") .validate()
type.value = defaultOccupation.value.official; .then(async (suc: boolean) => {
if (defaultOccupation.value.status == "personnel") if (suc) {
type.value = defaultOccupation.value.personnel; showLoader();
if (defaultOccupation.value.status == "officialsOther") await http
type.value = defaultOccupation.value.officialsOther; .post(config.API.candidateId(candidateId.value), {
if (defaultOccupation.value.status == "employee") prefixId: defaultInformation.value.prefixId,
type.value = defaultOccupation.value.employee; lastName: defaultInformation.value.lastname,
if (defaultOccupation.value.status == "other") dateOfBirth:
type.value = defaultOccupation.value.other; defaultInformation.value.birthDate == null
showLoader(); ? null
await http : dateToISO(defaultInformation.value.birthDate),
.post(config.API.candidateId(candidateId.value), { citizenId: defaultInformation.value.cardid,
prefixId: defaultInformation.value.prefixId, firstName: defaultInformation.value.firstname,
lastName: defaultInformation.value.lastname, religionId: defaultInformation.value.religionId,
citizenProvinceId: defaultInformation.value.provinceId, nationality: defaultInformation.value.nationality,
citizenDistrictId: defaultInformation.value.districtId, email: defaultInformation.value.email,
dateOfBirth: mobilePhone: defaultInformation.value.phone,
defaultInformation.value.birthDate == null telephone: defaultInformation.value.tel,
? null knowledge: defaultInformation.value.knowledge,
: dateToISO(defaultInformation.value.birthDate), occupationOrg: defaultOccupation.value.org,
citizenDate: occupationPile: defaultOccupation.value.pile,
defaultInformation.value.cardIdDate == null occupationGroup: defaultOccupation.value.group,
? null occupationSalary: defaultOccupation.value.salary,
: dateToISO(defaultInformation.value.cardIdDate), occupationPosition: defaultOccupation.value.position,
citizenId: defaultInformation.value.cardid, occupationPositionType:
firstName: defaultInformation.value.firstname, defaultOccupation.value.positionType,
relationshipId: defaultInformation.value.relationshipId, occupationTelephone: defaultOccupation.value.tel,
nationality: defaultInformation.value.nationality, registAddress: defaultAddress.value.address,
email: defaultInformation.value.email, currentAddress: defaultAddress.value.addressC,
mobilePhone: defaultInformation.value.phone, registProvinceId: defaultAddress.value.provinceId,
telephone: defaultInformation.value.tel, currentProvinceId: defaultAddress.value.provinceIdC,
knowledge: defaultInformation.value.knowledge, registDistrictId: defaultAddress.value.districtId,
occupationType: defaultOccupation.value.status, currentDistrictId: defaultAddress.value.districtIdC,
occupationCompany: defaultOccupation.value.company, registSubDistrictId: defaultAddress.value.subdistrictId,
occupationDepartment: defaultOccupation.value.department, currentSubDistrictId:
occupationEmail: defaultOccupation.value.email, defaultAddress.value.subdistrictIdC,
occupationTelephone: defaultOccupation.value.tel, registZipCode: defaultAddress.value.code,
occupationPosition: type.value, currentZipCode: defaultAddress.value.codeC,
registAddress: defaultAddress.value.address, registSame:
currentAddress: defaultAddress.value.addressC, defaultAddress.value.same == "1"
registProvinceId: defaultAddress.value.provinceId, ? true
currentProvinceId: defaultAddress.value.provinceIdC, : defaultAddress.value.same == "0"
registDistrictId: defaultAddress.value.districtId, ? false
currentDistrictId: defaultAddress.value.districtIdC, : null,
registSubDistrictId: defaultAddress.value.subdistrictId, educationLevelExamId:
currentSubDistrictId: defaultAddress.value.subdistrictIdC, defaultEducation.value.educationLevelExamId,
registZipCode: defaultAddress.value.code, educationName: defaultEducation.value.educationName,
currentZipCode: defaultAddress.value.codeC, educationMajor: defaultEducation.value.educationMajor,
registSame: educationLocation:
defaultAddress.value.same == "1" defaultEducation.value.educationLocation,
? true educationType: defaultEducation.value.educationType,
: defaultAddress.value.same == "0" educationEndDate:
? false defaultEducation.value.educationEndDate == null
: null, ? null
marryPrefixId: defaultFamily.value.prefixIdC, : dateToISO(
marryFirstName: defaultFamily.value.firstnameC, defaultEducation.value.educationEndDate
marryLastName: defaultFamily.value.lastnameC, ),
marryOccupation: defaultFamily.value.occupationC, educationScores: defaultEducation.value.educationScores,
marryNationality: defaultFamily.value.nationalityC, educationLevelHighId:
fatherPrefixId: defaultFamily.value.prefixIdM, defaultEducation.value.educationLevelHighId,
fatherFirstName: defaultFamily.value.firstnameM, })
fatherLastName: defaultFamily.value.lastnameM, .then(async () => {
fatherOccupation: defaultFamily.value.occupationM, success($q, "บันทึกข้อมูลส่วนตัวสำเร็จ");
fatherNationality: defaultFamily.value.nationalityM, })
motherPrefixId: defaultFamily.value.prefixIdF, .catch((e) => {
motherFirstName: defaultFamily.value.firstnameF, messageError($q, e);
motherLastName: defaultFamily.value.lastnameF, })
motherOccupation: defaultFamily.value.occupationF, .finally(async () => {
motherNationality: defaultFamily.value.nationalityF, hideLoader();
marry: });
defaultFamily.value.same == "1" }
? true
: defaultFamily.value.same == "0"
? false
: null,
})
.then(async () => {
success($q, "บันทึกข้อมูลส่วนตัวสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
}); });
} }
}); });
// }
// });
} }
}); });
} }

2
src/modules/03_recruiting/views/02_qualify/Manage.vue
View file

@ -236,7 +236,7 @@ const viewDetail = (row: any) => {
*/ */
const dateThaiRange = (val: [Date, Date]) => { const dateThaiRange = (val: [Date, Date]) => {
if (val === null) { if (val === null) {
return ""; return "-";
} else if (date2Thai(val[0], true) === date2Thai(val[1], true)) { } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
return `${date2Thai(val[0], true)}`; return `${date2Thai(val[0], true)}`;
} else { } else {

12
src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
View file

File diff suppressed because one or more lines are too long