เพิ่ม filter แก้ไข store ปรับ ui
This commit is contained in:
AnandaTon
parent
cb4850ec27
commit
e0112b45ed
7 changed files with 481 additions and 459 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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">
|
|
||||||
<div class="col-12 row items-center">
|
|
||||||
<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-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="orange" name="mdi-circle" class="q-mr-sm" />
|
|
||||||
<span class="q-pr-md">{{ props.row.status }}</span>
|
|
||||||
</div>
|
|
||||||
<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" />
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</Table>
|
|
||||||
|
|
||||||
<!-- modal ขอยกเลิก/ดูรายละเอียด -->
|
<q-td key="status" :props="props">
|
||||||
<q-dialog v-model="modalCancel" persistent>
|
<div class="col-12 row items-center">
|
||||||
<q-card :style="modeCancel == true ? 'min-width: 50%;': 'min-width:30%'">
|
<div @click="view(props.row.type)">
|
||||||
<q-card-section class="row items-center q-pa-sm">
|
<q-icon v-if="props.row.status == 'อนุมัติ'" size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" />
|
||||||
<div v-if="modeCancel == false" class="text-bold q-pl-sm">รายละเอียดของ{{ title }}</div>
|
<q-icon v-else-if="props.row.status == 'ไม่อนุมัติ'" size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
|
||||||
<div v-else class="text-bold q-pl-sm">ขอยกเลิก{{ title }}</div>
|
<q-icon v-else-if="props.row.status == 'อยู่ระหว่างดำเนินการ'" size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
|
||||||
<q-space />
|
<q-icon v-else-if="props.row.status == 'ใหม่'" size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
|
||||||
<q-btn
|
<span class="q-pr-md">{{ props.row.status }}</span>
|
||||||
icon="close"
|
</div>
|
||||||
unelevated
|
<q-space />
|
||||||
round
|
<q-btn v-if="props.row.status == 'ใหม่'" label="ขอยกเลิก" @click="cancel(props.row.type)" size="13px" class="q-px-sm" outline dense color="orange" />
|
||||||
dense
|
</div>
|
||||||
v-close-popup
|
</q-td>
|
||||||
style="color: #ff8080; background-color: #ffdede"
|
</q-tr>
|
||||||
/>
|
</template>
|
||||||
</q-card-section>
|
</Table>
|
||||||
<q-separator />
|
|
||||||
<q-card-section class="q-p-md row q-gutter-y-md">
|
<!-- modal ขอยกเลิก/ดูรายละเอียด -->
|
||||||
<div flat :class="modeCancel == true ? 'col-xs-6 col-sm-6': 'col-12'">
|
<q-dialog v-model="modalCancel" persistent>
|
||||||
<div class="col-12 q-col-gutter-sm row items-center">
|
<q-card :style="modeCancel == true ? 'min-width: 50%;' : 'min-width:30%'">
|
||||||
<div class="col-6 text-grey-7">เขียนที่</div>
|
<q-card-section class="row items-center q-pa-sm">
|
||||||
<div class="col-6 text-black">{{ location }}</div>
|
<div v-if="modeCancel == false" class="text-bold q-pl-sm">รายละเอียดของ{{ title }}</div>
|
||||||
<div class="col-6 text-grey-7">เรื่องและเหตุผลการลา</div>
|
<div v-else class="text-bold q-pl-sm">ขอยกเลิก{{ title }}</div>
|
||||||
<div class="col-6 text-black">{{ subject }}</div>
|
<q-space />
|
||||||
<div class="col-6 text-grey-7">วัน เดือน ปีเริ่มต้น</div>
|
<q-btn icon="close" unelevated round dense v-close-popup style="color: #ff8080; background-color: #ffdede" />
|
||||||
<div class="col-6 text-black">{{ dateStart }}</div>
|
</q-card-section>
|
||||||
<div class="col-6 text-grey-7">วัน เดือน ปีสิ้นสุด</div>
|
<q-separator />
|
||||||
<div class="col-6 text-black">{{ dateEnd }}</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">{{ numDate }}</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">{{ place }}</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">{{ phone }}</div>
|
<div class="col-6 text-black">{{ subject }}</div>
|
||||||
</div>
|
<div class="col-6 text-grey-7">วัน เดือน ปีเริ่มต้น</div>
|
||||||
</div>
|
<div class="col-6 text-black">{{ dateStart }}</div>
|
||||||
<div flat class="col-xs-6 col-sm-6" v-if="modeCancel == true">
|
<div class="col-6 text-grey-7">วัน เดือน ปีสิ้นสุด</div>
|
||||||
<q-input
|
<div class="col-6 text-black">{{ dateEnd }}</div>
|
||||||
v-model="reason"
|
<div class="col-6 text-grey-7">จำนวนวันที่ลา</div>
|
||||||
type="textarea"
|
<div class="col-6 text-black">{{ numDate }}</div>
|
||||||
label="กรอกเหตุผล"
|
<div class="col-6 text-grey-7">สถานที่ติดต่อขณะลา</div>
|
||||||
outlined
|
<div class="col-6 text-black">{{ place }}</div>
|
||||||
dense
|
<div class="col-6 text-grey-7">หมายเลขโทรศัพท์</div>
|
||||||
/>
|
<div class="col-6 text-black">{{ phone }}</div>
|
||||||
<q-file outlined v-model="model" label="เลือกไฟล์เอกสารหลักฐาน" class="q-mt-md" use-chips dense>
|
</div>
|
||||||
<template v-slot:prepend>
|
</div>
|
||||||
<q-icon name="attach_file" />
|
<div flat class="col-xs-6 col-sm-6" v-if="modeCancel == true">
|
||||||
</template>
|
<q-input v-model="reason" type="textarea" label="กรอกเหตุผล" outlined dense />
|
||||||
</q-file>
|
<q-file outlined v-model="model" label="เลือกไฟล์เอกสารหลักฐาน" class="q-mt-md" use-chips dense>
|
||||||
</div>
|
<template v-slot:prepend>
|
||||||
</q-card-section>
|
<q-icon name="attach_file" />
|
||||||
<q-separator />
|
</template>
|
||||||
<q-card-section class="row items-center q-pa-sm" v-if="modeCancel == true">
|
</q-file>
|
||||||
<q-space />
|
</div>
|
||||||
<q-btn
|
</q-card-section>
|
||||||
label="ยืนยัน"
|
<q-separator />
|
||||||
unelevated
|
<q-card-section class="row items-center q-pa-sm" v-if="modeCancel == true">
|
||||||
color="secondary"
|
<q-space />
|
||||||
dense
|
<q-btn label="ยืนยัน" unelevated color="secondary" dense class="q-px-md" v-close-popup />
|
||||||
class="q-px-md"
|
</q-card-section>
|
||||||
v-close-popup
|
</q-card>
|
||||||
/>
|
</q-dialog>
|
||||||
</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
|
||||||
};
|
}
|
||||||
</script>
|
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>
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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 }
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -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())
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue