ผูก api หน้า รายการหน้าเเข่งขัน
This commit is contained in:
setthawutttty
parent
27b966291c
commit
f3ad4d21fb
2 changed files with 58 additions and 62 deletions
|
|
@ -115,7 +115,7 @@ const rows = ref<FormPlacementMainData[]>([
|
|||
examOrder: 0,
|
||||
fiscalYear: 0,
|
||||
numberOfCandidates: 0,
|
||||
examTypeValue:"",
|
||||
examTypeValue: "",
|
||||
examTypeName: "",
|
||||
accountStartDate: "",
|
||||
accountExpirationDate: "",
|
||||
|
|
@ -126,23 +126,21 @@ let OriginalData = ref<FormPlacementMainData[]>([]);
|
|||
let UpdataData = ref<FormPlacementMainData[]>([]);
|
||||
|
||||
const OriginalDataFetch = async (year: number) => {
|
||||
await http
|
||||
.get(config.API.MainDetail(year)) // ส่งปีที่เลือกมาเป็นอาร์กิวเมนต์ในการเรียก API
|
||||
.then(async (res: any) => {
|
||||
console.log("🚀 ~ file: Main.vue:160 ~ .then ~ res:", res.data.result);
|
||||
await DataStore.DataMain(res.data.result);
|
||||
OriginalData.value = await DataStore.DataMainOrig;
|
||||
UpdataData.value = OriginalData.value;
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {});
|
||||
try {
|
||||
const response = await http.get(config.API.MainDetail(year));
|
||||
const apiData = response.data.result;
|
||||
console.log("🚀 ~ file: Main.vue:160 ~ .then ~ res:", apiData);
|
||||
await DataStore.DataMain(apiData);
|
||||
OriginalData.value = await DataStore.DataMainOrig;
|
||||
UpdataData.value = OriginalData.value;
|
||||
} catch (error) {
|
||||
messageError($q, error);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await fiscalYearFilter(); // เรียกใช้ await เพื่อรอให้ fiscalYearFilter() เสร็จสิ้น
|
||||
await OriginalDataFetch(fiscalyear.value); // ส่งค่าปีที่เลือกจาก fiscalyear เป็นอาร์กิวเมนต์ให้กับ OriginalDataFetch()
|
||||
await fiscalYearFilter();
|
||||
await OriginalDataFetch(fiscalyear.value);
|
||||
examTimeFilter();
|
||||
await examTypeFilter();
|
||||
expiredAccountFilter();
|
||||
|
|
@ -151,13 +149,12 @@ onMounted(async () => {
|
|||
|
||||
// ดูรายการสอบแข่งขัน หน้าต่อไป
|
||||
const redirectToPage = (examId?: number) => {
|
||||
// router.push({ name: 'placementDetail'});
|
||||
router.push(`/placement/pass/${examId}`);
|
||||
};
|
||||
|
||||
// เลือกปีงบประมาณ
|
||||
//-------------------|เลือกปีงบประมาณ|-----------------------//
|
||||
const fiscalyear = ref<number>(0);
|
||||
const fiscalyearOP = reactive<DataOption[]>([{ id: "", name: "ทั้งหมด" }]);
|
||||
const fiscalyearOP = reactive<DataOption[]>([{ id: null, name: "ทั้งหมด" }]);
|
||||
const addedfiscalYearValues: number[] = [];
|
||||
const fiscalYearFilter = async () => {
|
||||
let maxYear = 0; // เพิ่มตัวแปร maxYear
|
||||
|
|
@ -182,22 +179,19 @@ const fiscalYearFilter = async () => {
|
|||
});
|
||||
};
|
||||
|
||||
// เลือกปีงบประมาณตาม API
|
||||
//-------------------|เลือกปีงบประมาณตาม API|--------------------//
|
||||
const searchfiscalyear = async () => {
|
||||
console.log("Input value changed:", fiscalyear.value);
|
||||
// API
|
||||
await http
|
||||
.get(config.API.yearOptions())
|
||||
.then((res: any) => {
|
||||
console.log("🚀date", res);
|
||||
})
|
||||
.then((res: any) => {})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {});
|
||||
};
|
||||
|
||||
// ค้นหาในตาราง
|
||||
//-------------------|ค้นหาในตาราง|-----------------//
|
||||
const filterKeyword = ref<string>("");
|
||||
const filterRef = ref<any>(null);
|
||||
const resetFilter = () => {
|
||||
|
|
@ -216,37 +210,40 @@ const visibleColumns = ref<any[]>([
|
|||
"examTypeName",
|
||||
"accountStartDate",
|
||||
"accountExpirationDate",
|
||||
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
|
||||
]);
|
||||
|
||||
//-------------------|ครั้งที่สอบ|------------------------------//
|
||||
const examTime = ref<number | string>("all");
|
||||
const examTimeOP = reactive<DataOption[]>([]);
|
||||
const addedExamTimeValues: Set<number> = new Set();
|
||||
|
||||
// ครั้งที่สอบ
|
||||
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.push({ id: "all", name: "ทั้งหมด" });
|
||||
|
||||
for (const data of OriginalData.value) {
|
||||
const examOrder = data.examOrder;
|
||||
if (examOrder !== null && !addedExamTimeValues.has(examOrder)) {
|
||||
examTimeOP.push({ id: examOrder.toString(), name: examOrder.toString() });
|
||||
addedExamTimeValues.add(examOrder);
|
||||
}
|
||||
}
|
||||
examTimeOP.value.sort((a, b) => a - b); // เรียงลำดับ
|
||||
examTimeOP.sort((a, b) => {
|
||||
if (a.id === "all") return -1; // ให้ตัวเลือก "ทั้งหมด" อยู่ด้านหน้า
|
||||
if (b.id === "all") return 1;
|
||||
return Number(a.id) - Number(b.id);
|
||||
}); // เรียงลำดับตาม id ที่แปลงเป็นตัวเลข
|
||||
};
|
||||
|
||||
// ประเภทการสอบ
|
||||
|
||||
const examType = ref<string | null>("");
|
||||
const examTypeOP = reactive<DataOption[]>([
|
||||
{ id: "", name: "ทั้งหมด" },
|
||||
]);
|
||||
const examType = ref<string | null>("all");
|
||||
const examTypeOP = ref<DataOption[]>([{ id: "all", name: "ทั้งหมด" }]);
|
||||
const addedExamTypeValues: Set<string> = new Set();
|
||||
const examTypeFilter = async () => {
|
||||
const examTypeFilter = () => {
|
||||
for (const data of OriginalData.value) {
|
||||
const examTypeName = data.examTypeName;
|
||||
const examTypeValue = data.examTypeValue;
|
||||
|
||||
if (
|
||||
examTypeName &&
|
||||
!addedExamTypeValues.has(examTypeName)
|
||||
) {
|
||||
examTypeOP.push({
|
||||
if (examTypeName && !addedExamTypeValues.has(examTypeName)) {
|
||||
examTypeOP.value.push({
|
||||
id: examTypeValue,
|
||||
name: examTypeName,
|
||||
});
|
||||
|
|
@ -254,8 +251,7 @@ const addedExamTypeValues: Set<string> = new Set();
|
|||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//--------------|ฟิลเตอร์|--------------------------------------//
|
||||
const searchFilterTable = async () => {
|
||||
if (examType.value !== undefined && examType.value !== null) {
|
||||
await DataStore.DataUpdateMain(
|
||||
|
|
@ -267,7 +263,7 @@ const searchFilterTable = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
// บัญชีหมดอายุ
|
||||
//----------------|บัญชีหมดอายุ|-----------------------------//
|
||||
const expiredAccount = ref<boolean>(false);
|
||||
const expiredAccountFilter = async () => {
|
||||
const currentDate = new Date();
|
||||
|
|
@ -382,9 +378,9 @@ const paginationLabel = (start: string, end: string, total: string) => {
|
|||
dense
|
||||
emit-value
|
||||
map-options
|
||||
option-label="examTypeName"
|
||||
option-label="name"
|
||||
:options="examTypeOP"
|
||||
option-value="examTypeValue"
|
||||
option-value="id"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="false"
|
||||
|
|
|
|||
|
|
@ -104,33 +104,33 @@ export const usePlacementDataStore = defineStore("placement", () => {
|
|||
(DataMainYear.value = val);
|
||||
const DataMain = (val: FormPlacementMainData[]) => (DataMainOrig.value = val);
|
||||
const DataUpdateMain = (
|
||||
filter_1: number | null,
|
||||
filter_1: number | string,
|
||||
filter_2: string | null,
|
||||
filter_3: boolean
|
||||
) => {
|
||||
DataMainUpdate.value = [];
|
||||
if (filter_1 === null && filter_2 === "" && filter_3 === false) {
|
||||
if (filter_1 === "all" && filter_2 === "all" && filter_3 === false) {
|
||||
// console.log('case 1');
|
||||
// return DataMainUpdate.value = DataMainOrig.value; อันเก่า
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 === null && filter_2 === "" && filter_3 === false) {
|
||||
} else if (filter_1 === "all" && filter_2 === "all" && filter_3 === false) {
|
||||
// console.log('case 1.1');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 !== null && filter_2 === "" && filter_3 === false) {
|
||||
} else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === false) {
|
||||
// console.log('case 2');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.examOrder === filter_1 && item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 !== null && filter_2 === "" && filter_3 === false) {
|
||||
} else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === false) {
|
||||
// console.log('case 2.1');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.examOrder === filter_1 && item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 !== null && filter_2 !== "" && filter_3 === false) {
|
||||
} else if (filter_1 !== "all" && filter_2 !== "all" && filter_3 === false) {
|
||||
// console.log('case 2.2');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) =>
|
||||
|
|
@ -138,32 +138,32 @@ export const usePlacementDataStore = defineStore("placement", () => {
|
|||
item.examTypeValue === filter_2 &&
|
||||
item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 === null && filter_2 !== "" && filter_3 === false) {
|
||||
} else if (filter_1 === "all" && filter_2 !== "all" && filter_3 === false) {
|
||||
// console.log('case 3');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.examTypeValue === filter_2 && item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 === null && filter_2 === "" && filter_3 === true) {
|
||||
} else if (filter_1 === "all" && filter_2 === "all" && filter_3 === true) {
|
||||
// console.log('case 3.1');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 === null && filter_2 === "" && filter_3 === true) {
|
||||
} else if (filter_1 === "all" && filter_2 === "all" && filter_3 === true) {
|
||||
// console.log('case 3.2');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.isExpired === filter_3
|
||||
));
|
||||
} else if (filter_1 !== null && filter_2 === "" && filter_3 === true) {
|
||||
} else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === true) {
|
||||
// console.log('case 3.3');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.examOrder == filter_1 && item.isExpired == filter_3
|
||||
));
|
||||
} else if (filter_1 !== null && filter_2 === "" && filter_3 === true) {
|
||||
} else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === true) {
|
||||
// console.log('case 3.4');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.examOrder == filter_1 && item.isExpired == filter_3
|
||||
));
|
||||
} else if (filter_1 !== null && filter_2 !== "" && filter_3 === true) {
|
||||
} else if (filter_1 !== "all" && filter_2 !== "all" && filter_3 === true) {
|
||||
// console.log('case 3.5');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) =>
|
||||
|
|
@ -171,7 +171,7 @@ export const usePlacementDataStore = defineStore("placement", () => {
|
|||
item.examTypeValue == filter_2 &&
|
||||
item.isExpired == filter_3
|
||||
));
|
||||
} else if (filter_1 === null && filter_2 !== "" && filter_3 === true) {
|
||||
} else if (filter_1 === "all" && filter_2 !== "all" && filter_3 === true) {
|
||||
// console.log('case 3.6');
|
||||
return (DataMainUpdate.value = DataMainOrig.value.filter(
|
||||
(item) => item.examTypeValue == filter_2 && item.isExpired == filter_3
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue