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

แก้ไข ui ฟอร์มการลา

Browse source 
-จัดโค้ด
-เพิ่ม function
This commit is contained in:
AnandaTon 2023-11-22 15:45:52 +07:00
parent 1ea53b0fe5
commit f30a552b69
11 changed files with 496 additions and 409 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,356 +1,290 @@
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[]>([]); // ข้อมูลหลักดั้งเดิม
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;
}
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 DataMainUpdate = ref<formListLeaveData[]>([]) // ข้อมูลเปลี่ยนแปลง
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 () => {
rows.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 (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
}
}
/**
*
* @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;
}
};
/**
*ฟังก์ชั่นเลือก 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
}
}
/** filter ปี */
const fiscalyearOP = ref<OptionData[]>([
{ id: "0", name: "ทั้งหมด" },
{ id: "1", name: "2566" },
{ id: "2", name: "2567" },
{ id: "2", name: "2568" },
]);
/** filter ปี */
const fiscalyearOP = ref<OptionData[]>([
{ id: "0", name: "ทั้งหมด" },
{ id: "1", name: "2566" },
{ id: "2", name: "2567" },
{ id: "2", name: "2568" },
])
/**
*
* @param val
* @returns
*/
function convertType(val: string) {
if (val == "0") return "ทั้งหมด";
else return options.value.find((x) => x.id == val)?.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 optionsSpecific = ref([
{ id: "s0", name: "ลาไปศึกษาต่อ" },
{ id: "s1", name: "ลาฝึกอบรม" },
{ id: "s2", name: "ลาปฎิบัติการวิจัย" },
{ id: "s3", name: "ลาดูงาน" },
]);
/** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/
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 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: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
]);
/** รายการข้อมูลประเภทใบลา */
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,
]);
/** 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: "ใหม่" },
]);
/** สถานะของการลา */
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;
}
/**
*ฟังก์ชั่นค้นหาแสดง option ของสถานะ
* @param val ค่าที่เเสดง
* @returns option ทั้งหมด
*/
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%;",
},
]);
/** 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 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 ค่า string
* @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 ค่า string
* @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;
}
/**
*ฟังก์ชั่นแปลง ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน
* @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,
};
});
return {
tabValue,
typeOptions,
optionsSpecific,
statusOptions,
DataMain,
DataMainUpdate,
DataUpdate,
DataMainOrig,
visibleColumns,
columns,
rows,
LeaveType,
LeaveStatus,
fecthList,
filterSelector,
searchFilterTable,
fiscalyearOP,
fiscalYearyear,
options,
optionsOrdination,
typeConvert,
typeLeave,
}
})