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

เพิ่ม filter แก้ไข store ปรับ ui

Browse source
This commit is contained in:
AnandaTon 2023-10-31 15:36:13 +07:00
parent cb4850ec27
commit e0112b45ed
7 changed files with 481 additions and 459 deletions
Download patch file Download diff file Expand all files Collapse all files

306
src/modules/04_checkin/componenst/tableHistory.vue
View file

@ -1,205 +1,161 @@
<template> <template>
<div class="q-pb-sm row"> <div class="q-pb-sm row">
<div class="items-center col-12 row q-gutter-sm"> <div class="items-center col-12 row q-gutter-sm">
<!-- ค้นหาข้อความใน table --> <!-- ค้นหาข้อความใน table -->
<datepicker <datepicker menu-class-name="modalfix" v-model="yearly" :locale="'th'" autoApply year-picker :enableTimePicker="false">
menu-class-name="modalfix" <template #year="{ year }">{{ year + 543 }}</template>
v-model="yearly" <template #year-overlay-value="{ value }">{{ parseInt(value + 543) }}</template>
:locale="'th'" <template #trigger>
autoApply <q-input hide-bottom-space outlined dense lazy-rules :model-value="yearly + 543" :rules="[val => !!val || `${'กรุณาเลือกปีพ.ศ.'}`]" :label="`${'ปีพ.ศ.'}`" style="width: 150px">
year-picker <template v-slot:prepend>
:enableTimePicker="false" <q-icon name="event" class="cursor-pointer" color="primary"> </q-icon>
> </template>
<template #year="{ year }">{{ year + 543 }}</template> </q-input>
<template #year-overlay-value="{ value }">{{ </template>
parseInt(value + 543) </datepicker>
}}</template> <q-space />
<template #trigger> <q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined debounce="300" placeholder="ค้นหา" class="gt-xs" style="max-width: 200px">
<q-input <template v-slot:append>
hide-bottom-space <q-icon v-if="inputfilter == ''" name="search" />
outlined <q-icon v-if="inputfilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
dense </template>
lazy-rules </q-input>
:model-value="yearly + 543" <!-- แสดงคอลัมน์ใน table -->
:rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]" <q-select
:label="`${'ปีงบประมาณ'}`" :model-value="inputvisible"
style="width: 150px;" @update:model-value="updateVisible"
> :display-value="$q.lang.table.columns"
<template v-slot:prepend> multiple
<q-icon outlined
name="event" dense
class="cursor-pointer" :options="attrs.columns"
color="primary" options-dense
> option-value="name"
</q-icon> map-options
</template> emit-value
</q-input> style="min-width: 150px"
</template> class="gt-xs"
</datepicker> >
<q-space/> <template> </template>
<q-input </q-select>
standout </div>
dense </div>
:model-value="inputfilter" <div>
ref="filterRef" <q-table
@update:model-value="updateInput" ref="table"
outlined flat
debounce="300" bordered
placeholder="ค้นหา" class="custom-table2"
class="gt-xs" v-bind="attrs"
style="max-width: 200px" virtual-scroll
> :virtual-scroll-sticky-size-start="48"
<template v-slot:append> dense
<q-icon v-if="inputfilter == ''" name="search" /> :pagination-label="paginationLabel"
<q-icon :pagination="initialPagination"
v-if="inputfilter !== ''" :rows-per-page-options="[0]"
name="clear" :grid="grid"
class="cursor-pointer" >
@click="resetFilter" <template v-slot:header="props">
/> <q-tr :props="props">
</template> <q-th v-for="col in props.cols" :key="col.name" :props="props">
</q-input> <span class="text-weight-medium" v-html="col.label" />
<!-- แสดงคอลัมน์ใน table --> </q-th>
<q-select <q-th auto-width v-if="inputShow" />
:model-value="inputvisible" </q-tr>
@update:model-value="updateVisible" </template>
:display-value="$q.lang.table.columns" <template #body="props">
multiple <slot v-bind="props" name="columns"></slot>
outlined </template>
dense <template #item="props">
:options="attrs.columns" <slot v-bind="props" name="item"></slot>
options-dense </template>
option-value="name" </q-table>
map-options </div>
emit-value
style="min-width: 150px"
class="gt-xs"
>
<template> </template>
</q-select>
</div>
</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="initialPagination"
:rows-per-page-options="[0]"
:grid="grid"
>
<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-th auto-width v-if="inputShow" />
</q-tr>
</template>
<template #body="props">
<slot v-bind="props" name="columns"></slot>
</template>
<template #item="props">
<slot v-bind="props" name="item"></slot>
</template>
</q-table>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, useAttrs } from "vue"; import { ref, useAttrs } from "vue"
const attrs = ref<any>(useAttrs()); const attrs = ref<any>(useAttrs())
const table = ref<any>(null); const table = ref<any>(null)
const filterRef = ref<any>(null); const filterRef = ref<any>(null)
const initialPagination = ref({ const initialPagination = ref({
rowsPerPage: 0, rowsPerPage: 0,
}); })
const yearly = ref<number>(new Date().getFullYear()); const yearly = ref<number>(new Date().getFullYear())
const props = defineProps({ const props = defineProps({
count: Number, count: Number,
pass: Number, pass: Number,
notpass: Number, notpass: Number,
inputfilter: String, inputfilter: String,
name: String, name: String,
icon: String, icon: String,
inputvisible: Array, inputvisible: Array,
editvisible: Boolean, editvisible: Boolean,
grid: Boolean, grid: Boolean,
inputShow: Boolean, inputShow: Boolean,
}); })
const emit = defineEmits([ const emit = defineEmits(["update:inputfilter", "update:inputvisible", "update:editvisible"])
"update:inputfilter",
"update:inputvisible",
"update:editvisible",
]);
const updateInput = (value: string | number | null) => { const updateInput = (value: string | number | null) => {
emit("update:inputfilter", value); emit("update:inputfilter", value)
}; }
const updateVisible = (value: []) => { const updateVisible = (value: []) => {
emit("update:inputvisible", value); emit("update:inputvisible", value)
}; }
const paginationLabel = (start: string, end: string, total: string) => { const paginationLabel = (start: string, end: string, total: string) => {
return start + "-" + end + " ใน " + total; return start + "-" + end + " ใน " + total
}; }
const resetFilter = () => { const resetFilter = () => {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
emit("update:inputfilter", ""); emit("update:inputfilter", "")
filterRef.value.focus(); filterRef.value.focus()
}; }
</script> </script>
<style lang="scss"> <style lang="scss">
.icon-color { .icon-color {
color: #4154b3; color: #4154b3;
} }
.custom-table2 { .custom-table2 {
.q-table tr:nth-child(odd) td { .q-table tr:nth-child(odd) td {
background: white; background: white;
} }
.q-table tr:nth-child(even) td { .q-table tr:nth-child(even) td {
background: #f8f8f8; background: #f8f8f8;
} }
.q-table thead tr { .q-table thead tr {
background: #ecebeb; background: #ecebeb;
} }
.q-table thead tr th { .q-table thead tr th {
position: sticky; position: sticky;
} }
.q-table td:nth-of-type(2) { .q-table td:nth-of-type(2) {
z-index: 3 !important; z-index: 3 !important;
} }
.q-table th:nth-of-type(2), .q-table th:nth-of-type(2),
.q-table td:nth-of-type(2) { .q-table td:nth-of-type(2) {
position: sticky; position: sticky;
left: 0; left: 0;
z-index: 1; z-index: 1;
} }
/* this will be the loading indicator */ /* this will be the loading indicator */
.q-table thead tr:last-child th { .q-table thead tr:last-child th {
/* height of all previous header rows */ /* height of all previous header rows */
top: 48px; top: 48px;
} }
.q-table thead tr:first-child th { .q-table thead tr:first-child th {
top: 0; top: 0;
} }
} }
</style> </style>

2
src/modules/04_checkin/views/history.vue
View file

@ -82,7 +82,7 @@ import Table from "@/modules/04_checkin/componenst/tableHistory.vue"
const router = useRouter() const router = useRouter()
const filter = ref<string>("") const filter = ref<string>("")
const visibleColumns = ref<String[]>(["date", "in", "loIn", "out", "loOut", "status"]) const visibleColumns = ref<String[]>(["no", "date", "in", "loIn", "out", "loOut", "status"])
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "no", name: "no",

289
src/modules/05_leave/componenst/ListCalendar.vue
View file

@ -1,187 +1,134 @@
<template> <template>
<Table <Table
:style="$q.screen.gt.xs ? 'height: 58.5vh' : ''" :style="$q.screen.gt.xs ? 'height: 58.5vh' : ''"
:rows="rows" :rows="LeaveData.rows"
:columns="columns" :columns="LeaveData.columns"
:filter="filter" :filter="filter"
:visible-columns="visibleColumns" :visible-columns="LeaveData.visibleColumns"
v-model:inputfilter="filter" v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns" v-model:inputvisible="LeaveData.visibleColumns"
:pagination="initialPagination" :pagination="initialPagination"
:inputShow="true" :inputShow="true"
:grid="$q.screen.gt.xs ? false : true" :grid="$q.screen.gt.xs ? false : true"
> >
<template #columns="props"> <template #columns="props">
<q-tr :props="props" class=" cursor-pointer"> <q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props" @click="view(props.row.type)"> <q-td key="no" :props="props" @click="view(props.row.type)">
{{ props.rowIndex + 1 }} {{ props.rowIndex + 1 }}
</q-td> </q-td>
<q-td key="type" :props="props" @click="view(props.row.type)"> <q-td key="type" :props="props" @click="view(props.row.type)">
{{ props.row.type }} {{ props.row.type }}
</q-td> </q-td>
<q-td key="date" :props="props" @click="view(props.row.type)"> <q-td key="date" :props="props" @click="view(props.row.type)">
{{ props.row.date }} {{ props.row.date }}
</q-td> </q-td>
<q-td key="status" :props="props"> <q-td key="status" :props="props">
<div class="col-12 row items-center"> <div class="col-12 row items-center">
<div @click="view(props.row.type)"> <div @click="view(props.row.type)">
<q-icon v-if="props.row.status == 'อนุมัติ'" size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" /> <q-icon v-if="props.row.status == 'อนุมัติ'" size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" />
<q-icon v-else-if="props.row.status == 'ไม่อนุมัติ'" size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" /> <q-icon v-else-if="props.row.status == 'ไม่อนุมัติ'" size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
<q-icon v-else-if="props.row.status == 'อยู่ระหว่างดำเนินการ'" size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" /> <q-icon v-else-if="props.row.status == 'อยู่ระหว่างดำเนินการ'" size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
<q-icon v-else-if="props.row.status == 'ใหม่'" size="10px" color="orange" name="mdi-circle" class="q-mr-sm" /> <q-icon v-else-if="props.row.status == 'ใหม่'" size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
<span class="q-pr-md">{{ props.row.status }}</span> <span class="q-pr-md">{{ props.row.status }}</span>
</div> </div>
<q-space/> <q-space />
<q-btn v-if="props.row.status == 'ใหม่'" label="ขอยกเลิก" @click="cancel(props.row.type)" size="13px" class="q-px-sm" outline dense color="orange" /> <q-btn v-if="props.row.status == 'ใหม่'" label="ขอยกเลิก" @click="cancel(props.row.type)" size="13px" class="q-px-sm" outline dense color="orange" />
</div> </div>
</q-td> </q-td>
</q-tr> </q-tr>
</template> </template>
</Table> </Table>
<!-- modal ขอยกเลิก/ดูรายละเอียด --> <!-- modal ขอยกเลิก/ดูรายละเอียด -->
<q-dialog v-model="modalCancel" persistent> <q-dialog v-model="modalCancel" persistent>
<q-card :style="modeCancel == true ? 'min-width: 50%;': 'min-width:30%'"> <q-card :style="modeCancel == true ? 'min-width: 50%;' : 'min-width:30%'">
<q-card-section class="row items-center q-pa-sm"> <q-card-section class="row items-center q-pa-sm">
<div v-if="modeCancel == false" class="text-bold q-pl-sm">รายละเอียดของ{{ title }}</div> <div v-if="modeCancel == false" class="text-bold q-pl-sm">รายละเอียดของ{{ title }}</div>
<div v-else class="text-bold q-pl-sm">ขอยกเลิก{{ title }}</div> <div v-else class="text-bold q-pl-sm">ขอยกเลิก{{ title }}</div>
<q-space /> <q-space />
<q-btn <q-btn icon="close" unelevated round dense v-close-popup style="color: #ff8080; background-color: #ffdede" />
icon="close" </q-card-section>
unelevated <q-separator />
round <q-card-section class="q-p-md row q-gutter-y-md">
dense <div flat :class="modeCancel == true ? 'col-xs-6 col-sm-6' : 'col-12'">
v-close-popup <div class="col-12 q-col-gutter-sm row items-center">
style="color: #ff8080; background-color: #ffdede" <div class="col-6 text-grey-7">เขียนที่</div>
/> <div class="col-6 text-black">{{ location }}</div>
</q-card-section> <div class="col-6 text-grey-7">เรื่องและเหตุผลการลา</div>
<q-separator /> <div class="col-6 text-black">{{ subject }}</div>
<q-card-section class="q-p-md row q-gutter-y-md"> <div class="col-6 text-grey-7">วัน เดือน ปีเริ่มต้น</div>
<div flat :class="modeCancel == true ? 'col-xs-6 col-sm-6': 'col-12'"> <div class="col-6 text-black">{{ dateStart }}</div>
<div class="col-12 q-col-gutter-sm row items-center"> <div class="col-6 text-grey-7">วัน เดือน ปีสิ้นสุด</div>
<div class="col-6 text-grey-7">เขียนที่</div> <div class="col-6 text-black">{{ dateEnd }}</div>
<div class="col-6 text-black">{{ location }}</div> <div class="col-6 text-grey-7">จำนวนวันที่ลา</div>
<div class="col-6 text-grey-7">เรื่องและเหตุผลการลา</div> <div class="col-6 text-black">{{ numDate }}</div>
<div class="col-6 text-black">{{ subject }}</div> <div class="col-6 text-grey-7">สถานที่ติดต่อขณะลา</div>
<div class="col-6 text-grey-7">วัน เดือน ปีเริ่มต้น</div> <div class="col-6 text-black">{{ place }}</div>
<div class="col-6 text-black">{{ dateStart }}</div> <div class="col-6 text-grey-7">หมายเลขโทรศัพท์</div>
<div class="col-6 text-grey-7">วัน เดือน ปีสิ้นสุด</div> <div class="col-6 text-black">{{ phone }}</div>
<div class="col-6 text-black">{{ dateEnd }}</div> </div>
<div class="col-6 text-grey-7">จำนวนวันที่ลา</div> </div>
<div class="col-6 text-black">{{ numDate }}</div> <div flat class="col-xs-6 col-sm-6" v-if="modeCancel == true">
<div class="col-6 text-grey-7">สถานที่ติดต่อขณะลา</div> <q-input v-model="reason" type="textarea" label="กรอกเหตุผล" outlined dense />
<div class="col-6 text-black">{{ place }}</div> <q-file outlined v-model="model" label="เลือกไฟล์เอกสารหลักฐาน" class="q-mt-md" use-chips dense>
<div class="col-6 text-grey-7">หมายเลขโทรศัพท์</div> <template v-slot:prepend>
<div class="col-6 text-black">{{ phone }}</div> <q-icon name="attach_file" />
</div> </template>
</div> </q-file>
<div flat class="col-xs-6 col-sm-6" v-if="modeCancel == true"> </div>
<q-input </q-card-section>
v-model="reason" <q-separator />
type="textarea" <q-card-section class="row items-center q-pa-sm" v-if="modeCancel == true">
label="กรอกเหตุผล" <q-space />
outlined <q-btn label="ยืนยัน" unelevated color="secondary" dense class="q-px-md" v-close-popup />
dense </q-card-section>
/> </q-card>
<q-file outlined v-model="model" label="เลือกไฟล์เอกสารหลักฐาน" class="q-mt-md" use-chips dense> </q-dialog>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
</q-card-section>
<q-separator />
<q-card-section class="row items-center q-pa-sm" v-if="modeCancel == true">
<q-space />
<q-btn
label="ยืนยัน"
unelevated
color="secondary"
dense
class="q-px-md"
v-close-popup
/>
</q-card-section>
</q-card>
</q-dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar"
import { ref } from "vue"; import { ref, onMounted } from "vue"
import Table from "@/modules/05_leave/componenst/Table.vue" import Table from "@/modules/05_leave/componenst/Table.vue"
import { useLeaveStore } from "@/modules/05_leave/store"
const LeaveData = useLeaveStore()
const { fecthList, searchFilterTable } = LeaveData
const filter = ref<string>("") const filter = ref<string>("")
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 rows = ref<any>([
{no:'1',date: '20 ก.ย. 2566',type: 'ลาป่วย',status: 'ใหม่' },
{no:'2',date: '19 ก.ย. 2566',type: 'ลาป่วย',status: 'อยู่ระหว่างดำเนินการ' },
{no:'3',date: '10 ก.ย. 2566',type: 'ลากิจส่วนตัว',status: 'อนุมัติ' },
])
const initialPagination = ref({ const initialPagination = ref({
rowsPerPage: 0, rowsPerPage: 0,
}) })
const modalCancel = ref(false); const modalCancel = ref(false)
const title = ref(''); const title = ref("")
const location = ref('บ้าน'); const location = ref("บ้าน")
const subject = ref('ลาป่วย'); const subject = ref("ลาป่วย")
const dateStart = ref('20 ส.ค. 2566'); const dateStart = ref("20 ส.ค. 2566")
const dateEnd= ref('21 ส.ค. 2566'); const dateEnd = ref("21 ส.ค. 2566")
const numDate= ref('20'); const numDate = ref("20")
const place = ref('บ้าน'); const place = ref("บ้าน")
const phone = ref('000-00000000'); const phone = ref("000-00000000")
const reason = ref('ยกเลิกการลา'); const reason = ref("ยกเลิกการลา")
const model = ref(null); const model = ref(null)
const modeCancel = ref(true); const modeCancel = ref(true)
const cancel = async (text: string) => { const cancel = async (text: string) => {
title.value = text; title.value = text
modalCancel.value = true; modalCancel.value = true
modeCancel.value = true; modeCancel.value = true
}; }
const view = async (text: string) => { const view = async (text: string) => {
title.value = text; title.value = text
modalCancel.value = true; modalCancel.value = true
modeCancel.value = false; modeCancel.value = false
}; }
onMounted(async () => {
searchFilterTable()
fecthList([
{ no: "1", date: "2023-09-20", type: "1", status: "4", year: "2566" },
{ no: "2", date: "2023-09-19", type: "1", status: "2", year: "2566" },
{ no: "3", date: "2023-09-10", type: "2", status: "3", year: "2566" },
])
})
</script> </script>

88
src/modules/05_leave/componenst/Table.vue
View file

@ -7,7 +7,7 @@
outlined outlined
dense dense
lazy-rules lazy-rules
v-model="type" v-model="LeaveData.LeaveType"
:rules="[val => !!val || `${'กรุณาเลือกประเภทใบลา'}`]" :rules="[val => !!val || `${'กรุณาเลือกประเภทใบลา'}`]"
:label="`${'ประเภทใบลา'}`" :label="`${'ประเภทใบลา'}`"
emit-value emit-value
@ -20,14 +20,14 @@
class="col-xs-12 col-sm-auto" class="col-xs-12 col-sm-auto"
@update:model-value="searchFilterTable" @update:model-value="searchFilterTable"
@filter="(inputValue:any, @filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'typeOptions' doneFn:Function) => filterSelector(inputValue, doneFn,'LeaveTypeOption'
) " ) "
/> />
<q-select <q-select
outlined outlined
dense dense
lazy-rules lazy-rules
v-model="status" v-model="LeaveData.LeaveStatus"
:rules="[val => !!val || `${'กรุณาเลือกสถานะ'}`]" :rules="[val => !!val || `${'กรุณาเลือกสถานะ'}`]"
:label="`${'สถานะ'}`" :label="`${'สถานะ'}`"
emit-value emit-value
@ -40,7 +40,7 @@
class="col-xs-12 col-sm-auto" class="col-xs-12 col-sm-auto"
@update:model-value="searchFilterTable" @update:model-value="searchFilterTable"
@filter="(inputValue:any, @filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'statusOptions' doneFn:Function) => filterSelector(inputValue, doneFn,'LeaveStatusOption'
) " ) "
/> />
<q-space /> <q-space />
@ -99,15 +99,21 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, useAttrs } from "vue" import { ref, useAttrs, reactive, onMounted } from "vue"
import { useLeaveStore } from "@/modules/05_leave/store" import { useLeaveStore } from "@/modules/05_leave/store"
import type { OptionData } from "@/modules/05_leave/interface/index/main"
import type { an } from "@fullcalendar/core/internal-common" import type { an } from "@fullcalendar/core/internal-common"
import { useCounterMixin } from "@/stores/mixin"
const mixin = useCounterMixin()
const { showLoader, hideLoader, date2Thai, messageError } = mixin
const DataStore = useLeaveStore() const DataStore = useLeaveStore()
const LeaveData = useLeaveStore() const LeaveData = useLeaveStore()
const { filterSelector, searchFilterTable } = LeaveData
const attrs = ref<any>(useAttrs()) const attrs = ref<any>(useAttrs())
const table = ref<any>(null) const table = ref<any>(null)
const filterRef = ref<any>(null) const filterRef = ref<any>(null)
const rows = ref<any[]>([]) const rows = ref<any[]>([])
const type = ref("ทั้งหมด") const type = ref("ทั้งหมด")
const status = ref("ทั้งหมด") const status = ref("ทั้งหมด")
@ -115,15 +121,6 @@ const status = ref("ทั้งหมด")
const initialPagination = ref({ const initialPagination = ref({
rowsPerPage: 0, rowsPerPage: 0,
}) })
const yearly = ref<number>(new Date().getFullYear())
let OriginalData = ref<any[]>([])
let UpdataData = ref<any[]>([])
const OriginalDataFetch = async () => {
await DataStore.DataMain(rows.value)
OriginalData.value = await DataStore.DataMainOrig
UpdataData.value = OriginalData.value
}
const props = defineProps({ const props = defineProps({
count: Number, count: Number,
@ -157,69 +154,6 @@ const resetFilter = () => {
emit("update:inputfilter", "") emit("update:inputfilter", "")
filterRef.value.focus() filterRef.value.focus()
} }
const searchFilterTable = async () => {
// ส่งไป filter รายการข้อมูลตามเงื่อนไข
await DataStore.DataUpdate(typeOptions.value, statusOptions.value)
UpdataData.value = DataStore.DataMainUpdate
}
// รายการข้อมูลประเภท
const typeOptions = ref<string>("")
const typeOptionsFilter1 = ref<any>([])
const typeOptionsOption = ref<any[]>([{ id: "", name: "ทั้งหมด" }])
const TypeFilter = async () => {
// await http
// .get(config.API.typeOrder())
// .then((res) => {
// const response = res.data.result;
// LeaveData.typeOptions = [{ id: "", name: "ทั้งหมด" }];
// TypeOption.value.push(...response);
// typeOptionsFilter1.value = [{ id: "", name: "ทั้งหมด" }];
// typeOptionsFilter1.value.push(...response);
// })
// .catch((e) => {
// messageError($q, e);
// });
}
// รายการข้อมูลประเภท
const statusOptions = ref<string>("")
const statusOptionsFilter1 = ref<any>([])
const statusOptionsOption = ref<any[]>([{ id: "", name: "ทั้งหมด" }])
const statusOptionsFilter = async () => {
// await http
// .get(config.API.typeOrder())
// .then((res) => {
// const response = res.data.result;
// LeaveData.typeOptions = [{ id: "", name: "ทั้งหมด" }];
// TypeOption.value.push(...response);
// typeOptionsFilter1.value = [{ id: "", name: "ทั้งหมด" }];
// typeOptionsFilter1.value.push(...response);
// })
// .catch((e) => {
// messageError($q, e);
// });
}
const filterSelector = (val: any, update: Function, refData: string) => {
switch (refData) {
case "typeOptions":
update(() => {
LeaveData.typeOptions.values = typeOptionsFilter1.value.filter((v: any) => v.name.indexOf(val) > -1)
})
break
case "statusOptions":
update(() => {
LeaveData.statusOptions.values = statusOptionsFilter1.value.filter((v: any) => v.name.indexOf(val) > -1)
})
break
default:
break
}
}
</script> </script>
<style lang="scss"> <style lang="scss">
.icon-color { .icon-color {

12
src/modules/05_leave/interface/index/main.ts
View file

@ -1,3 +1,5 @@
import type { S } from "@fullcalendar/core/internal-common"
interface OptionData { interface OptionData {
id: string | undefined id: string | undefined
name: string | undefined name: string | undefined
@ -14,4 +16,12 @@ interface FormLeavetMainData {
numCancel: string numCancel: string
} }
export type { OptionData, FormLeavetMainData } interface formListLeaveData {
no: string
date: string | null
type: string
status: string
fiscalyear: string
}
export type { OptionData, FormLeavetMainData, formListLeaveData }

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

@ -1,27 +1,153 @@
import { defineStore } from "pinia" import { defineStore } from "pinia"
import { ref } from "vue" import { ref, computed } from "vue"
import type { QTableProps } from "quasar" 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", () => { export const useLeaveStore = defineStore("Leave", () => {
const DataMainOrig = ref<FormLeavetMainData[]>([]) // ข้อมูลหลักดั้งเดิม const mixin = useCounterMixin()
const DataMainUpdate = ref<FormLeavetMainData[]>([]) // ข้อมูลเปลี่ยนแปลง const { date2Thai } = mixin
const LeaveType = ref<string | null>("0")
const DataMain = (val: FormLeavetMainData[]) => { const LeaveStatus = ref<string | null>("0")
DataMainOrig.value = val 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 DataMainUpdate = ref<formListLeaveData[]>([]) // ข้อมูลเปลี่ยนแปลง
const DataUpdate = (filter_1: string, filter_2: string) => { const DataMain = (val: formListLeaveData[]) => (DataMainOrig.value = val)
const DataUpdate = (filterType: string, filterStatus: string, filterYear: number | null) => {
DataMainUpdate.value = [] DataMainUpdate.value = []
if (filter_1 === "" && filter_2 === "ทั้งหมด") { if (filterType === "" && filterStatus === "" && filterYear === 0) {
DataMainUpdate.value = DataMainOrig.value DataMainUpdate.value = DataMainOrig.value
} else if (filter_1 !== "" && filter_2 === "ทั้งหมด") { } else if (filterType !== "" && filterStatus === "" && filterYear === 0) {
DataMainUpdate.value = DataMainOrig.value.filter(item => item.TypeValue === filter_1) DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Type === filterType)
} else if (filter_1 !== "" && filter_2 !== "ทั้งหมด") { } else if (filterType !== "" && filterStatus !== "" && filterYear === null) {
DataMainUpdate.value = DataMainOrig.value.filter(item => item.TypeValue === filter_1 && item.Status === filter_2) DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Type === filterType && item.Status === filterStatus)
} else if (filter_1 === "" && filter_2 !== "ทั้งหมด") { } else if (filterType !== "" && filterStatus === "" && filterYear !== 0) {
DataMainUpdate.value = DataMainOrig.value.filter(item => item.Status === filter_2) 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: "ดูงาน" }, { id: "2", name: "ดูงาน" },
]) ])
const typeOptions = ref<OptionData[]>([ const typeOptions = ref<OptionData[]>([
{ id: "0", name: "ลาป่วย" }, { id: "0", name: "ทั้งหมด" },
{ id: "1", name: "ลากิจส่วนตัว" }, { id: "1", name: "ลาป่วย" },
{ id: "2", name: "ลาคลอดบุตร" }, { id: "2", name: "ลากิจส่วนตัว" },
{ id: "3", name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" }, { id: "3", name: "ลาคลอดบุตร" },
{ id: "4", name: "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ" }, { id: "4", name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
{ id: "5", name: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล" }, { id: "5", name: "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ" },
{ id: "6", name: "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน" }, { id: "6", name: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล" },
{ id: "7", name: "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ" }, { id: "7", name: "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน" },
{ id: "8", name: "ลาติดตามคู่สมรส" }, { id: "8", name: "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ" },
{ id: "9", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" }, { id: "9", name: "ลาติดตามคู่สมรส" },
{ id: "10", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
]) ])
const statusOptions = ref<OptionData>([ const statusOptions = ref<OptionData>([
{ id: "0", name: "อนุมัติ" }, { id: "0", name: "ทั้งหมด" },
{ id: "1", name: "ไม่อนุมัติ" }, { id: "1", name: "อนุมัติ" },
{ id: "2", name: "อยู่ระหว่างดำเนินการ" }, { id: "2", name: "ไม่อนุมัติ" },
{ id: "3", 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 { return {
typeOptions, typeOptions,
optionsSpecific, optionsSpecific,
@ -58,5 +226,13 @@ export const useLeaveStore = defineStore("Leave", () => {
DataMainUpdate, DataMainUpdate,
DataUpdate, DataUpdate,
DataMainOrig, DataMainOrig,
visibleColumns,
columns,
rows,
LeaveType,
LeaveStatus,
fecthList,
filterSelector,
searchFilterTable,
} }
}) })

3
src/modules/05_leave/views/Main.vue
View file

@ -4,7 +4,6 @@
<div class="toptitle text-white col-12 row items-center"> <div class="toptitle text-white col-12 row items-center">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" /> <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
<div>รายการลา</div> <div>รายการลา</div>
{{ dateMonth }}
</div> </div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md"> <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
@ -155,7 +154,7 @@ import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/C
const router = useRouter() const router = useRouter()
const currentTab = ref<string>("calendar") //ระบุ tab ใช้งานอยู่ calendar=รายการ list=รายการ const currentTab = ref<string>("calendar") //ระบุ tab ใช้งานอยู่ calendar=รายการ list=รายการ
const dateMonth = ref<DataDateMonthObject>({ const dateMonth = ref<DataDateMonthObject>({
month: new Date().getMonth(), // Months are 0-based in JavaScript, so we add 1 to get the actual month. month: new Date().getMonth(),
year: new Date().getFullYear(), year: new Date().getFullYear(),
}) })
const dateYear = ref<number>(new Date().getFullYear()) const dateYear = ref<number>(new Date().getFullYear())