calandar ui

src/components/Dialogs/AddPersonal.vue

@@ -302,4 +302,3 @@ watch(()=>props.selectedData,()=>{
     </q-card>
   </q-dialog>
 </template>
-@/modules/11_discipline/store/store

src/modules/11_discipline/!store.ts

@@ -0,0 +1,301 @@
+import { defineStore } from "pinia";
+import type { QTableProps } from "quasar";
+import { ref } from "vue";
+import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
+import type { ArrayPerson, ArrayPersonAdd } from "@/modules/11_discipline/interface/response/investigate";
+
+export const useDisciplineMainStore = defineStore("disciplineMainStore", () => {
+  /** option ผู้ถูกสอบสวน*/
+  const complainantoptionsMain = ref<DataOption[]>([
+    { id: "PERSON", name: "บุคคล" },
+    { id: "ORGANIZATION", name: "หน่วยงาน" },
+    { id: "BANGKOK", name: "กรุงเทพมหานคร" },
+  ]);
+
+  function convertComplaintType(val: string) {
+    const result = complainantoptionsMain.value.find(
+      (x: any) => x.id == val
+    )?.name;
+    return result ? result : "-";
+  }
+
+  /** function ลักษณะความผิด*/
+  function convertFault(val: string) {
+    switch (val) {
+      case "NOT_SPECIFIED":
+        return "ความผิดวินัยยังไม่ระบุ";
+      case "NOT_DEADLY":
+        return "ความผิดวินัยไม่ร้ายแรง";
+      case "DEADLY":
+        return "ความผิดวินัยร้ายแรง";
+      default:
+        return "-";
+    }
+  }
+
+  /** function สถานะ*/
+  function convertStatus(val: string) {
+    switch (val) {
+      case "NEW":
+        return "กำลังสอบสวน";
+      case "STOP":
+        return "ยุติเรื่อง";
+      case "SEND_DISCIPLINARY":
+        return "ส่งไปสอบสวน";
+      case "DONE":
+        return "ส่งไปสรุปผลการพิจารณาทางวินัย";
+    }
+  }
+
+  /** option ลักษณะความผิด */
+  const offenseDetailstOptions = ref<DataOption[]>([
+    { id: "NOT_SPECIFIED", name: "ยังไม่ระบุ" },
+    { id: "NOT_DEADLY", name: "ไม่ร้ายแรง" },
+    { id: "DEADLY", name: "ร้ายแรง" },
+  ]);
+
+  function convertOffenseDetailst(val: string) {
+    return (
+      offenseDetailstOptions.value.find((x: any) => x.id == val)?.name ?? "-"
+    );
+  }
+
+  const statusResultOptions = ref<DataOption[]>([
+    { id: "NOT_SPECIFIED", name: "ยังไม่ระบุ" },
+    { id: "HAVE_CAUSE", name: "มีมูล" },
+    { id: "NO_CAUSE", name: "ไม่มีมูล" },
+  ]);
+  function convertStatusResult(val: string) {
+    const result = statusResultOptions.value.find(
+      (x: any) => x.id == val
+    )?.name;
+    return result ? result : "-";
+  }
+
+  const causeTextOptions = ref<DataOption[]>([
+    { id: "ร้ายแรง", name: "ร้ายแรง" },
+    { id: "ไม่ร้ายแรง", name: "ไม่ร้ายแรง" },
+  ]);
+
+  /** หัวตารางผู้ถูกร้องเรียน */
+  const columnsRespondent = ref<QTableProps["columns"]>([
+    {
+      name: "info",
+      align: "left",
+      label: "",
+      sortable: false,
+      field: "info",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "no",
+      align: "left",
+      label: "ลำดับ",
+      sortable: false,
+      field: "no",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "idcard",
+      align: "left",
+      label: "เลขบัตรประชาชน",
+      sortable: true,
+      field: "idcard",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "name",
+      align: "left",
+      label: "ชื่อ - นามสกุล",
+      sortable: true,
+      field: "name",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "posNo",
+      align: "left",
+      label: "ตำแหน่งเลขที่",
+      sortable: true,
+      field: "posNo",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "position",
+      align: "left",
+      label: "ตำแหน่ง",
+      sortable: true,
+      field: "position",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "positionLevel",
+      align: "left",
+      label: "ระดับ",
+      sortable: true,
+      field: "positionLevel",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "salary",
+      align: "left",
+      label: "เงินเดือน",
+      sortable: true,
+      field: "salary",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "organization",
+      align: "left",
+      label: "หน่วยงาน",
+      sortable: true,
+      field: "organization",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+  ]);
+
+  /** หัวข้อที่เเสดงในตารางผู้ถูกร้องเรียน */
+  const visibleColumnsRespondent = ref<string[]>([
+    "info",
+    "no",
+    "idcard",
+    "name",
+    "posNo",
+    "position",
+    "positionLevel",
+    "salary",
+    "organization",
+  ]);
+
+  /** หัวตารางกรรมการ */
+  const columnsDirector = ref<QTableProps["columns"]>([
+    {
+      name: "info",
+      align: "left",
+      label: "",
+      sortable: false,
+      field: "info",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "no",
+      align: "left",
+      label: "ลำดับ",
+      sortable: false,
+      field: "no",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "idcard",
+      align: "left",
+      label: "เลขบัตรประชาชน",
+      sortable: true,
+      field: "idcard",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "name",
+      align: "left",
+      label: "ชื่อ - นามสกุล",
+      sortable: true,
+      field: "name",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "posNo",
+      align: "left",
+      label: "ตำแหน่งเลขที่",
+      sortable: true,
+      field: "posNo",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "position",
+      align: "left",
+      label: "ตำแหน่ง",
+      sortable: true,
+      field: "position",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "positionLevel",
+      align: "left",
+      label: "ระดับ",
+      sortable: true,
+      field: "positionLevel",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "salary",
+      align: "left",
+      label: "เงินเดือน",
+      sortable: true,
+      field: "salary",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "organization",
+      align: "left",
+      label: "หน่วยงาน",
+      sortable: true,
+      field: "organization",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+  ]);
+
+  /** หัวข้อที่เเสดงในตารางกรรมการ */
+  const visibleColumnsDirector = ref<string[]>([
+    "info",
+    "no",
+    "idcard",
+    "name",
+    "posNo",
+    "position",
+    "positionLevel",
+    "salary",
+    "organization",
+  ]);
+
+  const rowsAdd = ref<ArrayPerson[]>([]);
+  function fetchData(data: ArrayPerson[]) {
+    rowsAdd.value = data;
+  }
+
+
+  return {
+    complainantoptionsMain,
+    convertFault,
+    convertStatus,
+    columnsRespondent,
+    visibleColumnsRespondent,
+    offenseDetailstOptions,
+    convertOffenseDetailst,
+    convertComplaintType,
+
+    columnsDirector,
+    visibleColumnsDirector,
+    rowsAdd,
+    fetchData,
+    statusResultOptions,
+    convertStatusResult,
+
+    causeTextOptions
+  };
+});

src/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref, defineProps } from "vue";
+import Calendar from "@/modules/11_discipline/components/2_InvestigateFacts/Calendar.vue";
+
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    default: false,
+  },
+  close: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
+<template>
+    <q-dialog v-model="props.modal" persistent>
+      <q-card style="min-width: 60vw">
+        <q-toolbar>
+          <q-toolbar-title class="text-subtitle2 text-bold">ปฎิทิน</q-toolbar-title>
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            @click="props.close"
+            style="color: #ff8080; background-color: #ffdede"
+          />
+        </q-toolbar>
+        <q-separator />
+        <q-card-section class="q-pa-md bg-grey-1">
+         <Calendar/>
+        </q-card-section>
+        <!-- <q-separator /> -->
+  
+        <!-- <div class="row justify-end q-px-md q-py-sm items-center">
+          <q-btn
+            dense
+            color="public"
+            id="onSubmit"
+            class="q-px-md q-py-xs"
+            @click="savePost"
+          >
+
+            <div>{{ props.btnTitle }}</div>
+
+            <q-tooltip>{{ props.btnTitle }}</q-tooltip>
+          </q-btn>
+        </div> -->
+      </q-card>
+    </q-dialog>
+  </template>

src/modules/11_discipline/components/2_InvestigateFacts/Calendar.vue

@@ -0,0 +1,564 @@
+<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-ma-sm">
+    <div class="row q-gutter-sm">
+      <div class="col-12">
+        <div class="row q-gutter-sm q-pb-sm main-content">
+          <div class="demo-app-main">
+            <div class="row col-12 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 q-pb-lg">
+              <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>

src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue

@@ -7,7 +7,7 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
-
+import CalandarDialog from "@/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue";
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
 const dataInvestigate = useInvestigateFactStore();
 const mixin = useCounterMixin();
@@ -29,7 +29,8 @@ const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
 const rowsPerPage = ref<number>(10);
-
+const calendarModal = ref<boolean>(false);
+const calendarModalclose = () =>(calendarModal.value = !calendarModal.value)
 /**
  *pagination ของตาราง
  */
@@ -94,6 +95,10 @@ async function editPage(id: string) {
   router.push(`/discipline/investigatefacts/${id}`);
 }
 
+function calendarOpen() {
+  calendarModal.value = true;
+}
+
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -108,18 +113,20 @@ onMounted(async () => {
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
       <div>
-        <!-- <q-btn
+        <q-btn
-          for="#addInvestigatefacts"
+          name="calendar"
-          @click="clickAdd()"
+          round
           size="12px"
           flat
-          round
+          icon="mdi-calendar-month"
-          color="add"
+          class="q-mr-sm"
-          icon="mdi-plus"
+          color="primary"
+          @click="calendarOpen"
         >
-          <q-tooltip>เพิ่มรายการสืบสวนข้อเท็จจริง</q-tooltip>
+          <q-tooltip>ปฏิทิน</q-tooltip>
-        </q-btn> -->
+        </q-btn>
       </div>
+
       <q-space />
 
       <q-input
@@ -230,4 +237,9 @@ onMounted(async () => {
       </d-table>
     </div>
   </q-card>
+
+  <CalandarDialog 
+  :modal="calendarModal"
+  :close="calendarModalclose"
+  />
 </template>

src/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref, defineProps } from "vue";
+import Calendar from "@/modules/11_discipline/components/2_InvestigateFacts/Calendar.vue";
+
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    default: false,
+  },
+  close: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
+<template>
+    <q-dialog v-model="props.modal" persistent>
+      <q-card style="min-width: 60vw">
+        <q-toolbar>
+          <q-toolbar-title class="text-subtitle2 text-bold">ปฎิทิน</q-toolbar-title>
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            @click="props.close"
+            style="color: #ff8080; background-color: #ffdede"
+          />
+        </q-toolbar>
+        <q-separator />
+        <q-card-section class="q-pa-md bg-grey-1">
+         <Calendar/>
+        </q-card-section>
+        <!-- <q-separator /> -->
+  
+        <!-- <div class="row justify-end q-px-md q-py-sm items-center">
+          <q-btn
+            dense
+            color="public"
+            id="onSubmit"
+            class="q-px-md q-py-xs"
+            @click="savePost"
+          >
+
+            <div>{{ props.btnTitle }}</div>
+
+            <q-tooltip>{{ props.btnTitle }}</q-tooltip>
+          </q-btn>
+        </div> -->
+      </q-card>
+    </q-dialog>
+  </template>

src/modules/11_discipline/components/3_InvestigateDisciplinary/Calendar.vue

@@ -0,0 +1,564 @@
+<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-ma-sm">
+    <div class="row q-gutter-sm">
+      <div class="col-12">
+        <div class="row q-gutter-sm q-pb-sm main-content">
+          <div class="demo-app-main">
+            <div class="row col-12 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 q-pb-lg">
+              <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>

src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
 import type { Pagination } from "@/modules/04_registry/interface/index/Main";
+import CalandarDialog from "@/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue";
 
+const calendarModal = ref<boolean>(false);
+const calendarModalclose = () =>(calendarModal.value = !calendarModal.value)
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
 const attrs = ref<any>(useAttrs());
@@ -43,6 +46,10 @@ const emit = defineEmits([
   "update:editvisible",
 ]);
 
+function calendarOpen() {
+  calendarModal.value = true;
+}
+
 function paginationLabel(start: string, end: string, total: string) {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
@@ -65,18 +72,20 @@ function resetFilter() {
 
 <template>
   <div class="q-pb-sm row q-col-gutter-sm">
-    <div class="q-gutter-sm" v-if="nornmalData == true">
+    <div>
-      <!-- <q-btn
+        <q-btn
-        to="/discipline/investigate-disciplinary/add"
+          name="calendar"
-        size="12px"
+          round
-        flat
+          size="12px"
-        round
+          flat
-        color="add"
+          icon="mdi-calendar-month"
-        icon="mdi-plus"
+          class="q-mr-sm"
-      >
+          color="primary"
-        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+          @click="calendarOpen"
-      </q-btn> -->
+        >
-    </div>
+          <q-tooltip>ปฏิทิน</q-tooltip>
+        </q-btn>
+      </div>
     <q-space />
     <!-- ค้นหาข้อความใน table -->
     <q-input
@@ -139,6 +148,10 @@ function resetFilter() {
       <slot v-bind="props" name="columns"></slot>
     </template>
   </d-table>
+  <CalandarDialog 
+  :modal="calendarModal"
+  :close="calendarModalclose"
+  />
 </template>
 
 <style lang="scss">