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

รายการสอบแข่งขัน / คัดเลือก => Done

Browse source
This commit is contained in:
watcharanondh 2023-06-08 14:31:25 +07:00
parent 0be28f93f6
commit ccf9aa86ab
4 changed files with 177 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/modules/05_placement/interface/index/Main.ts
View file

@ -1 +1,7 @@
export type {};
interface DataOption {
id: number;
name: string;
}
export type { DataOption };

16
src/modules/05_placement/interface/request/Main.ts
View file

@ -1 +1,15 @@
export type {};
// ข้อมูลรายการสอบแข่งขัน/คัดเลือก
interface FormPlacementMainData {
id: number;
ExamRound: string;
ExamOrder: number;
FiscalYear: number;
NumberofCandidates: number;
ExamType: number;
AccountExpirationDate: string;
isExpired?: boolean;
}
export type { FormPlacementMainData };

15
src/modules/05_placement/store.ts
View file

@ -1,5 +1,6 @@
import { defineStore } from "pinia";
import { ref, computed } from "vue";
import { ref } from "vue";
import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main"
export const useProfileDataStore = defineStore("placement", () => {
return {};
});
@ -25,8 +26,20 @@ export const usePlacementDataStore = defineStore("placement", () => {
);
}
let DataMainOrig = ref<FormPlacementMainData[]>([]) // ข้อมูลหลัก
let DataMainUpdate = ref<FormPlacementMainData[]>([]) // ข้อมูลเปลี่ยนแปลง
const DataMain = (val: any) => (DataMainOrig.value = val)
const DataUpdateMain = (val: any) => {
DataMainUpdate.value = [];
DataMainUpdate.value = val;
}
return {
placementData,
changePlacementColumns,
DataMainOrig,
DataMainUpdate,
DataMain,
DataUpdateMain,
};
});

193
src/modules/05_placement/views/Main.vue
View file

@ -1,8 +1,14 @@
<script setup lang="ts">
import { ref, useAttrs, watch } from 'vue';
import { onMounted, reactive, ref, useAttrs } from 'vue';
import type { QTableProps } from 'quasar';
import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin";
import { usePlacementDataStore } from "@/modules/05_placement/store";
import router from '@/router';
const DataStore = usePlacementDataStore()
const mixin = useCounterMixin();
const { dateText } = mixin;
@ -11,6 +17,7 @@ const textDate = (value: Date) => {
return dateText(value);
};
// หัวตาราง
const columns = ref<QTableProps["columns"]>([
{
name: "id",
@ -85,53 +92,72 @@ const columns = ref<QTableProps["columns"]>([
},
]);
const rows = [{
// ข้อมูลตาราง (จำลอง)
const rows = ref<FormPlacementMainData[]>([{
id: 1,
ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
ExamOrder: 3,
FiscalYear: 2566,
FiscalYear: 2023,
NumberofCandidates: 8,
ExamType: 0,
ExamType: 1,
AccountExpirationDate: "2023-02-28T14:47:04.1785384Z"
},
{
id: 2,
ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
ExamOrder: 2,
FiscalYear: 2566,
FiscalYear: 2023,
NumberofCandidates: 12,
ExamType: 0,
ExamType: 1,
AccountExpirationDate: "2023-02-28T14:47:04.1785384Z"
},
{
id: 3,
ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
ExamOrder: 2,
FiscalYear: 2566,
FiscalYear: 2023,
NumberofCandidates: 20,
ExamType: 0,
ExamType: 1,
AccountExpirationDate: "2023-01-31T14:47:04.1785384Z"
},
{
id: 4,
ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
ExamOrder: 2,
FiscalYear: 2566,
FiscalYear: 2022,
NumberofCandidates: 16,
ExamType: 1,
ExamType: 2,
AccountExpirationDate: "2023-11-30T14:47:04.1785384Z"
},
{
id: 5,
ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
ExamOrder: 1,
FiscalYear: 2566,
FiscalYear: 2021,
NumberofCandidates: 20,
ExamType: 1,
AccountExpirationDate: "2023-05-21T14:47:04.1785384Z",
ExamType: 2,
AccountExpirationDate: "2024-05-21T14:47:04.1785384Z",
},
];
]);
let OriginalData = ref<FormPlacementMainData[]>([]);
let UpdataData = ref<FormPlacementMainData[]>([]);
const OriginalDataFetch = async () => {
await DataStore.DataMain(rows.value)
OriginalData.value = await DataStore.DataMainOrig
UpdataData.value = OriginalData.value
}
onMounted( async () => {
await OriginalDataFetch()
fiscalyearfilter()
examTimefilter()
examTypefilter()
})
// ดูรายการสอบแข่งขัน หน้าต่อไป
const redirectToPage = (id:number) => {
router.push({
name: 'placementDetail',
@ -141,54 +167,114 @@ const redirectToPage = (id:number) => {
});
};
interface DataOption {
id: number;
name: string;
// เลือกปีงบประมาณ
const fiscalyear = ref<number | null>(0);
const fiscalyearOP = reactive<DataOption[]>([{id: 0, name: 'ทั้งหมด'}]);
const addedFiscalYearValues: number[] = [];
const fiscalyearfilter = async () => {
for (let data of OriginalData.value) {
const year = data.FiscalYear + 543;
if (fiscalyear.value == 0 && !addedFiscalYearValues.includes(1)) {
fiscalyearOP.push({ id: 0, name: "ทั้งหมด" });
addedFiscalYearValues.push(1);
} else if (!addedFiscalYearValues.includes(year)) {
fiscalyearOP.push({ id: year, name: year.toString() });
addedFiscalYearValues.push(year);
}
}
}
const fiscalyear = ref<string>(""); // เลือกปีงบประมาณ
const fiscalyearOP = ref<DataOption[]>([
{id: 1, name: "2566"},
{id: 2, name: "2565"},
{id: 3, name: "2564"},
]);
// เลือกปีงบประมาณตาม API
const searchFiscalyear = () => {
// API
console.log('Input value changed:', fiscalyear.value);
};
const filterInput = ref<string>(""); // ค้นหา
// ค้นหาในตาราง
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
filterInput.value = "";
filterKeyword.value = "";
filterRef.value.focus();
};
const attrs = ref<any>(useAttrs());
const visibleColumns = ref<string[]>([ 'id', 'ExamRound', 'ExamOrder', 'FiscalYear', 'NumberofCandidates', 'ExamType', 'AccountExpirationDate']) //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
// ครั้งที่สอบ
const examTime = ref<number | null>(null);
const examTimeOP = ref<number[]>([]);
const examTimefilter = async () => {
for (let data of OriginalData.value) {
if (!examTimeOP.value.includes(data.ExamOrder)) {
examTimeOP.value.push(data.ExamOrder);
}
}
examTimeOP.value.sort((a, b) => a - b); // เรียงลำดับ
}
const examTime = ref<string>(""); // ครั้งที่สอบ
const examTimeOP = ref<DataOption[]>([]);
examTimeOP.value = rows.map((item) => ({
id: item.id,
name: item.ExamOrder.toString(),
}));
examTimeOP.value.sort((a, b) => {
return parseInt(a.name) - parseInt(b.name);
});
// console.log(examTimeOP.value);
// แสดงครั้งที่สอบตามที่เลือก
const searchExamTime = async () => {
if (examTime.value !== null) {
const selectExamTime = OriginalData.value.filter((data: { ExamOrder: number | null; }) => data.ExamOrder === examTime.value);
await DataStore.DataUpdateMain(selectExamTime);
UpdataData.value = DataStore.DataMainUpdate
} else {
OriginalDataFetch();
}
};
// ประเภทการสอบ
const examType = ref<number | null>(0);
const examTypeOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
const addedExamTypeValues: number[] = [];
const examTypefilter = async () => {
for (let data of OriginalData.value) {
const examTypeValue = data.ExamType;
if (examTypeValue == 1 && !addedExamTypeValues.includes(1)) {
examTypeOP.push({ id: 1, name: "คัดเลือก" });
addedExamTypeValues.push(1);
} else if (examTypeValue == 2 && !addedExamTypeValues.includes(2)) {
examTypeOP.push({ id: 2, name: "สอบแข่งขัน" });
addedExamTypeValues.push(2);
}
}
}
const examType = ref<string>(""); // ประเภทการสอบ
const examTypeOP = ref<DataOption[]>([
{id: 0, name: "แข่งขัน"},
{id: 1, name: "คัดเลือก"},
]);
// แสดงประเภทการสอบตามที่เลือก
const searchExamType = async () => {
if (examType.value !== null) {
const selectExamType = OriginalData.value.filter((data: { ExamType: number | null; }) => {
if (examType.value === 0) {
OriginalDataFetch();
return data.ExamType === 1 || data.ExamType === 2;
} else {
return data.ExamType === examType.value;
}
});
await DataStore.DataUpdateMain(selectExamType);
UpdataData.value = DataStore.DataMainUpdate
}
};
// บัญชีหมดอายุ
const expiredAccount = ref<boolean>(false);
const searchExpiredAccount = async () => {
const currentDate = new Date();
const updatedRows = OriginalData.value.map((data) => {
let expirationDate = new Date(data.AccountExpirationDate);
let isExpired = expirationDate < currentDate;
const expiredAccount = ref<boolean>(false); // บัญชีหมดอายุ
return { ...data, isExpired };
});
if (expiredAccount.value) {
const expiredRows = updatedRows.filter((data) => data.isExpired);
await DataStore.DataUpdateMain(expiredRows);
UpdataData.value = DataStore.DataMainUpdate
} else {
OriginalDataFetch();
}
};
const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
@ -214,16 +300,16 @@ const paginationLabel = (start: string, end: string, total: string) => {
clearable
emit-value
map-options
option-label="name"
:options="fiscalyearOP"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
@change="searchFiscalyear"
@update:model-value="searchFiscalyear"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-6"></div>
@ -231,7 +317,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
<q-input
standout
dense
v-model="filterInput"
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
@ -239,9 +325,9 @@ const paginationLabel = (start: string, end: string, total: string) => {
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="filterInput == ''" name="search" />
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterInput !== ''"
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
@ -278,15 +364,16 @@ const paginationLabel = (start: string, end: string, total: string) => {
clearable
emit-value
map-options
option-label="name"
:options="examTimeOP"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
@update:model-value="searchExamTime"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
@ -306,6 +393,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
@update:model-value="searchExamType"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
@ -314,6 +402,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
class="toggle-expired-account"
color="blue"
label="แสดงบัญชีหมดอายุ"
@update:model-value="searchExpiredAccount"
/>
</div>
</div>
@ -323,14 +412,14 @@ const paginationLabel = (start: string, end: string, total: string) => {
<q-table
ref="table"
:columns="columns"
:rows="rows"
:rows="UpdataData"
:filter="filterKeyword"
row-key="id"
flat
bordered
dense
class="custom-header-table"
v-bind="attrs"
:filter="filterInput"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
>
@ -346,7 +435,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
{{ props.row.ExamOrder }}
</q-td>
<q-td key="FiscalYear" :props="props">
{{ props.row.FiscalYear }}
{{ props.row.FiscalYear + 543 }}
</q-td>
<q-td key="NumberofCandidates" :props="props">
{{ props.row.NumberofCandidates }}