เพิ่ม filter แก้ไข store ปรับ ui
This commit is contained in:
AnandaTon
parent
cb4850ec27
commit
e0112b45ed
7 changed files with 481 additions and 459 deletions
|
|
@ -1,27 +1,153 @@
|
|||
import { defineStore } from "pinia"
|
||||
import { ref } from "vue"
|
||||
import { ref, computed } from "vue"
|
||||
import type { QTableProps } from "quasar"
|
||||
import type { FormLeavetMainData, OptionData } from "@/modules/05_leave/interface/index/"
|
||||
import type { FormLeavetMainData, OptionData, formListLeaveData } from "@/modules/05_leave/interface/index/"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
|
||||
export const useLeaveStore = defineStore("Leave", () => {
|
||||
const DataMainOrig = ref<FormLeavetMainData[]>([]) // ข้อมูลหลักดั้งเดิม
|
||||
const DataMainUpdate = ref<FormLeavetMainData[]>([]) // ข้อมูลเปลี่ยนแปลง
|
||||
|
||||
const DataMain = (val: FormLeavetMainData[]) => {
|
||||
DataMainOrig.value = val
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai } = mixin
|
||||
const LeaveType = ref<string | null>("0")
|
||||
const LeaveStatus = ref<string | null>("0")
|
||||
const fiscalYearyear = ref<number | null>(null)
|
||||
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 DataUpdate = (filter_1: string, filter_2: string) => {
|
||||
const DataMainUpdate = ref<formListLeaveData[]>([]) // ข้อมูลเปลี่ยนแปลง
|
||||
const DataMain = (val: formListLeaveData[]) => (DataMainOrig.value = val)
|
||||
const DataUpdate = (filterType: string, filterStatus: string, filterYear: number | null) => {
|
||||
DataMainUpdate.value = []
|
||||
|
||||
if (filter_1 === "" && filter_2 === "ทั้งหมด") {
|
||||
if (filterType === "" && filterStatus === "" && filterYear === 0) {
|
||||
DataMainUpdate.value = DataMainOrig.value
|
||||
} else if (filter_1 !== "" && filter_2 === "ทั้งหมด") {
|
||||
DataMainUpdate.value = DataMainOrig.value.filter(item => item.TypeValue === filter_1)
|
||||
} else if (filter_1 !== "" && filter_2 !== "ทั้งหมด") {
|
||||
DataMainUpdate.value = DataMainOrig.value.filter(item => item.TypeValue === filter_1 && item.Status === filter_2)
|
||||
} else if (filter_1 === "" && filter_2 !== "ทั้งหมด") {
|
||||
DataMainUpdate.value = DataMainOrig.value.filter(item => item.Status === filter_2)
|
||||
} else if (filterType !== "" && filterStatus === "" && filterYear === 0) {
|
||||
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 !== 0) {
|
||||
DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Type === filterType && item.fiscalYear === filterYear)
|
||||
} else if (filterType === "" && filterStatus !== "" && filterYear === 0) {
|
||||
DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Status === filterStatus)
|
||||
} else if (filterType === "" && filterStatus === "" && filterYear !== 0) {
|
||||
DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.fiscalYear === filterYear)
|
||||
} else if (filterType === "" && filterStatus !== "" && filterYear !== null) {
|
||||
DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Status === filterStatus && item.fiscalYear === filterYear)
|
||||
} else if (filterType !== "" && filterStatus !== "" && filterYear === 0) {
|
||||
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.fiscalYear === filterYear)
|
||||
} else if (filterType == "0" && filterStatus == "0" && filterYear !== null) {
|
||||
DataMainUpdate.value = DataMainOrig.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") {
|
||||
// console.log(filteredData)
|
||||
// filteredData = filteredData.filter((item: formListLeaveData) => item.status === fiscalYearyear.value)
|
||||
// console.log(filteredData)
|
||||
// console.log(fiscalYearyear.value)
|
||||
// }
|
||||
const dataArr = filteredData.map((e: any) => ({
|
||||
no: e.no,
|
||||
type: convertType(e.type),
|
||||
status: convertStatus(e.status),
|
||||
date: date2Thai(new Date(e.date)),
|
||||
year: e.year,
|
||||
}))
|
||||
rows.value = dataArr
|
||||
}
|
||||
}
|
||||
|
||||
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 fiscalyearOP = ref<OptionData[]>([
|
||||
{ id: "0", name: "2563" },
|
||||
{ id: "1", name: "2564" },
|
||||
{ id: "2", name: "2565" },
|
||||
{ id: "2", name: "2566" },
|
||||
])
|
||||
|
||||
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 "ใหม่"
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -32,24 +158,66 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
{ id: "2", 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: "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: "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%;",
|
||||
},
|
||||
])
|
||||
|
||||
return {
|
||||
typeOptions,
|
||||
optionsSpecific,
|
||||
|
|
@ -58,5 +226,13 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
DataMainUpdate,
|
||||
DataUpdate,
|
||||
DataMainOrig,
|
||||
visibleColumns,
|
||||
columns,
|
||||
rows,
|
||||
LeaveType,
|
||||
LeaveStatus,
|
||||
fecthList,
|
||||
filterSelector,
|
||||
searchFilterTable,
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue