Merge branch 'develop' into devTee
This commit is contained in:
setthawutttty
commit
bf3bc89636
22 changed files with 1797 additions and 118 deletions
|
|
@ -403,7 +403,7 @@ const menuList = readonly<any[]>([
|
|||
{
|
||||
key: 9.5,
|
||||
label: "รายการลา",
|
||||
path: "/leave-list",
|
||||
path: "/leave",
|
||||
role: "leave",
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ diff a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts (
|
|||
+ {
|
||||
+ key: 9.2,
|
||||
+ label: "รายการลา",
|
||||
+ path: "/leave-list",
|
||||
+ path: "/leave",
|
||||
+ role: "coin",
|
||||
+ },
|
||||
+ {
|
||||
|
|
|
|||
|
|
@ -68,18 +68,24 @@ async function fetchDetailByid(id: string) {
|
|||
const data = res.data.result;
|
||||
formData.checkInDate = data.checkInDate && date2Thai(data.checkInDate);
|
||||
formData.checkInImg = data.checkInImg;
|
||||
formData.checkInLat = data.checkInLat;
|
||||
formData.checkInLon = data.checkInLon;
|
||||
formData.checkInLocation = data.checkInLocation;
|
||||
formData.checkInTime = data.checkInTime;
|
||||
formData.checkInLat = data.checkInLat ? data.checkInLat : "";
|
||||
formData.checkInLon = data.checkInLon ? data.checkInLon : "";
|
||||
formData.checkInLocation = data.checkInLocation
|
||||
? data.checkInLocation
|
||||
: "-";
|
||||
formData.checkInTime = data.checkInTime ? data.checkInTime : "-";
|
||||
formData.checkOutDate = data.checkOutDate && date2Thai(data.checkOutDate);
|
||||
formData.checkOutImg = data.checkOutImg;
|
||||
formData.checkOutLat = data.checkOutLat;
|
||||
formData.checkOutLon = data.checkOutLon;
|
||||
formData.checkOutLocation = data.checkOutLocation;
|
||||
formData.checkOutTime = data.checkOutTime;
|
||||
formData.checkOutLat = data.checkOutLat ? data.checkOutLat : "";
|
||||
formData.checkOutLon = data.checkOutLon ? data.checkOutLon : "";
|
||||
formData.checkOutLocation = data.checkOutLocation
|
||||
? data.checkOutLocation
|
||||
: "-";
|
||||
formData.checkOutTime = data.checkOutTime ? data.checkOutTime : "-";
|
||||
formData.fullName = data.fullName;
|
||||
formData.checkOutLocation = data.checkOutLocation;
|
||||
formData.checkOutLocation = data.checkOutLocation
|
||||
? data.checkOutLocation
|
||||
: "-";
|
||||
formData.checkInDescription = data.checkInDescription
|
||||
? data.checkInDescription
|
||||
: "-";
|
||||
|
|
@ -177,6 +183,7 @@ function colsePopup() {
|
|||
<div class="col-6 text-grey-8">รูปภาพ</div>
|
||||
<div class="col-5">
|
||||
<q-img
|
||||
v-if="formData.checkInImg"
|
||||
style="
|
||||
height: 120px;
|
||||
max-width: 150px;
|
||||
|
|
@ -184,6 +191,15 @@ function colsePopup() {
|
|||
"
|
||||
:src="formData.checkInImg"
|
||||
/>
|
||||
<q-img
|
||||
v-else
|
||||
src="@/assets/avatar_user.jpg"
|
||||
style="
|
||||
height: 120px;
|
||||
max-width: 150px;
|
||||
border-radius: 10px;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -213,6 +229,7 @@ function colsePopup() {
|
|||
<div class="col-6 text-grey-8">รูปภาพ</div>
|
||||
<div class="col-5">
|
||||
<q-img
|
||||
v-if="formData.checkOutImg"
|
||||
style="
|
||||
height: 120px;
|
||||
max-width: 150px;
|
||||
|
|
@ -220,6 +237,15 @@ function colsePopup() {
|
|||
"
|
||||
:src="formData.checkOutImg"
|
||||
/>
|
||||
<q-img
|
||||
v-else
|
||||
src="@/assets/avatar_user.jpg"
|
||||
style="
|
||||
height: 120px;
|
||||
max-width: 150px;
|
||||
border-radius: 10px;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ const rows = ref<TableRows[]>([]);
|
|||
/** QueryString*/
|
||||
const keyword = ref<string>("");
|
||||
const page = ref<number>(1);
|
||||
const rowsPerPage = ref<number>(10);
|
||||
const rowsPerPage = ref<number>(2);
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
/** เรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */
|
||||
|
|
@ -114,13 +114,13 @@ async function fetchListLogRecord() {
|
|||
id: e.id,
|
||||
fullName: e.fullName,
|
||||
checkInDate: e.checkInDate && date2Thai(e.checkInDate),
|
||||
checkInTime: e.checkInTime,
|
||||
checkInLocation: e.checkInLocation,
|
||||
checkInLat: e.checkInLat,
|
||||
checkInLon: e.checkInLon,
|
||||
checkInTime: e.checkInTime ? e.checkInTime : "-",
|
||||
checkInLocation: e.checkInLocation ? e.checkInLocation : "-",
|
||||
checkInLat: e.checkInLat ? e.checkInLat : "",
|
||||
checkInLon: e.checkInLon ? e.checkInLon : "",
|
||||
checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
|
||||
checkOutLocation: e.checkOutLocation,
|
||||
checkOutTime: e.checkOutTime,
|
||||
checkOutLocation: e.checkOutLocation ? e.checkOutLocation : "-",
|
||||
checkOutTime: e.checkOutTime ? e.checkOutTime : "-",
|
||||
checkOutLat: e.checkOutLat ? e.checkOutLat : "",
|
||||
checkOutLon: e.checkOutLon ? e.checkOutLon : "",
|
||||
}));
|
||||
|
|
|
|||
585
src/modules/09_leave/components/2_Leave/Calendar.vue
Normal file
585
src/modules/09_leave/components/2_Leave/Calendar.vue
Normal file
|
|
@ -0,0 +1,585 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import FullCalendar from "@fullcalendar/vue3";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import type { CalendarOptions } from "@fullcalendar/core";
|
||||
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";
|
||||
|
||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
const { monthYear2Thai } = mixin;
|
||||
|
||||
import type { DataDateMonthObject } from "@/modules/09_leave/interface/response/leave";
|
||||
|
||||
/**
|
||||
* Option ของปฏิทิน
|
||||
*/
|
||||
const fullCalendar = ref<any>(); //ref calendar
|
||||
const calendarOptions = ref<CalendarOptions>({
|
||||
plugins: [
|
||||
dayGridPlugin,
|
||||
timeGridPlugin,
|
||||
interactionPlugin, // needed for dateClick
|
||||
listPlugin,
|
||||
],
|
||||
buttonText: {
|
||||
listYear: "รายการ",
|
||||
dayGridMonth: "ปฏิทิน",
|
||||
test: "เพิ่มวันหยุด",
|
||||
},
|
||||
headerToolbar: false,
|
||||
initialView: "dayGridMonth",
|
||||
initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
|
||||
selectable: true,
|
||||
dayMaxEvents: true,
|
||||
weekends: true,
|
||||
locale: "th",
|
||||
locales: allLocales,
|
||||
expandRows: true,
|
||||
nowIndicator: true,
|
||||
height: "100%",
|
||||
eventColor: "#fff",
|
||||
eventTextColor: "#4A5568",
|
||||
eventBorderColor: "#50a5fc",
|
||||
displayEventTime: false,
|
||||
editable: true,
|
||||
events: [
|
||||
{
|
||||
groupId: "3",
|
||||
title: "ลากิจส่วนตัว",
|
||||
start: "2023-10-10",
|
||||
allDay: true,
|
||||
status: "done",
|
||||
color: "#E3FDDA",
|
||||
},
|
||||
{
|
||||
groupId: "3",
|
||||
title: "ลากิจส่วนตัว",
|
||||
start: "2023-11-10",
|
||||
allDay: true,
|
||||
status: "done",
|
||||
color: "#E3FDDA",
|
||||
},
|
||||
{
|
||||
groupId: "3",
|
||||
title: "ลากิจส่วนตัว",
|
||||
start: "2023-10-11",
|
||||
allDay: true,
|
||||
status: "done",
|
||||
color: "#E3FDDA",
|
||||
},
|
||||
{
|
||||
groupId: "3",
|
||||
title: "ลากิจส่วนตัว",
|
||||
start: "2023-10-12",
|
||||
allDay: true,
|
||||
status: "done",
|
||||
color: "#E3FDDA",
|
||||
},
|
||||
{
|
||||
groupId: "3",
|
||||
title: "ลากิจส่วนตัว",
|
||||
start: "2023-10-13",
|
||||
allDay: true,
|
||||
status: "done",
|
||||
color: "#E3FDDA",
|
||||
},
|
||||
{
|
||||
groupId: "2",
|
||||
title: "ลาป่วย",
|
||||
start: "2023-10-19",
|
||||
allDay: true,
|
||||
status: "proceed",
|
||||
color: "#e4f3ff",
|
||||
},
|
||||
{
|
||||
groupId: "1",
|
||||
title: "ลาป่วย",
|
||||
start: "2023-10-20",
|
||||
allDay: true,
|
||||
status: "new",
|
||||
color: "#FFF1CC",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
/**
|
||||
* ตัวแปรทั้งหมด
|
||||
*/
|
||||
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);
|
||||
|
||||
/**
|
||||
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
||||
*/
|
||||
onMounted(async () => {
|
||||
if (fullCalendar !== undefined) {
|
||||
const calen = fullCalendar.value.getApi();
|
||||
const date = new Date(dateMonth.value.year, dateMonth.value.month);
|
||||
calen.gotoDate(date);
|
||||
}
|
||||
});
|
||||
|
||||
function changCalendar() {
|
||||
const calen = fullCalendar.value.getApi();
|
||||
const date = new Date(dateMonth.value.year, dateMonth.value.month);
|
||||
calen.gotoDate(date);
|
||||
}
|
||||
|
||||
/**
|
||||
* ค่า props(วันเดือนปีที่เลือก) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
|
||||
*/
|
||||
// watch(props, async (count, prevCount) => {
|
||||
// const calen = fullCalendar.value.getApi();
|
||||
// const date = new Date(props.dateYear, props.dateMonth);
|
||||
// calen.gotoDate(date);
|
||||
// });
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นยกเลิก model
|
||||
* @param text
|
||||
*/
|
||||
const cancel = async (text: string) => {
|
||||
title.value = text;
|
||||
modalCancel.value = true;
|
||||
modeCancel.value = true;
|
||||
};
|
||||
/**
|
||||
* ฟังก์ชั่นเปิด model
|
||||
* @param text
|
||||
*/
|
||||
const view = async (text: string) => {
|
||||
title.value = text;
|
||||
modalCancel.value = true;
|
||||
modeCancel.value = false;
|
||||
};
|
||||
|
||||
// filter calendar left
|
||||
const filterLists = ref<any[]>([
|
||||
{
|
||||
id: "x1",
|
||||
name: "นางสาววารุณี แต้มคู",
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
id: "x2",
|
||||
name: "นางสาวสมศรี ใจดี",
|
||||
color: "grey",
|
||||
},
|
||||
{
|
||||
id: "x3",
|
||||
name: "นายสมชาย สุขใจ",
|
||||
color: "grey",
|
||||
},
|
||||
]);
|
||||
const filterVal = ref(["x1"]);
|
||||
|
||||
const dateMonth = ref<DataDateMonthObject>({
|
||||
month: new Date().getMonth(),
|
||||
year: new Date().getFullYear(),
|
||||
});
|
||||
|
||||
const dateYear = ref<number>(new Date().getFullYear());
|
||||
const updateMonth = async (e: DataDateMonthObject) => {
|
||||
if (e != null) {
|
||||
dateYear.value = e.year;
|
||||
|
||||
changCalendar();
|
||||
}
|
||||
};
|
||||
|
||||
const monthYearThai = (val: DataDateMonthObject) => {
|
||||
if (val == null) return "";
|
||||
else return monthYear2Thai(val.month, val.year);
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="q-mt-sm">
|
||||
<div class="row q-gutter-sm">
|
||||
<div class="col-3">
|
||||
<q-list bordered class="rounded-borders">
|
||||
<!-- <q-item-label header>User</q-item-label> -->
|
||||
<q-item
|
||||
v-for="(item, i) in filterLists"
|
||||
:key="i"
|
||||
tag="label"
|
||||
v-ripple
|
||||
>
|
||||
<q-checkbox
|
||||
size="sm"
|
||||
v-model="filterVal"
|
||||
:val="item.id"
|
||||
:color="item.color"
|
||||
/>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ item.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row q-gutter-sm q-pb-sm main-content">
|
||||
<div class="demo-app-main">
|
||||
<div class="row col-12 q-col-gutter-sm q-mb-sm">
|
||||
<div class="col-xs-12 col-sm-3 col-md-2">
|
||||
<datepicker
|
||||
v-model="dateMonth"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
month-picker
|
||||
:enableTimePicker="false"
|
||||
@update:modelValue="updateMonth"
|
||||
>
|
||||
<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
|
||||
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>
|
||||
</div>
|
||||
<FullCalendar
|
||||
ref="fullCalendar"
|
||||
class="demo-app-calendar"
|
||||
:options="calendarOptions"
|
||||
>
|
||||
<template v-slot:eventContent="arg">
|
||||
<div
|
||||
class="row col-12 items-center no-wrap"
|
||||
:style="`background: + ${arg.event.color}`"
|
||||
>
|
||||
<!-- <b>{{ arg.timeText }}</b> -->
|
||||
<div class="textHover col-10" @click="view(arg.event.title)">
|
||||
{{ arg.event.title }}
|
||||
</div>
|
||||
<q-btn
|
||||
dense
|
||||
v-if="arg.event.groupId == 1"
|
||||
icon="mdi-close"
|
||||
flat
|
||||
round
|
||||
size="8px"
|
||||
@click="cancel(arg.event.title)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</FullCalendar>
|
||||
<div class="row q-col-gutter-lg justify-end">
|
||||
<div class="items-center row">
|
||||
<q-icon
|
||||
size="10px"
|
||||
color="light-green"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<span class="text-caption text-grey-8">สถานะอนุมัติ</span>
|
||||
</div>
|
||||
<div class="items-center row">
|
||||
<q-icon
|
||||
size="10px"
|
||||
color="red-6"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<span class="text-caption text-grey-8">สถานะไม่อนุมัติ</span>
|
||||
</div>
|
||||
<div class="items-center row">
|
||||
<q-icon
|
||||
size="10px"
|
||||
color="light-blue-14"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<span class="text-caption text-grey-8"
|
||||
>สถานะอยู่ระหว่างดำเนินการ</span
|
||||
>
|
||||
</div>
|
||||
<div class="items-center row">
|
||||
<q-icon
|
||||
size="10px"
|
||||
color="orange"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<span class="text-caption text-grey-8">สถานะใหม่</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- modal ขอยกเลิก/ดูรายละเอียด -->
|
||||
<q-dialog v-model="modalCancel" persistent>
|
||||
<q-card :style="modeCancel == true ? 'min-width: 50%;' : 'min-width:30%'">
|
||||
<q-card-section class="row items-center q-pa-sm">
|
||||
<div v-if="modeCancel == false" class="text-bold q-pl-sm">
|
||||
รายละเอียดของ{{ title }}
|
||||
</div>
|
||||
<div v-else class="text-bold q-pl-sm">ขอยกเลิก{{ title }}</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
v-close-popup
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-md row q-gutter-y-md">
|
||||
<div flat :class="modeCancel == true ? 'col-xs-6 col-sm-6' : 'col-12'">
|
||||
<div class="col-12 q-col-gutter-sm row items-center">
|
||||
<div class="col-6 text-grey-7">เขียนที่</div>
|
||||
<div class="col-6 text-black">{{ location }}</div>
|
||||
<div class="col-6 text-grey-7">เรื่องและเหตุผลการลา</div>
|
||||
<div class="col-6 text-black">{{ subject }}</div>
|
||||
<div class="col-6 text-grey-7">วัน เดือน ปีเริ่มต้น</div>
|
||||
<div class="col-6 text-black">{{ dateStart }}</div>
|
||||
<div class="col-6 text-grey-7">วัน เดือน ปีสิ้นสุด</div>
|
||||
<div class="col-6 text-black">{{ dateEnd }}</div>
|
||||
<div class="col-6 text-grey-7">จำนวนวันที่ลา</div>
|
||||
<div class="col-6 text-black">{{ numDate }}</div>
|
||||
<div class="col-6 text-grey-7">สถานที่ติดต่อขณะลา</div>
|
||||
<div class="col-6 text-black">{{ place }}</div>
|
||||
<div class="col-6 text-grey-7">หมายเลขโทรศัพท์</div>
|
||||
<div class="col-6 text-black">{{ phone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div flat class="col-xs-6 col-sm-6" v-if="modeCancel == true">
|
||||
<q-input
|
||||
v-model="reason"
|
||||
type="textarea"
|
||||
label="กรอกเหตุผล"
|
||||
outlined
|
||||
dense
|
||||
/>
|
||||
<q-file
|
||||
outlined
|
||||
v-model="model"
|
||||
label="เลือกไฟล์เอกสารหลักฐาน"
|
||||
class="q-mt-md"
|
||||
use-chips
|
||||
dense
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section
|
||||
class="row items-center q-pa-sm"
|
||||
v-if="modeCancel == true"
|
||||
>
|
||||
<q-space />
|
||||
<q-btn
|
||||
label="ยืนยัน"
|
||||
unelevated
|
||||
color="secondary"
|
||||
dense
|
||||
class="q-px-md"
|
||||
v-close-popup
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scope lang="scss">
|
||||
.main-content {
|
||||
height: 65vh;
|
||||
}
|
||||
|
||||
.color-main {
|
||||
color: #18a259;
|
||||
}
|
||||
|
||||
.padding-content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.demo-app-main {
|
||||
flex-grow: 1;
|
||||
/* padding: 3em; */
|
||||
}
|
||||
|
||||
.fc {
|
||||
/* the calendar root */
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.fc-day-today {
|
||||
background-color: #f8f8f8 !important;
|
||||
}
|
||||
|
||||
.fc-day-today .fc-daygrid-day-number {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* border: 2px solid #17a259; */
|
||||
/* border-radius: 50%;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
font-weight: bold;
|
||||
color: white !important;
|
||||
background: #17a259; */
|
||||
}
|
||||
|
||||
.fc-day-today .fc-daygrid-day-frame {
|
||||
padding: 5%;
|
||||
}
|
||||
|
||||
.fc .fc-button-group > .fc-button {
|
||||
color: black;
|
||||
background-color: #fafafa;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fc .fc-button-group > .fc-button:active {
|
||||
color: white;
|
||||
background-color: #22a15e;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fc .fc-button-group > .fc-button.fc-button-active {
|
||||
color: white;
|
||||
background-color: #22a15e;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fc-header-toolbar {
|
||||
background-color: white;
|
||||
padding: 0px 10px 0px 10px;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
}
|
||||
|
||||
.fc .fc-scrollgrid-liquid > thead {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.dp-custom-cell {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.dp__today {
|
||||
border: 1px solid var(--q-primary);
|
||||
}
|
||||
|
||||
.dp__range_end,
|
||||
.dp__range_start,
|
||||
.dp__active_date {
|
||||
background: var(--q-primary);
|
||||
color: var(--dp-primary-text-color);
|
||||
}
|
||||
|
||||
.datepicker .q-field__label {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.datepicker .q-field__messages {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.datepicker .q-field__native {
|
||||
padding-left: 5px;
|
||||
color: var(--q-primary) !important;
|
||||
}
|
||||
|
||||
.datepicker .q-field__prepend {
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.datepicker .q-field__append {
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.datepicker .q-field__after {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.fc .fc-popover {
|
||||
z-index: 6000;
|
||||
}
|
||||
|
||||
.fc-direction-ltr .fc-daygrid-event.fc-event-end,
|
||||
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.subName {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.subInput {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fc-event {
|
||||
overflow: hidden;
|
||||
border-color: transparent !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.fc-event-main {
|
||||
text-align: left;
|
||||
padding: 0px 5px;
|
||||
}
|
||||
|
||||
.fc-direction-ltr .fc-daygrid-event.fc-event-end,
|
||||
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.fc-theme-standard td,
|
||||
.fc-theme-standard th {
|
||||
border: 1px solid #ebe9f1;
|
||||
}
|
||||
|
||||
.textHover:hover {
|
||||
color: #18a259;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -38,6 +38,7 @@ const paramsId = route.params.id.toString();
|
|||
const modalApprove = ref(false);
|
||||
const dialogTitleUnapprove = ref<string>("ไม่อนุมัติ");
|
||||
const dialogTitle = ref<string>("อนุมัติ");
|
||||
const dialogLabel = ref<string>("เหตุผล");
|
||||
const closeDialog = () => {
|
||||
modalApprove.value = false;
|
||||
};
|
||||
|
|
@ -107,6 +108,7 @@ const formData = reactive<FremData>({
|
|||
coupleDayStartDateHistory: new Date(), //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
|
||||
coupleDayEndDateHistory: new Date(), //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
|
||||
coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
|
||||
step: "",
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -189,6 +191,7 @@ function fetchDetailLeave(paramsId: string) {
|
|||
formData.coupleDayEndDateHistory =
|
||||
e.coupleDayEndDateHistory && date2Thai(e.coupleDayEndDateHistory);
|
||||
formData.coupleDaySumTotalHistory = e.coupleDaySumTotalHistory;
|
||||
formData.step = e.step;
|
||||
});
|
||||
|
||||
/** ส่งประเภทของการลาไป Function เช็คประเภทการลา*/
|
||||
|
|
@ -237,9 +240,24 @@ const openModal = async (data: string) => {
|
|||
modalApprove.value = true;
|
||||
dialogTitle.value = "ไม่อนุมัติ";
|
||||
}
|
||||
if (data === "authority") {
|
||||
modalApprove.value = true;
|
||||
dialogTitle.value = "ส่งไปยังผู้มีอำนาจ";
|
||||
dialogLabel.value = "ความคิดเห็นผู้มีอำนาจ";
|
||||
}
|
||||
};
|
||||
|
||||
/** Function Save*/
|
||||
/** function ส่งไปผู้บังคับบัญชา*/
|
||||
function sendToCommand() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => console.log("ส่งไปผู้บังคับบัญชา"),
|
||||
"ยืนยันการส่งไปผู้บังคับบัญชา",
|
||||
"ต้องการยืนยันการส่งไปผู้บังคับบัญชานี้ใช่หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
|
||||
/** Function Save */
|
||||
function clickSave() {
|
||||
if (dialogTitle.value === "อนุมัติ") {
|
||||
dialogConfirm(
|
||||
|
|
@ -261,6 +279,14 @@ function clickSave() {
|
|||
modalApprove.value = false;
|
||||
console.log("NOT");
|
||||
}
|
||||
if (dialogTitle.value === "ส่งไปยังผู้มีอำนาจ") {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => ((modalApprove.value = false), console.log("ส่งไปยังผู้มีอำนาจ")),
|
||||
"ยืนยันการส่งไปยังผู้มีอำนาจ",
|
||||
"ต้องการยืนยันการส่งไปยังผู้มีอำนาจใช่หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -275,7 +301,7 @@ function clickSave() {
|
|||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.push(`/leave-list`)"
|
||||
@click="router.push(`/leave`)"
|
||||
/>
|
||||
รายละเอียดการลาของ {{ formData.fullname }}
|
||||
</div>
|
||||
|
|
@ -458,12 +484,90 @@ function clickSave() {
|
|||
/>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 row">
|
||||
<q-card
|
||||
bordered
|
||||
class="row col-12 text-dark q-mt-sm"
|
||||
v-if="
|
||||
formData.step === 'st3' ||
|
||||
formData.step === 'st4' ||
|
||||
formData.step === 'st5'
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
|
||||
>
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
ความคิดเห็นของผู้บังคับบัญชา
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-6 row items-start">
|
||||
<div class="col-12 text-detail">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 row">
|
||||
<q-card
|
||||
bordered
|
||||
class="row col-12 text-dark q-mt-sm"
|
||||
v-if="formData.step === 'st4' || formData.step === 'st5'"
|
||||
>
|
||||
<div
|
||||
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
|
||||
>
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
ความคิดเห็นของผู้มีอำนาจ
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-6 row items-start">
|
||||
<div class="col-12 text-weight-bold text-top">
|
||||
ผลการพิจารณา
|
||||
</div>
|
||||
<div class="col-12 text-detail">อนุมัติ</div>
|
||||
</div>
|
||||
<div class="col-xs-6 row items-start">
|
||||
<div class="col-12 text-weight-bold text-top">
|
||||
ความคิดเห็น
|
||||
</div>
|
||||
<div class="col-12 text-detail">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-pa-md q-gutter-md justify-end">
|
||||
<q-btn
|
||||
v-if="formData.step === 'st1'"
|
||||
unelevated
|
||||
color="orange-5"
|
||||
label="ส่งไปยังผู้บังคับบัญชา"
|
||||
@click="sendToCommand"
|
||||
><q-tooltip>ส่งไปยังผู้บังคับบัญชา</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-btn
|
||||
v-if="formData.step === 'st2'"
|
||||
unelevated
|
||||
color="orange-5"
|
||||
label="ส่งไปยังผู้มีอำนาจ"
|
||||
@click="openModal('authority')"
|
||||
><q-tooltip>ส่งไปยังผู้มีอำนาจ</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-btn
|
||||
v-if="formData.step === 'st3'"
|
||||
unelevated
|
||||
color="orange-5"
|
||||
label="ไม่อนุมัติ"
|
||||
|
|
@ -471,6 +575,7 @@ function clickSave() {
|
|||
><q-tooltip>ไม่อนุมัติ</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="formData.step === 'st3'"
|
||||
unelevated
|
||||
color="primary"
|
||||
label="อนุมัติ"
|
||||
|
|
@ -482,8 +587,8 @@ function clickSave() {
|
|||
<DialogReason
|
||||
:modal="modalApprove"
|
||||
:title="dialogTitle"
|
||||
:label="dialogLabel"
|
||||
:click-close="closeDialog"
|
||||
label="เหตุผล"
|
||||
:savaForm="clickSave"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
567
src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue
Normal file
567
src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue
Normal file
|
|
@ -0,0 +1,567 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
/** importStore */
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
|
||||
import { useLeavelistDataStoreTest } from "@/modules/09_leave/stores/ListLeave";
|
||||
import DialogReason from "@/components/Dialogs/PopupReason.vue";
|
||||
const APIDATA = useLeavelistDataStoreTest();
|
||||
|
||||
/** importType */
|
||||
import type { FremData } from "@/modules/09_leave/interface/request/leave";
|
||||
|
||||
/** importForm*/
|
||||
import FormMain from "@/modules/09_leave/components/2_Leave/formDetail/formMain.vue"; // from ซ้าย
|
||||
import FormLeave from "@/modules/09_leave/components/2_Leave/formDetail/formLeave.vue"; // ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
|
||||
import FormChildbirth from "@/modules/09_leave/components/2_Leave/formDetail/formChildbirth.vue"; // ลาไปช่วยเหลือภริยาที่คลอดบุตร
|
||||
import FormHoliday from "@/modules/09_leave/components/2_Leave/formDetail/formHoliday.vue"; //ลาพักผ่อน
|
||||
import FormUpasom from "@/modules/09_leave/components/2_Leave/formDetail/formUpasom.vue"; // ลาอุปสมบท
|
||||
import FormHajj from "@/modules/09_leave/components/2_Leave/formDetail/formHajj.vue"; //ลาประกอบพิธีฮัจย์
|
||||
import FormCheckSelect from "@/modules/09_leave/components/2_Leave/formDetail/formCheckSelect.vue"; //ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล
|
||||
import FormStudy from "@/modules/09_leave/components/2_Leave/formDetail/formStudy.vue"; //ลาไปศึกษา
|
||||
import FormLeaveToTraining from "@/modules/09_leave/components/2_Leave/formDetail/formLeaveToTraining.vue"; // ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน
|
||||
import FormLeaveToWorkInternational from "@/modules/09_leave/components/2_Leave/formDetail/formLeaveToWorkInternational.vue"; // ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
|
||||
import FormSpouse from "@/modules/09_leave/components/2_Leave/formDetail/formSpouse.vue"; // ลาติดตามคู่สมรส
|
||||
import FormVocationalRehabilitation from "@/modules/09_leave/components/2_Leave/formDetail/formVocationalRehabilitation.vue"; //ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ
|
||||
|
||||
/** use */
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm, showLoader, hideLoader, date2Thai } = mixin;
|
||||
const stores = useLeavelistDataStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const paramsId = route.params.id.toString();
|
||||
|
||||
const modalApprove = ref(false);
|
||||
const dialogTitleUnapprove = ref<string>("ไม่อนุมัติ");
|
||||
const dialogTitle = ref<string>("อนุมัติ");
|
||||
const closeDialog = () => {
|
||||
modalApprove.value = false;
|
||||
};
|
||||
|
||||
/** ฟังก์ชั่น อัปโหลด
|
||||
* consolelog ไว้ก่อน
|
||||
*/
|
||||
const filesUpload = ref<any>(null);
|
||||
function upLoadFile() {
|
||||
console.log("upload", filesUpload.value);
|
||||
}
|
||||
|
||||
/** Form รายละเอียดข้อมูล*/
|
||||
const formData = reactive<FremData>({
|
||||
id: "", //Id การยื่นขอลา
|
||||
leaveTypeName: "", // Name ประเภทการลา
|
||||
leaveTypeId: "", //Id ประเภทการลา
|
||||
fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
|
||||
dateSendLeave: new Date(), // วันที่ยืนใบลา
|
||||
status: "", //สถานะการของลา
|
||||
leaveLimit: 0, //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน
|
||||
leaveTotal: 0, //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน
|
||||
leaveRemain: 0, //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน
|
||||
leaveStartDate: new Date(), //*วัน เดือน ปีเริ่มต้นลา
|
||||
leaveEndDate: new Date(), //*วัน เดือน ปีสิ้นสุดลา
|
||||
leaveWrote: "", //เขียนที่
|
||||
leaveAddress: "", //สถานที่ติดต่อขณะลา
|
||||
leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
|
||||
leaveDetail: "", //รายละเอียดการลา
|
||||
leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
|
||||
leaveLast: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
||||
leaveDateTotal: 0, //จำนวนวันที่ลา(Auto)
|
||||
leavebirthDate: new Date(), //วันเดือนปีเกิด(Auto)
|
||||
leavegovernmentDate: new Date(), //วันที่เข้ารับราชการ(Auto)
|
||||
leaveSalary: 0, //เงินเดือนปัจจุบัน(Auto)
|
||||
leaveSalaryText: "", //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
|
||||
wifeDayName: "", //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
|
||||
wifeDayDateBorn: new Date(), //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
|
||||
restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
|
||||
restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
|
||||
ordainDayStatus: false, //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
|
||||
ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
|
||||
ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
|
||||
ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
|
||||
ordainDayOrdination: new Date(), //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
|
||||
ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
|
||||
ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
|
||||
hajjDayStatus: false, //เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก) (ลาประกอบพิธีฮัจย์)
|
||||
absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayRegistorDate: new Date(), //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayGetIn: "", //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayAt: "", //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
studyDaySubject: "", //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayDegreeLevel: "", //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayUniversityName: "", //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayTrainingSubject: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayTrainingName: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayCountry: "", //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayScholarship: "", //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
coupleDayName: "", //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
|
||||
coupleDayPosition: "", //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
|
||||
coupleDayLevel: "", //ระดับคู่สมรส (ลาติดตามคู่สมรส)
|
||||
coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
|
||||
coupleDayCountryHistory: "", //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
|
||||
coupleDayTotalHistory: "", //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
|
||||
coupleDayStartDateHistory: new Date(), //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
|
||||
coupleDayEndDateHistory: new Date(), //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
|
||||
coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
|
||||
step: "",
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// showLoader();
|
||||
if (paramsId) {
|
||||
fetchDetailLeave(paramsId);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Function fetch รายละเอียดของข้อมูล
|
||||
* @param paramsId รับ ID จาก paramID
|
||||
*/
|
||||
function fetchDetailLeave(paramsId: string) {
|
||||
const dataAPI = APIDATA.data;
|
||||
const data = dataAPI.filter((e: any) => e.id === paramsId);
|
||||
console.log(data);
|
||||
data.map((e: any) => {
|
||||
formData.id = e.id;
|
||||
formData.leaveTypeName = e.leaveTypeName
|
||||
? e.leaveTypeName
|
||||
: stores.convertLeave(e.leaveTypeId);
|
||||
formData.leaveTypeId = e.leaveTypeId;
|
||||
formData.fullname = e.fullname;
|
||||
formData.dateSendLeave = e.dateSendLeave && date2Thai(e.dateSendLeave);
|
||||
formData.status = e.status && e.status;
|
||||
formData.leaveLimit = e.leaveLimit;
|
||||
formData.leaveTotal = e.leaveTotal;
|
||||
formData.leaveRemain = e.leaveRemain;
|
||||
formData.leaveStartDate = e.leaveStartDate && date2Thai(e.leaveStartDate);
|
||||
formData.leaveEndDate = e.leaveEndDate && date2Thai(e.leaveEndDate);
|
||||
formData.status = e.status;
|
||||
formData.leaveWrote = e.leaveWrote;
|
||||
formData.leaveAddress = e.leaveAddress;
|
||||
formData.leaveNumber = e.leaveNumber;
|
||||
formData.leaveDetail = e.leaveDetail;
|
||||
formData.leaveDocument = e.leaveDocument;
|
||||
formData.leaveLast = e.leaveLast && date2Thai(e.leaveLast);
|
||||
formData.leaveDateTotal = e.leaveDateTotal;
|
||||
formData.leavebirthDate = e.leavebirthDate && date2Thai(e.leavebirthDate);
|
||||
formData.leavegovernmentDate =
|
||||
e.leavegovernmentDate && date2Thai(e.leavegovernmentDate);
|
||||
formData.leaveSalary = e.leaveSalary;
|
||||
formData.leaveSalaryText = e.leaveSalaryText;
|
||||
formData.wifeDayName = e.wifeDayName;
|
||||
formData.wifeDayDateBorn =
|
||||
e.wifeDayDateBorn && date2Thai(e.wifeDayDateBorn);
|
||||
formData.restDayOldTotal = e.restDayOldTotal;
|
||||
formData.restDayCurrentTotal = e.restDayCurrentTotal;
|
||||
formData.ordainDayStatus = e.ordainDayStatus;
|
||||
formData.ordainDayLocationName = e.ordainDayLocationName;
|
||||
formData.ordainDayLocationAddress = e.ordainDayLocationAddress;
|
||||
formData.ordainDayLocationNumber = e.ordainDayLocationNumber;
|
||||
formData.ordainDayOrdination =
|
||||
e.ordainDayOrdination && date2Thai(e.ordainDayOrdination);
|
||||
formData.ordainDayBuddhistLentName = e.ordainDayBuddhistLentName;
|
||||
formData.ordainDayBuddhistLentAddress = e.ordainDayBuddhistLentAddress;
|
||||
formData.hajjDayStatus = e.hajjDayStatus;
|
||||
formData.absentDaySummon = e.absentDaySummon;
|
||||
formData.absentDayLocation = e.absentDayLocation;
|
||||
formData.absentDayRegistorDate =
|
||||
e.absentDayRegistorDate && date2Thai(e.absentDayRegistorDate);
|
||||
formData.absentDayGetIn = e.absentDayGetIn;
|
||||
formData.absentDayAt = e.absentDayAt;
|
||||
formData.studyDaySubject = e.studyDaySubject;
|
||||
formData.studyDayDegreeLevel = e.studyDayDegreeLevel;
|
||||
formData.studyDayUniversityName = e.studyDayUniversityName;
|
||||
formData.studyDayTrainingSubject = e.studyDayTrainingSubject;
|
||||
formData.studyDayTrainingName = e.studyDayTrainingName;
|
||||
formData.studyDayCountry = e.studyDayCountry;
|
||||
formData.studyDayScholarship = e.studyDayScholarship;
|
||||
formData.coupleDayName = e.coupleDayName;
|
||||
formData.coupleDayPosition = e.coupleDayPosition;
|
||||
formData.coupleDayLevel = e.coupleDayLevel;
|
||||
formData.coupleDayLevelCountry = e.coupleDayLevelCountry;
|
||||
formData.coupleDayCountryHistory = e.coupleDayCountryHistory;
|
||||
formData.coupleDayTotalHistory = e.coupleDayTotalHistory;
|
||||
formData.coupleDayStartDateHistory =
|
||||
e.coupleDayStartDateHistory && date2Thai(e.coupleDayStartDateHistory);
|
||||
formData.coupleDayEndDateHistory =
|
||||
e.coupleDayEndDateHistory && date2Thai(e.coupleDayEndDateHistory);
|
||||
formData.coupleDaySumTotalHistory = e.coupleDaySumTotalHistory;
|
||||
formData.step = e.step;
|
||||
});
|
||||
|
||||
/** ส่งประเภทของการลาไป Function เช็คประเภทการลา*/
|
||||
checkLeaveType(formData.leaveTypeId ? formData.leaveTypeId : "");
|
||||
// hideLoader();
|
||||
}
|
||||
/**Status Form การลา*/
|
||||
const checkForm = ref<string>("");
|
||||
/**
|
||||
* Function เช็คประเภทการลา
|
||||
* @param type รับค่า
|
||||
*/
|
||||
function checkLeaveType(type: string) {
|
||||
if (type === "leave1" || type === "leave2" || type === "leave3") {
|
||||
checkForm.value = "FormLeave";
|
||||
} else if (type === "leave4") {
|
||||
checkForm.value = "FormChildbirth";
|
||||
} else if (type === "leave5") {
|
||||
checkForm.value = "FormHoliday";
|
||||
} else if (type === "leave6") {
|
||||
checkForm.value = "FormUpasom";
|
||||
} else if (type === "leave7") {
|
||||
checkForm.value = "FormHajj";
|
||||
} else if (type === "leave8") {
|
||||
checkForm.value = "FormCheckSelect";
|
||||
} else if (type === "leave9") {
|
||||
checkForm.value = "FormStudy";
|
||||
} else if (type === "leave10") {
|
||||
checkForm.value = "FormLeaveToTraining";
|
||||
} else if (type === "leave11") {
|
||||
checkForm.value = "FormLeaveToWorkInternational";
|
||||
} else if (type === "leave12") {
|
||||
checkForm.value = "FormSpouse";
|
||||
} else if (type === "leave13") {
|
||||
checkForm.value = "FormVocationalRehabilitation";
|
||||
}
|
||||
}
|
||||
|
||||
/** Function dialog*/
|
||||
const openModal = async (data: string) => {
|
||||
if (data === "approve") {
|
||||
modalApprove.value = true;
|
||||
dialogTitle.value = "อนุมัติการยกเลิก";
|
||||
}
|
||||
if (data === "UnApprove") {
|
||||
modalApprove.value = true;
|
||||
dialogTitle.value = "ไม่อนุมัติการยกเลิก";
|
||||
}
|
||||
};
|
||||
|
||||
/** Function Save*/
|
||||
function clickSave() {
|
||||
if (dialogTitle.value === "อนุมัติการยกเลิก") {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => console.log("save1"),
|
||||
"ยืนยันการอนุมัติการยกเลิก",
|
||||
"ต้องการยืนยันการอนุมัติการยกเลิกใช่หรือไม่ ?"
|
||||
);
|
||||
modalApprove.value = false;
|
||||
console.log("Yes");
|
||||
}
|
||||
if (dialogTitle.value === "ไม่อนุมัติการยกเลิก") {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => console.log("save1"),
|
||||
"ยืนยันไม่อนุมัติการยกเลิก",
|
||||
"ต้องการยืนยันไม่อนุมัติการยกเลิกใช่หรือไม่ ?"
|
||||
);
|
||||
modalApprove.value = false;
|
||||
console.log("NOT");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<div class="row col-12 q-col-gutter-sm q-mb-sm">
|
||||
<div class="q-mr-lg">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.push(`/leave`)"
|
||||
/>
|
||||
รายละเอียดการขอยกเลิกของ {{ formData.fullname }}
|
||||
</div>
|
||||
<!-- <div>
|
||||
<q-btn
|
||||
icon="mdi-download"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div> -->
|
||||
<q-space />
|
||||
<!-- <q-file
|
||||
v-model="filesUpload"
|
||||
dense
|
||||
label="อัพโหลดไฟล์"
|
||||
outlined
|
||||
class="col-xs-12 col-sm-3 col-md-2"
|
||||
bg-color="white"
|
||||
multiple
|
||||
accept="application/pdf"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file> -->
|
||||
<!-- <q-btn
|
||||
v-if="filesUpload"
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="mdi-arrow-up-bold"
|
||||
@click="upLoadFile"
|
||||
><q-tooltip>อัปโหลด</q-tooltip></q-btn
|
||||
> -->
|
||||
</div>
|
||||
</div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm">
|
||||
<div class="col-12 row q-py-md q-pl-md">
|
||||
<div class="col-12 q-col-gutter-md">
|
||||
<div class="col-xs-12 col-sm-12 row">
|
||||
<q-card bordered class="row col-12 text-dark q-mt-sm">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
รายละเอียดการขอยกเลิก
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-3 row items-start">
|
||||
<div class="col-12 text-weight-bold text-top">เขียนที่</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ formData.leaveWrote }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-3 row items-start">
|
||||
<div class="col-12 text-weight-bold text-top">วันที่</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ formData.dateSendLeave }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-3 row items-start">
|
||||
<div class="col-12 text-weight-bold text-top">เหตุผล</div>
|
||||
<div class="col-12 text-detail">-</div>
|
||||
</div>
|
||||
<div class="col-xs-3 row items-start">
|
||||
<div class="col-12 text-weight-bold text-top">
|
||||
เอกสารประกอบ
|
||||
</div>
|
||||
<div class="col-12 text-detail">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="row col-12">
|
||||
<q-card bordered class="bg-grey-1 q-pa-md col-12">
|
||||
<div class="row q-col-gutter-md col-12">
|
||||
<div class="col-xs-12 col-sm-5 row items-center q-my-xs">
|
||||
<div class="col-12 row">
|
||||
<div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
|
||||
<div class="col text-primary">
|
||||
{{
|
||||
formData.leaveTypeId &&
|
||||
stores.convertLeave(formData.leaveTypeId)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 row">
|
||||
<div class="col-xs-5 col-sm-3 text-grey-8">
|
||||
ชื่อ - นามสกุล
|
||||
</div>
|
||||
<div class="col text-weight-medium">
|
||||
{{ formData.fullname }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-7 row">
|
||||
<div class="row col-12 q-gutter-md">
|
||||
<div class="col row">
|
||||
<q-card
|
||||
bordered
|
||||
class="col-12 items-center row q-px-md q-py-sm"
|
||||
>
|
||||
<div class="text-h6 text-weight-bold text-blue-10">
|
||||
{{ formData.leaveLimit }}
|
||||
</div>
|
||||
<div class="col-12 text-subtitle2 text-weight-regular">
|
||||
<span class="gt-xs">ได้รับ</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-card
|
||||
bordered
|
||||
class="col-12 items-center row q-px-md q-py-sm"
|
||||
>
|
||||
<div class="text-h6 text-weight-bold text-light-blue-6">
|
||||
{{ formData.leaveTotal }}
|
||||
</div>
|
||||
<div class="col-12 text-subtitle2 text-weight-regular">
|
||||
<span class="gt-xs">ใช้ไป</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-card
|
||||
bordered
|
||||
class="col-12 items-center row q-px-md q-py-sm"
|
||||
>
|
||||
<div class="text-h6 text-weight-bold text-indigo-7">
|
||||
{{ formData.leaveRemain }}
|
||||
</div>
|
||||
<div class="col-12 text-subtitle2 text-weight-regular">
|
||||
<span class="gt-xs">คงเหลือ</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="row q-col-gutter-md col-12">
|
||||
<div class="col-xs-12 col-sm-5 row">
|
||||
<!-- card ซ้าย -->
|
||||
<q-card flat bordered class="col-12">
|
||||
<FormMain :data="formData" />
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-7 row">
|
||||
<q-card flat bordered class="col-12">
|
||||
<!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
|
||||
<FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
|
||||
|
||||
<!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
|
||||
<FormChildbirth
|
||||
v-else-if="checkForm === 'FormChildbirth'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาพักผ่อน -->
|
||||
<FormHoliday
|
||||
v-else-if="checkForm === 'FormHoliday'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาอุปสมบท -->
|
||||
<FormUpasom
|
||||
v-else-if="checkForm === 'FormUpasom'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาประกอบพิธีฮัจย์ -->
|
||||
<FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
|
||||
|
||||
<!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
|
||||
<FormCheckSelect
|
||||
v-else-if="checkForm === 'FormCheckSelect'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาไปศึกษา -->
|
||||
<FormStudy
|
||||
v-else-if="checkForm === 'FormStudy'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
|
||||
<FormLeaveToTraining
|
||||
v-else-if="checkForm === 'FormLeaveToTraining'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
|
||||
<FormLeaveToWorkInternational
|
||||
v-else-if="checkForm === 'FormLeaveToWorkInternational'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาติดตามคู่สมรส -->
|
||||
<FormSpouse
|
||||
v-else-if="checkForm === 'FormSpouse'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
|
||||
<FormVocationalRehabilitation
|
||||
v-else-if="checkForm === 'FormVocationalRehabilitation'"
|
||||
:data="formData"
|
||||
/>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 row">
|
||||
<q-card
|
||||
bordered
|
||||
class="row col-12 text-dark q-mt-sm"
|
||||
v-if="formData.step === 'st2' || formData.step === 'st3'"
|
||||
>
|
||||
<div
|
||||
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
|
||||
>
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
ความคิดเห็นของผู้มีอำนาจ
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-6 row items-start">
|
||||
<div class="col-12 text-weight-bold text-top">
|
||||
ผลการพิจารณา
|
||||
</div>
|
||||
<div class="col-12 text-detail">อนุมัติ</div>
|
||||
</div>
|
||||
<div class="col-xs-6 row items-start">
|
||||
<div class="col-12 text-weight-bold text-top">
|
||||
ความคิดเห็น
|
||||
</div>
|
||||
<div class="col-12 text-detail">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-pa-md q-gutter-md justify-end">
|
||||
<q-btn
|
||||
v-if="formData.step === 'st1'"
|
||||
unelevated
|
||||
color="orange-5"
|
||||
label="ไม่อนุมัติการยกเลิก"
|
||||
@click="openModal('UnApprove')"
|
||||
><q-tooltip>ไม่อนุมัติการยกเลิก</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="formData.step === 'st1'"
|
||||
unelevated
|
||||
color="primary"
|
||||
label="อนุมัติการยกเลิก"
|
||||
@click="openModal('approve')"
|
||||
><q-tooltip>อนุมัติการยกเลิก</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-card>
|
||||
<DialogReason
|
||||
:modal="modalApprove"
|
||||
:title="dialogTitle"
|
||||
:click-close="closeDialog"
|
||||
label="เหตุผล"
|
||||
:savaForm="clickSave"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.font-size {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
</style>
|
||||
116
src/modules/09_leave/components/2_Leave/Tab1.vue
Normal file
116
src/modules/09_leave/components/2_Leave/Tab1.vue
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
<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>
|
||||
73
src/modules/09_leave/components/2_Leave/Tab2.vue
Normal file
73
src/modules/09_leave/components/2_Leave/Tab2.vue
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<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";
|
||||
|
||||
/**importStroe*/
|
||||
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
|
||||
import { useLeavelistDataStoreTest } from "@/modules/09_leave/stores/ListLeave";
|
||||
|
||||
const leaveStore = useLeavelistDataStore();
|
||||
const APIDATA = useLeavelistDataStoreTest();
|
||||
const { fetchListLeaveReject } = leaveStore;
|
||||
|
||||
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);
|
||||
|
||||
//** เรียกข้อมูลจาก API*/
|
||||
function fecthLeaveList() {
|
||||
const data = APIDATA.data;
|
||||
maxPage.value = Math.ceil(data.length / querySting.pageSize);
|
||||
fetchListLeaveReject(data); /** ส่งข้อมูลไป stores*/
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @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>
|
||||
<ToolBar />
|
||||
<TableList
|
||||
:page="querySting.page"
|
||||
:rowsPerPage="querySting.pageSize"
|
||||
:maxPage="maxPage"
|
||||
@update:querySting="updatePaging"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -15,8 +15,8 @@ const router = useRouter();
|
|||
// const { date2Thai } = mixin;
|
||||
// const { optionYear, searchDataFn, filterOption } = leaveStore;
|
||||
|
||||
/** ข้อมูลหัวตาราง */
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
/** ข้อมูลหัวตาราง รายการลา */
|
||||
const columnsLeave = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
|
|
@ -63,7 +63,62 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>([
|
||||
const visibleColumnsLeave = ref<string[]>([
|
||||
"no",
|
||||
"leaveTypeName",
|
||||
"fullname",
|
||||
"dateSendLeave",
|
||||
"status",
|
||||
]);
|
||||
|
||||
const columnsReject = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "leaveTypeName",
|
||||
align: "left",
|
||||
label: "ประเภทการลา",
|
||||
sortable: true,
|
||||
field: "leaveTypeName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fullname",
|
||||
align: "left",
|
||||
label: "ผู้ยื่นยกเลิกใบลา",
|
||||
sortable: true,
|
||||
field: "fullname",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "dateSendLeave",
|
||||
align: "left",
|
||||
label: "วันที่ขอยกเลิก",
|
||||
sortable: true,
|
||||
field: "dateSendLeave",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
sortable: true,
|
||||
field: "status",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const visibleReject = ref<string[]>([
|
||||
"no",
|
||||
"leaveTypeName",
|
||||
"fullname",
|
||||
|
|
@ -103,6 +158,10 @@ const pagination = ref({
|
|||
page: props.page,
|
||||
rowsPerPage: props.rowsPerPage,
|
||||
});
|
||||
function redirectToDetail(id: string) {
|
||||
const routePrefix = leaveStore.tabMenu === "1" ? "/leave" : "/leave-reject";
|
||||
router.push(`${routePrefix}/detail/${id}`);
|
||||
}
|
||||
|
||||
watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
|
||||
// updateProp(pagination.value, currentPage.value);
|
||||
|
|
@ -113,14 +172,21 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
|
|||
|
||||
/** Hook*/
|
||||
onMounted(() => {
|
||||
leaveStore.visibleColumns = visibleColumns.value;
|
||||
console.log(leaveStore.tabMenu);
|
||||
if (leaveStore.tabMenu === "1") {
|
||||
leaveStore.visibleColumns = visibleColumnsLeave.value;
|
||||
leaveStore.columns = columnsLeave.value;
|
||||
} else if (leaveStore.tabMenu === "2") {
|
||||
leaveStore.visibleColumns = visibleReject.value;
|
||||
leaveStore.columns = columnsReject.value;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:columns="leaveStore.columns"
|
||||
:rows="leaveStore.rows"
|
||||
row-key="id"
|
||||
flat
|
||||
|
|
@ -144,7 +210,7 @@ onMounted(() => {
|
|||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
@click.prevent="router.push(`/leave/detail/${props.row.id}`)"
|
||||
@click.prevent="redirectToDetail(props.row.id)"
|
||||
>
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
|
|
|
|||
|
|
@ -80,8 +80,28 @@ const optionStatus = ref<DataOption[]>([
|
|||
name: "ไม่อนุมัติ",
|
||||
},
|
||||
]);
|
||||
const optionStatus2 = ref<DataOption[]>([
|
||||
{
|
||||
id: "ALL",
|
||||
name: "ทั้งหมด",
|
||||
},
|
||||
{
|
||||
id: "NEW",
|
||||
name: "ขอยกเลิก",
|
||||
},
|
||||
{
|
||||
id: "PENDING ",
|
||||
name: "อนุมัติ",
|
||||
},
|
||||
{
|
||||
id: "APPROVE ",
|
||||
name: "ไม่อนุมัติ",
|
||||
},
|
||||
]);
|
||||
const optionTypeMain = ref<DataOption[]>(optionType.value);
|
||||
const optionStatusMain = ref<DataOption[]>(optionStatus.value);
|
||||
const optionStatusMain = ref<DataOption[]>(
|
||||
leaveStore.tabMenu == "1" ? optionStatus.value : optionStatus2.value
|
||||
);
|
||||
|
||||
async function fetchOption() {
|
||||
console.log("loadOption รอ API");
|
||||
|
|
@ -110,6 +130,8 @@ function filterOption(val: string, update: any, name: string) {
|
|||
|
||||
onMounted(async () => {
|
||||
await fetchOption();
|
||||
// optionTypeMain.value =
|
||||
// leaveStore.tabMenu == "1" ? optionStatus.value : optionStatus2.value;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -76,6 +76,7 @@ interface FremData {
|
|||
coupleDayStartDateHistory: Date | null; //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
|
||||
coupleDayEndDateHistory: Date | null; //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
|
||||
coupleDaySumTotalHistory: string; //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
|
||||
step: string;
|
||||
}
|
||||
|
||||
export type { ListsData, FremData, QuerySting, DateFilter };
|
||||
|
|
|
|||
|
|
@ -13,4 +13,10 @@ interface FormData {
|
|||
Date: string;
|
||||
status: string;
|
||||
}
|
||||
export type { DataRows, FormData };
|
||||
|
||||
interface DataDateMonthObject {
|
||||
month: number;
|
||||
year: number;
|
||||
}
|
||||
|
||||
export type { DataRows, FormData, DataDateMonthObject };
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@ const workMain = () => import("@/modules/09_leave/views/WorkingMain.vue");
|
|||
const leaveMain = () => import("@/modules/09_leave/views/LeaveListMain.vue");
|
||||
const reportMain = () => import("@/modules/09_leave/views/ReportMain.vue");
|
||||
const leaveDetail = () =>
|
||||
import("@/modules//09_leave/components/2_Leave/DetailLeave.vue");
|
||||
import("@/modules/09_leave/components/2_Leave/DetailLeave.vue");
|
||||
const leaveDetailReject = () =>
|
||||
import("@/modules/09_leave/components/2_Leave/DetailLeaveReject.vue");
|
||||
const RoundMain = () => import("@/modules/09_leave/views/RoundMain.vue");
|
||||
const ChangeRoundMain = () =>
|
||||
import("@/modules/09_leave/views/ChangeRoundMain.vue");
|
||||
|
|
@ -61,8 +63,8 @@ export default [
|
|||
},
|
||||
},
|
||||
{
|
||||
path: "/leave-list",
|
||||
name: "/leave-list",
|
||||
path: "/leave",
|
||||
name: "/leave",
|
||||
component: leaveMain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
|
|
@ -80,6 +82,16 @@ export default [
|
|||
Role: "coin",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/leave-reject/detail/:id",
|
||||
name: "/leave-reject/detail",
|
||||
component: leaveDetailReject,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/statistics-report",
|
||||
name: "/statistics-report",
|
||||
|
|
|
|||
|
|
@ -11,6 +11,12 @@ const mixin = useCounterMixin();
|
|||
const { date2Thai, showLoader, hideLoader } = mixin;
|
||||
|
||||
export const useLeavelistDataStore = defineStore("leave", () => {
|
||||
/** ข้อมูล Main*/
|
||||
const tabMenu = ref<string>("1");
|
||||
|
||||
/** ข้อมูล Tab 1*/
|
||||
const tabView = ref<string>("list");
|
||||
|
||||
/**ข้อมูลใน Table*/
|
||||
const mainData = ref<any>([]);
|
||||
const rows = ref<DataRows[]>([]);
|
||||
|
|
@ -18,10 +24,10 @@ export const useLeavelistDataStore = defineStore("leave", () => {
|
|||
const visibleColumns = ref<string[]>([]);
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่น fetchList
|
||||
* ฟังก์ชั่น fetchListLeave
|
||||
* @param data รับข้อมูลจาก Page
|
||||
*/
|
||||
async function fetchList(data: any[]) {
|
||||
async function fetchListLeave(data: any[]) {
|
||||
let datalist = data.map((e: FremData) => ({
|
||||
id: e.id,
|
||||
leaveTypeName: e.leaveTypeId && convertLeave(e.leaveTypeId),
|
||||
|
|
@ -30,7 +36,25 @@ export const useLeavelistDataStore = defineStore("leave", () => {
|
|||
dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave),
|
||||
status: convertSatatus(e.status),
|
||||
}));
|
||||
console.log(datalist);
|
||||
|
||||
mainData.value = datalist;
|
||||
rows.value = mainData.value;
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่น fetchListLeave
|
||||
* @param data รับข้อมูลจาก Page
|
||||
*/
|
||||
async function fetchListLeaveReject(data: any[]) {
|
||||
let datalist = data.map((e: FremData) => ({
|
||||
id: e.id,
|
||||
leaveTypeName: e.leaveTypeId && convertLeave(e.leaveTypeId),
|
||||
leaveTypeId: e.leaveTypeId,
|
||||
fullname: e.fullname,
|
||||
dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave),
|
||||
status: convertSatatus2(e.status),
|
||||
}));
|
||||
|
||||
mainData.value = datalist;
|
||||
rows.value = mainData.value;
|
||||
}
|
||||
|
|
@ -52,6 +76,21 @@ export const useLeavelistDataStore = defineStore("leave", () => {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นแปลงสถานะ
|
||||
* @param val ค่าสถานะ
|
||||
*/
|
||||
function convertSatatus2(val: string) {
|
||||
switch (val) {
|
||||
case "NEW":
|
||||
return "ขอยกเลิก";
|
||||
case "PENDING":
|
||||
return "อนุมัติ";
|
||||
case "APPROVE":
|
||||
return "อนุมัติ";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นแปลงประเภทการลา
|
||||
* @param val ค่าประเภทของกาลา
|
||||
|
|
@ -103,12 +142,18 @@ export const useLeavelistDataStore = defineStore("leave", () => {
|
|||
}
|
||||
|
||||
return {
|
||||
/** ข้อมูล Main*/
|
||||
tabMenu,
|
||||
/** ข้อมูล Tab1*/
|
||||
tabView,
|
||||
/**ข้อมูลใน Table */
|
||||
rows,
|
||||
fetchList,
|
||||
fetchListLeave,
|
||||
columns,
|
||||
visibleColumns,
|
||||
|
||||
fetchListLeaveReject,
|
||||
|
||||
/** Function แปลงค่า */
|
||||
convertLeave,
|
||||
convertLeaveDaytype,
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@ export const useLeavelistDataStoreTest = defineStore("listleavetest", () => {
|
|||
coupleDayEndDateHistory: new Date("2022-11-06"),
|
||||
coupleDaySumTotalHistory:
|
||||
"ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)",
|
||||
step: "st1",
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
|
|
@ -117,6 +118,7 @@ export const useLeavelistDataStoreTest = defineStore("listleavetest", () => {
|
|||
coupleDayEndDateHistory: new Date("2022-11-06"),
|
||||
coupleDaySumTotalHistory:
|
||||
"ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)",
|
||||
step: "st2",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
|
|
@ -175,6 +177,7 @@ export const useLeavelistDataStoreTest = defineStore("listleavetest", () => {
|
|||
coupleDayEndDateHistory: new Date("2022-11-06"),
|
||||
coupleDaySumTotalHistory:
|
||||
"ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)",
|
||||
step: "st3",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
|
|
@ -233,6 +236,7 @@ export const useLeavelistDataStoreTest = defineStore("listleavetest", () => {
|
|||
coupleDayEndDateHistory: new Date("2022-11-06"),
|
||||
coupleDaySumTotalHistory:
|
||||
"ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)",
|
||||
step: "st4",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
|
|
@ -291,6 +295,7 @@ export const useLeavelistDataStoreTest = defineStore("listleavetest", () => {
|
|||
coupleDayEndDateHistory: new Date("2022-11-06"),
|
||||
coupleDaySumTotalHistory:
|
||||
"ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)",
|
||||
step: "st5",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
|
|
|
|||
|
|
@ -1,72 +1,43 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
|
||||
/**importType*/
|
||||
import type {
|
||||
QuerySting,
|
||||
DateFilter,
|
||||
} from "@/modules/09_leave/interface/request/leave";
|
||||
import type { DataRows } from "@/modules/09_leave/interface/response/leave";
|
||||
|
||||
/**importStroe*/
|
||||
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
|
||||
import { useLeavelistDataStoreTest } from "@/modules/09_leave/stores/ListLeave";
|
||||
|
||||
/**importComponets*/
|
||||
import TableList from "@/modules/09_leave/components/2_Leave/TableList.vue";
|
||||
import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBar.vue";
|
||||
import Tab1 from "@/modules/09_leave/components/2_Leave/Tab1.vue";
|
||||
import Tab2 from "@/modules/09_leave/components/2_Leave/Tab2.vue";
|
||||
|
||||
const leaveStore = useLeavelistDataStore();
|
||||
const APIDATA = useLeavelistDataStoreTest();
|
||||
const { fetchList } = leaveStore;
|
||||
|
||||
/** เรียกข้อมูลจาก API*/
|
||||
function fecthLeaveList() {
|
||||
const data = APIDATA.data;
|
||||
maxPage.value = Math.ceil(data.length / querySting.pageSize);
|
||||
fetchList(data); /** ส่งข้อมูลไป stores*/
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
const maxPage = ref<number>(1);
|
||||
const querySting = reactive<QuerySting>({
|
||||
year: 0, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
|
||||
type: "00000000-0000-0000-0000-000000000000", //*Id ประเภทการลา
|
||||
status: "ALL", //*สถานะการของลา
|
||||
page: 1, //*หน้า
|
||||
pageSize: 5, //*จำนวนแถวต่อหน้า
|
||||
keyword: "", //keyword ค้นหา
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
fecthLeaveList();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">รายการลา</div>
|
||||
<div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
|
||||
<ToolBar @update:querySting="updatePaging" />
|
||||
<q-card flat bordered class="col-12">
|
||||
<q-tabs
|
||||
v-model="leaveStore.tabMenu"
|
||||
dense
|
||||
align="left"
|
||||
inline-label
|
||||
class="rounded-borders"
|
||||
indicator-color="primary"
|
||||
active-bg-color="teal-1"
|
||||
active-class="text-primary"
|
||||
>
|
||||
<q-tab name="1" label="รายการใบลา" />
|
||||
<q-tab name="2" label="รายการยกเลิกใบลา" />
|
||||
</q-tabs>
|
||||
<q-separator />
|
||||
<q-tab-panels v-model="leaveStore.tabMenu" animated>
|
||||
<q-tab-panel name="1"> <Tab1 /> </q-tab-panel>
|
||||
|
||||
<q-tab-panel name="2"> <Tab2 /> </q-tab-panel>
|
||||
</q-tab-panels>
|
||||
<!-- <ToolBar @update:querySting="updatePaging" />
|
||||
<TableList
|
||||
:page="querySting.page"
|
||||
:rowsPerPage="querySting.pageSize"
|
||||
:maxPage="maxPage"
|
||||
@update:querySting="updatePaging"
|
||||
/>
|
||||
/> -->
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ const tab = ref("1");
|
|||
|
||||
<q-separator />
|
||||
|
||||
<q-tab-panels v-model="tab" animated>
|
||||
<q-tab-panels v-model="tab" animated >
|
||||
<q-tab-panel name="1">
|
||||
<!-- <TableList1 /> -->
|
||||
<!-- <ToolBar /> -->
|
||||
|
|
|
|||
|
|
@ -3,17 +3,16 @@ import { onMounted, reactive, ref } from "vue";
|
|||
import Form from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue";
|
||||
import type { FormData } from "@/modules/11_discipline/interface/request/investigate";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const { dialogConfirm } = mixin
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm } = mixin;
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const id = ref<string>(route.params.id as string);
|
||||
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const data = reactive<FormData>({
|
||||
complaint: "",
|
||||
|
|
@ -30,7 +29,7 @@ const data = reactive<FormData>({
|
|||
daysExtend: null,
|
||||
statusResult: "",
|
||||
causeText: "",
|
||||
complaintStatus: ""
|
||||
complaintStatus: "NEW",
|
||||
});
|
||||
|
||||
/** จำลองข้อมูลจาก api */
|
||||
|
|
@ -56,20 +55,55 @@ const fetchData = async () => {
|
|||
* บันทึกข้อมูลที่เเก้ไข
|
||||
* @param id ระบุ บุคคล
|
||||
*/
|
||||
async function onSubmit(id:string){
|
||||
async function onSubmit(id: string) {
|
||||
// put
|
||||
console.log("edit",id);
|
||||
console.log("edit", id);
|
||||
router.push(`/discipline/investigatefacts`);
|
||||
};
|
||||
}
|
||||
|
||||
/** ยืนยัน ส่งไปสอบสวน */
|
||||
function sentInvestigate(){
|
||||
dialogConfirm($q,()=> confirmSentInvestigate(),'ยืนยันส่งไปสอบสวน','ต้องการยืนยันส่งไปสอบสวนใช่หรือไม่?')
|
||||
function sentInvestigate() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => confirmSentInvestigate(),
|
||||
"ยืนยันส่งไปสอบสวน",
|
||||
"ต้องการยืนยันส่งไปสอบสวนใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
/** ยืนยัน ยุติเรื่อง */
|
||||
function endInvestigate() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => confirmEndInvestigate(),
|
||||
"ยืนยันยุติเรื่อง",
|
||||
"ต้องการยืนยันยุติเรื่องใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
/** ยืนยัน ยกเลิกการยุติเรื่อง */
|
||||
function cancelInvestigate() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => confirmCancelInvestigate(),
|
||||
"ยืนยันยกเลิกการยุติเรื่อง",
|
||||
"ต้องการยืนยันยกเลิกการยุติเรื่องใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
/** ฟังชั่น ส่งไปสอบสวน*/
|
||||
function confirmSentInvestigate(){
|
||||
console.log('sent')
|
||||
function confirmSentInvestigate() {
|
||||
console.log("sent");
|
||||
}
|
||||
|
||||
/** ฟังชั่น ยุติเรื่อง*/
|
||||
function confirmEndInvestigate() {
|
||||
console.log("sent");
|
||||
}
|
||||
|
||||
/** ฟังชั่น ยกเลิกการยุติเรื่อง*/
|
||||
function confirmCancelInvestigate() {
|
||||
console.log("sent");
|
||||
}
|
||||
|
||||
/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
|
||||
|
|
@ -95,10 +129,24 @@ onMounted(() => {
|
|||
<q-space />
|
||||
<div class="q-gutter-x-sm">
|
||||
<q-btn
|
||||
v-if="data.complaintStatus === 'NEW'"
|
||||
label="ส่งไปสอบสวน"
|
||||
color="public"
|
||||
@click="sentInvestigate"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
v-if="data.complaintStatus === 'NEW'"
|
||||
label="ยุติเรื่อง"
|
||||
color="red-7"
|
||||
@click="endInvestigate"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="data.complaintStatus === 'STOP'"
|
||||
label="ยกเลิกการยุติเรื่อง"
|
||||
color="red-7"
|
||||
@click="cancelInvestigate"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -184,7 +184,6 @@ onMounted(async () => {
|
|||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
<q-th auto-width />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
|
|
@ -209,19 +208,6 @@ onMounted(async () => {
|
|||
>
|
||||
{{ props.row.active }}
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<div>
|
||||
<q-btn
|
||||
v-if="props.row.status === 'ยุติเรื่อง'"
|
||||
for="#cancel"
|
||||
dense
|
||||
unelevated
|
||||
color="primary"
|
||||
class="q-px-sm"
|
||||
>ยกเลิกยุติเรื่อง</q-btn
|
||||
>
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ const data = reactive<FormData>({
|
|||
filesRecordAccuser: null,
|
||||
filesWitnesses: null,
|
||||
filesEtc: null,
|
||||
complaintStatus: 'NEW'
|
||||
});
|
||||
|
||||
/** จำลองข้อมูลจาก api */
|
||||
|
|
@ -77,11 +78,41 @@ function sentIssue() {
|
|||
);
|
||||
}
|
||||
|
||||
/** ยืนยัน ยุติเรื่อง */
|
||||
function endInvestigate() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => confirmEndInvestigate(),
|
||||
"ยืนยันยุติเรื่อง",
|
||||
"ต้องการยืนยันยุติเรื่องใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
/** ยืนยัน ยกเลิกการยุติเรื่อง */
|
||||
function cancelInvestigate() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => confirmCancelInvestigate(),
|
||||
"ยืนยันยกเลิกการยุติเรื่อง",
|
||||
"ต้องการยืนยันยกเลิกการยุติเรื่องใช่หรือไม่?"
|
||||
);
|
||||
}
|
||||
|
||||
/** ฟังชั่น ส่งไปออกคำสั่ง*/
|
||||
function confirmSentIssue() {
|
||||
console.log("sent");
|
||||
}
|
||||
|
||||
/** ฟังชั่น ยุติเรื่อง*/
|
||||
function confirmEndInvestigate() {
|
||||
console.log("sent");
|
||||
}
|
||||
|
||||
/** ฟังชั่น ยกเลิกการยุติเรื่อง*/
|
||||
function confirmCancelInvestigate() {
|
||||
console.log("sent");
|
||||
}
|
||||
|
||||
/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
|
|
@ -103,7 +134,20 @@ onMounted(() => {
|
|||
<div class="q-ma-none">แก้ไขการสอบสวนความผิดทางวินัย {{ id }}#id</div>
|
||||
<q-space />
|
||||
<div class="q-gutter-x-sm">
|
||||
<q-btn label="ส่งไปออกคำสั่ง" color="public" @click="sentIssue" />
|
||||
<q-btn v-if="data.complaintStatus === 'NEW'" label="ส่งไปออกคำสั่ง" color="public" @click="sentIssue" />
|
||||
<q-btn
|
||||
v-if="data.complaintStatus === 'NEW'"
|
||||
label="ยุติเรื่อง"
|
||||
color="red-7"
|
||||
@click="endInvestigate"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="data.complaintStatus === 'STOP'"
|
||||
label="ยกเลิกการยุติเรื่อง"
|
||||
color="red-7"
|
||||
@click="cancelInvestigate"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<Form :on-submit="onSubmit" :data="data" />
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ interface FormData {
|
|||
recordAccuser: string;
|
||||
witnesses: string;
|
||||
InvestResults: string;
|
||||
complaintStatus: string
|
||||
}
|
||||
|
||||
interface disciplinaryRef {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue