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

29
src/api/leave/api.leave.ts
View file

@ -1,13 +1,22 @@
import env from "../index"
import env from "../index";
const retirementResign = `${env.API_URI}/retirement`
const retirementResign = `${env.API_URI}/retirement`;
const leave = `${env.API_URI}/leave`;
export default {
listUser: () => `${retirementResign}/resign/user`,
listResign: () => `${retirementResign}/resign`,
resingByid: (id: string) => `${retirementResign}/resign/${id}`,
questionnaireByid: (id: string) => `${retirementResign}/resign/questionnaire/${id}`,
listquestionnaire: () => `${retirementResign}/resign/questionnaire`,
// คำถาม
questionList: () => `${retirementResign}/resign/questionnaire/question`
}
listUser: () => `${retirementResign}/resign/user`,
listResign: () => `${retirementResign}/resign`,
resingByid: (id: string) => `${retirementResign}/resign/${id}`,
questionnaireByid: (id: string) =>
`${retirementResign}/resign/questionnaire/${id}`,
listquestionnaire: () => `${retirementResign}/resign/questionnaire`,
// คำถาม
questionList: () => `${retirementResign}/resign/questionnaire/question`,
/**รายการลา */
leaveType: () => `${leave}/type`,
leaveCalendar: () => `${leave}/user/calendar`,
leaveTableList: () => `${leave}/user/table`,
leaveCanceById: (id: string) => `${leave}/user/delete/${id}`,
leaveStats: () => `${leave}/user/summary`,
};

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>

47
src/modules/05_leave/interface/index/main.ts
View file

@ -1,27 +1,40 @@
import type { S } from "@fullcalendar/core/internal-common"
import type { S } from "@fullcalendar/core/internal-common";
interface OptionData {
id: string | undefined
name: string | undefined
id: string | undefined;
name: string | undefined;
}
interface FormLeavetMainData {
type: string
numDate: string
extend: string
use: string
numAll: string
numDone: string
numNot: string
numCancel: string
type: string;
numDate: string;
extend: string;
use: string;
numAll: string;
numDone: string;
numNot: string;
numCancel: string;
}
interface formListLeaveData {
no: string
date: string | null
type: string
status: string
year: string
no: string;
date: string | null;
type: string;
status: string;
year: string;
}
export type { OptionData, FormLeavetMainData, formListLeaveData }
interface TypeLeave {
code: string;
createdAt: Date;
createdFullName: string;
createdUserId: string;
id: string;
lastUpdateFullName: string;
lastUpdateUserId: string;
lastUpdatedAt: Date | null;
limit: number;
name: string;
}
export type { OptionData, FormLeavetMainData, formListLeaveData, TypeLeave };

102
src/modules/05_leave/store.ts
View file

@ -5,6 +5,7 @@ import type {
FormLeavetMainData,
OptionData,
formListLeaveData,
TypeLeave,
} from "@/modules/05_leave/interface/index/main";
import { useCounterMixin } from "@/stores/mixin";
@ -19,6 +20,32 @@ export const useLeaveStore = defineStore("Leave", () => {
const rows = ref<formListLeaveData[]>([]);
const DataMainOrig = ref<formListLeaveData[]>([]); // ข้อมูลหลักดั้งเดิม
/** ประเภทการลา */
const typeOptions = ref<OptionData[]>([]);
const typeOptionsMain = ref<OptionData[]>([]);
async function fetchLeaveType(data: TypeLeave[]) {
typeOptionsMain.value = [
{ id: "00000000-0000-0000-0000-000000000000", name: "ทั้งหมด" },
];
const optionType = data.map((e: TypeLeave) => ({
id: e.id,
name: e.name,
}));
typeOptionsMain.value.push(...optionType);
typeOptions.value = typeOptionsMain.value;
}
/** สถานะของการลา */
const statusOptionsMain = ref<OptionData[]>([
{ id: "ALL", name: "ทั้งหมด" },
{ id: "NEW ", name: "ใหม่" },
{ id: "PENDING ", name: "กำลังดำเนินการ" },
{ id: "APPROVE ", name: "อนุมัติ " },
{ id: "REJECT ", name: "ไม่อนุมัติ" },
{ id: "DELETE ", name: "ยกเลิก" },
]);
const statusOptions = ref<OptionData[]>(statusOptionsMain.value);
async function fecthList(data: formListLeaveData[]) {
let datalist: formListLeaveData[] = data.map((e: any) => ({
no: e.no,
@ -102,72 +129,24 @@ export const useLeaveStore = defineStore("Leave", () => {
}
};
//--------------|ฟิลเตอร์|--------------------------------------//
const searchFilterTable = async () => {
console.log("test");
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?.toString()!
);
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) {
filteredData = filteredData.filter(
(item: formListLeaveData) =>
item.year === fiscalYearyear.value?.toString()
);
}
const dataArr: formListLeaveData[] = filteredData.map((e: any) => ({
no: e.no,
type: convertType(e.type) || "",
status: convertStatus(e.status) || "",
date: date2Thai(new Date(e.date)),
year: e.year !== undefined ? e.year : "",
}));
rows.value = dataArr;
}
};
/**
*ฟังก์ชั่นเลือก selector ที่ใช่ในการฟิลเตอร์
* @param val ค่าที่ต้องการฟิลเตอร์
* @param update อัพเดทค่า
* @param refData ดาต้าที่ต้องการฟิลเตอร์
*/
const filterSelector = (val: any, update: Function, refData: string) => {
const filterOption = (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(
typeOptions.value = typeOptionsMain.value.filter(
(v: any) => v.name.indexOf(val) > -1
);
});
break;
case "LeaveStatusOption":
update(() => {
statusOptions.value = statusOptions.value.filter(
statusOptions.value = statusOptionsMain.value.filter(
(v: any) => v.name.indexOf(val) > -1
);
});
@ -224,21 +203,6 @@ export const useLeaveStore = defineStore("Leave", () => {
{ id: "11", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
]);
/** filter ประเภทการลา */
const typeOptions = ref<OptionData[]>([
{ id: "0", name: "ทั้งหมด" },
...options.value,
]);
/** สถานะของการลา */
const statusOptions = ref<OptionData[]>([
{ id: "0", name: "ทั้งหมด" },
{ id: "1", name: "อนุมัติ" },
{ id: "2", name: "ไม่อนุมัติ" },
{ id: "3", name: "อยู่ระหว่างดำเนินการ" },
{ id: "4", name: "ใหม่" },
]);
/**
*ฟังก์ชั่นค้นหาแสดง option ของสถานะ
* @param val ค่าที่เเสดง
@ -348,13 +312,15 @@ export const useLeaveStore = defineStore("Leave", () => {
LeaveType,
LeaveStatus,
fecthList,
filterSelector,
searchFilterTable,
fiscalyearOP,
fiscalYearyear,
options,
optionsOrdination,
typeConvert,
typeLeave,
fetchLeaveType,
filterOption,
};
});

4
tsconfig.app.json
View file

@ -7,6 +7,8 @@
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"target": "es2018",
"lib": ["dom", "es2015", "es2018", "es2018.promise"]
}
}