ปรับ Filter ปีงบประมาณจาก
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
b3523dfd4f
commit
302c133cd1
3 changed files with 566 additions and 433 deletions
|
|
@ -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" },
|
||||
]);
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,65 +1,103 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, useAttrs, reactive, onMounted } from "vue"
|
||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||
import { ref, useAttrs, reactive, onMounted } from "vue";
|
||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
|
||||
const leaveStore = useLeaveStore()
|
||||
const { filterSelector, searchFilterTable } = leaveStore
|
||||
const attrs = ref<any>(useAttrs())
|
||||
const table = ref<any>(null)
|
||||
const filterRef = ref<any>(null)
|
||||
const leaveStore = useLeaveStore();
|
||||
const { filterSelector, searchFilterTable } = leaveStore;
|
||||
const attrs = ref<any>(useAttrs());
|
||||
const table = ref<any>(null);
|
||||
const filterRef = ref<any>(null);
|
||||
|
||||
/**
|
||||
* ตั้งค่า pagination
|
||||
*/
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
return start + "-" + end + " ใน " + total
|
||||
}
|
||||
return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
})
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
count: Number,
|
||||
pass: Number,
|
||||
notpass: Number,
|
||||
inputfilter: String,
|
||||
name: String,
|
||||
icon: String,
|
||||
inputvisible: Array,
|
||||
editvisible: Boolean,
|
||||
grid: Boolean,
|
||||
inputShow: Boolean,
|
||||
})
|
||||
count: Number,
|
||||
pass: Number,
|
||||
notpass: Number,
|
||||
inputfilter: String,
|
||||
name: String,
|
||||
icon: String,
|
||||
inputvisible: Array,
|
||||
editvisible: Boolean,
|
||||
grid: Boolean,
|
||||
inputShow: Boolean,
|
||||
});
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่น emit ค่าที่กำหนด
|
||||
*/
|
||||
const emit = defineEmits(["update:inputfilter", "update:inputvisible", "update:editvisible"])
|
||||
const emit = defineEmits([
|
||||
"update:inputfilter",
|
||||
"update:inputvisible",
|
||||
"update:editvisible",
|
||||
]);
|
||||
const updateInput = (value: string | number | null) => {
|
||||
emit("update:inputfilter", value)
|
||||
}
|
||||
emit("update:inputfilter", value);
|
||||
};
|
||||
const updateVisible = (value: []) => {
|
||||
emit("update:inputvisible", value)
|
||||
}
|
||||
emit("update:inputvisible", value);
|
||||
};
|
||||
|
||||
/**
|
||||
* reset ค่าที่ค้นหา
|
||||
*/
|
||||
const resetFilter = () => {
|
||||
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||
emit("update:inputfilter", "")
|
||||
filterRef.value.focus()
|
||||
}
|
||||
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||
emit("update:inputfilter", "");
|
||||
filterRef.value.focus();
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="q-py-sm row">
|
||||
<q-card bordered flat class="q-py-sm q-pl-sm col-12 row bg-grey-1 shadow-0">
|
||||
<div class="items-center col-12 row q-col-gutter-sm">
|
||||
<q-select
|
||||
<div class="q-py-sm row">
|
||||
<q-card bordered flat class="q-py-sm q-pl-sm col-12 row bg-grey-1 shadow-0">
|
||||
<div class="items-center col-12 row q-col-gutter-sm">
|
||||
<datepicker
|
||||
v-if="leaveStore.tabValue === 'list'"
|
||||
menu-class-name="modalfix"
|
||||
v-model="leaveStore.fiscalYearyear"
|
||||
class="col-2"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:modelValue="searchFilterTable"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
:model-value="Number(leaveStore.fiscalYearyear) + 543"
|
||||
:label="`${'ปีงบประมาณ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<!-- <q-select
|
||||
v-if="leaveStore.tabValue === 'list'"
|
||||
outlined
|
||||
dense
|
||||
|
|
@ -78,147 +116,172 @@ const resetFilter = () => {
|
|||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'fiscalyearOP'
|
||||
) "
|
||||
/>
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="leaveStore.LeaveType"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกประเภทใบลา'}`]"
|
||||
:label="`${'ประเภทใบลา'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="leaveStore.typeOptions"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-auto"
|
||||
@update:model-value="searchFilterTable"
|
||||
@filter="(inputValue:any,
|
||||
/> -->
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="leaveStore.LeaveType"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกประเภทใบลา'}`]"
|
||||
:label="`${'ประเภทใบลา'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="leaveStore.typeOptions"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-auto"
|
||||
@update:model-value="searchFilterTable"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'LeaveTypeOption'
|
||||
) "
|
||||
/>
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="leaveStore.LeaveStatus"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกสถานะ'}`]"
|
||||
:label="`${'สถานะ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="leaveStore.statusOptions"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-auto"
|
||||
@update:model-value="searchFilterTable"
|
||||
@filter="(inputValue:any,
|
||||
/>
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="leaveStore.LeaveStatus"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกสถานะ'}`]"
|
||||
:label="`${'สถานะ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="leaveStore.statusOptions"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-auto"
|
||||
@update:model-value="searchFilterTable"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'LeaveStatusOption'
|
||||
) "
|
||||
/>
|
||||
<q-space />
|
||||
<q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined debounce="300" placeholder="ค้นหา" class="gt-xs" style="max-width: 150px">
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="inputfilter == ''" name="search" />
|
||||
<q-icon v-if="inputfilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
<q-select
|
||||
:model-value="inputvisible"
|
||||
@update:model-value="updateVisible"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="attrs.columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs"
|
||||
>
|
||||
<template> </template>
|
||||
</q-select>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div>
|
||||
<q-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
class="custom-table2"
|
||||
v-bind="attrs"
|
||||
virtual-scroll
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
dense
|
||||
:pagination-label="paginationLabel"
|
||||
:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium" v-html="col.label" />
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber" :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
|
||||
</template>
|
||||
<template #body="props">
|
||||
<slot v-bind="props" name="columns"></slot>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
/>
|
||||
<q-space />
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
:model-value="inputfilter"
|
||||
ref="filterRef"
|
||||
@update:model-value="updateInput"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
class="gt-xs"
|
||||
style="max-width: 150px"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="inputfilter == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="inputfilter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
<q-select
|
||||
:model-value="inputvisible"
|
||||
@update:model-value="updateVisible"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="attrs.columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs"
|
||||
>
|
||||
<template> </template>
|
||||
</q-select>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div>
|
||||
<q-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
class="custom-table2"
|
||||
v-bind="attrs"
|
||||
virtual-scroll
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
dense
|
||||
:pagination-label="paginationLabel"
|
||||
:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium" v-html="col.label" />
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="scope.pagesNumber"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
<template #body="props">
|
||||
<slot v-bind="props" name="columns"></slot>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.icon-color {
|
||||
color: #4154b3;
|
||||
color: #4154b3;
|
||||
}
|
||||
|
||||
.custom-table2 {
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
}
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.q-table td:nth-of-type(2) {
|
||||
z-index: 3 !important;
|
||||
}
|
||||
.q-table td:nth-of-type(2) {
|
||||
z-index: 3 !important;
|
||||
}
|
||||
|
||||
.q-table th:nth-of-type(2),
|
||||
.q-table td:nth-of-type(2) {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.q-table th:nth-of-type(2),
|
||||
.q-table td:nth-of-type(2) {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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<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<Number | null>(new Date().getFullYear());
|
||||
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 () => {
|
||||
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<OptionData[]>([
|
||||
{ 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<OptionData[]>([
|
||||
{ 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<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 optionsSpecific = ref([
|
||||
{ id: "s0", name: "ลาไปศึกษาต่อ" },
|
||||
{ id: "s1", name: "ลาฝึกอบรม" },
|
||||
{ id: "s2", name: "ลาปฎิบัติการวิจัย" },
|
||||
{ id: "s3", name: "ลาดูงาน" },
|
||||
]);
|
||||
|
||||
/** filter ประเภทการลา */
|
||||
const typeOptions = ref<OptionData[]>([{ id: "0", name: "ทั้งหมด" }, ...options.value])
|
||||
/** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ*/
|
||||
const optionsOrdination = ref([
|
||||
{ id: "0", name: "ลาอุปสมบท" },
|
||||
{ id: "1", name: "ลาประกอบพิธีฮัจย์ฯ" },
|
||||
]);
|
||||
|
||||
/** สถานะของการลา */
|
||||
const statusOptions = ref<OptionData[]>([
|
||||
{ id: "0", name: "ทั้งหมด" },
|
||||
{ id: "1", name: "อนุมัติ" },
|
||||
{ id: "2", name: "ไม่อนุมัติ" },
|
||||
{ id: "3", name: "อยู่ระหว่างดำเนินการ" },
|
||||
{ id: "4", 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: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
|
||||
]);
|
||||
|
||||
/**
|
||||
*ฟังก์ชั่นค้นหาแสดง 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<OptionData[]>([
|
||||
{ id: "0", name: "ทั้งหมด" },
|
||||
...options.value,
|
||||
]);
|
||||
|
||||
/** 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%;",
|
||||
},
|
||||
])
|
||||
/** สถานะของการลา */
|
||||
const statusOptions = ref<OptionData[]>([
|
||||
{ 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<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 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,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue