116 lines
3.4 KiB
Vue
116 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from "vue";
|
|
|
|
/**importType*/
|
|
import type {
|
|
QuerySting,
|
|
DateFilter,
|
|
} from "@/modules/09_leave/interface/request/leave";
|
|
|
|
import TableList from "@/modules/09_leave/components/2_Leave/TableList.vue";
|
|
import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBarLeave.vue";
|
|
import CalendarView from "@/modules/09_leave/components/2_Leave/Calendar.vue";
|
|
|
|
/**importStroe*/
|
|
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
|
|
import { useLeavelistDataStoreTest } from "@/modules/09_leave/stores/ListLeave";
|
|
|
|
const leaveStore = useLeavelistDataStore();
|
|
const APIDATA = useLeavelistDataStoreTest();
|
|
const { fetchListLeave } = leaveStore;
|
|
|
|
//** เรียกข้อมูลจาก API*/
|
|
function fecthLeaveList() {
|
|
const data = APIDATA.data;
|
|
maxPage.value = Math.ceil(data.length / querySting.pageSize);
|
|
fetchListLeave(data); /** ส่งข้อมูลไป stores*/
|
|
}
|
|
|
|
//
|
|
const querySting = reactive<QuerySting>({
|
|
year: 0, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
|
|
type: "00000000-0000-0000-0000-000000000000", //*Id ประเภทการลา
|
|
status: "ALL", //*สถานะการของลา
|
|
page: 1, //*หน้า
|
|
pageSize: 5, //*จำนวนแถวต่อหน้า
|
|
keyword: "", //keyword ค้นหา
|
|
});
|
|
const maxPage = ref<number>(1);
|
|
|
|
/**
|
|
*
|
|
* @param newPage หน้า
|
|
* @param pageSize จำนวนต่อแถว
|
|
* @param dateFilter ข้อมูลค้นหา
|
|
*/
|
|
function updatePaging(
|
|
newPage: number,
|
|
pageSize: number,
|
|
dateFilter: DateFilter
|
|
) {
|
|
querySting.year = dateFilter ? dateFilter.year : querySting.year;
|
|
querySting.type = dateFilter ? dateFilter.type : querySting.type;
|
|
querySting.status = dateFilter ? dateFilter.status : querySting.status;
|
|
querySting.page = newPage;
|
|
querySting.pageSize = pageSize;
|
|
querySting.keyword = dateFilter ? dateFilter.keyword : querySting.keyword;
|
|
|
|
console.log(querySting);
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await fecthLeaveList();
|
|
});
|
|
</script>
|
|
<template>
|
|
<q-toolbar class="text-primary" style="padding: 0">
|
|
<q-space />
|
|
<q-btn
|
|
name="list"
|
|
round
|
|
size="12px"
|
|
flat
|
|
icon="mdi-format-list-bulleted"
|
|
@click="leaveStore.tabView = 'list'"
|
|
:color="leaveStore.tabView == 'list' ? 'primary' : 'grey-6'"
|
|
class="q-ml-sm"
|
|
>
|
|
<q-tooltip>รายการ</q-tooltip>
|
|
</q-btn>
|
|
<q-separator vertical inset />
|
|
<q-tabs
|
|
v-model="leaveStore.tabView"
|
|
indicator-color="transparent"
|
|
align="left"
|
|
active-color="activetab"
|
|
class="text-nativetab"
|
|
inline-label
|
|
dense
|
|
>
|
|
<q-btn
|
|
name="calendar"
|
|
round
|
|
size="12px"
|
|
flat
|
|
icon="mdi-calendar-month"
|
|
@click="leaveStore.tabView = 'calendar'"
|
|
:color="leaveStore.tabView == 'calendar' ? 'primary' : 'grey-6'"
|
|
class="q-mr-sm"
|
|
>
|
|
<q-tooltip>ปฏิทิน</q-tooltip>
|
|
</q-btn>
|
|
</q-tabs>
|
|
</q-toolbar>
|
|
<div v-if="leaveStore.tabView === 'list'">
|
|
<ToolBar @update:querySting="updatePaging" />
|
|
<TableList
|
|
:page="querySting.page"
|
|
:rowsPerPage="querySting.pageSize"
|
|
:maxPage="maxPage"
|
|
@update:querySting="updatePaging"
|
|
/>
|
|
</div>
|
|
<div v-if="leaveStore.tabView === 'calendar'"><CalendarView /></div>
|
|
</template>
|
|
|
|
<style scoped></style>
|