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

Closed #104

Browse source 
ปรับข้อมูลการลา และปรับ layout หน้าหลักการลา
This commit is contained in:
Warunee Tamkoo 2023-11-21 15:59:14 +07:00
parent 0705eff57c
commit 1ea53b0fe5
7 changed files with 1465 additions and 1521 deletions
Download patch file Download diff file Expand all files Collapse all files

655
src/modules/05_leave/store.ts
View file

@ -1,321 +1,356 @@
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<string>("calendar");
const typeLeave = ref<string|undefined>('')
const mixin = useCounterMixin()
const { date2Thai } = mixin
const LeaveType = ref<string | null>("0")
const LeaveStatus = ref<string | null>("0")
const fiscalYearyear = ref<string | null>("0")
const rows = ref<formListLeaveData[]>([])
const DataMainOrig = ref<formListLeaveData[]>([]) // ข้อมูลหลักดั้งเดิม
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<formListLeaveData[]>([]) // ข้อมูลเปลี่ยนแปลง
const DataMain = (val: formListLeaveData[]) => (DataMainOrig.value = val)
const DataUpdate = (filterType: string, filterStatus: string, filterYear: string) => {
DataMainUpdate.value = []
const tabValue = ref<string>("calendar");
const typeLeave = ref<string | undefined>("");
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const LeaveType = ref<string | null>("0");
const LeaveStatus = ref<string | null>("0");
const fiscalYearyear = ref<string | null>("0");
const rows = ref<formListLeaveData[]>([]);
const DataMainOrig = ref<formListLeaveData[]>([]); // ข้อมูลหลักดั้งเดิม
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
}
}
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 searchFilterTable = async () => {
rows.value = []
const DataMainUpdate = ref<formListLeaveData[]>([]); // ข้อมูลเปลี่ยนแปลง
const DataMain = (val: formListLeaveData[]) => (DataMainOrig.value = val);
const DataUpdate = (
filterType: string,
filterStatus: string,
filterYear: string
) => {
DataMainUpdate.value = [];
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
}
}
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 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 searchFilterTable = async () => {
rows.value = [];
const fiscalyearOP = ref<OptionData[]>([
{ id: "0", name: "ทั้งหมด" },
{ id: "1", name: "2566" },
{ id: "2", name: "2567" },
{ id: "2", name: "2568" },
])
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;
}
};
function convertType(val: string) {
switch (val) {
case "0":
return "ทั้งหมด"
case "1":
return "ลาป่วย"
case "2":
return "ลากิจส่วนตัว"
case "3":
return "ลาคลอดบุตร"
case "4":
return "ลาไปช่วยเหลือภริยาที่คลอดบุตร"
case "5":
return "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ"
case "6":
return "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล"
case "7":
return "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน"
case "8":
return "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ"
case "9":
return "ลาติดตามคู่สมรส"
case "10":
return "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ"
}
}
function convertStatus(val: string) {
switch (val) {
case "0":
return "ทั้งหมด"
case "1":
return "อนุมัติ"
case "2":
return "ไม่อนุมัติ"
case "3":
return "อยู่ระหว่างดำเนินการ"
case "4":
return "ใหม่"
}
}
function convertYear(val: string) {
switch (val) {
case "0":
return "ทั้งหมด"
case "1":
return "2566"
case "2":
return "2567"
case "3":
return "2568"
case "4":
return "2569"
}
}
/**
*
* @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: "ลาดูงาน" },
]);
const optionsOrdination = ref([
{ id: '0', name: "ลาอุปสมบท" },
{ id: '1', name: "ลาประกอบพิธีฮัจย์" },
]);
const typeOptions = ref<OptionData[]>([
{ id: "0", name: "ทั้งหมด" },
{ 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: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
])
const options = ref<OptionData[]>([
{ id: '0', name: "ลาป่วย" },
{ 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: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
]);
const statusOptions = ref<OptionData[]>([
{ id: "0", name: "ทั้งหมด" },
{ id: "1", name: "อนุมัติ" },
{ id: "2", name: "ไม่อนุมัติ" },
{ id: "3", name: "อยู่ระหว่างดำเนินการ" },
{ id: "4", name: "ใหม่" },
])
const visibleColumns = ref<String[]>(["no", "type", "date", "status"])
const columns = ref<QTableProps["columns"]>([
{
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%;",
},
])
function typeConvert(item: string,subitem:any) {
console.log('first',item)
if (item !== '5' && item !== '7') {
typeLeave.value = convertSubtitle(item);
}else if(item === '5'){
typeLeave.value = convertSubtitleInfo(subitem);
}else if(item === '7'){
typeLeave.value = convertSubtitleInfo2(subitem);
}
}
/** filter ปี */
const fiscalyearOP = ref<OptionData[]>([
{ id: "0", name: "ทั้งหมด" },
{ id: "1", name: "2566" },
{ id: "2", name: "2567" },
{ id: "2", name: "2568" },
]);
function convertSubtitle(val: string) {
if (val) {
switch (val) {
case "0": return "ลาป่วย";
case "1": return "ลากิจส่วนตัว";
case "2": return "ลาคลอดบุตร";
case "3": return "ลาไปช่วยเหลือภริยาที่คลอดบุตร";
case "4": return "ลาพักผ่อน";
case "5": return "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ";
case "6": return "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล";
case "7": return "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน";
case "8": return "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ";
case "9": return "ลาติดตามคู่สมรส";
case "10": return "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ";
}
}
}
function convertSubtitleInfo(val: string) {
if (val) {
switch (val) {
case "0": return "ลาอุปสมบท";
case "1": return "ลาประกอบพิธีฮัจย์";
}
}
}
function convertSubtitleInfo2(val: string) {
if (val) {
switch (val) {
case "s0": return "ลาไปศึกษาต่อ";
case "s1": return "ลาฝึกอบรม";
case "s2": return "ลาปฎิบัติการวิจัย";
case "s3": return "ลาดูงาน";
}
}
}
/**
*
* @param val
* @returns
*/
function convertType(val: string) {
if (val == "0") return "ทั้งหมด";
else 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
}
})
/** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/
const optionsSpecific = ref([
{ id: "s0", name: "ลาไปศึกษาต่อ" },
{ id: "s1", name: "ลาฝึกอบรม" },
{ id: "s2", name: "ลาปฎิบัติการวิจัย" },
{ id: "s3", name: "ลาดูงาน" },
]);
/** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ*/
const optionsOrdination = ref([
{ id: "0", name: "ลาอุปสมบท" },
{ id: "1", name: "ลาประกอบพิธีฮัจย์" },
]);
/** รายการข้อมูลประเภทใบลา */
const options = ref<OptionData[]>([
{ 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: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
]);
/** filter ประเภทการลา */
const typeOptions = ref<OptionData[]>([
{ id: "0", name: "ทั้งหมด" },
...options.value,
]);
/** สถานะของการลา */
const statusOptions = ref<OptionData[]>([
{ id: "0", name: "ทั้งหมด" },
{ id: "1", name: "อนุมัติ" },
{ id: "2", name: "ไม่อนุมัติ" },
{ id: "3", name: "อยู่ระหว่างดำเนินการ" },
{ id: "4", name: "ใหม่" },
]);
/**
*
* @param val
* @returns
*/
function convertStatus(val: string) {
if (val == "0") return "ทั้งหมด";
else return statusOptions.value.find((x) => x.id == val)?.name;
}
/** data table filter & column ของรายการลา */
const visibleColumns = ref<String[]>(["no", "type", "date", "status"]);
const columns = ref<QTableProps["columns"]>([
{
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 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
* @returns
*/
function convertSubtitle(val: string) {
return options.value.find((x) => x.id == val)?.name;
}
/**
*
* @param val
* @returns
*/
function convertSubtitleInfo(val: string) {
return optionsOrdination.value.find((x) => x.id == val)?.name;
}
/**
*
* @param val
* @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,
};
});