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

Merge branch 'develop' into devTee

Browse source 
# Conflicts:
#	src/modules/09_leave/components/2_Leave/DetailLeave.vue
This commit is contained in:
setthawutttty 2023-11-03 18:01:38 +07:00
commit 5d34c40b41
11 changed files with 257 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/modules/09_leave/components/2_Leave/DetailLeave.vue
View file

@ -30,7 +30,7 @@ function saveData() {
class="q-mr-sm"
@click="router.push(`/leave-list`)"
/>
รายละเอียดการลาของ {{ paramsId }}
รายละเอียดการลาของ นายปิยรมย์ ศิริธาราฟ
</div>
<div>
<q-btn

2
src/modules/09_leave/components/2_Leave/TableList.vue
View file

@ -118,7 +118,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
v-for="col in props.cols"
:key="col.name"
:props="props"
@click.prevent="router.push(`/leave/detail/${props.row.name}`)"
@click.prevent="router.push(`/leave/detail/${props.row.id}`)"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}

5
src/modules/09_leave/components/2_Leave/ToolBar.vue
View file

@ -53,7 +53,6 @@ const { searchDataFn, filterOption } = leaveStore;
<div class="col-xs-12 col-sm-3 col-md-2">
<q-select
for="selectStatus"
v-if="leaveStore.tab == '2'"
emit-value
map-options
outlined
@ -100,6 +99,4 @@ const { searchDataFn, filterOption } = leaveStore;
/>
</div>
</div>
</template>
<style scoped></style>
</template>

10
src/modules/09_leave/interface/request/leave.ts Normal file
View file

@ -0,0 +1,10 @@
interface ListsData {
id: string;
leaveType: string
name: string
Date: string
status: string
}
export type {
ListsData
}

12
src/modules/09_leave/interface/request/specialTime.ts Normal file
View file

@ -0,0 +1,12 @@
interface ListData {
id: string;
fullname: string | null;
date: string | null;
dateFix: string | null;
startTimeMorning: string | null;
endTimeMorning: string | null;
startTimeAfternoon: string | null;
endTimeAfternoon: string | null;
status: string;
}
export type { ListData };

9
src/modules/09_leave/interface/response/specialTime.ts
View file

@ -1,11 +1,10 @@
interface DataRows {
id: string;
fullname: string | null;
date: string | null;
dateFix: string | null;
type: string;
reason: string;
timeStamp: string;
unapprove?: string; // Make these properties optional
approve?: string;
timeMorning: string;
timeAfternoon: string;
status: string;
}
export type { DataRows };

30
src/modules/09_leave/stores/LeaveStore.ts
View file

@ -5,12 +5,12 @@ import { useCounterMixin } from "@/stores/mixin";
import type { DataOption } from "@/modules/09_leave/interface/index/Main";
import type { QTableProps } from "quasar";
import type { DataRows } from "@/modules/09_leave/interface/response/leave";
import type { ListsData } from "@/modules/09_leave/interface/request/leave";
const mixin = useCounterMixin();
const { date2Thai, showLoader, hideLoader } = mixin;
export const useLeavelistDataStore = defineStore("leave", () => {
//TABMENU
const tab = ref<string>("1");
const amounttab1 = ref<number>(0);
const amounttab2 = ref<number>(0);
//ข้อมูลในตาราง
@ -19,20 +19,19 @@ export const useLeavelistDataStore = defineStore("leave", () => {
const columns = ref<QTableProps["columns"]>([]);
const visibleColumns = ref<string[]>([]);
const loadTable = ref<boolean>(false);
async function fetchList(data: DataRows[]) {
let datalist = data.map((e: DataRows) => ({
async function fetchList(data: ListsData[]) {
let datalist = data.map((e: ListsData) => ({
id: e.id,
leaveType: e.leaveType,
name: e.name,
Date: e.Date,
Date: date2Thai(e.Date),
status: convertSatatus(e.status),
}));
tab.value !== "1"
? (mainData.value = datalist)
: (mainData.value = datalist.filter(
(e) => e.status === "อยู่ระหว่างกำเนินการ"
));
mainData.value = datalist.filter(
(e) => e.status === "อยู่ระหว่างดำเนินการ"
);
const filteramounttab1 = datalist.filter(
(e) => e.status === "อยู่ระหว่างกำเนินการ"
(e) => e.status === "อยู่ระหว่างดำเนินการ"
);
amounttab1.value = filteramounttab1.length;
amounttab2.value = datalist.length;
@ -162,16 +161,17 @@ export const useLeavelistDataStore = defineStore("leave", () => {
// convertSatatus
function convertSatatus(val: string) {
switch (val) {
case "1":
case "NEW":
return "ใหม่";
case "2":
return "อยู่ระหว่างกำเนินการ";
case "3":
case "PENDING":
return "อยู่ระหว่างดำเนินการ";
case "APPROVE":
return "อนุมัติ";
case "REJECT":
return "ไม่อนุมัติ";
}
}
return {
tab,
amounttab1,
amounttab2,
//ข้อมูลในตาราง

45
src/modules/09_leave/stores/SpecialTimeStore.ts
View file

@ -2,6 +2,7 @@ import { defineStore } from "pinia";
import { ref } from "vue";
import type { QTableProps } from "quasar";
import type { DataRows } from "@/modules/09_leave/interface/response/specialTime";
import type { ListData } from "@/modules/09_leave/interface/request/specialTime";
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const { date2Thai } = mixin;
@ -11,14 +12,21 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
const selectDate = ref<Date | null>(new Date());
const fiscalYear = ref<string | null>("0");
const DataMainOrig = ref<DataRows[]>([]); // ข้อมูลหลักดั้งเดิม
async function fecthList(data: DataRows[]) {
let datalist: DataRows[] = data.map((e: any) => ({
async function fecthList(data: ListData[]) {
let datalist: DataRows[] = data.map((e: ListData) => ({
id: e.id,
fullname: e.fullname,
date: date2Thai(new Date(e.date)),
dateFix: date2Thai(new Date(e.dateFix)) + (e.timeStamp || ""),
type: e.type,
reason: e.reason,
timeStamp: e.timeStamp,
dateFix: date2Thai(new Date(e.dateFix)),
timeMorning:
e.startTimeMorning == null
? "-"
: e.startTimeMorning + " - " + e.endTimeMorning,
timeAfternoon:
e.startTimeAfternoon == null
? "-"
: e.startTimeAfternoon + " - " + e.endTimeAfternoon,
status: e.status,
}));
rows.value = datalist;
DataMainOrig.value = datalist;
@ -77,8 +85,8 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
"fullname",
"date",
"dateFix",
"type",
"reason",
"timeMorning",
"timeAfternoon",
]);
const columns = ref<QTableProps["columns"]>([
@ -108,8 +116,6 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
field: "date",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "dateFix",
@ -119,32 +125,27 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
field: "dateFix",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "type",
name: "timeMorning",
align: "left",
label: "ประเภท",
label: "ช่วงเช้า",
sortable: true,
field: "type",
field: "timeMorning",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "reason",
name: "timeAfternoon",
align: "left",
label: "เหตุผล",
label: "ช่วงบ่าย",
sortable: true,
field: "reason",
field: "timeAfternoon",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
return {
fecthList,
rows,

84
src/modules/09_leave/views/LeaveListMain.vue
View file

@ -15,30 +15,34 @@ onMounted(() => {
});
// เรียกข้อมูลจาก API
function fecthLeaveList() {
const data: DataRows = [
const data = [
{
id: "00000000-0000-0000-0000-000000000000",
leaveType: "ลาป่วย",
name: "นายกัณฐิมา กาฬสินธ์ุ",
Date: "",
status: "1",
Date: "2023-11-03",
status: "NEW",
},
{
id: "00000000-0000-0000-0000-000000000000",
leaveType: "ลากิจส่วนตัว",
name: "นายนครชัย วันดี",
Date: "",
status: "3",
Date: "2023-11-01",
status: "APPROVE",
},
{
id: "00000000-0000-0000-0000-000000000000",
leaveType: "ลากิจส่วนตัว",
name: "นายกัณฐิมา กาฬสินธ์ุ",
Date: "",
status: "2",
Date: "2023-11-02",
status: "PENDING",
},
{
id: "00000000-0000-0000-0000-000000000000",
leaveType: "ลาป่วย",
name: "นายปิยรมย์ ศิริธาราฟ",
Date: "",
status: "2",
Date: "2023-11-01",
status: "PENDING",
},
];
fetchList(data); // ส่งข้อมูลไป stores
@ -52,65 +56,9 @@ function changTab() {
<template>
<div class="toptitle text-dark col-12 row items-center">รายการลา</div>
<div>
<!-- <q-card flat bordered class="col-12 q-mt-sm"> -->
<q-card bordered flat>
<q-tabs
v-model="leaveStore.tab"
dense
align="left"
inline-label
class="rounded-borders"
indicator-color="primary"
active-bg-color="teal-1"
active-class="text-primary"
>
<q-tab
@click="changTab"
name="1"
label="รายการลาที่อยู่ระหว่างดำเนินการ"
>
<q-badge
color="grey-4"
:class="
leaveStore.tab == '1'
? 'q-px-sm text-weight-medium text-primary q-ml-xl bg-teal-1'
: 'q-px-sm text-weight-medium text-black q-ml-xl'
"
:label="leaveStore.amounttab1"
rounded
/>
</q-tab>
<q-tab @click="changTab" name="2" label="รายการลาทั้งหมด">
<q-badge
color="grey-4"
:class="
leaveStore.tab == '2'
? 'q-px-sm text-weight-medium text-primary q-ml-xl bg-teal-1'
: 'q-px-sm text-weight-medium text-black q-ml-xl'
"
:label="leaveStore.amounttab2"
rounded
/>
</q-tab>
</q-tabs>
<q-separator />
<q-tab-panels v-model="leaveStore.tab" animated>
<q-tab-panel name="1">
<!-- <TableList1 /> -->
<ToolBar />
<TableList />
</q-tab-panel>
<q-tab-panel name="2">
<!-- <TabList2Vue /> -->
<ToolBar />
<TableList />
</q-tab-panel>
</q-tab-panels>
<!-- </q-card> -->
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
<ToolBar />
<TableList />
</q-card>
</div>
</template>
<style scoped></style>

204
src/modules/09_leave/views/SpecialTimeMain.vue
View file

@ -3,7 +3,6 @@ import { onMounted, ref, useAttrs } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
import Table from "@/modules/09_leave/components/4_specialTime/Table.vue";
import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
import DialogReason from "@/components/Dialogs/PopupReason.vue";
@ -14,11 +13,6 @@ const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const router = useRouter();
const { hideLoader, monthYear2Thai } = mixin;
const filter = ref<string>(""); //search data table
const initialPagination = ref<Pagination>({
rowsPerPage: 0,
});
const attrs = ref<any>(useAttrs());
const modalUnapprove = ref(false);
const pagination = ref({
// sortBy: "desc",
@ -53,38 +47,51 @@ const resetFilter = () => {
onMounted(async () => {
fecthList([
{
id: "00000000-0000-0000-0000-000000000000",
fullname: "นางสาวณัฐกา ชมสิน",
date: "2023-10-30",
date: "2023-11-01 08:54",
dateFix: "2023-10-30",
type: "Checkin",
reason: "ลืม",
unapprove: "1",
approve: "0",
timeStamp: " 08:00 น.",
startTimeMorning: "08:00",
endTimeMorning: "12:00",
startTimeAfternoon: "08:00",
endTimeAfternoon: "12:00",
status: "PENDING",
},
{
id: "00000000-0000-0000-0000-000000000000",
fullname: "นางสาวรัชภรณ์ ภักดี",
date: "2023-10-30",
dateFix: "2023-10-30",
type: "Checkin",
reason: "ลืม",
unapprove: "1",
approve: "0",
timeStamp: " 08:00 น.",
date: "2023-10-30 08:55",
dateFix: "2023-10-29",
startTimeMorning: "08:00",
endTimeMorning: "12:00",
startTimeAfternoon: null,
endTimeAfternoon: null,
status: "APPROVE",
},
{
id: "00000000-0000-0000-0000-000000000000",
fullname: "นางสาวภาพรรณ ลออ",
date: "2023-10-30",
date: "2023-10-31 18:54",
dateFix: "2023-10-30",
type: "Checkin",
reason: "ลืม",
unapprove: "1",
approve: "0",
timeStamp: " 08:00 น.",
startTimeMorning: null,
endTimeMorning: null,
startTimeAfternoon: "13:00",
endTimeAfternoon: "16:30",
status: "REJECT",
},
]);
await hideLoader();
});
const selectedDate = ref<string>("");
const dateMonth = ref<any>({
month: new Date().getMonth(),
year: new Date().getFullYear(),
});
const monthYearThai = (val: any) => {
if (val == null) return "";
else return monthYear2Thai(val.month, val.year);
};
</script>
<template>
@ -92,8 +99,139 @@ onMounted(async () => {
รายการลงเวลากรณีพิเศษ
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
<div>
<Table
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div class="q-gutter-sm">
<datepicker
v-model="selectedDate"
:locale="'th'"
autoApply
month-picker
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:model-value="monthYearThai(dateMonth)"
dense
outlined
hide-bottom-space
style="width: 130px"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select
v-model="dataSpecialTime.visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="dataSpecialTime.columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<d-table
:columns="dataSpecialTime.columns"
:rows="dataSpecialTime.rows"
:filter="filterKeyword"
row-key="tb-list"
flat
bordered
:paging="true"
dense
v-model:pagination="pagination"
:visible-columns="dataSpecialTime.visibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
v-if="props.row.status == 'PENDING'"
color="orange"
class="q-px-md"
dense
unelevated
@click="unapprove(props.row.fullname)"
>ไม่อนุมัติ</q-btn
>
<q-btn
v-if="props.row.status == 'PENDING'"
color="primary"
class="q-px-md q-ml-sm"
dense
unelevated
>อนุมัติ</q-btn
>
<q-badge v-if="props.row.status == 'APPROVE'" rounded outline color="green" label="อนุมัติ" />
<q-badge v-if="props.row.status == 'REJECT'" rounded outline color="red" label="ไม่อนุมัติ" />
</q-td>
</q-tr>
</template>
</d-table>
<!-- <Table
style="max-height: 80vh"
:rows="dataSpecialTime.rows"
:columns="dataSpecialTime.columns"
@ -120,6 +258,7 @@ onMounted(async () => {
</q-td>
<q-td auto-width>
<q-btn
v-if="props.row.status == 'PENDING'"
color="orange"
class="q-px-md"
dense
@ -130,14 +269,19 @@ onMounted(async () => {
<span>{{ props.row.unapprove }}</span>
</q-td>
<q-td auto-width>
<q-btn color="primary" class="q-px-md" dense unelevated
<q-btn
v-if="props.row.status == 'PENDING'"
color="primary"
class="q-px-md"
dense
unelevated
>อนุมัติ</q-btn
>
<span>{{ props.row.approve }}</span>
</q-td>
</q-tr>
</template>
</Table>
</Table> -->
</div>
</q-card>
<DialogReason