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

ระบบลา เพิ่ม dialog ขอแก้ไข,ดูรายละเอียด,ตารางสถิติการลา

Browse source
This commit is contained in:
Tanyalak 2023-09-29 15:56:13 +07:00
parent ce05548bc5
commit 9a55a75706
4 changed files with 392 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,8 +8,11 @@
:options="calendarOptions"
>
<template v-slot:eventContent="arg">
<b>{{ arg.timeText }}</b>
<i>{{ arg.event.title }}</i>
<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>
@ -32,10 +35,75 @@
<span class="text-caption text-grey-8">สถานะใหม่</span>
</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>
<script lang="ts">
<script setup lang="ts">
import { ref } from "vue";
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
@ -44,62 +112,64 @@ import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import allLocales from "@fullcalendar/core/locales-all";
import listPlugin from "@fullcalendar/list";
const fullCalendar = ref<InstanceType<typeof FullCalendar>>();
const calendarOptions = ref({
plugins: [
dayGridPlugin,
timeGridPlugin,
interactionPlugin, // needed for dateClick
listPlugin,
],
buttonText: {
listYear: "รายการ",
dayGridMonth: "ปฏิทิน",
test: "เพิ่มวันหยุด",
},
headerToolbar: null,
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-09-10", allDay: true, status: 'done', color: '#E3FDDA' },
{ groupId: "2", title: "ลาป่วย", start: "2023-09-19", allDay: true, status: 'proceed', color: '#e4f3ff' },
{ groupId: "1", title: "ลาป่วย", start: "2023-09-20", allDay: true, status: 'new', color: '#FFF1CC' }
],
});
// import interactionPlugin from "@fullcalendar/interaction";
export default {
components: {
FullCalendar, // make the <FullCalendar> tag available
calendar() {
return (
this.$refs.fullCalendar as InstanceType<typeof FullCalendar>
).getApi();
},
},
setup() {
const name = ref<string>("");
const date = ref<Date>(new Date());
const fullCalendar = ref<InstanceType<typeof FullCalendar>>();
const calendarOptions = ref({
plugins: [
dayGridPlugin,
timeGridPlugin,
interactionPlugin, // needed for dateClick
listPlugin,
],
buttonText: {
listYear: "รายการ",
dayGridMonth: "ปฏิทิน",
test: "เพิ่มวันหยุด",
},
headerToolbar: null,
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: "#e4f3ff",
eventTextColor: "#4A5568",
eventBorderColor: "#50a5fc",
displayEventTime: false,
editable: true,
events: []
});
calendarOptions.value.events = [
{ groupId: "2", title: "ลากิจส่วนตัว", start: "2023-09-10", allDay: true, color: '#E3FDDA' },
{ groupId: "1", title: "ลาป่วย", start: "2023-09-19", allDay: true, color: '#e4f3ff' },
{ groupId: "1", title: "ลาป่วย", start: "2023-09-20", allDay: true, color: '#FFF1CC' },
];
return {
calendarOptions,
name,
date
};
},
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 cancel = async (text: string) => {
title.value = text;
modalCancel.value = true;
modeCancel.value = true;
};
const view = async (text: string) => {
title.value = text;
modalCancel.value = true;
modeCancel.value = false;
};
</script>
@ -261,4 +331,8 @@ export default {
.fc-theme-standard td, .fc-theme-standard th{
border: 1px solid #EBE9F1;
}
.textHover:hover{
color: #18a259;
}
</style>

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

@ -12,33 +12,99 @@
:grid="$q.screen.gt.xs ? false : true"
>
<template #columns="props">
<q-tr :props="props">
<q-td key="no" :props="props">
<q-tr :props="props" class=" cursor-pointer">
<q-td key="no" :props="props" @click="view(props.row.type)">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="type" :props="props">
<q-td key="type" :props="props" @click="view(props.row.type)">
{{ props.row.type }}
</q-td>
<q-td key="date" :props="props">
<q-td key="date" :props="props" @click="view(props.row.type)">
{{ props.row.date }}
</q-td>
<q-td key="status" :props="props">
<div class="col-12 row items-center">
<q-icon v-if="props.row.status == 'อนุมัติ'" size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" />
<q-icon v-else-if="props.row.status == 'ไม่อนุมัติ'" size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
<q-icon v-else-if="props.row.status == 'อยู่ระหว่างดำเนินการ'" size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
<q-icon v-else-if="props.row.status == 'ใหม่'" size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
<span class="q-pr-md">{{ props.row.status }}</span>
<div @click="view(props.row.type)">
<q-icon v-if="props.row.status == 'อนุมัติ'" size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" />
<q-icon v-else-if="props.row.status == 'ไม่อนุมัติ'" size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
<q-icon v-else-if="props.row.status == 'อยู่ระหว่างดำเนินการ'" size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
<q-icon v-else-if="props.row.status == 'ใหม่'" size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
<span class="q-pr-md">{{ props.row.status }}</span>
</div>
<q-space/>
<q-btn v-if="props.row.status == 'ใหม่'" label="ขอยกเลิก" size="13px" class="q-px-sm" outline dense color="orange" />
<q-btn v-if="props.row.status == 'ใหม่'" label="ขอยกเลิก" @click="cancel(props.row.type)" size="13px" class="q-px-sm" outline dense color="orange" />
</div>
</q-td>
</q-tr>
</template>
</Table>
<!-- 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>
<script setup lang="ts">
import type { QTableProps } from "quasar";
@ -94,4 +160,28 @@ const rows = ref<any>([
const initialPagination = ref({
rowsPerPage: 0,
})
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 cancel = async (text: string) => {
title.value = text;
modalCancel.value = true;
modeCancel.value = true;
};
const view = async (text: string) => {
title.value = text;
modalCancel.value = true;
modeCancel.value = false;
};
</script>