เพิ่ม filter แก้ไข store ปรับ ui
This commit is contained in:
AnandaTon
parent
cb4850ec27
commit
e0112b45ed
7 changed files with 481 additions and 459 deletions
|
|
@ -1,187 +1,134 @@
|
|||
<template>
|
||||
<Table
|
||||
:style="$q.screen.gt.xs ? 'height: 58.5vh' : ''"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:filter="filter"
|
||||
:visible-columns="visibleColumns"
|
||||
v-model:inputfilter="filter"
|
||||
v-model:inputvisible="visibleColumns"
|
||||
:pagination="initialPagination"
|
||||
:inputShow="true"
|
||||
:grid="$q.screen.gt.xs ? false : true"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props" class=" cursor-pointer">
|
||||
<q-td key="no" :props="props" @click="view(props.row.type)">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td key="type" :props="props" @click="view(props.row.type)">
|
||||
{{ props.row.type }}
|
||||
</q-td>
|
||||
<q-td key="date" :props="props" @click="view(props.row.type)">
|
||||
{{ props.row.date }}
|
||||
</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>
|
||||
<Table
|
||||
:style="$q.screen.gt.xs ? 'height: 58.5vh' : ''"
|
||||
:rows="LeaveData.rows"
|
||||
:columns="LeaveData.columns"
|
||||
:filter="filter"
|
||||
:visible-columns="LeaveData.visibleColumns"
|
||||
v-model:inputfilter="filter"
|
||||
v-model:inputvisible="LeaveData.visibleColumns"
|
||||
:pagination="initialPagination"
|
||||
:inputShow="true"
|
||||
:grid="$q.screen.gt.xs ? false : true"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td key="no" :props="props" @click="view(props.row.type)">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td key="type" :props="props" @click="view(props.row.type)">
|
||||
{{ props.row.type }}
|
||||
</q-td>
|
||||
<q-td key="date" :props="props" @click="view(props.row.type)">
|
||||
{{ props.row.date }}
|
||||
</q-td>
|
||||
|
||||
<!-- modal ขอยกเลิก/ดูรายละเอียด -->
|
||||
<q-dialog v-model="modalCancel" persistent>
|
||||
<q-card :style="modeCancel == true ? 'min-width: 50%;': 'min-width:30%'">
|
||||
<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-else class="text-bold q-pl-sm">ขอยกเลิก{{ title }}</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
v-close-popup
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-md row q-gutter-y-md">
|
||||
<div flat :class="modeCancel == true ? 'col-xs-6 col-sm-6': 'col-12'">
|
||||
<div class="col-12 q-col-gutter-sm row items-center">
|
||||
<div class="col-6 text-grey-7">เขียนที่</div>
|
||||
<div class="col-6 text-black">{{ location }}</div>
|
||||
<div class="col-6 text-grey-7">เรื่องและเหตุผลการลา</div>
|
||||
<div class="col-6 text-black">{{ subject }}</div>
|
||||
<div class="col-6 text-grey-7">วัน เดือน ปีเริ่มต้น</div>
|
||||
<div class="col-6 text-black">{{ dateStart }}</div>
|
||||
<div class="col-6 text-grey-7">วัน เดือน ปีสิ้นสุด</div>
|
||||
<div class="col-6 text-black">{{ dateEnd }}</div>
|
||||
<div class="col-6 text-grey-7">จำนวนวันที่ลา</div>
|
||||
<div class="col-6 text-black">{{ numDate }}</div>
|
||||
<div class="col-6 text-grey-7">สถานที่ติดต่อขณะลา</div>
|
||||
<div class="col-6 text-black">{{ place }}</div>
|
||||
<div class="col-6 text-grey-7">หมายเลขโทรศัพท์</div>
|
||||
<div class="col-6 text-black">{{ phone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div flat class="col-xs-6 col-sm-6" v-if="modeCancel == true">
|
||||
<q-input
|
||||
v-model="reason"
|
||||
type="textarea"
|
||||
label="กรอกเหตุผล"
|
||||
outlined
|
||||
dense
|
||||
/>
|
||||
<q-file outlined v-model="model" label="เลือกไฟล์เอกสารหลักฐาน" class="q-mt-md" use-chips dense>
|
||||
<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>
|
||||
<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-dialog v-model="modalCancel" persistent>
|
||||
<q-card :style="modeCancel == true ? 'min-width: 50%;' : 'min-width:30%'">
|
||||
<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-else class="text-bold q-pl-sm">ขอยกเลิก{{ title }}</div>
|
||||
<q-space />
|
||||
<q-btn icon="close" unelevated round dense v-close-popup style="color: #ff8080; background-color: #ffdede" />
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-md row q-gutter-y-md">
|
||||
<div flat :class="modeCancel == true ? 'col-xs-6 col-sm-6' : 'col-12'">
|
||||
<div class="col-12 q-col-gutter-sm row items-center">
|
||||
<div class="col-6 text-grey-7">เขียนที่</div>
|
||||
<div class="col-6 text-black">{{ location }}</div>
|
||||
<div class="col-6 text-grey-7">เรื่องและเหตุผลการลา</div>
|
||||
<div class="col-6 text-black">{{ subject }}</div>
|
||||
<div class="col-6 text-grey-7">วัน เดือน ปีเริ่มต้น</div>
|
||||
<div class="col-6 text-black">{{ dateStart }}</div>
|
||||
<div class="col-6 text-grey-7">วัน เดือน ปีสิ้นสุด</div>
|
||||
<div class="col-6 text-black">{{ dateEnd }}</div>
|
||||
<div class="col-6 text-grey-7">จำนวนวันที่ลา</div>
|
||||
<div class="col-6 text-black">{{ numDate }}</div>
|
||||
<div class="col-6 text-grey-7">สถานที่ติดต่อขณะลา</div>
|
||||
<div class="col-6 text-black">{{ place }}</div>
|
||||
<div class="col-6 text-grey-7">หมายเลขโทรศัพท์</div>
|
||||
<div class="col-6 text-black">{{ phone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div flat class="col-xs-6 col-sm-6" v-if="modeCancel == true">
|
||||
<q-input v-model="reason" type="textarea" label="กรอกเหตุผล" outlined dense />
|
||||
<q-file outlined v-model="model" label="เลือกไฟล์เอกสารหลักฐาน" class="q-mt-md" use-chips dense>
|
||||
<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>
|
||||
<script setup lang="ts">
|
||||
import type { QTableProps } from "quasar";
|
||||
import { ref } from "vue";
|
||||
import type { QTableProps } from "quasar"
|
||||
import { ref, onMounted } from "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 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({
|
||||
rowsPerPage: 0,
|
||||
})
|
||||
|
||||
const modalCancel = ref(false);
|
||||
const title = ref('');
|
||||
const location = ref('บ้าน');
|
||||
const subject = ref('ลาป่วย');
|
||||
const dateStart = ref('20 ส.ค. 2566');
|
||||
const dateEnd= ref('21 ส.ค. 2566');
|
||||
const numDate= ref('20');
|
||||
const place = ref('บ้าน');
|
||||
const phone = ref('000-00000000');
|
||||
const reason = ref('ยกเลิกการลา');
|
||||
const model = ref(null);
|
||||
const modeCancel = ref(true);
|
||||
const modalCancel = ref(false)
|
||||
const title = ref("")
|
||||
const location = ref("บ้าน")
|
||||
const subject = ref("ลาป่วย")
|
||||
const dateStart = ref("20 ส.ค. 2566")
|
||||
const dateEnd = ref("21 ส.ค. 2566")
|
||||
const numDate = ref("20")
|
||||
const place = ref("บ้าน")
|
||||
const phone = ref("000-00000000")
|
||||
const reason = ref("ยกเลิกการลา")
|
||||
const model = ref(null)
|
||||
const modeCancel = ref(true)
|
||||
|
||||
const cancel = async (text: string) => {
|
||||
title.value = text;
|
||||
modalCancel.value = true;
|
||||
modeCancel.value = true;
|
||||
};
|
||||
title.value = text
|
||||
modalCancel.value = true
|
||||
modeCancel.value = true
|
||||
}
|
||||
const view = async (text: string) => {
|
||||
title.value = text;
|
||||
modalCancel.value = true;
|
||||
modeCancel.value = false;
|
||||
};
|
||||
</script>
|
||||
title.value = text
|
||||
modalCancel.value = true
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="type"
|
||||
v-model="LeaveData.LeaveType"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกประเภทใบลา'}`]"
|
||||
:label="`${'ประเภทใบลา'}`"
|
||||
emit-value
|
||||
|
|
@ -20,14 +20,14 @@
|
|||
class="col-xs-12 col-sm-auto"
|
||||
@update:model-value="searchFilterTable"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'typeOptions'
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'LeaveTypeOption'
|
||||
) "
|
||||
/>
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="status"
|
||||
v-model="LeaveData.LeaveStatus"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกสถานะ'}`]"
|
||||
:label="`${'สถานะ'}`"
|
||||
emit-value
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
class="col-xs-12 col-sm-auto"
|
||||
@update:model-value="searchFilterTable"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'statusOptions'
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'LeaveStatusOption'
|
||||
) "
|
||||
/>
|
||||
<q-space />
|
||||
|
|
@ -99,15 +99,21 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, useAttrs } from "vue"
|
||||
import { ref, useAttrs, reactive, onMounted } from "vue"
|
||||
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 { useCounterMixin } from "@/stores/mixin"
|
||||
|
||||
const mixin = useCounterMixin()
|
||||
const { showLoader, hideLoader, date2Thai, messageError } = mixin
|
||||
const DataStore = useLeaveStore()
|
||||
const LeaveData = useLeaveStore()
|
||||
const { filterSelector, searchFilterTable } = LeaveData
|
||||
const attrs = ref<any>(useAttrs())
|
||||
const table = ref<any>(null)
|
||||
const filterRef = ref<any>(null)
|
||||
|
||||
const rows = ref<any[]>([])
|
||||
const type = ref("ทั้งหมด")
|
||||
const status = ref("ทั้งหมด")
|
||||
|
|
@ -115,15 +121,6 @@ const status = ref("ทั้งหมด")
|
|||
const initialPagination = ref({
|
||||
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({
|
||||
count: Number,
|
||||
|
|
@ -157,69 +154,6 @@ const resetFilter = () => {
|
|||
emit("update:inputfilter", "")
|
||||
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>
|
||||
<style lang="scss">
|
||||
.icon-color {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import type { S } from "@fullcalendar/core/internal-common"
|
||||
|
||||
interface OptionData {
|
||||
id: string | undefined
|
||||
name: string | undefined
|
||||
|
|
@ -14,4 +16,12 @@ interface FormLeavetMainData {
|
|||
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 { ref } from "vue"
|
||||
import { ref, computed } from "vue"
|
||||
import type { QTableProps } from "quasar"
|
||||
import type { FormLeavetMainData, OptionData } from "@/modules/05_leave/interface/index/"
|
||||
import type { FormLeavetMainData, OptionData, formListLeaveData } from "@/modules/05_leave/interface/index/"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
|
||||
export const useLeaveStore = defineStore("Leave", () => {
|
||||
const DataMainOrig = ref<FormLeavetMainData[]>([]) // ข้อมูลหลักดั้งเดิม
|
||||
const DataMainUpdate = ref<FormLeavetMainData[]>([]) // ข้อมูลเปลี่ยนแปลง
|
||||
|
||||
const DataMain = (val: FormLeavetMainData[]) => {
|
||||
DataMainOrig.value = val
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai } = mixin
|
||||
const LeaveType = ref<string | null>("0")
|
||||
const LeaveStatus = ref<string | null>("0")
|
||||
const fiscalYearyear = ref<number | null>(null)
|
||||
const rows = ref<formListLeaveData>([])
|
||||
const DataMainOrig = ref<formListLeaveData[]>([]) // ข้อมูลหลักดั้งเดิม
|
||||
async function fecthList(data: formListLeaveData[]) {
|
||||
let datalist: formListLeaveData[] = data.map((e: any) => ({
|
||||
no: e.no,
|
||||
type: e.type,
|
||||
status: e.status,
|
||||
date: e.date,
|
||||
year: e.year,
|
||||
}))
|
||||
rows.value = datalist
|
||||
DataMainOrig.value = datalist
|
||||
}
|
||||
|
||||
const DataUpdate = (filter_1: string, filter_2: string) => {
|
||||
const DataMainUpdate = ref<formListLeaveData[]>([]) // ข้อมูลเปลี่ยนแปลง
|
||||
const DataMain = (val: formListLeaveData[]) => (DataMainOrig.value = val)
|
||||
const DataUpdate = (filterType: string, filterStatus: string, filterYear: number | null) => {
|
||||
DataMainUpdate.value = []
|
||||
|
||||
if (filter_1 === "" && filter_2 === "ทั้งหมด") {
|
||||
if (filterType === "" && filterStatus === "" && filterYear === 0) {
|
||||
DataMainUpdate.value = DataMainOrig.value
|
||||
} else if (filter_1 !== "" && filter_2 === "ทั้งหมด") {
|
||||
DataMainUpdate.value = DataMainOrig.value.filter(item => item.TypeValue === filter_1)
|
||||
} else if (filter_1 !== "" && filter_2 !== "ทั้งหมด") {
|
||||
DataMainUpdate.value = DataMainOrig.value.filter(item => item.TypeValue === filter_1 && item.Status === filter_2)
|
||||
} else if (filter_1 === "" && filter_2 !== "ทั้งหมด") {
|
||||
DataMainUpdate.value = DataMainOrig.value.filter(item => item.Status === filter_2)
|
||||
} else if (filterType !== "" && filterStatus === "" && filterYear === 0) {
|
||||
DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Type === filterType)
|
||||
} else if (filterType !== "" && filterStatus !== "" && filterYear === null) {
|
||||
DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Type === filterType && item.Status === filterStatus)
|
||||
} else if (filterType !== "" && filterStatus === "" && filterYear !== 0) {
|
||||
DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Type === filterType && item.fiscalYear === filterYear)
|
||||
} else if (filterType === "" && filterStatus !== "" && filterYear === 0) {
|
||||
DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Status === filterStatus)
|
||||
} else if (filterType === "" && filterStatus === "" && filterYear !== 0) {
|
||||
DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.fiscalYear === filterYear)
|
||||
} else if (filterType === "" && filterStatus !== "" && filterYear !== null) {
|
||||
DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Status === filterStatus && item.fiscalYear === filterYear)
|
||||
} else if (filterType !== "" && filterStatus !== "" && filterYear === 0) {
|
||||
DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Status === filterStatus && item.Type === filterType)
|
||||
} else if (filterType !== "" && filterStatus !== "" && filterYear !== null) {
|
||||
DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Type === filterType && item.Status === filterStatus && item.fiscalYear === filterYear)
|
||||
} else if (filterType == "0" && filterStatus == "0" && filterYear !== null) {
|
||||
DataMainUpdate.value = DataMainOrig.value
|
||||
}
|
||||
}
|
||||
|
||||
//--------------|ฟิลเตอร์|--------------------------------------//
|
||||
const searchFilterTable = async () => {
|
||||
rows.value = []
|
||||
|
||||
if (LeaveType.value !== undefined && LeaveType.value !== null) {
|
||||
await DataUpdate(LeaveType.value === "0" ? "all" : LeaveType.value!, LeaveStatus.value === "0" ? "all" : LeaveStatus.value!, fiscalYearyear.value === "0" ? "all" : fiscalYearyear.value!)
|
||||
let filteredData = DataMainOrig.value
|
||||
if (LeaveType.value !== "0") {
|
||||
filteredData = filteredData.filter((item: formListLeaveData) => item.type === LeaveType.value)
|
||||
}
|
||||
if (LeaveStatus.value !== "0") {
|
||||
filteredData = filteredData.filter((item: formListLeaveData) => item.status === LeaveStatus.value)
|
||||
}
|
||||
// if (fiscalYearyear.value !== "0") {
|
||||
// console.log(filteredData)
|
||||
// filteredData = filteredData.filter((item: formListLeaveData) => item.status === fiscalYearyear.value)
|
||||
// console.log(filteredData)
|
||||
// console.log(fiscalYearyear.value)
|
||||
// }
|
||||
const dataArr = filteredData.map((e: any) => ({
|
||||
no: e.no,
|
||||
type: convertType(e.type),
|
||||
status: convertStatus(e.status),
|
||||
date: date2Thai(new Date(e.date)),
|
||||
year: e.year,
|
||||
}))
|
||||
rows.value = dataArr
|
||||
}
|
||||
}
|
||||
|
||||
const filterSelector = (val: any, update: Function, refData: string) => {
|
||||
switch (refData) {
|
||||
case "fiscalyearOP":
|
||||
update(() => {
|
||||
fiscalyearOP.value = fiscalyearOP.value.filter((v: any) => v.name.indexOf(val) > -1)
|
||||
})
|
||||
break
|
||||
case "LeaveTypeOption":
|
||||
update(() => {
|
||||
typeOptions.value = typeOptions.value.filter((v: any) => v.name.indexOf(val) > -1)
|
||||
})
|
||||
break
|
||||
case "LeaveStatusOption":
|
||||
update(() => {
|
||||
statusOptions.value = statusOptions.value.filter((v: any) => v.name.indexOf(val) > -1)
|
||||
})
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const fiscalyearOP = ref<OptionData[]>([
|
||||
{ id: "0", name: "2563" },
|
||||
{ id: "1", name: "2564" },
|
||||
{ id: "2", name: "2565" },
|
||||
{ id: "2", name: "2566" },
|
||||
])
|
||||
|
||||
function convertType(val: string) {
|
||||
switch (val) {
|
||||
case "0":
|
||||
return "ทั้งหมด"
|
||||
case "1":
|
||||
return "ลาป่วย"
|
||||
case "2":
|
||||
return "ลากิจส่วนตัว"
|
||||
case "3":
|
||||
return "ลาคลอดบุตร"
|
||||
case "4":
|
||||
return "ลาไปช่วยเหลือภริยาที่คลอดบุตร"
|
||||
case "5":
|
||||
return "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ"
|
||||
case "6":
|
||||
return "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล"
|
||||
case "7":
|
||||
return "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน"
|
||||
case "8":
|
||||
return "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ"
|
||||
case "9":
|
||||
return "ลาติดตามคู่สมรส"
|
||||
case "10":
|
||||
return "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ"
|
||||
}
|
||||
}
|
||||
function convertStatus(val: string) {
|
||||
switch (val) {
|
||||
case "0":
|
||||
return "ทั้งหมด"
|
||||
case "1":
|
||||
return "อนุมัติ"
|
||||
case "2":
|
||||
return "ไม่อนุมัติ"
|
||||
case "3":
|
||||
return "อยู่ระหว่างดำเนินการ"
|
||||
case "4":
|
||||
return "ใหม่"
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -32,24 +158,66 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
{ id: "2", name: "ดูงาน" },
|
||||
])
|
||||
const typeOptions = ref<OptionData[]>([
|
||||
{ id: "0", name: "ลาป่วย" },
|
||||
{ id: "1", name: "ลากิจส่วนตัว" },
|
||||
{ id: "2", name: "ลาคลอดบุตร" },
|
||||
{ id: "3", name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
|
||||
{ id: "4", name: "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ" },
|
||||
{ id: "5", name: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล" },
|
||||
{ id: "6", name: "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน" },
|
||||
{ id: "7", name: "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ" },
|
||||
{ id: "8", name: "ลาติดตามคู่สมรส" },
|
||||
{ id: "9", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
|
||||
{ id: "0", name: "ทั้งหมด" },
|
||||
{ id: "1", name: "ลาป่วย" },
|
||||
{ id: "2", name: "ลากิจส่วนตัว" },
|
||||
{ id: "3", name: "ลาคลอดบุตร" },
|
||||
{ id: "4", name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
|
||||
{ id: "5", name: "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ" },
|
||||
{ id: "6", name: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล" },
|
||||
{ id: "7", name: "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน" },
|
||||
{ id: "8", name: "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ" },
|
||||
{ id: "9", name: "ลาติดตามคู่สมรส" },
|
||||
{ id: "10", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
|
||||
])
|
||||
|
||||
const statusOptions = ref<OptionData>([
|
||||
{ id: "0", name: "อนุมัติ" },
|
||||
{ id: "1", name: "ไม่อนุมัติ" },
|
||||
{ id: "2", name: "อยู่ระหว่างดำเนินการ" },
|
||||
{ id: "3", name: "ใหม่" },
|
||||
{ id: "0", name: "ทั้งหมด" },
|
||||
{ id: "1", name: "อนุมัติ" },
|
||||
{ id: "2", name: "ไม่อนุมัติ" },
|
||||
{ id: "3", name: "อยู่ระหว่างดำเนินการ" },
|
||||
{ id: "4", name: "ใหม่" },
|
||||
])
|
||||
const visibleColumns = ref<String[]>(["no", "type", "date", "status"])
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:5%;",
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
align: "left",
|
||||
label: "ประเภทการลา",
|
||||
sortable: true,
|
||||
field: "type",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "date",
|
||||
align: "left",
|
||||
label: "วันที่ยื่นใบลา",
|
||||
sortable: true,
|
||||
field: "date",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
sortable: true,
|
||||
field: "status",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:10%;",
|
||||
},
|
||||
])
|
||||
|
||||
return {
|
||||
typeOptions,
|
||||
optionsSpecific,
|
||||
|
|
@ -58,5 +226,13 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
DataMainUpdate,
|
||||
DataUpdate,
|
||||
DataMainOrig,
|
||||
visibleColumns,
|
||||
columns,
|
||||
rows,
|
||||
LeaveType,
|
||||
LeaveStatus,
|
||||
fecthList,
|
||||
filterSelector,
|
||||
searchFilterTable,
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<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)" />
|
||||
<div>รายการลา</div>
|
||||
{{ dateMonth }}
|
||||
</div>
|
||||
</div>
|
||||
<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 currentTab = ref<string>("calendar") //ระบุ tab ใช้งานอยู่ calendar=รายการ list=รายการ
|
||||
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(),
|
||||
})
|
||||
const dateYear = ref<number>(new Date().getFullYear())
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue