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

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

View file

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

View file

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

View file

@ -1,325 +1,246 @@
<!-- tab ประวการศกษา -->
<!-- card ใชสมครสอบ -->
<template>
<q-form ref="myForm">
<Table
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
v-model:editvisible="edit"
:add="clickAdd"
:edit="clickEdit"
:addData="false"
:editData="status == 'checkRegister' || status == 'payment'"
name="ประวัติการศีกษา"
icon="mdi-school"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
<HeaderTop
v-model:edit="edit"
header="วุฒิที่ใช้สมัครสอบ"
icon="mdi-briefcase"
:addData="true"
:editOnly="false"
:editData="false"
/>
<q-form ref="myform">
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
<div class="col-12 row">
<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.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="">
{{ dateThaiRange(col.value) }}
</div>
<div v-else class="">
{{ col.value }}
</div>
</q-td>
<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">
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
class="q-pl-sm"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="major"
: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"
:model-value="date2Thai(defaultEducation.educationEndDate)"
:rules="[
(val) => !!val || `${'กรุณากรอกคะแนนเฉลี่ยตลอดหลักสูตร'}`,
(val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`,
]"
:label="`${'คะแนนเฉลี่ยตลอดหลักสูตร'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
/>
</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"
:label="`${'วันที่สำเร็จการศึกษา'}`"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<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
name="event"
class="cursor-pointer"
:style="
edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
"
>
<template v-slot:prepend>
<q-icon
name="mdi-calendar-outline"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</q-icon>
</template>
</datepicker>
</div>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:edit="clickEdit"
:save="clickSave"
:validate="validateData"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:editData="status == 'checkRegister' || status == 'payment'"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
</q-input>
</template>
</datepicker>
</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"
:readonly="!(status == 'checkRegister' || status == 'payment')"
:borderless="!(status == 'checkRegister' || status == 'payment')"
v-model="defaultEducation.educationScores"
:rules="[(val) => !!val || `${'กรุณากรอก คะแนนเฉลี่ยสะสม'}`]"
:label="`${'คะแนนเฉลี่ยสะสม'}`"
/>
</div>
</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>
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { onMounted, ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { ref, onMounted, watch, PropType } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useExamDataStore } from "@/modules/03_recruiting/store";
import type {
RequestItemsObject,
DataProps,
} from "@/modules/03_recruiting/interface/request/Education";
import type { DataOption } from "@/modules/03_recruiting/interface/index/Main";
import type { ResponseObject } from "@/modules/03_recruiting/interface/response/Education";
import Table from "@/modules/03_recruiting/components/TableCan.vue";
import DialogHeader from "@/modules/03_recruiting/components/DialogHeader.vue";
import DialogFooter from "@/modules/03_recruiting/components/DialogFooter.vue";
DataOption,
Education,
} from "@/modules/03_recruiting/interface/index/Main";
import {
defaultEducation,
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 { useQuasar } from "quasar";
const props = defineProps({
status: {
type: String,
required: true,
},
form: {
type: Object,
required: true,
},
educationLevelOptions: {
type: Array as PropType<DataOption[]>,
required: true,
},
});
const $q = useQuasar();
const mixin = useCounterMixin(); //
const { dateThaiRange, modalDelete, modalConfirm, dateToISO, success } = mixin;
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 edit = ref<boolean>(true);
const myform = ref<any>({});
const route = useRoute();
const { messageError, showLoader, hideLoader } = mixin;
const candidateId = ref<string>(route.params.candidateId.toString());
const filter = ref<string>(""); //search data table
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"]>([
const educationTypeOptions = ref<any>([
{
name: "educationLevel",
align: "left",
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: "รัฐบาล",
id: "รัฐบาล",
},
{
name: "major",
align: "left",
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" }),
name: "เอกชน",
id: "เอกชน",
},
]);
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
await changeExamColumns("education", count);
const mixin = useCounterMixin();
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 () => {
await fetchData();
await fetcheducationLevel();
});
const fetchData = async () => {
@ -328,286 +249,25 @@ const fetchData = async () => {
.get(config.API.candidateEducation(candidateId.value))
.then((res) => {
const data = res.data.result;
rows.value = [];
data.map((r: ResponseObject) => {
rows.value.push({
...r,
educationLevelId: r.educationLevelId,
educationLevel: r.educationLevelName,
duration: [r.durationStart, r.durationEnd],
});
});
})
.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();
if (data != null) {
defaultEducation.value.educationLevelExamId = data.educationLevelExamId;
defaultEducation.value.educationName = data.educationName;
defaultEducation.value.educationMajor = data.educationMajor;
defaultEducation.value.educationLocation = data.educationLocation;
defaultEducation.value.educationType = data.educationType;
defaultEducation.value.educationEndDate = data.educationEndDate;
defaultEducation.value.educationScores = data.educationScores;
defaultEducation.value.educationLevelHighId = data.educationLevelHighId;
}
}
});
};
/**
* นทกเพมขอม
*/
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) => {
messageError($q, e);
})
.finally(async () => {
modal.value = false;
await fetchData();
.finally(() => {
hideLoader();
});
};
/**
* นทกแกไขขอม
*/
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) => {
return {
"full-width inputgreen cursor-pointer": val,
@ -615,8 +275,3 @@ const getClass = (val: boolean) => {
};
};
</script>
<style lang="scss">
.modalfix {
position: fixed !important;
}
</style>

View file

@ -16,7 +16,7 @@
<div
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
:class="getClass(status == 'checkRegister' || status == 'payment')"
:readonly="!(status == 'checkRegister' || status == 'payment')"
@ -34,7 +34,7 @@
:label="`${'คำนำหน้าชื่อ'}`"
/>
</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
:class="getClass(status == 'checkRegister' || status == 'payment')"
:outlined="status == 'checkRegister' || status == 'payment'"
@ -47,7 +47,7 @@
:label="`${'ชื่อ'}`"
/>
</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
:class="getClass(status == 'checkRegister' || status == 'payment')"
:outlined="status == 'checkRegister' || status == 'payment'"
@ -73,6 +73,24 @@
: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.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">
<datepicker
v-model="defaultInformation.birthDate"
@ -145,21 +163,26 @@
/>
</div>
<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')"
: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="`${'ศาสนา'}`"
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">
@ -276,30 +299,7 @@
</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.tel"
:rules="[
(val) => val.length == 10 || `${'กรุณากรอก โทรศัพท์'}`,
(val) =>
/^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`,
]"
:label="`${'โทรศัพท์'}`"
/>
</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
@ -322,7 +322,7 @@
]"
:label="`${'โทรศัพท์มือถือ'}`"
/>
</div>
</div> -->
<div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
<q-input
:class="getClass(status == 'checkRegister' || status == 'payment')"

View file

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

View file

@ -30,12 +30,16 @@
<q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm">
<Occupation :status="status" v-model:form="formOccupation" />
<Education
:status="status"
v-model:form="formEducation"
:educationLevelOptions="educationLevelOptions"
/>
</div>
<q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm">
<Education :status="status" />
<Occupation :status="status" v-model:form="formOccupation" />
</div>
<q-separator class="q-my-lg bg-gray" size="5px" />
@ -77,10 +81,10 @@ const props = defineProps({
type: Object,
required: true,
},
// formFamily: {
// type: Object,
// required: true,
// },
formEducation: {
type: Object,
required: true,
},
formOccupation: {
type: Object,
required: true,
@ -92,9 +96,10 @@ const $q = useQuasar();
const prefixOptions = ref<DataOption[]>([]);
const religionOptions = ref<DataOption[]>([]);
const provinceOptions = ref<DataOption[]>([]);
const educationLevelOptions = ref<DataOption[]>([]);
const formInformation = ref<any>({});
const formAddress = ref<any>({});
// const formFamily = ref<any>({});
const formEducation = ref<any>({});
const formOccupation = ref<any>({});
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;
@ -102,7 +107,7 @@ const { messageError, showLoader, hideLoader } = mixin;
const emit = defineEmits([
"update:formInformation",
"update:formAddress",
// "update:formFamily",
"update:formEducation",
"update:formOccupation",
]);
@ -114,9 +119,9 @@ watch(formAddress, async (count: Object, prevCount: Object) => {
emit("update:formAddress", count);
});
// watch(formFamily, async (count: Object, prevCount: Object) => {
// emit("update:formFamily", count);
// });
watch(formEducation, async (count: Object, prevCount: Object) => {
emit("update:formEducation", count);
});
watch(formOccupation, async (count: Object, prevCount: Object) => {
emit("update:formOccupation", count);
@ -127,6 +132,7 @@ onMounted(() => {
fetchPrefix();
fetchReligion();
fetchProvince();
fetchEducationLevel();
});
const fetchPrefix = async () => {
@ -188,4 +194,24 @@ const fetchProvince = async () => {
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>

View file

@ -62,16 +62,24 @@ interface Family {
}
interface Occupation {
status: string | null;
company: string | null;
department: string | null;
email: string | null;
org: string | null;
pile: string | null;
group: string | null;
salary: string | null;
position: string | null;
positionType: string | null;
tel: string | null;
official: string | null;
personnel: string | null;
officialsOther: string | null;
employee: string | null;
other: string | null;
}
interface Education {
educationLevelExamId: string | null;
educationName: string | null;
educationMajor: string | null;
educationLocation: string | null;
educationType: string | null;
educationEndDate: Date;
educationScores: number | null;
educationLevelHighId: string | null;
}
interface Address {
@ -148,99 +156,6 @@ interface ExamCard {
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>({
address: null,
provinceId: null,
@ -303,16 +218,24 @@ const defaultFamily = ref<Family>({
});
const defaultOccupation = ref<Occupation>({
status: null,
company: null,
department: null,
email: null,
org: null,
pile: null,
group: null,
salary: null,
position: null,
positionType: null,
tel: null,
official: null,
personnel: null,
officialsOther: null,
employee: null,
other: null,
});
const defaultEducation = ref<Education>({
educationLevelExamId: null,
educationName: null,
educationMajor: null,
educationLocation: null,
educationType: null,
educationEndDate: new Date(),
educationScores: null,
educationLevelHighId: null,
});
const changeData = (system: String, val: any) => {
@ -320,6 +243,7 @@ const changeData = (system: String, val: any) => {
if (system == "address") defaultAddress.value = val;
if (system == "famliy") defaultFamily.value = val;
if (system == "occupation") defaultOccupation.value = val;
if (system == "education") defaultEducation.value = val;
};
export {
@ -327,7 +251,7 @@ export {
defaultFamily,
defaultAddress,
defaultOccupation,
defaultCard,
defaultEducation,
changeData,
};
export type {
@ -340,6 +264,7 @@ export type {
Address,
zipCodeOption,
Occupation,
Education,
ExamCard,
UploadType,
WebType,

View file

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

View file

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

File diff suppressed because one or more lines are too long