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

clone code

Browse source
This commit is contained in:
Kittapath 2023-06-01 12:54:58 +07:00
parent c9597d1e38
commit d57bcd1719
362 changed files with 104804 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,661 @@
<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}/${yearly == null ? "" : yearly + 543}` }}
<q-space />
<q-btn
@click="visible = !visible"
dense
round
size="13px"
:style="
visible == false
? 'transform: rotate(90deg);transition-duration: 0.8s;'
: 'transform: rotate(0);transition-duration: 0.8s;'
"
icon="mdi-pin"
flat
></q-btn>
</div>
<q-slide-transition>
<q-card class="row col-12 q-mb-sm" v-show="visible">
<div class="col-12 row">
<div class="q-py-md row col-12 no-wrap">
<!-- การ์ดแสดงจำนวนข้อมูล -->
<div class="col-12 row">
<div class="text-grey-7 row text-weight-medium col-12 q-pl-md">
สรุปจำนวนผู้สมัครคัดเลือก
<datepicker
class="q-pl-sm"
v-model="dateFilter"
:locale="'th'"
autoApply
range
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
class="full-width inputgreen cursor-pointer"
hide-bottom-space
outlined
dense
label="วันที่"
lazy-rules
:model-value="dateThaiRange(dateFilter)"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-btn
size="md"
icon="mdi-download"
round
flat
color="primary"
@click="downloadFileDashboard"
>
<q-tooltip>ดาวน์โหลดสรุปข้อมูลสมัครสอบ</q-tooltip>
</q-btn>
<q-btn
dense
size="12px"
flat
round
color="green"
@click.stop.prevent="clickCandidateList()"
icon="mdi-clipboard-arrow-down"
>
<q-tooltip>ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ</q-tooltip>
</q-btn>
<q-btn
dense
size="12px"
flat
round
color="indigo"
@click.stop.prevent="clickPassExam()"
icon="mdi-clipboard-arrow-down"
>
<q-tooltip>ดาวน์โหลดรายชื่อผู้สอบแข่งขันได้</q-tooltip>
</q-btn>
</div>
<div class="row col-12 q-col-gutter-md fit q-pa-md">
<div
style="width: 25%"
v-for="(num, index) in dataNum"
:key="index"
>
<q-card bordered flat class="row fit cardNum items-center">
<div class="col-12 row items-center q-pa-sm">
<div
:class="
'col-12 text-h5 text-weight-bold text-' + `${num.color}`
"
>
{{
num.count != null
? num.count.toLocaleString("en-US")
: ""
}}
</div>
<div class="col-12 text-dark ellipsis">
{{ num.name }}
</div>
</div>
</q-card>
</div>
</div>
</div>
</div>
</div>
</q-card>
</q-slide-transition>
<q-card flat bordered class="col-12 q-pt-sm">
<TableCandidate
style="max-height: 80vh"
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
v-model:inputvisibleFilter="status"
v-model:optionsFilter="optionsStatus"
:pagination="initialPagination"
:nornmalData="true"
:paging="true"
:titleText="''"
:statusPayment="statusPayment"
:setSeat="setSeat"
:fetchData="fetchDataCom"
:history="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="viewDetail(props.row.id, props.row.status)"
>
<div v-if="col.name == 'no'" class="table_ellipsis">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'fullname'">
<div class="row col-12 items-center">
<img
v-if="props.row.avatar == ''"
src="@/assets/avatar_user.jpg"
class="q-mr-sm col-4"
style="width: 28px; height: 28px; border-radius: 50%"
/>
<img
v-else
: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 == 'career'">
<div class="col-4">
{{ props.row.career }}
<div class="text-weight-light">
{{ props.row.position }}
</div>
</div>
</div>
<div v-else-if="col.name == 'edu'">
<div class="col-4">
{{ props.row.edu }}
<div class="text-weight-light">
{{ props.row.university }}
</div>
</div>
</div>
<div
v-else-if="col.name == 'status'"
:class="
props.row.status == 'checkRegister' ||
props.row.status == 'checkPayment' ||
props.row.status == 'checkSeat' ||
props.row.status == 'checkPoint'
? 'text-blue'
: ''
"
>
{{ statusCandidate(props.row.status) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
color="primary"
flat
dense
round
size="14px"
icon="mdi-file-chart-outline"
v-if="props.row.status == 'done'"
@click="clickPointRow(props.row)"
>
<q-tooltip>ผลสอบ</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
</TableCandidate>
</q-card>
<q-dialog v-model="modal" persistent>
<q-card style="min-width: 550px">
<q-card-section class="row items-center q-py-sm">
<div class="text-bold">บัตรประจำตัวผู้สอบ</div>
<q-space />
<q-btn
icon="close"
unelevated
round
dense
v-close-popup
style="color: #ff8080; background-color: #ffdede"
/>
</q-card-section>
<q-separator />
<q-card-section class="row items-center">
<div class="col text-dark">
<ExamFinished :status="status" :candidateId="candidateId" />
</div>
</q-card-section>
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar";
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 { useDataStore } from "@/stores/data";
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 } = mixin;
const dataStore = useDataStore();
const { loaderPage } = dataStore;
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 dateFilter = ref<[Date, Date]>([new Date(), new Date()]); //วันที่เลือกค้นหา
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 initialPagination = ref<Pagination>({
rowsPerPage: 0,
});
const visibleColumns = ref<String[]>([
"no",
"number",
"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: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, {
numeric: true,
sensitivity: "base",
}),
},
{
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: "number",
align: "left",
label: "ลำดับที่สอบได้",
sortable: true,
field: "number",
headerStyle: "font-size: 14px;",
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: "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: "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 () => {
loaderPage(false);
await fetchDataCom();
});
const clickPassExam = () => {
window.open(config.API.exportExamPassExamList(examId.value));
};
const clickCandidateList = () => {
window.open(config.API.exportExamCandidateList(examId.value));
};
const fetchDataCom = async () => {
await fetchDataSummary();
await fetchPeriodExam();
await fetchData();
};
const fetchData = async () => {
loaderPage(true);
await http
.get(config.API.candidateOfPeriodExam(status.value, examId.value))
.then((res) => {
const data = res.data.result;
rows.value = [];
data.map((r: any) => {
rows.value.push({
id: r.id,
fullname: `${r.firstName} ${r.lastName}`,
avatar: r.profileImg != null ? r.profileImg.detail : "",
citizenId: r.citizenId,
number: r.number,
examIdenNumber: r.examIdenNumber,
seatNumber: r.seatNumber,
resultC: r.resultC,
resultB: r.resultB,
pass: r.pass,
email: r.email,
status: r.status,
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
loaderPage(false);
});
};
const fetchPeriodExam = async () => {
loaderPage(true);
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(() => {
loaderPage(false);
});
};
/**
* สรุปจำนวน
*/
const fetchDataSummary = async () => {
dataNum.value = [];
loaderPage(true);
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(() => {
loaderPage(false);
});
};
const downloadFileDashboard = async () => {
loaderPage(true);
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((e) => {
messageError($q, e);
})
.finally(() => {
loaderPage(false);
});
};
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 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}`);
}
};
/**
* แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
* @param val ช่วงวันที่
*/
const dateThaiRange = (val: [Date, Date]) => {
if (val === null) {
} else if (date2Thai(val[0]) === date2Thai(val[1])) {
return `${date2Thai(val[0])}`;
} else {
return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
}
};
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>