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

Refactoring code module 03_recruiting

Browse source
This commit is contained in:
STW_TTTY\stwtt 2024-09-17 15:56:06 +07:00
parent b223c2433e
commit 87e2e3b080
36 changed files with 6139 additions and 6335 deletions
Download patch file Download diff file Expand all files Collapse all files

382
src/modules/03_recruiting/components/Address.vue
View file

@ -1,4 +1,194 @@
<!-- card ข้อมูลที่อยู่ -->
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import type { PropType } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type {
Address,
DataOption,
} from "@/modules/03_recruiting/interface/index/Main";
import {
defaultAddress,
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({
provinceOptions: {
type: Array as PropType<DataOption[]>,
required: true,
},
status: {
type: String,
required: true,
},
form: {
type: Object,
required: true,
},
});
const $q = useQuasar();
const route = useRoute();
const candidateId = ref<string>(route.params.candidateId.toString());
const edit = ref<boolean>(true);
const myform = ref<any>({});
const districtOptions = ref<DataOption[]>([]);
const districtCOptions = ref<DataOption[]>([]);
const subdistrictOptions = ref<DataOption[]>([]);
const subdistrictCOptions = ref<DataOption[]>([]);
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;
const emit = defineEmits(["update:form"]);
watch(myform, async (count: any, prevCount: any) => {
emit("update:form", count);
});
watch(defaultAddress, async (count: Address, prevCount: Address) => {
await changeData("address", count);
});
onMounted(async () => {
await fetchData();
if (defaultAddress.value.provinceId != null)
await fetchDistrict(defaultAddress.value.provinceId, "1");
if (defaultAddress.value.provinceIdC != null)
await fetchDistrict(defaultAddress.value.provinceIdC, "2");
if (defaultAddress.value.districtId != null)
await fetchSubDistrict(defaultAddress.value.districtId, "1");
if (defaultAddress.value.districtIdC != null)
await fetchSubDistrict(defaultAddress.value.districtIdC, "2");
});
const fetchData = async () => {
await http
.get(config.API.candidateAddress(candidateId.value))
.then((res) => {
const data = res.data.result;
defaultAddress.value.address = data.registAddress;
defaultAddress.value.addressC = data.currentAddress;
defaultAddress.value.provinceId = data.registProvinceId;
defaultAddress.value.provinceIdC = data.currentProvinceId;
defaultAddress.value.districtId = data.registDistrictId;
defaultAddress.value.districtIdC = data.currentDistrictId;
defaultAddress.value.subdistrictId = data.registSubDistrictId;
defaultAddress.value.subdistrictIdC = data.currentSubDistrictId;
defaultAddress.value.code = data.registZipCode;
defaultAddress.value.codeC = data.currentZipCode;
defaultAddress.value.same =
data.registSame == true ? "1" : data.registSame == false ? "0" : null;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const selectProvince = (e: string, name: string) => {
if (name == "1") {
defaultAddress.value.districtId = "";
defaultAddress.value.subdistrictId = "";
defaultAddress.value.code = null;
} else {
defaultAddress.value.districtIdC = "";
defaultAddress.value.subdistrictIdC = "";
defaultAddress.value.codeC = null;
}
myform.value.resetValidation();
fetchDistrict(e, name);
};
const selectDistrict = (e: string, name: string) => {
if (name == "1") {
defaultAddress.value.subdistrictId = "";
defaultAddress.value.code = null;
} else {
defaultAddress.value.subdistrictIdC = "";
defaultAddress.value.codeC = null;
}
myform.value.resetValidation();
fetchSubDistrict(e, name);
};
const selectSubDistrict = (e: string, name: string) => {
if (name == "1") {
const findcode = subdistrictOptions.value.filter((r) => r.id == e);
const namecode = findcode.length > 0 ? findcode[0].zipCode : null;
defaultAddress.value.code = namecode;
} else {
const findcode = subdistrictCOptions.value.filter((r) => r.id == e);
const namecode = findcode.length > 0 ? findcode[0].zipCode : null;
defaultAddress.value.codeC = namecode;
}
};
const fetchDistrict = async (id: string, position: string) => {
showLoader();
await http
.get(config.API.listDistrict(id))
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: DataOption) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
if (position == "1") {
districtOptions.value = option;
} else {
districtCOptions.value = option;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const fetchSubDistrict = async (id: string, position: string) => {
showLoader();
await http
.get(config.API.listSubDistrict(id))
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: DataOption) => {
option.push({
id: r.id.toString(),
name: r.name.toString(),
zipCode: r.zipCode != null ? r.zipCode : null,
});
});
if (position == "1") {
subdistrictOptions.value = option;
} else {
subdistrictCOptions.value = option;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<template>
<HeaderTop
v-model:edit="edit"
@ -228,193 +418,3 @@
</div>
</q-form>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import type { PropType } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type {
Address,
DataOption,
} from "@/modules/03_recruiting/interface/index/Main";
import {
defaultAddress,
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({
provinceOptions: {
type: Array as PropType<DataOption[]>,
required: true,
},
status: {
type: String,
required: true,
},
form: {
type: Object,
required: true,
},
});
const $q = useQuasar();
const route = useRoute();
const candidateId = ref<string>(route.params.candidateId.toString());
const edit = ref<boolean>(true);
const myform = ref<any>({});
const districtOptions = ref<DataOption[]>([]);
const districtCOptions = ref<DataOption[]>([]);
const subdistrictOptions = ref<DataOption[]>([]);
const subdistrictCOptions = ref<DataOption[]>([]);
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;
const emit = defineEmits(["update:form"]);
watch(myform, async (count: any, prevCount: any) => {
emit("update:form", count);
});
watch(defaultAddress, async (count: Address, prevCount: Address) => {
await changeData("address", count);
});
onMounted(async () => {
await fetchData();
if (defaultAddress.value.provinceId != null)
await fetchDistrict(defaultAddress.value.provinceId, "1");
if (defaultAddress.value.provinceIdC != null)
await fetchDistrict(defaultAddress.value.provinceIdC, "2");
if (defaultAddress.value.districtId != null)
await fetchSubDistrict(defaultAddress.value.districtId, "1");
if (defaultAddress.value.districtIdC != null)
await fetchSubDistrict(defaultAddress.value.districtIdC, "2");
});
const fetchData = async () => {
await http
.get(config.API.candidateAddress(candidateId.value))
.then((res) => {
const data = res.data.result;
defaultAddress.value.address = data.registAddress;
defaultAddress.value.addressC = data.currentAddress;
defaultAddress.value.provinceId = data.registProvinceId;
defaultAddress.value.provinceIdC = data.currentProvinceId;
defaultAddress.value.districtId = data.registDistrictId;
defaultAddress.value.districtIdC = data.currentDistrictId;
defaultAddress.value.subdistrictId = data.registSubDistrictId;
defaultAddress.value.subdistrictIdC = data.currentSubDistrictId;
defaultAddress.value.code = data.registZipCode;
defaultAddress.value.codeC = data.currentZipCode;
defaultAddress.value.same =
data.registSame == true ? "1" : data.registSame == false ? "0" : null;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const selectProvince = (e: string, name: string) => {
if (name == "1") {
defaultAddress.value.districtId = "";
defaultAddress.value.subdistrictId = "";
defaultAddress.value.code = null;
} else {
defaultAddress.value.districtIdC = "";
defaultAddress.value.subdistrictIdC = "";
defaultAddress.value.codeC = null;
}
myform.value.resetValidation();
fetchDistrict(e, name);
};
const selectDistrict = (e: string, name: string) => {
if (name == "1") {
defaultAddress.value.subdistrictId = "";
defaultAddress.value.code = null;
} else {
defaultAddress.value.subdistrictIdC = "";
defaultAddress.value.codeC = null;
}
myform.value.resetValidation();
fetchSubDistrict(e, name);
};
const selectSubDistrict = (e: string, name: string) => {
if (name == "1") {
const findcode = subdistrictOptions.value.filter((r) => r.id == e);
const namecode = findcode.length > 0 ? findcode[0].zipCode : null;
defaultAddress.value.code = namecode;
} else {
const findcode = subdistrictCOptions.value.filter((r) => r.id == e);
const namecode = findcode.length > 0 ? findcode[0].zipCode : null;
defaultAddress.value.codeC = namecode;
}
};
const fetchDistrict = async (id: string, position: string) => {
showLoader();
await http
.get(config.API.listDistrict(id))
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: DataOption) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
if (position == "1") {
districtOptions.value = option;
} else {
districtCOptions.value = option;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const fetchSubDistrict = async (id: string, position: string) => {
showLoader();
await http
.get(config.API.listSubDistrict(id))
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: DataOption) => {
option.push({
id: r.id.toString(),
name: r.name.toString(),
zipCode: r.zipCode != null ? r.zipCode : null,
});
});
if (position == "1") {
subdistrictOptions.value = option;
} else {
subdistrictCOptions.value = option;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>

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

@ -1,306 +1,3 @@
<!-- tab ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน) -->
<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"
:bottom="true"
:boss="status == 'checkRegister' || status == 'payment'"
:editData="status == 'checkRegister' || status == 'payment'"
name="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
icon="mdi-briefcase"
:iconLeft="true"
>
<template #columns="props">
<q-tr :props="props">
<q-td
style="width: 5% !important"
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-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div v-if="col.name == 'startDate' || col.name == 'endDate'">
{{ date2Thai(col.value) }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
<template #bottom="props">
<div style="width: 67% !important" />
<div
:props="props"
class="row"
style="width: 33% !important; padding-left: 20px"
>
<div
class="text-weight-medium text-subtitle2 q-py-sm row col-12 justify-between"
>
<div>รวมระยะเวลา :</div>
<div>{{ total }}</div>
</div>
</div>
</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-12 col-sm-6 col-md-6">
<q-input
:class="
getClass(status == 'checkRegister' || status == 'payment')
"
:outlined="status == 'checkRegister' || status == 'payment'"
dense
lazy-rules
:readonly="!status == 'checkRegister' || status == 'payment'"
:borderless="!status == 'checkRegister' || status == 'payment'"
v-model="position"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/ลักษณะงาน'}`]"
:label="`${'ตำแหน่ง/ลักษณะงาน'}`"
@update:modelValue="clickEditRowPosition"
hide-bottom-space
/>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<q-select
:class="
getClass(status == 'checkRegister' || status == 'payment')
"
:outlined="status == 'checkRegister' || status == 'payment'"
dense
lazy-rules
:readonly="!status == 'checkRegister' || status == 'payment'"
:borderless="!status == 'checkRegister' || status == 'payment'"
v-model="type"
:options="opType"
:rules="[(val) => !!val || `${'กรุณาเลือกประเภท'}`]"
:label="`${'ประเภท'}`"
@update:modelValue="clickEditRowPosition"
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="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"
hide-bottom-space
/>
</div> -->
<div class="col-xs-12 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!status == 'checkRegister' || status == 'payment'"
v-model="startDate"
: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(status == 'checkRegister' || status == 'payment')
"
:outlined="status == 'checkRegister' || status == 'payment'"
dense
:borderless="
!status == 'checkRegister' || status == 'payment'
"
:model-value="date2Thai(startDate)"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่เริ่ม'}`,
(val) =>
startDate <= endDate ||
`${'กรุณาเลือกวันที่เริ่มให้ถูกต้อง'}`,
]"
hide-bottom-space
:label="`${'วันที่เริ่ม'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
status == 'checkRegister' || status == 'payment'
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!status == 'checkRegister' || status == 'payment'"
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(status == 'checkRegister' || status == 'payment')
"
:outlined="status == 'checkRegister' || status == 'payment'"
dense
:borderless="
!status == 'checkRegister' || status == 'payment'
"
:model-value="date2Thai(endDate)"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`,
(val) =>
startDate <= endDate ||
`${'กรุณาเลือกวันที่สิ้นสุดให้ถูกต้อง'}`,
]"
hide-bottom-space
:label="`${'วันที่สิ้นสุด'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
status == 'checkRegister' || status == 'payment'
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
:class="getClass(false)"
:outlined="false"
dense
lazy-rules
:readonly="!false"
:borderless="!false"
v-model="rangeDate"
:label="`${'ระยะเวลา'}`"
hide-bottom-space
/>
</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>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { onMounted, ref, watch } from "vue";
@ -402,39 +99,6 @@ const columns = ref<QTableProps["columns"]>([
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
// {
// name: "group",
// align: "left",
// label: "กลุ่ม/ฝ่าย",
// sortable: true,
// field: "group",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// sort: (a: string, b: string) =>
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
// {
// 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: "center",
@ -891,6 +555,265 @@ const getClass = (val: boolean) => {
};
};
</script>
<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"
:bottom="true"
:boss="status == 'checkRegister' || status == 'payment'"
:editData="status == 'checkRegister' || status == 'payment'"
name="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
icon="mdi-briefcase"
:iconLeft="true"
>
<template #columns="props">
<q-tr :props="props">
<q-td
style="width: 5% !important"
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-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div v-if="col.name == 'startDate' || col.name == 'endDate'">
{{ date2Thai(col.value) }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
<template #bottom="props">
<div style="width: 67% !important" />
<div
:props="props"
class="row"
style="width: 33% !important; padding-left: 20px"
>
<div
class="text-weight-medium text-subtitle2 q-py-sm row col-12 justify-between"
>
<div>รวมระยะเวลา :</div>
<div>{{ total }}</div>
</div>
</div>
</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-12 col-sm-6 col-md-6">
<q-input
:class="
getClass(status == 'checkRegister' || status == 'payment')
"
:outlined="status == 'checkRegister' || status == 'payment'"
dense
lazy-rules
:readonly="status !== 'checkRegister' && status == 'payment'"
:borderless="status !== 'checkRegister' && status == 'payment'"
v-model="position"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/ลักษณะงาน'}`]"
:label="`${'ตำแหน่ง/ลักษณะงาน'}`"
@update:modelValue="clickEditRowPosition"
hide-bottom-space
/>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<q-select
:class="
getClass(status == 'checkRegister' || status == 'payment')
"
:outlined="status == 'checkRegister' || status == 'payment'"
dense
lazy-rules
:readonly="status !== 'checkRegister' && status == 'payment'"
:borderless="status !== 'checkRegister' && status == 'payment'"
v-model="type"
:options="opType"
:rules="[(val) => !!val || `${'กรุณาเลือกประเภท'}`]"
:label="`${'ประเภท'}`"
@update:modelValue="clickEditRowPosition"
hide-bottom-space
/>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="status !== 'checkRegister' && status == 'payment'"
v-model="startDate"
: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(status == 'checkRegister' || status == 'payment')
"
:outlined="status == 'checkRegister' || status == 'payment'"
dense
:borderless="
status !== 'checkRegister' && status == 'payment'
"
:model-value="date2Thai(startDate)"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่เริ่ม'}`,
(val) =>
startDate <= endDate ||
`${'กรุณาเลือกวันที่เริ่มให้ถูกต้อง'}`,
]"
hide-bottom-space
:label="`${'วันที่เริ่ม'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
status == 'checkRegister' || status == 'payment'
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="status !== 'checkRegister' && status == 'payment'"
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(status == 'checkRegister' || status == 'payment')
"
:outlined="status == 'checkRegister' || status == 'payment'"
dense
:borderless="
status !== 'checkRegister' && status == 'payment'
"
:model-value="date2Thai(endDate)"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`,
(val) =>
startDate <= endDate ||
`${'กรุณาเลือกวันที่สิ้นสุดให้ถูกต้อง'}`,
]"
hide-bottom-space
:label="`${'วันที่สิ้นสุด'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
status == 'checkRegister' || status == 'payment'
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
:class="getClass(false)"
:outlined="false"
dense
lazy-rules
:readonly="!false"
:borderless="!false"
v-model="rangeDate"
:label="`${'ระยะเวลา'}`"
hide-bottom-space
/>
</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>
</template>
<style lang="scss">
.modalfix {
position: fixed !important;

166
src/modules/03_recruiting/components/Contact.vue
View file

@ -1,4 +1,85 @@
<!-- card บุคคลที่สามารถติดต่อได้ -->
<script setup lang="ts">
import { ref, onMounted, watch, type PropType } from "vue";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type {
Contact,
DataOption,
} from "@/modules/03_recruiting/interface/index/Main";
import {
defaultContact,
changeData,
} from "@/modules/03_recruiting/interface/index/Main";
import HeaderTop from "@/modules/03_recruiting/components/top.vue";
const props = defineProps({
status: {
type: String,
required: true,
},
form: {
type: Object,
required: true,
},
prefixOptions: {
type: Array as PropType<DataOption[]>,
required: true,
},
});
const emit = defineEmits(["update:form"]);
const mixin = useCounterMixin();
const { showLoader, hideLoader } = mixin;
const edit = ref<boolean>(true);
const myform = ref<Object | null>(null);
const route = useRoute();
const candidateId = ref<string>(route.params.candidateId.toString());
watch(myform, async (count: any) => {
emit("update:form", count);
});
watch(defaultContact, async (count: Contact) => {
await changeData("contact", count);
});
onMounted(async () => {
await fetchData();
});
const fetchData = async () => {
showLoader();
await http
.get(config.API.candidateContact(candidateId.value))
.then((res) => {
const data = res.data.result;
if (data != null) {
defaultContact.value.contactPrefixId = data.contactPrefixId;
defaultContact.value.contactFirstname = data.contactFirstname;
defaultContact.value.contactLastname = data.contactLastname;
defaultContact.value.contactRelations = data.contactRelations;
defaultContact.value.contactTel = data.contactTel;
}
})
.catch((e) => {})
.finally(() => {
hideLoader();
});
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<template>
<HeaderTop
v-model:edit="edit"
@ -94,86 +175,3 @@
</div>
</q-form>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, PropType } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type {
Contact,
DataOption,
} from "@/modules/03_recruiting/interface/index/Main";
import {
defaultContact,
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,
},
prefixOptions: {
type: Array as PropType<DataOption[]>,
required: true,
},
});
const emit = defineEmits(["update:form"]);
const $q = useQuasar();
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;
const edit = ref<boolean>(true);
const myform = ref<any>({});
const route = useRoute();
const candidateId = ref<string>(route.params.candidateId.toString());
watch(myform, async (count: any, prevCount: any) => {
emit("update:form", count);
});
watch(defaultContact, async (count: Contact, prevCount: Contact) => {
await changeData("contact", count);
});
onMounted(async () => {
await fetchData();
});
const fetchData = async () => {
showLoader();
await http
.get(config.API.candidateContact(candidateId.value))
.then((res) => {
const data = res.data.result;
if (data != null) {
defaultContact.value.contactPrefixId = data.contactPrefixId;
defaultContact.value.contactFirstname = data.contactFirstname;
defaultContact.value.contactLastname = data.contactLastname;
defaultContact.value.contactRelations = data.contactRelations;
defaultContact.value.contactTel = data.contactTel;
}
})
.catch((e) => {
// messageError($q, e)
})
.finally(() => {
hideLoader();
});
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>

41
src/modules/03_recruiting/components/CurruncyInput.vue
View file

@ -1,24 +1,3 @@
<template>
<q-input
ref="inputRef"
v-model="formattedValue"
:dense="dense"
:outlined="edit"
:class="
edit == true
? 'full-width inputgreen cursor-pointer'
: 'full-width cursor-pointer'
"
:readonly="!edit"
:borderless="!edit"
hide-bottom-space
>
<template v-for="slot in slots">
<slot :name="slot" />
</template>
</q-input>
</template>
<script setup lang="ts">
import { useCurrencyInput } from "vue-currency-input";
import { ref, useSlots, watch } from "vue";
@ -58,3 +37,23 @@ watch(
}
);
</script>
<template>
<q-input
ref="inputRef"
v-model="formattedValue"
:dense="dense"
:outlined="edit"
:class="
edit == true
? 'full-width inputgreen cursor-pointer'
: 'full-width cursor-pointer'
"
:readonly="!edit"
:borderless="!edit"
hide-bottom-space
>
<template v-for="slot in slots">
<slot :name="slot" />
</template>
</q-input>
</template>

96
src/modules/03_recruiting/components/DialogFooter.vue
View file

@ -1,51 +1,3 @@
<template>
<q-card-actions class="text-primary q-py-sm">
<q-btn
flat
round
icon="mdi-menu-left"
@click="clickPrevious"
v-if="modalEdit == true"
:disable="previous == false"
:color="!previous ? 'grey-7' : 'public'"
/>
<q-btn
flat
round
icon="mdi-menu-right"
@click="clickNext"
v-if="modalEdit == true"
:disable="next == false"
:color="!next ? 'grey-7' : 'public'"
/>
<q-space />
<div v-if="editData">
<q-btn
v-if="!editvisible"
flat
round
:disabled="editvisible"
:color="editvisible ? 'grey-7' : 'primary'"
@click="edit"
icon="mdi-pencil-outline"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<div v-else>
<q-btn
flat
round
:disabled="!editvisible"
:color="!editvisible ? 'grey-7' : 'public'"
@click="checkSave"
icon="mdi-content-save-outline"
>
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
</div>
</div>
</q-card-actions>
</template>
<script setup lang="ts">
const props = defineProps({
editvisible: Boolean,
@ -103,3 +55,51 @@ const clickPrevious = async () => {
await props.clickPrevious();
};
</script>
<template>
<q-card-actions class="text-primary q-py-sm">
<q-btn
flat
round
icon="mdi-menu-left"
@click="clickPrevious"
v-if="modalEdit == true"
:disable="previous == false"
:color="!previous ? 'grey-7' : 'public'"
/>
<q-btn
flat
round
icon="mdi-menu-right"
@click="clickNext"
v-if="modalEdit == true"
:disable="next == false"
:color="!next ? 'grey-7' : 'public'"
/>
<q-space />
<div v-if="editData">
<q-btn
v-if="!editvisible"
flat
round
:disabled="editvisible"
:color="editvisible ? 'grey-7' : 'primary'"
@click="edit"
icon="mdi-pencil-outline"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<div v-else>
<q-btn
flat
round
:disabled="!editvisible"
:color="!editvisible ? 'grey-7' : 'public'"
@click="checkSave"
icon="mdi-content-save-outline"
>
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
</div>
</div>
</q-card-actions>
</template>

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

@ -1,4 +1,110 @@
<!-- card อัปโหลดเอกสาร -->
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import type { UploadType } from "@/modules/03_recruiting/interface/index/Main";
import HeaderTop from "@/modules/03_recruiting/components/top.vue";
const props = defineProps({
status: {
type: String,
required: true,
},
});
const $q = useQuasar();
const route = useRoute();
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;
const candidateId = ref<string>(route.params.candidateId.toString());
const uploader = ref<any>();
const edit = ref<boolean>(props.status == "checkRegister");
const name = ref<string>("");
const files = ref<UploadType[]>([]);
const file = ref<File[]>([]);
async function fileAdd(val: any) {
name.value = val[0].name;
file.value = val;
}
async function getData() {
showLoader();
await http
.get(config.API.candidateUpload(candidateId.value))
.then((res) => {
const data = res.data.result;
files.value = data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
async function deleteData(id: string) {
const params = {
documentId: id,
};
showLoader();
await http
.delete(config.API.candidateUpload(candidateId.value), {
params,
})
.then((res) => {
const data = res.data.result;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
await getData();
});
}
async function uploadData() {
const blob = file.value.slice(0, file.value[0].size);
const newFile = new File(blob, name.value, {
type: file.value[0].type,
});
const formData = new FormData();
formData.append("", newFile);
showLoader();
await http
.put(config.API.candidateUpload(candidateId.value), formData)
.then((res) => {
const data = res.data.result;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
name.value = "";
uploader.value.reset();
await getData();
});
}
async function downloadData(path: string) {
window.open(path);
}
onMounted(async () => {
await getData();
});
</script>
<template>
<HeaderTop
v-model:edit="edit"
@ -136,106 +242,3 @@
</q-list>
</q-card>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import HeaderTop from "@/modules/03_recruiting/components/top.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute } from "vue-router";
import type { UploadType } from "@/modules/03_recruiting/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
const props = defineProps({
status: {
type: String,
required: true,
},
});
const $q = useQuasar();
const route = useRoute();
const candidateId = ref<string>(route.params.candidateId.toString());
const uploader = ref<any>();
const edit = ref<boolean>(props.status == "checkRegister");
const name = ref<string>("");
const files = ref<UploadType[]>([]);
const file = ref<File[]>([]);
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;
onMounted(async () => {
await getData();
});
const fileAdd = async (val: any) => {
name.value = val[0].name;
file.value = val;
};
const getData = async () => {
showLoader();
await http
.get(config.API.candidateUpload(candidateId.value))
.then((res) => {
const data = res.data.result;
files.value = data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const deleteData = async (id: string) => {
const params = {
documentId: id,
};
showLoader();
await http
.delete(config.API.candidateUpload(candidateId.value), {
params,
})
.then((res) => {
const data = res.data.result;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
await getData();
});
};
const uploadData = async () => {
const blob = file.value.slice(0, file.value[0].size);
const newFile = new File(blob, name.value, {
type: file.value[0].type,
});
const formData = new FormData();
formData.append("", newFile);
showLoader();
await http
.put(config.API.candidateUpload(candidateId.value), formData)
.then((res) => {
const data = res.data.result;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
name.value = "";
uploader.value.reset();
await getData();
});
};
const downloadData = async (path: string) => {
window.open(path);
};
</script>

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

@ -1,4 +1,118 @@
<!-- card วุฒิที่ใช้สมัครสอบ -->
<script setup lang="ts">
import { ref, onMounted, watch, type PropType } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import type {
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";
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 route = useRoute();
const edit = ref<boolean>(true);
const showEducationName = ref<boolean>(true);
const myform = ref<object | null>(null);
const candidateId = ref<string>(route.params.candidateId.toString());
const educationTypeOptions = ref<DataOption[]>([
{
name: "รัฐบาล",
id: "รัฐบาล",
},
{
name: "เอกชน",
id: "เอกชน",
},
]);
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader, date2Thai } = mixin;
const emit = defineEmits(["update:form"]);
watch(myform, async (count: any) => {
emit("update:form", count);
});
watch(defaultEducation, async (count: Education) => {
await changeData("education", count);
});
onMounted(async () => {
await fetchData();
});
const fetchData = async () => {
showLoader();
await http
.get(config.API.candidateEducation(candidateId.value))
.then((res) => {
const data = res.data.result;
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;
checkInputName();
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const checkInputName = () => {
showEducationName.value =
props.educationLevelOptions.filter(
(x) =>
x.id == defaultEducation.value.educationLevelExamId &&
(x.name == "ปริญญาตรี" || x.name == "ปริญญาโท" || x.name == "ปริญญาเอก")
).length == 0
? false
: true;
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<template>
<HeaderTop
v-model:edit="edit"
@ -176,114 +290,3 @@
</div>
</q-form>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, PropType } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type {
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 edit = ref<boolean>(true);
const showEducationName = ref<boolean>(true);
const myform = ref<any>({});
const route = useRoute();
const candidateId = ref<string>(route.params.candidateId.toString());
const educationTypeOptions = ref<any>([
{
name: "รัฐบาล",
id: "รัฐบาล",
},
{
name: "เอกชน",
id: "เอกชน",
},
]);
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();
});
const fetchData = async () => {
showLoader();
await http
.get(config.API.candidateEducation(candidateId.value))
.then((res) => {
const data = res.data.result;
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;
checkInputName();
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const checkInputName = () => {
showEducationName.value =
props.educationLevelOptions.filter(
(x) =>
x.id == defaultEducation.value.educationLevelExamId &&
(x.name == "ปริญญาตรี" || x.name == "ปริญญาโท" || x.name == "ปริญญาเอก")
).length == 0
? false
: true;
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>

185
src/modules/03_recruiting/components/ExamFinished.vue
View file

@ -1,3 +1,89 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
const props = defineProps({
status: {
type: String,
required: true,
},
candidateId: {
type: String,
required: true,
},
});
const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { messageError, date2Thai, showLoader, hideLoader } = mixin;
const fullName = ref<string>("");
const examNumber = ref<string>("");
const citizenId = ref<string>("");
const examSeat = ref<string>("");
const number = ref<string>("");
const scoreAFull = ref<number | null>(null);
const scoreA = ref<number | null>(null);
const scoreBFull = ref<number | null>(null);
const scoreB = ref<number | null>(null);
const scoreCFull = ref<number | null>(null);
const scoreC = ref<number | null>(null);
const scoreSumFull = ref<number | null>(null);
const scoreSum = ref<number | null>(null);
const examResultinscore = ref<string>("");
const avatar = ref<string>("");
const score_expired = ref<Date | null>(new Date());
const reviewPoint = ref<any>();
const review = ref<string>("-");
onMounted(async () => {
await fetchCard();
});
const fetchCard = async () => {
showLoader();
await http
.get(config.API.candidateCard(props.candidateId))
.then((res) => {
const data = res.data.result;
fullName.value = data.prefix + data.firstName + " " + data.lastName;
examNumber.value = data.examIdenNumber;
citizenId.value = data.citizenId;
examSeat.value = data.seatNumber;
scoreAFull.value = data.pointTotalA;
scoreA.value = data.pointA;
scoreBFull.value = data.pointTotalB;
scoreB.value = data.pointB;
scoreCFull.value = data.pointTotalC;
scoreC.value = data.pointC;
scoreSum.value =
parseInt(data.pointA == null ? 0 : data.pointA) +
parseInt(data.pointB == null ? 0 : data.pointB) +
parseInt(data.pointC == null ? 0 : data.pointC);
scoreSumFull.value =
parseInt(data.pointTotalA == null ? 0 : data.pointTotalA) +
parseInt(data.pointTotalB == null ? 0 : data.pointTotalB) +
parseInt(data.pointTotalC == null ? 0 : data.pointTotalC);
examResultinscore.value = data.pass;
avatar.value = data.avatar;
score_expired.value =
data.announcementDate == null ? null : new Date(data.announcementDate);
number.value = data.number;
reviewPoint.value = data.reviewPoint;
review.value = data.review == null ? "-" : data.review;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
</script>
<template>
<q-card bordered flat class="col-12 row">
<div class="col-9 q-pa-md q-col-gutter-sm">
@ -17,18 +103,6 @@
<div class="">สนามสอบ :</div>
<div class="text-black text-bold q-pl-sm">{{ examSeat }}</div>
</div>
<!-- <div class="row">
<div class="">วันสอบ :</div>
<div class="text-black text-bold q-pl-sm">5 มิ.ย. 2566</div>
</div>
<div class="row">
<div class="">ครั้งที่สอบ :</div>
<div class="text-black text-bold q-pl-sm">1</div>
</div>
<div class="row">
<div class="">ชุดข้อสอบ :</div>
<div class="text-black text-bold q-pl-sm">0506-1/2566</div>
</div> -->
</div>
<q-card-section class="col-3">
@ -150,91 +224,4 @@
</q-card>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
const props = defineProps({
status: {
type: String,
required: true,
},
candidateId: {
type: String,
required: true,
},
});
const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { messageError, date2Thai, showLoader, hideLoader } = mixin;
const fullName = ref<string>("");
const examNumber = ref<string>("");
const citizenId = ref<string>("");
const examSeat = ref<string>("");
const number = ref<string>("");
const scoreAFull = ref<number | null>(null);
const scoreA = ref<number | null>(null);
const scoreBFull = ref<number | null>(null);
const scoreB = ref<number | null>(null);
const scoreCFull = ref<number | null>(null);
const scoreC = ref<number | null>(null);
const scoreSumFull = ref<number | null>(null);
const scoreSum = ref<number | null>(null);
const examResultinscore = ref<string>("");
const avatar = ref<string>("");
const score_expired = ref<Date | null>(new Date());
const reviewPoint = ref<number>();
const review = ref<string>("-");
onMounted(async () => {
await fetchCard();
});
const fetchCard = async () => {
showLoader();
await http
.get(config.API.candidateCard(props.candidateId))
.then((res) => {
const data = res.data.result;
fullName.value = data.prefix + data.firstName + " " + data.lastName;
examNumber.value = data.examIdenNumber;
citizenId.value = data.citizenId;
examSeat.value = data.seatNumber;
scoreAFull.value = data.pointTotalA;
scoreA.value = data.pointA;
scoreBFull.value = data.pointTotalB;
scoreB.value = data.pointB;
scoreCFull.value = data.pointTotalC;
scoreC.value = data.pointC;
scoreSum.value =
parseInt(data.pointA == null ? 0 : data.pointA) +
parseInt(data.pointB == null ? 0 : data.pointB) +
parseInt(data.pointC == null ? 0 : data.pointC);
scoreSumFull.value =
parseInt(data.pointTotalA == null ? 0 : data.pointTotalA) +
parseInt(data.pointTotalB == null ? 0 : data.pointTotalB) +
parseInt(data.pointTotalC == null ? 0 : data.pointTotalC);
examResultinscore.value = data.pass;
avatar.value = data.avatar;
score_expired.value =
data.announcementDate == null ? null : new Date(data.announcementDate);
number.value = data.number;
reviewPoint.value = data.reviewPoint;
review.value = data.review == null ? "-" : data.review;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
</script>
<style lang="scss" scoped></style>

192
src/modules/03_recruiting/components/Family.vue
View file

@ -1,4 +1,101 @@
<!-- card ข้อมูลครอบครัว -->
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import type { PropType } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import type {
Family,
DataOption,
} from "@/modules/03_recruiting/interface/index/Main";
import {
defaultFamily,
changeData,
} from "@/modules/03_recruiting/interface/index/Main";
import HeaderTop from "@/modules/03_recruiting/components/top.vue";
const props = defineProps({
prefixOptions: {
type: Array as PropType<DataOption[]>,
required: true,
},
status: {
type: String,
required: true,
},
form: {
type: Object,
required: true,
},
});
const $q = useQuasar();
const route = useRoute();
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;
const edit = ref<boolean>(true);
const myform = ref<object | null>(null);
const candidateId = ref<string>(route.params.candidateId.toString());
const emit = defineEmits(["update:form"]);
async function fetchData() {
showLoader();
await http
.get(config.API.candidateFamily(candidateId.value))
.then((res) => {
const data = res.data.result;
defaultFamily.value.prefixIdC = data.marryPrefixId;
defaultFamily.value.firstnameC = data.marryFirstName;
defaultFamily.value.lastnameC = data.marryLastName;
defaultFamily.value.occupationC = data.marryOccupation;
defaultFamily.value.nationalityC = data.marryNationality;
defaultFamily.value.prefixIdM = data.fatherPrefixId;
defaultFamily.value.firstnameM = data.fatherFirstName;
defaultFamily.value.lastnameM = data.fatherLastName;
defaultFamily.value.occupationM = data.fatherOccupation;
defaultFamily.value.nationalityM = data.fatherNationality;
defaultFamily.value.prefixIdF = data.motherPrefixId;
defaultFamily.value.firstnameF = data.motherFirstName;
defaultFamily.value.lastnameF = data.motherLastName;
defaultFamily.value.occupationF = data.motherOccupation;
defaultFamily.value.nationalityF = data.motherNationality;
defaultFamily.value.same =
data.marry == true ? "1" : data.marry == false ? "0" : null;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
function getClass(val: boolean) {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
}
watch(myform, async (count: any, prevCount: any) => {
emit("update:form", count);
});
watch(defaultFamily, async (count: Family, prevCount: Family) => {
await changeData("family", count);
});
onMounted(async () => {
await fetchData();
});
</script>
<template>
<HeaderTop
v-model:edit="edit"
@ -266,98 +363,3 @@
</div>
</q-form>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import type { PropType } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type {
Family,
DataOption,
} from "@/modules/03_recruiting/interface/index/Main";
import {
defaultFamily,
changeData,
} from "@/modules/03_recruiting/interface/index/Main";
import HeaderTop from "@/modules/03_recruiting/components/top.vue";
import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
const props = defineProps({
prefixOptions: {
type: Array as PropType<DataOption[]>,
required: true,
},
status: {
type: String,
required: true,
},
form: {
type: Object,
required: true,
},
});
const $q = useQuasar();
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;
const edit = ref<boolean>(true);
const myform = ref<any>({});
const route = useRoute();
const candidateId = ref<string>(route.params.candidateId.toString());
const emit = defineEmits(["update:form"]);
watch(myform, async (count: any, prevCount: any) => {
emit("update:form", count);
});
watch(defaultFamily, async (count: Family, prevCount: Family) => {
await changeData("family", count);
});
onMounted(async () => {
await fetchData();
});
const fetchData = async () => {
showLoader();
await http
.get(config.API.candidateFamily(candidateId.value))
.then((res) => {
const data = res.data.result;
defaultFamily.value.prefixIdC = data.marryPrefixId;
defaultFamily.value.firstnameC = data.marryFirstName;
defaultFamily.value.lastnameC = data.marryLastName;
defaultFamily.value.occupationC = data.marryOccupation;
defaultFamily.value.nationalityC = data.marryNationality;
defaultFamily.value.prefixIdM = data.fatherPrefixId;
defaultFamily.value.firstnameM = data.fatherFirstName;
defaultFamily.value.lastnameM = data.fatherLastName;
defaultFamily.value.occupationM = data.fatherOccupation;
defaultFamily.value.nationalityM = data.fatherNationality;
defaultFamily.value.prefixIdF = data.motherPrefixId;
defaultFamily.value.firstnameF = data.motherFirstName;
defaultFamily.value.lastnameF = data.motherLastName;
defaultFamily.value.occupationF = data.motherOccupation;
defaultFamily.value.nationalityF = data.motherNationality;
defaultFamily.value.same =
data.marry == true ? "1" : data.marry == false ? "0" : null;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>

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

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

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

@ -1,4 +1,85 @@
<!-- card ตำแหน่งปัจจุบัน -->
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import type { Occupation } from "@/modules/03_recruiting/interface/index/Main";
import {
defaultOccupation,
changeData,
} from "@/modules/03_recruiting/interface/index/Main";
import HeaderTop from "@/modules/03_recruiting/components/top.vue";
import CurrencyInput from "@/modules/03_recruiting/components/CurruncyInput.vue";
const props = defineProps({
status: {
type: String,
required: true,
},
form: {
type: Object,
required: true,
},
});
const $q = useQuasar();
const route = useRoute();
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;
const candidateId = ref<string>(route.params.candidateId.toString());
const edit = ref<boolean>(true);
const myform = ref<object | null>(null);
const emit = defineEmits(["update:form"]);
async function fetchData() {
showLoader();
await http
.get(config.API.candidateOccupation(candidateId.value))
.then((res) => {
const data = res.data.result;
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;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
function getClass(val: boolean) {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
}
watch(myform, async (count: any, prevCount: any) => {
emit("update:form", count);
});
watch(defaultOccupation, async (count: Occupation, prevCount: Occupation) => {
await changeData("occupation", count);
});
onMounted(async () => {
await fetchData();
});
</script>
<template>
<HeaderTop
v-model:edit="edit"
@ -134,81 +215,3 @@
</div>
</q-form>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { Occupation } from "@/modules/03_recruiting/interface/index/Main";
import {
defaultOccupation,
changeData,
} from "@/modules/03_recruiting/interface/index/Main";
import HeaderTop from "@/modules/03_recruiting/components/top.vue";
import { useRoute } from "vue-router";
import CurrencyInput from "@/modules/03_recruiting/components/CurruncyInput.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
const props = defineProps({
status: {
type: String,
required: true,
},
form: {
type: Object,
required: true,
},
});
const $q = useQuasar();
const edit = ref<boolean>(true);
const myform = ref<any>({});
const route = useRoute();
const candidateId = ref<string>(route.params.candidateId.toString());
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;
const emit = defineEmits(["update:form"]);
watch(myform, async (count: any, prevCount: any) => {
emit("update:form", count);
});
watch(defaultOccupation, async (count: Occupation, prevCount: Occupation) => {
await changeData("occupation", count);
});
onMounted(async () => {
await fetchData();
});
const fetchData = async () => {
showLoader();
await http
.get(config.API.candidateOccupation(candidateId.value))
.then((res) => {
const data = res.data.result;
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;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>

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

@ -1,82 +1,19 @@
<!-- tab ข้อมูลส่วนบุคคล -->
<template>
<div class="q-px-sm">
<Information
:prefixOptions="prefixOptions"
:religionOptions="religionOptions"
:provinceOptions="provinceOptions"
:status="status"
v-model:form="formInformation"
/>
</div>
<q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm">
<Address
:provinceOptions="provinceOptions"
:status="status"
v-model:form="formAddress"
/>
</div>
<!-- <q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm">
<Family
:prefixOptions="prefixOptions"
:status="status"
v-model:form="formFamily"
/>
</div> -->
<q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm">
<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">
<Occupation :status="status" v-model:form="formOccupation" />
</div>
<q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm">
<Career :status="status" />
</div>
<q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm">
<Contact
:status="status"
v-model:form="formContact"
:prefixOptions="prefixOptions"
/>
</div>
<!-- <q-separator class="q-my-lg bg-gray" size="5px" /> -->
<!-- <div class="q-px-sm">
<Document :status="status" />
</div> -->
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import type { DataOption } from "@/modules/03_recruiting/interface/index/Main";
import Information from "@/modules/03_recruiting/components/Information.vue";
import Address from "@/modules/03_recruiting/components/Address.vue";
import Family from "@/modules/03_recruiting/components/Family.vue";
import Occupation from "@/modules/03_recruiting/components/Occupation.vue";
import Contact from "@/modules/03_recruiting/components/Contact.vue";
import Education from "@/modules/03_recruiting/components/Education.vue";
import Career from "@/modules/03_recruiting/components/Career.vue";
import Document from "@/modules/03_recruiting/components/Document.vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
const props = defineProps({
status: {
@ -155,7 +92,7 @@ onMounted(() => {
fetchEducationLevel();
});
const fetchPrefix = async () => {
async function fetchPrefix() {
showLoader();
await http
.get(config.API.prefix)
@ -173,9 +110,9 @@ const fetchPrefix = async () => {
.finally(() => {
hideLoader();
});
};
}
const fetchReligion = async () => {
async function fetchReligion() {
showLoader();
await http
.get(config.API.religion)
@ -193,9 +130,9 @@ const fetchReligion = async () => {
.finally(() => {
hideLoader();
});
};
}
const fetchProvince = async () => {
async function fetchProvince() {
showLoader();
await http
.get(config.API.province)
@ -213,9 +150,9 @@ const fetchProvince = async () => {
.finally(() => {
hideLoader();
});
};
}
const fetchEducationLevel = async () => {
async function fetchEducationLevel() {
showLoader();
await http
.get(config.API.educationLevel)
@ -233,5 +170,63 @@ const fetchEducationLevel = async () => {
.finally(() => {
hideLoader();
});
};
}
</script>
<template>
<div class="q-px-sm">
<Information
:prefixOptions="prefixOptions"
:religionOptions="religionOptions"
:provinceOptions="provinceOptions"
:status="status"
v-model:form="formInformation"
/>
</div>
<q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm">
<Address
:provinceOptions="provinceOptions"
:status="status"
v-model:form="formAddress"
/>
</div>
<!-- <q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm">
<Family
:prefixOptions="prefixOptions"
:status="status"
v-model:form="formFamily"
/>
</div> -->
<q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm">
<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">
<Occupation :status="status" v-model:form="formOccupation" />
</div>
<q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm">
<Career :status="status" />
</div>
<q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm">
<Contact
:status="status"
v-model:form="formContact"
:prefixOptions="prefixOptions"
/>
</div>
</template>

139
src/modules/03_recruiting/components/Table.vue
View file

@ -1,6 +1,78 @@
<script setup lang="ts">
import { checkPermission } from "@/utils/permissions";
import { ref, useAttrs } from "vue";
import type { Pagination } from "@/modules/04_registry/interface/index/Main";
const attrs = ref<any>(useAttrs());
const table = ref<any>(null);
const filterRef = ref<any>(null);
const initialPagination = ref<Pagination>({
rowsPerPage: 0,
});
const props = defineProps({
count: Number,
pass: Number,
notpass: Number,
inputfilter: String,
name: String,
icon: String,
inputvisible: Array,
editvisible: Boolean,
add: {
type: Function,
default: () => console.log("not function"),
},
validate: {
type: Function,
default: () => console.log("not function"),
},
nornmalData: {
type: Boolean,
defualt: true,
},
conclude: {
type: Boolean,
defualt: false,
},
});
const emit = defineEmits([
"update:inputfilter",
"update:inputvisible",
"update:editvisible",
]);
const updateInput = (value: string | number | null) => {
emit("update:inputfilter", value);
};
const updateVisible = (value: []) => {
emit("update:inputvisible", value);
};
/**
*
* @param start
* @param end
* @param total
*/
function paginationLabel(start: string, end: string, total: string) {
return start + "-" + end + " ใน " + total;
}
/** fn เพิ่มข้อมูล */
function checkAdd() {
props.add();
}
/** reset ฟิลเตอร์ ที่ ค้นหา */
function resetFilter() {
emit("update:inputfilter", "");
filterRef.value.focus();
}
</script>
<template>
<div class="q-pb-sm row q-col-gutter-sm">
<!-- -->
<div
class="q-gutter-sm"
v-if="nornmalData == true && checkPermission($route)?.attrIsCreate"
@ -125,72 +197,7 @@
</template>
</q-table>
</template>
<script setup lang="ts">
import { checkPermission } from "@/utils/permissions";
import { ref, useAttrs } from "vue";
import type { Pagination } from "@/modules/04_registry/interface/index/Main";
const attrs = ref<any>(useAttrs());
const table = ref<any>(null);
const filterRef = ref<any>(null);
const initialPagination = ref<Pagination>({
rowsPerPage: 0,
});
const props = defineProps({
count: Number,
pass: Number,
notpass: Number,
inputfilter: String,
name: String,
icon: String,
inputvisible: Array,
editvisible: Boolean,
add: {
type: Function,
default: () => console.log("not function"),
},
validate: {
type: Function,
default: () => console.log("not function"),
},
nornmalData: {
type: Boolean,
defualt: true,
},
conclude: {
type: Boolean,
defualt: false,
},
});
const emit = defineEmits([
"update:inputfilter",
"update:inputvisible",
"update:editvisible",
]);
const updateInput = (value: string | number | null) => {
emit("update:inputfilter", value);
};
const updateVisible = (value: []) => {
emit("update:inputvisible", value);
};
const paginationLabel = (start: string, end: string, total: string) => {
return start + "-" + end + " ใน " + total;
};
const checkAdd = () => {
props.add();
};
const resetFilter = () => {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
emit("update:inputfilter", "");
filterRef.value.focus();
};
</script>
<style lang="scss">
.icon-color {
color: #4154b3;

187
src/modules/03_recruiting/components/Table1.vue
View file

@ -1,3 +1,91 @@
<script setup lang="ts">
import { ref, useAttrs } from "vue";
import HeaderTop from "@/modules/03_recruiting/components/top1.vue";
import type { Pagination } from "@/modules/04_registry/interface/index/Main";
const attrs = ref<any>(useAttrs());
const table = ref<any>(null);
const filterRef = ref<any>(null);
const editBtn = ref<boolean>(false);
const initialPagination = ref<Pagination>({
rowsPerPage: 0,
});
const props = defineProps({
inputfilter: String,
name: String,
icon: String,
iconAdd: {
type: String,
default: null,
},
inputvisible: Array,
editvisible: Boolean,
headerShow: {
type: Boolean,
default: true,
},
statusEdit: {
type: Boolean,
required: true,
},
iconLeft: {
type: Boolean,
},
edit: {
type: Function,
default: () => console.log("not function"),
},
add: {
type: Function,
default: () => console.log("not function"),
},
addleave: {
type: Function,
default: () => console.log("not function"),
},
cancel: {
type: Function,
default: () => console.log("not function"),
},
validate: {
type: Function,
default: () => console.log("not function"),
},
});
const emit = defineEmits([
"update:inputfilter",
"update:inputvisible",
"update:editvisible",
]);
const updateInput = (value: string | number | null) => {
emit("update:inputfilter", value);
};
const updateVisible = (value: []) => {
emit("update:inputvisible", value);
};
function paginationLabel(start: string, end: string, total: string) {
return start + "-" + end + " ใน " + total;
}
function checkAddLeave() {
props.addleave();
}
function checkAdd() {
props.add();
}
const resetFilter = () => {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
emit("update:inputfilter", "");
filterRef.value.focus();
};
</script>
<template>
<div class="q-pb-sm row">
<HeaderTop
@ -84,106 +172,7 @@
</template>
</q-table>
</template>
<script setup lang="ts">
import { ref, useAttrs } from "vue";
import HeaderTop from "@/modules/03_recruiting/components/top1.vue";
import type { Pagination } from "@/modules/04_registry/interface/index/Main";
const attrs = ref<any>(useAttrs());
const table = ref<any>(null);
const filterRef = ref<any>(null);
const editBtn = ref<boolean>(false);
const initialPagination = ref<Pagination>({
rowsPerPage: 0,
});
const props = defineProps({
inputfilter: String,
name: String,
icon: String,
iconAdd: {
type: String,
default: null,
},
inputvisible: Array,
editvisible: Boolean,
headerShow: {
type: Boolean,
default: true,
},
statusEdit: {
type: Boolean,
required: true,
},
iconLeft: {
type: Boolean,
},
edit: {
type: Function,
default: () => console.log("not function"),
},
add: {
type: Function,
default: () => console.log("not function"),
},
addleave: {
type: Function,
default: () => console.log("not function"),
},
cancel: {
type: Function,
default: () => console.log("not function"),
},
validate: {
type: Function,
default: () => console.log("not function"),
},
});
const emit = defineEmits([
"update:inputfilter",
"update:inputvisible",
"update:editvisible",
]);
const updateEdit = (value: Boolean) => {
emit("update:editvisible", value);
};
const updateInput = (value: string | number | null) => {
emit("update:inputfilter", value);
};
const updateVisible = (value: []) => {
emit("update:inputvisible", value);
};
const paginationLabel = (start: string, end: string, total: string) => {
return start + "-" + end + " ใน " + total;
};
const checkAddLeave = () => {
props.addleave();
};
const checkAdd = () => {
props.add();
};
const edit = async () => {
updateEdit(!props.editvisible);
props.edit();
};
const cancel = async () => {
updateEdit(!props.editvisible);
props.cancel();
};
const resetFilter = () => {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
emit("update:inputfilter", "");
filterRef.value.focus();
};
</script>
<style lang="scss">
.icon-color {
color: #4154b3;

197
src/modules/03_recruiting/components/TableCan.vue
View file

@ -1,3 +1,95 @@
<script setup lang="ts">
import { ref, useAttrs, watch } from "vue";
import HeaderTop from "@/modules/03_recruiting/components/top.vue";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
const attrs = ref<any>(useAttrs());
const table = ref<any>(null);
const filterRef = ref<any>(null);
const editBtn = ref<boolean>(true);
const initialPagination = ref<Pagination>({
rowsPerPage: 0,
});
const props = defineProps({
inputfilter: String,
iconLeft: Boolean,
name: String,
icon: String,
inputvisible: Array,
editvisible: Boolean,
nameHeader: Boolean,
bottom: Boolean,
boss: Boolean,
addData: {
type: Boolean,
defualt: true,
},
edit: {
type: Function,
default: () => console.log("not function"),
},
add: {
type: Function,
default: () => console.log("not function"),
},
cancel: {
type: Function,
default: () => console.log("not function"),
},
validate: {
type: Function,
default: () => console.log("not function"),
},
editData: {
type: Boolean,
defualt: true,
required: true,
},
});
const emit = defineEmits([
"update:inputfilter",
"update:inputvisible",
"update:editvisible",
]);
watch(props, (count: any, prevCount: any) => {
editBtn.value = props.editvisible;
});
const updateEdit = (value: Boolean) => {
emit("update:editvisible", value);
};
const updateInput = (value: string | number | null) => {
emit("update:inputfilter", value);
};
const updateVisible = (value: []) => {
emit("update:inputvisible", value);
};
const paginationLabel = (start: string, end: string, total: string) => {
return start + "-" + end + " ใน " + total;
};
function clickAdd() {
props.add();
}
function clickEdit() {
props.edit();
}
function clickCancel() {
props.cancel();
}
function resetFilter() {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
emit("update:inputfilter", "");
filterRef.value.focus();
}
</script>
<template>
<div class="q-pb-sm row items-center">
<!-- -->
@ -82,112 +174,7 @@
</template>
</q-table>
</template>
<script setup lang="ts">
import { ref, useAttrs, watch } from "vue";
import HeaderTop from "@/modules/03_recruiting/components/top.vue";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
const attrs = ref<any>(useAttrs());
const table = ref<any>(null);
const filterRef = ref<any>(null);
const editBtn = ref<boolean>(true);
const initialPagination = ref<Pagination>({
rowsPerPage: 0,
});
const props = defineProps({
inputfilter: String,
iconLeft: Boolean,
name: String,
icon: String,
inputvisible: Array,
editvisible: Boolean,
nameHeader: Boolean,
bottom: Boolean,
boss: Boolean,
addData: {
type: Boolean,
defualt: true,
},
edit: {
type: Function,
default: () => console.log("not function"),
},
add: {
type: Function,
default: () => console.log("not function"),
},
cancel: {
type: Function,
default: () => console.log("not function"),
},
validate: {
type: Function,
default: () => console.log("not function"),
},
editData: {
type: Boolean,
defualt: true,
required: true,
},
});
const emit = defineEmits([
"update:inputfilter",
"update:inputvisible",
"update:editvisible",
]);
watch(props, (count: any, prevCount: any) => {
editBtn.value = props.editvisible;
});
const updateEdit = (value: Boolean) => {
emit("update:editvisible", value);
};
const updateInput = (value: string | number | null) => {
emit("update:inputfilter", value);
};
const updateVisible = (value: []) => {
emit("update:inputvisible", value);
};
const paginationLabel = (start: string, end: string, total: string) => {
return start + "-" + end + " ใน " + total;
};
const clickAdd = () => {
props.add();
};
const clickEdit = () => {
props.edit();
};
const clickCancel = () => {
props.cancel();
};
const edit = async () => {
updateEdit(!props.editvisible);
props.edit();
};
const cancel = async () => {
updateEdit(!props.editvisible);
props.cancel();
};
const resetFilter = () => {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
emit("update:inputfilter", "");
filterRef.value.focus();
};
const add = () => {
props.add();
};
</script>
<style lang="scss">
.icon-color {
color: #4154b3;

863
src/modules/03_recruiting/components/TableCandidate.vue
View file

@ -1,3 +1,420 @@
<script setup lang="ts">
import { ref, useAttrs, watch } from "vue";
import { checkPermission } from "@/utils/permissions";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
const route = useRoute();
const router = useRouter();
const $q = useQuasar();
const mixin = useCounterMixin();
const { dateToISO, success, modalError, dialogMessage } = mixin;
const attrs = ref<any>(useAttrs());
const table = ref<any>(null);
const files = ref<File[]>([]);
const filterRef = ref<any>(null);
const examId = ref<string>(route.params.examId.toString());
const selected = ref<string[]>([]);
const { messageError, showLoader, hideLoader } = mixin;
const dateFilter = ref<[Date, Date]>([new Date(), new Date()]); //วันที่เลือกค้นหา
const props = defineProps({
inputfilter: String,
inputvisible: Array,
inputvisibleFilter: String,
editvisible: Boolean,
titleText: String,
optionsFilter: {
type: Array,
defualt: [],
},
selected: {
type: Array,
defualt: [],
},
boss: {
type: Boolean,
defualt: false,
},
saveNoDraft: {
type: Boolean,
defualt: false,
},
history: {
type: Boolean,
defualt: false,
},
paging: {
type: Boolean,
defualt: false,
},
pageSize: {
type: Number,
defualt: 25,
},
page: {
type: Number,
defualt: 1,
},
maxPage: {
type: Number,
defualt: 1,
},
total: {
type: Number,
defualt: 0,
},
nornmalData: {
type: Boolean,
defualt: false,
},
nextPageVisible: {
type: Boolean,
defualt: false,
},
publicData: {
type: Boolean,
defualt: true,
required: false,
},
updateData: {
type: Boolean,
defualt: true,
required: false,
},
statusPayment: {
type: Boolean,
required: false,
},
setSeat: {
type: Boolean,
required: false,
},
publicNoBtn: {
type: Boolean,
defualt: false,
},
save: {
type: Function,
default: () => console.log("not function"),
},
cancel: {
type: Function,
default: () => console.log("not function"),
},
publish: {
type: Function,
default: () => console.log("not function"),
},
validate: {
type: Function,
default: () => console.log("not function"),
},
fetchData: {
type: Function,
default: () => console.log("not function"),
},
});
// Pagination - initial pagination
const initialPagination = ref<any>({
sortBy: null,
descending: false,
page: 1,
rowsPerPage: props.pageSize,
});
// Pagination - update rowsPerPage
async function updatePagination(newPagination: any) {
initialPagination.value = newPagination;
currentPage.value = 1;
}
const emit = defineEmits([
"update:inputfilter",
"update:inputvisible",
"update:editvisible",
"update:titleText",
"update:inputvisibleFilter",
"update:change-page",
]);
const updateInput = async (value: any) => {
await emit("update:inputfilter", value);
};
// search & get new data by keyword
const submitInput = () => {
setTimeout(() => {
emit("update:change-page", 1, initialPagination.value.rowsPerPage);
currentPage.value = 1;
}, 500);
};
const updateVisible = (value: any) => {
emit("update:inputvisible", value);
};
const updateVisibleFilter = (value: any) => {
emit("update:inputvisibleFilter", value);
};
async function uploadFile() {
if (files.value.length > 0) {
if (props.setSeat == false) {
uploadDataSeat();
} else {
uploadDataPoint();
}
} else {
modalError(
$q,
"ไม่สามารถอัปโหลดไฟล์ได้",
"กรุณาเลือกไฟล์ที่ต้องการอัปโหลด"
);
}
}
async function candidateToPlacement() {
$q.dialog({
title: "ยืนยันการนำผู้ผ่านคัดเลือกเข้าสู่ระบบบรรจุ",
message: "ต้องการนำผู้ผ่านคัดเลือกเข้าสู่ระบบบรรจุใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {
await http
.get(config.API.periodExamToPlacement(examId.value))
.then((res) => {
success($q, "นำผู้ผ่านคัดเลือกเข้าสู่ระบบบรรจุ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
router.go(-1);
});
})
.onCancel(() => {})
.onDismiss(() => {});
}
async function uploadDataSeat() {
showLoader();
const formData = new FormData();
formData.append("", files.value[0]);
await http
.put(config.API.periodExamUploadSeat(examId.value), formData)
.then((res) => {
success($q, "อัพเดทที่นั่งสอบสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
files.value = [];
props.fetchData();
});
}
async function uploadDataPoint() {
showLoader();
const formData = new FormData();
formData.append("", files.value[0]);
await http
.put(config.API.periodExamUploadPoint(examId.value), formData)
.then((res) => {
success($q, "อัพเดทคะแนนสอบสำเร็จ");
files.value = [];
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
files.value = [];
props.fetchData();
});
}
async function downloadFile() {
showLoader();
await http
.get(config.API.periodExamDownload(examId.value), {
responseType: "blob",
})
.then((res) => {
const data = res.data;
downloadFilePDF(data, `Candidate__${dateToISO(new Date())}.xlsx`);
})
.catch(async (e) => {
messageError($q, JSON.parse(await e.response.data.text()));
})
.finally(() => {
hideLoader();
});
}
async function downloadFileDetail() {
showLoader();
await http
.get(config.API.periodExamDownloadDetail(examId.value), {
responseType: "blob",
})
.then((res) => {
const data = res.data;
downloadFilePDF(data, `Candidate_Detail_${dateToISO(new Date())}.xlsx`);
})
.catch(async (e) => {
messageError($q, JSON.parse(await e.response.data.text()));
})
.finally(() => {
hideLoader();
});
}
async function checkCandidates() {
var _selected: any[] = [];
selected.value.map((r: any) => {
_selected.push(r.id.toString());
});
showLoader();
await http
.post(config.API.candidateCheckRegisters, {
candidateId: _selected,
})
.then((res) => {
success($q, "ตรวจสอบข้อมูลสำเร็จ");
selected.value = [];
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
props.fetchData();
});
}
async function downloadFilePDF(res: string, fileName: string) {
const link = document.createElement("a");
link.href = window.URL.createObjectURL(
new Blob([res], {
type: "application/vnd.ms-excel",
})
);
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
}
async function candidateCheckProfileDialog() {
dialogMessage(
$q,
"ยืนยันการตรวจสอบข้อมูลนี้หรือไม่?",
"ยืนยันการตรวจสอบข้อมูล",
"mdi-email-check-outline",
"ยืนยัน",
"public",
checkCandidates,
undefined
);
}
function resetFilter() {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
emit("update:inputfilter", "");
filterRef.value.focus();
// clear keyword & get new data
emit("update:change-page", 1, initialPagination.value.rowsPerPage);
currentPage.value = 1;
}
async function downloadFileDashboard() {
showLoader();
await http
.put(
config.API.periodExamDownloadDashboard(examId.value),
{
dateStart: dateToISO(dateFilter.value[0]),
dateEnd: dateToISO(dateFilter.value[1]),
responseType: "blob",
},
{
responseType: "blob",
}
)
.then((res) => {
const data = res.data;
downloadFilePDF(
data,
`Candidate_Dashboard_${dateToISO(new Date())}.xlsx`
);
})
.catch(async (e) => {
messageError($q, JSON.parse(await e.response.data.text()));
})
.finally(() => {
hideLoader();
});
}
async function clickPassExam() {
showLoader();
await http
.get(config.API.exportExamPassExamList(examId.value))
.then((res) => {
window.open(config.API.exportExamPassExamList(examId.value));
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
async function clickCandidateList() {
showLoader();
await http
.get(config.API.exportExamCandidateList(examId.value))
.then((res) => {
window.open(config.API.exportExamCandidateList(examId.value));
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
// Pagination - page & change page & get new data
const currentPage = ref<number>(1);
watch(
[() => currentPage.value, () => initialPagination.value.rowsPerPage],
() => {
emit(
"update:change-page",
currentPage.value,
initialPagination.value.rowsPerPage,
true
);
}
);
</script>
<template>
<div class="q-px-md q-pb-md">
<q-card
@ -235,453 +652,7 @@
</q-table>
</div>
</template>
<script setup lang="ts">
import { ref, useAttrs, watch, watchEffect } from "vue";
import { checkPermission } from "@/utils/permissions";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
const route = useRoute();
const router = useRouter();
const mixin = useCounterMixin();
const { dateToISO, success, modalError, dialogMessage } = mixin;
const $q = useQuasar(); // show dialog
const attrs = ref<any>(useAttrs());
const table = ref<any>(null);
const files = ref<File[]>([]);
const filterRef = ref<any>(null);
const examId = ref<string>(route.params.examId.toString());
const candidateId = ref<string[]>([]);
const selected = ref<string[]>([]);
const { messageError, showLoader, hideLoader } = mixin;
const dateFilter = ref<[Date, Date]>([new Date(), new Date()]); //วันที่เลือกค้นหา
const props = defineProps({
inputfilter: String,
inputvisible: Array,
inputvisibleFilter: String,
editvisible: Boolean,
titleText: String,
optionsFilter: {
type: Array,
defualt: [],
},
selected: {
type: Array,
defualt: [],
},
boss: {
type: Boolean,
defualt: false,
},
saveNoDraft: {
type: Boolean,
defualt: false,
},
history: {
type: Boolean,
defualt: false,
},
paging: {
type: Boolean,
defualt: false,
},
pageSize: {
type: Number,
defualt: 25,
},
page: {
type: Number,
defualt: 1,
},
maxPage: {
type: Number,
defualt: 1,
},
total: {
type: Number,
defualt: 0,
},
nornmalData: {
type: Boolean,
defualt: false,
},
nextPageVisible: {
type: Boolean,
defualt: false,
},
publicData: {
type: Boolean,
defualt: true,
required: false,
},
updateData: {
type: Boolean,
defualt: true,
required: false,
},
statusPayment: {
type: Boolean,
required: false,
},
setSeat: {
type: Boolean,
required: false,
},
publicNoBtn: {
type: Boolean,
defualt: false,
},
save: {
type: Function,
default: () => console.log("not function"),
},
cancel: {
type: Function,
default: () => console.log("not function"),
},
publish: {
type: Function,
default: () => console.log("not function"),
},
validate: {
type: Function,
default: () => console.log("not function"),
},
fetchData: {
type: Function,
default: () => console.log("not function"),
},
});
// Pagination - initial pagination
const initialPagination = ref<any>({
sortBy: null,
descending: false,
page: 1,
rowsPerPage: props.pageSize,
});
// Pagination - page & change page & get new data
const currentPage = ref<number>(1);
watch(
[() => currentPage.value, () => initialPagination.value.rowsPerPage],
() => {
emit(
"update:change-page",
currentPage.value,
initialPagination.value.rowsPerPage,
true
);
}
);
// Pagination - update rowsPerPage
async function updatePagination(newPagination: any) {
initialPagination.value = newPagination;
currentPage.value = 1;
}
const emit = defineEmits([
"update:inputfilter",
"update:inputvisible",
"update:editvisible",
"update:titleText",
"update:inputvisibleFilter",
"update:change-page",
]);
const updateInput = async (value: any) => {
await emit("update:inputfilter", value);
};
// search & get new data by keyword
const submitInput = () => {
setTimeout(() => {
emit("update:change-page", 1, initialPagination.value.rowsPerPage);
currentPage.value = 1;
}, 500);
};
const updateVisible = (value: any) => {
emit("update:inputvisible", value);
};
const updateVisibleFilter = (value: any) => {
emit("update:inputvisibleFilter", value);
};
const uploadFile = async () => {
if (files.value.length > 0) {
if (props.setSeat == false) {
uploadDataSeat();
} else {
uploadDataPoint();
}
} else {
modalError(
$q,
"ไม่สามารถอัปโหลดไฟล์ได้",
"กรุณาเลือกไฟล์ที่ต้องการอัปโหลด"
);
}
};
const candidateToPlacement = async () => {
$q.dialog({
title: "ยืนยันการนำผู้ผ่านคัดเลือกเข้าสู่ระบบบรรจุ",
message: "ต้องการนำผู้ผ่านคัดเลือกเข้าสู่ระบบบรรจุใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {
await http
.get(config.API.periodExamToPlacement(examId.value))
.then((res) => {
success($q, "นำผู้ผ่านคัดเลือกเข้าสู่ระบบบรรจุ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
router.go(-1);
});
})
.onCancel(() => {})
.onDismiss(() => {});
};
const uploadDataSeat = async () => {
showLoader();
const formData = new FormData();
formData.append("", files.value[0]);
await http
.put(config.API.periodExamUploadSeat(examId.value), formData)
.then((res) => {
success($q, "อัพเดทที่นั่งสอบสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
files.value = [];
props.fetchData();
});
};
const uploadDataPoint = async () => {
showLoader();
const formData = new FormData();
formData.append("", files.value[0]);
await http
.put(config.API.periodExamUploadPoint(examId.value), formData)
.then((res) => {
success($q, "อัพเดทคะแนนสอบสำเร็จ");
files.value = [];
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
files.value = [];
props.fetchData();
});
};
const downloadFile = async () => {
showLoader();
await http
.get(config.API.periodExamDownload(examId.value), {
responseType: "blob",
})
.then((res) => {
const data = res.data;
downloadFilePDF(data, `Candidate__${dateToISO(new Date())}.xlsx`);
})
.catch(async (e) => {
messageError($q, JSON.parse(await e.response.data.text()));
})
.finally(() => {
hideLoader();
});
};
const downloadFileDetail = async () => {
showLoader();
await http
.get(config.API.periodExamDownloadDetail(examId.value), {
responseType: "blob",
})
.then((res) => {
const data = res.data;
downloadFilePDF(data, `Candidate_Detail_${dateToISO(new Date())}.xlsx`);
})
.catch(async (e) => {
messageError($q, JSON.parse(await e.response.data.text()));
})
.finally(() => {
hideLoader();
});
};
const checkCandidates = async () => {
var _selected: any[] = [];
selected.value.map((r: any) => {
_selected.push(r.id.toString());
});
showLoader();
await http
.post(config.API.candidateCheckRegisters, {
candidateId: _selected,
})
.then((res) => {
success($q, "ตรวจสอบข้อมูลสำเร็จ");
selected.value = [];
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
props.fetchData();
});
};
const downloadFilePDF = async (res: string, fileName: string) => {
const link = document.createElement("a");
link.href = window.URL.createObjectURL(
new Blob([res], {
type: "application/vnd.ms-excel",
})
);
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
};
const checkSave = () => {
props.validate();
props.save();
};
const publishModal = () => {
props.validate();
const filter = attrs.value.rows.filter((r: any) => r.name == "");
if (filter.length == 0 || attrs.value.rows.length == 0) {
dialogMessage(
$q,
"ต้องการเผยแพร่ข้อมูลนี้หรือไม่?",
"ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที",
"public",
"เผยแพร่",
"public",
props.publish,
undefined
);
}
};
const candidateCheckProfileDialog = async () => {
dialogMessage(
$q,
"ยืนยันการตรวจสอบข้อมูลนี้หรือไม่?",
"ยืนยันการตรวจสอบข้อมูล",
"mdi-email-check-outline",
"ยืนยัน",
"public",
checkCandidates,
undefined
);
};
// const candidateCheckProfile = async () => {
// const filter = attrs.value.rows.filter((r: any) => r.check == true);
// filter.map((r: any) => {
// candidateId.value.push(r.id.toString());
// });
// await checkCandidates();
// };
const resetFilter = () => {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
emit("update:inputfilter", "");
filterRef.value.focus();
// clear keyword & get new data
emit("update:change-page", 1, initialPagination.value.rowsPerPage);
currentPage.value = 1;
};
const downloadFileDashboard = async () => {
showLoader();
await http
.put(
config.API.periodExamDownloadDashboard(examId.value),
{
dateStart: dateToISO(dateFilter.value[0]),
dateEnd: dateToISO(dateFilter.value[1]),
responseType: "blob",
},
{
responseType: "blob",
}
)
.then((res) => {
const data = res.data;
downloadFilePDF(
data,
`Candidate_Dashboard_${dateToISO(new Date())}.xlsx`
);
})
.catch(async (e) => {
messageError($q, JSON.parse(await e.response.data.text()));
})
.finally(() => {
hideLoader();
});
};
const clickPassExam = async () => {
showLoader();
await http
.get(config.API.exportExamPassExamList(examId.value))
.then((res) => {
window.open(config.API.exportExamPassExamList(examId.value));
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const clickCandidateList = async () => {
showLoader();
await http
.get(config.API.exportExamCandidateList(examId.value))
.then((res) => {
window.open(config.API.exportExamCandidateList(examId.value));
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
</script>
<style lang="scss">
.icon-color {
color: #4154b3;

83
src/modules/03_recruiting/components/top.vue
View file

@ -1,44 +1,3 @@
<template>
<div class="flex items-center q-pb-md">
<div class="flex items-center" v-if="header != ''">
<q-icon :name="icon" size="1.5em" color="grey-5" class="q-mr-md" />
<div
class="text-weight-medium text-dark col-12 row items-center text-subtitle1"
>
{{ header }}
</div>
</div>
<div v-if="editData == true">
<div class="q-gutter-sm q-mx-sm" v-if="addData == true">
<q-btn
size="15px"
flat
dense
v-if="edit && !editOnly"
:color="!edit ? 'grey-7' : 'public'"
@click="save"
icon="mdi-content-save-outline"
>
<q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn>
</div>
<div class="q-pl-sm" v-else>
<q-btn
size="12px"
flat
round
v-if="edit && !editOnly"
:color="!edit ? 'grey-7' : 'add'"
@click="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
</div>
</div>
<q-space />
</div>
</template>
<script setup lang="ts">
const props = defineProps({
header: {
@ -105,4 +64,46 @@ const add = () => {
props.add();
};
</script>
<template>
<div class="flex items-center q-pb-md">
<div class="flex items-center" v-if="header != ''">
<q-icon :name="icon" size="1.5em" color="grey-5" class="q-mr-md" />
<div
class="text-weight-medium text-dark col-12 row items-center text-subtitle1"
>
{{ header }}
</div>
</div>
<div v-if="editData == true">
<div class="q-gutter-sm q-mx-sm" v-if="addData == true">
<q-btn
size="15px"
flat
dense
v-if="edit && !editOnly"
:color="!edit ? 'grey-7' : 'public'"
@click="save"
icon="mdi-content-save-outline"
>
<q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn>
</div>
<div class="q-pl-sm" v-else>
<q-btn
size="12px"
flat
round
v-if="edit && !editOnly"
:color="!edit ? 'grey-7' : 'add'"
@click="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
</div>
</div>
<q-space />
</div>
</template>
<style scoped></style>

203
src/modules/03_recruiting/components/top1.vue
View file

@ -1,3 +1,105 @@
<script setup lang="ts">
import { checkPermission } from "@/utils/permissions";
const props = defineProps({
header: {
type: String,
default: "ข้อความ",
required: true,
},
iconAdd: {
type: String,
default: null,
},
icon: {
type: String,
default: "mdi-help",
required: true,
},
edit: {
type: Boolean,
default: true,
required: true,
},
history: {
type: Boolean,
default: true,
required: true,
},
addData: {
type: Boolean,
defualt: false,
},
disable: {
type: Boolean,
defualt: false,
},
historyClick: {
type: Function,
default: () => console.log("not function"),
},
add: {
type: Function,
default: () => console.log("not function"),
},
addleave: {
type: Function,
default: () => console.log("not function"),
},
save: {
type: Function,
default: () => console.log("not function"),
},
deleted: {
type: Function,
default: () => console.log("not function"),
},
cancel: {
type: Function,
default: () => console.log("not function"),
},
changeBtn: {
type: Function,
default: () => console.log("not function"),
},
addEmployee: {
type: Boolean,
defualt: false,
},
});
const emit = defineEmits(["update:edit"]);
const updateEdit = (value: any) => {
emit("update:edit", value);
};
const ClickEdit = () => {
updateEdit(!props.edit);
props.changeBtn();
};
const historyClick = async () => {
await props.historyClick();
};
const ClickCancel = () => {
updateEdit(!props.edit);
props.cancel();
props.changeBtn();
};
const save = () => {
props.save();
};
const add = () => {
props.add();
};
const addleave = () => {
props.addleave();
};
</script>
<template>
<div class="flex items-center">
<div class="flex items-center">
@ -106,106 +208,5 @@
</q-btn>
</div>
</template>
<script setup lang="ts">
import { checkPermission } from "@/utils/permissions";
const props = defineProps({
header: {
type: String,
default: "ข้อความ",
required: true,
},
iconAdd: {
type: String,
default: null,
},
icon: {
type: String,
default: "mdi-help",
required: true,
},
edit: {
type: Boolean,
default: true,
required: true,
},
history: {
type: Boolean,
default: true,
required: true,
},
addData: {
type: Boolean,
defualt: false,
},
disable: {
type: Boolean,
defualt: false,
},
historyClick: {
type: Function,
default: () => console.log("not function"),
},
add: {
type: Function,
default: () => console.log("not function"),
},
addleave: {
type: Function,
default: () => console.log("not function"),
},
save: {
type: Function,
default: () => console.log("not function"),
},
deleted: {
type: Function,
default: () => console.log("not function"),
},
cancel: {
type: Function,
default: () => console.log("not function"),
},
changeBtn: {
type: Function,
default: () => console.log("not function"),
},
addEmployee: {
type: Boolean,
defualt: false,
},
});
const emit = defineEmits(["update:edit"]);
const updateEdit = (value: any) => {
emit("update:edit", value);
};
const ClickEdit = () => {
updateEdit(!props.edit);
props.changeBtn();
};
const historyClick = async () => {
await props.historyClick();
};
const ClickCancel = () => {
updateEdit(!props.edit);
props.cancel();
props.changeBtn();
};
const save = () => {
props.save();
};
const add = () => {
props.add();
};
const addleave = () => {
props.addleave();
};
</script>
<style scoped></style>