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>

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

@ -254,7 +254,7 @@ const defaultEducation = ref<Education>({
educationLevelHighId: null,
});
const changeData = (system: String, val: any) => {
async function changeData(system: String, val: any){
if (system == "information") defaultInformation.value = val;
if (system == "address") defaultAddress.value = val;
if (system == "famliy") defaultFamily.value = val;

279
src/modules/03_recruiting/views/01_compete/Detail.vue
View file

@ -1,139 +1,23 @@
<!-- page:detail page สรรหา -->
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/>
รายชื่อผู้สมัครสอบแข่งขัน {{ name }} ครั้งที่ {{ round }}/{{ year }}
<q-space />
<q-btn
size="md"
icon="mdi-content-save-move-outline"
round
flat
color="indigo"
v-if="rows.length > 0"
@click="candidateToPlacement"
>
<q-tooltip>บรรจุผู้ผ่านการสอบแข่งขัน</q-tooltip>
</q-btn>
<q-btn class="bg-teal-1" icon="mdi-download" round color="primary" flat>
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
<q-menu>
<q-list style="min-width: 100px">
<q-item clickable v-close-popup @click="downloadExam()">
<q-item-section class="text-blue"
>ส่งออกข้อมูลผู้มีสิทธิ์สอบ</q-item-section
>
</q-item>
<q-item clickable v-close-popup @click="downloadPassExam()">
<q-item-section class="text-primary"
>ส่งออกข้อมูลผู้สอบผ่านภาค ก.</q-item-section
>
</q-item>
<q-item clickable v-close-popup @click="downloadPassResultExam()">
<q-item-section class="text-amber-9"
>ส่งออกข้อมูลผู้สอบแข่งขันได้</q-item-section
>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
<q-card flat bordered class="col-12 row q-mt-sm q-pt-sm q-pa-md">
<div class="col-12">
<Table
:count="count"
:pass="pass"
:notpass="notpass"
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:nornmalData="false"
:conclude="true"
>
<template #columns="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="clickDetail(props.row.examID)"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'fullname'">
<div class="row col-12 items-center">
<img
:src="props.row.avatar"
class="q-mr-sm col-4"
style="width: 28px; height: 28px; border-radius: 50%"
/>
<div class="col-4">
<div class="text-weight-medium">
{{ props.row.fullname }}
</div>
<div class="text-weight-light">
{{ props.row.citizenId }}
</div>
</div>
</div>
</div>
<div v-else-if="col.name == 'c1'">
<q-checkbox disable v-model="props.row.c1" />
</div>
<div v-else-if="col.name == 'c2'">
<q-checkbox disable v-model="props.row.c2" />
</div>
<div v-else-if="col.name == 'c3'">
<q-checkbox disable v-model="props.row.c3" />
</div>
<div v-else-if="col.name == 'c4'">
<q-checkbox disable v-model="props.row.c4" />
</div>
<div v-else-if="col.name == 'c5'">
<q-checkbox disable v-model="props.row.c5" />
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</Table>
</div>
</q-card>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import type { RecruitDetailResponse } from "@/modules/03_recruiting/interface/response/Period";
import Table from "@/modules/03_recruiting/components/Table.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
const $q = useQuasar();
import type { RecruitDetailResponse } from "@/modules/03_recruiting/interface/response/Period";
import Table from "@/modules/03_recruiting/components/Table.vue";
const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const mixin = useCounterMixin();
const { messageError, success, showLoader, hideLoader } = mixin;
const year = ref<string>("");
const round = ref<string>("");
const name = ref<string>("");
@ -364,16 +248,11 @@ const columns = ref<QTableProps["columns"]>([
},
]);
onMounted(async () => {
hideLoader();
await fetchData();
});
const clickDetail = (examID: string) => {
function clickDetail(examID: string) {
router.push(`/compete/import/${importId.value}/${examID}`);
};
}
const downloadExam = async () => {
async function downloadExam() {
showLoader();
await http
.get(config.API.exportExam(importId.value), {
@ -392,9 +271,10 @@ const downloadExam = async () => {
.finally(() => {
hideLoader();
});
};
}
const downloadPassExam = async () => {
/** ดาวห์โลหด รายชื่อผู้สอบผ่าน */
async function downloadPassExam() {
showLoader();
await http
.get(config.API.exportPassExam(importId.value), {
@ -413,9 +293,10 @@ const downloadPassExam = async () => {
.finally(() => {
hideLoader();
});
};
}
const downloadPassResultExam = async () => {
/** ดาวห์โลหด สอบแข่งขันได้ */
async function downloadPassResultExam() {
showLoader();
await http
.get(config.API.exportPassResultExam(importId.value), {
@ -434,9 +315,10 @@ const downloadPassResultExam = async () => {
.finally(() => {
hideLoader();
});
};
}
const fetchData = async () => {
/** ดึงข้อมูล */
async function fetchData() {
showLoader();
await http
.post(config.API.getExamResultById(importId.value), {
@ -449,8 +331,6 @@ const fetchData = async () => {
count.value = header.count;
pass.value = header.pass;
notpass.value = header.notpass;
// period information
if (period != null) {
name.value = period.name;
round.value = period.order;
@ -476,9 +356,9 @@ const fetchData = async () => {
.finally(() => {
hideLoader();
});
};
}
const candidateToPlacement = async () => {
async function candidateToPlacement() {
$q.dialog({
title: "ยืนยันการนำผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุ",
message: "ต้องการนำผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุใช่หรือไม่?",
@ -505,7 +385,128 @@ const candidateToPlacement = async () => {
})
.onCancel(() => {})
.onDismiss(() => {});
};
}
onMounted(async () => {
hideLoader();
await fetchData();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/>
รายชื่อผู้สมัครสอบแข่งขัน {{ name }} ครั้งที่ {{ round }}/{{ year }}
<q-space />
<q-btn
size="md"
icon="mdi-content-save-move-outline"
round
flat
color="indigo"
v-if="rows.length > 0"
@click="candidateToPlacement"
>
<q-tooltip>บรรจุผู้ผ่านการสอบแข่งขัน</q-tooltip>
</q-btn>
<q-btn class="bg-teal-1" icon="mdi-download" round color="primary" flat>
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
<q-menu>
<q-list style="min-width: 100px">
<q-item clickable v-close-popup @click="downloadExam()">
<q-item-section class="text-blue"
>ส่งออกข้อมูลผู้มีสิทธิ์สอบ</q-item-section
>
</q-item>
<q-item clickable v-close-popup @click="downloadPassExam()">
<q-item-section class="text-primary"
>ส่งออกข้อมูลผู้สอบผ่านภาค ก.</q-item-section
>
</q-item>
<q-item clickable v-close-popup @click="downloadPassResultExam()">
<q-item-section class="text-amber-9"
>ส่งออกข้อมูลผู้สอบแข่งขันได้</q-item-section
>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
<q-card flat bordered class="col-12 row q-mt-sm q-pt-sm q-pa-md">
<div class="col-12">
<Table
:count="count"
:pass="pass"
:notpass="notpass"
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:nornmalData="false"
:conclude="true"
>
<template #columns="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="clickDetail(props.row.examID)"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'fullname'">
<div class="row col-12 items-center">
<img
:src="props.row.avatar"
class="q-mr-sm col-4"
style="width: 28px; height: 28px; border-radius: 50%"
/>
<div class="col-4">
<div class="text-weight-medium">
{{ props.row.fullname }}
</div>
<div class="text-weight-light">
{{ props.row.citizenId }}
</div>
</div>
</div>
</div>
<div v-else-if="col.name == 'c1'">
<q-checkbox disable v-model="props.row.c1" />
</div>
<div v-else-if="col.name == 'c2'">
<q-checkbox disable v-model="props.row.c2" />
</div>
<div v-else-if="col.name == 'c3'">
<q-checkbox disable v-model="props.row.c3" />
</div>
<div v-else-if="col.name == 'c4'">
<q-checkbox disable v-model="props.row.c4" />
</div>
<div v-else-if="col.name == 'c5'">
<q-checkbox disable v-model="props.row.c5" />
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</Table>
</div>
</q-card>
</template>
<style></style>

266
src/modules/03_recruiting/views/01_compete/DetailEx.vue
View file

@ -1,4 +1,137 @@
<!-- page:detail page สรรหา -->
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const profile_id = ref<string>("");
const birthdate = ref<string>("");
const gender = ref<string>("");
const university = ref<string>("");
const position_name = ref<string>("");
const degree = ref<string>("");
const major = ref<string>("");
const cert_issuedate = ref<string>("");
const examAttribute = ref<string>("");
const examResultinscore = ref<string>("");
const scoreAFull = ref<string>("");
const scoreA = ref<string>("");
const scoreBFull = ref<string>("");
const scoreB = ref<string>("");
const scoreCFull = ref<string>("");
const scoreC = ref<string>("");
const scoreSumFull = ref<string>("");
const scoreSum = ref<string>("");
const examOrder = ref<string>("");
const number = ref<string>("");
const score_expired = ref<string>("");
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;
const examID = ref<string>("62150001");
const prefix = ref<string>("นาย");
const fullname = ref<string>("เกียรติศักดิ์ บัณฑิต");
const importId = ref<string>(route.params.id as string); // Period Import Id
const examId = ref<string>(route.params.examId as string); // เลขประจำตัวสอบ
/** ดึงข้อมูล */
async function fetchData() {
showLoader();
await http
.get(config.API.getExamDetail(importId.value, examId.value))
.then((res) => {
let data = res.data.result;
if (data != null) {
profile_id.value = data.profileID;
examID.value = data.examID;
prefix.value = data.prefix;
fullname.value = data.fullName;
birthdate.value = data.dateOfBirth;
gender.value = data.gender;
degree.value = data.degree;
major.value = data.major;
university.value = data.university;
position_name.value = data.positionName;
cert_issuedate.value = data.certificateIssueDate;
examAttribute.value = data.examAttribute;
number.value = data.number;
examOrder.value = data.examOrder;
score_expired.value = data.scoreExpire;
if (data.scoreResult != null) {
scoreAFull.value = data.scoreResult.scoreAFull;
scoreA.value = data.scoreResult.scoreA;
scoreBFull.value = data.scoreResult.scoreBFull;
scoreB.value = data.scoreResult.scoreB;
scoreCFull.value = data.scoreResult.scoreCFull;
scoreC.value = data.scoreResult.scoreC;
scoreSumFull.value = data.scoreResult.scoreSumFull;
scoreSum.value = data.scoreResult.scoreSum;
examResultinscore.value = data.scoreResult.examResult;
}
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
async function downloadScore() {
showLoader();
await http
.get(config.API.downloadScoreReport(importId.value, examId.value), {
responseType: "blob",
})
.then((res) => {
var a = document.createElement("a");
a.href = URL.createObjectURL(res.data);
a.download = `ผลคะแนน_${examId.value}.pdf`;
// start download
a.click();
})
.catch(async (e) => {
messageError($q, JSON.parse(await e.response.data.text()));
})
.finally(() => {
hideLoader();
});
}
async function downloadCertificate() {
showLoader();
let type = degree.value.includes("บัณฑิต") ? 2 : 1;
await http
.get(config.API.downloadExamReport(importId.value, examId.value, type), {
responseType: "blob",
})
.then((res) => {
var a = document.createElement("a");
a.href = URL.createObjectURL(res.data);
a.download = `เอกสารรับรอง_${examId.value}.pdf`;
// start download
a.click();
})
.catch(async (e) => {
messageError($q, JSON.parse(await e.response.data.text()));
})
.finally(() => {
hideLoader();
});
}
onMounted(async () => {
await fetchData();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
@ -233,138 +366,5 @@
</div>
</q-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const profile_id = ref<string>("");
const birthdate = ref<string>("");
const gender = ref<string>("");
const university = ref<string>("");
const position_name = ref<string>("");
const degree = ref<string>("");
const major = ref<string>("");
const cert_issuedate = ref<string>("");
const examAttribute = ref<string>("");
const examResultinscore = ref<string>("");
const scoreAFull = ref<string>("");
const scoreA = ref<string>("");
const scoreBFull = ref<string>("");
const scoreB = ref<string>("");
const scoreCFull = ref<string>("");
const scoreC = ref<string>("");
const scoreSumFull = ref<string>("");
const scoreSum = ref<string>("");
const examOrder = ref<string>("");
const number = ref<string>("");
const score_expired = ref<string>("");
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;
const examID = ref<string>("62150001");
const prefix = ref<string>("นาย");
const fullname = ref<string>("เกียรติศักดิ์ บัณฑิต");
const importId = ref<string>(route.params.id as string); // Period Import Id
const examId = ref<string>(route.params.examId as string); // เลขประจำตัวสอบ
onMounted(async () => {
await fetchData();
});
const fetchData = async () => {
showLoader();
await http
.get(config.API.getExamDetail(importId.value, examId.value))
.then((res) => {
let data = res.data.result;
if (data != null) {
profile_id.value = data.profileID;
examID.value = data.examID;
prefix.value = data.prefix;
fullname.value = data.fullName;
birthdate.value = data.dateOfBirth;
gender.value = data.gender;
degree.value = data.degree;
major.value = data.major;
university.value = data.university;
position_name.value = data.positionName;
cert_issuedate.value = data.certificateIssueDate;
examAttribute.value = data.examAttribute;
number.value = data.number;
examOrder.value = data.examOrder;
score_expired.value = data.scoreExpire;
if (data.scoreResult != null) {
scoreAFull.value = data.scoreResult.scoreAFull;
scoreA.value = data.scoreResult.scoreA;
scoreBFull.value = data.scoreResult.scoreBFull;
scoreB.value = data.scoreResult.scoreB;
scoreCFull.value = data.scoreResult.scoreCFull;
scoreC.value = data.scoreResult.scoreC;
scoreSumFull.value = data.scoreResult.scoreSumFull;
scoreSum.value = data.scoreResult.scoreSum;
examResultinscore.value = data.scoreResult.examResult;
}
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const downloadScore = async () => {
showLoader();
await http
.get(config.API.downloadScoreReport(importId.value, examId.value), {
responseType: "blob",
})
.then((res) => {
var a = document.createElement("a");
a.href = URL.createObjectURL(res.data);
a.download = `ผลคะแนน_${examId.value}.pdf`;
// start download
a.click();
})
.catch(async (e) => {
messageError($q, JSON.parse(await e.response.data.text()));
})
.finally(() => {
hideLoader();
});
};
const downloadCertificate = async () => {
showLoader();
let type = degree.value.includes("บัณฑิต") ? 2 : 1;
await http
.get(config.API.downloadExamReport(importId.value, examId.value, type), {
responseType: "blob",
})
.then((res) => {
var a = document.createElement("a");
a.href = URL.createObjectURL(res.data);
a.download = `เอกสารรับรอง_${examId.value}.pdf`;
// start download
a.click();
})
.catch(async (e) => {
messageError($q, JSON.parse(await e.response.data.text()));
})
.finally(() => {
hideLoader();
});
};
</script>
<style></style>

179
src/modules/03_recruiting/views/01_compete/ImportData.vue
View file

@ -1,86 +1,7 @@
<!-- page:main page สรรหา -->
<template>
<div class="toptitle text-dark col-12 row items-center">
รายการนำเข้าข้อมูลผู้สมัครสอบแข่งขัน
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
<div>
<Table
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:nornmalData="false"
>
<template #columns="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'" @click="clickEdit(props.row.year)">
{{ props.rowIndex + 1 }}
</div>
<div
v-else-if="col.name == 'name'"
class="table_ellipsis2"
@click="clickEdit(props.row.year)"
>
{{ col.value }}
</div>
<div v-else-if="col.name == 'file'">
<q-btn
size="13px"
flat
class="bg-blue-1 q-ml-xs"
color="blue"
v-if="col.value == null || file == false"
>
<q-icon
name="mdi-file-excel-outline"
size="20px"
class="q-mr-sm"
/>
นำเข้าไฟล์
<q-tooltip>นำเข้าไฟล์ excel</q-tooltip>
</q-btn>
<div v-else>
<q-chip
removable
color="grey-2"
text-color="grey-9"
:label="col.value"
size="14px"
square
icon-remove="mdi-close"
v-model="file"
@remove="remove"
>
<q-tooltip>{{ col.value }}</q-tooltip>
</q-chip>
<q-btn
size="14px"
flat
dense
color="positive"
icon="mdi-content-save-settings-outline"
>
<q-tooltip>บันทึกคะแนนสอบ</q-tooltip>
</q-btn>
</div>
</div>
<div v-else @click="clickEdit(props.row.year)">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</Table>
</div>
</q-card>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { onMounted, ref, watch } from "vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import Table from "@/modules/03_recruiting/components/Table.vue";
@ -178,19 +99,17 @@ const columns = ref<QTableProps["columns"]>([
},
]);
/**
* เปืด dialog digital
* @param id
*/
const rows = ref<any[]>([]);
onMounted(async () => {
await fetchData();
});
const fetchData = () => {};
const clickEdit = (id: string) => {
function clickEdit(id: string) {
router.push(`/compete/import/${id}`);
};
}
const remove = () => {
function remove() {
$q.dialog({
title: "ยืนยันการลบเอกสารข้อมูล",
message: "ต้องการลบเอกสารนี้ใช่หรือไม่?",
@ -207,7 +126,87 @@ const remove = () => {
file.value = true;
})
.onDismiss(() => {});
};
}
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
รายการนำเข้าข้อมูลผู้สมัครสอบแข่งขัน
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
<div>
<Table
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:nornmalData="false"
>
<template #columns="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'" @click="clickEdit(props.row.year)">
{{ props.rowIndex + 1 }}
</div>
<div
v-else-if="col.name == 'name'"
class="table_ellipsis2"
@click="clickEdit(props.row.year)"
>
{{ col.value }}
</div>
<div v-else-if="col.name == 'file'">
<q-btn
size="13px"
flat
class="bg-blue-1 q-ml-xs"
color="blue"
v-if="col.value == null || file == false"
>
<q-icon
name="mdi-file-excel-outline"
size="20px"
class="q-mr-sm"
/>
นำเข้าไฟล์
<q-tooltip>นำเข้าไฟล์ excel</q-tooltip>
</q-btn>
<div v-else>
<q-chip
removable
color="grey-2"
text-color="grey-9"
:label="col.value"
size="14px"
square
icon-remove="mdi-close"
v-model="file"
@remove="remove"
>
<q-tooltip>{{ col.value }}</q-tooltip>
</q-chip>
<q-btn
size="14px"
flat
dense
color="positive"
icon="mdi-content-save-settings-outline"
>
<q-tooltip>บันทึกคะแนนสอบ</q-tooltip>
</q-btn>
</div>
</div>
<div v-else @click="clickEdit(props.row.year)">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</Table>
</div>
</q-card>
</template>
<style></style>

776
src/modules/03_recruiting/views/01_compete/Period.vue
View file

@ -1,4 +1,415 @@
<!-- page:จัดการรอบการสอบ สรรหา -->
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
import type {
ResponseRecruitPeriod,
ResponseHistoryObject,
} from "@/modules/03_recruiting/interface/response/Period";
import Table from "@/modules/03_recruiting/components/Table.vue";
import DialogHeader from "@/components/DialogHeader.vue";
import HistoryTable from "@/components/TableHistory.vue";
const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const { success, dateText, showLoader, hideLoader, messageError } = mixin;
const router = useRouter();
const name = ref<string>("");
const year = ref<number>(new Date().getFullYear() + 543);
const order = ref<number>(1);
const files = ref<any>(null);
const files_score = ref<any>(null);
const files_candidate = ref<any>(null);
const modalAdd = ref<boolean>(false);
const modalScore = ref<boolean>(false);
const modalCandidate = ref<boolean>(false);
const selected_row_id = ref<string>("");
const rowsHistory = ref<ResponseHistoryObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติการนำเข้าข้อมูล"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const modalError = ref<boolean>(false); // modal สำหรับแจ้งเตือนerror
const modalErrorTittle = ref<string>(""); // tittle modal error
const modalErrorDetail = ref<string>(""); // detail modal error
const statusCode = ref<number>();
const filter = ref<string>(""); //search data table
const textTittle = ref<string>("");
const textTittleScore = ref<string>("");
const textTittleCandidate = ref<string>("");
const rows = ref<ResponseRecruitPeriod[]>([]);
const initialPagination = ref<Pagination>({
rowsPerPage: 0,
});
const visibleColumns = ref<String[]>([
"no",
"name",
"order",
"year",
"examCount",
"scoreCount",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "รอบสอบแข่งขัน",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "order",
align: "left",
label: "ครั้งที่",
sortable: true,
field: "order",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "year",
align: "left",
label: "ปีงบประมาณ",
sortable: true,
field: "year",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "examCount",
label: "จำนวนผู้สอบทั้งหมด",
align: "right",
field: "examCount",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "scoreCount",
label: "จำนวนที่บันทึกผลสอบ",
align: "right",
field: "scoreCount",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "description",
align: "left",
label: "รายละเอียด",
sortable: true,
field: "description",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "createdAt",
align: "center",
label: "วันที่ดำเนินการ",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "createdFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: true,
field: "createdFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const visibleColumnsHistory = ref<String[]>([
"description",
"createdAt",
"createdFullName",
]);
/**
* ฟังก์ชันแปลง date เป็นภาษาไทย
* @param value วันที่ type datetime ที่จะแปลงเป็นไทย
*/
function textDate(value: Date) {
return dateText(value);
}
/** ดึงข้อมูล รอบสอบแข่งขัน */
async function fetchData() {
showLoader();
await http
.get(config.API.getCandidates)
.then((res) => {
const data = res.data.result;
let result: ResponseRecruitPeriod[] = [];
if (data.length > 0) {
data.map((r: ResponseRecruitPeriod) => {
if (r.score != null) {
r.scoreCount = r.score.scoreCount;
r.scoreImportDate = r.score.importDate;
}
result.push(r);
});
}
rows.value = result;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/**
* ดาวน์โหลดรายชื่อผู้สอบแข่งขันได้
* @param id รอบสอบเเข่งขัน
*/
function clickPassExam(id: string) {
window.open(config.API.exportPassExamList(id));
}
/**
* ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ
* @param id รอบสอบเเข่งขัน
*/
function clickCandidateList(id: string) {
window.open(config.API.exportCandidateList(id));
}
/**
* รายละเอียด รอบสอบเเข่งขัน
* @param id รอบสอบเเข่งขัน
*/
function clickDetail(id: string) {
router.push(`/compete/import/${id}`);
}
/**
* นำเข้าไฟล์ผลคะแนนสอบอีกครั้ง
* @param id รอบสอบเเข่งขัน
*/
async function clickEdit(id: string) {
modalScore.value = true;
textTittleScore.value = "นำเข้าผลคะแนนสอบแข่งขัน";
selected_row_id.value = id;
}
/**
* นำเข้าไฟล์ผู้สมัครสอบอีกครั้ง
* @param id รอบสอบเเข่งขัน
*/
async function clickUpload(id: string) {
modalCandidate.value = true;
textTittleCandidate.value = "นำเข้าผู้สมัครสอบแข่งขัน";
selected_row_id.value = id;
}
/**
* แก้ไขรอบสอบแข่งขัน
* @param id รอบสอบเเข่งขัน
*/
function clickEditPeriod(id: string) {
router.push(`/compete/period/${id}`);
}
/**
* ประวัติ
* @param id รอบสอบเเข่งขัน
*/
async function clickHistory(id: string) {
modalHistory.value = true;
showLoader();
await http
.get(config.API.getImportHistory(id))
.then((res) => {
const data = res.data.result;
rowsHistory.value = [];
if (data.length > 0) {
data.map((i: ResponseHistoryObject) => {
rowsHistory.value.push({
createdAt: i.createdAt,
createdFullName: i.createdFullName,
createdUserId: i.createdUserId,
id: i.id,
isActive: i.isActive,
lastUpdateFullName: i.lastUpdateFullName,
lastUpdateUserId: i.lastUpdateUserId,
lastUpdatedAt: i.lastUpdatedAt,
description: i.description,
});
});
}
})
.catch((e) => {
modalError.value = true;
modalErrorTittle.value = "ไม่พบประวัติการเผยแพร่";
modalErrorDetail.value = e.response.data.message;
statusCode.value = e.response.data.status;
})
.finally(async () => {
hideLoader();
});
}
/**
* ลบข้อมูล
*
* @param id รอบสอบเเข่งขัน
*/
function clickDelete(id: string) {
$q.dialog({
title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {
showLoader();
await http
.delete(config.API.deleteCandidates(id))
.then((res) => {
success($q, "ลบข้อมูลการสอบสำเร็จ");
fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
})
.onCancel(() => {})
.onDismiss(() => {});
}
/** ไปหน้าเพิ่มรอบสอบแข่งขัน */
function clickAdd() {
router.push({ name: "competePeriodAdd" });
}
/** ปิด dialog */
async function clickClose() {
modalAdd.value = false;
await fetchData();
}
/** ปิด dialog คะเเนน */
async function clickCloseScore() {
modalScore.value = false;
await fetchData();
}
/** ปิด dialog เลือกไฟล์ผู้สมัครสอบแข่งขัน */
async function clickCloseCandidate() {
modalCandidate.value = false;
await fetchData();
}
/** บันทึกข้อมูล เลือกไฟล์ผู้สมัครสอบแข่งขัน */
async function checkSaveCandidate() {
const fd = new FormData();
fd.append("attachment", files_candidate.value[0]);
showLoader();
await http
.post(config.API.uploadCandidates(selected_row_id.value), fd)
.then((res) => {
success($q, "นำเข้าข้อมูลผู้สมัครสอบสำเร็จ");
modalCandidate.value = false;
selected_row_id.value = "";
fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/** บันทึด คะเเนน */
async function checkSaveScore() {
const fd = new FormData();
fd.append("attachment", files_score.value[0]);
showLoader();
await http
.post(config.API.saveScores(selected_row_id.value), fd)
.then((res) => {
success($q, "นำเข้าข้อมูลผลคะแนนสอบสำเร็จ");
modalScore.value = false;
selected_row_id.value = "";
fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/** save data */
async function checkSave() {
const fd = new FormData();
fd.append("attachment", files.value[0]);
fd.append("year", year.value.toString());
fd.append("order", order.value.toString());
fd.append("name", name.value);
showLoader();
await http
.post(config.API.saveCandidates, fd)
.then((res) => {
success($q, "นำเข้าข้อมูลผู้สมัครสอบแข่งขันสำเร็จ");
modalAdd.value = false;
fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/** ดึงข้อมูล เมื่อโหลดหน้า component */
onMounted(async () => {
hideLoader();
await fetchData();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
จัดการรอบสอบแข่งขัน
@ -373,370 +784,5 @@
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { checkPermission } from "@/utils/permissions";
import type { QTableProps } from "quasar";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import type {
ResponseRecruitPeriod,
ResponseHistoryObject,
} from "@/modules/03_recruiting/interface/response/Period";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
import Table from "@/modules/03_recruiting/components/Table.vue";
import DialogHeader from "@/components/DialogHeader.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import HistoryTable from "@/components/TableHistory.vue";
const $q = useQuasar(); // show dialog
const router = useRouter();
const name = ref<string>("");
const year = ref<number>(new Date().getFullYear() + 543);
const order = ref<number>(1);
const mixin = useCounterMixin();
const { success, dateToISO, dateText, showLoader, hideLoader } = mixin;
const files = ref<any>(null);
const files_score = ref<any>(null);
const files_candidate = ref<any>(null);
const modalAdd = ref<boolean>(false);
const modalScore = ref<boolean>(false);
const modalCandidate = ref<boolean>(false);
const selected_row_id = ref<string>("");
const rowsHistory = ref<ResponseHistoryObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติการนำเข้าข้อมูล"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const modalError = ref<boolean>(false); // modal สำหรับแจ้งเตือนerror
const modalErrorTittle = ref<string>(""); // tittle modal error
const modalErrorDetail = ref<string>(""); // detail modal error
const statusCode = ref<number>();
const filter = ref<string>(""); //search data table
const textTittle = ref<string>("");
const { messageError } = mixin;
const textTittleScore = ref<string>("");
const textTittleCandidate = ref<string>("");
const rows = ref<any[]>([]);
const initialPagination = ref<Pagination>({
rowsPerPage: 0,
});
const visibleColumns = ref<String[]>([
"no",
"name",
"order",
"year",
"examCount",
"scoreCount",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "รอบสอบแข่งขัน",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "order",
align: "left",
label: "ครั้งที่",
sortable: true,
field: "order",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "year",
align: "left",
label: "ปีงบประมาณ",
sortable: true,
field: "year",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "examCount",
label: "จำนวนผู้สอบทั้งหมด",
align: "right",
field: "examCount",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "scoreCount",
label: "จำนวนที่บันทึกผลสอบ",
align: "right",
field: "scoreCount",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "description",
align: "left",
label: "รายละเอียด",
sortable: true,
field: "description",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "createdAt",
align: "center",
label: "วันที่ดำเนินการ",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "createdFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: true,
field: "createdFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const visibleColumnsHistory = ref<String[]>([
"description",
"createdAt",
"createdFullName",
]);
onMounted(async () => {
hideLoader();
await fetchData();
});
/**
* ฟังก์ชันแปลง date เป็นภาษาไทย
* @param value วันที่ type datetime ที่จะแปลงเป็นไทย
*/
const textDate = (value: Date) => {
return dateText(value);
};
const fetchData = async () => {
showLoader();
await http
.get(config.API.getCandidates)
.then((res) => {
const data = res.data.result;
let result: ResponseRecruitPeriod[] = [];
if (data.length > 0) {
data.map((r: ResponseRecruitPeriod) => {
if (r.score != null) {
r.scoreCount = r.score.scoreCount;
r.scoreImportDate = r.score.importDate;
}
result.push(r);
});
}
rows.value = result;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const clickPassExam = (id: string) => {
window.open(config.API.exportPassExamList(id));
};
const clickCandidateList = (id: string) => {
window.open(config.API.exportCandidateList(id));
};
const clickDetail = (id: string) => {
router.push(`/compete/import/${id}`);
};
const clickEdit = async (id: string) => {
modalScore.value = true;
textTittleScore.value = "นำเข้าผลคะแนนสอบแข่งขัน";
selected_row_id.value = id;
};
const clickUpload = async (id: string) => {
modalCandidate.value = true;
textTittleCandidate.value = "นำเข้าผู้สมัครสอบแข่งขัน";
selected_row_id.value = id;
};
const clickEditPeriod = (id: string) => {
router.push(`/compete/period/${id}`);
};
const clickHistory = async (id: string) => {
modalHistory.value = true;
showLoader();
await http
.get(config.API.getImportHistory(id))
.then((res) => {
const data = res.data.result;
rowsHistory.value = [];
if (data.length > 0) {
data.map((i: ResponseHistoryObject) => {
rowsHistory.value.push({
createdAt: i.createdAt,
createdFullName: i.createdFullName,
createdUserId: i.createdUserId,
id: i.id,
isActive: i.isActive,
lastUpdateFullName: i.lastUpdateFullName,
lastUpdateUserId: i.lastUpdateUserId,
lastUpdatedAt: i.lastUpdatedAt,
description: i.description,
});
});
}
})
.catch((e) => {
modalError.value = true;
modalErrorTittle.value = "ไม่พบประวัติการเผยแพร่";
modalErrorDetail.value = e.response.data.message;
statusCode.value = e.response.data.status;
})
.finally(async () => {
hideLoader();
});
};
const clickDelete = (id: string) => {
$q.dialog({
title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {
showLoader();
await http
.delete(config.API.deleteCandidates(id))
.then((res) => {
success($q, "ลบข้อมูลการสอบสำเร็จ");
fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
})
.onCancel(() => {})
.onDismiss(() => {});
};
const clickAdd = () => {
router.push({ name: "competePeriodAdd" });
};
const clickClose = async () => {
modalAdd.value = false;
await fetchData();
};
const clickCloseScore = async () => {
modalScore.value = false;
await fetchData();
};
const clickCloseCandidate = async () => {
modalCandidate.value = false;
await fetchData();
};
const checkSaveCandidate = async () => {
const fd = new FormData();
fd.append("attachment", files_candidate.value[0]);
showLoader();
await http
.post(config.API.uploadCandidates(selected_row_id.value), fd)
.then((res) => {
success($q, "นำเข้าข้อมูลผู้สมัครสอบสำเร็จ");
modalCandidate.value = false;
selected_row_id.value = "";
fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const checkSaveScore = async () => {
const fd = new FormData();
fd.append("attachment", files_score.value[0]);
showLoader();
await http
.post(config.API.saveScores(selected_row_id.value), fd)
.then((res) => {
success($q, "นำเข้าข้อมูลผลคะแนนสอบสำเร็จ");
modalScore.value = false;
selected_row_id.value = "";
fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const checkSave = async () => {
const fd = new FormData();
fd.append("attachment", files.value[0]);
fd.append("year", year.value.toString());
fd.append("order", order.value.toString());
fd.append("name", name.value);
showLoader();
await http
.post(config.API.saveCandidates, fd)
.then((res) => {
success($q, "นำเข้าข้อมูลผู้สมัครสอบแข่งขันสำเร็จ");
modalAdd.value = false;
fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
</script>
<style></style>

762
src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
View file

@ -1,4 +1,361 @@
<!-- page:จัดการรอบการสอบแข่งขัน สรรหา -->
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { onMounted, ref, watch } from "vue";
import { useQuasar, QForm } from "quasar";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import type { RequestPeriodCompete } from "@/modules/03_recruiting/interface/request/Period";
import type {
DataOption,
UploadType,
} from "@/modules/02_organizational/interface/index/Main";
const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const router = useRouter();
const route = useRoute();
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
mixin;
const myForm = ref<QForm | null>(null); //form data input
const name = ref<string>("");
const note = ref<string>("");
const editor = ref<string>("");
const announcementExam = ref<boolean>(true);
const fee = ref<number>(0);
const round = ref<number>(1);
const yearly = ref<number>(new Date().getFullYear());
const dateRegister = ref<[Date, Date] | null>(null); //วันที่สมัคร
const datePayment = ref<[Date, Date] | null>(null); //วันที่จ่ายเงิน
const dateAnnouncement = ref<[Date, Date] | null>(null); //วันที่ประกาศ
const dateExam = ref<Date | null>(null); //วันที่สอบ
const dateAnnounce = ref<Date | null>(null); //วันที่ประกาศผล
const positionPathOptions = ref<DataOption[]>([]);
const organizationShortName = ref<DataOption>({ id: "", name: "" });
const organizationName = ref<DataOption>({ id: "", name: "" });
const organizationNameOptions = ref<DataOption[]>([]);
const fileDocDataUpload = ref<File[]>([]);
const fileDocs = ref<UploadType[]>([]);
const fileImgDataUpload = ref<File[]>([]);
const fileImgs = ref<UploadType[]>([]);
const id = ref<string>("");
const edit = ref<boolean>(false);
/** กลับไปหน้าหลัก */
function clickBack() {
router.push({ name: "competePeriod" });
}
/** ดึงรายละเอียด */
async function fetchData() {
showLoader();
await http
.get(config.API.getPeriodById(id.value))
.then((res) => {
const data = res.data.result.periods;
const images = res.data.result.images;
const files = res.data.result.files;
id.value = data.id;
name.value = data.name;
round.value = data.order;
yearly.value = data.year;
fee.value = data.fee;
dateAnnouncement.value =
data.announcementStartDate != null && data.announcementEndDate != null
? [
new Date(data.announcementStartDate),
new Date(data.announcementEndDate),
]
: null;
dateExam.value = data.examDate != null ? new Date(data.examDate) : null;
dateRegister.value =
data.registerStartDate != null && data.registerEndDate != null
? [new Date(data.registerStartDate), new Date(data.registerEndDate)]
: null;
datePayment.value =
data.paymentStartDate != null && data.paymentEndDate != null
? [new Date(data.paymentStartDate), new Date(data.paymentEndDate)]
: null;
editor.value = data.detail;
note.value = data.note;
dateAnnounce.value =
data.announcementDate != null ? new Date(data.announcementDate) : null;
fileDocs.value = files;
fileImgs.value = images;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/** อัพโหลดไฟล์ */
async function fileUploadDoc(files: any) {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
}
/** ลบไฟล์ เอกสาร */
async function fileRemoveDoc(files: any) {
files.forEach((file: any) => {
const index = fileDocDataUpload.value.findIndex(
(x: any) => x.__key == file.__key
);
if (index > -1) {
fileDocDataUpload.value.splice(index, 1);
}
});
}
/** อัพโหลด เอกสาร */
async function uploadDocData() {
const formData = new FormData();
if (fileDocDataUpload.value.length > 0) {
fileDocDataUpload.value.forEach((file: any) => {
formData.append("", file);
});
showLoader();
await http
.put(config.API.periodRecruitDoc(id.value), formData)
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
success($q, "บันทึกข้อมูลสำเร็จ");
clickBack();
});
} else {
success($q, "บันทึกข้อมูลสำเร็จ");
clickBack();
}
}
/** อัปโหลด รูปภาพ */
async function uploadImgData() {
if (fileImgDataUpload.value.length > 0) {
const formData = new FormData();
fileImgDataUpload.value.forEach((file: any) => {
formData.append("", file);
});
showLoader();
await http
.put(config.API.periodRecruitImg(id.value), formData)
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
}
}
/** อัพโหลดไฟล์ immg */
async function fileUploadImg(files: any) {
files.forEach((file: any) => {
fileImgDataUpload.value.push(file);
});
}
/** ฟังชั่น ลบ รูป */
async function fileRemoveImg(files: any) {
files.forEach((file: any) => {
const index = fileImgDataUpload.value.findIndex(
(x: any) => x.__key == file.__key
);
if (index > -1) {
fileImgDataUpload.value.splice(index, 1);
}
});
}
/**
* ดาวห์โหลดไฟล์
* @param path ที่อยู่ url
*/
async function downloadData(path: string) {
window.open(path);
}
/**
* อัพเดต ปี
* @param e ปี
*/
async function updateYear(e: number) {
yearly.value = e;
}
/** ฟังชั่น add edit */
async function checkSave() {
if (myForm.value !== null) {
myForm.value.validate().then(async (success) => {
if (success) {
if (edit.value) {
await editData(id.value);
} else {
await addData();
}
}
});
}
}
/** body ที่บันทึก */
function sendData() {
const valueData: RequestPeriodCompete = {
announcementEndDate:
dateAnnouncement.value !== null
? dateToISO(dateAnnouncement.value[1])
: null,
announcementStartDate:
dateAnnouncement.value !== null
? dateToISO(dateAnnouncement.value[0])
: null,
examDate: dateExam.value !== null ? dateToISO(dateExam.value) : null,
detail: editor.value,
fee: fee.value,
id: "",
name: name.value,
note: note.value,
paymentEndDate:
datePayment.value !== null ? dateToISO(datePayment.value[1]) : null,
paymentStartDate:
datePayment.value !== null ? dateToISO(datePayment.value[0]) : null,
registerEndDate:
dateRegister.value !== null ? dateToISO(dateRegister.value[1]) : null,
registerStartDate:
dateRegister.value !== null ? dateToISO(dateRegister.value[0]) : null,
order: round.value,
year: yearly.value,
announcementDate:
dateAnnounce.value !== null ? dateToISO(dateAnnounce.value) : null,
};
return valueData;
}
/**
* ลบ เอกสารประกอบ
* @param docId id เอกสาร
*/
async function deleteDocData(docId: string) {
showLoader();
await http
.delete(config.API.periodDeleteDoc(docId))
.then(async () => {
await fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
}
/**
* ลบรูปประกอบ
* @param docId id ของรูป
*/
async function deleteImgData(docId: string) {
showLoader();
await http
.delete(config.API.periodDeleteImg(docId))
.then(async () => {
await fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
}
/** เพิ่ม รอบสอบแข่งขัน */
async function addData() {
showLoader();
await http
.post(config.API.savePeriod, sendData())
.then(async (res) => {
const data = res.data.result;
id.value = data.id;
await uploadImgData();
await uploadDocData();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
}
/**
* บันทึก แก้ไขข้อมูล
* @param id
*/
async function editData(id: string) {
showLoader();
await http
.put(config.API.editPeriod(id), sendData())
.then(async () => {
await uploadImgData();
await uploadDocData();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
}
/**
* แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
* @param val ช่วงวันที่
*/
function dateThaiRange(val: [Date, Date]) {
if (val === null) {
return "";
} else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
return `${date2Thai(val[0], true)}`;
} else {
return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
}
}
watch(organizationShortName, (count: DataOption, prevCount: DataOption) => {
organizationNameOptions.value = [];
});
watch(organizationName, (count: DataOption, prevCount: DataOption) => {
positionPathOptions.value = [];
});
onMounted(async () => {
hideLoader();
if (route.params.id != undefined) {
edit.value = true;
id.value = route.params.id.toString();
await fetchData();
} else {
edit.value = false;
}
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
@ -36,6 +393,7 @@
label="รอบการสอบ(ครั้ง)"
dense
lazy-rules
hide-bottom-space
:rules="[(val) => val > 0 || `${'กรุณากรอกรอบการสอบให้ถูกต้อง'}`]"
></q-input>
</div>
@ -56,6 +414,7 @@
<template #trigger>
<q-input
dense
hide-bottom-space
outlined
:rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
:model-value="yearly + 543"
@ -77,6 +436,7 @@
<q-input
outlined
v-model="fee"
hide-bottom-space
type="number"
label="ค่าธรรมเนียม"
lazy-rules
@ -655,405 +1015,5 @@
</q-form>
</q-card>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { onMounted, ref, watch } from "vue";
import { useQuasar, QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRouter, useRoute } from "vue-router";
import type { RequestPeriodCompete } from "@/modules/03_recruiting/interface/request/Period";
import type {
DataOption,
UploadType,
} from "@/modules/02_organizational/interface/index/Main";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const router = useRouter();
const route = useRoute();
const { date2Thai, success, dateToISO, notifyError, showLoader, hideLoader } =
mixin;
const myForm = ref<QForm | null>(null); //form data input
const name = ref<string>("");
const note = ref<string>("");
const editor = ref<string>("");
const announcementExam = ref<boolean>(true);
const fee = ref<number>(0);
const round = ref<number>(1);
const yearly = ref<number>(new Date().getFullYear());
const dateRegister = ref<[Date, Date] | null>(null); //วันที่สมัคร
const datePayment = ref<[Date, Date] | null>(null); //วันที่จ่ายเงิน
const dateAnnouncement = ref<[Date, Date] | null>(null); //วันที่ประกาศ
const dateExam = ref<Date | null>(null); //วันที่สอบ
const dateAnnounce = ref<Date | null>(null); //วันที่ประกาศผล
const positionPathOptions = ref<DataOption[]>([]);
const organizationShortName = ref<DataOption>({ id: "", name: "" });
const organizationName = ref<DataOption>({ id: "", name: "" });
const organizationNameOptions = ref<DataOption[]>([]);
const { messageError } = mixin;
const fileDocDataUpload = ref<File[]>([]);
const fileDocs = ref<UploadType[]>([]);
const fileImgDataUpload = ref<File[]>([]);
const fileImgs = ref<UploadType[]>([]);
const id = ref<string>("");
const pay = ref<string>("");
const edit = ref<boolean>(false);
const columnsPayment = ref<QTableProps["columns"]>([
{
name: "accountNumber",
align: "left",
label: "เลขบัญชี",
sortable: true,
field: "accountNumber",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "bankName",
align: "left",
label: "ธนาคาร",
sortable: true,
field: "bankName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "accountName",
align: "left",
label: "ชื่อบัญชี",
sortable: true,
field: "accountName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
]);
const visibleColumnsPosition = ref<String[]>(["position", "type"]);
const columnsPosition = ref<QTableProps["columns"]>([
{
name: "position",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "type",
align: "left",
label: "ประเภทแบบฟอร์ม",
sortable: true,
field: "type",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
]);
watch(organizationShortName, (count: DataOption, prevCount: DataOption) => {
organizationNameOptions.value = [];
});
watch(organizationName, (count: DataOption, prevCount: DataOption) => {
positionPathOptions.value = [];
});
onMounted(async () => {
hideLoader();
if (route.params.id != undefined) {
edit.value = true;
id.value = route.params.id.toString();
await fetchData();
} else {
edit.value = false;
}
});
const clickBack = () => {
router.push({ name: "competePeriod" });
};
const fetchData = async () => {
showLoader();
await http
.get(config.API.getPeriodById(id.value))
.then((res) => {
const data = res.data.result.periods;
const images = res.data.result.images;
const files = res.data.result.files;
id.value = data.id;
name.value = data.name;
round.value = data.order;
yearly.value = data.year;
fee.value = data.fee;
dateAnnouncement.value =
data.announcementStartDate != null && data.announcementEndDate != null
? [
new Date(data.announcementStartDate),
new Date(data.announcementEndDate),
]
: null;
dateExam.value = data.examDate != null ? new Date(data.examDate) : null;
dateRegister.value =
data.registerStartDate != null && data.registerEndDate != null
? [new Date(data.registerStartDate), new Date(data.registerEndDate)]
: null;
datePayment.value =
data.paymentStartDate != null && data.paymentEndDate != null
? [new Date(data.paymentStartDate), new Date(data.paymentEndDate)]
: null;
editor.value = data.detail;
note.value = data.note;
dateAnnounce.value =
data.announcementDate != null ? new Date(data.announcementDate) : null;
fileDocs.value = files;
fileImgs.value = images;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
};
const fileRemoveDoc = async (files: any) => {
files.forEach((file: any) => {
const index = fileDocDataUpload.value.findIndex(
(x: any) => x.__key == file.__key
);
if (index > -1) {
fileDocDataUpload.value.splice(index, 1);
}
});
};
const uploadDocData = async () => {
const formData = new FormData();
if (fileDocDataUpload.value.length > 0) {
fileDocDataUpload.value.forEach((file: any) => {
formData.append("", file);
});
showLoader();
await http
.put(config.API.periodRecruitDoc(id.value), formData)
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
success($q, "บันทึกข้อมูลสำเร็จ");
clickBack();
});
} else {
success($q, "บันทึกข้อมูลสำเร็จ");
clickBack();
}
};
const uploadImgData = async () => {
if (fileImgDataUpload.value.length > 0) {
const formData = new FormData();
fileImgDataUpload.value.forEach((file: any) => {
formData.append("", file);
});
showLoader();
await http
.put(config.API.periodRecruitImg(id.value), formData)
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
}
};
const fileUploadImg = async (files: any) => {
files.forEach((file: any) => {
fileImgDataUpload.value.push(file);
});
};
const fileRemoveImg = async (files: any) => {
files.forEach((file: any) => {
const index = fileImgDataUpload.value.findIndex(
(x: any) => x.__key == file.__key
);
if (index > -1) {
fileImgDataUpload.value.splice(index, 1);
}
});
};
const downloadData = async (path: string) => {
window.open(path);
};
const updateYear = async (e: number) => {
yearly.value = e;
};
const checkSave = async () => {
if (myForm.value !== null) {
myForm.value.validate().then(async (success) => {
if (success) {
if (edit.value) {
await editData(id.value);
} else {
await addData();
}
}
});
}
};
const sendData = () => {
const valueData: RequestPeriodCompete = {
announcementEndDate:
dateAnnouncement.value !== null
? dateToISO(dateAnnouncement.value[1])
: null,
announcementStartDate:
dateAnnouncement.value !== null
? dateToISO(dateAnnouncement.value[0])
: null,
examDate: dateExam.value !== null ? dateToISO(dateExam.value) : null,
detail: editor.value,
fee: fee.value,
id: "",
name: name.value,
note: note.value,
paymentEndDate:
datePayment.value !== null ? dateToISO(datePayment.value[1]) : null,
paymentStartDate:
datePayment.value !== null ? dateToISO(datePayment.value[0]) : null,
registerEndDate:
dateRegister.value !== null ? dateToISO(dateRegister.value[1]) : null,
registerStartDate:
dateRegister.value !== null ? dateToISO(dateRegister.value[0]) : null,
order: round.value,
year: yearly.value,
announcementDate:
dateAnnounce.value !== null ? dateToISO(dateAnnounce.value) : null,
};
return valueData;
};
const deleteDocData = async (docId: string) => {
showLoader();
await http
.delete(config.API.periodDeleteDoc(docId))
.then(async () => {
await fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
const deleteImgData = async (docId: string) => {
showLoader();
await http
.delete(config.API.periodDeleteImg(docId))
.then(async () => {
await fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
const addData = async () => {
showLoader();
await http
.post(config.API.savePeriod, sendData())
.then(async (res) => {
const data = res.data.result;
id.value = data.id;
await uploadImgData();
await uploadDocData();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
const editData = async (id: string) => {
showLoader();
await http
.put(config.API.editPeriod(id), sendData())
.then(async () => {
await uploadImgData();
await uploadDocData();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
/**
* แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
* @param val ช่วงวันที่
*/
const dateThaiRange = (val: [Date, Date]) => {
if (val === null) {
return "";
} else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
return `${date2Thai(val[0], true)}`;
} else {
return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
}
};
</script>
<style></style>

23
src/modules/03_recruiting/views/01_compete/PeriodStat.vue
View file

@ -1,15 +1,4 @@
<!-- page:จัดการรอบการสอบ สรรหา -->
<template>
<div class="toptitle text-dark col-12 row items-center">
สถิติสมัครสอบแข่งขัน
</div>
<q-card flat bordered class="col-12 q-mt-sm q-px-md q-py-sm">
<iframe
:src="panelUrl"
style="height: 80vh; width: 100%; border: none; overflow: hidden"
></iframe>
</q-card>
</template>
<script setup lang="ts">
import config from "@/app.config";
import { ref, onBeforeMount } from "vue";
@ -21,4 +10,16 @@ onBeforeMount(async () => {
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
สถิติสมัครสอบแข่งขัน
</div>
<q-card flat bordered class="col-12 q-mt-sm q-px-md q-py-sm">
<iframe
:src="panelUrl"
style="height: 80vh; width: 100%; border: none; overflow: hidden"
></iframe>
</q-card>
</template>
<style></style>

296
src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
View file

@ -1,145 +1,32 @@
<!-- page:detail page สรรหา -->
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/>
รายชื่อผู้สมัครสอบรอบ {{ name }} ครั้งที่ {{ round }}/{{ year }}
<q-space />
<q-btn
size="md"
icon="mdi-content-save-move-outline"
round
flat
color="indigo"
v-if="rows.length > 0"
@click="candidateToPlacement"
>
<q-tooltip>บรรจุผู้ผ่านการคัดเลือกผู้พิการ</q-tooltip>
</q-btn>
<q-btn class="bg-teal-1" icon="mdi-download" round color="primary" flat>
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
<q-menu>
<q-list style="min-width: 100px">
<q-item clickable v-close-popup @click="downloadExam()">
<q-item-section class="text-blue"
>ส่งออกข้อมูลผู้มีสิทธิ์สอบ</q-item-section
>
</q-item>
<q-item clickable v-close-popup @click="downloadPassExam()">
<q-item-section class="text-primary"
>ส่งออกข้อมูลผู้สอบผ่านภาค ก.</q-item-section
>
</q-item>
<q-item clickable v-close-popup @click="downloadPassResultExam()">
<q-item-section class="text-amber-9"
>ส่งออกข้อมูลผู้คัดเลือกคนพิการได้</q-item-section
>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
<q-card flat bordered class="col-12 row q-mt-sm q-pt-sm q-pa-md">
<div class="col-12">
<Table
:count="count"
:pass="pass"
:notpass="notpass"
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:nornmalData="false"
:conclude="true"
>
<template #columns="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="clickDetail(props.row.examID)"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'fullname'">
<div class="row col-12 items-center">
<img
:src="props.row.avatar"
class="q-mr-sm col-4"
style="width: 28px; height: 28px; border-radius: 50%"
/>
<div class="col-4">
<div class="text-weight-medium">
{{ props.row.fullname }}
</div>
<div class="text-weight-light">
{{ props.row.citizenId }}
</div>
</div>
</div>
</div>
<div v-else-if="col.name == 'c1'">
<q-checkbox disable v-model="props.row.c1" />
</div>
<div v-else-if="col.name == 'c2'">
<q-checkbox disable v-model="props.row.c2" />
</div>
<div v-else-if="col.name == 'c3'">
<q-checkbox disable v-model="props.row.c3" />
</div>
<div v-else-if="col.name == 'c4'">
<q-checkbox disable v-model="props.row.c4" />
</div>
<div v-else-if="col.name == 'c5'">
<q-checkbox disable v-model="props.row.c5" />
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</Table>
</div>
</q-card>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import type { RecruitDetailResponse } from "@/modules/03_recruiting/interface/response/Period";
import Table from "@/modules/03_recruiting/components/Table.vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { RecruitDetailResponse } from "@/modules/03_recruiting/interface/response/Period";
import Table from "@/modules/03_recruiting/components/Table.vue";
const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const mixin = useCounterMixin();
const { messageError, success, showLoader, hideLoader } = mixin;
const year = ref<string>("2566");
const round = ref<string>("1");
const name = ref<string>("");
const router = useRouter();
const route = useRoute();
const count = ref<number>(0);
const pass = ref<number>(0);
const notpass = ref<number>(0);
const importId = ref<string>(route.params.id as string); // Period Import Id
const mixin = useCounterMixin();
const { messageError, success, showLoader, hideLoader } = mixin;
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([
"examID",
@ -321,17 +208,18 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const rows = ref<any[]>([]);
const clickDetail = (examID: string) => {
const rows = ref<RecruitDetailResponse[]>([]);
/**
* ไปหน้ารายละเอียด จัดการรอบคัดเลือกคนพิการ
* @param examID id รอบ
*/
function clickDetail(examID: string) {
router.push(`/disable/import/${importId.value}/${examID}`);
};
}
onMounted(async () => {
hideLoader();
await fetchData();
});
const downloadExam = async () => {
/** ส่งออกข้อมูลผู้มีสิทธิ์สอบ */
async function downloadExam() {
showLoader();
await http
.get(config.API.exportDisableExam(importId.value), {
@ -350,9 +238,10 @@ const downloadExam = async () => {
.finally(() => {
hideLoader();
});
};
}
const downloadPassExam = async () => {
/** ส่งออกข้อมูลผู้สอบผ่านภาค */
async function downloadPassExam() {
showLoader();
await http
.get(config.API.exportDisablePassExam(importId.value), {
@ -371,9 +260,10 @@ const downloadPassExam = async () => {
.finally(() => {
hideLoader();
});
};
}
const downloadPassResultExam = async () => {
/** ส่งออกข้อมูลผู้คัดเลือกคนพิการได้ */
async function downloadPassResultExam() {
showLoader();
await http
.get(config.API.exportDisablePassResultExam(importId.value), {
@ -392,9 +282,10 @@ const downloadPassResultExam = async () => {
.finally(() => {
hideLoader();
});
};
}
const fetchData = async () => {
/** ดึงข้อมูลรายละเอียด */
async function fetchData() {
showLoader();
await http
.post(config.API.getDisableExamResultById(importId.value), {
@ -428,9 +319,10 @@ const fetchData = async () => {
.finally(() => {
hideLoader();
});
};
}
const candidateToPlacement = async () => {
/** บรรจุผู้ผ่านการคัดเลือกผู้พิการ */
async function candidateToPlacement() {
$q.dialog({
title: "ยืนยันการนำผู้ผ่านคัดเลือกคนพิการเข้าสู่ระบบบรรจุ",
message: "ต้องการนำผู้ผ่านคัดเลือกคนพิการเข้าสู่ระบบบรรจุใช่หรือไม่?",
@ -457,7 +349,129 @@ const candidateToPlacement = async () => {
})
.onCancel(() => {})
.onDismiss(() => {});
};
}
onMounted(async () => {
hideLoader();
await fetchData();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/>
รายชื่อผู้สมัครสอบรอบ {{ name }} ครั้งที่ {{ round }}/{{ year }}
<q-space />
<q-btn
size="md"
icon="mdi-content-save-move-outline"
round
flat
color="indigo"
v-if="rows.length > 0"
@click="candidateToPlacement"
>
<q-tooltip>บรรจุผู้ผ่านการคัดเลือกผู้พิการ</q-tooltip>
</q-btn>
<q-btn class="bg-teal-1" icon="mdi-download" round color="primary" flat>
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
<q-menu>
<q-list style="min-width: 100px">
<q-item clickable v-close-popup @click="downloadExam()">
<q-item-section class="text-blue"
>ส่งออกข้อมูลผู้มีสิทธิ์สอบ</q-item-section
>
</q-item>
<q-item clickable v-close-popup @click="downloadPassExam()">
<q-item-section class="text-primary"
>ส่งออกข้อมูลผู้สอบผ่านภาค ก.</q-item-section
>
</q-item>
<q-item clickable v-close-popup @click="downloadPassResultExam()">
<q-item-section class="text-amber-9"
>ส่งออกข้อมูลผู้คัดเลือกคนพิการได้</q-item-section
>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
<q-card flat bordered class="col-12 row q-mt-sm q-pt-sm q-pa-md">
<div class="col-12">
<Table
:count="count"
:pass="pass"
:notpass="notpass"
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:nornmalData="false"
:conclude="true"
>
<template #columns="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="clickDetail(props.row.examID)"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'fullname'">
<div class="row col-12 items-center">
<img
:src="props.row.avatar"
class="q-mr-sm col-4"
style="width: 28px; height: 28px; border-radius: 50%"
/>
<div class="col-4">
<div class="text-weight-medium">
{{ props.row.fullname }}
</div>
<div class="text-weight-light">
{{ props.row.citizenId }}
</div>
</div>
</div>
</div>
<div v-else-if="col.name == 'c1'">
<q-checkbox disable v-model="props.row.c1" />
</div>
<div v-else-if="col.name == 'c2'">
<q-checkbox disable v-model="props.row.c2" />
</div>
<div v-else-if="col.name == 'c3'">
<q-checkbox disable v-model="props.row.c3" />
</div>
<div v-else-if="col.name == 'c4'">
<q-checkbox disable v-model="props.row.c4" />
</div>
<div v-else-if="col.name == 'c5'">
<q-checkbox disable v-model="props.row.c5" />
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</Table>
</div>
</q-card>
</template>
<style></style>

278
src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue
View file

@ -1,4 +1,139 @@
<!-- page:detail page สรรหา -->
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;
const profile_id = ref<string>("");
const birthdate = ref<string>("");
const gender = ref<string>("");
const university = ref<string>("");
const position_name = ref<string>("");
const degree = ref<string>("");
const major = ref<string>("");
const cert_issuedate = ref<string>("");
const examAttribute = ref<string>("");
const examResultinscore = ref<string>("");
const scoreAFull = ref<string>("");
const scoreA = ref<string>("");
const scoreBFull = ref<string>("");
const scoreB = ref<string>("");
const scoreCFull = ref<string>("");
const scoreC = ref<string>("");
const scoreSumFull = ref<string>("");
const scoreSum = ref<string>("");
const examOrder = ref<string>("");
const number = ref<string>("");
const score_expired = ref<string>("");
const examID = ref<string>("62150001");
const prefix = ref<string>("นาย");
const fullname = ref<string>("เกียรติศักดิ์ บัณฑิต");
const importId = ref<string>(route.params.id as string); // Period Import Id
const examId = ref<string>(route.params.examId as string); // เลขประจำตัวสอบ
async function fetchData() {
showLoader();
await http
.get(config.API.getDisableExamDetail(importId.value, examId.value))
.then((res) => {
let data = res.data.result.data;
if (data != null) {
profile_id.value = data.profileID;
examID.value = data.examID;
prefix.value = data.prefix;
fullname.value = data.fullName;
birthdate.value = data.dateOfBirth;
gender.value = data.gender;
degree.value = data.degree;
major.value = data.major;
university.value = data.university;
position_name.value = data.positionName;
cert_issuedate.value = data.certificateIssueDate;
examAttribute.value = data.examAttribute;
number.value = data.number;
examOrder.value = data.examOrder;
score_expired.value = data.scoreExpire;
if (data.scoreResult != null) {
scoreAFull.value = data.scoreResult.scoreAFull;
scoreA.value = data.scoreResult.scoreA;
scoreBFull.value = data.scoreResult.scoreBFull;
scoreB.value = data.scoreResult.scoreB;
scoreCFull.value = data.scoreResult.scoreCFull;
scoreC.value = data.scoreResult.scoreC;
scoreSumFull.value = data.scoreResult.scoreSumFull;
scoreSum.value = data.scoreResult.scoreSum;
examResultinscore.value = data.scoreResult.examResult;
}
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
async function downloadScore() {
showLoader();
await http
.get(config.API.downloadDisableScoreReport(importId.value, examId.value), {
responseType: "blob",
})
.then((res) => {
var a = document.createElement("a");
a.href = URL.createObjectURL(res.data);
a.download = `ผลคะแนน_${examId.value}.pdf`;
// start download
a.click();
})
.catch(async (e) => {
messageError($q, JSON.parse(await e.response.data.text()));
})
.finally(() => {
hideLoader();
});
}
async function downloadCertificate() {
showLoader();
await http
.get(
config.API.downloadDisableExamReport(importId.value, examId.value, 2),
{
responseType: "blob",
}
)
.then((res) => {
var a = document.createElement("a");
a.href = URL.createObjectURL(res.data);
a.download = `เอกสารรับรอง_${examId.value}.pdf`;
// start download
a.click();
})
.catch(async (e) => {
messageError($q, JSON.parse(await e.response.data.text()));
})
.finally(() => {
hideLoader();
});
}
onMounted(async () => {
await fetchData();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
@ -228,148 +363,5 @@
</div>
</q-card>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;
const date = ref<any>();
const profile_id = ref<string>("");
const birthdate = ref<string>("");
const gender = ref<string>("");
const university = ref<string>("");
const position_name = ref<string>("");
const degree = ref<string>("");
const major = ref<string>("");
const cert_issuedate = ref<string>("");
const examAttribute = ref<string>("");
const checkbox = false;
const remarkText = ref<string>("");
const examResultinscore = ref<string>("");
const scoreAFull = ref<string>("");
const scoreA = ref<string>("");
const scoreBFull = ref<string>("");
const scoreB = ref<string>("");
const scoreCFull = ref<string>("");
const scoreC = ref<string>("");
const scoreSumFull = ref<string>("");
const scoreSum = ref<string>("");
const examOrder = ref<string>("");
const number = ref<string>("");
const score_expired = ref<string>("");
const attachments = ref<any>([
{ fileName: "เอกสารประกอบ 1" },
{ fileName: "เอกสารประกอบ 2" },
]);
const examID = ref<string>("62150001");
const prefix = ref<string>("นาย");
const fullname = ref<string>("เกียรติศักดิ์ บัณฑิต");
const importId = ref<string>(route.params.id as string); // Period Import Id
const examId = ref<string>(route.params.examId as string); // เลขประจำตัวสอบ
onMounted(async () => {
await fetchData();
});
const fetchData = async () => {
showLoader();
await http
.get(config.API.getDisableExamDetail(importId.value, examId.value))
.then((res) => {
let data = res.data.result.data;
if (data != null) {
profile_id.value = data.profileID;
examID.value = data.examID;
prefix.value = data.prefix;
fullname.value = data.fullName;
birthdate.value = data.dateOfBirth;
gender.value = data.gender;
degree.value = data.degree;
major.value = data.major;
university.value = data.university;
position_name.value = data.positionName;
cert_issuedate.value = data.certificateIssueDate;
examAttribute.value = data.examAttribute;
number.value = data.number;
examOrder.value = data.examOrder;
score_expired.value = data.scoreExpire;
if (data.scoreResult != null) {
scoreAFull.value = data.scoreResult.scoreAFull;
scoreA.value = data.scoreResult.scoreA;
scoreBFull.value = data.scoreResult.scoreBFull;
scoreB.value = data.scoreResult.scoreB;
scoreCFull.value = data.scoreResult.scoreCFull;
scoreC.value = data.scoreResult.scoreC;
scoreSumFull.value = data.scoreResult.scoreSumFull;
scoreSum.value = data.scoreResult.scoreSum;
examResultinscore.value = data.scoreResult.examResult;
}
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const downloadScore = async () => {
showLoader();
await http
.get(config.API.downloadDisableScoreReport(importId.value, examId.value), {
responseType: "blob",
})
.then((res) => {
var a = document.createElement("a");
a.href = URL.createObjectURL(res.data);
a.download = `ผลคะแนน_${examId.value}.pdf`;
// start download
a.click();
})
.catch(async (e) => {
messageError($q, JSON.parse(await e.response.data.text()));
})
.finally(() => {
hideLoader();
});
};
const downloadCertificate = async () => {
showLoader();
await http
.get(
config.API.downloadDisableExamReport(importId.value, examId.value, 2),
{
responseType: "blob",
}
)
.then((res) => {
var a = document.createElement("a");
a.href = URL.createObjectURL(res.data);
a.download = `เอกสารรับรอง_${examId.value}.pdf`;
// start download
a.click();
})
.catch(async (e) => {
messageError($q, JSON.parse(await e.response.data.text()));
})
.finally(() => {
hideLoader();
});
};
</script>
<style></style>

734
src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
View file

@ -1,4 +1,382 @@
<!-- page:จัดการรอบการสอบ สรรหา -->
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { checkPermission } from "@/utils/permissions";
import type {
ResponseRecruitPeriod,
ResponseHistoryObject,
} from "@/modules/03_recruiting/interface/response/Period";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
import Table from "@/modules/03_recruiting/components/Table.vue";
import DialogHeader from "@/components/DialogHeader.vue";
import HistoryTable from "@/components/TableHistory.vue";
const $q = useQuasar(); // show dialog
const router = useRouter();
const mixin = useCounterMixin();
const { success, dateText, messageError, showLoader, hideLoader } = mixin;
const name = ref<string>("");
const year = ref<number>(new Date().getFullYear() + 543);
const round = ref<number>(1);
const files = ref<any>(null);
const files_score = ref<any>(null);
const files_candidate = ref<any>(null);
const modalAdd = ref<boolean>(false);
const modalScore = ref<boolean>(false);
const modalCandidate = ref<boolean>(false);
const selected_row_id = ref<string>("");
const rowsHistory = ref<ResponseHistoryObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติการนำเข้าข้อมูล"); //
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const rows = ref<any[]>([]);
const filter = ref<string>(""); //search data table
const textTittle = ref<string>("");
const textTittleScore = ref<string>("");
const textTittleCandidate = ref<string>("");
const initialPagination = ref<Pagination>({
rowsPerPage: 0,
});
const visibleColumns = ref<String[]>([
"no",
"name",
"round",
"year",
"examCount",
"scoreCount",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "รอบคัดเลือกคนพิการ",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "round",
align: "left",
label: "ครั้งที่",
sortable: true,
field: "round",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "year",
align: "left",
label: "ปีงบประมาณ",
sortable: true,
field: "year",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "examCount",
label: "จำนวนผู้สอบทั้งหมด",
align: "right",
field: "examCount",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "scoreCount",
label: "จำนวนที่บันทึกผลสอบ",
align: "right",
field: "scoreCount",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "description",
align: "left",
label: "รายละเอียด",
sortable: true,
field: "description",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "createdAt",
align: "center",
label: "วันที่ดำเนินการ",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "createdFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: true,
field: "createdFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const visibleColumnsHistory = ref<String[]>([
"description",
"createdAt",
"createdFullName",
]);
/** ดาวน์โหลดรายชื่อผู้สอบคัดเลือกคนพิการได้ */
function clickPassExam(id: string) {
window.open(config.API.exportDisablePassExamList(id));
}
/** ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ */
function clickCandidateList(id: string) {
window.open(config.API.exportDisableCandidateList(id));
}
/**
* ฟังก์ชันแปลง date เป็นภาษาไทย
* @param value วันที่ type datetime ที่จะแปลงเป็นไทย
*/
function textDate(value: Date) {
return dateText(value);
}
/** ดึง list ข้อมูล */
async function fetchData() {
showLoader();
await http
.get(config.API.getDisableCandidates)
.then((res) => {
const data = res.data.result;
let result: ResponseRecruitPeriod[] = [];
if (data.length > 0) {
data.map((r: ResponseRecruitPeriod) => {
if (r.score != null) {
r.scoreCount = r.score.scoreCount;
r.scoreImportDate = r.score.importDate;
}
result.push(r);
});
}
rows.value = result;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/**
* ไปหน้ารายละเอียด
* @param id รอบการคัดเลือก
*/
function clickDetail(id: string) {
router.push(`/disable/import/${id}`);
}
/** นำเข้าไฟล์ผลคะแนนสอบ */
async function clickEdit(id: string) {
modalScore.value = true;
textTittleScore.value = "นำเข้าผลการคัดเลือกคนพิการ";
selected_row_id.value = id;
}
/** นำเข้าไฟล์ผู้สมัครสอบ */
async function clickUpload(id: string) {
modalCandidate.value = true;
textTittleCandidate.value = "นำเข้าผู้สมัครคัดเลือกคนพิการ";
selected_row_id.value = id;
}
/** ไปหน้าแก้ไข */
function clickEditPeriod(id: string) {
router.push(`/disable/period/${id}`);
}
/** เปิด ประวัติ */
async function clickHistory(id: string) {
modalHistory.value = true;
showLoader();
await http
.get(config.API.getDisableImportHistory(id))
.then((res) => {
const data = res.data.result;
rowsHistory.value = [];
if (data.length > 0) {
data.map((i: ResponseHistoryObject) => {
rowsHistory.value.push({
createdAt: i.createdAt,
createdFullName: i.createdFullName,
createdUserId: i.createdUserId,
id: i.id,
isActive: i.isActive,
lastUpdateFullName: i.lastUpdateFullName,
lastUpdateUserId: i.lastUpdateUserId,
lastUpdatedAt: i.lastUpdatedAt,
description: i.description,
});
});
}
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
}
/** ลบ รอบการคัดเลือก */
function clickDelete(id: string) {
$q.dialog({
title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {
showLoader();
await http
.delete(config.API.deleteDisableCandidates(id))
.then((res) => {
success($q, "ลบข้อมูลการสอบสำเร็จ");
fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
})
.onCancel(() => {})
.onDismiss(() => {});
}
/** ไปหน้าเพิ่มข้อมูล */
function clickAdd() {
router.push({ name: "disablePeriodAdd" });
}
/** ปิด dialog */
async function clickClose() {
modalAdd.value = false;
await fetchData();
}
/** ปิด dialog คะเเนน */
async function clickCloseScore() {
modalScore.value = false;
await fetchData();
}
/** ปิด dialog เลือกไฟล์ผู้สมัครคัดเลือกคนพิการ */
async function clickCloseCandidate() {
modalCandidate.value = false;
await fetchData();
}
/** บันทึก รอบการคัดเลือก */
async function checkSaveCandidate() {
const fd = new FormData();
fd.append("attachment", files_candidate.value[0]);
showLoader();
await http
.post(config.API.uploadDisableCandidates(selected_row_id.value), fd)
.then((res) => {
success($q, "นำเข้าข้อมูลผู้สมัครสอบสำเร็จ");
modalCandidate.value = false;
selected_row_id.value = "";
fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/** บันทึก คะเเนน*/
async function checkSaveScore() {
const fd = new FormData();
fd.append("attachment", files_score.value[0]);
showLoader();
await http
.post(config.API.saveDisableScores(selected_row_id.value), fd)
.then((res) => {
success($q, "นำเข้าข้อมูลผลคะแนนสอบสำเร็จ");
modalScore.value = false;
selected_row_id.value = "";
fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/** บันทึกข้อมูล */
async function checkSave() {
const fd = new FormData();
fd.append("attachment", files.value[0]);
fd.append("year", year.value.toString());
fd.append("round", round.value.toString());
fd.append("name", name.value);
showLoader();
await http
.post(config.API.saveDisableCandidates, fd)
.then((res) => {
success($q, "นำเข้าข้อมูลผู้สมัครคัดเลือกคนพิการสำเร็จ");
modalAdd.value = false;
fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
onMounted(async () => {
hideLoader();
await fetchData();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
จัดการรอบคัดเลือกคนพิการ
@ -371,361 +749,5 @@
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { checkPermission } from "@/utils/permissions";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import type {
ResponseRecruitPeriod,
ResponseHistoryObject,
} from "@/modules/03_recruiting/interface/response/Period";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
import Table from "@/modules/03_recruiting/components/Table.vue";
import DialogHeader from "@/components/DialogHeader.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import HistoryTable from "@/components/TableHistory.vue";
const $q = useQuasar(); // show dialog
const router = useRouter();
const name = ref<string>("");
const year = ref<number>(new Date().getFullYear() + 543);
const round = ref<number>(1);
const mixin = useCounterMixin();
const { success, dateText, messageError, showLoader, hideLoader } = mixin;
const files = ref<any>(null);
const files_score = ref<any>(null);
const files_candidate = ref<any>(null);
const modalAdd = ref<boolean>(false);
const modalScore = ref<boolean>(false);
const modalCandidate = ref<boolean>(false);
const selected_row_id = ref<string>("");
const rowsHistory = ref<ResponseHistoryObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติการนำเข้าข้อมูล"); //
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const rows = ref<any[]>([]);
const filter = ref<string>(""); //search data table
const textTittle = ref<string>("");
const textTittleScore = ref<string>("");
const textTittleCandidate = ref<string>("");
const initialPagination = ref<Pagination>({
rowsPerPage: 0,
});
const visibleColumns = ref<String[]>([
"no",
"name",
"round",
"year",
"examCount",
"scoreCount",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "รอบคัดเลือกคนพิการ",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "round",
align: "left",
label: "ครั้งที่",
sortable: true,
field: "round",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "year",
align: "left",
label: "ปีงบประมาณ",
sortable: true,
field: "year",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "examCount",
label: "จำนวนผู้สอบทั้งหมด",
align: "right",
field: "examCount",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "scoreCount",
label: "จำนวนที่บันทึกผลสอบ",
align: "right",
field: "scoreCount",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "description",
align: "left",
label: "รายละเอียด",
sortable: true,
field: "description",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "createdAt",
align: "center",
label: "วันที่ดำเนินการ",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "createdFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: true,
field: "createdFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const visibleColumnsHistory = ref<String[]>([
"description",
"createdAt",
"createdFullName",
]);
onMounted(async () => {
hideLoader();
await fetchData();
});
const clickPassExam = (id: string) => {
window.open(config.API.exportDisablePassExamList(id));
};
const clickCandidateList = (id: string) => {
window.open(config.API.exportDisableCandidateList(id));
};
/**
* ฟังก์ชันแปลง date เป็นภาษาไทย
* @param value วันที่ type datetime ที่จะแปลงเป็นไทย
*/
const textDate = (value: Date) => {
return dateText(value);
};
const fetchData = async () => {
showLoader();
await http
.get(config.API.getDisableCandidates)
.then((res) => {
const data = res.data.result;
let result: ResponseRecruitPeriod[] = [];
if (data.length > 0) {
data.map((r: ResponseRecruitPeriod) => {
if (r.score != null) {
r.scoreCount = r.score.scoreCount;
r.scoreImportDate = r.score.importDate;
}
result.push(r);
});
}
rows.value = result;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const clickDetail = (id: string) => {
router.push(`/disable/import/${id}`);
};
const clickEdit = async (id: string) => {
modalScore.value = true;
textTittleScore.value = "นำเข้าผลการคัดเลือกคนพิการ";
selected_row_id.value = id;
};
const clickUpload = async (id: string) => {
modalCandidate.value = true;
textTittleCandidate.value = "นำเข้าผู้สมัครคัดเลือกคนพิการ";
selected_row_id.value = id;
};
const clickEditPeriod = (id: string) => {
router.push(`/disable/period/${id}`);
};
const clickHistory = async (id: string) => {
modalHistory.value = true;
showLoader();
await http
.get(config.API.getDisableImportHistory(id))
.then((res) => {
const data = res.data.result;
rowsHistory.value = [];
if (data.length > 0) {
data.map((i: ResponseHistoryObject) => {
rowsHistory.value.push({
createdAt: i.createdAt,
createdFullName: i.createdFullName,
createdUserId: i.createdUserId,
id: i.id,
isActive: i.isActive,
lastUpdateFullName: i.lastUpdateFullName,
lastUpdateUserId: i.lastUpdateUserId,
lastUpdatedAt: i.lastUpdatedAt,
description: i.description,
});
});
}
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
const clickDelete = (id: string) => {
$q.dialog({
title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
cancel: {
flat: true,
color: "negative",
},
persistent: true,
})
.onOk(async () => {
showLoader();
await http
.delete(config.API.deleteDisableCandidates(id))
.then((res) => {
success($q, "ลบข้อมูลการสอบสำเร็จ");
fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
})
.onCancel(() => {})
.onDismiss(() => {});
};
const clickAdd = () => {
router.push({ name: "disablePeriodAdd" });
};
const clickClose = async () => {
modalAdd.value = false;
await fetchData();
};
const clickCloseScore = async () => {
modalScore.value = false;
await fetchData();
};
const clickCloseCandidate = async () => {
modalCandidate.value = false;
await fetchData();
};
const checkSaveCandidate = async () => {
const fd = new FormData();
fd.append("attachment", files_candidate.value[0]);
showLoader();
await http
.post(config.API.uploadDisableCandidates(selected_row_id.value), fd)
.then((res) => {
success($q, "นำเข้าข้อมูลผู้สมัครสอบสำเร็จ");
modalCandidate.value = false;
selected_row_id.value = "";
fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const checkSaveScore = async () => {
const fd = new FormData();
fd.append("attachment", files_score.value[0]);
showLoader();
await http
.post(config.API.saveDisableScores(selected_row_id.value), fd)
.then((res) => {
success($q, "นำเข้าข้อมูลผลคะแนนสอบสำเร็จ");
modalScore.value = false;
selected_row_id.value = "";
fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const checkSave = async () => {
const fd = new FormData();
fd.append("attachment", files.value[0]);
fd.append("year", year.value.toString());
fd.append("round", round.value.toString());
fd.append("name", name.value);
showLoader();
await http
.post(config.API.saveDisableCandidates, fd)
.then((res) => {
success($q, "นำเข้าข้อมูลผู้สมัครคัดเลือกคนพิการสำเร็จ");
modalAdd.value = false;
fetchData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
</script>
<style></style>

686
src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
View file

@ -1,4 +1,362 @@
<!-- page:จัดการรอบคัดเลือกคนพิการ สรรหา -->
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useQuasar, QForm } from "quasar";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import type { RequestPeriodDisable } from "@/modules/03_recruiting/interface/request/Period";
import type {
DataOption,
UploadType,
} from "@/modules/02_organizational/interface/index/Main";
const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const router = useRouter();
const route = useRoute();
const {
date2Thai,
success,
dateToISO,
notifyError,
messageError,
showLoader,
hideLoader,
} = mixin;
const myForm = ref<QForm | null>(null); //form data input
const name = ref<string>("");
const note = ref<string>("");
const editor = ref<string>("");
const announcementExam = ref<boolean>(true);
const fee = ref<number>(0);
const round = ref<number>(1);
const yearly = ref<number>(new Date().getFullYear());
const dateRegister = ref<[Date, Date] | null>(null); //วันที่สมัคร
const datePayment = ref<[Date, Date] | null>(null); //วันที่จ่ายเงิน
const dateAnnouncement = ref<[Date, Date] | null>(null); //วันที่ประกาศ
const dateExam = ref<Date | null>(null); //วันที่สอบ
const dateAnnounce = ref<Date | null>(null); //วันที่ประกาศผล
const positionPathOptions = ref<DataOption[]>([]);
const organizationShortName = ref<DataOption>({ id: "", name: "" });
const organizationName = ref<DataOption>({ id: "", name: "" });
const organizationNameOptions = ref<DataOption[]>([]);
const fileDocDataUpload = ref<File[]>([]);
const fileDocs = ref<UploadType[]>([]);
const fileImgDataUpload = ref<File[]>([]);
const fileImgs = ref<UploadType[]>([]);
const id = ref<string>("");
const edit = ref<boolean>(false);
function clickBack() {
router.push({ name: "disablePeriod" });
}
/** ดึงข้อมูล */
async function fetchData() {
showLoader();
await http
.get(config.API.getDisablePeriodById(id.value))
.then((res) => {
const data = res.data.result;
id.value = data.id;
name.value = data.name;
round.value = data.round;
yearly.value = data.year;
fee.value = data.fee;
dateAnnouncement.value =
data.announcementStartDate != null && data.announcementEndDate != null
? [
new Date(data.announcementStartDate),
new Date(data.announcementEndDate),
]
: null;
dateExam.value = data.examDate != null ? new Date(data.examDate) : null;
dateRegister.value =
data.registerStartDate != null && data.registerEndDate != null
? [new Date(data.registerStartDate), new Date(data.registerEndDate)]
: null;
datePayment.value =
data.paymentStartDate != null && data.paymentEndDate != null
? [new Date(data.paymentStartDate), new Date(data.paymentEndDate)]
: null;
editor.value = data.detail;
note.value = data.note;
dateAnnounce.value =
data.announcementDate != null ? new Date(data.announcementDate) : null;
fileDocs.value = data.documents;
fileImgs.value = data.images;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/**
* อัพเดต ปี
* @param e ปี
*/
async function updateYear(e: number) {
yearly.value = e;
}
/** ฟังชั่น save */
async function checkSave() {
if (myForm.value !== null) {
myForm.value.validate().then(async (success) => {
if (success) {
if (edit.value) {
await editData(id.value);
} else {
await addData();
}
}
});
}
}
/** save ข้อมูล */
function sendData() {
const valueData: RequestPeriodDisable = {
announcementEndDate:
dateAnnouncement.value !== null
? dateToISO(dateAnnouncement.value[1])
: null,
announcementStartDate:
dateAnnouncement.value !== null
? dateToISO(dateAnnouncement.value[0])
: null,
examDate: dateExam.value !== null ? dateToISO(dateExam.value) : null,
detail: editor.value,
fee: fee.value,
id: "",
name: name.value,
note: note.value,
paymentEndDate:
datePayment.value !== null ? dateToISO(datePayment.value[1]) : null,
paymentStartDate:
datePayment.value !== null ? dateToISO(datePayment.value[0]) : null,
registerEndDate:
dateRegister.value !== null ? dateToISO(dateRegister.value[1]) : null,
registerStartDate:
dateRegister.value !== null ? dateToISO(dateRegister.value[0]) : null,
round: round.value,
year: yearly.value,
announcementDate:
dateAnnounce.value !== null ? dateToISO(dateAnnounce.value) : null,
};
return valueData;
}
/** บันทึก เพิ่มข้อมูล */
async function addData() {
showLoader();
await http
.post(config.API.saveDisablePeriod, sendData())
.then(async (res) => {
const data = res.data.result;
id.value = data;
success($q, "บันทึกรอบการสอบคนพิการสำเร็จ");
await uploadImgData();
await uploadDocData();
clickBack();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
}
/**
* บันทึก แก้ไขข้อมูล
* @param id id รอบการสอบคนพิการ
*/
async function editData(id: string) {
showLoader();
await http
.put(config.API.editDisablePeriod(id), sendData())
.then(async () => {
success($q, "แก้ไขรอบการสอบคนพิการสำเร็จ");
await uploadImgData();
await uploadDocData();
clickBack();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
}
/**
* บันทึกไฟล์ภาพ
* @param files ไฟล์ภาพ
*/
async function fileUploadImg(files: any) {
files.forEach((file: any) => {
fileImgDataUpload.value.push(file);
});
}
/**
* ลบไฟล์ภาพ
* @param files ไฟล์ภาพ
*/
async function fileRemoveImg(files: any) {
files.forEach((file: any) => {
const index = fileImgDataUpload.value.findIndex(
(x: any) => x.__key == file.__key
);
if (index > -1) {
fileImgDataUpload.value.splice(index, 1);
}
});
}
/** อัปโหลด ภาพ */
async function uploadImgData() {
if (fileImgDataUpload.value.length > 0) {
const formData = new FormData();
fileImgDataUpload.value.forEach((file: any) => {
formData.append("", file);
});
showLoader();
await http
.put(config.API.periodExamImg(id.value), formData)
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
}
}
/**
* ลบ เอกสาร
* @param docId id เอกสาร
*/
async function deleteDocData(docId: string) {
const params = {
documentId: docId,
};
showLoader();
await http
.delete(config.API.periodExamDoc(id.value.toString()), {
params,
})
.then((res) => {
const data = res.data.result;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
hideLoader();
});
}
/**
* ดาวห์โหลด
* @param path url
*/
async function downloadData(path: string) {
window.open(path);
}
/**
* อัปโหลดไฟล์เอกสาร
* @param files ไฟล์เอกสาร
*/
async function fileUploadDoc(files: any) {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
}
/**
* ลบไฟล์เอกสาร
* @param files ไฟล์
*/
async function fileRemoveDoc(files: any) {
files.forEach((file: any) => {
const index = fileDocDataUpload.value.findIndex(
(x: any) => x.__key == file.__key
);
if (index > -1) {
fileDocDataUpload.value.splice(index, 1);
}
});
}
/** อัปโหลดเอกสาร */
async function uploadDocData() {
const formData = new FormData();
if (fileDocDataUpload.value.length > 0) {
fileDocDataUpload.value.forEach((file: any) => {
formData.append("", file);
});
showLoader();
await http
.put(config.API.periodExamDoc(id.value), formData)
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
} else {
clickBack();
}
}
/**
* แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
* @param val ช่วงวันที่
*/
function dateThaiRange(val: [Date, Date] | null) {
if (val === null) {
return "";
} else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
return `${date2Thai(val[0], true)}`;
} else {
return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
}
}
watch(organizationShortName, (count: DataOption, prevCount: DataOption) => {
organizationNameOptions.value = [];
});
watch(organizationName, (count: DataOption, prevCount: DataOption) => {
positionPathOptions.value = [];
});
onMounted(async () => {
if (route.params.id != undefined) {
edit.value = true;
id.value = route.params.id.toString();
hideLoader();
await fetchData();
} else {
edit.value = false;
}
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
@ -659,333 +1017,5 @@
</q-form>
</q-card>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { onMounted, ref, watch } from "vue";
import { useQuasar, QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRouter, useRoute } from "vue-router";
import type { RequestPeriodDisable } from "@/modules/03_recruiting/interface/request/Period";
import type {
DataOption,
UploadType,
} from "@/modules/02_organizational/interface/index/Main";
import http from "@/plugins/http";
import config from "@/app.config";
const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const router = useRouter();
const route = useRoute();
const {
date2Thai,
success,
dateToISO,
notifyError,
messageError,
showLoader,
hideLoader,
} = mixin;
const myForm = ref<QForm | null>(null); //form data input
const name = ref<string>("");
const note = ref<string>("");
const editor = ref<string>("");
const announcementExam = ref<boolean>(true);
const fee = ref<number>(0);
const round = ref<number>(1);
const yearly = ref<number>(new Date().getFullYear());
const dateRegister = ref<[Date, Date] | null>(null); //วันที่สมัคร
const datePayment = ref<[Date, Date] | null>(null); //วันที่จ่ายเงิน
const dateAnnouncement = ref<[Date, Date] | null>(null); //วันที่ประกาศ
const dateExam = ref<Date | null>(null); //วันที่สอบ
const dateAnnounce = ref<Date | null>(null); //วันที่ประกาศผล
const positionPathOptions = ref<DataOption[]>([]);
const organizationShortName = ref<DataOption>({ id: "", name: "" });
const organizationName = ref<DataOption>({ id: "", name: "" });
const organizationNameOptions = ref<DataOption[]>([]);
const examTypeOptions = [
{ name: "ทั่วไป", id: "normol" },
{ name: "แพทย์", id: "docter" },
];
const category = ref<string>("");
const categoryOptions = [
{ name: "สำนักอนามัย", id: "hygiene" },
{ name: "สำนักการแพทย์", id: "physician" },
{ name: "สำนักผังเมือง", id: "city" },
{ name: "สำนักวัฒนธรรม กีฬา และการท่องเที่ยว", id: "culture" },
];
const fileDocDataUpload = ref<File[]>([]);
const fileDocs = ref<UploadType[]>([]);
const fileImgDataUpload = ref<File[]>([]);
const fileImgs = ref<UploadType[]>([]);
const id = ref<string>("");
const edit = ref<boolean>(false);
watch(organizationShortName, (count: DataOption, prevCount: DataOption) => {
organizationNameOptions.value = [];
});
watch(organizationName, (count: DataOption, prevCount: DataOption) => {
positionPathOptions.value = [];
});
onMounted(async () => {
if (route.params.id != undefined) {
edit.value = true;
id.value = route.params.id.toString();
hideLoader();
await fetchData();
} else {
edit.value = false;
}
});
const clickBack = () => {
router.push({ name: "disablePeriod" });
};
const fetchData = async () => {
showLoader();
await http
.get(config.API.getDisablePeriodById(id.value))
.then((res) => {
const data = res.data.result;
id.value = data.id;
name.value = data.name;
round.value = data.round;
yearly.value = data.year;
fee.value = data.fee;
dateAnnouncement.value =
data.announcementStartDate != null && data.announcementEndDate != null
? [
new Date(data.announcementStartDate),
new Date(data.announcementEndDate),
]
: null;
dateExam.value = data.examDate != null ? new Date(data.examDate) : null;
dateRegister.value =
data.registerStartDate != null && data.registerEndDate != null
? [new Date(data.registerStartDate), new Date(data.registerEndDate)]
: null;
datePayment.value =
data.paymentStartDate != null && data.paymentEndDate != null
? [new Date(data.paymentStartDate), new Date(data.paymentEndDate)]
: null;
editor.value = data.detail;
note.value = data.note;
dateAnnounce.value =
data.announcementDate != null ? new Date(data.announcementDate) : null;
fileDocs.value = data.documents;
fileImgs.value = data.images;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const updateYear = async (e: number) => {
yearly.value = e;
};
const checkSave = async () => {
if (myForm.value !== null) {
myForm.value.validate().then(async (success) => {
if (success) {
if (edit.value) {
await editData(id.value);
} else {
await addData();
}
}
});
}
};
const sendData = () => {
const valueData: RequestPeriodDisable = {
announcementEndDate:
dateAnnouncement.value !== null
? dateToISO(dateAnnouncement.value[1])
: null,
announcementStartDate:
dateAnnouncement.value !== null
? dateToISO(dateAnnouncement.value[0])
: null,
examDate: dateExam.value !== null ? dateToISO(dateExam.value) : null,
detail: editor.value,
fee: fee.value,
id: "",
name: name.value,
note: note.value,
paymentEndDate:
datePayment.value !== null ? dateToISO(datePayment.value[1]) : null,
paymentStartDate:
datePayment.value !== null ? dateToISO(datePayment.value[0]) : null,
registerEndDate:
dateRegister.value !== null ? dateToISO(dateRegister.value[1]) : null,
registerStartDate:
dateRegister.value !== null ? dateToISO(dateRegister.value[0]) : null,
round: round.value,
year: yearly.value,
announcementDate:
dateAnnounce.value !== null ? dateToISO(dateAnnounce.value) : null,
};
return valueData;
};
const addData = async () => {
showLoader();
await http
.post(config.API.saveDisablePeriod, sendData())
.then(async (res) => {
const data = res.data.result;
id.value = data;
success($q, "บันทึกรอบการสอบคนพิการสำเร็จ");
await uploadImgData();
await uploadDocData();
clickBack();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
const editData = async (id: string) => {
showLoader();
await http
.put(config.API.editDisablePeriod(id), sendData())
.then(async () => {
success($q, "แก้ไขรอบการสอบคนพิการสำเร็จ");
await uploadImgData();
await uploadDocData();
clickBack();
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
const fileUploadImg = async (files: any) => {
files.forEach((file: any) => {
fileImgDataUpload.value.push(file);
});
};
const fileRemoveImg = async (files: any) => {
files.forEach((file: any) => {
const index = fileImgDataUpload.value.findIndex(
(x: any) => x.__key == file.__key
);
if (index > -1) {
fileImgDataUpload.value.splice(index, 1);
}
});
};
const uploadImgData = async () => {
if (fileImgDataUpload.value.length > 0) {
const formData = new FormData();
fileImgDataUpload.value.forEach((file: any) => {
formData.append("", file);
});
showLoader();
await http
.put(config.API.periodExamImg(id.value), formData)
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
}
};
const deleteDocData = async (docId: string) => {
const params = {
documentId: docId,
};
showLoader();
await http
.delete(config.API.periodExamDoc(id.value.toString()), {
params,
})
.then((res) => {
const data = res.data.result;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
hideLoader();
});
};
const downloadData = async (path: string) => {
window.open(path);
};
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
};
const fileRemoveDoc = async (files: any) => {
files.forEach((file: any) => {
const index = fileDocDataUpload.value.findIndex(
(x: any) => x.__key == file.__key
);
if (index > -1) {
fileDocDataUpload.value.splice(index, 1);
}
});
};
const uploadDocData = async () => {
const formData = new FormData();
if (fileDocDataUpload.value.length > 0) {
fileDocDataUpload.value.forEach((file: any) => {
formData.append("", file);
});
showLoader();
await http
.put(config.API.periodExamDoc(id.value), formData)
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
} else {
clickBack();
}
};
/**
* แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
* @param val ช่วงวันที่
*/
const dateThaiRange = (val: [Date, Date] | null) => {
if (val === null) {
return "";
} else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
return `${date2Thai(val[0], true)}`;
} else {
return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
}
};
</script>
<style></style>

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

@ -1,4 +1,284 @@
<!-- step กรอกข้อมูล -->
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import Profile from "@/modules/03_recruiting/components/Profile.vue";
import {
defaultInformation,
defaultOccupation,
defaultContact,
defaultAddress,
defaultEducation,
} from "@/modules/03_recruiting/interface/index/Main";
const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const {
success,
dateToISO,
messageError,
showLoader,
hideLoader,
notifyError,
} = mixin;
const examId = ref<string>(route.params.examId.toString());
const candidateId = ref<string>(route.params.candidateId.toString());
const modal = ref<boolean>(false);
const modalReverseOfficer = ref<boolean>(false);
const approve = ref<string>("1");
const reason = ref<string>("");
const formInformation = ref<any>({});
const formAddress = ref<any>({});
const formEducation = ref<any>({});
const formOccupation = ref<any>({});
const formContact = ref<any>({});
const status = ref<string>("");
const rejectDetail = ref<string>("");
/** ดึงข้อมูลสถานะ */
async function fetchStatus() {
showLoader();
await http
.get(config.API.candidateId(candidateId.value))
.then((res) => {
const data = res.data.result;
status.value = data.status;
rejectDetail.value = data.rejectDetail;
console.log(rejectDetail.value);
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
}
/** ยืนยัน ตรวจสอบข้อมูลสำเร็จ*/
async function confirm(status: boolean, reason: string) {
showLoader();
await http
.put(config.API.candidateCheckRegister(candidateId.value), {
status: status,
reason: reason,
})
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
success($q, "ตรวจสอบข้อมูลสำเร็จ");
router.push(`/qualify/manage/${examId.value}`);
});
}
/** ปฏิเสธ ตรวจสอบข้อมูลสำเร็จ */
async function reject(reason: string) {
showLoader();
await http
.put(config.API.candidateRejectRegister(candidateId.value), {
reason: reason,
})
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
success($q, "ตรวจสอบข้อมูลสำเร็จ");
router.push(`/qualify/manage/${examId.value}`);
});
}
/** บันทึกตรวจสอบ */
function checkSaveReverse() {
rejectReverse(reason.value);
}
/** save ข้อมูล */
function checkSave() {
if (approve.value == "1") {
confirm(true, "");
} else if (approve.value == "2") {
confirm(false, reason.value);
} else {
reject(reason.value);
}
}
/** บันทึกตรวจสอบ */
async function rejectReverse(reason: string) {
showLoader();
await http
.put(config.API.candidateCheckRegisterReject(candidateId.value), {
reason: reason,
})
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
success($q, "สำเร็จ");
router.push(`/qualify/manage/${examId.value}`);
});
}
/** dialog ย้อนกลับให้เจ้าหน้าที่ตรวจสอบ*/
function modalReverse() {
modalReverseOfficer.value = true;
}
/** ปิด dialog ย้อนกลับให้เจ้าหน้าที่ตรวจสอบ */
function closeReverse() {
modalReverseOfficer.value = false;
}
/** ปิด dialog */
function close() {
modal.value = false;
}
/** บันทึกข้อมูล คุณสมบัติผู้สมัครสอบรอบคัดเลือก */
async function clickSave() {
await formInformation.value.validate().then(async (suc: boolean) => {
if (suc) {
await formAddress.value.validate().then(async (suc: boolean) => {
if (suc) {
await formEducation.value.validate().then(async (suc: boolean) => {
if (suc) {
await formOccupation.value
.validate()
.then(async (suc: boolean) => {
if (suc) {
await formContact.value
.validate()
.then(async (suc: boolean) => {
if (suc) {
showLoader();
await http
.post(config.API.candidateId(candidateId.value), {
prefixId: defaultInformation.value.prefixId,
lastName: defaultInformation.value.lastname,
dateOfBirth:
defaultInformation.value.birthDate == null
? null
: dateToISO(
defaultInformation.value.birthDate
),
citizenId: defaultInformation.value.cardid,
firstName: defaultInformation.value.firstname,
religionId: defaultInformation.value.religionId,
nationality: defaultInformation.value.nationality,
email: defaultInformation.value.email,
mobilePhone: defaultInformation.value.phone,
telephone: defaultInformation.value.tel,
knowledge: defaultInformation.value.knowledge,
occupationOrg: defaultOccupation.value.org,
occupationPile: defaultOccupation.value.pile,
occupationGroup: defaultOccupation.value.group,
occupationSalary: defaultOccupation.value.salary,
occupationPosition:
defaultOccupation.value.position,
occupationPositionType:
defaultOccupation.value.positionType,
occupationTelephone: defaultOccupation.value.tel,
registAddress: defaultAddress.value.address,
currentAddress: defaultAddress.value.addressC,
registProvinceId: defaultAddress.value.provinceId,
currentProvinceId:
defaultAddress.value.provinceIdC,
registDistrictId: defaultAddress.value.districtId,
currentDistrictId:
defaultAddress.value.districtIdC,
registSubDistrictId:
defaultAddress.value.subdistrictId,
currentSubDistrictId:
defaultAddress.value.subdistrictIdC,
registZipCode: defaultAddress.value.code,
currentZipCode: defaultAddress.value.codeC,
registSame:
defaultAddress.value.same == "1"
? true
: defaultAddress.value.same == "0"
? false
: null,
educationLevelExamId:
defaultEducation.value.educationLevelExamId,
educationName:
defaultEducation.value.educationName,
educationMajor:
defaultEducation.value.educationMajor,
educationLocation:
defaultEducation.value.educationLocation,
educationType:
defaultEducation.value.educationType,
educationEndDate:
defaultEducation.value.educationEndDate == null
? null
: dateToISO(
defaultEducation.value.educationEndDate
),
educationScores:
defaultEducation.value.educationScores,
educationLevelHighId:
defaultEducation.value.educationLevelHighId,
contactPrefixId:
defaultContact.value.contactPrefixId,
contactFirstname:
defaultContact.value.contactFirstname,
contactLastname:
defaultContact.value.contactLastname,
contactRelations:
defaultContact.value.contactRelations,
contactTel: defaultContact.value.contactTel,
})
.then(async () => {
success($q, "บันทึกข้อมูลส่วนตัวสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
} else {
notifyError($q, "กรุณากรอกข้อมูลให้ครบถ้วน");
}
});
} else {
notifyError($q, "กรุณากรอกข้อมูลให้ครบถ้วน");
}
});
} else {
notifyError($q, "กรุณากรอกข้อมูลให้ครบถ้วน");
}
});
} else {
notifyError($q, "กรุณากรอกข้อมูลให้ครบถ้วน");
}
});
} else {
notifyError($q, "กรุณากรอกข้อมูลให้ครบถ้วน");
}
});
}
onMounted(async () => {
await fetchStatus();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
@ -191,274 +471,4 @@
</q-dialog>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import Profile from "@/modules/03_recruiting/components/Profile.vue";
import {
defaultInformation,
defaultOccupation,
defaultContact,
defaultAddress,
defaultEducation,
} from "@/modules/03_recruiting/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute, useRouter } from "vue-router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
const router = useRouter();
const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const {
success,
dateToISO,
messageError,
showLoader,
hideLoader,
notifyError,
} = mixin;
const route = useRoute();
const examId = ref<string>(route.params.examId.toString());
const candidateId = ref<string>(route.params.candidateId.toString());
const modal = ref<boolean>(false);
const modalReverseOfficer = ref<boolean>(false);
const approve = ref<string>("1");
const reason = ref<string>("");
const formInformation = ref<any>({});
const formAddress = ref<any>({});
const formEducation = ref<any>({});
const formOccupation = ref<any>({});
const formContact = ref<any>({});
const status = ref<string>("");
const rejectDetail = ref<string>("");
onMounted(async () => {
await fetchStatus();
});
const fetchStatus = async () => {
showLoader();
await http
.get(config.API.candidateId(candidateId.value))
.then((res) => {
const data = res.data.result;
status.value = data.status;
rejectDetail.value = data.rejectDetail;
console.log(rejectDetail.value);
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
const confirm = async (status: boolean, reason: string) => {
showLoader();
await http
.put(config.API.candidateCheckRegister(candidateId.value), {
status: status,
reason: reason,
})
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
success($q, "ตรวจสอบข้อมูลสำเร็จ");
router.push(`/qualify/manage/${examId.value}`);
});
};
const reject = async (reason: string) => {
showLoader();
await http
.put(config.API.candidateRejectRegister(candidateId.value), {
reason: reason,
})
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
success($q, "ตรวจสอบข้อมูลสำเร็จ");
router.push(`/qualify/manage/${examId.value}`);
});
};
const checkSaveReverse = () => {
rejectReverse(reason.value);
};
const checkSave = () => {
if (approve.value == "1") {
confirm(true, "");
} else if (approve.value == "2") {
confirm(false, reason.value);
} else {
reject(reason.value);
}
};
const modalCheck = () => {
modal.value = true;
};
const rejectReverse = async (reason: string) => {
showLoader();
await http
.put(config.API.candidateCheckRegisterReject(candidateId.value), {
reason: reason,
})
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
success($q, "สำเร็จ");
router.push(`/qualify/manage/${examId.value}`);
});
};
const modalReverse = () => {
modalReverseOfficer.value = true;
};
const closeReverse = () => {
modalReverseOfficer.value = false;
};
const close = () => {
modal.value = false;
};
const clickSave = async () => {
await formInformation.value.validate().then(async (suc: boolean) => {
if (suc) {
await formAddress.value.validate().then(async (suc: boolean) => {
if (suc) {
await formEducation.value.validate().then(async (suc: boolean) => {
if (suc) {
await formOccupation.value
.validate()
.then(async (suc: boolean) => {
if (suc) {
await formContact.value
.validate()
.then(async (suc: boolean) => {
if (suc) {
showLoader();
await http
.post(config.API.candidateId(candidateId.value), {
prefixId: defaultInformation.value.prefixId,
lastName: defaultInformation.value.lastname,
dateOfBirth:
defaultInformation.value.birthDate == null
? null
: dateToISO(
defaultInformation.value.birthDate
),
citizenId: defaultInformation.value.cardid,
firstName: defaultInformation.value.firstname,
religionId: defaultInformation.value.religionId,
nationality: defaultInformation.value.nationality,
email: defaultInformation.value.email,
mobilePhone: defaultInformation.value.phone,
telephone: defaultInformation.value.tel,
knowledge: defaultInformation.value.knowledge,
occupationOrg: defaultOccupation.value.org,
occupationPile: defaultOccupation.value.pile,
occupationGroup: defaultOccupation.value.group,
occupationSalary: defaultOccupation.value.salary,
occupationPosition:
defaultOccupation.value.position,
occupationPositionType:
defaultOccupation.value.positionType,
occupationTelephone: defaultOccupation.value.tel,
registAddress: defaultAddress.value.address,
currentAddress: defaultAddress.value.addressC,
registProvinceId: defaultAddress.value.provinceId,
currentProvinceId:
defaultAddress.value.provinceIdC,
registDistrictId: defaultAddress.value.districtId,
currentDistrictId:
defaultAddress.value.districtIdC,
registSubDistrictId:
defaultAddress.value.subdistrictId,
currentSubDistrictId:
defaultAddress.value.subdistrictIdC,
registZipCode: defaultAddress.value.code,
currentZipCode: defaultAddress.value.codeC,
registSame:
defaultAddress.value.same == "1"
? true
: defaultAddress.value.same == "0"
? false
: null,
educationLevelExamId:
defaultEducation.value.educationLevelExamId,
educationName:
defaultEducation.value.educationName,
educationMajor:
defaultEducation.value.educationMajor,
educationLocation:
defaultEducation.value.educationLocation,
educationType:
defaultEducation.value.educationType,
educationEndDate:
defaultEducation.value.educationEndDate == null
? null
: dateToISO(
defaultEducation.value.educationEndDate
),
educationScores:
defaultEducation.value.educationScores,
educationLevelHighId:
defaultEducation.value.educationLevelHighId,
contactPrefixId:
defaultContact.value.contactPrefixId,
contactFirstname:
defaultContact.value.contactFirstname,
contactLastname:
defaultContact.value.contactLastname,
contactRelations:
defaultContact.value.contactRelations,
contactTel: defaultContact.value.contactTel,
})
.then(async () => {
success($q, "บันทึกข้อมูลส่วนตัวสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
} else {
notifyError($q, "กรุณากรอกข้อมูลให้ครบถ้วน");
}
});
} else {
notifyError($q, "กรุณากรอกข้อมูลให้ครบถ้วน");
}
});
} else {
notifyError($q, "กรุณากรอกข้อมูลให้ครบถ้วน");
}
});
} else {
notifyError($q, "กรุณากรอกข้อมูลให้ครบถ้วน");
}
});
} else {
notifyError($q, "กรุณากรอกข้อมูลให้ครบถ้วน");
}
});
};
</script>
<style lang="scss" scoped></style>

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

@ -1,57 +1,11 @@
<!-- page:จัดการรอบการสอบ สรรหา -->
<template>
<div class="toptitle text-dark col-12 row items-center">
จัดการรายชื่อคัดเลือก
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
<data-table
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:pagination="initialPagination"
:nornmalData="true"
:paging="true"
>
<template #columns="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="checkPermission($route)?.attrIsGet && viewDetail(props.row)"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'yearly'">
{{ props.row.round }}/{{ col.value + 543 }}
</div>
<div
v-else-if="
col.name == 'dateRegister' ||
col.name == 'datePayment' ||
col.name == 'dateAnnouncement'
"
>
{{ dateThaiRange(col.value) }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</data-table>
</q-card>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { checkPermission } from "@/utils/permissions";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
import http from "@/plugins/http";
@ -59,13 +13,12 @@ import config from "@/app.config";
import type { RequestPeriodExam } from "@/modules/03_recruiting/interface/request/Period";
import type { ResponsePeriodExam } from "@/modules/03_recruiting/interface/response/Period";
import { useQuasar } from "quasar";
const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
const { date2Thai, messageError, showLoader, hideLoader } = mixin;
const rows = ref<ResponsePeriodExam[]>([]);
const initialPagination = ref<Pagination>({
rowsPerPage: 0,
@ -162,12 +115,8 @@ const columns = ref<QTableProps["columns"]>([
},
]);
onMounted(async () => {
hideLoader();
await fetchData();
});
const fetchData = async () => {
/** ดึงข้อมูลรายการ */
async function fetchData() {
showLoader();
await http
.get(config.API.periodExamType("exam"))
@ -225,17 +174,18 @@ const fetchData = async () => {
.finally(() => {
hideLoader();
});
};
}
const viewDetail = (row: any) => {
/** ไปหน้ารายละเอียด */
function viewDetail(row: any) {
router.push(`/qualify/manage/${row.id}`);
};
}
/**
* แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
* @param val ช่วงวันที่
*/
const dateThaiRange = (val: [Date, Date]) => {
function dateThaiRange(val: [Date, Date]) {
if (val === null) {
return "-";
} else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
@ -243,7 +193,60 @@ const dateThaiRange = (val: [Date, Date]) => {
} else {
return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
}
};
}
onMounted(async () => {
hideLoader();
await fetchData();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
จัดการรายชื่อคัดเลือก
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
<data-table
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:pagination="initialPagination"
:nornmalData="true"
:paging="true"
>
<template #columns="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="checkPermission($route)?.attrIsGet && viewDetail(props.row)"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'yearly'">
{{ props.row.round }}/{{ col.value + 543 }}
</div>
<div
v-else-if="
col.name == 'dateRegister' ||
col.name == 'datePayment' ||
col.name == 'dateAnnouncement'
"
>
{{ dateThaiRange(col.value) }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</data-table>
</q-card>
</template>
<style></style>

222
src/modules/03_recruiting/views/02_qualify/Payment.vue
View file

@ -1,3 +1,115 @@
<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
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 $q = useQuasar();
const router = useRouter();
const route = useRoute();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { success, messageError, showLoader, hideLoader } = mixin;
const filePayment = ref<File[]>([]);
const bank = ref<any>([]);
const fee = ref<number>();
const examId = ref<string>(route.params.examId.toString());
const candidateId = ref<string>(route.params.candidateId.toString());
const modal = ref<boolean>(false);
const approve = ref<string>("1");
const reason = ref<string>("");
const img = ref<string>("");
const props = defineProps({
fetchStep: {
type: Function,
default: () => console.log("not function"),
},
status: {
type: String,
required: true,
},
});
async function fetchData() {
showLoader();
await http
.get(config.API.candidatePayment(candidateId.value))
.then((res) => {
const data = res.data.result;
img.value = data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
async function fetchPaymentExam() {
showLoader();
await http
.get(config.API.periodExamPayment(examId.value))
.then((res) => {
const data = res.data.result;
bank.value = data.bankExam;
fee.value = data.fee;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
}
async function confirm(status: boolean, reason: string) {
showLoader();
await http
.put(config.API.candidateCheckPayment(candidateId.value), {
status: status,
reason: reason,
})
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
success($q, "ตรวจสอบข้อมูลชำระเงินสำเร็จ");
router.push(`/qualify/manage/${examId.value}`);
});
}
function checkSave() {
if (approve.value == "1") {
confirm(true, "");
} else {
confirm(false, reason.value);
}
}
function openImg() {
window.open(img.value);
}
function modalCheck() {
modal.value = true;
}
function close() {
modal.value = false;
}
onMounted(async () => {
hideLoader();
await fetchPaymentExam();
await fetchData();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
@ -271,113 +383,3 @@
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
const filePayment = ref<File[]>([]);
const bank = ref<any>([]);
const fee = ref<number>();
const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { success, messageError, showLoader, hideLoader } = mixin;
const route = useRoute();
const examId = ref<string>(route.params.examId.toString());
const candidateId = ref<string>(route.params.candidateId.toString());
const modal = ref<boolean>(false);
const approve = ref<string>("1");
const reason = ref<string>("");
const img = ref<string>("");
const props = defineProps({
fetchStep: {
type: Function,
default: () => console.log("not function"),
},
status: {
type: String,
required: true,
},
});
onMounted(async () => {
hideLoader();
await fetchPaymentExam();
await fetchData();
});
const fetchData = async () => {
showLoader();
await http
.get(config.API.candidatePayment(candidateId.value))
.then((res) => {
const data = res.data.result;
img.value = data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
const fetchPaymentExam = async () => {
showLoader();
await http
.get(config.API.periodExamPayment(examId.value))
.then((res) => {
const data = res.data.result;
bank.value = data.bankExam;
fee.value = data.fee;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
};
const confirm = async (status: boolean, reason: string) => {
showLoader();
await http
.put(config.API.candidateCheckPayment(candidateId.value), {
status: status,
reason: reason,
})
.then((res) => {})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
success($q, "ตรวจสอบข้อมูลชำระเงินสำเร็จ");
router.push(`/qualify/manage/${examId.value}`);
});
};
const checkSave = () => {
if (approve.value == "1") {
confirm(true, "");
} else {
confirm(false, reason.value);
}
};
const openImg = () => {
window.open(img.value);
};
const modalCheck = () => {
modal.value = true;
};
const close = () => {
modal.value = false;
};
</script>

212
src/modules/03_recruiting/views/02_qualify/Period.vue
View file

@ -1,91 +1,15 @@
<!-- page:จัดการรอบการสอบ สรรหา -->
<template>
<div class="toptitle text-dark col-12 row items-center">
จัดการรอบคัดเลือก
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
<div>
<Table
style="max-height: 80vh"
:rows="examData"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:pagination="initialPagination"
:nornmalData="true"
:add="clickAdd"
:paging="true"
:titleText="''"
>
<template #columns="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-btn
v-if="checkPermission($route)?.attrIsDelete"
dense
size="12px"
flat
round
color="red"
@click="clickDelete(props.row.id)"
icon="mdi-delete"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="
checkPermission($route)?.attrIsUpdate
? clickEdit(props.row)
: undefined
"
>
<div v-if="col.name == 'no'" class="table_ellipsis2">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'yearly'" class="table_ellipsis2">
{{ props.row.round }}/{{ col.value + 543 }}
</div>
<div
v-else-if="
col.name == 'dateRegister' ||
col.name == 'datePayment' ||
col.name == 'dateAnnouncement'
"
class="table_ellipsis2"
>
{{ dateThaiRange(col.value) }}
</div>
<div
v-else-if="col.name == 'announcementExam'"
class="table_ellipsis2"
>
{{ col.value ? "ข่าวการสอบ" : "ข่าวทั่วไป" }}
</div>
<div v-else-if="col.name == 'category'" class="table_ellipsis2">
{{ typeCategoryExam(col.value) }}
</div>
<div v-else class="table_ellipsis2">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</Table>
</div>
</q-card>
</template>
<script setup lang="ts">
import { checkPermission } from "@/utils/permissions";
import type { QTableProps } from "quasar";
import { onMounted, ref } from "vue";
import type { QTableProps } from "quasar";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter } from "vue-router";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import type {
RequestPeriodExam,
RequestPosition,
@ -93,15 +17,11 @@ import type {
} from "@/modules/03_recruiting/interface/request/Period";
import type {
ResponsePeriodExam,
ResponsePosition,
ResponsePayment,
} from "@/modules/03_recruiting/interface/response/Period";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
import Table from "@/modules/03_recruiting/components/Table.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter } from "vue-router";
import Table from "@/modules/03_recruiting/components/Table.vue";
const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
@ -123,7 +43,6 @@ const visibleColumns = ref<String[]>([
"no",
"announcementExam",
"yearly",
// "category",
"name",
"document",
"dateAnnouncement",
@ -215,12 +134,7 @@ const columns = ref<QTableProps["columns"]>([
},
]);
onMounted(async () => {
hideLoader();
await fetchData();
});
const fetchData = async () => {
async function fetchData() {
showLoader();
await http
.get(config.API.periodExamType("all"))
@ -305,13 +219,13 @@ const fetchData = async () => {
.finally(() => {
hideLoader();
});
};
}
const clickEdit = (col: ResponsePeriodExam) => {
function clickEdit(col: ResponsePeriodExam) {
router.push(`/qualify/period/${col.id}`);
};
}
const clickDelete = (id: string) => {
function clickDelete(id: string) {
$q.dialog({
title: "ยืนยันการลบข้อมูล",
message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
@ -326,13 +240,13 @@ const clickDelete = (id: string) => {
})
.onCancel(() => {})
.onDismiss(() => {});
};
}
const clickAdd = () => {
function clickAdd() {
router.push({ name: "qualifyPeriodAdd" });
};
}
const deleteData = async (id: string) => {
async function deleteData(id: string) {
showLoader();
await http
.delete(config.API.periodExamId(id))
@ -346,13 +260,13 @@ const deleteData = async (id: string) => {
hideLoader();
await fetchData();
});
};
}
/**
* แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
* @param val ช่วงวันที่
*/
const dateThaiRange = (val: [Date, Date]) => {
function dateThaiRange(val: [Date, Date]) {
if (val === null) {
return "-";
} else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
@ -360,7 +274,93 @@ const dateThaiRange = (val: [Date, Date]) => {
} else {
return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
}
};
}
onMounted(async () => {
hideLoader();
await fetchData();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
จัดการรอบคัดเลือก
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
<div>
<Table
style="max-height: 80vh"
:rows="examData"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:pagination="initialPagination"
:nornmalData="true"
:add="clickAdd"
:paging="true"
:titleText="''"
>
<template #columns="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-btn
v-if="checkPermission($route)?.attrIsDelete"
dense
size="12px"
flat
round
color="red"
@click="clickDelete(props.row.id)"
icon="mdi-delete"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="
checkPermission($route)?.attrIsUpdate
? clickEdit(props.row)
: undefined
"
>
<div v-if="col.name == 'no'" class="table_ellipsis2">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'yearly'" class="table_ellipsis2">
{{ props.row.round }}/{{ col.value + 543 }}
</div>
<div
v-else-if="
col.name == 'dateRegister' ||
col.name == 'datePayment' ||
col.name == 'dateAnnouncement'
"
class="table_ellipsis2"
>
{{ dateThaiRange(col.value) }}
</div>
<div
v-else-if="col.name == 'announcementExam'"
class="table_ellipsis2"
>
{{ col.value ? "ข่าวการสอบ" : "ข่าวทั่วไป" }}
</div>
<div v-else-if="col.name == 'category'" class="table_ellipsis2">
{{ typeCategoryExam(col.value) }}
</div>
<div v-else class="table_ellipsis2">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</Table>
</div>
</q-card>
</template>
<style></style>

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

File diff suppressed because one or more lines are too long

789
src/modules/03_recruiting/views/02_qualify/manageDetail.vue
View file

@ -1,3 +1,388 @@
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { onMounted, ref, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { checkPermission } from "@/utils/permissions";
import { useRouter, useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import type { DataNumObject } from "@/modules/01_metadata/interface/request/Calendar";
import TableCandidate from "@/modules/03_recruiting/components/TableCandidate.vue";
import ExamFinished from "@/modules/03_recruiting/components/ExamFinished.vue";
const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { genColor15, date2Thai, messageError, showLoader, hideLoader } = mixin;
const router = useRouter();
const route = useRoute();
const status = ref<string>("all");
const filter = ref<string>(""); //search data table
const name = ref<string>("");
const candidateId = ref<string>("");
const statusPayment = ref<boolean>(false);
const setSeat = ref<boolean>(false);
const modal = ref<boolean>(false);
const round = ref<number | null>(null);
const yearly = ref<number | null>(null);
const examId = ref<string>(route.params.examId.toString());
const visible = ref(true); //เปิดปิด card สรุปข้อมูล
const dataNum = ref<DataNumObject[]>([]); //จำนวนสรุปจำนวนข้อมูลหลัก
const rows = ref<any[]>([]);
const visibleColumns = ref<String[]>([
"no",
"number",
"position",
"registerDate",
"examIdenNumber",
"seatNumber",
"resultB",
"resultC",
"pass",
"citizenId",
"fullname",
"career",
"office",
"edu",
"status",
]);
const optionsStatus = ref<any>([
{
id: "all",
name: "ทั้งหมด",
},
{
id: "checkRegister",
name: "รอกดรับใบสมัคร",
},
{
id: "payment",
name: "รอชำระค่าสมัครสอบ",
},
{
id: "checkPayment",
name: "ตรวจสอบหลักฐานชำระเงิน",
},
{
id: "rejectPayment",
name: "หลักฐานชำระเงินไม่ถูกต้อง",
},
{
id: "checkSeat",
name: "กดรับใบสมัครแล้ว",
},
{
id: "checkPoint",
name: "รอสรุปคะแนนสอบ",
},
{
id: "done",
name: "คัดเลือกสำเร็จ",
},
{
id: "waiver",
name: "สละสิทธิ์สอบ",
},
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "position",
align: "left",
label: "ตำแหน่งที่สมัคร",
sortable: true,
field: "position",
headerStyle: "font-size: 14px; min-width: 200px",
style: "font-size: 14px; ",
},
{
name: "citizenId",
align: "left",
label: "เลขประจำตัวประชาชน",
sortable: true,
field: "citizenId",
headerStyle: "font-size: 14px; min-width: 200px",
style: "font-size: 14px; ",
},
{
name: "fullname",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullname",
headerStyle: "font-size: 14px; min-width: 200px",
style: "font-size: 14px; ",
},
{
name: "examIdenNumber",
align: "left",
label: "เลขประจำตัวสอบ",
sortable: true,
field: "examIdenNumber",
headerStyle: "font-size: 14px;",
style: "font-size: 14px; ",
},
{
name: "seatNumber",
align: "left",
label: "สนามสอบ",
sortable: true,
field: "seatNumber",
headerStyle: "font-size: 14px;",
style: "font-size: 14px; ",
},
{
name: "number",
align: "left",
label: "ลำดับที่สอบได้",
sortable: true,
field: "number",
headerStyle: "font-size: 14px;",
style: "font-size: 14px; ",
},
{
name: "resultB",
align: "left",
label: "ผลสอบภาค ข",
sortable: true,
field: "resultB",
headerStyle: "font-size: 14px;",
style: "font-size: 14px; ",
},
{
name: "resultC",
align: "left",
label: "ผลสอบภาค ค",
sortable: true,
field: "resultC",
headerStyle: "font-size: 14px;",
style: "font-size: 14px; ",
},
{
name: "pass",
align: "left",
label: "ผลสอบ",
sortable: true,
field: "pass",
headerStyle: "font-size: 14px;",
style: "font-size: 14px; ",
},
{
name: "registerDate",
align: "left",
label: "วันและเวลาที่สมัคร",
sortable: true,
field: "registerDate",
headerStyle: "font-size: 14px; min-width: 200px",
style: "font-size: 14px; ",
},
{
name: "status",
align: "left",
label: "สถานะ",
sortable: false,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
]);
// paging
const page = ref<number>(1);
const pageSize = ref<number>(25);
const total = ref<number>(0);
const maxPage = ref<number>(1);
async function fetchDataCom() {
await fetchDataSummary();
await fetchPeriodExam();
await fetchData();
}
/** เปลี่ยน page */
async function changePage(
pageVal: number,
pageSizeVal: number,
loading: boolean = false
) {
page.value = await pageVal;
pageSize.value = await pageSizeVal;
fetchData(loading);
}
/** ดึงข้อมูล */
async function fetchData(loading: boolean = true) {
loading === true ?? showLoader();
await http
.get(
config.API.candidateOfPeriodExam(status.value, examId.value) +
`?page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
)
.then(async (res) => {
const data = res.data.result;
if (data.data) {
total.value = data.total;
maxPage.value = await Math.ceil(data.total / pageSize.value);
maxPage.value = maxPage.value < 1 ? 1 : maxPage.value;
rows.value = [];
data.data.map((r: any) => {
rows.value.push({
id: r.id,
fullname: `${r.prefixName}${r.firstName} ${r.lastName}`,
avatar: r.profileImg != null ? r.profileImg.detail : "",
citizenId: r.citizenId,
number: r.number,
registerDate: date2Thai(r.registerDate, false, true),
examIdenNumber: r.examIdenNumber,
seatNumber: r.seatNumber,
resultC: r.resultC,
resultB: r.resultB,
pass: r.pass,
email: r.email,
status: r.status,
position: `${r.positionName}${r.positionLevelName}`,
positionLevel: r.positionLevelName,
check: false,
});
});
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
loading === true ?? hideLoader();
});
}
/** ดึงข้อมูล สอบคัดเลือก */
async function fetchPeriodExam() {
showLoader();
await http
.get(config.API.periodExamStatus(examId.value))
.then((res) => {
const data = res.data.result;
name.value = data.name;
round.value = data.round;
yearly.value = data.year;
statusPayment.value = data.status;
setSeat.value = data.setSeat;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/**
* สรุปจำนวน
*/
async function fetchDataSummary() {
dataNum.value = [];
showLoader();
await http
.get(config.API.countDashbordPeriodExam(examId.value))
.then((res) => {
let data = res.data.result;
data.map((e: DataNumObject) => {
dataNum.value.push({
id: e.id,
count: e.count,
name: e.name,
color: genColor15(e.id),
});
});
})
.catch((e) => {
dataNum.value = [];
})
.finally(() => {
hideLoader();
});
}
/**
* รอสรุปคะแนนสอบ
*/
async function clickPointRow(row: any) {
candidateId.value = row.id;
modal.value = true;
}
/** ไปหน้ารายละเอียด */
function viewDetail(id: string, status: string) {
if (status == "checkPayment") {
router.push(`${route.fullPath}/payment/${id}`);
} else {
router.push(`${route.fullPath}/profile/${id}`);
}
}
/**
* แปลง สถานะเป็น text
* @param status
*/
function statusCandidate(status: string) {
switch (status) {
case "register":
return "ยังไม่สมัครสอบ";
case "checkRegister":
return "รอกดรับใบสมัคร";
case "payment":
return "รอชำระค่าสมัครสอบ";
case "rejectRegister":
return "คุณสมบัติสมัครสอบไม่ผ่าน";
case "checkPayment":
return "ตรวจสอบหลักฐานชำระเงิน";
case "rejectPayment":
return "หลักฐานชำระเงินไม่ถูกต้อง";
case "checkSeat":
return "กดรับใบสมัครแล้ว";
case "checkPoint":
return "รอสรุปคะแนนสอบ";
case "done":
return "คัดเลือกสำเร็จ";
case "waiver":
return "สละสิทธิ์สอบ";
default:
return "-";
}
}
watch(status, (count: String, prevCount: String) => {
fetchData();
});
onMounted(async () => {
hideLoader();
await fetchDataCom();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
@ -218,407 +603,3 @@
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { checkPermission } from "@/utils/permissions";
import { onMounted, ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
import http from "@/plugins/http";
import config from "@/app.config";
import TableCandidate from "@/modules/03_recruiting/components/TableCandidate.vue";
import ExamFinished from "@/modules/03_recruiting/components/ExamFinished.vue";
import type { DataNumObject } from "@/modules/01_metadata/interface/request/Calendar";
import { useQuasar } from "quasar";
const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const {
genColor15,
dateToISO,
date2Thai,
messageError,
showLoader,
hideLoader,
} = mixin;
const router = useRouter();
const route = useRoute();
const status = ref<string>("all");
const filter = ref<string>(""); //search data table
const name = ref<string>("");
const candidateId = ref<string>("");
const statusPayment = ref<boolean>(false);
const setSeat = ref<boolean>(false);
const modal = ref<boolean>(false);
const round = ref<number | null>(null);
const yearly = ref<number | null>(null);
const examId = ref<string>(route.params.examId.toString());
const visible = ref(true); //เปิดปิด card สรุปข้อมูล
const dataNum = ref<DataNumObject[]>([]); //จำนวนสรุปจำนวนข้อมูลหลัก
const rows = ref<any[]>([]);
const checkProfile = ref<any>([]);
const visibleColumns = ref<String[]>([
// "check",
"no",
"number",
"position",
// "positionLevel",
"registerDate",
"examIdenNumber",
"seatNumber",
"resultB",
"resultC",
"pass",
"citizenId",
"fullname",
"career",
"office",
"edu",
"status",
]);
const optionsStatus = ref<any>([
{
id: "all",
name: "ทั้งหมด",
},
{
id: "checkRegister",
name: "รอกดรับใบสมัคร",
},
{
id: "payment",
name: "รอชำระค่าสมัครสอบ",
},
{
id: "checkPayment",
name: "ตรวจสอบหลักฐานชำระเงิน",
},
{
id: "rejectPayment",
name: "หลักฐานชำระเงินไม่ถูกต้อง",
},
{
id: "checkSeat",
name: "กดรับใบสมัครแล้ว",
},
{
id: "checkPoint",
name: "รอสรุปคะแนนสอบ",
},
{
id: "done",
name: "คัดเลือกสำเร็จ",
},
{
id: "waiver",
name: "สละสิทธิ์สอบ",
},
]);
const columns = ref<QTableProps["columns"]>([
// {
// name: "check",
// align: "left",
// label: "",
// sortable: true,
// field: "check",
// headerStyle: "font-size: 14px;",
// style: "font-size: 14px; ",
// },
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
name: "position",
align: "left",
label: "ตำแหน่งที่สมัคร",
sortable: true,
field: "position",
headerStyle: "font-size: 14px; min-width: 200px",
style: "font-size: 14px; ",
},
// {
// name: "positionLevel",
// align: "left",
// label: "ระดับ",
// sortable: true,
// field: "positionLevel",
// headerStyle: "font-size: 14px; min-width: 200px",
// style: "font-size: 14px; ",
// },
{
name: "citizenId",
align: "left",
label: "เลขประจำตัวประชาชน",
sortable: true,
field: "citizenId",
headerStyle: "font-size: 14px; min-width: 200px",
style: "font-size: 14px; ",
},
{
name: "fullname",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullname",
headerStyle: "font-size: 14px; min-width: 200px",
style: "font-size: 14px; ",
},
{
name: "examIdenNumber",
align: "left",
label: "เลขประจำตัวสอบ",
sortable: true,
field: "examIdenNumber",
headerStyle: "font-size: 14px;",
style: "font-size: 14px; ",
},
{
name: "seatNumber",
align: "left",
label: "สนามสอบ",
sortable: true,
field: "seatNumber",
headerStyle: "font-size: 14px;",
style: "font-size: 14px; ",
},
{
name: "number",
align: "left",
label: "ลำดับที่สอบได้",
sortable: true,
field: "number",
headerStyle: "font-size: 14px;",
style: "font-size: 14px; ",
},
{
name: "resultB",
align: "left",
label: "ผลสอบภาค ข",
sortable: true,
field: "resultB",
headerStyle: "font-size: 14px;",
style: "font-size: 14px; ",
},
{
name: "resultC",
align: "left",
label: "ผลสอบภาค ค",
sortable: true,
field: "resultC",
headerStyle: "font-size: 14px;",
style: "font-size: 14px; ",
},
{
name: "pass",
align: "left",
label: "ผลสอบ",
sortable: true,
field: "pass",
headerStyle: "font-size: 14px;",
style: "font-size: 14px; ",
},
{
name: "registerDate",
align: "left",
label: "วันและเวลาที่สมัคร",
sortable: true,
field: "registerDate",
headerStyle: "font-size: 14px; min-width: 200px",
style: "font-size: 14px; ",
},
{
name: "status",
align: "left",
label: "สถานะ",
sortable: false,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
]);
watch(status, (count: String, prevCount: String) => {
fetchData();
});
onMounted(async () => {
hideLoader();
await fetchDataCom();
});
const fetchDataCom = async () => {
await fetchDataSummary();
await fetchPeriodExam();
await fetchData();
};
// paging
const page = ref<number>(1);
const pageSize = ref<number>(25);
const total = ref<number>(0);
const maxPage = ref<number>(1);
async function changePage(
pageVal: number,
pageSizeVal: number,
loading: boolean = false
) {
page.value = await pageVal;
pageSize.value = await pageSizeVal;
fetchData(loading);
}
const fetchData = async (loading: boolean = true) => {
loading === true ?? showLoader();
await http
.get(
config.API.candidateOfPeriodExam(status.value, examId.value) +
`?page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
)
.then(async (res) => {
const data = res.data.result;
if (data.data) {
total.value = data.total;
maxPage.value = await Math.ceil(data.total / pageSize.value);
maxPage.value = maxPage.value < 1 ? 1 : maxPage.value;
rows.value = [];
data.data.map((r: any) => {
rows.value.push({
id: r.id,
fullname: `${r.prefixName}${r.firstName} ${r.lastName}`,
avatar: r.profileImg != null ? r.profileImg.detail : "",
citizenId: r.citizenId,
number: r.number,
registerDate: date2Thai(r.registerDate, false, true),
examIdenNumber: r.examIdenNumber,
seatNumber: r.seatNumber,
resultC: r.resultC,
resultB: r.resultB,
pass: r.pass,
email: r.email,
status: r.status,
position: `${r.positionName}${r.positionLevelName}`,
positionLevel: r.positionLevelName,
check: false,
});
});
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
loading === true ?? hideLoader();
});
};
const fetchPeriodExam = async () => {
showLoader();
await http
.get(config.API.periodExamStatus(examId.value))
.then((res) => {
const data = res.data.result;
name.value = data.name;
round.value = data.round;
yearly.value = data.year;
statusPayment.value = data.status;
setSeat.value = data.setSeat;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
};
/**
* สรุปจำนวน
*/
const fetchDataSummary = async () => {
dataNum.value = [];
showLoader();
await http
.get(config.API.countDashbordPeriodExam(examId.value))
.then((res) => {
let data = res.data.result;
data.map((e: DataNumObject) => {
dataNum.value.push({
id: e.id,
count: e.count,
name: e.name,
color: genColor15(e.id),
});
});
})
.catch((e) => {
dataNum.value = [];
})
.finally(() => {
hideLoader();
});
};
/**
* รอสรุปคะแนนสอบ
*/
const clickPointRow = async (row: any) => {
candidateId.value = row.id;
modal.value = true;
};
const viewDetail = (id: string, status: string) => {
if (status == "checkPayment") {
router.push(`${route.fullPath}/payment/${id}`);
} else {
router.push(`${route.fullPath}/profile/${id}`);
}
};
const statusCandidate = (status: string) => {
switch (status) {
case "register":
return "ยังไม่สมัครสอบ";
case "checkRegister":
return "รอกดรับใบสมัคร";
case "payment":
return "รอชำระค่าสมัครสอบ";
case "rejectRegister":
return "คุณสมบัติสมัครสอบไม่ผ่าน";
case "checkPayment":
return "ตรวจสอบหลักฐานชำระเงิน";
case "rejectPayment":
return "หลักฐานชำระเงินไม่ถูกต้อง";
case "checkSeat":
return "กดรับใบสมัครแล้ว";
case "checkPoint":
return "รอสรุปคะแนนสอบ";
case "done":
return "คัดเลือกสำเร็จ";
case "waiver":
return "สละสิทธิ์สอบ";
default:
return "-";
}
};
</script>

224
src/modules/03_recruiting/views/03_editor/index.vue
View file

@ -1,7 +1,12 @@
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { checkPermission } from "@/utils/permissions";
import { ref, onMounted, nextTick } from "vue";
import { ref, onMounted } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import type {
WebType,
AddressWeb,
@ -10,12 +15,9 @@ import type {
EnableType,
CmsTable,
} from "@/modules/03_recruiting/interface/index/Main";
import type { Columns } from "@/modules/03_recruiting/interface/request/Career";
import type { DataLink } from "@/modules/03_recruiting/interface/request/Editor";
import type { QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import HeaderTop from "@/modules/03_recruiting/components/top1.vue";
import ProfileTable from "@/modules/03_recruiting/components/Table1.vue";
@ -29,10 +31,10 @@ const {
messageError,
showLoader,
hideLoader,
dialogMessageNotify,
dialogConfirm,
dialogRemove,
} = mixin;
const previous = ref<boolean>(false);
const next = ref<boolean>(false);
const addDialog = ref<boolean>(false);
@ -53,7 +55,6 @@ const inputName = ref<string | null>("");
const inputNameBack = ref<string | null>("");
const editvisible = ref<boolean>(false);
const dialog = ref<boolean>(false);
const edit = ref<boolean>(false);
const qeditor = ref<string>("");
const title = ref<string>("");
const filter = ref<string>(""); //search data table
@ -69,6 +70,7 @@ const web = ref<WebType>({
eng: "",
descripstion: "",
});
const address = ref<AddressWeb>({
address: null,
provinceId: null,
@ -82,18 +84,21 @@ const enable = ref<EnableType>({
web: false,
about: false,
});
const visibleColumns = ref<String[]>([
"name",
"link",
"createdAt",
"lastUpdatedAt",
]);
const visibleColumnsAgency = ref<String[]>([
"name",
"link",
"createdAt",
"lastUpdatedAt",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "name",
@ -141,14 +146,11 @@ const columns = ref<QTableProps["columns"]>([
},
]);
onMounted(async () => {
await fetchData();
await fetchProvince();
await fetchDistrict(address.value.provinceId);
await fetchSubDistrict(address.value.districtId);
});
const clickPreviousNext = (page: string) => {
/**
* ฟังชั่น หน้าถัดไป ย้อนกลับหน้า page
* @param page next/previous
*/
function clickPreviousNext(page: string) {
const index: number =
page == "next" ? indexRow.value - 1 : indexRow.value + 1;
let length: number;
@ -168,9 +170,14 @@ const clickPreviousNext = (page: string) => {
previous.value = index == 0 ? false : true;
next.value = index == length - 1 ? false : true;
indexRow.value = index;
};
}
const selectData = (id: string, agency: boolean) => {
/**
* ฟังชั่น เปิดรายละเอียด
* @param id
* @param agency
*/
function selectData(id: string, agency: boolean) {
dialog.value = !dialog.value;
addDialog.value = false;
editvisible.value = false;
@ -197,20 +204,25 @@ const selectData = (id: string, agency: boolean) => {
indexRow.value = index;
previous.value = index == 0 ? false : true;
next.value = index == length - 1 ? false : true;
};
}
const editDialog = () => {
/** แก้ไขข้อมูล ส่วนราชการ/หน่วยงาน */
function editDialog() {
inputName.value = inputNameBack.value;
editvisible.value = !editvisible.value;
};
}
const clickClose = () => {
/** ปิด dialog ส่วนราชการ/หน่วยงาน */
function clickClose() {
dialog.value = !dialog.value;
addDialog.value = false;
};
const clickAdd = (agency: boolean) => {
}
/**
* เปิด dialog ส่วนราชการ/หน่วยงาน
* @param agency true/false
*/
function clickAdd(agency: boolean) {
dialog.value = !dialog.value;
title.value = agency ? "เพิ่มหน่วยงาน" : "เพิ่มส่วนราชการ";
agencyRow.value = agency;
@ -218,17 +230,19 @@ const clickAdd = (agency: boolean) => {
editvisible.value = true;
inputLink.value = "";
inputName.value = "";
};
}
const statusHeader = () => {
/** เช็คสถานะ เปิด/ปิด เพิ่มข้อมูล */
function statusHeader() {
return Object.values(enable.value).includes(true);
};
}
const cancelBlog = async () => {
/** ปิด dialog ข้อมูลเกี่ยวกับเรา */
async function cancelBlog() {
await fetchData();
};
const saveAdd = async () => {
}
/** save ข้อมูล */
async function saveAdd() {
dialogform.value?.validate().then(async (result: boolean) => {
if (result) {
if (agencyRow.value) {
@ -262,9 +276,10 @@ const saveAdd = async () => {
}
}
});
};
}
const saveDelete = async (del: string) => {
/** ลบข้อมูล */
async function saveDelete(del: string) {
if (agencyRow.value) {
const filt = cmsAgency.value.filter((r: any) => r.id != idRow.value);
let arrData: DataLink[] = [];
@ -288,9 +303,10 @@ const saveDelete = async (del: string) => {
await saveDataGoverment(arrData, del);
dialog.value = false;
}
};
}
const saveEdit = async () => {
/** edit */
async function saveEdit() {
if (agencyRow.value) {
let arrData: DataLink[] = [];
cmsAgency.value.map((r: any) => {
@ -325,14 +341,12 @@ const saveEdit = async () => {
});
await saveDataGoverment(arrData, "");
}
};
}
const saveDataAgency = async (data: DataLink[], del: string) => {
/** save หน่วยงาน */
async function saveDataAgency(data: DataLink[], del: string) {
dialogform.value?.validate().then(async (result: boolean) => {
if (result) {
// if (data.length === 0) {
// dialogMessageNotify($q, "ลบข้อมูลต้องมี 2 ลิ้งอย่างน้อย 2 ลิ้ง");
// } else
if (del) {
dialogRemove($q, () => dataPostAgency(data));
} else {
@ -340,9 +354,10 @@ const saveDataAgency = async (data: DataLink[], del: string) => {
}
}
});
};
}
const saveDataGoverment = async (data: DataLink[], del: string) => {
/** save ราชการ */
async function saveDataGoverment(data: DataLink[], del: string) {
dialogform.value?.validate().then(async (result: boolean) => {
if (result) {
// if (data.length === 0) {
@ -355,8 +370,13 @@ const saveDataGoverment = async (data: DataLink[], del: string) => {
}
}
});
};
const dataPostAgency = async (data: DataLink[]) => {
}
/**
* เพิ่มข้อมูล
* @param data ข้อมูลหน่วยงาน
*/
async function dataPostAgency(data: DataLink[]) {
showLoader();
await http
.post(config.API.cmsAgency, data)
@ -368,8 +388,13 @@ const dataPostAgency = async (data: DataLink[]) => {
dialog.value = false;
await fetchData();
});
};
const dataPost = async (data: DataLink[]) => {
}
/**
* เพิ่มข้อมูล
* @param data ข้อมูลราชการ
*/
async function dataPost(data: DataLink[]) {
showLoader();
await http
.post(config.API.cmsGoverment, data)
@ -381,8 +406,10 @@ const dataPost = async (data: DataLink[]) => {
dialog.value = false;
await fetchData();
});
};
const fetchData = async () => {
}
/** ดึงข้อมูลรายละเอียด */
async function fetchData() {
showLoader();
await http
.get(config.API.cms)
@ -443,9 +470,10 @@ const fetchData = async () => {
.finally(() => {
hideLoader();
});
};
}
const takeLogo = async () => {
/** เพิ่มโลโก้ */
async function takeLogo() {
showLoader();
const formData = new FormData();
formData.append("FileData", imageFileLogo.value);
@ -460,9 +488,10 @@ const takeLogo = async () => {
imageUrlLogo.value = null;
await fetchData();
});
};
}
const takeBanner = async () => {
/** เพิ่ม banner */
async function takeBanner() {
showLoader();
const formData = new FormData();
formData.append("FileData", imageFile.value);
@ -477,9 +506,10 @@ const takeBanner = async () => {
imageUrl.value = null;
await fetchData();
});
};
}
const sendDataDetail = async () => {
/** body รายละเอียด */
async function sendDataDetail() {
webform.value?.validate().then(async (result: boolean) => {
if (result) {
const data = {
@ -501,9 +531,10 @@ const sendDataDetail = async () => {
});
}
});
};
}
const sendDataAbout = async () => {
/** body ข้อมูลเกี่ยวกับเรา */
async function sendDataAbout() {
myform.value?.validate().then(async (result: boolean) => {
if (result) {
const data = {
@ -528,9 +559,10 @@ const sendDataAbout = async () => {
});
}
});
};
}
const fetchProvince = async () => {
/** ดึงข้อมูลก่อนหน้า dialog */
async function fetchProvince() {
showLoader();
await http
.get(config.API.province)
@ -548,9 +580,13 @@ const fetchProvince = async () => {
.finally(() => {
hideLoader();
});
};
}
const fetchDistrict = async (id: string | null) => {
/**
* ดึงข้อมูล อำเภอ
* @param id id อำเภอ
*/
async function fetchDistrict(id: string | null) {
if (id !== null && id != "") {
showLoader();
await http
@ -570,9 +606,13 @@ const fetchDistrict = async (id: string | null) => {
hideLoader();
});
}
};
}
const fetchSubDistrict = async (id: string | null) => {
/**
* ดึงข้อมูล ตำบล
* @param id id จังหวัด
*/
async function fetchSubDistrict(id: string | null) {
if (id !== null && id != "") {
showLoader();
await http
@ -596,67 +636,77 @@ const fetchSubDistrict = async (id: string | null) => {
hideLoader();
});
}
};
}
const selectProvince = (e: string) => {
/**
* ฟังชั่นเลือกจังหวัด
* @param e id จังหวัด
*/
function selectProvince(e: string) {
address.value.districtId = "";
address.value.subdistrictId = "";
address.value.code = "";
myform.value?.resetValidation();
fetchDistrict(e);
};
}
const selectDistrict = (e: string) => {
/** เลือกอำเภอ */
function selectDistrict(e: string) {
address.value.subdistrictId = "";
address.value.code = "";
myform.value?.resetValidation();
fetchSubDistrict(e);
};
}
const selectSubDistrict = (e: string) => {
/** เลือกตำบล */
function selectSubDistrict(e: string) {
const findcode = subdistrictOptions.value.filter((r: any) => r.id == e);
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
address.value.code = namecode;
};
}
const clickImageLogo = () => {
function clickImageLogo() {
if (imageFileLogo.value !== null) {
takeLogo();
} else {
inputImageLogo.value.click();
}
};
}
const clickImage = () => {
/** อัปโหลดแบนเนอร์/โลโก้ */
function clickImage() {
if (imageFile.value !== null) {
takeBanner();
} else {
inputImage.value.click();
}
};
}
const checkLogoExits = ref<boolean>(false);
const checkFileLogo = async () => {
/** เช็คโลโก้ */
async function checkFileLogo() {
try {
const response = await fetch(imageUrlLogo.value, { method: "GET" });
checkLogoExits.value = response.ok;
} catch (error) {
checkLogoExits.value = false;
}
};
}
const checkBannerExits = ref<boolean>(false);
const checkFileBanner = async () => {
/** เช็คแบนเนอร์ */
async function checkFileBanner() {
try {
const response = await fetch(imageUrl.value, { method: "GET" });
checkBannerExits.value = response.ok;
} catch (error) {
checkBannerExits.value = false;
}
};
}
const uploadImageLogo = (e: any) => {
/** อัปโหลดโลโก้ */
function uploadImageLogo(e: any) {
let input = e.target.files;
if (input.length > 0) {
const formData = new FormData();
@ -667,9 +717,10 @@ const uploadImageLogo = (e: any) => {
return;
}
return;
};
}
const uploadImage = (e: any) => {
/** อัปโหลดแบนเนอร์*/
function uploadImage(e: any) {
let input = e.target.files;
if (input.length > 0) {
const formData = new FormData();
@ -680,14 +731,21 @@ const uploadImage = (e: any) => {
return;
}
return;
};
}
const getClass = (val: boolean) => {
function getClass(val: boolean) {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
}
onMounted(async () => {
await fetchData();
await fetchProvince();
await fetchDistrict(address.value.provinceId);
await fetchSubDistrict(address.value.districtId);
});
</script>
<template>