141 lines
4.2 KiB
Vue
141 lines
4.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
/**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 { useCounterMixin } from "@/stores/mixin";
|
|
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
|
|
import { useLeavelistDataStoreTest } from "@/modules/09_leave/stores/ListLeave";
|
|
|
|
const mixin = useCounterMixin();
|
|
const leaveStore = useLeavelistDataStore();
|
|
const APIDATA = useLeavelistDataStoreTest();
|
|
const { date2Thai, dateToISO, showLoader, hideLoader, messageError } = mixin;
|
|
const { fetchListLeave } = leaveStore;
|
|
|
|
const $q = useQuasar(); //ใช้ noti quasar
|
|
|
|
//
|
|
const querySting = reactive<QuerySting>({
|
|
year: new Date().getFullYear(), //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
|
|
type: "00000000-0000-0000-0000-000000000000", //*Id ประเภทการลา
|
|
status: "ALL", //*สถานะการของลา
|
|
page: 1, //*หน้า
|
|
pageSize: 10, //*จำนวนแถวต่อหน้า
|
|
keyword: "", //keyword ค้นหา
|
|
});
|
|
const maxPage = ref<number>(1);
|
|
|
|
//** เรียกข้อมูลจาก API*/
|
|
async function fecthLeaveList() {
|
|
// showLoader();
|
|
// await http
|
|
// .post(config.API.leaveList(), querySting)
|
|
// .then((res) => {
|
|
// console.log(res);
|
|
|
|
// maxPage.value = Math.ceil(data.length / querySting.pageSize);
|
|
// })
|
|
// .catch((err) => {
|
|
// messageError($q, err);
|
|
// })
|
|
// .finally(() => {
|
|
// hideLoader();
|
|
// });
|
|
const data = APIDATA.data;
|
|
maxPage.value = Math.ceil(data.length / querySting.pageSize);
|
|
fetchListLeave(data); /** ส่งข้อมูลไป stores*/
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param newPage หน้า
|
|
* @param pageSize จำนวนต่อแถว
|
|
* @param dateFilter ข้อมูลค้นหา
|
|
*/
|
|
async 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 ? pageSize : querySting.pageSize;
|
|
querySting.keyword = dateFilter ? dateFilter.keyword : querySting.keyword;
|
|
console.log(querySting);
|
|
await fecthLeaveList();
|
|
}
|
|
|
|
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
|
|
:rowsPerPage="querySting.pageSize"
|
|
@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>
|