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

ผูก API รายการลา (user) *รอ ข้อมูล

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-11-30 13:36:01 +07:00
parent 8cd87660d8
commit 60ddcf5789
7 changed files with 269 additions and 189 deletions
Download patch file Download diff file Expand all files Collapse all files

89
src/modules/05_leave/componenst/Calendar.vue
View file

@ -1,5 +1,10 @@
<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
/**import calendar*/
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import type { CalendarOptions } from "@fullcalendar/core";
@ -7,9 +12,49 @@ import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import allLocales from "@fullcalendar/core/locales-all";
import listPlugin from "@fullcalendar/list";
import { useCounterMixin } from "@/stores/mixin";
import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts";
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } =
mixin;
const $q = useQuasar();
/**
* ตัวแปรทั้งหมด
*/
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 dateYear = ref<number>(new Date().getFullYear());
async function fetchDataCalendar() {
showLoader;
await http
.post(config.API.leaveCalendar(), { year: dateYear.value })
.then((res) => {
console.log(res);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/**
* Option ของปฏิทิน
*/
@ -78,41 +123,23 @@ const calendarOptions = ref<CalendarOptions>({
],
});
/**
* ตัวแปรทั้งหมด
*/
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 dateMonth = ref<DataDateMonthObject>({
month: new Date().getMonth(),
year: new Date().getFullYear(),
});
const dateYear = ref<number>(new Date().getFullYear());
const emit = defineEmits(["update:dateYear"]);
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { monthYear2Thai } = mixin;
/**
* แปลง ปีและเดือนเป็นภาษาไทย
* @param val datepicker แบบเลือกปีและเดือน
*/
const monthYearThai = (val: DataDateMonthObject) => {
function monthYearThai(val: DataDateMonthObject) {
if (val == null) return "";
else return monthYear2Thai(val.month, val.year);
};
}
const updateMonth = async (e: DataDateMonthObject) => {
function updateMonth(e: DataDateMonthObject) {
// console.log(dateMonth.value);
if (e != null) {
dateYear.value = e.year;
@ -121,26 +148,26 @@ const updateMonth = async (e: DataDateMonthObject) => {
const date = new Date(dateMonth.value.year, dateMonth.value.month);
calen.gotoDate(date);
}
};
}
/**
* ฟังก์ชั่นยกเลิก model
* @param text
*/
const cancel = async (text: string) => {
async function cancel(text: string) {
title.value = text;
modalCancel.value = true;
modeCancel.value = true;
};
}
/**
* ฟังก์ชั่นเปิด model
* @param text
*/
const view = async (text: string) => {
async function view(text: string) {
title.value = text;
modalCancel.value = true;
modeCancel.value = false;
};
}
// filter calendar left
const filterLists = ref<any[]>([
@ -161,6 +188,12 @@ const filterLists = ref<any[]>([
},
]);
const filterVal = ref(["x1"]);
onMounted(async () => {
console.log("calandar");
await fetchDataCalendar();
});
</script>
<template>

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

@ -1,13 +1,50 @@
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import Table from "@/modules/05_leave/componenst/Table.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useLeaveStore } from "@/modules/05_leave/store";
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } =
mixin;
const LeaveData = useLeaveStore();
const { fecthList, searchFilterTable } = LeaveData;
const { fecthList } = LeaveData;
const $q = useQuasar();
const year = ref<number>(new Date().getFullYear());
const type = ref<string>("00000000-0000-0000-0000-000000000000");
const status = ref<string>("ALL");
const filter = ref<string>("");
async function fetchDataTable() {
showLoader();
const body = {
year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
type: type.value, //*Id ประเภทการลา
status: status.value, //*สถานะการของลา
page: "1", //*หน้า
pageSize: "10", //*จำนวนแถวต่อหน้า
keyword: filter.value, //keyword ค้นหา
};
await http
.post(config.API.leaveTableList(), body)
.then((res) => {
console.log(res);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/**
* ตั้งค่า pagination
*/
@ -52,16 +89,21 @@ const view = async (text: string) => {
modeCancel.value = false;
};
async function updateFilterTable(y: number, t: string, s: string, k: string) {
if (t && s) {
year.value = await y;
type.value = await t;
status.value = await s;
filter.value = await k;
await fetchDataTable();
}
}
/**
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
*/
onMounted(async () => {
searchFilterTable();
fecthList([
{ no: "1", date: "2023-09-20", type: "1", status: "4", year: "2023" },
{ no: "2", date: "2023-09-19", type: "1", status: "2", year: "2023" },
{ no: "3", date: "2023-09-10", type: "2", status: "3", year: "2023" },
]);
await fetchDataTable();
});
</script>
<template>
@ -69,13 +111,13 @@ onMounted(async () => {
: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"
@update:filter="updateFilterTable"
>
<template #columns="props">
<q-tr :props="props" class="cursor-pointer">
@ -107,7 +149,7 @@ onMounted(async () => {
class="q-mr-sm"
/>
<q-icon
v-else-if="props.row.status == 'อยู่ระหว่างดำเนินการ'"
v-else-if="props.row.status == 'กำลังดำเนินการ'"
size="10px"
color="light-blue-14"
name="mdi-circle"

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

@ -1,10 +1,20 @@
<script setup lang="ts">
import { ref, useAttrs, reactive, onMounted } from "vue";
import { ref, useAttrs, onMounted } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useLeaveStore } from "@/modules/05_leave/store";
const mixin = useCounterMixin();
const leaveStore = useLeaveStore();
const { filterSelector, searchFilterTable } = leaveStore;
const { messageError } = mixin;
const { fetchLeaveType, filterOption } = leaveStore;
const attrs = ref<any>(useAttrs());
const $q = useQuasar();
const table = ref<any>(null);
const filterRef = ref<any>(null);
@ -26,7 +36,7 @@ const props = defineProps({
count: Number,
pass: Number,
notpass: Number,
inputfilter: String,
name: String,
icon: String,
inputvisible: Array,
@ -39,25 +49,40 @@ const props = defineProps({
* ฟังก์ชั่น emit ค่าที่กำหนด
*/
const emit = defineEmits([
"update:inputfilter",
"update:filter",
"update:inputvisible",
"update:editvisible",
]);
const updateInput = (value: string | number | null) => {
emit("update:inputfilter", value);
};
const updateVisible = (value: []) => {
emit("update:inputvisible", value);
};
/**
* reset ค่าที่ค้นหา
*/
const resetFilter = () => {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
emit("update:inputfilter", "");
filterRef.value.focus();
};
/** filter */
const year = ref<number>(new Date().getFullYear());
const type = ref<string>("00000000-0000-0000-0000-000000000000");
const status = ref<string>("ALL");
const filter = ref<string>("");
function filterTable() {
emit("update:filter", year.value, type.value, status.value, filter.value);
}
async function fectOptionType() {
await http
.get(config.API.leaveType())
.then(async (res) => {
const data = res.data.result;
await fetchLeaveType(data);
})
.catch((err) => {
messageError($q, err);
});
}
onMounted(async () => {
await fectOptionType();
});
</script>
<template>
<div class="q-py-sm row">
@ -66,13 +91,13 @@ const resetFilter = () => {
<datepicker
v-if="leaveStore.tabValue === 'list'"
menu-class-name="modalfix"
v-model="leaveStore.fiscalYearyear"
v-model="year"
class="col-2"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:modelValue="searchFilterTable"
@update:modelValue="filterTable"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
@ -83,7 +108,7 @@ const resetFilter = () => {
dense
lazy-rules
outlined
:model-value="Number(leaveStore.fiscalYearyear) + 543"
:model-value="Number(year) + 543"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
@ -97,33 +122,11 @@ const resetFilter = () => {
</q-input>
</template>
</datepicker>
<!-- <q-select
v-if="leaveStore.tabValue === 'list'"
outlined
dense
lazy-rules
v-model="leaveStore.fiscalYearyear"
:label="`${'ปี พ.ศ.'}`"
emit-value
map-options
option-label="name"
:options="leaveStore.fiscalyearOP"
option-value="id"
hide-bottom-space
style="min-width: 150px"
class="col-xs-12 col-sm-auto"
@update:model-value="searchFilterTable"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'fiscalyearOP'
) "
/> -->
<!-- ค้นหาข้อความใน table -->
<q-select
outlined
dense
lazy-rules
v-model="leaveStore.LeaveType"
:rules="[(val) => !!val || `${'กรุณาเลือกประเภทใบลา'}`]"
v-model="type"
:label="`${'ประเภทใบลา'}`"
emit-value
map-options
@ -133,17 +136,22 @@ const resetFilter = () => {
hide-bottom-space
style="min-width: 150px"
class="col-xs-12 col-sm-auto"
@update:model-value="searchFilterTable"
use-input
@update:model-value="filterTable"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'LeaveTypeOption'
doneFn:Function) => filterOption(inputValue, doneFn,'LeaveTypeOption'
) "
/>
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
</q-item>
</template></q-select
>
<q-select
outlined
dense
lazy-rules
v-model="leaveStore.LeaveStatus"
:rules="[(val) => !!val || `${'กรุณาเลือกสถานะ'}`]"
v-model="status"
:label="`${'สถานะ'}`"
emit-value
map-options
@ -153,18 +161,25 @@ const resetFilter = () => {
hide-bottom-space
style="min-width: 150px"
class="col-xs-12 col-sm-auto"
@update:model-value="searchFilterTable"
use-input
@update:model-value="filterTable"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'LeaveStatusOption'
doneFn:Function) => filterOption(inputValue, doneFn,'LeaveStatusOption'
) "
/>
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
</q-item>
</template></q-select
>
<q-space />
<q-input
standout
dense
:model-value="inputfilter"
v-model="filter"
ref="filterRef"
@update:model-value="updateInput"
@keydown.enter.prevent="filterTable"
outlined
debounce="300"
placeholder="ค้นหา"
@ -172,12 +187,12 @@ const resetFilter = () => {
style="max-width: 150px"
>
<template v-slot:append>
<q-icon v-if="inputfilter == ''" name="search" />
<q-icon v-if="filter == ''" name="search" />
<q-icon
v-if="inputfilter !== ''"
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
@click="filter = ''"
/>
</template>
</q-input>