diff --git a/src/modules/05_leave/componenst/ListCalendar.vue b/src/modules/05_leave/componenst/ListCalendar.vue index 49988f3..38adbc3 100644 --- a/src/modules/05_leave/componenst/ListCalendar.vue +++ b/src/modules/05_leave/componenst/ListCalendar.vue @@ -58,9 +58,9 @@ const view = async (text: string) => { onMounted(async () => { searchFilterTable(); fecthList([ - { no: "1", date: "2023-09-20", type: "1", status: "4", year: "1" }, - { no: "2", date: "2023-09-19", type: "1", status: "2", year: "1" }, - { no: "3", date: "2023-09-10", type: "2", status: "3", year: "1" }, + { no: "1", date: "2023-09-20", type: "1", status: "4", year: "2023" }, + { no: "2", date: "2023-09-19", type: "1", status: "2", year: "2023" }, + { no: "3", date: "2023-09-10", type: "2", status: "3", year: "2023" }, ]); }); diff --git a/src/modules/05_leave/componenst/Table.vue b/src/modules/05_leave/componenst/Table.vue index 859c1ee..7abfbe5 100644 --- a/src/modules/05_leave/componenst/Table.vue +++ b/src/modules/05_leave/componenst/Table.vue @@ -1,65 +1,103 @@ diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts index c28df00..0c558ae 100644 --- a/src/modules/05_leave/store.ts +++ b/src/modules/05_leave/store.ts @@ -1,290 +1,360 @@ -import { defineStore } from "pinia" -import { ref, computed } from "vue" -import type { QTableProps } from "quasar" -import type { FormLeavetMainData, OptionData, formListLeaveData } from "@/modules/05_leave/interface/index/main" -import { useCounterMixin } from "@/stores/mixin" +import { defineStore } from "pinia"; +import { ref, computed } from "vue"; +import type { QTableProps } from "quasar"; +import type { + FormLeavetMainData, + OptionData, + formListLeaveData, +} from "@/modules/05_leave/interface/index/main"; +import { useCounterMixin } from "@/stores/mixin"; export const useLeaveStore = defineStore("Leave", () => { - const tabValue = ref("calendar") - const typeLeave = ref("") - const mixin = useCounterMixin() - const { date2Thai } = mixin - const LeaveType = ref("0") - const LeaveStatus = ref("0") - const fiscalYearyear = ref("0") - const rows = ref([]) - const DataMainOrig = ref([]) // ข้อมูลหลักดั้งเดิม + const tabValue = ref("calendar"); + const typeLeave = ref(""); + const mixin = useCounterMixin(); + const { date2Thai } = mixin; + const LeaveType = ref("0"); + const LeaveStatus = ref("0"); + const fiscalYearyear = ref(new Date().getFullYear()); + const rows = ref([]); + const DataMainOrig = ref([]); // ข้อมูลหลักดั้งเดิม - async function fecthList(data: formListLeaveData[]) { - let datalist: formListLeaveData[] = data.map((e: any) => ({ - no: e.no, - type: e.type, - status: e.status, - date: e.date, - year: e.year, - })) - rows.value = datalist - DataMainOrig.value = datalist - } + async function fecthList(data: formListLeaveData[]) { + let datalist: formListLeaveData[] = data.map((e: any) => ({ + no: e.no, + type: e.type, + status: e.status, + date: e.date, + year: e.year, + })); + rows.value = datalist; + DataMainOrig.value = datalist; + } - const DataMainUpdate = ref([]) // ข้อมูลเปลี่ยนแปลง - const DataMain = (val: formListLeaveData[]) => (DataMainOrig.value = val) - const DataUpdate = (filterType: string, filterStatus: string, filterYear: string) => { - DataMainUpdate.value = [] + const DataMainUpdate = ref([]); // ข้อมูลเปลี่ยนแปลง + const DataMain = (val: formListLeaveData[]) => (DataMainOrig.value = val); + const DataUpdate = ( + filterType: string, + filterStatus: string, + filterYear: string + ) => { + DataMainUpdate.value = []; - if (filterType === "" && filterStatus === "" && filterYear === "") { - DataMainUpdate.value = DataMainOrig.value - } else if (filterType !== "" && filterStatus === "" && filterYear === "") { - DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.type === filterType) - } else if (filterType !== "" && filterStatus !== "" && filterYear === null) { - DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.type === filterType && item.status === filterStatus) - } else if (filterType !== "" && filterStatus === "" && filterYear !== "") { - DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.type === filterType && item.year === filterYear) - } else if (filterType === "" && filterStatus !== "" && filterYear === "") { - DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.status === filterStatus) - } else if (filterType === "" && filterStatus === "" && filterYear !== "") { - DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.year === filterYear) - } else if (filterType === "" && filterStatus !== "" && filterYear !== null) { - DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.status === filterStatus && item.year === filterYear) - } else if (filterType !== "" && filterStatus !== "" && filterYear === "") { - DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.status === filterStatus && item.type === filterType) - } else if (filterType !== "" && filterStatus !== "" && filterYear !== null) { - DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.type === filterType && item.status === filterStatus && item.year === filterYear) - } else if (filterType == "0" && filterStatus == "0" && filterYear !== null) { - DataMainUpdate.value = DataMainOrig.value - } - } + if (filterType === "" && filterStatus === "" && filterYear === "") { + DataMainUpdate.value = DataMainOrig.value; + } else if (filterType !== "" && filterStatus === "" && filterYear === "") { + DataMainUpdate.value = DataMainOrig.value.filter( + (item: formListLeaveData) => item.type === filterType + ); + } else if ( + filterType !== "" && + filterStatus !== "" && + filterYear === null + ) { + DataMainUpdate.value = DataMainOrig.value.filter( + (item: formListLeaveData) => + item.type === filterType && item.status === filterStatus + ); + } else if (filterType !== "" && filterStatus === "" && filterYear !== "") { + DataMainUpdate.value = DataMainOrig.value.filter( + (item: formListLeaveData) => + item.type === filterType && item.year === filterYear + ); + } else if (filterType === "" && filterStatus !== "" && filterYear === "") { + DataMainUpdate.value = DataMainOrig.value.filter( + (item: formListLeaveData) => item.status === filterStatus + ); + } else if (filterType === "" && filterStatus === "" && filterYear !== "") { + DataMainUpdate.value = DataMainOrig.value.filter( + (item: formListLeaveData) => item.year === filterYear + ); + } else if ( + filterType === "" && + filterStatus !== "" && + filterYear !== null + ) { + DataMainUpdate.value = DataMainOrig.value.filter( + (item: formListLeaveData) => + item.status === filterStatus && item.year === filterYear + ); + } else if (filterType !== "" && filterStatus !== "" && filterYear === "") { + DataMainUpdate.value = DataMainOrig.value.filter( + (item: formListLeaveData) => + item.status === filterStatus && item.type === filterType + ); + } else if ( + filterType !== "" && + filterStatus !== "" && + filterYear !== null + ) { + DataMainUpdate.value = DataMainOrig.value.filter( + (item: formListLeaveData) => + item.type === filterType && + item.status === filterStatus && + item.year === filterYear + ); + } else if ( + filterType == "0" && + filterStatus == "0" && + filterYear !== null + ) { + DataMainUpdate.value = DataMainOrig.value; + } + }; - //--------------|ฟิลเตอร์|--------------------------------------// - const searchFilterTable = async () => { - rows.value = [] + //--------------|ฟิลเตอร์|--------------------------------------// + const searchFilterTable = async () => { + console.log("test"); - if (LeaveType.value !== undefined && LeaveType.value !== null) { - await DataUpdate(LeaveType.value === "0" ? "all" : LeaveType.value!, LeaveStatus.value === "0" ? "all" : LeaveStatus.value!, fiscalYearyear.value === "0" ? "all" : fiscalYearyear.value!) - let filteredData = DataMainOrig.value - if (LeaveType.value !== "0") { - filteredData = filteredData.filter((item: formListLeaveData) => item.type === LeaveType.value) - } - if (LeaveStatus.value !== "0") { - filteredData = filteredData.filter((item: formListLeaveData) => item.status === LeaveStatus.value) - } - if (fiscalYearyear.value !== "0") { - filteredData = filteredData.filter((item: formListLeaveData) => item.year === fiscalYearyear.value) - } - const dataArr: formListLeaveData[] = filteredData.map((e: any) => ({ - no: e.no, - type: convertType(e.type) || "", - status: convertStatus(e.status) || "", - date: date2Thai(new Date(e.date)), - year: e.year !== undefined ? e.year : "", - })) - rows.value = dataArr - } - } + rows.value = []; - /** - *ฟังก์ชั่นเลือก selector ที่ใช่ในการฟิลเตอร์ - * @param val ค่าที่ต้องการฟิลเตอร์ - * @param update อัพเดทค่า - * @param refData ดาต้าที่ต้องการฟิลเตอร์ - */ - const filterSelector = (val: any, update: Function, refData: string) => { - switch (refData) { - case "fiscalyearOP": - update(() => { - fiscalyearOP.value = fiscalyearOP.value.filter((v: any) => v.name.indexOf(val) > -1) - }) - break - case "LeaveTypeOption": - update(() => { - typeOptions.value = typeOptions.value.filter((v: any) => v.name.indexOf(val) > -1) - }) - break - case "LeaveStatusOption": - update(() => { - statusOptions.value = statusOptions.value.filter((v: any) => v.name.indexOf(val) > -1) - }) - break - default: - break - } - } + if (LeaveType.value !== undefined && LeaveType.value !== null) { + await DataUpdate( + LeaveType.value === "0" ? "all" : LeaveType.value!, + LeaveStatus.value === "0" ? "all" : LeaveStatus.value!, + fiscalYearyear.value === 0 ? "all" : fiscalYearyear.value?.toString()! + ); + let filteredData = DataMainOrig.value; - /** filter ปี */ - const fiscalyearOP = ref([ - { id: "0", name: "ทั้งหมด" }, - { id: "1", name: "2566" }, - { id: "2", name: "2567" }, - { id: "2", name: "2568" }, - ]) + if (LeaveType.value !== "0") { + filteredData = filteredData.filter( + (item: formListLeaveData) => item.type === LeaveType.value + ); + } + if (LeaveStatus.value !== "0") { + filteredData = filteredData.filter( + (item: formListLeaveData) => item.status === LeaveStatus.value + ); + } + if (fiscalYearyear.value !== 0) { + filteredData = filteredData.filter( + (item: formListLeaveData) => + item.year === fiscalYearyear.value?.toString() + ); + } + const dataArr: formListLeaveData[] = filteredData.map((e: any) => ({ + no: e.no, + type: convertType(e.type) || "", + status: convertStatus(e.status) || "", + date: date2Thai(new Date(e.date)), + year: e.year !== undefined ? e.year : "", + })); + rows.value = dataArr; + } + }; - /** - *ฟังก์ชั่นค้นหาแสดง option ของประเภทการลา - * @param val ค่าที่เเสดง - * @returns option ทั้งหมด - */ - function convertType(val: string) { - if (val == "0") return "ทั้งหมด" - else return options.value.find(x => x.id == val)?.name - } + /** + *ฟังก์ชั่นเลือก selector ที่ใช่ในการฟิลเตอร์ + * @param val ค่าที่ต้องการฟิลเตอร์ + * @param update อัพเดทค่า + * @param refData ดาต้าที่ต้องการฟิลเตอร์ + */ + const filterSelector = (val: any, update: Function, refData: string) => { + switch (refData) { + case "fiscalyearOP": + update(() => { + fiscalyearOP.value = fiscalyearOP.value.filter( + (v: any) => v.name.indexOf(val) > -1 + ); + }); + break; + case "LeaveTypeOption": + update(() => { + typeOptions.value = typeOptions.value.filter( + (v: any) => v.name.indexOf(val) > -1 + ); + }); + break; + case "LeaveStatusOption": + update(() => { + statusOptions.value = statusOptions.value.filter( + (v: any) => v.name.indexOf(val) > -1 + ); + }); + break; + default: + break; + } + }; - /** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/ - const optionsSpecific = ref([ - { id: "s0", name: "ลาไปศึกษาต่อ" }, - { id: "s1", name: "ลาฝึกอบรม" }, - { id: "s2", name: "ลาปฎิบัติการวิจัย" }, - { id: "s3", name: "ลาดูงาน" }, - ]) + /** filter ปี */ + const fiscalyearOP = ref([ + { id: "0", name: "ทั้งหมด" }, + { id: "1", name: "2566" }, + { id: "2", name: "2567" }, + { id: "2", name: "2568" }, + ]); - /** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ*/ - const optionsOrdination = ref([ - { id: "0", name: "ลาอุปสมบท" }, - { id: "1", name: "ลาประกอบพิธีฮัจย์ฯ" }, - ]) + /** + *ฟังก์ชั่นค้นหาแสดง option ของประเภทการลา + * @param val ค่าที่เเสดง + * @returns option ทั้งหมด + */ + function convertType(val: string) { + if (val == "0") return "ทั้งหมด"; + else return options.value.find((x) => x.id == val)?.name; + } - /** รายการข้อมูลประเภทใบลา */ - const options = ref([ - { id: "1", name: "ลาป่วย" }, - { id: "2", name: "ลากิจส่วนตัว" }, - { id: "3", name: "ลาคลอดบุตร" }, - { id: "4", name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" }, - { id: "5", name: "ลาพักผ่อน" }, - { id: "6", name: "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ" }, - { id: "7", name: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล" }, - { id: "8", name: "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน" }, - { id: "9", name: "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ" }, - { id: "10", name: "ลาติดตามคู่สมรส" }, - { id: "11", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" }, - ]) + /** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/ + const optionsSpecific = ref([ + { id: "s0", name: "ลาไปศึกษาต่อ" }, + { id: "s1", name: "ลาฝึกอบรม" }, + { id: "s2", name: "ลาปฎิบัติการวิจัย" }, + { id: "s3", name: "ลาดูงาน" }, + ]); - /** filter ประเภทการลา */ - const typeOptions = ref([{ id: "0", name: "ทั้งหมด" }, ...options.value]) + /** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ*/ + const optionsOrdination = ref([ + { id: "0", name: "ลาอุปสมบท" }, + { id: "1", name: "ลาประกอบพิธีฮัจย์ฯ" }, + ]); - /** สถานะของการลา */ - const statusOptions = ref([ - { id: "0", name: "ทั้งหมด" }, - { id: "1", name: "อนุมัติ" }, - { id: "2", name: "ไม่อนุมัติ" }, - { id: "3", name: "อยู่ระหว่างดำเนินการ" }, - { id: "4", name: "ใหม่" }, - ]) + /** รายการข้อมูลประเภทใบลา */ + const options = ref([ + { id: "1", name: "ลาป่วย" }, + { id: "2", name: "ลากิจส่วนตัว" }, + { id: "3", name: "ลาคลอดบุตร" }, + { id: "4", name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" }, + { id: "5", name: "ลาพักผ่อน" }, + { id: "6", name: "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ" }, + { id: "7", name: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล" }, + { id: "8", name: "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน" }, + { id: "9", name: "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ" }, + { id: "10", name: "ลาติดตามคู่สมรส" }, + { id: "11", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" }, + ]); - /** - *ฟังก์ชั่นค้นหาแสดง option ของสถานะ - * @param val ค่าที่เเสดง - * @returns option ทั้งหมด - */ - function convertStatus(val: string) { - if (val == "0") return "ทั้งหมด" - else return statusOptions.value.find(x => x.id == val)?.name - } + /** filter ประเภทการลา */ + const typeOptions = ref([ + { id: "0", name: "ทั้งหมด" }, + ...options.value, + ]); - /** data table filter & column ของรายการลา */ - const visibleColumns = ref(["no", "type", "date", "status"]) - const columns = ref([ - { - name: "no", - align: "left", - label: "ลำดับ", - sortable: true, - field: "no", - headerStyle: "font-size: 14px", - style: "font-size: 14px; width:5%;", - }, - { - name: "type", - align: "left", - label: "ประเภทการลา", - sortable: true, - field: "type", - headerStyle: "font-size: 14px", - style: "font-size: 14px; width:15%;", - }, - { - name: "date", - align: "left", - label: "วันที่ยื่นใบลา", - sortable: true, - field: "date", - headerStyle: "font-size: 14px", - style: "font-size: 14px; width:15%;", - }, - { - name: "status", - align: "left", - label: "สถานะ", - sortable: true, - field: "status", - headerStyle: "font-size: 14px", - style: "font-size: 14px; width:10%;", - }, - ]) + /** สถานะของการลา */ + const statusOptions = ref([ + { id: "0", name: "ทั้งหมด" }, + { id: "1", name: "อนุมัติ" }, + { id: "2", name: "ไม่อนุมัติ" }, + { id: "3", name: "อยู่ระหว่างดำเนินการ" }, + { id: "4", name: "ใหม่" }, + ]); - /** - *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา - * @param item ประเภทแบบฟอร์ม - * @param subitem ประเภทแบบฟอร์มย่อย - */ - function typeConvert(item: string, subitem: any) { - // console.log('first',item) - if (item !== "6" && item !== "8") { - typeLeave.value = convertSubtitle(item) - } else if (item === "6") { - typeLeave.value = convertSubtitleInfo(subitem) - } else if (item === "8") { - typeLeave.value = convertSubtitleInfo2(subitem) - } - } + /** + *ฟังก์ชั่นค้นหาแสดง option ของสถานะ + * @param val ค่าที่เเสดง + * @returns option ทั้งหมด + */ + function convertStatus(val: string) { + if (val == "0") return "ทั้งหมด"; + else return statusOptions.value.find((x) => x.id == val)?.name; + } - /** - *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา ลาอุปสมบท/ลาประกอบพิธีฮัจย์ - * @param val ค่า string - * @returns ส่งค่าที่แปลงแล้ว - */ - function convertSubtitle(val: string) { - return options.value.find(x => x.id == val)?.name - } + /** data table filter & column ของรายการลา */ + const visibleColumns = ref(["no", "type", "date", "status"]); + const columns = ref([ + { + name: "no", + align: "left", + label: "ลำดับ", + sortable: true, + field: "no", + headerStyle: "font-size: 14px", + style: "font-size: 14px; width:5%;", + }, + { + name: "type", + align: "left", + label: "ประเภทการลา", + sortable: true, + field: "type", + headerStyle: "font-size: 14px", + style: "font-size: 14px; width:15%;", + }, + { + name: "date", + align: "left", + label: "วันที่ยื่นใบลา", + sortable: true, + field: "date", + headerStyle: "font-size: 14px", + style: "font-size: 14px; width:15%;", + }, + { + name: "status", + align: "left", + label: "สถานะ", + sortable: true, + field: "status", + headerStyle: "font-size: 14px", + style: "font-size: 14px; width:10%;", + }, + ]); - /** - *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา ลาอุปสมบท/ลาประกอบพิธีฮัจย์ ย่อย - * @param val ค่า string - * @returns ส่งค่าที่แปลงแล้ว - */ - function convertSubtitleInfo(val: string) { - return optionsOrdination.value.find(x => x.id == val)?.name - } + /** + *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา + * @param item ประเภทแบบฟอร์ม + * @param subitem ประเภทแบบฟอร์มย่อย + */ + function typeConvert(item: string, subitem: any) { + // console.log('first',item) + if (item !== "6" && item !== "8") { + typeLeave.value = convertSubtitle(item); + } else if (item === "6") { + typeLeave.value = convertSubtitleInfo(subitem); + } else if (item === "8") { + typeLeave.value = convertSubtitleInfo2(subitem); + } + } - /** - *ฟังก์ชั่นแปลง ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน - * @param val ค่า string - * @returns ส่งค่าที่แปลงแล้ว - */ - function convertSubtitleInfo2(val: string) { - return optionsSpecific.value.find(x => x.id == val)?.name - } + /** + *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา ลาอุปสมบท/ลาประกอบพิธีฮัจย์ + * @param val ค่า string + * @returns ส่งค่าที่แปลงแล้ว + */ + function convertSubtitle(val: string) { + return options.value.find((x) => x.id == val)?.name; + } - return { - tabValue, - typeOptions, - optionsSpecific, - statusOptions, - DataMain, - DataMainUpdate, - DataUpdate, - DataMainOrig, - visibleColumns, - columns, - rows, - LeaveType, - LeaveStatus, - fecthList, - filterSelector, - searchFilterTable, - fiscalyearOP, - fiscalYearyear, - options, - optionsOrdination, - typeConvert, - typeLeave, - } -}) + /** + *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา ลาอุปสมบท/ลาประกอบพิธีฮัจย์ ย่อย + * @param val ค่า string + * @returns ส่งค่าที่แปลงแล้ว + */ + function convertSubtitleInfo(val: string) { + return optionsOrdination.value.find((x) => x.id == val)?.name; + } + + /** + *ฟังก์ชั่นแปลง ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน + * @param val ค่า string + * @returns ส่งค่าที่แปลงแล้ว + */ + function convertSubtitleInfo2(val: string) { + return optionsSpecific.value.find((x) => x.id == val)?.name; + } + + return { + tabValue, + typeOptions, + optionsSpecific, + statusOptions, + DataMain, + DataMainUpdate, + DataUpdate, + DataMainOrig, + visibleColumns, + columns, + rows, + LeaveType, + LeaveStatus, + fecthList, + filterSelector, + searchFilterTable, + fiscalyearOP, + fiscalYearyear, + options, + optionsOrdination, + typeConvert, + typeLeave, + }; +});