เพิ่ม ui ลงเวลากรณีพิเศษ
This commit is contained in:
AnandaTon
parent
fefbb8a7ab
commit
8a472f23f7
9 changed files with 853 additions and 258 deletions
|
|
@ -2,186 +2,195 @@ import { defineStore } from "pinia";
|
|||
import { ref } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import type { DataOption } from "@/modules/09_leave/interface/index/Main"
|
||||
import type { DataOption } from "@/modules/09_leave/interface/index/Main";
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { DataRows } from "@/modules/09_leave/interface/response/leave"
|
||||
|
||||
import type { DataRows } from "@/modules/09_leave/interface/response/leave";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, showLoader, hideLoader } = mixin;
|
||||
export const useLeavelistDataStore = defineStore("leave", () => {
|
||||
//TABMENU
|
||||
const tab = ref<string>("1");
|
||||
const amounttab1 = ref<number>(0)
|
||||
const amounttab2 = ref<number>(0)
|
||||
//TABMENU
|
||||
const tab = ref<string>("1");
|
||||
const amounttab1 = ref<number>(0);
|
||||
const amounttab2 = ref<number>(0);
|
||||
//ข้อมูลในตาราง
|
||||
const mainData = ref<any>([]);
|
||||
const rows = ref<DataRows[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([]);
|
||||
const visibleColumns = ref<string[]>([]);
|
||||
const loadTable = ref<boolean>(false);
|
||||
async function fetchList(data: DataRows[]) {
|
||||
let datalist = data.map((e: DataRows) => ({
|
||||
leaveType: e.leaveType,
|
||||
name: e.name,
|
||||
Date: e.Date,
|
||||
status: convertSatatus(e.status),
|
||||
}));
|
||||
tab.value !== "1"
|
||||
? (mainData.value = datalist)
|
||||
: (mainData.value = datalist.filter(
|
||||
(e) => e.status === "อยู่ระหว่างกำเนินการ"
|
||||
));
|
||||
const filteramounttab1 = datalist.filter(
|
||||
(e) => e.status === "อยู่ระหว่างกำเนินการ"
|
||||
);
|
||||
amounttab1.value = filteramounttab1.length;
|
||||
amounttab2.value = datalist.length;
|
||||
await fetchOption();
|
||||
await searchDataFn(selectType.value, selectStatus.value);
|
||||
}
|
||||
//filter table
|
||||
const selectYear = ref<string>("all");
|
||||
const selectType = ref<string>("all");
|
||||
const selectStatus = ref<string>("all");
|
||||
const optionYear = ref<DataOption[]>([{ id: "all", name: "ทั้งหมด" }]);
|
||||
const optionType = ref<DataOption[]>([]);
|
||||
const optionStatus = ref<DataOption[]>([]);
|
||||
const optionTypeMain = ref<DataOption[]>([]);
|
||||
const optionStatusMain = ref<DataOption[]>([]);
|
||||
const filterTable = ref<string>("");
|
||||
function searchDataFn(type: string, status: string) {
|
||||
// selectYear.value = selectYear.value || "all"
|
||||
type = type || "all";
|
||||
status = status || "all";
|
||||
// showLoader()
|
||||
loadTable.value = true;
|
||||
if (selectYear.value == "all" && type == "all" && status == "all") {
|
||||
rows.value = mainData.value;
|
||||
} else if (selectYear.value !== "all" && type == "all" && status == "all") {
|
||||
console.log("ค้นหาจากปี");
|
||||
} else if (selectYear.value == "all" && type !== "all" && status == "all") {
|
||||
console.log("ค้นหาจากประเภท");
|
||||
rows.value = mainData.value.filter((e: any) => e.leaveType === type);
|
||||
} else if (selectYear.value == "all" && type == "all" && status !== "all") {
|
||||
console.log("ค้นหาจากสถานะ");
|
||||
rows.value = mainData.value.filter((e: any) => e.status === status);
|
||||
} else if (
|
||||
selectYear.value !== "all" &&
|
||||
type !== "all" &&
|
||||
status == "all"
|
||||
) {
|
||||
console.log("ค้นหาจากปีและประเภท");
|
||||
} else if (
|
||||
selectYear.value !== "all" &&
|
||||
type == "all" &&
|
||||
status !== "all"
|
||||
) {
|
||||
console.log("ค้นหาจากปีและสถานะ");
|
||||
} else if (
|
||||
selectYear.value == "all" &&
|
||||
type !== "all" &&
|
||||
status !== "all"
|
||||
) {
|
||||
console.log("ค้นหาจากประเภทและสถานะ");
|
||||
rows.value = mainData.value.filter(
|
||||
(e: any) => e.leaveType === type && e.status === status
|
||||
);
|
||||
} else console.log("ค้นหาจากทั้งหมด");
|
||||
setTimeout(function () {
|
||||
loadTable.value = false;
|
||||
}, 500);
|
||||
}
|
||||
function clearFilter() {
|
||||
selectYear.value = "all";
|
||||
selectType.value = "all";
|
||||
selectStatus.value = "all";
|
||||
filterTable.value = "";
|
||||
}
|
||||
|
||||
function fetchOption() {
|
||||
let data = [];
|
||||
data = mainData.value;
|
||||
const double_leaveType = [
|
||||
...new Set(data.map((item: any) => item.leaveType)),
|
||||
];
|
||||
// หา optionType
|
||||
optionTypeMain.value = [{ id: "all", name: "ทั้งหมด" }];
|
||||
for (let i = 1; i <= double_leaveType.length; i++) {
|
||||
const type = double_leaveType[i - 1];
|
||||
if (typeof type === "string") {
|
||||
const listtype: DataOption = {
|
||||
id: type,
|
||||
name: type,
|
||||
};
|
||||
optionTypeMain.value.push(listtype);
|
||||
optionType.value = optionTypeMain.value;
|
||||
}
|
||||
}
|
||||
// หา optionStatus
|
||||
const double_status = [...new Set(data.map((item: any) => item.status))];
|
||||
optionStatusMain.value = [{ id: "all", name: "ทั้งหมด" }];
|
||||
for (let i = 1; i <= double_status.length; i++) {
|
||||
const status = double_status[i - 1];
|
||||
if (typeof status === "string") {
|
||||
const liststatus: DataOption = {
|
||||
id: status,
|
||||
name: status,
|
||||
};
|
||||
optionStatusMain.value.push(liststatus);
|
||||
optionStatus.value = optionStatusMain.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
// filter option
|
||||
function filterOption(val: string, update: any, type: string) {
|
||||
let data: DataOption[] = [];
|
||||
let filter: DataOption[] = [];
|
||||
if (type == "type") {
|
||||
data = optionTypeMain.value;
|
||||
} else if (type == "status") {
|
||||
data = optionStatusMain.value;
|
||||
}
|
||||
if (val == "") {
|
||||
update(() => {
|
||||
filter = data;
|
||||
});
|
||||
} else {
|
||||
update(() => {
|
||||
filter = data.filter((e) => e.name.search(val) !== -1);
|
||||
});
|
||||
}
|
||||
if (filter) {
|
||||
if (type == "type") {
|
||||
optionType.value = filter;
|
||||
} else if (type == "status") {
|
||||
optionStatus.value = filter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// convertSatatus
|
||||
function convertSatatus(val: string) {
|
||||
switch (val) {
|
||||
case "1":
|
||||
return "ใหม่";
|
||||
case "2":
|
||||
return "อยู่ระหว่างกำเนินการ";
|
||||
case "3":
|
||||
return "อนุมัติ";
|
||||
}
|
||||
}
|
||||
return {
|
||||
tab,
|
||||
amounttab1,
|
||||
amounttab2,
|
||||
//ข้อมูลในตาราง
|
||||
const mainData = ref<any>([])
|
||||
const rows = ref<DataRows[]>([])
|
||||
const columns = ref<QTableProps["columns"]>([]);
|
||||
const visibleColumns = ref<string[]>([]);
|
||||
const loadTable = ref<boolean>(false)
|
||||
async function fetchList(data: DataRows[]) {
|
||||
let datalist = data.map((e: DataRows) => ({
|
||||
leaveType: e.leaveType,
|
||||
name: e.name,
|
||||
Date: e.Date,
|
||||
status: convertSatatus(e.status)
|
||||
}))
|
||||
tab.value !== "1" ? mainData.value = datalist : mainData.value = datalist.filter((e) => e.status === "อยู่ระหว่างกำเนินการ")
|
||||
const filteramounttab1 = datalist.filter((e) => e.status === "อยู่ระหว่างกำเนินการ")
|
||||
amounttab1.value = filteramounttab1.length
|
||||
amounttab2.value = datalist.length
|
||||
await fetchOption()
|
||||
await searchDataFn(selectType.value, selectStatus.value)
|
||||
rows,
|
||||
fetchList,
|
||||
loadTable,
|
||||
columns,
|
||||
visibleColumns,
|
||||
|
||||
|
||||
}
|
||||
//filter table
|
||||
const selectYear = ref<string>('all')
|
||||
const selectType = ref<string>('all')
|
||||
const selectStatus = ref<string>('all')
|
||||
const optionYear = ref<DataOption[]>([{ id: "all", name: 'ทั้งหมด' }])
|
||||
const optionType = ref<DataOption[]>([])
|
||||
const optionStatus = ref<DataOption[]>([])
|
||||
const optionTypeMain = ref<DataOption[]>([])
|
||||
const optionStatusMain = ref<DataOption[]>([])
|
||||
const filterTable = ref<string>('')
|
||||
function searchDataFn(type: string, status: string) {
|
||||
// selectYear.value = selectYear.value || "all"
|
||||
type = type || "all"
|
||||
status = status || "all"
|
||||
// showLoader()
|
||||
loadTable.value = true
|
||||
if (selectYear.value == "all" && type == "all" && status == "all") {
|
||||
rows.value = mainData.value
|
||||
} else if (selectYear.value !== "all" && type == "all" && status == "all") {
|
||||
console.log("ค้นหาจากปี");
|
||||
} else if (selectYear.value == "all" && type !== "all" && status == "all") {
|
||||
console.log("ค้นหาจากประเภท");
|
||||
rows.value = mainData.value.filter((e: any) => e.leaveType === type)
|
||||
} else if (selectYear.value == "all" && type == "all" && status !== "all") {
|
||||
console.log("ค้นหาจากสถานะ");
|
||||
rows.value = mainData.value.filter((e: any) => e.status === status)
|
||||
} else if (selectYear.value !== "all" && type !== "all" && status == "all") {
|
||||
console.log("ค้นหาจากปีและประเภท");
|
||||
} else if (selectYear.value !== "all" && type == "all" && status !== "all") {
|
||||
console.log("ค้นหาจากปีและสถานะ");
|
||||
} else if (selectYear.value == "all" && type !== "all" && status !== "all") {
|
||||
console.log("ค้นหาจากประเภทและสถานะ");
|
||||
rows.value = mainData.value.filter((e: any) => e.leaveType === type && e.status === status)
|
||||
} else (console.log("ค้นหาจากทั้งหมด"))
|
||||
setTimeout(function () {
|
||||
loadTable.value = false
|
||||
}, 500);
|
||||
|
||||
}
|
||||
function clearFilter() {
|
||||
selectYear.value = "all"
|
||||
selectType.value = "all"
|
||||
selectStatus.value = "all"
|
||||
filterTable.value = ''
|
||||
}
|
||||
|
||||
function fetchOption() {
|
||||
let data = []
|
||||
data = mainData.value
|
||||
const double_leaveType = [
|
||||
...new Set(data.map((item: any) => item.leaveType)),
|
||||
];
|
||||
// หา optionType
|
||||
optionTypeMain.value = [{ id: "all", name: "ทั้งหมด" }];
|
||||
for (let i = 1; i <= double_leaveType.length; i++) {
|
||||
const type = double_leaveType[i - 1];
|
||||
if (typeof type === 'string') {
|
||||
const listtype: DataOption = {
|
||||
id: type,
|
||||
name: type,
|
||||
};
|
||||
optionTypeMain.value.push(listtype)
|
||||
optionType.value = optionTypeMain.value
|
||||
}
|
||||
}
|
||||
// หา optionStatus
|
||||
const double_status = [
|
||||
...new Set(data.map((item: any) => item.status)),
|
||||
];
|
||||
optionStatusMain.value = [{ id: "all", name: "ทั้งหมด" }];
|
||||
for (let i = 1; i <= double_status.length; i++) {
|
||||
const status = double_status[i - 1];
|
||||
if (typeof status === 'string') {
|
||||
const liststatus: DataOption = {
|
||||
id: status,
|
||||
name: status,
|
||||
};
|
||||
optionStatusMain.value.push(liststatus);
|
||||
optionStatus.value = optionStatusMain.value
|
||||
}
|
||||
}
|
||||
}
|
||||
// filter option
|
||||
function filterOption(val: string, update: any, type: string) {
|
||||
let data: DataOption[] = []
|
||||
let filter: DataOption[] = []
|
||||
if (type == "type") {
|
||||
data = optionTypeMain.value
|
||||
} else if (type == "status") {
|
||||
data = optionStatusMain.value
|
||||
}
|
||||
if (val == "") {
|
||||
update(() => {
|
||||
filter = data;
|
||||
});
|
||||
} else {
|
||||
update(() => {
|
||||
filter = data.filter(
|
||||
(e) => e.name.search(val) !== -1
|
||||
);
|
||||
});
|
||||
}
|
||||
if (filter) {
|
||||
if (type == "type") {
|
||||
optionType.value = filter
|
||||
} else if (type == "status") {
|
||||
optionStatus.value = filter
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// convertSatatus
|
||||
function convertSatatus(val: string) {
|
||||
switch (val) {
|
||||
case "1":
|
||||
return "ใหม่"
|
||||
case "2":
|
||||
return "อยู่ระหว่างกำเนินการ"
|
||||
case "3":
|
||||
return "อนุมัติ"
|
||||
}
|
||||
}
|
||||
return {
|
||||
tab,
|
||||
amounttab1,
|
||||
amounttab2,
|
||||
//ข้อมูลในตาราง
|
||||
rows,
|
||||
fetchList,
|
||||
loadTable,
|
||||
columns,
|
||||
visibleColumns,
|
||||
|
||||
//filter table
|
||||
filterTable,
|
||||
selectYear,
|
||||
selectType,
|
||||
selectStatus,
|
||||
optionYear,
|
||||
optionType,
|
||||
optionStatus,
|
||||
clearFilter,
|
||||
searchDataFn,
|
||||
filterOption,
|
||||
|
||||
|
||||
};
|
||||
})
|
||||
filterTable,
|
||||
selectYear,
|
||||
selectType,
|
||||
selectStatus,
|
||||
optionYear,
|
||||
optionType,
|
||||
optionStatus,
|
||||
clearFilter,
|
||||
searchDataFn,
|
||||
filterOption,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue