จัดโค้ดบรรจุ รายชื่อผู้สอบผ่าน
This commit is contained in:
setthawutttty
parent
eb80e5e267
commit
9f9879202e
9 changed files with 527 additions and 411 deletions
|
|
@ -1,13 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref, reactive } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { usePlacementDataStore } from "@/modules/05_placement/store";
|
||||
import type { QTableProps } from "quasar";
|
||||
import type {
|
||||
DataOption,
|
||||
DataOption1,
|
||||
} from "@/modules/05_placement/interface/index/Main";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { usePlacementDataStore } from "@/modules/05_placement/store";
|
||||
|
||||
import router from "@/router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
|
@ -17,7 +18,59 @@ const $q = useQuasar();
|
|||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
||||
|
||||
// หัวตาราง
|
||||
const searchYear = ref();
|
||||
const yearOptions = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
|
||||
const dataPlacement = ref<any>([]);
|
||||
const yearOptionsFn = ref<any>([]);
|
||||
|
||||
/**ข้อมูลตาราง (จำลอง)*/
|
||||
const rows = ref<QTableProps["rows"]>([]);
|
||||
|
||||
/** ค้นหาในตาราง */
|
||||
const filterKeyword = ref<string>("");
|
||||
const filterRef = ref<any>(null);
|
||||
const resetFilter = () => {
|
||||
filterKeyword.value = "";
|
||||
filterRef.value.focus();
|
||||
};
|
||||
|
||||
/**ครั้งที่สอบ */
|
||||
const examTime = ref<number | string>("");
|
||||
const examTimeOP = reactive<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
|
||||
const addedExamTimeValues: Set<number> = new Set();
|
||||
|
||||
/** ประเภทการสอบ */
|
||||
const examType = ref<string | null>("");
|
||||
const examTypeOP = ref<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
|
||||
const addedExamTypeValues: Set<string> = new Set();
|
||||
|
||||
/** บัญชีหมดอายุ */
|
||||
const expiredAccount = ref<boolean>(false);
|
||||
const examTimeOP2 = ref<any[]>([]);
|
||||
const examTypeOP2 = ref<any[]>([]);
|
||||
|
||||
const paging = ref<boolean>(true);
|
||||
const pagination = ref({
|
||||
sortBy: "accountStartDate",
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
|
||||
/** ส่วนเเสดงผล ตาราง */
|
||||
const visibleColumns = ref([
|
||||
"id",
|
||||
"examRound",
|
||||
"examOrder",
|
||||
"examOrder",
|
||||
"fiscalYear",
|
||||
"numberOfCandidates",
|
||||
"examTypeName",
|
||||
"accountStartDate",
|
||||
"accountExpirationDate",
|
||||
]);
|
||||
|
||||
/**หัวตาราง */
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "id",
|
||||
|
|
@ -96,28 +149,12 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
// ข้อมูลตาราง (จำลอง)
|
||||
const rows = ref<QTableProps["rows"]>([]);
|
||||
const searchYear = ref();
|
||||
const yearOptions = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
|
||||
|
||||
const dataPlacement = ref<any>([]);
|
||||
const visibleColumns = ref([
|
||||
"id",
|
||||
"examRound",
|
||||
"examOrder",
|
||||
"examOrder",
|
||||
"fiscalYear",
|
||||
"numberOfCandidates",
|
||||
"examTypeName",
|
||||
"accountStartDate",
|
||||
"accountExpirationDate",
|
||||
]);
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchYearOptions();
|
||||
});
|
||||
const fetchPlacementData = async (val: number) => {
|
||||
/**
|
||||
* ฟังชั่น get ข้อมูลตามปี
|
||||
* @param val ปี ค.ส. โดยที่ทั้งหมดเป็น เลข 0
|
||||
*/
|
||||
async function fetchPlacementData(val: number) {
|
||||
showLoader();
|
||||
rows.value = [];
|
||||
await http
|
||||
|
|
@ -155,9 +192,10 @@ const fetchPlacementData = async (val: number) => {
|
|||
expiredAccount.value = false;
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
const fetchYearOptions = async () => {
|
||||
/** ฟังชั่น get ปี ค.ส. */
|
||||
async function fetchYearOptions() {
|
||||
await http
|
||||
.get(config.API.yearOptions())
|
||||
.then((res) => {
|
||||
|
|
@ -174,32 +212,27 @@ const fetchYearOptions = async () => {
|
|||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
};
|
||||
const filterYear = () => {
|
||||
}
|
||||
|
||||
/** ฟังชั่นเช็ค ค่า Null
|
||||
* เมื่อ != null เอาค่าส่งไปฟังชั่น get data
|
||||
*/
|
||||
function filterYear() {
|
||||
if (searchYear.value !== null) {
|
||||
fetchPlacementData(searchYear.value);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// ดูรายการสอบแข่งขัน หน้าต่อไป
|
||||
const redirectToPage = (examId?: number) => {
|
||||
/**
|
||||
* ดูรายการสอบแข่งขัน หน้าต่อไป
|
||||
* @param examId id ระบุ รอบการสอบ
|
||||
*/
|
||||
function redirectToPage(examId?: number) {
|
||||
router.push(`/placement/personal-list/${examId}`);
|
||||
};
|
||||
}
|
||||
|
||||
//-------------------|ค้นหาในตาราง|-----------------//
|
||||
const filterKeyword = ref<string>("");
|
||||
const filterRef = ref<any>(null);
|
||||
const resetFilter = () => {
|
||||
filterKeyword.value = "";
|
||||
filterRef.value.focus();
|
||||
};
|
||||
|
||||
//-------------------|ครั้งที่สอบ|------------------------------//
|
||||
const examTime = ref<number | string>("");
|
||||
const examTimeOP = reactive<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
|
||||
const addedExamTimeValues: Set<number> = new Set();
|
||||
|
||||
const examTimeFilter = async () => {
|
||||
/** ฟิลเตอร์หาครั้งที่สอบ ตาม ปี */
|
||||
async function examTimeFilter() {
|
||||
for (const data of dataPlacement.value) {
|
||||
const examOrder = data.examOrder;
|
||||
if (examOrder !== null && !addedExamTimeValues.has(examOrder)) {
|
||||
|
|
@ -212,13 +245,9 @@ const examTimeFilter = async () => {
|
|||
if (b.id === "all") return 1;
|
||||
return Number(a.id) - Number(b.id);
|
||||
}); // เรียงลำดับตาม id ที่แปลงเป็นตัวเลข
|
||||
};
|
||||
}
|
||||
|
||||
// ประเภทการสอบ
|
||||
const examType = ref<string | null>("");
|
||||
const examTypeOP = ref<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
|
||||
const addedExamTypeValues: Set<string> = new Set();
|
||||
const examTypeFilter = () => {
|
||||
function examTypeFilter() {
|
||||
dataPlacement.value.forEach((item: any) => {
|
||||
const examTypeName = item.examTypeName;
|
||||
const examTypeValue = item.examTypeValue;
|
||||
|
|
@ -230,9 +259,10 @@ const examTypeFilter = () => {
|
|||
addedExamTypeValues.add(examTypeName);
|
||||
}
|
||||
});
|
||||
};
|
||||
//--------------|ฟิลเตอร์|--------------------------------------//
|
||||
const searchFilterTable = async () => {
|
||||
}
|
||||
|
||||
/** ฟิลเตอร์ */
|
||||
async function searchFilterTable() {
|
||||
rows.value = [];
|
||||
if (examType.value !== undefined && examType.value !== null) {
|
||||
await DataStore.DataUpdateMain(
|
||||
|
|
@ -257,31 +287,29 @@ const searchFilterTable = async () => {
|
|||
});
|
||||
rows.value = dataArr;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
//----------------|บัญชีหมดอายุ|-----------------------------//
|
||||
const expiredAccount = ref<boolean>(false);
|
||||
const expiredAccountFilter = async () => {
|
||||
/** บัญชีหมดอายุ */
|
||||
async function expiredAccountFilter() {
|
||||
const updatedRows = dataPlacement.value.map((data: any) => {
|
||||
let isExpired = data.isExpired == expiredAccount;
|
||||
return { ...data, isExpired };
|
||||
});
|
||||
await DataStore.DataMain(updatedRows);
|
||||
};
|
||||
}
|
||||
|
||||
const paging = ref<boolean>(true);
|
||||
const pagination = ref({
|
||||
sortBy: "accountStartDate",
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
const paginationLabel = (start: number, end: number, total: number) => {
|
||||
function paginationLabel(start: number, end: number, total: number){
|
||||
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
// filter ใน dropdown ครั้งที่
|
||||
const examTimeOP2 = ref<any[]>([]);
|
||||
|
||||
/** filter ใน dropdown ครั้งที่ */
|
||||
|
||||
/**
|
||||
* ฟังชั่น กรอกข้อมูลเพื่อ ค้นหา
|
||||
* @param val ค่าที่กรอก
|
||||
* @param update afterFn ของ quasar
|
||||
*/
|
||||
function filterFnexamTime(val: string, update: any) {
|
||||
if (val === "") {
|
||||
update(() => {
|
||||
|
|
@ -295,7 +323,12 @@ function filterFnexamTime(val: string, update: any) {
|
|||
});
|
||||
}
|
||||
}
|
||||
const examTypeOP2 = ref<any[]>([]);
|
||||
|
||||
/**
|
||||
* ฟังชั่น กรอกข้อมูลเพื่อ ค้นหา
|
||||
* @param val ค่าที่กรอก
|
||||
* @param update afterFn ของ quasar
|
||||
*/
|
||||
function filterFnExamtype(val: string, update: any) {
|
||||
if (val === "") {
|
||||
update(() => {
|
||||
|
|
@ -309,7 +342,12 @@ function filterFnExamtype(val: string, update: any) {
|
|||
});
|
||||
}
|
||||
}
|
||||
const yearOptionsFn = ref<any>([]);
|
||||
|
||||
/**
|
||||
* ฟังชั่น กรอกข้อมูลเพื่อ ค้นหา
|
||||
* @param val ค่าที่กรอก
|
||||
* @param update afterFn ของ quasar
|
||||
*/
|
||||
function filterFnYear(val: string, update: any) {
|
||||
if (val === "") {
|
||||
update(() => {
|
||||
|
|
@ -323,6 +361,11 @@ function filterFnYear(val: string, update: any) {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** เรียกใช้ฟังชั่น เมื่อเริ่มหน้านี้ */
|
||||
onMounted(async () => {
|
||||
await fetchYearOptions();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -357,7 +400,9 @@ function filterFnYear(val: string, update: any) {
|
|||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-space />
|
||||
|
||||
<q-input
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
standout
|
||||
|
|
@ -378,6 +423,7 @@ function filterFnYear(val: string, update: any) {
|
|||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
v-model="visibleColumns"
|
||||
|
|
@ -393,6 +439,7 @@ function filterFnYear(val: string, update: any) {
|
|||
options-cover
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-card bordered class="col-12 filter-card q-pa-sm">
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
|
|
@ -424,6 +471,7 @@ function filterFnYear(val: string, update: any) {
|
|||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-select
|
||||
class="col-xs-12 col-sm-3 col-md-3"
|
||||
v-model="examType"
|
||||
|
|
@ -452,6 +500,7 @@ function filterFnYear(val: string, update: any) {
|
|||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-toggle
|
||||
class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
|
||||
v-model="expiredAccount"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue