Refactoring code module 03_recruiting

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

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>