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

src/modules/01_dashboard/views/Dashboard.vue

@@ -182,36 +182,37 @@ const transferToPage = (path?: string) => {
             flat
           />
         </div>
-        <q-list
+        <q-scroll-area style="height: 64vh" v-if="inboxList.length > 1">
-          v-for="(contact, index) in inboxList"
+          <q-list
-          :key="index"
+            v-for="(contact, index) in inboxList"
-          class="q-px-md"
+            :key="index"
-          style="max-height: 74vh;"
+            class="q-px-md"
-        >
-          <q-item
-            clickable
-            v-ripple
-            class="q-py-md q-mb-sm my-menu"
-            :active="link === contact.no"
-            @click="link = contact.no"
-            active-class="my-menu-link"
           >
-            <q-item-section>
+            <q-item
-              <q-item-label>{{ contact.sender }}</q-item-label>
+              clickable
-              <q-item-label caption class="text-grey-6" lines="2">{{
+              v-ripple
-                contact.subject
+              class="q-py-md q-mb-sm my-menu"
-              }}</q-item-label>
+              :active="link === contact.no"
-            </q-item-section>
+              @click="link = contact.no"
+              active-class="my-menu-link"
+            >
+              <q-item-section>
+                <q-item-label>{{ contact.sender }}</q-item-label>
+                <q-item-label caption class="text-grey-6" lines="2">{{
+                  contact.subject
+                }}</q-item-label>
+              </q-item-section>
 
-            <q-item-section side top>
+              <q-item-section side top>
-              <q-item-label caption>{{ contact.timereceive }}</q-item-label>
+                <q-item-label caption>{{ contact.timereceive }}</q-item-label>
-            </q-item-section>
+              </q-item-section>
-          </q-item>
+            </q-item>
-        </q-list>
+          </q-list>
+        </q-scroll-area>
         <q-banner
           rounded
           class="bg-amber-1 text-center q-mx-sm"
-          v-if="inboxList.length < 1"
+          v-else
         >
           <div class="text-yellow-10">
             <q-icon

src/modules/05_leave/componenst/Calendar.vue

@@ -8,8 +8,11 @@
             :options="calendarOptions"
           >
             <template v-slot:eventContent="arg">
-              <b>{{ arg.timeText }}</b>
+              <div class="row col-12 items-center no-wrap" :style="`background: + ${arg.event.color}`">
-              <i>{{ arg.event.title }}</i>
+                <!-- <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";
+const modalCancel = ref(false);
-export default {
+const title = ref('');
-  components: {
+const location = ref('บ้าน');
-    FullCalendar, // make the <FullCalendar> tag available
+const subject = ref('ลาป่วย');
-    calendar() {
+const dateStart = ref('20 ส.ค. 2566');
-      return (
+const dateEnd= ref('21 ส.ค. 2566');
-        this.$refs.fullCalendar as InstanceType<typeof FullCalendar>
+const numDate= ref('20');
-      ).getApi();
+const place = ref('บ้าน');
-    },
+const phone = ref('000-00000000');
-  },
+const reason = ref('ยกเลิกการลา');
-  setup() {
+const model = ref(null);
-    const name = ref<string>("");
+const modeCancel = ref(true);
-    const date = ref<Date>(new Date());
+
-    const fullCalendar = ref<InstanceType<typeof FullCalendar>>();  
+const cancel = async (text: string) => {
-    const calendarOptions = ref({
+  title.value = text;
-      plugins: [
+  modalCancel.value = true;
-        dayGridPlugin,
+  modeCancel.value = true;
-        timeGridPlugin,
+};
-        interactionPlugin, // needed for dateClick
+const view = async (text: string) => {
-        listPlugin,
+  title.value = text;
-      ],
+  modalCancel.value = true;
-      buttonText: {
+  modeCancel.value = false;
-        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
-    };
-  },
 };
 </script>
 
@@ -261,4 +331,8 @@ export default {
 .fc-theme-standard td, .fc-theme-standard th{
   border: 1px solid #EBE9F1;
 }
+
+.textHover:hover{
+  color: #18a259;
+}
 </style>

src/modules/05_leave/componenst/ListCalendar.vue

@@ -12,33 +12,99 @@
         :grid="$q.screen.gt.xs ? false : true"
         >
         <template #columns="props">
-            <q-tr :props="props">
+            <q-tr :props="props" class=" cursor-pointer">
-                <q-td key="no" :props="props">
+                <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" />
+                        <div @click="view(props.row.type)">
-                        <q-icon v-else-if="props.row.status == 'ไม่อนุมัติ'" size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
+                            <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="light-blue-14" 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="orange" 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" />
-                        <span class="q-pr-md">{{ props.row.status }}</span> 
+                            <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>

src/modules/05_leave/views/Main.vue

@@ -144,7 +144,7 @@
                             <q-card class="row col-12 items-center q-px-md q-py-sm">
                                 <div class="text-weight-bold">สถิติการลา</div>
                                 <q-space/>
-                                <q-btn dense flat class="text-blue" icon="mdi-chart-line-variant" label="ตารางสถิติการลา" />
+                                <q-btn dense flat class="text-blue" icon="mdi-chart-line-variant" @click="data = true" label="ตารางสถิติการลา" />
                             </q-card>
                             <div bordered class="col-12 row justify-center q-px-md q-pb-md" v-for="(item,index) in itemPie" :key="index">
                                 <q-card bordered flat class="col-12 row q-pt-md justify-center shadow-0">
@@ -187,6 +187,36 @@
             </div>
         </div>
     </div>
+    <!-- modal ตารางสถิติการลา -->
+    <q-dialog v-model="data" persistent>
+        <q-card style="min-width: 85%;">
+            <q-card-section class="row items-center q-pa-sm">
+                <div class="text-bold q-pl-sm">ตารางสถิติการลา</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-table
+                    flat bordered
+                    dense
+                    :rows="rows"
+                    :columns="columns"
+                    row-key="name"
+                    class="col-12"
+                    hide-bottom
+                    v-model:pagination="pagination"
+                />
+            </q-card-section>
+        </q-card>
+    </q-dialog>
 </template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
@@ -221,6 +251,106 @@ const itemPie =  ref([
     {text: 'ลากิจส่วนตัว', color: 'text-deep-purple', value: 80, all: '12', use: '9', remain: '3'},
     {text: 'ลาพักผ่อน', color: 'text-indigo', value: 78, all: '20', use: '17', remain: '3'}
 ])
+
+const data = ref(false);
+const columns = ref<QTableProps["columns"]>([
+	{
+		name: "no",
+		align: "left",
+		label: "ลำดับ",
+		sortable: true,
+		field: "no",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:5%;",
+	},
+    {
+		name: "type",
+		align: "left",
+		label: "ประเภทการลา",
+		sortable: true,
+		field: "type",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "numDate",
+		align: "left",
+		label: "โควตาวันลา",
+		sortable: true,
+		field: "numDate",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+    {
+		name: "extend",
+		align: "left",
+		label: "ทดวันลา",
+		sortable: true,
+		field: "extend",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+    {
+		name: "use",
+		align: "left",
+		label: "ใช้ไป (%)",
+		sortable: true,
+		field: "use",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+    {
+		name: "numAll",
+		align: "left",
+		label: "จำนวนยื่นขอลา (วัน)",
+		sortable: true,
+		field: "numAll",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+    {
+		name: "numDone",
+		align: "left",
+		label: "จำนวนที่อนุมัติ (วัน)",
+		sortable: true,
+		field: "numDone",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+    {
+		name: "numNot",
+		align: "left",
+		label: "จำนวนที่ไม่อนุมัติ (วัน)",
+		sortable: true,
+		field: "numNot",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+    {
+		name: "numCancel",
+		align: "left",
+		label: "จำนวนที่ยกเลิก (วัน)",
+		sortable: true,
+		field: "numCancel",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+])
+const rows = ref<any>([
+    {no:'1',type: 'ลาป่วย' },
+    {no:'2',type: 'ลากิจส่วนตัว' },
+    {no:'3',type: 'ลาคลอดบุตร' },
+    {no:'4',type: 'ลาช่วยเหลือภริยาที่คลอดบุตร' },
+    {no:'5',type: 'ลาพักผ่อน' },
+    {no:'6',type: 'ลาอุปสมบทหรือการลาประกอบพิธีฮัจย์ฯ' },
+    {no:'7',type: 'ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล' },
+    {no:'8',type: 'ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน' },
+    {no:'9',type: 'ลาไปปฏิบัติงานในองค์การระหว่างประเทศ' },
+    {no:'10',type: 'ลาติดตามคู่สมรส' },
+    {no:'11',type: 'ลาฟื้นฟูสมรรถภาพด้านอาชีพ' }
+])
+const pagination = ref({rowsPerPage: 11})
+
 </script>
 <style>
 .borderTop{