จัดโค้ด

src/modules/11_discipline/components/1_Complaint/EditPage.vue

@@ -5,6 +5,7 @@ import PopupSendToNext from "@/modules/11_discipline/components/PopupSendToNext.
 import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
+
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -17,17 +18,16 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
 
-const complainstStore = useComplainstDataStore();
 const mainStore = useDisciplineMainStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
+
 const {
   dialogConfirm,
   showLoader,
   hideLoader,
   success,
-  messageError,
+  messageError
-  dialogMessageNotify,
 } = mixin;
 const router = useRouter();
 const route = useRoute();
@@ -164,6 +164,7 @@ const visibleColumns = ref<string[]>([
   "organization",
 ]);
 
+/** ดึงข้อมูล */
 async function getData() {
   showLoader();
   await http
@@ -195,6 +196,7 @@ async function getData() {
       hideLoader();
     });
 }
+
 /** ฟังชั่น แก้ไข */
 async function onSubmit(data: any) {
   showLoader();
@@ -210,7 +212,6 @@ async function onSubmit(data: any) {
       getData();
       hideLoader();
     });
-  // router.push(`/discipline/complaints`);
 }
 
 /** ยืนยัน มีมูลส่งไปสืบสวน */
@@ -227,6 +228,7 @@ function sentInvestigate() {
   }
 }
 
+/** ส่งไปสืบสวน */
 function sentConfirmNoPerson() {
   showLoader();
   http
@@ -244,6 +246,7 @@ function sentConfirmNoPerson() {
     });
 }
 
+/** ปิด dialog */
 function closePopup() {
   modalPopup.value = false;
 }
@@ -379,4 +382,4 @@ onMounted(() => {
     />
   </div>
 </template>
-@/modules/11_discipline/store/store
+@/modules/11_discipline/store/store

src/modules/11_discipline/components/1_Complaint/Form.vue

@@ -1,23 +1,21 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch, watchEffect } from "vue";
 import { useQuasar } from "quasar";
+
 /** import Type */
 import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
-import type {
+import type { FormData, MyObjectComplaintsRef, ArrayFileList } from "@/modules/11_discipline/interface/request/complaint";
-  FormData,
-  MyObjectComplaintsRef,
-  ArrayFileList,
-} from "@/modules/11_discipline/interface/request/complaint";
 
 /** importStroe*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
 
-import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
+import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
+
 const $q = useQuasar();
 const fileDocDataUpload = ref<File[]>([]);
 
@@ -54,8 +52,8 @@ const resultRef = ref<Object | null>(null);
 
 const isSave = ref<boolean>(false); // มีการแก้ไขรอบันทึก
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-
 const fileList = ref<ArrayFileList[]>([]);
+
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   data: {
@@ -340,7 +338,10 @@ function changeFormData() {
   isSave.value = props.data != null ?? true;
 }
 
-function inputEdit(val:boolean){
+/** เปลี่ยนสี เมื่อ readonly
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
   return {
     "full-width cursor-pointer ": val,
     "full-width cursor-pointer inputgreen": !val,
@@ -375,7 +376,7 @@ onMounted(() => {
               <div class="col-xs-12 col-sm-12 row q-col-gutter-md">
                 <div class="col-xs-12 col-sm-4" id="respondentType">
                   <q-select
-                  :class="inputEdit(isReadonly)"
+                    :class="inputEdit(isReadonly)"
                     for="SelectrespondentType"
                     v-model="formData.respondentType"
                     ref="respondentTypeRef"
@@ -413,7 +414,7 @@ onMounted(() => {
                   id="organizationId"
                 >
                   <q-select
-                  :class="inputEdit(isReadonly)"
+                    :class="inputEdit(isReadonly)"
                     for="inputOffice"
                     name="organizationId"
                     ref="organizationIdRef"
@@ -436,7 +437,7 @@ onMounted(() => {
 
                 <div class="col-xs-12 col-sm-4" id="consideredAgency">
                   <q-select
-                  :class="inputEdit(isReadonly)"
+                    :class="inputEdit(isReadonly)"
                     ref="consideredAgencyRef"
                     for="selectAgency"
                     dense
@@ -467,6 +468,7 @@ onMounted(() => {
                     </template>
                   </q-select>
                 </div>
+
                 <div
                   class="row col-12"
                   v-if="formData.respondentType === 'PERSON'"
@@ -495,6 +497,7 @@ onMounted(() => {
                       </q-btn>
                     </div>
                     <div class="col-12"><q-separator /></div>
+
                     <div class="col-xs-12 q-pa-sm">
                       <d-table
                         ref="table"
@@ -574,6 +577,7 @@ onMounted(() => {
                     </div>
                   </q-card>
                 </div>
+
                 <div class="col-xs-12 col-sm-12" id="title">
                   <q-input
                     for="inputTopicComplaint"
@@ -595,7 +599,7 @@ onMounted(() => {
 
                 <div class="col-xs-12 col-sm-12" id="description">
                   <q-input
-                  :class="inputEdit(isReadonly)"
+                    :class="inputEdit(isReadonly)"
                     for="inputDetail"
                     ref="descriptionRef"
                     dense
@@ -665,7 +669,7 @@ onMounted(() => {
 
                 <div class="col-xs-12 col-sm-3" id="levelConsideration">
                   <q-select
-                  :class="inputEdit(isReadonly)"
+                    :class="inputEdit(isReadonly)"
                     for="selectConsiderationLevel"
                     ref="levelConsiderationRef"
                     dense
@@ -743,7 +747,7 @@ onMounted(() => {
 
                 <div class="col-xs-12 col-sm-3" id="offenseDetails">
                   <q-select
-                  :class="inputEdit(isReadonly)"
+                    :class="inputEdit(isReadonly)"
                     for="selectOffenseDescription"
                     ref="offenseDetailsRef"
                     dense
@@ -817,7 +821,7 @@ onMounted(() => {
 
                 <div class="col-xs-12 col-sm-3" id="complaintFrom">
                   <q-select
-                  :class="inputEdit(isReadonly)"
+                    :class="inputEdit(isReadonly)"
                     for="selectReceivecomplaints"
                     ref="complaintFromRef"
                     dense
@@ -841,7 +845,7 @@ onMounted(() => {
 
                 <div class="col-xs-12 col-sm-12" id="appellant">
                   <q-input
-                  :class="inputEdit(isReadonly)"
+                    :class="inputEdit(isReadonly)"
                     for="inputPetitioner"
                     ref="appellantRef"
                     dense
@@ -859,7 +863,7 @@ onMounted(() => {
                 </div>
                 <div class="col-xs-12 col-sm-12">
                   <q-input
-                  :class="inputEdit(isReadonly)"
+                    :class="inputEdit(isReadonly)"
                     :readonly="isReadonly"
                     for="result"
                     ref="resultRef"
@@ -896,6 +900,7 @@ onMounted(() => {
         </div>
       </form>
     </div>
+    
     <!-- อัพโหลดไฟล์ -->
     <div class="col-sm-12 col-md-3">
       <q-card flat class="q-pa-md" bordered>

src/modules/11_discipline/components/1_Complaint/MainPage.vue

@@ -2,11 +2,14 @@
 import { ref, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
+
 // importStroe
+import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
+
 // impoet Components
 import TableComplaint from "@/modules/11_discipline/components/1_Complaint/TableComplaint.vue";
+
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -89,7 +92,6 @@ onMounted(async () => {
           ><q-tooltip>เพิ่มเรื่องร้องเรียน </q-tooltip></q-btn
         >
       </div>
-
       <q-space />
 
       <q-input

src/modules/11_discipline/components/1_Complaint/TableComplaint.vue

@@ -120,12 +120,6 @@ const visibleColumns = ref<string[]>([
   "status",
 ]);
 
-/** เริ่มโหลดหน้า page เอาข้อมูลไปเก็บ ใน store*/
-onMounted(() => {
-  complainstStore.columns = columns.value;
-  complainstStore.visibleColumns = visibleColumns.value;
-});
-
 /** แสดงจำนวนในตาราง */
 const pagination = ref({
   descending: true,
@@ -141,7 +135,7 @@ function OpenEdit(id: string) {
   router.push(`/discipline/complaints/${id}`);
 }
 
-const updateProp = (newPagination: any, page: number) => {
+function updateProp(newPagination: any, page: number){
   // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
   emit("update:pagination", newPagination, page);
 };
@@ -160,6 +154,12 @@ watch(
     updateProp(pagination.value.rowsPerPage, currentPage.value);
   }
 );
+
+/** เริ่มโหลดหน้า page เอาข้อมูลไปเก็บ ใน store*/
+onMounted(() => {
+  complainstStore.columns = columns.value;
+  complainstStore.visibleColumns = visibleColumns.value;
+});
 </script>
 
 <template>

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

@@ -23,6 +23,11 @@ const { monthYear2Thai, showLoader, hideLoader, messageError, dateToISO } =
 
 const $q = useQuasar();
 
+const title = ref("");
+const fullCalendar = ref<any>(); //ref calendar
+const modalCancel = ref(false);
+const modeCancel = ref(true);
+
 const props = defineProps({
   lists: {
     type: Array as PropType<ExtendHistoryObject[]>,
@@ -38,7 +43,6 @@ const props = defineProps({
   },
 });
 
-const fullCalendar = ref<any>(); //ref calendar
 const calendarOptions = ref<CalendarOptions>({
   plugins: [
     dayGridPlugin,
@@ -99,7 +103,7 @@ async function fetchCalendar() {
       id: index.toString(),
       title: e.name,
       start: e.dateStart,
-      end: moment(e.dateEnd).format("YYYY-MM-DD")+ " 23:59:59",
+      end: moment(e.dateEnd).format("YYYY-MM-DD") + " 23:59:59",
       allDay: false,
       color:
         props.lists.length > 1 && index > 0
@@ -119,45 +123,6 @@ async function fetchCalendar() {
   }, 1000);
 }
 
-// async function fetchCalendar() {
-//   showLoader();
-//   await http
-//     .post(config.API.investigateCalendar(), {
-//       year: dateMonth.value.year,
-//       month: dateMonth.value.month,
-//     })
-//     .then((res) => {
-//       const data = res.data.result;
-//       const defaultColor = "#02A998";
-//       const gradientColors = generateGradientColors(data.length);
-
-//       const events = data.map((e: CaledarInvestigatefacts, index: number) => ({
-//         id: e.id,
-//         title: e.title,
-//         start: e.investigationDateStart,
-//         end: e.investigationDateEnd,
-//         allDay: true,
-//         color:
-//           data.length > 1 && index > 0 ? gradientColors[index] : defaultColor,
-//       }));
-
-//       calendarOptions.value.events = events;
-//     })
-//     .catch((err) => {
-//       messageError($q, err);
-//     })
-//     .finally(() => {
-//       setTimeout(() => {
-//         if (fullCalendar !== undefined) {
-//           const calen = fullCalendar.value.getApi();
-//           const date = new Date(dateMonth.value.year, dateMonth.value.month);
-//           calen.gotoDate(date);
-//         }
-//         hideLoader();
-//       }, 1000);
-//     });
-// }
-
 function generateGradientColors(length: number) {
   const colors = [];
   for (let i = 0; i < length; i++) {
@@ -185,20 +150,6 @@ async function view(text: string) {
   modeCancel.value = false;
 }
 
-watch(
-  () => props.modal,
-  async () => {
-    props.modal && (await fetchCalendar());
-  }
-);
-
-/**
- * ตัวแปรทั้งหมด
- */
-const modalCancel = ref(false);
-const title = ref("");
-const modeCancel = ref(true);
-
 function gotoPrevMonth() {
   const calen = fullCalendar.value.getApi();
   calen.prev();
@@ -218,6 +169,13 @@ function updateDateMonth(date: Date) {
   dateMonth.value.month = date.getMonth();
   fetchCalendar();
 }
+
+watch(
+  () => props.modal,
+  async () => {
+    props.modal && (await fetchCalendar());
+  }
+);
 </script>
 
 <template>
@@ -245,40 +203,6 @@ function updateDateMonth(date: Date) {
             <div class="col-12">
               <div class="row q-gutter-sm q-pb-sm main-content">
                 <div class="demo-app-main q-mb-xl">
-                  <!-- <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="changCalendar"
-                      >
-                        <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> -->
                   <div class="row q-mb-sm justify-between">
                     <q-btn
                       size="12px"
@@ -316,22 +240,12 @@ function updateDateMonth(date: Date) {
                         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>
@@ -359,12 +273,9 @@ function updateDateMonth(date: Date) {
 
 .demo-app-main {
   flex-grow: 1;
-
-  /* padding: 3em; */
 }
 
 .fc {
-  /* the calendar root */
   max-width: 1100px;
   margin: 0 auto;
   background-color: white;
@@ -379,13 +290,6 @@ function updateDateMonth(date: Date) {
   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 {

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

@@ -198,6 +198,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
                 </datepicker>
               </div>
             </div>
+
             <FullCalendar
               ref="fullCalendar"
               class="demo-app-calendar"
@@ -208,41 +209,14 @@ const monthYearThai = (val: DataDateMonthObject) => {
                   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"
@@ -252,15 +226,6 @@ const monthYearThai = (val: DataDateMonthObject) => {
                 />
                 <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>
@@ -287,6 +252,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
         />
       </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">
@@ -306,6 +272,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
             <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"
@@ -329,6 +296,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
         </div>
       </q-card-section>
       <q-separator />
+
       <q-card-section
         class="row items-center q-pa-sm"
         v-if="modeCancel == true"
@@ -381,13 +349,6 @@ const monthYearThai = (val: DataDateMonthObject) => {
   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 {

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

@@ -27,6 +27,7 @@ const { dialogConfirm, showLoader, success, hideLoader, messageError } = mixin;
 const route = useRoute();
 const router = useRouter();
 const id = ref<string>(route.params.id as string);
+const modalPopup = ref<boolean>(false);
 
 /** ข้อมูล v-model ของฟอร์มสืบสวน */
 const data = reactive<FormData>({
@@ -161,7 +162,8 @@ function getData() {
       data.investigationStatusResult = dataList.investigationStatusResult;
       data.investigationExtendStatus = dataList.investigationExtendStatus;
       data.investigationDaysExtend = dataList.investigationDaysExtend;
-      data.investigationExtendHistory = dataList.investigationExtendHistory ?? [];
+      data.investigationExtendHistory =
+        dataList.investigationExtendHistory ?? [];
       // console.log(dataList);
     })
     .catch((e) => {
@@ -195,7 +197,6 @@ async function onSubmit(data: any) {
   // router.push(`/discipline/investigatefacts`);
 }
 
-const modalPopup = ref<boolean>(false);
 /** ยืนยัน ส่งไปสอบสวน */
 function sentInvestigate() {
   if (mainStore.rowsAdd.length > 0) {
@@ -341,6 +342,7 @@ watch(
       />
       <div class="q-ma-none">แก้ไขรายการสืบสวนข้อเท็จจริง</div>
       <q-space />
+
       <div class="q-gutter-x-sm">
         <q-btn
           v-if="data.status === 'NEW'"
@@ -362,6 +364,7 @@ watch(
         />
       </div>
     </div>
+    
     <q-card flat class="col-12">
       <q-tabs
         v-model="store.tabMenu"

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

@@ -487,7 +487,9 @@ function calendarOpen() {
   calendarModal.value = true;
 }
 
-
+/** เปลี่ยนสี เมื่อ readonly
+ * @param val true/false
+ */
 function inputEdit(val:boolean){
   return {
     "full-width cursor-pointer ": val,
@@ -495,6 +497,9 @@ function inputEdit(val:boolean){
   };
 }
 
+/** เปลี่ยนสี เมื่อ readonly
+ * @param val true/false
+ */
 function inputEditExtend(val: boolean) {
   if (formData.investigationExtendHistory.length > 0) {
     return {
@@ -516,6 +521,7 @@ onMounted(async () => {
 <template>
   <div class="row col-12 bg-white">
     <div class="col-sm-12 col-md-9">
+
       <div v-if="isSave" class="q-pa-sm q-gutter-sm">
         <q-banner
           inline-actions
@@ -526,11 +532,13 @@ onMounted(async () => {
           ยังไม่ได้บันทึกข้อมูล
         </q-banner>
       </div>
+
       <form @submit.prevent="validateForm">
         <div class="col-12">
           <q-card bordered>
             <div class="col-12 row q-pa-md q-col-gutter-md">
               <div class="col-xs-12 row q-col-gutter-md">
+
                 <div class="col-xs-12 col-sm-3" id="respondentType">
                   <q-select
                     :class="inputEdit(isReadonly)"
@@ -621,6 +629,7 @@ onMounted(async () => {
                     </div>
                     <div class="col-12"><q-separator /></div>
                     <div class="col-xs-12 q-pa-sm">
+                      
                       <d-table
                         ref="table"
                         :columns="mainStore.columnsRespondent"

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

@@ -22,7 +22,9 @@ const { monthYear2Thai, showLoader, hideLoader, messageError, dateToISO } =
   mixin;
 
 const $q = useQuasar();
-
+const modalCancel = ref(false);
+const title = ref("");
+const modeCancel = ref(true);
 const props = defineProps({
   lists: {
     type: Array as PropType<ExtendHistoryObject[]>,
@@ -99,7 +101,7 @@ async function fetchCalendar() {
       id: index.toString(),
       title: e.name,
       start: e.dateStart,
-      end: moment(e.dateEnd).format("YYYY-MM-DD")+ " 23:59:59",
+      end: moment(e.dateEnd).format("YYYY-MM-DD") + " 23:59:59",
       allDay: false,
       color:
         props.lists.length > 1 && index > 0
@@ -119,45 +121,6 @@ async function fetchCalendar() {
   }, 1000);
 }
 
-// async function fetchCalendar() {
-//   showLoader();
-//   await http
-//     .post(config.API.investigateCalendar(), {
-//       year: dateMonth.value.year,
-//       month: dateMonth.value.month,
-//     })
-//     .then((res) => {
-//       const data = res.data.result;
-//       const defaultColor = "#02A998";
-//       const gradientColors = generateGradientColors(data.length);
-
-//       const events = data.map((e: CaledarInvestigatefacts, index: number) => ({
-//         id: e.id,
-//         title: e.title,
-//         start: e.investigationDateStart,
-//         end: e.investigationDateEnd,
-//         allDay: true,
-//         color:
-//           data.length > 1 && index > 0 ? gradientColors[index] : defaultColor,
-//       }));
-
-//       calendarOptions.value.events = events;
-//     })
-//     .catch((err) => {
-//       messageError($q, err);
-//     })
-//     .finally(() => {
-//       setTimeout(() => {
-//         if (fullCalendar !== undefined) {
-//           const calen = fullCalendar.value.getApi();
-//           const date = new Date(dateMonth.value.year, dateMonth.value.month);
-//           calen.gotoDate(date);
-//         }
-//         hideLoader();
-//       }, 1000);
-//     });
-// }
-
 function generateGradientColors(length: number) {
   const colors = [];
   for (let i = 0; i < length; i++) {
@@ -185,20 +148,6 @@ async function view(text: string) {
   modeCancel.value = false;
 }
 
-watch(
-  () => props.modal,
-  async () => {
-    props.modal && (await fetchCalendar());
-  }
-);
-
-/**
- * ตัวแปรทั้งหมด
- */
-const modalCancel = ref(false);
-const title = ref("");
-const modeCancel = ref(true);
-
 function gotoPrevMonth() {
   const calen = fullCalendar.value.getApi();
   calen.prev();
@@ -216,6 +165,13 @@ function updateDateMonth(date: Date) {
   dateMonth.value.month = date.getMonth();
   fetchCalendar();
 }
+
+watch(
+  () => props.modal,
+  async () => {
+    props.modal && (await fetchCalendar());
+  }
+);
 </script>
 
 <template>
@@ -243,40 +199,6 @@ function updateDateMonth(date: Date) {
             <div class="col-12">
               <div class="row q-gutter-sm q-pb-sm main-content">
                 <div class="demo-app-main q-mb-xl">
-                  <!-- <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="changCalendar"
-                      >
-                        <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> -->
                   <div class="row q-mb-sm justify-between">
                     <q-btn
                       size="12px"
@@ -292,7 +214,6 @@ function updateDateMonth(date: Date) {
                     <p class="q-ma-none text-center">
                       {{ monthYearThai(dateMonth) }}
                     </p>
-
                     <q-btn
                       size="12px"
                       dense
@@ -304,6 +225,7 @@ function updateDateMonth(date: Date) {
                       <q-tooltip>เดือนถัดไป</q-tooltip>
                     </q-btn>
                   </div>
+
                   <FullCalendar
                     ref="fullCalendar"
                     class="demo-app-calendar"
@@ -333,6 +255,7 @@ function updateDateMonth(date: Date) {
                       </div>
                     </template>
                   </FullCalendar>
+                  
                 </div>
               </div>
             </div>
@@ -377,13 +300,6 @@ function updateDateMonth(date: Date) {
   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 {

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

@@ -279,6 +279,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
                 </datepicker>
               </div>
             </div>
+
             <FullCalendar
               ref="fullCalendar"
               class="demo-app-calendar"
@@ -305,25 +306,8 @@ const monthYearThai = (val: DataDateMonthObject) => {
                 </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"
@@ -333,15 +317,6 @@ const monthYearThai = (val: DataDateMonthObject) => {
                 />
                 <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>

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

@@ -2,12 +2,15 @@
 import { onMounted, reactive, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+
 /**import component*/
 import FormComplaints from "@/modules/11_discipline/components/1_Complaint/Form.vue"; //เรื่องร้องเรียน
 import FormInvestigatefacts from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue"; //สืบสวนข้อเท็จจริง
 import FormDisciplinary from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue"; // สอบสวนความผิดทางวินัย
+
 import type {
   PersonsArray,
   Persons,
@@ -17,10 +20,10 @@ import type {
   ArrayPerson,
   ArrayFileList,
 } from "@/modules/11_discipline/interface/request/complaint";
-import PopupSendToNext from "@/modules/11_discipline/components/PopupSendToNext.vue";
-
 import type { FormData as FormInvestigateFact } from "@/modules/11_discipline/interface/request/investigateFact";
 
+import PopupSendToNext from "@/modules/11_discipline/components/PopupSendToNext.vue";
+
 /**import store*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
@@ -42,6 +45,80 @@ const status = ref<string>("");
 
 const idInvestigate = ref<string>("");
 const idComplaint = ref<string>("");
+const respondentRows = ref<Persons[]>();
+const personObjComplaint = reactive<ArrayPerson>({
+  id: "",
+  personId: "",
+  idcard: "",
+  name: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  posNo: "",
+  position: "",
+  positionLevel: "",
+  salary: null,
+  organization: "",
+});
+
+const fileListObjComplaint = reactive<ArrayFileList>({
+  id: "",
+  pathName: "",
+  fileName: "",
+});
+
+const dataComplaints = reactive<FormDataComplaint>({
+  id: "",
+  respondentType: "",
+  organizationId: "",
+  consideredAgency: "",
+  title: "",
+  description: "",
+  dateReceived: null,
+  dateConsideration: null,
+  offenseDetails: "",
+  levelConsideration: "",
+  dateNotification: null,
+  complaintFrom: "",
+  appellant: "",
+  documentFile: null,
+  status: "",
+  persons: [personObjComplaint],
+  result: "",
+  disciplineComplaintDocs: [fileListObjComplaint],
+});
+
+/** ข้อมูล v-model ของฟอร์มสืบสวน */
+const dataInvestigatefacts = reactive<FormInvestigateFact>({
+  id: "",
+  idComplaint: "",
+  investigationDetail: "",
+  complaint: "",
+  complaintdetail: "",
+  investigationDescription: "",
+  fault: "",
+  investigationDetailOther: "",
+  evidenceFiles: null,
+  fileComplaint: null,
+  investigationExtendStatus: false,
+  investigationDateStart: null,
+  investigationDateEnd: null,
+  investigationDaysExtend: null,
+  investigationStatusResult: "",
+  investigationCauseText: "",
+  complaintStatus: "",
+  result: "",
+  directors: [],
+  disciplineInvestigateDocs: [],
+  disciplineInvestigateRelevantDocs: [],
+  status: "",
+  documentFile: null,
+  respondentType: "",
+  organizationId: "",
+  persons: [],
+  investigationExtendHistory: [],
+});
+
 /** function fetchData สอบสวนความผิดทางวินัย*/
 async function fetchDetailDisciplinary() {
   showLoader();
@@ -168,12 +245,11 @@ async function onSubmitDisciplinary(data: any) {
  * บันทึกข้อมูลที่เเก้ไข
  * @param id ระบุ บุคคล
  */
-const onSubmit = async (id: string) => {
+async function onSubmit(id: string) {
   router.push(`/discipline/disciplinary`);
-};
+}
 
 /** ยืนยัน ส่งไปออกคำสั่ง */
-const respondentRows = ref<Persons[]>();
 async function sentIssue() {
   respondentRows.value = await store.rowSent.filter((x) => x.report === false); //x.report === false
   modalPopup.value = true;
@@ -197,7 +273,7 @@ function confirmSentIssueGate() {
       messageError($q, e);
     })
     .finally(() => {
-      router.push(`/discipline/disciplinary`)
+      router.push(`/discipline/disciplinary`);
       fetchDetailDisciplinary();
     });
 }
@@ -234,7 +310,6 @@ function confirmEndInvestigate() {
       messageError($q, e);
     })
     .finally(() => {
-      
       fetchDetailDisciplinary();
     });
 }
@@ -258,52 +333,6 @@ function closePopup() {
   modalPopup.value = false;
 }
 
-/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
-onMounted(async () => {
-  store.tabMenu = "disciplinary";
-  await fetchDetailDisciplinary();
-});
-
-watch(
-  () => store.tabMenu,
-  async () => {
-    const fetchFunction =
-      store.tabMenu === "disciplinary"
-        ? fetchDetailDisciplinary
-        : store.tabMenu === "investigatefacts"
-        ? fetchDetailInvestigate
-        : store.tabMenu === "complaints"
-        ? fetchDetailComplaints
-        : null;
-
-    if (fetchFunction) {
-      await fetchFunction();
-    }
-  }
-);
-
-/** ข้อมูล v-model ของฟอร์มเรื่องร้องเรียน */
-const personObjComplaint = reactive<ArrayPerson>({
-  id: "",
-  personId: "",
-  idcard: "",
-  name: "",
-  prefix: "",
-  firstName: "",
-  lastName: "",
-  posNo: "",
-  position: "",
-  positionLevel: "",
-  salary: null,
-  organization: "",
-});
-
-const fileListObjComplaint = reactive<ArrayFileList>({
-  id: "",
-  pathName: "",
-  fileName: "",
-});
-
 function emitPerson(data: PersonsArray[]) {
   const dataMapId = data.map((item: PersonsArray) => item.id);
   showLoader();
@@ -324,62 +353,35 @@ function emitPerson(data: PersonsArray[]) {
     });
 }
 
-const dataComplaints = reactive<FormDataComplaint>({
+watch(
-  id: "",
+  () => store.tabMenu,
-  respondentType: "",
+  async () => {
-  organizationId: "",
+    const fetchFunction =
-  consideredAgency: "",
+      store.tabMenu === "disciplinary"
-  title: "",
+        ? fetchDetailDisciplinary
-  description: "",
+        : store.tabMenu === "investigatefacts"
-  dateReceived: null,
+        ? fetchDetailInvestigate
-  dateConsideration: null,
+        : store.tabMenu === "complaints"
-  offenseDetails: "",
+        ? fetchDetailComplaints
-  levelConsideration: "",
+        : null;
-  dateNotification: null,
-  complaintFrom: "",
-  appellant: "",
-  documentFile: null,
-  status: "",
-  persons: [personObjComplaint],
-  result: "",
-  disciplineComplaintDocs: [fileListObjComplaint],
-});
 
-/** ข้อมูล v-model ของฟอร์มสืบสวน */
+    if (fetchFunction) {
-const dataInvestigatefacts = reactive<FormInvestigateFact>({
+      await fetchFunction();
-  id: "",
+    }
-  idComplaint: "",
+  }
-  investigationDetail: "",
+);
-  complaint: "",
+
-  complaintdetail: "",
+/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
-  investigationDescription: "",
+onMounted(async () => {
-  fault: "",
+  store.tabMenu = "disciplinary";
-  investigationDetailOther: "",
+  await fetchDetailDisciplinary();
-  evidenceFiles: null,
-  fileComplaint: null,
-  investigationExtendStatus: false,
-  investigationDateStart: null,
-  investigationDateEnd: null,
-  investigationDaysExtend: null,
-  investigationStatusResult: "",
-  investigationCauseText: "",
-  complaintStatus: "",
-  result: "",
-  directors: [],
-  disciplineInvestigateDocs: [],
-  disciplineInvestigateRelevantDocs: [],
-  status: "",
-  documentFile: null,
-  respondentType: "",
-  organizationId: "",
-  persons: [],
-  investigationExtendHistory:[]
 });
 </script>
 
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
     <div class="toptitle col-12 row items-center">
+
       <q-btn
         icon="mdi-arrow-left"
         unelevated
@@ -392,6 +394,7 @@ const dataInvestigatefacts = reactive<FormInvestigateFact>({
       />
       <div class="q-ma-none">แก้ไขการสอบสวนความผิดทางวินัย</div>
       <q-space />
+
       <div class="q-gutter-x-sm">
         <q-btn
           v-if="status === 'NEW'"
@@ -419,6 +422,7 @@ const dataInvestigatefacts = reactive<FormInvestigateFact>({
         />
       </div>
     </div>
+
     <q-card flat class="col-12">
       <q-tabs
         v-model="store.tabMenu"
@@ -436,16 +440,19 @@ const dataInvestigatefacts = reactive<FormInvestigateFact>({
         <q-tab name="disciplinary" label="สอบสวนความผิดทางวินัย" />
       </q-tabs>
       <q-separator />
+
       <q-tab-panels v-model="store.tabMenu" animated>
         <q-tab-panel name="complaints">
           <FormComplaints :on-submit="onSubmit" :data="dataComplaints" />
         </q-tab-panel>
+
         <q-tab-panel name="investigatefacts">
           <FormInvestigatefacts
             :on-submit="onSubmit"
             :data="dataInvestigatefacts"
           />
         </q-tab-panel>
+        
         <q-tab-panel name="disciplinary">
           <FormDisciplinary
             :on-submit="onSubmit"

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

@@ -463,6 +463,9 @@ function resetExtend() {
   formData.daysExtend = 0;
 }
 
+/** เปลี่ยนสี เมื่อ readonly
+ * @param val true/false
+ */
 function inputEdit(val: boolean) {
   return {
     "full-width cursor-pointer ": val,
@@ -470,6 +473,9 @@ function inputEdit(val: boolean) {
   };
 }
 
+/** เปลี่ยนสี เมื่อ readonly
+ * @param val true/false
+ */
 function inputEditExtend(val: boolean) {
   if (formData.disciplinaryExtendHistory.length > 0) {
     return {
@@ -544,6 +550,7 @@ onMounted(async () => {
                       </template>
                     </q-select>
                   </div>
+                  
                   <div
                     class="col-xs-12 col-sm-3"
                     v-if="formData.respondentType === 'ORGANIZATION'"
@@ -629,6 +636,7 @@ onMounted(async () => {
                       </q-btn>
                     </div>
                     <div class="col-12"><q-separator /></div>
+
                     <div class="col-xs-12 q-pa-sm">
                       <d-table
                         ref="table"
@@ -765,6 +773,7 @@ onMounted(async () => {
                       </q-input>
                     </template>
                   </datepicker>
+
                   <datepicker
                     :readonly="isReadonly"
                     menu-class-name="modalfix"
@@ -816,6 +825,7 @@ onMounted(async () => {
                     </template>
                   </datepicker>
                 </div>
+
                 <div class="row col-12">
                   <q-card
                     bordered
@@ -866,6 +876,7 @@ onMounted(async () => {
                     </div>
                     <div class="col-12"><q-separator /></div>
                     <div class="q-pa-sm">
+
                       <div class="q-col-gutter-sm row col-12">
                         <div class="col-12">
                           <div class="row q-col-gutter-sm">
@@ -967,6 +978,7 @@ onMounted(async () => {
                                 </template>
                               </datepicker>
                             </div>
+
                             <div class="col-3">
                               <datepicker
                                 menu-class-name="modalfix"
@@ -1162,6 +1174,7 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+
                 <div class="row col-12">
                   <q-card
                     bordered
@@ -1241,6 +1254,7 @@ onMounted(async () => {
                     </div>
                   </q-card>
                 </div>
+
                 <div class="col-xs-12 col-sm-3">
                   <q-input
                     :class="inputEdit(isReadonly)"
@@ -1257,6 +1271,7 @@ onMounted(async () => {
                     @update:model-value="changeFormData()"
                   />
                 </div>
+
                 <div class="col-xs-12 col-sm-3">
                   <q-input
                     :class="inputEdit(isReadonly)"
@@ -1300,6 +1315,7 @@ onMounted(async () => {
                   >
                   </q-select>
                 </div>
+
                 <div class="col-xs-12 col-sm-3">
                   <q-input
                     :class="inputEdit(isReadonly)"
@@ -1318,6 +1334,7 @@ onMounted(async () => {
                     @update:model-value="changeFormData()"
                   />
                 </div>
+
                 <div class="col-xs-12 col-sm-6">
                   <q-input
                     :readonly="isReadonly"
@@ -1353,6 +1370,7 @@ onMounted(async () => {
                     @update:model-value="changeFormData()"
                   />
                 </div>
+                
                 <div class="col-xs-12 col-sm-6">
                   <q-input
                     :readonly="isReadonly"