Merge branch 'develop' into dev-tee

src/interface/request/main/main.ts

@@ -374,34 +374,34 @@ const menuList = readonly<any[]>([
       },
     ],
   },
-  // {
+  {
-  //   key: 9,
+    key: 9,
-  //   icon: "mdi-calendar",
+    icon: "mdi-calendar",
-  //   activeIcon: "mdi-calendar",
+    activeIcon: "mdi-calendar",
-  //   label: "การลา",
+    label: "การลา",
-  //   path: "leave",
+    path: "leave",
-  //   role: "coin",
+    role: "coin",
-  //   children: [
+    children: [
-  //     {
+      {
-  //       key: 9.1,
+        key: 9.1,
-  //       label: "รายการลงเวลาปฏิบัติงาน",
+        label: "รายการลงเวลาปฏิบัติงาน",
-  //       path: "/work-list",
+        path: "/work-list",
-  //       role: "coin",
+        role: "coin",
-  //     },
+      },
-  //     {
+      {
-  //       key: 9.2,
+        key: 9.2,
-  //       label: "รายการลา",
+        label: "รายการลา",
-  //       path: "/leave-list",
+        path: "/leave-list",
-  //       role: "coin",
+        role: "coin",
-  //     },
+      },
-  //     {
+      {
-  //       key: 9.3,
+        key: 9.3,
-  //       label: "รายงานสถิติ",
+        label: "รายงานสถิติ",
-  //       path: "/statistics-report",
+        path: "/statistics-report",
-  //       role: "coin",
+        role: "coin",
-  //     },
+      },
-  //   ],
+    ],
-  // },
+  },
 ]);
 
 const tabList = readonly<tabType[]>([

src/interface/request/main/main.ts.rej

@@ -0,0 +1,134 @@
+diff a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts	(rejected hunks)
+@@ -374,104 +374,34 @@
+       },
+     ],
+   },
+-  // {
+-  //   key: 8,
+-  //   icon: "mdi-medal-outline",
+-  //   activeIcon: "mdi-medal",
+-  //   label: "เครื่องราชฯ",
+-  //   path: "insignia",
+-  //   role: "insignia",
+-  //   children: [
+-  //     {
+-  //       key: 8.1,
+-  //       label: "เครื่องราชฯ",
+-  //       path: "",
+-  //       role: "insignia",
+-  //       children: [
+-  //         {
+-  //           label: "รอบการเสนอขอ",
+-  //           path: "insigniaProposals",
+-  //           role: "insignia",
+-  //         },
+-  //         {
+-  //           label: "จัดการคำขอ",
+-  //           path: "insigniaManage",
+-  //           role: "insignia",
+-  //         },
+-  //         {
+-  //           label: "บันทึกผลการได้รับพระราช...",
+-  //           path: "insigniaRecord",
+-  //           role: "insignia",
+-  //         },
+-  //         {
+-  //           label: "บันทึกผลการจ่ายใบกำกับ",
+-  //           path: "VatInsignia",
+-  //           role: "insignia",
+-  //         },
+-
+-  //         {
+-  //           label: "จัดสรรเครื่องราชฯ",
+-  //           path: "insigniaAllocate",
+-  //           role: "insignia",
+-  //         },
+-  //         {
+-  //           label: "รายงาน",
+-  //           path: "insigniaReport",
+-  //           role: "insignia",
+-  //         },
+-  //       ],
+-  //     },
+-  //     {
+-  //       key: 8.2,
+-  //       label: "เหรียญจักรพรรดิมาลา",
+-  //       path: "",
+-  //       role: "coin",
+-  //       children: [
+-  //         {
+-  //           label: "รอบการเสนอขอ",
+-  //           path: "coinProposals",
+-  //           role: "coin",
+-  //         },
+-  //         {
+-  //           label: "จัดการคำขอ",
+-  //           path: "coinManage",
+-  //           role: "coin",
+-  //         },
+-  //         {
+-  //           label: "บันทึกผลการได้รับพระราชทานเหรียญจักรพรรดิมาลา",
+-  //           path: "coinReceive",
+-  //           role: "coin",
+-  //         },
+-  //         {
+-  //           label: "บันทึกผลการจ่ายใบกำกับ",
+-  //           path: "coinPayment",
+-  //           role: "coin",
+-  //         },
+-  //         {
+-  //           label:
+-  //             "รายชื่อที่ยื่นคำร้องขอแก้ไขข้อมูลการขอพระราชทานเหรียญจักรพรรดิมาลา",
+-  //           path: "coinRequest",
+-  //           role: "coin",
+-  //         },
+-  //         // {
+-  //         //   label: "ประวัติการยื่นขอ",
+-  //         //   path: "coinHistory",
+-  //         //   role: "coin",
+-  //         // },
+-  //         {
+-  //           label: "จัดสรรเหรียญตรา",
+-  //           path: "coinAllocate",
+-  //           role: "coin",
+-  //         },
+-  //         {
+-  //           label: "รายงาน",
+-  //           path: "coinReport",
+-  //           role: "coin",
+-  //         },
+-  //       ],
+-  //     },
+-    // ],
+-  // },
++  {
++    key: 9,
++    icon: "mdi-calendar",
++    activeIcon: "mdi-calendar",
++    label: "การลา",
++    path: "leave",
++    role: "coin",
++    children: [
++      {
++        key: 9.1,
++        label: "รายการลงเวลาปฏิบัติงาน",
++        path: "/work-list",
++        role: "coin",
++      },
++      {
++        key: 9.2,
++        label: "รายการลา",
++        path: "/leave-list",
++        role: "coin",
++      },
++      {
++        key: 9.3,
++        label: "รายงานสถิติ",
++        path: "/statistics-report",
++        role: "coin",
++      },
++    ],
++  },
+ ]);
+ 
+ const tabList = readonly<tabType[]>([

src/modules/02_organizational/views/MainTreeEmployee.vue

@@ -1394,7 +1394,12 @@ const clickSave = async () => {
   myForm.value!.validate().then(async (result: boolean) => {
     if (result) {
       if (modalEdit.value) {
-        await editData();
+        if (selected.value == null) {
+          fails($q, "กรุณาเลือกหน่วยงาน");
+        } else {
+          //   console.log("save");
+          await editData();
+        }
       } else {
         if (selected.value == "") {
           fails($q, "กรุณาเลือกหน่วยงาน");
@@ -1402,7 +1407,6 @@ const clickSave = async () => {
           //   console.log("save");
           await saveData();
         }
-        // await saveData();
       }
     }
   });
@@ -1500,6 +1504,7 @@ const editData = async () => {
       isActive: isActive.value,
       isCondition: isCondition.value,
       conditionNote: conditionNote.value,
+      organizationId: organizationId.value,
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลร่างสำเร็จ");

src/modules/03_recruiting/components/Career.vue

@@ -48,6 +48,13 @@
           </q-td>
         </q-tr>
       </template>
+      <template #bottom="props">
+        <div :props="props" class="row col-11 justify-end">
+          <span class="text-weight-medium text-subtitle2"
+            >รวมระยะเวลา : <span class="q-pl-sm">{{ total }}</span></span
+          >
+        </div>
+      </template>
     </Table>
   </q-form>
   <!-- popup Edit window-->
@@ -317,6 +324,7 @@ const editRow = ref<boolean>(false); //เช็คมีการแก้ไ
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
 const route = useRoute();
 const candidateId = ref<string>(route.params.candidateId.toString());
+const total = ref<string>("-");
 const rows = ref<any>([]);
 const filter = ref<string>(""); //search data table
 const { messageError, showLoader, hideLoader } = mixin;
@@ -480,12 +488,56 @@ const calDate = async () => {
   }${dayDiff > 0 ? dayDiff + " วัน " : ""}`;
 };
 
+const calDateSplit = async (startDate: Date, endDate: Date) => {
+  let _startDate = new Date(startDate.toISOString().substr(0, 10));
+  let _endDate = new Date(endDate.toISOString().substr(0, 10));
+  _endDate.setDate(_endDate.getDate() + 1);
+  if (_startDate > _endDate) {
+    const swap = _startDate;
+    _startDate = _endDate;
+    _endDate = swap;
+  }
+  const startYear = _startDate.getFullYear();
+  const february =
+    (startYear % 4 === 0 && startYear % 100 !== 0) || startYear % 400 === 0
+      ? 29
+      : 28;
+  const daysInMonth = [31, february, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
+  let yearDiff = _endDate.getFullYear() - startYear;
+  let monthDiff = _endDate.getMonth() - _startDate.getMonth();
+  if (monthDiff < 0) {
+    yearDiff--;
+    monthDiff += 12;
+  }
+  let dayDiff = _endDate.getDate() - _startDate.getDate();
+  if (dayDiff < 0) {
+    if (monthDiff > 0) {
+      monthDiff--;
+    } else {
+      yearDiff--;
+      monthDiff = 11;
+    }
+    dayDiff += daysInMonth[_startDate.getMonth()];
+  }
+  var obj = {
+    yearDiff: yearDiff,
+    monthDiff: monthDiff,
+    dayDiff: dayDiff,
+  };
+  return obj;
+};
+
 const fetchData = async () => {
   showLoader();
   await http
     .get(config.API.candidateCareer(candidateId.value))
     .then((res) => {
       const data = res.data.result;
+      var yearDiff = 0;
+      var monthDiff = 0;
+      var dayDiff = 0;
+      total.value = "-";
       rows.value = [];
       data.map((r: any) => {
         rows.value.push({
@@ -493,6 +545,24 @@ const fetchData = async () => {
           startDate: new Date(r.durationStart),
           endDate: new Date(r.durationEnd),
         });
+        calDateSplit(new Date(r.durationStart), new Date(r.durationEnd)).then(
+          (d) => {
+            yearDiff = yearDiff + d.yearDiff;
+            monthDiff = monthDiff + d.monthDiff;
+            dayDiff = dayDiff + d.dayDiff;
+            if (dayDiff > 30) {
+              dayDiff = dayDiff % 30;
+              monthDiff = monthDiff + parseInt((dayDiff / 30).toString());
+            }
+            if (monthDiff > 12) {
+              monthDiff = monthDiff % 12;
+              yearDiff = yearDiff + parseInt((monthDiff / 12).toString());
+            }
+            total.value = `${yearDiff > 0 ? yearDiff + " ปี " : ""}${
+              monthDiff > 0 ? monthDiff + " เดือน " : ""
+            }${dayDiff > 0 ? dayDiff + " วัน " : ""}`;
+          }
+        );
       });
     })
     .catch((e) => {

src/modules/03_recruiting/components/Education.vue

@@ -27,9 +27,10 @@
             v-model="defaultEducation.educationLevelExamId"
             :rules="[(val) => !!val || `${'กรุณาเลือก วุฒิที่ใช้สมัครสอบ'}`]"
             :label="`${'วุฒิที่ใช้สมัครสอบ'}`"
+            @update:model-value="(value) => checkInputName()"
           />
         </div>
-        <div class="col-3">
+        <div class="col-3" v-if="showEducationName">
           <q-input
             class="q-pl-sm"
             :class="getClass(status == 'checkRegister' || status == 'payment')"
@@ -220,6 +221,7 @@ const props = defineProps({
 
 const $q = useQuasar();
 const edit = ref<boolean>(true);
+const showEducationName = ref<boolean>(true);
 const myform = ref<any>({});
 const route = useRoute();
 const candidateId = ref<string>(route.params.candidateId.toString());
@@ -276,6 +278,17 @@ const fetchData = async () => {
     });
 };
 
+const checkInputName = () => {
+  showEducationName.value =
+    props.educationLevelOptions.filter(
+      (x) =>
+        x.id == defaultEducation.value.educationLevelExamId &&
+        (x.name == "ปริญญาตรี" || x.name == "ปริญญาโท" || x.name == "ปริญญาเอก")
+    ).length == 0
+      ? false
+      : true;
+};
+
 const getClass = (val: boolean) => {
   return {
     "full-width inputgreen cursor-pointer": val,

src/modules/03_recruiting/components/Information.vue

@@ -136,6 +136,7 @@
           week-start="0"
           :max-date="new Date()"
           :disabled="!(status == 'checkRegister' || status == 'payment')"
+          @update:modelValue="selectBirthDate"
         >
           <template #year="{ year }">
             {{ year + 543 }}
@@ -214,6 +215,7 @@
           :borderless="!(status == 'checkRegister' || status == 'payment')"
           v-model="defaultInformation.tel"
           :rules="[
+            (val) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
             (val) => val.length == 10 || `${'กรุณากรอก เบอร์โทร'}`,
             (val) =>
               /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลเบอร์โทรให้ถูกต้อง'}`,
@@ -440,7 +442,8 @@ const props = defineProps({
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, calAge, modalError, success } = mixin;
+const { date2Thai, calAge, modalError, success, notifyError, calAgeYear } =
+  mixin;
 const districtOptions = ref<DataOption[]>([]);
 const route = useRoute();
 const candidateId = ref<string>(route.params.candidateId.toString());
@@ -449,6 +452,7 @@ const myform = ref<any>({});
 const img = ref<string>("");
 const opNat = ref(["ไทย"]);
 const fileProfile = ref<File[]>([]);
+const registerEndDate = ref<Date>(new Date());
 
 const { messageError, showLoader, hideLoader } = mixin;
 
@@ -577,6 +581,21 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+const selectBirthDate = async () => {
+  //   if (defaultInformation.value.birthDate != null) {
+  //     if (
+  //       calAgeYear(defaultInformation.value.birthDate, registerEndDate.value) < 18
+  //     ) {
+  //       defaultInformation.value.birthDate = null;
+  //       notifyError($q, "อายุไม่ถึง18");
+  //     } else if (
+  //       calAgeYear(defaultInformation.value.birthDate, registerEndDate.value) > 60
+  //     ) {
+  //       defaultInformation.value.birthDate = null;
+  //       notifyError($q, "อายุเกิน60");
+  //     }
+  //   }
+};
 </script>
 
 <style>

src/modules/03_recruiting/components/Occupation.vue

@@ -63,7 +63,7 @@
             :label="`${'เงินเดือน'}`"
           />
         </div>
-      
+
         <div class="col-4">
           <q-input
             :class="getClass(status == 'checkRegister' || status == 'payment')"
@@ -124,6 +124,7 @@
             v-model="defaultOccupation.tel"
             :rules="[
               (val) => !!val || `${'กรุณากรอก เบอร์โทรที่ทำงาน'}`,
+              (val) => val.length == 10 || `${'กรุณากรอก เบอร์โทรที่ทำงาน'}`,
               (val) =>
                 /^[0-9]*$/.test(val) || 'กรุณากรอก เบอร์โทรที่ทำงานให้ถูกต้อง',
             ]"

src/modules/05_placement/components/PersonalDetail/ExamResult.vue

@@ -67,15 +67,26 @@ const props = defineProps({
     </div> -->
     <div class="col q-pl-xl">
       <q-card class="q-pt-xs">
-        <div class="header-text-right q-px-xs">ผลการสอบ</div>
+        <div class="row">
-        <div class="sub-text-right q-px-xs q-pb-sm">{{ props.data.pass }}</div>
+          <div class="col">
-        <div class="header-text-right q-px-xs">ลำดับที่สอบได้</div>
+            <div class="header-text-right q-px-xs">ผลการสอบ</div>
-        <div class="sub-text-right q-px-xs q-pb-sm">
+            <div class="sub-text-right q-px-xs q-pb-sm">
-          {{ props.data.examNumber }}
+              {{ props.data.pass ? props.data.pass : "-" }}
-        </div>
+            </div>
-        <div class="header-text-right q-px-xs">จำนวนครั้งที่สมัครสอบ</div>
+          </div>
-        <div class="sub-text-right q-px-xs q-pb-sm">
+          <div class="col">
-          {{ props.data.examRound }}
+            <div class="header-text-right q-px-xs">ลำดับที่สอบได้</div>
+            <div class="sub-text-right q-px-xs q-pb-sm">
+              {{ props.data.examNumber ? props.data.examNumber : "-" }}
+            </div>
+          </div>
+
+          <div class="col">
+            <div class="header-text-right q-px-xs">จำนวนครั้งที่สมัครสอบ</div>
+            <div class="sub-text-right q-px-xs q-pb-sm">
+              {{ props.data.examRound ? props.data.examRound : "-" }}
+            </div>
+          </div>
         </div>
       </q-card>
     </div>

src/modules/05_placement/components/PersonalDetail/Information/Document.vue

@@ -0,0 +1,276 @@
+<template>
+  <q-card flat bordered class="col-12 row q-px-lg q-py-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="เอกสารหลักฐาน"
+      icon="mdi-file-document"
+      :history="false"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :save="uploadData"
+    />
+    <div class="row col-12 q-pt-sm">
+      <q-card bordered flat class="full-width">
+        <q-list separator>
+          <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+            <q-item-section>
+              <q-item-label class="full-width ellipsis">
+                {{ file.fileName }}
+              </q-item-label>
+
+              <q-item-label caption> </q-item-label>
+            </q-item-section>
+            <q-item-section top side>
+              <div class="row col-12">
+                <q-btn
+                  class="gt-xs"
+                  size="12px"
+                  flat
+                  dense
+                  round
+                  color="blue"
+                  icon="mdi-download-outline"
+                  @click="downloadData(file.file)"
+                >
+                  <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                </q-btn>
+                <q-btn
+                  class="gt-xs"
+                  size="12px"
+                  flat
+                  dense
+                  round
+                  color="red"
+                  icon="mdi-delete-outline"
+                  v-show="edit"
+                  @click="deleteData(file.id)"
+                >
+                  <q-tooltip>ลบเอกสารหลักฐาน</q-tooltip>
+                </q-btn>
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+      <q-input
+        v-if="edit"
+        class="q-mt-sm col-12 q-pb-xs"
+        outlined
+        dense
+        lazy-rules
+        v-model="name"
+        hide-bottom-space
+        :rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
+        :label="`${'ชื่อเอกสาร'}`"
+      />
+      <q-uploader
+        v-if="edit"
+        color="gray"
+        type="file"
+        flat
+        @factory="uploadData"
+        ref="uploader"
+        class="full-width"
+        text-color="white"
+        :max-size="10000000"
+        accept=".jpg,.png,.pdf,.csv,.docx,.doc"
+        bordered
+        @added="fileAdd"
+      >
+        <template v-slot:header="scope">
+          <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
+            <q-btn
+              v-if="scope.queuedFiles.length > 0"
+              icon="clear_all"
+              @click="scope.removeQueuedFiles"
+              round
+              dense
+              flat
+            >
+              <q-tooltip>ลบทั้งหมด</q-tooltip>
+            </q-btn>
+            <q-btn
+              v-if="scope.uploadedFiles.length > 0"
+              icon="done_all"
+              @click="scope.removeUploadedFiles"
+              round
+              dense
+              flat
+            >
+              <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
+            </q-btn>
+            <q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
+            <div class="col">
+              <div class="q-uploader__title">
+                {{ "[ไฟล์ jpg,png,pdf,csv,docx ขนาดไม่เกิน 10MB]" }}
+              </div>
+              <div class="q-uploader__subtitle">
+                {{ scope.uploadSizeLabel }} / {{ scope.uploadProgressLabel }}
+              </div>
+            </div>
+            <q-btn
+              v-if="scope.canAddFiles"
+              type="a"
+              icon="add_box"
+              @click="scope.pickFiles"
+              round
+              dense
+              flat
+            >
+              <q-uploader-add-trigger />
+              <q-tooltip>เลือกไฟล์</q-tooltip>
+            </q-btn>
+            <q-btn
+              v-if="scope.isUploading"
+              icon="clear"
+              @click="scope.abort"
+              round
+              dense
+              flat
+            >
+              <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
+            </q-btn>
+          </div>
+        </template>
+      </q-uploader>
+    </div>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { onMounted, computed, ref, watch } from "vue";
+import { useQuasar, QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+
+import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  notiNoEdit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  fetch: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const $q = useQuasar(); // show dialog
+const mixin = useCounterMixin();
+const route = useRoute();
+const { success, messageError, showLoader, hideLoader } = mixin;
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const edit = ref<boolean>(false);
+const uploader = ref<any>();
+const files = ref<any>([]);
+const file = ref<any>([]);
+const name = ref<string>("");
+
+onMounted(async () => {
+  await getData();
+  // props.fetch()
+});
+
+const getData = async () => {
+  if (profileId.value) {
+    showLoader();
+    await http
+      .get(config.API.profilePaperId(profileId.value))
+      .then((res) => {
+        const data = res.data.result;
+        files.value = data;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+const deleteData = async (id: string) => {
+  showLoader();
+  await http
+    .delete(config.API.profilePaperId(id))
+    .then((res) => {
+      const data = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+    });
+};
+
+const uploadData = async () => {
+  if (profileId.value) {
+    if (file.value.length > 0) {
+      const blob = file.value.slice(0, file.value[0].size);
+      const newFile = new File(blob, name.value, {
+        type: file.value[0].type,
+      });
+      const formData = new FormData();
+      formData.append("avatar", newFile);
+      formData.append("moss", "newFile");
+      showLoader();
+      await http
+        .post(config.API.profilePaperId(profileId.value), formData)
+        .then((res) => {
+          const data = res.data.result;
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          uploader.value.reset();
+          name.value = "";
+          edit.value = false;
+          emit("update:statusEdit", false);
+          await getData();
+        });
+    } else {
+      // modalError(
+      //   $q,
+      //   "ไม่สามารถอัปโหลดไฟล์ได้",
+      //   "กรุณาเลือกไฟล์ที่ต้องการอัปโหลด"
+      // );
+      getData();
+    }
+  }
+};
+
+const fileAdd = async (val: any) => {
+  name.value = val[0].name;
+  file.value = val;
+};
+
+const downloadData = async (path: string) => {
+  window.open(path);
+};
+
+const changeBtn = async () => {
+  name.value = "";
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+      props.notiNoEdit();
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+</script>

src/modules/05_placement/components/PersonalList/Table.vue

@@ -360,14 +360,13 @@ const getClass = (val: boolean) => {
   };
 };
 // เรียกดูรายละเอียดข้อมูล
-const selectData = (pid: string) => {
+const selectData = (pid: string, draft: string) => {
-  router.push("/placement/personal-detail/" + pid);
+  if (roleAdmin.value && draft === 'ส่งตัวแล้ว') {
-  // if (roleAdmin.value === true) {
+    personalId.value = pid;
-  //   personalId.value = pid;
+    modal.value = true;
-  //   modal.value = true;
+  } else {
-  // } else {
+    router.push("/placement/personal-detail/" + pid);
-  //   router.push("/placement/personal-detail/" + pid);
+  }
-  // }
 };
 const getNumFile = ref(0);
 const dataInfo = reactive({
@@ -582,7 +581,7 @@ const pagination = ref({
             v-for="col in props.cols"
             :key="col.name"
             :props="props"
-            @click="selectData(props.row.personalId)"
+            @click="selectData(props.row.personalId, props.row.draft)"
             class="cursor-pointer"
           >
             <template v-if="col.name === 'position'">

src/modules/05_placement/components/PersonalList/TableDetail.vue

@@ -213,7 +213,7 @@ const close = async () => {
             <q-card bordered class="card-panding">
               <div class="row items-center q-pa-xs header-text">การสอบ</div>
               <div class="row q-pa-xs">
-                <div class="col-6">
+                <!-- <div class="col-6">
                   <q-card class="card-exam q-pa-sm">
                     <div class="row">
                       <div class="col-4 q-pa-xs header-sub-text-exam">
@@ -260,8 +260,8 @@ const close = async () => {
                     </div>
                   </q-card>
                 </div>
-                <div class="col-1"></div>
+                <div class="col-1"></div> -->
-                <div class="col-5 q-pt-sm q-pl-lg">
+                <div class="col-6 q-pt-sm q-pl-lg">
                   <div class="row">
                     <div class="col-7 header-sub-text">
                       <div class="q-pb-sm">ผลการสอบ</div>

src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue

@@ -342,8 +342,9 @@ onMounted(async () => {
               <span class="text-primary q-pr-sm">{{
                 "ครั้งที่ " + round
               }}</span>
-              ระหว่างวันที่
+            </div>
-              <span class="text-black q-px-sm">
+            <div class="col-12 text-top0 row items-center">
+              <div class="col-6 q-px-sm">
                 <datepicker
                   menu-class-name="modalfix"
                   v-model="start_date"
@@ -367,8 +368,8 @@ onMounted(async () => {
                       :model-value="
                         start_date != null ? date2Thai(start_date) : null
                       "
-                      :label="`${'ลงวันที่'}`"
+                      :label="`${'ระหว่างวันที่'}`"
-                      :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -381,9 +382,8 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
-              </span>
+              </div>
-              ถึงวันที่
+              <div class="col-6 q-px-sm">
-              <span class="text-black q-px-sm">
                 <datepicker
                   menu-class-name="modalfix"
                   v-model="date_finish"
@@ -407,8 +407,8 @@ onMounted(async () => {
                       :model-value="
                         date_finish != null ? date2Thai(date_finish) : null
                       "
-                      :label="`${'ลงวันที่'}`"
+                      :label="`${'ถึงวันที่'}`"
-                      :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -421,7 +421,7 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
-              </span>
+              </div>
             </div>
             <div class="col-12 q-pt-md">
               <q-separator size="3px" color="grey-2" />

src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue

@@ -453,8 +453,9 @@ watch(lengthdiscipline_level, (newLength) => {
                 <span class="text-primary q-pr-sm">{{
                   `ครั้งที่ ${evaluate_no}`
                 }}</span>
-                ระหว่างวันที่
+              </div>
-                <span class="text-black q-px-sm">
+              <div class="col-12 text-top0 row items-center">
+                <div class="col-6 q-px-sm">
                   <datepicker
                     menu-class-name="modalfix"
                     v-model="start_date"
@@ -478,8 +479,8 @@ watch(lengthdiscipline_level, (newLength) => {
                         :model-value="
                           start_date != null ? date2Thai(start_date) : null
                         "
-                        :label="`${'ลงวันที่'}`"
+                        :label="`${'ระหว่างวันที่'}`"
-                        :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                        :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -492,9 +493,8 @@ watch(lengthdiscipline_level, (newLength) => {
                       </q-input>
                     </template>
                   </datepicker>
-                </span>
+                </div>
-                ถึงวันที่
+                <div class="col-6 q-px-sm">
-                <span class="text-black q-px-sm">
                   <datepicker
                     menu-class-name="modalfix"
                     v-model="date_finish"
@@ -518,8 +518,8 @@ watch(lengthdiscipline_level, (newLength) => {
                         :model-value="
                           date_finish != null ? date2Thai(date_finish) : null
                         "
-                        :label="`${'ลงวันที่'}`"
+                        :label="`${'ถึงวันที่'}`"
-                        :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                        :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -532,7 +532,7 @@ watch(lengthdiscipline_level, (newLength) => {
                       </q-input>
                     </template>
                   </datepicker>
-                </span>
+                </div>
               </div>
               <div class="col-12 q-pt-md">
                 <q-separator size="3px" color="grey-2" />

src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue

@@ -398,8 +398,9 @@ const getBordered = (i: boolean) => {
               บันทึกผล<span class="text-primary q-pr-sm">{{
                 "ครั้งที่ " + round
               }}</span>
-              ระหว่างวันที่
+            </div>
-              <span class="text-black q-px-sm">
+            <div class="col-12 text-top0 row items-center">
+              <div class="col-6 q-px-sm">
                 <datepicker
                   menu-class-name="modalfix"
                   v-model="start_date"
@@ -423,8 +424,8 @@ const getBordered = (i: boolean) => {
                       :model-value="
                         start_date != null ? date2Thai(start_date) : null
                       "
-                      :label="`${'ลงวันที่'}`"
+                      :label="`${'ระหว่างวันที่'}`"
-                      :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -437,9 +438,8 @@ const getBordered = (i: boolean) => {
                     </q-input>
                   </template>
                 </datepicker>
-              </span>
+              </div>
-              ถึงวันที่
+              <div class="col-6 q-px-sm">
-              <span class="text-black q-px-sm">
                 <datepicker
                   menu-class-name="modalfix"
                   v-model="date_finish"
@@ -463,8 +463,8 @@ const getBordered = (i: boolean) => {
                       :model-value="
                         date_finish != null ? date2Thai(date_finish) : null
                       "
-                      :label="`${'ลงวันที่'}`"
+                      :label="`${'ถึงวันที่'}`"
-                      :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -477,7 +477,7 @@ const getBordered = (i: boolean) => {
                     </q-input>
                   </template>
                 </datepicker>
-              </span>
+              </div>
             </div>
             <div class="col-12 q-pt-md">
               <q-separator size="3px" color="grey-2" />

src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue

@@ -406,8 +406,9 @@ onMounted(async () => {
               บันทึกผล<span class="text-primary q-pr-sm">{{
                 "ครั้งที่ " + round
               }}</span>
-              ระหว่างวันที่
+            </div>
-              <span class="text-black q-px-sm">
+            <div class="col-12 text-top0 row items-center">
+              <div class="col-6 q-px-sm">
                 <datepicker
                   menu-class-name="modalfix"
                   v-model="start_date"
@@ -431,8 +432,8 @@ onMounted(async () => {
                       :model-value="
                         start_date != null ? date2Thai(start_date) : null
                       "
-                      :label="`${'ลงวันที่'}`"
+                      :label="`${'ระหว่างวันที่'}`"
-                      :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -445,9 +446,8 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
-              </span>
+              </div>
-              ถึงวันที่
+              <div class="col-6 q-px-sm">
-              <span class="text-black q-px-sm">
                 <datepicker
                   menu-class-name="modalfix"
                   v-model="date_finish"
@@ -471,8 +471,8 @@ onMounted(async () => {
                       :model-value="
                         date_finish != null ? date2Thai(date_finish) : null
                       "
-                      :label="`${'ลงวันที่'}`"
+                      :label="`${'ถึงวันที่'}`"
-                      :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -485,7 +485,7 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
-              </span>
+              </div>
             </div>
             <div class="col-12 q-pt-md">
               <q-separator size="3px" color="grey-2" />

src/modules/06_retirement/components/ExitInterview/EditQuestion.vue

@@ -19,8 +19,10 @@ const { messageError, showLoader, hideLoader } = mixin;
 const myForm = ref<QForm | null>(null);
 
 // set คำถามที่ 1
-const question1Desc = ref<string>("เหตุใดท่านจึงตัดสินใจร่วมงานกับกรุงเทพมหานคร (เลือกได้มากกว่า 1 ข้อ)")
+const question1Desc = ref<string>(
-const question1Score = ref<number>(5)
+  "เหตุใดท่านจึงตัดสินใจร่วมงานกับกรุงเทพมหานคร (เลือกได้มากกว่า 1 ข้อ)"
+);
+const question1Score = ref<number>(5);
 const question1Answer = ref<any>([
   "ความมั่นคงในการทำงาน",
   "สิทธิประโยชน์/สวัสดิการ",
@@ -35,21 +37,25 @@ const question1Answer = ref<any>([
   "โอกาสความก้าวหน้า",
   "การได้รับการยอมรับจากสังคม",
   // "อื่น ๆ (ระบุ)",
-])
+]);
 
 // set คำถามที่ 2
-const question2Desc = ref<string>("สำหรับการลาออกในครั้งนี ท่านได้คิดทบทวนอย่างจริงจังเป็นระยะเวลานานเท่าใด")
+const question2Desc = ref<string>(
-const question2Score = ref<number>(5)
+  "สำหรับการลาออกในครั้งนี ท่านได้คิดทบทวนอย่างจริงจังเป็นระยะเวลานานเท่าใด"
+);
+const question2Score = ref<number>(5);
 const question2Answer = ref<any>([
   "น้อยกว่า 2 สัปดาห์",
   "1 เดือน - 3 เดือน",
   "3 เดือน - 6 เดือน",
   "6 เดือนขึ้นไป",
-])
+]);
 
 // set คำถามที่ 3
-const question3Desc = ref<string>("ปัจจัยใดที่ทำให้ท่านตัดสินใจลาออกจากราชการ (เลือกได้มากกว่า 1 ข้อ)")
+const question3Desc = ref<string>(
-const question3Score = ref<number>(5)
+  "ปัจจัยใดที่ทำให้ท่านตัดสินใจลาออกจากราชการ (เลือกได้มากกว่า 1 ข้อ)"
+);
+const question3Score = ref<number>(5);
 const question3Answer = ref<any>([
   "อัตราเงินเดือน",
   "สวัสดิการ",
@@ -66,11 +72,13 @@ const question3Answer = ref<any>([
   "การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน",
   "การพัฒนาอย่างเป็นระบบและต่อเนื่อง",
   "โอกาสความก้าวหน้า",
-])
+]);
 
 // set คำถามที่ 4
-const question4Desc = ref<string>("อะไรคือสิ่งที่ท่านเห็นว่าควรปรับปรุง (เลือกได้มากกว่า 1 ข้อ)")
+const question4Desc = ref<string>(
-const question4Score = ref<number>(5)
+  "อะไรคือสิ่งที่ท่านเห็นว่าควรปรับปรุง (เลือกได้มากกว่า 1 ข้อ)"
+);
+const question4Score = ref<number>(5);
 const question4Answer = ref<any>([
   "อัตราเงินเดือน ",
   "สวัสดิการ",
@@ -87,40 +95,41 @@ const question4Answer = ref<any>([
   "การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน",
   "การพัฒนาอย่างเป็นระบบและต่อเนื่อง",
   "โอกาสความก้าวหน้า",
-])
+]);
 
 // set คำถามที่ 5
-const question5Desc = ref<string>("โปรดระบุสาเหตุที่แท้จริง ที่ทำให้ท่านตัดสินใจลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร ?")
+const question5Desc = ref<string>(
-const question5Score = ref<number>(5)
+  "โปรดระบุสาเหตุที่แท้จริง ที่ทำให้ท่านตัดสินใจลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร ?"
+);
+const question5Score = ref<number>(5);
 // set คำถามที่ 6
-const question6Desc = ref<string>("ปัจจัยใดที่จะช่วยทำให้ท่านเปลี่ยนใจ ไม่อยากลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร")
+const question6Desc = ref<string>(
-const question6Score = ref<number>(5)
+  "ปัจจัยใดที่จะช่วยทำให้ท่านเปลี่ยนใจ ไม่อยากลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร"
+);
+const question6Score = ref<number>(5);
 // set คำถามที่ 7
-const question7Desc = ref<string>("ท่านมีงานใหม่หรือไม่ ถ้ามี (โปรดระบุ ชื่อบริษัทเอกชน/หน่วยงานภาครัฐ) และอะไรคือสิ่งที่ที่ทำงานใหม่ให้กับท่าน ซึ่งท่านรู้สึกว่าเป็นที่น่าพอใจมากกว่าการปฏิบัติราชการกับกรุงเทพมหานคร")
+const question7Desc = ref<string>(
-const question7Score = ref<number>(5)
+  "ท่านมีงานใหม่หรือไม่ ถ้ามี (โปรดระบุ ชื่อบริษัทเอกชน/หน่วยงานภาครัฐ) และอะไรคือสิ่งที่ที่ทำงานใหม่ให้กับท่าน ซึ่งท่านรู้สึกว่าเป็นที่น่าพอใจมากกว่าการปฏิบัติราชการกับกรุงเทพมหานคร"
-const question7Answer = ref<any>([
+);
-  "มี (ระบุ)",
+const question7Score = ref<number>(5);
-  "ไม่มี",
+const question7Answer = ref<any>(["มี (ระบุ)", "ไม่มี"]);
-])
 
 // set คำถามที่ 8
-const question8Desc = ref<string>("ท่านจะแนะนำเพื่อนให้มาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)")
+const question8Desc = ref<string>(
-const question8Score = ref<number>(5)
+  "ท่านจะแนะนำเพื่อนให้มาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)"
-const question8Answer = ref<any>([
+);
-  "แนะนำ",
+const question8Score = ref<number>(5);
-  "ไม่แนะนำ (ระบุ)",
+const question8Answer = ref<any>(["แนะนำ", "ไม่แนะนำ (ระบุ)"]);
-])
 
 // set คำถามที่ 9
-const question9Desc = ref<string>("หากท่านมีโอกาสในอนาคต ท่านอยากกลับมาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)")
+const question9Desc = ref<string>(
-const question9Score = ref<number>(5)
+  "หากท่านมีโอกาสในอนาคต ท่านอยากกลับมาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)"
-const question9Answer = ref<any>([
+);
-  "อยาก",
+const question9Score = ref<number>(5);
-  "ไม่อยาก (ระบุ)",
+const question9Answer = ref<any>(["อยาก", "ไม่อยาก (ระบุ)"]);
-])
 // set คำถามที่ 10
-const question10Desc = ref<string>("ความคิดเห็นและข้อเสนอแนะอื่น ๆ")
+const question10Desc = ref<string>("ความคิดเห็นและข้อเสนอแนะอื่น ๆ");
-const question10Score = ref<number>(5)
+const question10Score = ref<number>(5);
 
 const exitFactor = ref<any>([]);
 const reasonWork = ref<any>([]);
@@ -212,14 +221,22 @@ const getData = async () => {
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
     แก้ไขคำถาม
   </div>
 
   <q-card bordered class="row col-12 text-dark q-mt-sm">
     <div class="col-12"><q-separator /></div>
     <q-form ref="myForm">
-
       <div class="col-12 row q-col-gutter-md q-pa-md">
         <div class="col-xs-12 col-sm-12">
           <q-card bordered flat>
@@ -229,24 +246,59 @@ const getData = async () => {
             <q-separator />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
               <div class="col-10 text-top0">
-                <q-input v-model="question1Desc" label="คำถามข้อที่ 1" dense lazy-rules type="text" autogrow
+                <q-input
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                  v-model="question1Desc"
-                    (val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 1',
+                  label="คำถามข้อที่ 1"
-                  ]" />
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 1',
+                  ]"
+                />
               </div>
               <div class="col-2 text-top0">
-                <q-input v-model="question1Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
+                <q-input
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                  v-model="question1Score"
+                  label="กรอกคะแนน"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
-                  ]" />
+                  ]"
+                />
               </div>
 
-              <div v-for="(data, index) in question1Answer" :key="index" class="row col-12">
+              <div
+                v-for="(data, index) in question1Answer"
+                :key="index"
+                class="row col-12"
+              >
                 <div class="col-6">
-                  <q-input v-model="question1Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
+                  <q-input
-                    autogrow hide-bottom-space outlined class="bg-white" :rules="[
+                    v-model="question1Answer[index]"
+                    :label="`คำตอบที่ ${index + 1}`"
+                    dense
+                    lazy-rules
+                    type="text"
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
                       (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
-                    ]" />
+                    ]"
+                  />
                 </div>
               </div>
             </div>
@@ -263,24 +315,59 @@ const getData = async () => {
             <q-separator />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
               <div class="col-10 text-top0">
-                <q-input v-model="question2Desc" label="คำถามข้อที่ 2" dense lazy-rules type="text" autogrow
+                <q-input
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                  v-model="question2Desc"
-                    (val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 2',
+                  label="คำถามข้อที่ 2"
-                  ]" />
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 2',
+                  ]"
+                />
               </div>
               <div class="col-2 text-top0">
-                <q-input v-model="question2Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
+                <q-input
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                  v-model="question2Score"
+                  label="กรอกคะแนน"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
-                  ]" />
+                  ]"
+                />
               </div>
 
-              <div v-for="(data, index) in question2Answer" :key="index" class="row col-12">
+              <div
+                v-for="(data, index) in question2Answer"
+                :key="index"
+                class="row col-12"
+              >
                 <div class="col-6">
-                  <q-input v-model="question2Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
+                  <q-input
-                    autogrow hide-bottom-space outlined class="bg-white" :rules="[
+                    v-model="question2Answer[index]"
+                    :label="`คำตอบที่ ${index + 1}`"
+                    dense
+                    lazy-rules
+                    type="text"
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
                       (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
-                    ]" />
+                    ]"
+                  />
                 </div>
               </div>
             </div>
@@ -297,24 +384,59 @@ const getData = async () => {
             <q-separator />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
               <div class="col-10 text-top0">
-                <q-input v-model="question3Desc" label="คำถามข้อที่ 3" dense lazy-rules type="text" autogrow
+                <q-input
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                  v-model="question3Desc"
-                    (val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 3',
+                  label="คำถามข้อที่ 3"
-                  ]" />
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 3',
+                  ]"
+                />
               </div>
               <div class="col-2 text-top0">
-                <q-input v-model="question3Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
+                <q-input
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                  v-model="question3Score"
+                  label="กรอกคะแนน"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
-                  ]" />
+                  ]"
+                />
               </div>
 
-              <div v-for="(data, index) in question3Answer" :key="index" class="row col-12">
+              <div
+                v-for="(data, index) in question3Answer"
+                :key="index"
+                class="row col-12"
+              >
                 <div class="col-6">
-                  <q-input v-model="question3Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
+                  <q-input
-                    autogrow hide-bottom-space outlined class="bg-white" :rules="[
+                    v-model="question3Answer[index]"
+                    :label="`คำตอบที่ ${index + 1}`"
+                    dense
+                    lazy-rules
+                    type="text"
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
                       (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
-                    ]" />
+                    ]"
+                  />
                 </div>
               </div>
             </div>
@@ -331,24 +453,59 @@ const getData = async () => {
             <q-separator />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
               <div class="col-10 text-top0">
-                <q-input v-model="question4Desc" label="คำถามข้อที่ 4" dense lazy-rules type="text" autogrow
+                <q-input
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                  v-model="question4Desc"
-                    (val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 4',
+                  label="คำถามข้อที่ 4"
-                  ]" />
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 4',
+                  ]"
+                />
               </div>
               <div class="col-2 text-top0">
-                <q-input v-model="question4Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
+                <q-input
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                  v-model="question4Score"
+                  label="กรอกคะแนน"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
-                  ]" />
+                  ]"
+                />
               </div>
 
-              <div v-for="(data, index) in question4Answer" :key="index" class="row col-12">
+              <div
+                v-for="(data, index) in question4Answer"
+                :key="index"
+                class="row col-12"
+              >
                 <div class="col-6">
-                  <q-input v-model="question4Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
+                  <q-input
-                    autogrow hide-bottom-space outlined class="bg-white" :rules="[
+                    v-model="question4Answer[index]"
+                    :label="`คำตอบที่ ${index + 1}`"
+                    dense
+                    lazy-rules
+                    type="text"
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
                       (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
-                    ]" />
+                    ]"
+                  />
                 </div>
               </div>
             </div>
@@ -365,17 +522,38 @@ const getData = async () => {
             <q-separator />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
               <div class="col-10 text-top0">
-                <q-input v-model="question5Desc" label="คำถามข้อที่ 5" dense lazy-rules type="text" autogrow
+                <q-input
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                  v-model="question5Desc"
-                    (val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 5',
+                  label="คำถามข้อที่ 5"
-                  ]" />
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 5',
+                  ]"
+                />
               </div>
 
               <div class="col-2 text-top0">
-                <q-input v-model="question5Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
+                <q-input
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                  v-model="question5Score"
+                  label="กรอกคะแนน"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
-                  ]" />
+                  ]"
+                />
               </div>
             </div>
           </q-card>
@@ -391,17 +569,38 @@ const getData = async () => {
             <q-separator />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
               <div class="col-10 text-top0">
-                <q-input v-model="question6Desc" label="คำถามข้อที่ 6" dense lazy-rules type="text" autogrow
+                <q-input
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                  v-model="question6Desc"
-                    (val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 6',
+                  label="คำถามข้อที่ 6"
-                  ]" />
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 6',
+                  ]"
+                />
               </div>
 
               <div class="col-2 text-top0">
-                <q-input v-model="question6Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
+                <q-input
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                  v-model="question6Score"
+                  label="กรอกคะแนน"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
-                  ]" />
+                  ]"
+                />
               </div>
             </div>
           </q-card>
@@ -417,24 +616,59 @@ const getData = async () => {
             <q-separator />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
               <div class="col-10 text-top0">
-                <q-input v-model="question7Desc" label="คำถามข้อที่ 7" dense lazy-rules type="text" autogrow
+                <q-input
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                  v-model="question7Desc"
-                    (val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 7',
+                  label="คำถามข้อที่ 7"
-                  ]" />
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 7',
+                  ]"
+                />
               </div>
               <div class="col-2 text-top0">
-                <q-input v-model="question7Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
+                <q-input
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                  v-model="question7Score"
+                  label="กรอกคะแนน"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
-                  ]" />
+                  ]"
+                />
               </div>
 
-              <div v-for="(data, index) in question7Answer" :key="index" class="row col-12">
+              <div
+                v-for="(data, index) in question7Answer"
+                :key="index"
+                class="row col-12"
+              >
                 <div class="col-6">
-                  <q-input v-model="question7Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
+                  <q-input
-                    autogrow hide-bottom-space outlined class="bg-white" :rules="[
+                    v-model="question7Answer[index]"
+                    :label="`คำตอบที่ ${index + 1}`"
+                    dense
+                    lazy-rules
+                    type="text"
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
                       (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
-                    ]" />
+                    ]"
+                  />
                 </div>
               </div>
             </div>
@@ -451,28 +685,62 @@ const getData = async () => {
             <q-separator />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
               <div class="col-10 text-top0">
-                <q-input v-model="question8Desc" label="คำถามข้อที่ 8" dense lazy-rules type="text" autogrow
+                <q-input
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                  v-model="question8Desc"
-                    (val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 8',
+                  label="คำถามข้อที่ 8"
-                  ]" />
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 8',
+                  ]"
+                />
               </div>
 
               <div class="col-2 text-top0">
-                <q-input v-model="question8Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
+                <q-input
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                  v-model="question8Score"
+                  label="กรอกคะแนน"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
-                  ]" />
+                  ]"
+                />
               </div>
 
-              <div v-for="(data, index) in question8Answer" :key="index" class="row col-12">
+              <div
+                v-for="(data, index) in question8Answer"
+                :key="index"
+                class="row col-12"
+              >
                 <div class="col-6">
-                  <q-input v-model="question8Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
+                  <q-input
-                    autogrow hide-bottom-space outlined class="bg-white" :rules="[
+                    v-model="question8Answer[index]"
+                    :label="`คำตอบที่ ${index + 1}`"
+                    dense
+                    lazy-rules
+                    type="text"
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
                       (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
-                    ]" />
+                    ]"
+                  />
                 </div>
               </div>
-
             </div>
           </q-card>
         </div>
@@ -487,28 +755,62 @@ const getData = async () => {
             <q-separator />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
               <div class="col-10 text-top0">
-                <q-input v-model="question9Desc" label="คำถามข้อที่ 9" dense lazy-rules type="text" autogrow
+                <q-input
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                  v-model="question9Desc"
-                    (val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 9',
+                  label="คำถามข้อที่ 9"
-                  ]" />
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 9',
+                  ]"
+                />
               </div>
 
               <div class="col-2 text-top0">
-                <q-input v-model="question9Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
+                <q-input
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                  v-model="question9Score"
+                  label="กรอกคะแนน"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
-                  ]" />
+                  ]"
+                />
               </div>
 
-              <div v-for="(data, index) in question9Answer" :key="index" class="row col-12">
+              <div
+                v-for="(data, index) in question9Answer"
+                :key="index"
+                class="row col-12"
+              >
                 <div class="col-6">
-                  <q-input v-model="question9Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
+                  <q-input
-                    autogrow hide-bottom-space outlined class="bg-white" :rules="[
+                    v-model="question9Answer[index]"
+                    :label="`คำตอบที่ ${index + 1}`"
+                    dense
+                    lazy-rules
+                    type="text"
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
                       (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
-                    ]" />
+                    ]"
+                  />
                 </div>
               </div>
-
             </div>
           </q-card>
         </div>
@@ -523,17 +825,38 @@ const getData = async () => {
             <q-separator />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
               <div class="col-10 text-top0">
-                <q-input v-model="question10Desc" label="คำถามข้อที่ 10" dense lazy-rules type="text" autogrow
+                <q-input
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                  v-model="question10Desc"
-                    (val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 10',
+                  label="คำถามข้อที่ 10"
-                  ]" />
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 10',
+                  ]"
+                />
               </div>
 
               <div class="col-2 text-top0">
-                <q-input v-model="question10Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
+                <q-input
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                  v-model="question10Score"
+                  label="กรอกคะแนน"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
-                  ]" />
+                  ]"
+                />
               </div>
             </div>
           </q-card>
@@ -544,11 +867,8 @@ const getData = async () => {
 
       <q-card-actions class="text-primary q-pa-md">
         <q-space />
-        <q-btn unelevated label="บันทึก" color="public" @click="">
+        <q-btn unelevated label="บันทึก" color="public" @click=""> </q-btn>
-        </q-btn>
-
       </q-card-actions>
-
     </q-form>
   </q-card>
 </template>

src/modules/06_retirement/components/ListRetirement/TableList.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted, computed, watch } from "vue";
 import AddList from "../ListRetirement/AddList.vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
+import { useQuasar, QForm } from "quasar";
 import { useRoute } from "vue-router";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
@@ -21,7 +21,10 @@ const {
   success,
   dialogConfirm,
   dialogRemove,
+  date2Thai,
+  dateToISO,
 } = mixin;
+const myForm = ref<QForm | null>(null);
 
 const retireld_params = route.params.retirementId;
 const modalNote = ref<boolean>(false);
@@ -33,9 +36,9 @@ const filter = ref<string>("");
 const statusUpload = ref<boolean>();
 const modalEdit = ref<boolean>(false);
 const textReport = ref<string>("");
-const employeeType = ref<string>("OFFICER")
+const employeeType = ref<string>("OFFICER");
 
-const columns = ref<any["columns"]>([])
+const columns = ref<any["columns"]>([]);
 const rows = ref<any>([]);
 const visibleColumns = ref<string[]>([
   "order",
@@ -62,6 +65,7 @@ onMounted(() => {
 
 const closeDialog = () => {
   modalNote.value = false;
+  modalUpload.value = false;
 };
 const round = ref<number>();
 const typeReport = ref<string>("");
@@ -87,10 +91,22 @@ const fecthlistprofile = async (id: string) => {
         order: e.order,
         name: e.fullName,
         organizationOrganization: e.organizationOrganization,
-        positionEmployeePosition: res.data.result.type == 'OFFICER' ? e.positionType : e.positionEmployeePosition,
+        positionEmployeePosition:
-        positionEmployeeLevel: res.data.result.type == 'OFFICER' ? (e.positionExecutive != null ? e.positionExecutive : "-") : e.positionEmployeeLevel,
+          res.data.result.type == "OFFICER"
-        positionNumber: res.data.result.type == 'OFFICER' ? e.posNo : e.posNoEmployee,
+            ? e.positionType
-        positionEmployeeGroup: res.data.result.type == 'OFFICER' ? e.position : e.positionEmployeeGroup,
+            : e.positionEmployeePosition,
+        positionEmployeeLevel:
+          res.data.result.type == "OFFICER"
+            ? e.positionExecutive != null
+              ? e.positionExecutive
+              : "-"
+            : e.positionEmployeeLevel,
+        positionNumber:
+          res.data.result.type == "OFFICER" ? e.posNo : e.posNoEmployee,
+        positionEmployeeGroup:
+          res.data.result.type == "OFFICER"
+            ? e.position
+            : e.positionEmployeeGroup,
         organizationAgency: e.organizationAgency,
         organizationGovernmentAgency: e.organizationGovernmentAgency,
         bureau: e.oc,
@@ -136,7 +152,10 @@ const fecthlistprofile = async (id: string) => {
         {
           name: "positionEmployeeGroup",
           align: "left",
-          label: employeeType.value == "OFFICER" ? "ตำแหน่ง (ในสายงาน/ระดับ)" : "กลุ่มงาน",
+          label:
+            employeeType.value == "OFFICER"
+              ? "ตำแหน่ง (ในสายงาน/ระดับ)"
+              : "กลุ่มงาน",
           title: employeeType.value == "OFFICER" ? "ตำแหน่ง" : "กลุ่มงาน",
           subtitle: employeeType.value == "OFFICER" ? "ในสายงาน/ระดับ" : "",
           field: "positionEmployeeGroup",
@@ -146,7 +165,8 @@ const fecthlistprofile = async (id: string) => {
         {
           name: "positionEmployeePosition",
           align: "left",
-          label: employeeType.value == "OFFICER" ? "ตำแหน่ง (ประเภท)" : "ตำแหน่ง",
+          label:
+            employeeType.value == "OFFICER" ? "ตำแหน่ง (ประเภท)" : "ตำแหน่ง",
           title: employeeType.value == "OFFICER" ? "ตำแหน่ง" : "ตำแหน่ง",
           subtitle: employeeType.value == "OFFICER" ? "ประเภท" : "",
           field: "positionEmployeePosition",
@@ -156,7 +176,10 @@ const fecthlistprofile = async (id: string) => {
         {
           name: "positionEmployeeLevel",
           align: "left",
-          label: employeeType.value == "OFFICER" ? "ตำแหน่ง (ทางการบริหาร)" : "ระดับชั้น",
+          label:
+            employeeType.value == "OFFICER"
+              ? "ตำแหน่ง (ทางการบริหาร)"
+              : "ระดับชั้น",
           title: employeeType.value == "OFFICER" ? "ตำแหน่ง" : "ระดับชั้น",
           subtitle: employeeType.value == "OFFICER" ? "ทางการบริหาร" : "",
           field: "positionEmployeeLevel",
@@ -287,25 +310,47 @@ const visibleNote = computed(() => {
   }
 });
 // อัปโหลดไฟล์
-const uploadFile = async (event: any) => {
+const modalUpload = ref<boolean>(false);
-  showLoader();
+const signDate = ref<Date | null>(null);
-  const selectedFile = event;
+const uploadFile = async (event: any, signDate: any) => {
-  const formdata = new FormData();
+  if (myForm.value !== null) {
-  formdata.append("file", selectedFile);
+    myForm.value.validate().then((successmyForm) => {
-  await http
+      if (successmyForm) {
-    .put(config.API.fileRetirement(retireld.value.toString()), formdata)
+        dialogConfirm(
-    .then(() => {
+          $q,
-      success($q, "เพิ่มไฟล์สำเร็จ");
+          async () => {
-    })
+            showLoader();
-    .catch((err) => {
+            const selectedFile = event;
-      messageError($q, err);
+            const formdata = new FormData();
-    })
+            formdata.append("file", selectedFile);
-    .finally(() => {
+            if (signDate != null)
-      fileUpload.value = null;
+              formdata.append("signDate", dateToISO(signDate));
-      fecthlistprofile(retireld.value);
+            await http
-      fecthCheck(retireld.value);
+              .put(
-      hideLoader();
+                config.API.fileRetirement(retireld.value.toString()),
+                formdata
+              )
+              .then(() => {
+                success($q, "เพิ่มไฟล์สำเร็จ");
+              })
+              .catch((err) => {
+                messageError($q, err);
+              })
+              .finally(() => {
+                fileUpload.value = null;
+                signDate.value = null;
+                modalUpload.value = false;
+                fecthlistprofile(retireld.value);
+                fecthCheck(retireld.value);
+                hideLoader();
+              });
+          },
+          "ยืนยันการอัปโหลดเอกสาร",
+          "ต้องการยืนยันการอัปโหลดเอกสารนี้หรือไม่ ?"
+        );
+      }
     });
+  }
 };
 // downloadAttachment
 const downloadAttachment = async (type: string, id: string) => {
@@ -382,69 +427,161 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="backHistory" />
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="backHistory"
+    />
     รายชื่อผู้เกษียณอายุราชการ
   </div>
   <div>
     <q-card class="col-12 q-pa-md">
       <div class="row col-12 q-pb-sm">
         <div class="row">
-          <AddList :dataProfile="dataProfile" :retireld="retireld" :profile-id="profileId" :UpdateListId="UpdateListId"
+          <AddList
-            v-if="statusReport === false &&
+            :dataProfile="dataProfile"
+            :retireld="retireld"
+            :profile-id="profileId"
+            :UpdateListId="UpdateListId"
+            v-if="
+              statusReport === false &&
               (typeReport == 'ADD' || typeReport == '' || typeReport == null) &&
               statusUpload !== true
-              " />
+            "
+          />
           <q-btn color="primary" flat round icon="mdi-dots-vertical">
             <q-menu>
               <q-list style="min-width: 100px">
-                <q-item clickable v-close-popup type="a" @click="openmodalEditReport()" target="_blank">
+                <q-item
-                  <q-item-section avatar><q-icon color="primary" name="mdi-pencil" /></q-item-section>
+                  clickable
+                  v-close-popup
+                  type="a"
+                  @click="
+                    (modalUpload = true), (signDate = null), (fileUpload = null)
+                  "
+                  target="_blank"
+                  v-if="statusUpload !== true"
+                >
+                  <q-item-section avatar
+                    ><q-icon color="blue" name="attach_file"
+                  /></q-item-section>
+                  <q-item-section>อัปโหลดไฟล์ </q-item-section>
+                </q-item>
+                <q-item
+                  clickable
+                  v-close-popup
+                  type="a"
+                  @click="openmodalEditReport()"
+                  target="_blank"
+                >
+                  <q-item-section avatar
+                    ><q-icon color="primary" name="mdi-pencil"
+                  /></q-item-section>
                   <q-item-section>แก้ไข มติ อ.ก.ก. </q-item-section>
                 </q-item>
                 <q-separator />
-                <q-item clickable v-close-popup type="a" @click="downloadAttachment('pdf', retireld)" target="_blank">
+                <q-item
-                  <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
+                  clickable
+                  v-close-popup
+                  type="a"
+                  @click="downloadAttachment('pdf', retireld)"
+                  target="_blank"
+                >
+                  <q-item-section avatar
+                    ><q-icon color="red" name="mdi-file-pdf"
+                  /></q-item-section>
                   <q-item-section>ไฟล์ .PDF</q-item-section>
                 </q-item>
-                <q-item clickable v-close-popup type="a" @click="downloadAttachment('docx', retireld)" target="_blank">
+                <q-item
-                  <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
+                  clickable
+                  v-close-popup
+                  type="a"
+                  @click="downloadAttachment('docx', retireld)"
+                  target="_blank"
+                >
+                  <q-item-section avatar
+                    ><q-icon color="blue" name="mdi-file-word"
+                  /></q-item-section>
                   <q-item-section>ไฟล์ .docx</q-item-section>
                 </q-item>
               </q-list>
             </q-menu>
             <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
           </q-btn>
-          <q-file bg-color="white" clearable outlined dense v-model="fileUpload" accept=".pdf"
+          <!-- <q-file
-            :style="fileUpload === null ? 'width: 150px' : 'width: auto'" label="อัปโหลดไฟล์"
+            bg-color="white"
-            v-if="statusUpload !== true">
+            clearable
+            outlined
+            dense
+            v-model="fileUpload"
+            accept=".pdf"
+            :style="fileUpload === null ? 'width: 150px' : 'width: auto'"
+            label="อัปโหลดไฟล์"
+            v-if="statusUpload !== true"
+          >
             <template v-slot:prepend>
               <q-icon color="light-blue" name="attach_file" />
               <q-tooltip>อัปโหลดไฟล์</q-tooltip>
             </template>
-          </q-file>
+          </q-file> -->
-          <q-btn flat round color="light-blue" icon="upload" @click="uploadFile(fileUpload)" v-if="fileUpload !== null" />
         </div>
         <q-space />
         <div class="row">
           <q-tabs shrink>
-            <q-input borderless outlined dense debounce="300" v-model="filter" placeholder="ค้นหา"
+            <q-input
-              style="max-width: 200px" class="q-ml-sm">
+              borderless
+              outlined
+              dense
+              debounce="300"
+              v-model="filter"
+              placeholder="ค้นหา"
+              style="max-width: 200px"
+              class="q-ml-sm"
+            >
               <template v-slot:append>
                 <q-icon name="search" />
               </template>
             </q-input>
-            <q-select v-model="visibleColumns" multiple outlined dense options-dense
+            <q-select
-              :display-value="$q.lang.table.columns" emit-value map-options :options="columns" option-value="name"
+              v-model="visibleColumns"
-              options-cover style="min-width: 150px" class="gt-xs q-ml-sm">
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+              class="gt-xs q-ml-sm"
+            >
             </q-select>
           </q-tabs>
         </div>
       </div>
 
       <div>
-        <q-table flat dense bordered :rows="rows" :columns="columns" row-key="order" class="custom-header-table"
+        <q-table
-          :filter="filter" :visible-columns="visibleColumns" no-data-label="ไม่มีข้อมูล"
+          flat
-          :pagination-label="paginationLabel" v-model:pagination="pagination">
+          dense
+          bordered
+          :rows="rows"
+          :columns="columns"
+          row-key="order"
+          class="custom-header-table"
+          :filter="filter"
+          :visible-columns="visibleColumns"
+          no-data-label="ไม่มีข้อมูล"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -456,29 +593,45 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 </div>
               </q-th>
               <q-th auto-width />
-              <q-th auto-width v-if="(typeReport === 'EDIT' ||
+              <q-th
-                  typeReport === null ||
+                auto-width
-                  typeReport === '') &&
+                v-if="
-                statusReport === false &&
+                  (typeReport === 'EDIT' ||
-                statusUpload !== true
+                    typeReport === null ||
-                " />
+                    typeReport === '') &&
+                  statusReport === false &&
+                  statusUpload !== true
+                "
+              />
               <q-th auto-width v-else></q-th>
-              <q-th auto-width v-if="(typeReport === 'REMOVE' ||
+              <q-th
-                  typeReport === null ||
+                auto-width
-                  typeReport === '') &&
+                v-if="
-                statusReport === false &&
+                  (typeReport === 'REMOVE' ||
-                statusUpload !== true
+                    typeReport === null ||
-                " />
+                    typeReport === '') &&
+                  statusReport === false &&
+                  statusUpload !== true
+                "
+              />
               <q-th auto-width v-else></q-th>
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer" :style="props.row.profileId === profileId && 'color: #26a69a;'"
+            <q-tr
-              @click.stop="router.push(`/registry/${props.row.profileId}`)">
+              :props="props"
+              class="cursor-pointer"
+              :style="props.row.profileId === profileId && 'color: #26a69a;'"
+              @click.stop="router.push(`/registry/${props.row.profileId}`)"
+            >
               <q-td key="order" :props="props">{{ props.row.order }} </q-td>
               <q-td key="name" :props="props">{{ props.row.name }}</q-td>
-              <q-td class="table_ellipsis" key="organizationOrganization" :props="props">{{
+              <q-td
-                props.row.organizationOrganization }}</q-td>
+                class="table_ellipsis"
+                key="organizationOrganization"
+                :props="props"
+                >{{ props.row.organizationOrganization }}</q-td
+              >
               <q-td key="positionEmployeeGroup" :props="props">{{
                 props.row.positionEmployeeGroup
               }}</q-td>
@@ -502,41 +655,71 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 props.row.bureau
               }}</q-td>
               <q-td auto-width></q-td>
-              <q-td auto-width v-if="(typeReport === 'EDIT' ||
+              <q-td
+                auto-width
+                v-if="
+                  (typeReport === 'EDIT' ||
                     typeReport === null ||
                     typeReport === '') &&
                   statusReport === false &&
                   statusUpload !== true
-                  ">
+                "
-                <q-btn flat round color="primary" icon="mdi-pencil" dense @click.stop="
+              >
-                  (modalNote = true),
+                <q-btn
-                  (note = props.row.reason),
+                  flat
-                  (action = 'edit'),
+                  round
-                  (retireProfileId = props.row.id)
+                  color="primary"
-                  ">
+                  icon="mdi-pencil"
+                  dense
+                  @click.stop="
+                    (modalNote = true),
+                      (note = props.row.reason),
+                      (action = 'edit'),
+                      (retireProfileId = props.row.id)
+                  "
+                >
                   <q-tooltip>กรอกเหตุผล</q-tooltip>
                 </q-btn>
               </q-td>
               <q-td auto-width v-else></q-td>
-              <q-td auto-width v-if="(typeReport === 'REMOVE' ||
+              <q-td
-                  typeReport === null ||
+                auto-width
-                  typeReport === '') &&
+                v-if="
-                statusReport === false &&
+                  (typeReport === 'REMOVE' ||
-                statusUpload !== true
+                    typeReport === null ||
-                ">
+                    typeReport === '') &&
-                <q-btn flat round class="text-red-14" icon="mdi-delete" dense @click.stop="
+                  statusReport === false &&
-                  (modalNote = true),
+                  statusUpload !== true
-                  (action = 'delete'),
+                "
-                  (note = props.row.reason),
+              >
-                  (retireProfileId = props.row.id)
+                <q-btn
-                  "><q-tooltip>ลบข้อมูล</q-tooltip></q-btn>
+                  flat
+                  round
+                  class="text-red-14"
+                  icon="mdi-delete"
+                  dense
+                  @click.stop="
+                    (modalNote = true),
+                      (action = 'delete'),
+                      (note = props.row.reason),
+                      (retireProfileId = props.row.id)
+                  "
+                  ><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
+                >
               </q-td>
               <q-td auto-width v-else></q-td>
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
+            <q-pagination
-              boundary-links direction-links></q-pagination>
+              v-model="pagination.page"
+              color="primary"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
           </template>
         </q-table>
       </div>
@@ -551,21 +734,123 @@ const paginationLabel = (start: number, end: number, total: number) => {
       <q-card-section class="q-pt-none bg-grey-1">
         <div class="row q-col-gutter-sm">
           <div class="col-12">
-            <q-input outlined dense lazy-rules v-model="note" :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+            <q-input
-              :label="`${'กรอกเหตุผล'}`" type="textarea" />
+              outlined
+              dense
+              lazy-rules
+              v-model="note"
+              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+              :label="`${'กรอกเหตุผล'}`"
+              type="textarea"
+            />
           </div>
         </div>
       </q-card-section>
 
       <q-card-actions align="right">
-        <q-btn v-if="action === 'delete'" label="บันทึก" color="secondary" :disable="visibleNote" @click="clickDelete" />
+        <q-btn
-        <q-btn v-else label="บักทึก" color="secondary" @click="saveNote" :disable="visibleNote" />
+          v-if="action === 'delete'"
+          label="บันทึก"
+          color="secondary"
+          :disable="visibleNote"
+          @click="clickDelete"
+        />
+        <q-btn
+          v-else
+          label="บักทึก"
+          color="secondary"
+          @click="saveNote"
+          :disable="visibleNote"
+        />
       </q-card-actions>
     </q-card>
   </q-dialog>
 
-  <DialogPopupReason :modal="modalEdit" title="แก้ไขมติ อ.ก.ก." label="มติ อ.ก.ก." :click-close="closemodalEditReport"
+  <!-- อัปโหลดไฟล์ -->
-    :savaForm="saveEdiitReport" :textReport="textReport" />
+  <q-dialog v-model="modalUpload">
+    <q-card style="width: 50vw">
+      <DialogHeader tittle="อัปโหลดเอกสาร" :close="closeDialog" />
+      <q-separator />
+      <q-card-section>
+        <q-form ref="myForm">
+          <div class="row q-pa-md q-gutter-md">
+            <div class="col-12">
+              <q-file
+                bg-color="white"
+                clearable
+                outlined
+                dense
+                v-model="fileUpload"
+                accept=".pdf"
+                label="อัปโหลดเอกสาร"
+                :rules="[(val) => !!val || `${'กรุณาเลือกเอกสารอัปโหลด'}`]"
+                lazy-rules
+              >
+                <template v-slot:prepend>
+                  <q-icon color="light-blue" name="attach_file" />
+                  <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+                </template>
+              </q-file>
+            </div>
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="signDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                    lazy-rules
+                    :model-value="
+                      signDate !== null ? date2Thai(signDate) : null
+                    "
+                    hide-bottom-space
+                    :label="`${'ประกาศ ณ วันที่'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon name="event" class="cursor-pointer text-primary">
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-form>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn
+          flat
+          round
+          color="public"
+          icon="mdi-content-save-outline"
+          @click="uploadFile(fileUpload, signDate)"
+        >
+          <q-tooltip>บันทึก</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <DialogPopupReason
+    :modal="modalEdit"
+    title="แก้ไขมติ อ.ก.ก."
+    label="มติ อ.ก.ก."
+    :click-close="closemodalEditReport"
+    :savaForm="saveEdiitReport"
+    :textReport="textReport"
+  />
 </template>
 
 <style lang="scss" scope>

src/modules/06_retirement/components/ListRetirement/popupAdd.vue

@@ -53,7 +53,12 @@ const clickAdd = () => {
       action.value = "";
       radio.value = "";
       if (props.actionOptio) {
-        actionOption.value = props.actionOptio;
+        props.actionOptio;
+        let list = props.actionOptio.map((e: any) => ({
+          id: e.id,
+          round: `รอบ ${e.round}  (ฉบับวันที่ ${e.signDate})`,
+        }));
+        actionOption.value = list;
       }
     }
   }

src/modules/06_retirement/components/resign/ResignByid.vue

@@ -69,6 +69,7 @@ const dateLeave = ref<Date | null>(null);
 const reason = ref<string>("");
 const location = ref<string>("");
 const status = ref<string>("");
+const remarkHorizontal = ref<string>("");
 
 const modal = ref<boolean>(false);
 const actionPass = ref<boolean>(false);
@@ -144,6 +145,8 @@ const fetchData = async (id: string) => {
     .get(config.API.resingByid(id))
     .then((res: any) => {
       const data = res.data.result;
+      console.log(data);
+
       let list: TypeFile[] = [];
       if (data.docs.length > 0) {
         data.docs.map((doc: TypeFile) => {
@@ -165,6 +168,7 @@ const fetchData = async (id: string) => {
       reason.value = data.reason ?? "";
       location.value = data.location ?? "";
       status.value = data.status ?? "";
+      remarkHorizontal.value = data.remarkHorizontal ?? "-";
     })
     .catch((e) => {
       messageError($q, e);
@@ -296,11 +300,11 @@ const saveData = async () => {
   formData.append("PositionLevelOld", positionLevelOld.value);
   formData.append("PositionNumberOld", posNo.value);
   formData.append("AmountOld", salary.value.toString());
-  salary;
+  formData.append("remarkHorizontal", remarkHorizontal.value);
   showLoader();
   await http
     .put(config.API.resingByid(id.value), formData)
-    .then((res: any) => {
+    .then(() => {
       success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
       edit.value = false;
     })
@@ -822,7 +826,7 @@ const statusOrder = (val: boolean) => {
               </datepicker>
             </div>
           </div>
-          <div class="col-xs-4 row">
+          <!-- <div class="col-xs-4 row">
             <div class="col-12">
               <datepicker
                 menu-class-name="modalfix"
@@ -871,7 +875,7 @@ const statusOrder = (val: boolean) => {
                 </template>
               </datepicker>
             </div>
-          </div>
+          </div> -->
           <div class="col-12">
             <q-input
               :class="getClass(edit)"
@@ -882,10 +886,25 @@ const statusOrder = (val: boolean) => {
               :borderless="!edit"
               v-model="reason"
               :rules="[
-                (val) => !!val || `${'กรุณากรอกเหตุผลที่ลาออกจากราชการ '}`,
+                (val) => !!val || `${'กรุณากรอกเหตุผลที่ลาออกจากราชการ'}`,
               ]"
               hide-bottom-space
-              :label="`${'เหตุผลที่ลาออกจากราชการ '}`"
+              :label="`${'เหตุผลที่ลาออกจากราชการ (หมายเหตุแนวตั้ง)'}`"
+              type="textarea"
+            />
+          </div>
+          <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="remarkHorizontal"
+              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุแนวนอน '}`]"
+              hide-bottom-space
+              :label="`${'หมายเหตุแนวนอน '}`"
               type="textarea"
             />
           </div>

src/modules/06_retirement/views/Main.vue

@@ -28,10 +28,11 @@ const actionOption = ref<resMain[]>([]);
 
 const visibleColumns = ref<string[]>([
   "no",
+  "signDate",
   "Date",
   "retireNumber",
   "typeReport",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+]);
 
 // หัวตาราง
 const columns = ref<QTableProps["columns"]>([
@@ -43,6 +44,14 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "signDate",
+    align: "left",
+    label: "ประกาศ ณ วันที่",
+    field: "signDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "Date",
     align: "left",
@@ -96,6 +105,7 @@ const fetchRetirement = async (type: string, year: any) => {
       let data = res.data.result;
       rows.value = data.map((items: any) => ({
         id: items.id,
+        signDate: date2Thai(items.signDate) ?? "-",
         Date: date2Thai(items.createdAt),
         year: items.year + 543,
         retireNumber: items.round,
@@ -133,6 +143,7 @@ const fetchRetirement = async (type: string, year: any) => {
         fiscalyear.value = year;
       }
       actionOption.value = rows.value;
+
       rows.value.sort((a, b) => a.round - b.round); // เรียงรอบมากไปน้อย
       checkststus(rows.value);
     })
@@ -352,6 +363,9 @@ const typeReportChangeName = (val: string) => {
                     <q-td key="no" :props="props">
                       {{ props.rowIndex + 1 }}
                     </q-td>
+                    <q-td key="signDate" :props="props">
+                      {{ props.row.signDate }}
+                    </q-td>
                     <q-td key="Date" :props="props">
                       {{ props.row.Date }}
                     </q-td>

src/modules/07_insignia/components/3_result/Dialogbody.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref,watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { QForm, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -11,7 +11,15 @@ import type { DataOption } from "@/modules/04_registry/components/profileType";
 const $q = useQuasar();
 const myForm = ref<any>();
 const mixin = useCounterMixin();
-const { date2Thai,showLoader,success,hideLoader,messageError,dialogConfirm ,dateToISO} = mixin;
+const {
+  date2Thai,
+  showLoader,
+  success,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  dateToISO,
+} = mixin;
 const files = ref<any>();
 const filesReturn = ref<any>();
 const OrganazationId = ref<string>("");
@@ -20,17 +28,17 @@ const OrgList = ref<DataOption[]>([]);
 const OrgList2 = ref<DataOption[]>([]);
 const Datereceive = ref<Date | null>();
 const Datereturn = ref<Date | null>();
-const remark = ref<string>("")
+const remark = ref<string>("");
-const nullii = ref<any>(null)
+const nullii = ref<any>(null);
 const props = defineProps({
   modal: Boolean,
   personId: String,
   close: Function,
   fecthlistInsignia: Function,
-  dateCheckReceive:String,
+  dateCheckReceive: String,
-  dateCheckReturn:String,
+  dateCheckReturn: String,
-  dataModal:Object
+  dataModal: Object,
-})
+});
 // reset วันที่ประกาศราชกิจจานุเบกษา
 const clearReceiveDate = () => {
   Datereceive.value = null;
@@ -40,36 +48,36 @@ const clearReturnDate = () => {
 };
 const close = () => {
   props.close?.();
-      Datereceive.value = null
+  Datereceive.value = null;
-      files.value = null
+  files.value = null;
-      OrganazationId.value = ''
+  OrganazationId.value = "";
-      Datereturn.value = null
+  Datereturn.value = null;
-      filesReturn.value = null
+  filesReturn.value = null;
-      OrganazationId2.value = ''
+  OrganazationId2.value = "";
 };
 
-const SaveData = async (type:string,id:string) => {
+const SaveData = async (type: string, id: string) => {
- await myForm.value.validate().then((result: boolean) => {
+  await myForm.value.validate().then((result: boolean) => {
     if (result) {
-      dialogConfirm($q,() => dataSave(type,id))
+      dialogConfirm($q, () => dataSave(type, id));
-}else{
-}
-
-})};
-const dataSave = (type:string,id:string) => {
-  const formData = new FormData();
-    if(props.dateCheckReceive === null){
-        formData.append("Date", dateToISO(Datereceive.value ?? nullii));
-        formData.append("File", files.value);
-        formData.append("OrgId", OrganazationId.value);
     } else {
-        formData.append("Date", dateToISO(Datereturn.value ?? nullii));
-        formData.append("File", filesReturn.value);
-        formData.append("OrgId", OrganazationId2.value);
     }
+  });
+};
+const dataSave = (type: string, id: string) => {
+  const formData = new FormData();
+  if (props.dateCheckReceive === null) {
+    formData.append("Date", dateToISO(Datereceive.value ?? nullii));
+    formData.append("File", files.value);
+    formData.append("OrgId", OrganazationId.value);
+  } else {
+    formData.append("Date", dateToISO(Datereturn.value ?? nullii));
+    formData.append("File", filesReturn.value);
+    formData.append("OrgId", OrganazationId2.value);
+  }
   showLoader();
-   http
+  http
-    .put(config.API.requestinsignia(type,id), formData)
+    .put(config.API.requestinsignia(type, id), formData)
     .then(() => {
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
@@ -77,17 +85,17 @@ const dataSave = (type:string,id:string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      Datereceive.value = null
+      Datereceive.value = null;
-      files.value = null
+      files.value = null;
-      OrganazationId.value = ''
+      OrganazationId.value = "";
-      Datereturn.value = null
+      Datereturn.value = null;
-      filesReturn.value = null
+      filesReturn.value = null;
-      OrganazationId2.value = ''
+      OrganazationId2.value = "";
       props.close?.();
       hideLoader();
-      props.fecthlistInsignia?.()
+      props.fecthlistInsignia?.();
     });
-}
+};
 const fetchOrgList = async () => {
   showLoader();
   await http
@@ -99,12 +107,12 @@ const fetchOrgList = async () => {
       }));
       OrgList.value = orgArr;
       OrgList2.value = [
-          {
+        {
-            id: "00000000-0000-0000-0000-000000000000",
+          id: "00000000-0000-0000-0000-000000000000",
-            name: "สำนักนายกรัฐมนตรี",
+          name: "สำนักนายกรัฐมนตรี",
-          },
+        },
-          ...orgArr,
+        ...orgArr,
-        ];
+      ];
     })
     .catch((err) => {
       messageError($q, err);
@@ -113,123 +121,237 @@ const fetchOrgList = async () => {
       hideLoader();
     });
 };
-watch(props,()=>{
+watch(props, () => {
-  if(props.dataModal){
+  if (props.dataModal) {
-    Datereceive.value = props.dataModal.dateReceiveInsignia
+    Datereceive.value = props.dataModal.dateReceiveInsignia;
-    Datereturn.value = props.dataModal.dateReturnInsignia
+    Datereturn.value = props.dataModal.dateReturnInsignia;
-    OrganazationId.value = props.dataModal.orgReceiveInsignia
+    OrganazationId.value = props.dataModal.orgReceiveInsignia;
-    OrganazationId2.value = props.dataModal.orgReturnInsignia
+    OrganazationId2.value =
+      Datereturn.value != null
+        ? props.dataModal.orgReturnInsignia == null ||
+          props.dataModal.orgReturnInsignia == "-"
+          ? "00000000-0000-0000-0000-000000000000"
+          : props.dataModal.orgReturnInsignia
+        : "-";
   }
-})
+});
 
-onMounted(()=>{
+onMounted(() => {
-  fetchOrgList()
+  fetchOrgList();
-})
+});
 </script>
 
 <template>
   <q-dialog v-model="props.modal" persistent>
     <q-card style="min-width: 900px">
       <q-toolbar>
-        <q-toolbar-title  class="text-subtitle2 text-bold">รับ-คืนเครื่องราชฯ</q-toolbar-title>
+        <q-toolbar-title class="text-subtitle2 text-bold"
-        <q-btn icon="close" unelevated round dense @click="close" style="color: #ff8080; background-color: #ffdede" />
+          >รับ-คืนเครื่องราชฯ</q-toolbar-title
+        >
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="close"
+          style="color: #ff8080; background-color: #ffdede"
+        />
       </q-toolbar>
       <q-separator />
 
       <q-form ref="myForm">
         <div class="q-pa-md bg-grey-1">
-          <div  class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-12 text-weight-bold text-grey-7">
-                รับเครื่องราชฯ
+              รับเครื่องราชฯ
-              </div>
-              <div class="col-xs-12 col-sm-4">
-
-                <datepicker menu-class-name="modalfix" v-model="Datereceive" :locale="'th'" autoApply borderless
-                  :enableTimePicker="false" week-start="0" :readonly="dateCheckReceive !== null">
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input dense borderless outlined lazy-rules :rules="[(val) => !!val || 'กรุณาเลือกวันที่ได้รับ']"
-                      hide-bottom-space :model-value="Datereceive != null ? date2Thai(Datereceive) : null
-                        " :label="`${'วันที่ได้รับ'}`" clearable @clear="clearReceiveDate" :disable="dateCheckReceive !== null">
-                      <template v-slot:prepend>
-                        <q-icon name="event" class="cursor-pointer" color="primary">
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-
-              <div class="col-xs-12 col-sm-4">
-
-                <q-file outlined dense v-model="files" label="ไฟล์หลักฐานการรับ" lazy-rules
-                  :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']" hide-bottom-space :disable="dateCheckReceive !== null">
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" color="primary" />
-                  </template>
-                </q-file>
-              </div>
-              <div class="col-xs-12 col-sm-4">
-                <q-select  hide-bottom-space :options="OrgList" dense borderless option-label="name" option-value="id"
-                  emit-value map-options outlined v-model="OrganazationId" lazy-rules :label="`หน่วยงานที่รับ`"
-                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']" :disable="dateCheckReceive !== null"/>
-              </div>
             </div>
-            
+            <div class="col-xs-12 col-sm-4">
-            <div v-if="dateCheckReceive !== null" class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+              <datepicker
-              <div class="col-12 q-mt-sm"><q-separator/></div>
+                menu-class-name="modalfix"
-              <div class="col-12 text-weight-bold text-grey-7">
+                v-model="Datereceive"
-                คืนเครื่องราชฯ
+                :locale="'th'"
-              </div>
+                autoApply
-              <div class="col-xs-12 col-sm-4">
+                borderless
-                
+                :enableTimePicker="false"
-                <datepicker menu-class-name="modalfix" v-model="Datereturn" :locale="'th'" autoApply borderless
+                week-start="0"
-                  :enableTimePicker="false" week-start="0" :readonly="dateCheckReturn !== null">
+                :readonly="dateCheckReceive !== null"
-                  <template #year="{ year }">
+              >
-                    {{ year + 543 }}
+                <template #year="{ year }">
-                  </template>
+                  {{ year + 543 }}
-                  <template #year-overlay-value="{ value }">
+                </template>
-                    {{ parseInt(value + 543) }}
+                <template #year-overlay-value="{ value }">
-                  </template>
+                  {{ parseInt(value + 543) }}
-                  <template #trigger>
+                </template>
-                    <q-input dense borderless outlined lazy-rules :rules="[(val) => !!val || 'กรุณาเลือกวันที่คืน']"
+                <template #trigger>
-                      hide-bottom-space :model-value="Datereturn != null ? date2Thai(Datereturn) : undefined
+                  <q-input
-                        " :label="`${'วันที่คืน'}`" clearable @clear="clearReturnDate" :disable="dateCheckReturn !== null">
+                    dense
-                      <template v-slot:prepend>
+                    borderless
-                        <q-icon name="event" class="cursor-pointer" color="primary">
+                    outlined
-                        </q-icon>
+                    lazy-rules
-                      </template>
+                    :rules="[(val) => !!val || 'กรุณาเลือกวันที่ได้รับ']"
-                    </q-input>
+                    hide-bottom-space
-                  </template>
+                    :model-value="
-                </datepicker>
+                      Datereceive != null ? date2Thai(Datereceive) : null
-              </div>
+                    "
-              <div class="col-xs-12 col-sm-4">
+                    :label="`${'วันที่ได้รับ'}`"
-                <q-file outlined dense v-model="filesReturn" label="ไฟล์หลักฐานการคืน" lazy-rules
+                    clearable
-                  :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการคืน']" hide-bottom-space :disable="dateCheckReturn !== null">
+                    @clear="clearReceiveDate"
-                  <template v-slot:prepend>
+                    :disable="dateCheckReceive !== null"
-                    <q-icon name="attach_file" color="primary" />
+                  >
-                  </template>
+                    <template v-slot:prepend>
-                </q-file>
+                      <q-icon
-              </div>
+                        name="event"
-              <div class="col-xs-12 col-sm-4">
+                        class="cursor-pointer"
-                <q-select hide-bottom-space :options="OrgList2" dense borderless option-label="name" option-value="id"
+                        color="primary"
-                  emit-value map-options outlined v-model="OrganazationId2" lazy-rules :label="`หน่วยงานที่คืน` "
+                      >
-                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']" :disable="dateCheckReturn !== null"/>
+                      </q-icon>
-              </div>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-xs-12 col-sm-4">
+              <q-file
+                outlined
+                dense
+                v-model="files"
+                label="ไฟล์หลักฐานการรับ"
+                lazy-rules
+                :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
+                hide-bottom-space
+                :disable="dateCheckReceive !== null"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+            <div class="col-xs-12 col-sm-4">
+              <q-select
+                hide-bottom-space
+                :options="OrgList"
+                dense
+                borderless
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                outlined
+                v-model="OrganazationId"
+                lazy-rules
+                :label="`หน่วยงานที่รับ`"
+                :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']"
+                :disable="dateCheckReceive !== null"
+              />
             </div>
           </div>
 
+          <div
+            v-if="dateCheckReceive !== null"
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-12 q-mt-sm"><q-separator /></div>
+            <div class="col-12 text-weight-bold text-grey-7">
+              คืนเครื่องราชฯ
+            </div>
+            <div class="col-xs-12 col-sm-4">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="Datereturn"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="dateCheckReturn !== null"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    borderless
+                    outlined
+                    lazy-rules
+                    :rules="[(val) => !!val || 'กรุณาเลือกวันที่คืน']"
+                    hide-bottom-space
+                    :model-value="
+                      Datereturn != null ? date2Thai(Datereturn) : undefined
+                    "
+                    :label="`${'วันที่คืน'}`"
+                    clearable
+                    @clear="clearReturnDate"
+                    :disable="dateCheckReturn !== null"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-12 col-sm-4">
+              <q-file
+                outlined
+                dense
+                v-model="filesReturn"
+                label="ไฟล์หลักฐานการคืน"
+                lazy-rules
+                :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการคืน']"
+                hide-bottom-space
+                :disable="dateCheckReturn !== null"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+            <div class="col-xs-12 col-sm-4">
+              <q-select
+                hide-bottom-space
+                :options="OrgList2"
+                dense
+                borderless
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                outlined
+                v-model="OrganazationId2"
+                lazy-rules
+                :label="`หน่วยงานที่คืน`"
+                :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
+                :disable="dateCheckReturn !== null"
+              />
+            </div>
+          </div>
+        </div>
       </q-form>
 
       <q-separator />
       <div class="q-px-md q-py-sm">
         <div class="row justify-end">
-          <q-btn v-if="dateCheckReturn === null" label="บันทึก" color="public" @click="SaveData(props.dateCheckReceive === null ? 'receive':'return',props.personId as string)">
+          <q-btn
+            v-if="dateCheckReturn === null"
+            label="บันทึก"
+            color="public"
+            @click="
+              SaveData(
+                props.dateCheckReceive === null ? 'receive' : 'return',
+                props.personId as string
+              )
+            "
+          >
             <q-tooltip>บันทึก</q-tooltip>
           </q-btn>
         </div>

src/modules/09_leave/components/1_Work/DialogDetail.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+const props = defineProps({
+  modal: {
+    type: Boolean,
+  },
+  detail: {
+    type: Object,
+  },
+  colse: {
+    type: Function,
+  },
+});
+// รายละเอียดข้อมูง
+const titlename = ref<string>("");
+const timeIn = ref<string>("");
+const timeOut = ref<string>("");
+const coordinatesIn = ref<string>("");
+const coordinatesOut = ref<string>("");
+const status = ref<string>("");
+watch(props, () => {
+  if (props.modal) {
+    if (props.detail) {
+      console.log(props.detail);
+      let data = props.detail;
+      titlename.value = data.fullName;
+      timeIn.value = data.timeIn;
+      timeOut.value = data.timeOut;
+      coordinatesIn.value = data.coordinatesIn;
+      coordinatesOut.value = data.coordinatesOut;
+      status.value = data.status;
+    }
+  }
+});
+// ปิด popup
+function colsePopup() {
+  props.colse ? props.colse() : false;
+}
+</script>
+
+<template>
+  <q-dialog v-model="props.modal">
+    <q-card style="width: 950px; max-width: 80vw">
+      <q-card-section>
+        <q-toolbar>
+          <q-toolbar-title>
+            รายละเอียดการลงเวลาของ
+            <span class="text-primary">{{ titlename }}</span>
+          </q-toolbar-title>
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            style="color: #ff8080; background-color: #ffdede"
+            @click="colsePopup"
+          />
+        </q-toolbar>
+      </q-card-section>
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="q-pa-md">
+          <q-banner
+            inline-actions
+            rounded
+            class="bg-grey-2"
+            style="border: 2px solid rgb(215, 212, 212)"
+          >
+            <div class="q-pa-md">
+              <div class="row">
+                <div class="col-4">
+                  <q-list>
+                    <q-item>
+                      <q-item-section>
+                        <q-item-label overline>ชื่อ-นามสกุล</q-item-label>
+                        <q-item-label>{{ titlename }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </div>
+                <div class="col-4">
+                  <q-item>
+                    <q-item-section>
+                      <q-item-label overline>วันที่เข้างาน</q-item-label>
+                      <q-item-label>05 ต.ค. 56</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </div>
+                <div class="col-3">
+                  <q-item>
+                    <q-item-section>
+                      <q-item-label overline>สถานะ</q-item-label>
+                      <q-item-label>{{ status }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </div>
+                <div class="col">
+                  <q-item>
+                    <q-item-section>
+                      <q-item-label
+                        ><q-btn
+                          dense
+                          flat
+                          round
+                          color="primary"
+                          icon="mdi-pencil"
+                        >
+                          <q-tooltip>แก้ไข</q-tooltip>
+                        </q-btn></q-item-label
+                      >
+                    </q-item-section>
+                  </q-item>
+                </div>
+              </div>
+            </div>
+          </q-banner>
+          <div class="row q-gutter-md q-mt-md">
+            <div class="col">
+              <q-card flat bordered>
+                <q-card-section>
+                  <q-list>
+                    <q-item>
+                      <q-item-section class="text-grey-5"
+                        >เวลาเข้างาน</q-item-section
+                      >
+                      <q-item-section> {{ timeIn }} </q-item-section>
+                    </q-item>
+                    <q-item>
+                      <q-item-section class="text-grey-5">พิกัด</q-item-section>
+                      <q-item-section> {{ coordinatesIn }} </q-item-section>
+                    </q-item>
+                    <q-item>
+                      <q-item-section top class="text-grey-5"
+                        >รูปภาพ</q-item-section
+                      >
+                      <q-item-section>
+                        <q-img src="https://picsum.photos/500/300" />
+                      </q-item-section>
+                    </q-item>
+                    <q-item>
+                      <q-item-section class="text-grey-5"
+                        >หมายเหตุ</q-item-section
+                      >
+                      <q-item-section> - </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-card-section>
+              </q-card>
+            </div>
+            <div class="col">
+              <q-card flat bordered>
+                <q-card-section>
+                  <q-list>
+                    <q-item>
+                      <q-item-section class="text-grey-5"
+                        >เวลาออกงาน</q-item-section
+                      >
+                      <q-item-section> {{ timeOut }} </q-item-section>
+                    </q-item>
+                    <q-item>
+                      <q-item-section class="text-grey-5">พิกัด</q-item-section>
+                      <q-item-section> {{ coordinatesOut }} </q-item-section>
+                    </q-item>
+                    <q-item>
+                      <q-item-section top class="text-grey-5"
+                        >รูปภาพ</q-item-section
+                      >
+                      <q-item-section>
+                        <q-img src="https://picsum.photos/500/300" />
+                      </q-item-section>
+                    </q-item>
+                    <q-item>
+                      <q-item-section class="text-grey-5"
+                        >หมายเหตุ</q-item-section
+                      >
+                      <q-item-section> - </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-card-section>
+              </q-card>
+            </div>
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <!-- <q-btn flat label="OK" v-close-popup /> -->
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/09_leave/components/1_Work/TableList.vue

@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+//import Stores
+import { useCounterMixin } from "@/stores/mixin";
+import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
+
+//importComponents
+import DialogDetail from "./DialogDetail.vue";
+
+const mixin = useCounterMixin();
+const workStore = useWorklistDataStore();
+
+const { date2Thai } = mixin;
+const { searchDataFn, filterFn } = workStore;
+onMounted(() => {});
+
+//ข้อมูล Table
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "timeIn",
+    align: "left",
+    label: "เวลาเข้างาน",
+    sortable: true,
+    field: "timeIn",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "coordinatesIn",
+    align: "left",
+    label: "พิกัด",
+    sortable: true,
+    field: "coordinatesIn",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "timeOut",
+    align: "left",
+    label: "เวลาออกงาน",
+    sortable: true,
+    field: "timeOut",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "coordinatesOut",
+    align: "left",
+    label: "พิกัด",
+    sortable: true,
+    field: "coordinatesOut",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullName",
+  "timeIn",
+  "coordinatesIn",
+  "timeOut",
+  "coordinatesOut",
+  "status",
+]);
+//DialogDetail
+const modal = ref<boolean>(false);
+const dataDetail = ref<any>([]);
+// เปิด popup ลายละเอียด
+function clickDetail(data: any) {
+  modal.value = true;
+  dataDetail.value = data;
+} //ปิด popup ลายละเอียด
+function colseDeyail() {
+  modal.value = false;
+}
+
+
+//pagination
+const pagination = ref({
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+</script>
+
+<template>
+  <q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
+    <div class="col-2">
+      <datepicker
+        menu-class-name="modalfix"
+        v-model="workStore.selectDate"
+        :locale="'th'"
+        autoApply
+        :enableTimePicker="false"
+        week-start="0"
+        @update:model-value="
+          searchDataFn(workStore.selectDate, workStore.selectStatus)
+        "
+      >
+        <template #year="{ year }">{{ year + 543 }}</template>
+        <template #year-overlay-value="{ value }">{{
+          parseInt(value + 543)
+        }}</template>
+        <template #trigger>
+          <q-input
+            dense
+            outlined
+            lazy-rules
+            :model-value="
+              workStore.selectDate !== null
+                ? date2Thai(workStore.selectDate)
+                : null
+            "
+            hide-bottom-space
+            :label="`${'วันที่'}`"
+          >
+            <template v-slot:prepend>
+              <q-icon name="event" class="cursor-pointer text-primary">
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+      </datepicker>
+    </div>
+    <div class="col-3">
+      <q-select
+        emit-value
+        map-options
+        outlined
+        dense
+        v-model="workStore.selectStatus"
+        :options="workStore.optionStatus"
+        option-value="id"
+        option-label="name"
+        label="สถานะ"
+        @update:model-value="
+          searchDataFn(workStore.selectDate, workStore.selectStatus)
+        "
+        use-input
+        @filter="filterFn"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template></q-select
+      >
+    </div>
+    <q-space />
+    <div class="col-2">
+      <q-input dense outlined v-model="workStore.filterTable" label="ค้นหา" />
+    </div>
+    <div class="col-2">
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        options-cover
+      />
+    </div>
+  </q-toolbar>
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="workStore.rows"
+    :filter="workStore.filterTable"
+    row-key="id"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+    :pagination-label="paginationLabel"
+    v-model:pagination="pagination"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td key="no" :props="props" @click.prevent="clickDetail(props.row)">
+          {{ props.rowIndex + 1 }}
+        </q-td>
+        <q-td
+          key="fullName"
+          :props="props"
+          @click.prevent="clickDetail(props.row)"
+        >
+          {{ props.row.fullName }}
+        </q-td>
+        <q-td
+          key="timeIn"
+          :props="props"
+          @click.prevent="clickDetail(props.row)"
+        >
+          {{ props.row.timeIn }}
+        </q-td>
+        <q-td
+          key="coordinatesIn"
+          :props="props"
+          @click.prevent="clickDetail(props.row)"
+        >
+          <q-item style="padding: 0">
+            <q-item-section>
+              <q-item-label> {{ props.row.coordinatesIn }}</q-item-label>
+              <q-item-label caption lines="2">{{
+                props.row.latIn + "  " + props.row.longIn
+              }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-td>
+        <q-td
+          key="timeOut"
+          :props="props"
+          @click.prevent="clickDetail(props.row)"
+        >
+          {{ props.row.timeOut }}
+        </q-td>
+        <q-td
+          key="coordinatesOut"
+          :props="props"
+          @click.prevent="clickDetail(props.row)"
+        >
+          <q-item style="padding: 0">
+            <q-item-section>
+              <q-item-label> {{ props.row.coordinatesOut }}</q-item-label>
+              <q-item-label caption lines="2">{{
+                props.row.latOut + "  " + props.row.longOut
+              }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-td>
+        <q-td
+          key="status"
+          :props="props"
+          @click.prevent="clickDetail(props.row)"
+        >
+          {{ props.row.status }}
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="pagination.page"
+        active-color="primary"
+        color="dark"
+        :max="scope.pagesNumber"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+  </d-table>
+
+  <DialogDetail :modal="modal" :detail="dataDetail" :colse="colseDeyail" />
+</template>
+
+<style scoped></style>

src/modules/09_leave/components/2_Leave/DetailLeave.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { useRoute, useRouter } from "vue-router";
+
+const router = useRouter();
+const route = useRoute();
+const paramsId = route.params.id;
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <div class="q-mr-xl">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.push(`/leave-list`)"
+      />
+      รายละเอียดการลาของ {{ paramsId }}
+    </div>
+    <div class="q-ml-xl">
+      <q-btn
+        icon="mdi-download"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+      >
+      <q-btn
+        icon="mdi-upload"
+        unelevated
+        round
+        dense
+        flat
+        color="blue-10"
+        class="q-mr-sm"
+        ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+      >
+    </div>
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <div class="q-pa-md">
+      <q-banner inline-actions rounded class="bg-grey-2">
+        <div class="row q-gutter-md">
+          <div class="col">
+            <q-list>
+              <q-item>
+                <q-item-section avatar class="text-grey-6"
+                  >ประเภทการลา</q-item-section
+                >
+                <q-item-section class="text-primary"> ลาป่วย </q-item-section>
+              </q-item>
+              <q-item>
+                <q-item-section avatar class="text-grey-6">
+                  ชื่อ - นามสกุล</q-item-section
+                >
+
+                <q-item-section> {{ paramsId }} </q-item-section>
+              </q-item>
+            </q-list>
+          </div>
+          <div class="col">
+            <div class="row q-gutter-md">
+              <div class="col">
+                <q-card>
+                  <q-card-section>
+                    <div class="text-h6 text-weight-bold text-blue-10">10</div>
+                    <div class="text-subtitle2">โควต้าลาป่วย</div>
+                  </q-card-section>
+                </q-card>
+              </div>
+              <div class="col">
+                <q-card>
+                  <q-card-section>
+                    <div class="text-h6 text-weight-bold text-light-blue-6">
+                      8
+                    </div>
+                    <div class="text-subtitle2">ลาป่วยไปแล้ว</div>
+                  </q-card-section>
+                </q-card>
+              </div>
+              <div class="col">
+                <q-card>
+                  <q-card-section>
+                    <div class="text-h6 text-weight-bold text-indigo-7">2</div>
+                    <div class="text-subtitle2">คงเหลือโควต้าลาป่วย</div>
+                  </q-card-section>
+                </q-card>
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-banner>
+      <div class="row q-gutter-md q-mt-md">
+        <div class="col">
+          <q-card flat bordered>
+            <q-card-section>
+              <q-list>
+                <q-item>
+                  <q-item-section class="text-grey-5">เขียนที่</q-item-section>
+                  <q-item-section> บ้าน </q-item-section>
+                </q-item>
+                <q-item>
+                  <q-item-section class="text-grey-5"
+                    >รับเงินเดือน</q-item-section
+                  >
+                  <q-item-section> รับเงินเดือน </q-item-section>
+                </q-item>
+                <q-item>
+                  <q-item-section class="text-grey-5">เขียนที่</q-item-section>
+                  <q-item-section> บ้าน </q-item-section>
+                </q-item>
+                <q-item>
+                  <q-item-section class="text-grey-5"
+                    >รับเงินเดือน</q-item-section
+                  >
+                  <q-item-section> รับเงินเดือน </q-item-section>
+                </q-item>
+                <q-item>
+                  <q-item-section class="text-grey-5">
+                    วัน เดือน ปีเริ่มต้น</q-item-section
+                  >
+                  <q-item-section> 14 ก.ค. 2556 </q-item-section>
+                </q-item>
+                <q-item>
+                  <q-item-section class="text-grey-5">
+                    วัน เดือน ปีเริ่มสิ้นสุด</q-item-section
+                  >
+                  <q-item-section> 15 ก.ค. 2556 </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card-section>
+          </q-card>
+        </div>
+        <div class="col">
+          <q-card flat bordered>
+            <q-card-section>
+              <q-list>
+                <q-item>
+                  <q-item-section class="text-grey-5"
+                    >จำนวนวันที่ลา</q-item-section
+                  >
+                  <q-item-section> 1 </q-item-section>
+                </q-item>
+                <q-item>
+                  <q-item-section class="text-grey-5"
+                    >สถานที่ติดต่อขณะลา</q-item-section
+                  >
+                  <q-item-section> สถานที่ติดต่อขณะลา </q-item-section>
+                </q-item>
+                <q-item>
+                  <q-item-section class="text-grey-5"
+                    >หมายเลขที่ติดต่อขณะลา</q-item-section
+                  >
+                  <q-item-section> หมายเลขที่ติดต่อขณะลา </q-item-section>
+                </q-item>
+                <q-item>
+                  <q-item-section class="text-grey-5"
+                    >สถานะการพิจารณา</q-item-section
+                  >
+                  <q-item-section> ขอยกเลิก </q-item-section>
+                </q-item>
+                <q-item>
+                  <q-item-section class="text-h5"> เอกสารแบบ</q-item-section>
+                </q-item>
+                <q-item>
+                  <q-item-section class="text-grey-5">
+                    ไม่พบเอกสาร</q-item-section
+                  >
+                </q-item>
+              </q-list>
+            </q-card-section>
+          </q-card>
+        </div>
+      </div>
+    </div>
+    <q-separator />
+    <div class="row q-pa-md q-gutter-md justify-end">
+      <q-btn color="orange-5" label="ไม่อนุมัติ"
+        ><q-tooltip>ไม่อนุมัติ</q-tooltip>
+      </q-btn>
+      <q-btn color="primary" label="อนุมัติ"
+        ><q-tooltip>อนุมัติ</q-tooltip>
+      </q-btn>
+    </div>
+  </q-card>
+</template>
+
+<style lang="sass" scoped></style>

src/modules/09_leave/components/2_Leave/TableList.vue

@@ -0,0 +1,236 @@
+q
+<script setup lang="ts">
+import { ref } from "vue";
+import type { QTableProps } from "quasar";
+import { useRouter } from "vue-router";
+
+//import Stores
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
+const mixin = useCounterMixin();
+const leaveStore = useLeavelistDataStore();
+
+const router = useRouter();
+
+const { date2Thai } = mixin;
+const { optionYear, searchDataFn, filterOption } = leaveStore; // เรียน funtion จาก stores
+
+// ข้อมูล TABLE
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "leaveType",
+    align: "left",
+    label: "ประเภทการลา",
+    sortable: true,
+    field: "leaveType",
+    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: "Date",
+    align: "left",
+    label: "วันที่ยืนใบลา",
+    sortable: true,
+    field: "Date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "leaveType",
+  "name",
+  "Date",
+  "status",
+]);
+
+const pagination = ref({
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+</script>
+
+<template>
+  <q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
+    <div class="col-2">
+      <q-select
+        emit-value
+        map-options
+        outlined
+        dense
+        v-model="leaveStore.selectYear"
+        :options="optionYear"
+        option-value="id"
+        option-label="name"
+        label="ปีงบประมาณ"
+      />
+    </div>
+    <div class="col-3">
+      <q-select
+        emit-value
+        map-options
+        outlined
+        dense
+        v-model="leaveStore.selectType"
+        :options="leaveStore.optionType"
+        option-value="id"
+        option-label="name"
+        label="ประเภทการลา"
+        @update:model-value="
+          searchDataFn(leaveStore.selectType, leaveStore.selectStatus)
+        "
+        use-input
+        @filter="
+        (inputValue:any, doneFn:Function) =>
+        filterOption(inputValue, doneFn, 'type')
+      "
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template></q-select
+      >
+    </div>
+    <div class="col-2">
+      <q-select
+        v-if="leaveStore.tab == '2'"
+        emit-value
+        map-options
+        outlined
+        dense
+        v-model="leaveStore.selectStatus"
+        :options="leaveStore.optionStatus"
+        option-value="id"
+        option-label="name"
+        label="สถานะ"
+        @update:model-value="
+          searchDataFn(leaveStore.selectType, leaveStore.selectStatus)
+        "
+        use-input
+        @filter="
+        (inputValue:any, doneFn:Function) =>
+        filterOption(inputValue, doneFn, 'status')
+      "
+      />
+    </div>
+    <q-space />
+    <div class="col-2">
+      <q-input dense outlined v-model="leaveStore.filterTable" label="ค้นหา" />
+    </div>
+    <div class="col-2">
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        options-cover
+      />
+    </div>
+  </q-toolbar>
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="leaveStore.rows"
+    :filter="leaveStore.filterTable"
+    row-key="id"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+    :pagination-label="paginationLabel"
+    v-model:pagination="pagination"
+    :loading="leaveStore.loadTable"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <q-tr
+        :props="props"
+        class="cursor-pointer"
+        @click.prevent="router.push(`/leave/detail/${props.row.name}`)"
+      >
+        <q-td key="no" :props="props"> {{ props.rowIndex + 1 }} </q-td>
+        <q-td key="leaveType" :props="props">
+          {{ props.row.leaveType }}
+        </q-td>
+        <q-td key="name" :props="props">
+          {{ props.row.name }}
+        </q-td>
+        <q-td key="Date" :props="props">
+          {{ props.row.Date }}
+        </q-td>
+        <q-td key="timeOut" :props="props">
+          {{ props.row.timeOut }}
+        </q-td>
+        <q-td key="status" :props="props">
+          {{ props.row.status }}
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="pagination.page"
+        active-color="primary"
+        color="dark"
+        :max="scope.pagesNumber"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+    <template v-slot:loading>
+      <q-inner-loading showing color="primary" />
+    </template>
+  </d-table>
+</template>
+
+<style scoped></style>

src/modules/09_leave/interface/index/Main.ts

@@ -0,0 +1,7 @@
+interface DataOption {
+    id: string;
+    name: string;
+}
+export type {
+    DataOption
+};

src/modules/09_leave/router.ts

@@ -0,0 +1,49 @@
+
+const workMain = () => import("@/modules/09_leave/views/WorkingMain.vue")
+const leaveMain = () => import("@/modules/09_leave/views/LeaveListMain.vue");
+const reportMain = () => import("@/modules/09_leave/views/ReportMain.vue")
+const leaveDetail = () => import("@/modules//09_leave/components/2_Leave/DetailLeave.vue")
+
+export default [
+    {
+        path: "/work-list",
+        name: "/work-list",
+        component: workMain,
+        meta: {
+            Auth: true,
+            Key: [9],
+            Role: "coin",
+        },
+    },
+    {
+        path: "/leave-list",
+        name: "/leave-list",
+        component: leaveMain,
+        meta: {
+            Auth: true,
+            Key: [9],
+            Role: "coin",
+        },
+    },
+    {
+        path: "/leave/detail/:id",
+        name: "/leave/detail",
+        component: leaveDetail,
+        meta: {
+            Auth: true,
+            Key: [9],
+            Role: "coin",
+        },
+    },
+    {
+        path: "/statistics-report",
+        name: "/statistics-report",
+        component: reportMain,
+        meta: {
+            Auth: true,
+            Key: [9],
+            Role: "coin",
+        },
+    },
+
+]

src/modules/09_leave/stores/LeaveStore.ts

@@ -0,0 +1,180 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataOption } from "@/modules/09_leave/interface/index/Main"
+
+
+const mixin = useCounterMixin();
+const { date2Thai, showLoader, hideLoader } = mixin;
+export const useLeavelistDataStore = defineStore("leave", () => {
+    //TABMENU
+    const tab = ref<string>("1");
+    const amounttab1 = ref<string>("")
+    const amounttab2 = ref<string>("")
+    //ข้อมูลในตาราง
+    const mainData = ref<any>([])
+    const rows = ref<any>([])
+    const loadTable = ref<boolean>(false)
+    async function fecthList(data: any) {
+        let datalist = data.map((e: any) => ({
+            leaveType: e.leaveType,
+            name: e.name,
+            Date: e.Date,
+            status: convertSatatus(e.status)
+        }))
+        tab.value !== "1" ? mainData.value = datalist : mainData.value = datalist.filter((e: any) => e.status === "อยู่ระหว่างกำเนินการ")
+        const filteramounttab1 = datalist.filter((e: any) => e.status === "อยู่ระหว่างกำเนินการ")
+        amounttab1.value = filteramounttab1.length
+        amounttab2.value = datalist.length
+        await fetchOption()
+        await searchDataFn(selectType.value, selectStatus.value)
+
+
+    }
+    //filter table
+    const selectYear = ref<string>('all')
+    const selectType = ref<string>('all')
+    const selectStatus = ref<string>('all')
+    const optionYear = ref<DataOption[]>([{ id: "all", name: 'ทั้งหมด' }])
+    const optionType = ref<DataOption[]>([])
+    const optionStatus = ref<DataOption[]>([])
+    const optionTypeMain = ref<DataOption[]>([])
+    const optionStatusMain = ref<DataOption[]>([])
+    const filterTable = ref<string>('')
+    function searchDataFn(type: string, status: string) {
+        // selectYear.value = selectYear.value || "all"
+        type = type || "all"
+        status = status || "all"
+        // showLoader()
+        loadTable.value = true
+        if (selectYear.value == "all" && type == "all" && status == "all") {
+            rows.value = mainData.value
+        } else if (selectYear.value !== "all" && type == "all" && status == "all") {
+            console.log("ค้นหาจากปี");
+        } else if (selectYear.value == "all" && type !== "all" && status == "all") {
+            console.log("ค้นหาจากประเภท");
+            rows.value = mainData.value.filter((e: any) => e.leaveType === type)
+        } else if (selectYear.value == "all" && type == "all" && status !== "all") {
+            console.log("ค้นหาจากสถานะ");
+            rows.value = mainData.value.filter((e: any) => e.status === status)
+        } else if (selectYear.value !== "all" && type !== "all" && status == "all") {
+            console.log("ค้นหาจากปีและประเภท");
+        } else if (selectYear.value !== "all" && type == "all" && status !== "all") {
+            console.log("ค้นหาจากปีและสถานะ");
+        } else if (selectYear.value == "all" && type !== "all" && status !== "all") {
+            console.log("ค้นหาจากประเภทและสถานะ");
+            rows.value = mainData.value.filter((e: any) => e.leaveType === type && e.status === status)
+        } else (console.log("ค้นหาจากทั้งหมด"))
+        setTimeout(function () {
+            loadTable.value = false
+        }, 500);
+
+    }
+    function clearFilter() {
+        selectYear.value = "all"
+        selectType.value = "all"
+        selectStatus.value = "all"
+        filterTable.value = ''
+    }
+
+    function fetchOption() {
+        let data = []
+        data = mainData.value
+        const double_leaveType = [
+            ...new Set(data.map((item: any) => item.leaveType)),
+        ];
+        // หา optionType
+        optionTypeMain.value = [{ id: "all", name: "ทั้งหมด" }];
+        for (let i = 1; i <= double_leaveType.length; i++) {
+            const type = double_leaveType[i - 1];
+            if (typeof type === 'string') {
+                const listtype: DataOption = {
+                    id: type,
+                    name: type,
+                };
+                optionTypeMain.value.push(listtype)
+                optionType.value = optionTypeMain.value
+            }
+        }
+        // หา optionStatus
+        const double_status = [
+            ...new Set(data.map((item: any) => item.status)),
+        ];
+        optionStatusMain.value = [{ id: "all", name: "ทั้งหมด" }];
+        for (let i = 1; i <= double_status.length; i++) {
+            const status = double_status[i - 1];
+            if (typeof status === 'string') {
+                const liststatus: DataOption = {
+                    id: status,
+                    name: status,
+                };
+                optionStatusMain.value.push(liststatus);
+                optionStatus.value = optionStatusMain.value
+            }
+        }
+    }
+    // filter option
+    function filterOption(val: string, update: any, type: string) {
+        let data: DataOption[] = []
+        let filter: DataOption[] = []
+        if (type == "type") {
+            data = optionTypeMain.value
+        } else if (type == "status") {
+            data = optionStatusMain.value
+        }
+        if (val == "") {
+            update(() => {
+                filter = data;
+            });
+        } else {
+            update(() => {
+                filter = data.filter(
+                    (e) => e.name.search(val) !== -1
+                );
+            });
+        }
+        if (filter) {
+            if (type == "type") {
+                optionType.value = filter
+            } else if (type == "status") {
+                optionStatus.value = filter
+            }
+        }
+    }
+
+
+    // convertSatatus
+    function convertSatatus(val: string) {
+        switch (val) {
+            case "1":
+                return "ใหม่"
+            case "2":
+                return "อยู่ระหว่างกำเนินการ"
+            case "3":
+                return "อนุมัติ"
+        }
+    }
+    return {
+        tab,
+        amounttab1,
+        amounttab2,
+        //ข้อมูลในตาราง
+        rows,
+        fecthList,
+        loadTable,
+        //filter table
+        filterTable,
+        selectYear,
+        selectType,
+        selectStatus,
+        optionYear,
+        optionType,
+        optionStatus,
+        clearFilter,
+        searchDataFn,
+        filterOption,
+
+
+    };
+})

src/modules/09_leave/stores/WorkStore.ts

@@ -0,0 +1,100 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { DataOption } from "@/modules/09_leave/interface/index/Main"
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+export const useWorklistDataStore = defineStore("work", () => {
+    // ข้อมูลในตาราง
+    const rows = ref<any>([])
+    const dataMain = ref<any>([])
+    function fecthList(data: any) {
+        let datalist = data.map((e: any) => ({
+            fullName: e.fullName,
+            timeIn: e.timeIn,
+            coordinatesIn: e.coordinatesIn,
+            latIn: e.latIn,
+            longIn: e.longIn,
+            timeOut: e.timeOut,
+            coordinatesOut: e.coordinatesOut,
+            latOut: e.latOut,
+            longOut: e.longOut,
+            status: convertSatatus(e.status)
+        }))
+        dataMain.value = datalist
+        fetchOption()
+        searchDataFn(selectDate.value, selectStatus.value)
+    }
+
+    //ค้นหาข้อมูล
+    const filterTable = ref<string>('')
+    const selectDate = ref<Date | null>(null);
+    const selectStatus = ref<String>('all')
+    const optionStatusMain = ref<DataOption[]>([])
+    const optionStatus = ref<DataOption[]>([])
+    function searchDataFn(searchDate: any, srarchStatus: any) {
+        srarchStatus = srarchStatus || "all";
+        if (searchDate == null && srarchStatus == "all") {
+            rows.value = dataMain.value
+        } else if (searchDate == null && srarchStatus !== "all") {
+            rows.value = dataMain.value.filter((e: any) => e.status === convertSatatus(srarchStatus))
+        }
+    }
+    //
+    function fetchOption() {
+        const double_status = [
+            ...new Set(dataMain.value.map((item: any) => item.status)),
+        ];
+        optionStatusMain.value = [{ id: "all", name: "ทั้งหมด" }];
+        for (let i = 1; i <= double_status.length; i++) {
+            const status = double_status[i - 1];
+            if (typeof status === 'string') {
+                const listtype: DataOption = {
+                    id: status,
+                    name: status,
+                };
+                optionStatusMain.value.push(listtype)
+                optionStatus.value = optionStatusMain.value
+            }
+        }
+    }
+    function filterFn(val: string, update: any) {
+        if (val == "") {
+            update(() => {
+                optionStatus.value = optionStatusMain.value;
+            });
+        } else {
+            update(() => {
+                optionStatus.value = optionStatusMain.value.filter(
+                    (e: any) => e.name.search(val) !== -1
+                );
+            });
+        }
+    }
+
+    // convertSatatus
+    function convertSatatus(val: string) {
+        switch (val) {
+            case "1":
+                return "ลงเวลาเรียบร้อย"
+            case "2":
+                return "สายทำงานครบ"
+            default:
+                return "ยังไม่ได้ลงเวลา"
+        }
+    }
+    return {
+        //ข้อมูลในตาราง
+        rows,
+        fecthList,
+        //ค้นหาข้อมูล
+        filterTable,
+        selectDate,
+        selectStatus,
+        optionStatus,
+        searchDataFn,
+        filterFn,
+        convertSatatus
+
+    };
+})

src/modules/09_leave/views/LeaveListMain.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+// importStroe
+import { useLeavelistDataStore } from "../stores/LeaveStore";
+// importComponets
+import TableList from "../components/2_Leave/TableList.vue";
+
+const leaveStore = useLeavelistDataStore();
+const { fecthList, clearFilter } = leaveStore;
+
+onMounted(() => {
+  fecthLeaveList();
+});
+// เรียกข้อมูลจาก API
+function fecthLeaveList() {
+  const data = [
+    {
+      leaveType: "ลาป่วย",
+      name: "นายกัณฐิมา  กาฬสินธ์ุ",
+      Date: "",
+      status: "1",
+    },
+    {
+      leaveType: "ลากิจส่วนตัว",
+      name: "นายนครชัย วันดี",
+      Date: "",
+      status: "3",
+    },
+    {
+      leaveType: "ลากิจส่วนตัว",
+      name: "นายกัณฐิมา  กาฬสินธ์ุ",
+      Date: "",
+      status: "2",
+    },
+    {
+      leaveType: "ลาป่วย",
+      name: "นายปิยรมย์ ศิริธาราฟ",
+      Date: "",
+      status: "2",
+    },
+  ];
+  fecthList(data); // ส่งข้อมูลไป stores
+}
+//เปลี่ยน Tab
+function changTab() {
+  clearFilter();
+  fecthLeaveList();
+}
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">รายการลา</div>
+  <div>
+    <!-- <q-card flat bordered class="col-12 q-mt-sm"> -->
+    <div class="q-pa-md">
+      <q-tabs
+        v-model="leaveStore.tab"
+        dense
+        align="left"
+        inline-label
+        class="bg-grey-4 rounded-borders"
+        indicator-color="white"
+      >
+        <q-tab
+          @click="changTab"
+          name="1"
+          label="รายการลาที่อยู่ระหว่างดำเนิดการ"
+          :class="
+            leaveStore.tab == '1' ? 'bg-white text-primary rounded-borders	' : ''
+          "
+        >
+          <q-badge
+            color="grey-4"
+            :class="
+              leaveStore.tab == '1'
+                ? 'q-px-sm text-weight-medium text-primary q-ml-xl'
+                : 'q-px-sm text-weight-medium text-black q-ml-xl'
+            "
+            :label="leaveStore.amounttab1"
+            rounded
+          />
+        </q-tab>
+        <q-tab
+          @click="changTab"
+          name="2"
+          label="รายการลาทั้งหมด"
+          :class="
+            leaveStore.tab == '2'
+              ? 'bg-white text-primary rounded rounded-borders	'
+              : ''
+          "
+        >
+          <q-badge
+            color="grey-4"
+            :class="
+              leaveStore.tab == '2'
+                ? 'q-px-sm text-weight-medium text-primary q-ml-xl'
+                : 'q-px-sm text-weight-medium text-black q-ml-xl'
+            "
+            :label="leaveStore.amounttab2"
+            rounded
+          />
+        </q-tab>
+      </q-tabs>
+
+      <q-tab-panels v-model="leaveStore.tab" animated>
+        <q-tab-panel name="1">
+          <!-- <TableList1 /> -->
+          <TableList />
+        </q-tab-panel>
+
+        <q-tab-panel name="2">
+          <!-- <TabList2Vue /> -->
+          <TableList />
+        </q-tab-panel>
+      </q-tab-panels>
+    </div>
+    <!-- </q-card> -->
+  </div>
+</template>
+
+<style scoped></style>

src/modules/09_leave/views/ReportMain.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">รายงานสถิติ</div>
+  <div>
+    <q-card flat bordered class="col-12 q-mt-sm"> </q-card>
+  </div>
+</template>
+
+<style scoped></style>

src/modules/09_leave/views/WorkingMain.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+//import Stores
+import { useCounterMixin } from "@/stores/mixin";
+import { useWorklistDataStore } from "../stores/WorkStore";
+//import Components
+import TableList from "../components/1_Work/TableList.vue";
+// use Store
+const mixin = useCounterMixin();
+const workStore = useWorklistDataStore();
+const { date2Thai } = mixin;
+const { fecthList } = workStore;
+
+onMounted(() => {
+  fecthWorkList();
+});
+//เรียกข้อมูลรายการลงเวลาปฏิบัติงาน
+function fecthWorkList() {
+  const listData = [
+    {
+      fullName: "นายกัณฐิมา  กาฬสินธ์ุ",
+      timeIn: "8:04",
+      coordinatesIn: "สำนักงาน",
+      latIn: "18.7903",
+      longIn: "99.0029",
+      timeOut: "18:04",
+      coordinatesOut: "สำนักงาน",
+      latOut: "18.7903",
+      longOut: "99.0029",
+      status: "1",
+    },
+    {
+      fullName: "นายนครชัย วันดี",
+      timeIn: "8:04",
+      coordinatesIn: "สำนักงาน",
+      latIn: "18.7903",
+      longIn: "99.0029",
+      timeOut: "18:04",
+      coordinatesOut: "สำนักงาน",
+      latOut: "18.7903",
+      longOut: "99.0029",
+      status: "2",
+    },
+    {
+      fullName: "นายปิยรมย์ ศิริธาราฟ",
+      timeIn: "8:04",
+      coordinatesIn: "สำนักงาน",
+      latIn: "18.7903",
+      longIn: "99.0029",
+      timeOut: "18:04",
+      coordinatesOut: "สำนักงาน",
+      latOut: "18.7903",
+      longOut: "99.0029",
+      status: "3",
+    },
+    {
+      fullName: "นางสาวปลาทอง ใจกล้า",
+      timeIn: "8:04",
+      coordinatesIn: "สำนักงาน",
+      latIn: "18.7903",
+      longIn: "99.0029",
+      timeOut: "18:04",
+      coordinatesOut: "สำนักงาน",
+      latOut: "18.7903",
+      longOut: "99.0029",
+      status: "1",
+    },
+  ];
+  fecthList(listData); // ส่งข้อมูลไปยัง stores
+}
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการลงเวลาปฏิบัติงาน
+  </div>
+  <div>
+    <q-card flat bordered class="col-12 q-mt-sm">
+      <div class="q-pa-md">
+        <TableList /></div
+    ></q-card>
+  </div>
+</template>
+
+<style scoped></style>

src/modules/10_order/components/step/step02.vue

@@ -292,8 +292,8 @@ const fetchSalary = async (personalId: string) => {
           data.monthSalaryAmount === 0
             ? null
             : data.monthSalaryAmount,
-        // remarkVertical: data.remarkVertical,
+        remarkVertical: data.remarkVertical,
-        // remarkHorizontal: data.remarkHorizontal,
+        remarkHorizontal: data.remarkHorizontal,
       };
     })
     .catch((e) => {
@@ -665,17 +665,22 @@ const pagination = ref({
                 </div>
                 <div class="col-xs-6 col-sm-6 col-md-12" v-if="checkNote">
                   <q-input
+                    dense
                     outlined
                     v-model="modalData.remarkVertical"
                     label="หมายเหตุแนวตั้ง"
+                    type="textarea"
+                    rows="2"
                   />
                 </div>
-                <div class="col-xs-6 col-sm-6 col-md-12"  v-if="checkNote">
+                <div class="col-xs-6 col-sm-6 col-md-12" v-if="checkNote">
                   <q-input
+                    dense
                     outlined
                     v-model="modalData.remarkHorizontal"
                     type="textarea"
                     label="หมายเหตุแนวนอน"
+                    rows="2"
                   />
                 </div>
               </div>

src/router/index.ts

@@ -13,6 +13,7 @@ import ModuleRetirement from "@/modules/06_retirement/router";
 import ModuleInsignia from "@/modules/07_insignia/router";
 import ModuleRegistryEmployee from "@/modules/08_registryEmployee/router";
 import ModuleOrder from "@/modules/10_order/router";
+import ModuleLeave from "@/modules/09_leave/router"
 
 // TODO: ใช้หรือไม่?
 import keycloak from "@/plugins/keycloak";
@@ -44,6 +45,7 @@ const router = createRouter({
         ...ModuleInsignia,
         ...ModuleRegistryEmployee,
         ...ModuleOrder,
+        ...ModuleLeave
       ],
     },
     /**

src/stores/mixin.ts

@@ -198,6 +198,48 @@ export const useCounterMixin = defineStore("mixin", () => {
     return date.getDate().toString().padStart(2, "0") + " " + dstMonth;
   }
 
+  const calAgeYear = (srcDate: Date, birthCal: Date = new Date()) => {
+    const toDay = birthCal;
+    const birth = new Date(srcDate);
+
+    const yearNow = toDay.getFullYear();
+    const monthNow = toDay.getMonth();
+    const dateNow = toDay.getDate();
+
+    const yearDob = birth.getFullYear();
+    const monthDob = birth.getMonth();
+    const dateDob = birth.getDate();
+
+    const lastYear = 12;
+    const subtractDate: Object = moment().subtract(1, "months").endOf("month");
+
+    const lastMonths = new Date(subtractDate.toString()).getDate();
+
+    let yearAge = yearNow - yearDob;
+    let monthAge = 0;
+    let dateAge = 0;
+
+    if (monthNow >= monthDob) {
+      monthAge = monthNow - monthDob;
+    } else {
+      yearAge--;
+      monthAge = lastYear + monthNow - monthDob;
+    }
+
+    if (dateNow >= dateDob) {
+      dateAge = dateNow - dateDob;
+    } else {
+      monthAge--;
+      dateAge = lastMonths + dateNow - dateDob;
+
+      if (monthAge < 0) {
+        monthAge = 11;
+        yearAge--;
+      }
+    }
+    return yearAge;
+  };
+
   function monthYear2Thai(month: number, year: number, isFullMonth = false) {
     const date = new Date(`${year}-${month + 1}-1`);
     const fullMonthThai = [
@@ -809,6 +851,7 @@ export const useCounterMixin = defineStore("mixin", () => {
     dateToISO,
     notify,
     notifyError,
+    calAgeYear,
     dateText,
     monthYear2Thai,
     dateMonth2Thai,

src/views/MainLayout.vue

@@ -217,7 +217,7 @@ onMounted(async () => {
   if (keycloak.tokenParsed) {
     await fetchroleUser(keycloak.tokenParsed.role);
   }
-  
+
   await getDataNotification();
   myEventHandler(null, false);
   window.addEventListener("resize", (e: any) => {
@@ -440,8 +440,20 @@ const clickDelete = (id: string) => {
     <!-- header -->
     <q-header flat class="bg-grey-2 text-dark" height-hint="7">
       <q-toolbar style="padding: 0 2%">
-        <q-btn size="13px" class="bg-grey-3" flat dense round @click="toggleBtnLeft" aria-label="Menu">
+        <q-btn
-          <q-icon :name="miniState == false ? 'mdi-backburger' : 'mdi-menu-open'" size="20px" color="grey-7" />
+          size="13px"
+          class="bg-grey-3"
+          flat
+          dense
+          round
+          @click="toggleBtnLeft"
+          aria-label="Menu"
+        >
+          <q-icon
+            :name="miniState == false ? 'mdi-backburger' : 'mdi-menu-open'"
+            size="20px"
+            color="grey-7"
+          />
         </q-btn>
 
         <q-space />
@@ -457,11 +469,24 @@ const clickDelete = (id: string) => {
         </q-btn>
         -->
         <!-- Notification -->
-        <q-btn round dense flat size="13px" class="q-mx-md bg-grey-3" :color="notiList.length === 0 ? 'grey-6' : 'grey-8'"
+        <q-btn
-          :disable="notiList.length === 0">
+          round
+          dense
+          flat
+          size="13px"
+          class="q-mx-md bg-grey-3"
+          :color="notiList.length === 0 ? 'grey-6' : 'grey-8'"
+          :disable="notiList.length === 0"
+        >
           <q-icon name="mdi-bell" size="18px" color="grey-7" />
-          <q-badge rounded v-show="notiList.length > 0" color="negative" text-color="white" floating>{{ notiList.length
+          <q-badge
-          }}</q-badge>
+            rounded
+            v-show="notiList.length > 0"
+            color="negative"
+            text-color="white"
+            floating
+            >{{ notiList.length }}</q-badge
+          >
           <q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
             <div class="q-px-md q-py-sm row col-12 items-center">
               <div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
@@ -484,8 +509,14 @@ const clickDelete = (id: string) => {
                     date2Thai(n.timereceive)
                   }}</q-item-label>
                 </q-item-section>
-                <q-btn size="sm" unelevated dense icon="mdi-close" class="mybtn q-mx-xs"
+                <q-btn
-                  @click="clickDelete(n.id)"></q-btn>
+                  size="sm"
+                  unelevated
+                  dense
+                  icon="mdi-close"
+                  class="mybtn q-mx-xs"
+                  @click="clickDelete(n.id)"
+                ></q-btn>
               </q-item>
               <q-separator color="grey-2" />
             </q-list>
@@ -509,7 +540,10 @@ const clickDelete = (id: string) => {
                 </q-item-section>
               </q-item>
             </template>
-            <div class="row justify-center" style="border-top: solid 3px #1bb19b !important; width: 273.797px">
+            <div
+              class="row justify-center"
+              style="border-top: solid 3px #1bb19b !important; width: 273.797px"
+            >
               <div class="column items-center col-12 q-py-md" color="grey-3">
                 <q-avatar size="72px" color="grey-4">
                   <q-icon name="mdi-account" color="grey-7" />
@@ -518,7 +552,14 @@ const clickDelete = (id: string) => {
                 <div class="text-subtitle2 q-mt-md q-mb-xs text-center">
                   {{ fullname }}
                 </div>
-                <q-btn color="primary" label="ออกจากระบบ" push size="sm" v-close-popup @click="doLogout" /><!--  -->
+                <q-btn
+                  color="primary"
+                  label="ออกจากระบบ"
+                  push
+                  size="sm"
+                  v-close-popup
+                  @click="doLogout"
+                /><!--  -->
               </div>
 
               <div class="column col-12">
@@ -531,7 +572,13 @@ const clickDelete = (id: string) => {
                   <q-list dense v-for="op in options" :key="op.label">
                     <q-item clickable>
                       <q-item-section avatar>
-                        <q-avatar :color="op.color" text-color="white" :icon="op.icon" size="20px" font-size="12px" />
+                        <q-avatar
+                          :color="op.color"
+                          text-color="white"
+                          :icon="op.icon"
+                          size="20px"
+                          font-size="12px"
+                        />
                       </q-item-section>
                       <q-item-section class="q-py-sm">{{
                         op.label
@@ -543,8 +590,16 @@ const clickDelete = (id: string) => {
             </div>
           </q-btn-dropdown>
         </div>
-        <q-btn size="13px" class="bg-blue-1" v-if="activeBtn() || activeBtnPlacement()" flat dense round
+        <q-btn
-          @click="toggleBtnRight" aria-label="Menu">
+          size="13px"
+          class="bg-blue-1"
+          v-if="activeBtn() || activeBtnPlacement()"
+          flat
+          dense
+          round
+          @click="toggleBtnRight"
+          aria-label="Menu"
+        >
           <q-icon name="mdi-menu" class="rotate-180" size="20px" color="blue" />
         </q-btn>
       </q-toolbar>
@@ -552,47 +607,99 @@ const clickDelete = (id: string) => {
     <!-- end header -->
 
     <!-- drawer -->
-    <q-drawer side="left" class="text-white" style="background: #273238" v-model="drawerL" show-if-above :width="260"
+    <q-drawer
-      :breakpoint="1023" :mini="miniState">
+      side="left"
+      class="text-white"
+      style="background: #273238"
+      v-model="drawerL"
+      show-if-above
+      :width="260"
+      :breakpoint="1023"
+      :mini="miniState"
+    >
       <!--  ส่วนของเมนู mini -->
       <template v-slot:mini>
         <q-scroll-area class="fit mini-slot cursor-pointer">
           <q-toolbar class="q-py-md">
-            <q-img src="@/assets/logo.png" spinner-color="white" style="height: 32px; max-width: 32px" />
+            <q-img
+              src="@/assets/logo.png"
+              spinner-color="white"
+              style="height: 32px; max-width: 32px"
+            />
           </q-toolbar>
           <q-separator color="grey-9" />
           <!-- เมนูย่อย ตอนย่อ -->
           <q-list padding>
             <div v-for="(menuItem, index) in menuList" :key="index">
               <div v-if="role.includes(menuItem.role)">
-                <q-item clickable v-ripple :active="link === menuItem.label" @click="link = menuItem.label"
+                <q-item
+                  clickable
+                  v-ripple
+                  :active="link === menuItem.label"
+                  @click="link = menuItem.label"
                   active-class="text-primary menuActiveMini text-weight-medium"
-                  v-if="menuItem.key == 3 || menuItem.key == 5 || menuItem.key == 6 || menuItem.key == 7 || menuItem.key == 8">
+                  v-if="
+                    menuItem.key == 3 ||
+                    menuItem.key == 5 ||
+                    menuItem.key == 6 ||
+                    menuItem.key == 7 ||
+                    menuItem.key == 8 ||
+                    menuItem.key == 9
+                  "
+                >
                   <div class="row items-center no-wrap">
                     <q-icon :name="menuItem.icon" size="20px" class="q-ml-md" />
-                    <q-icon name="mdi-dots-vertical" size="13px" color="grey-6" />
+                    <q-icon
+                      name="mdi-dots-vertical"
+                      size="13px"
+                      color="grey-6"
+                    />
                   </div>
-                  <q-tooltip anchor="center right" self="center left" :offset="[10, 10]">
+                  <q-tooltip
+                    anchor="center right"
+                    self="center left"
+                    :offset="[10, 10]"
+                  >
                     {{ menuItem.label }}
                   </q-tooltip>
-                  <q-menu anchor="top right" self="top left" :offset="[5, 0]" style="background: #273238; z-index: 9000">
+                  <q-menu
+                    anchor="top right"
+                    self="top left"
+                    :offset="[5, 0]"
+                    style="background: #273238; z-index: 9000"
+                  >
                     <q-list class="text-white q-py-sm">
-                      <div v-for="(subMenu, i) in menuItem.children" :key="i" :to="{ name: `${subMenu.path}` }">
+                      <div
+                        v-for="(subMenu, i) in menuItem.children"
+                        :key="i"
+                        :to="{ name: `${subMenu.path}` }"
+                      >
                         <!-- เมนูย่อย 2 ชั้น -->
                         <div v-if="menuItem.key == 5">
                           <q-item dense clickable v-if="subMenu.key !== 5.1">
-                            <q-item-section>{{ subMenu.label }}
+                            <q-item-section
+                              >{{ subMenu.label }}
                             </q-item-section>
                             <q-item-section side>
                               <q-icon name="keyboard_arrow_right" />
                             </q-item-section>
 
-                            <q-menu anchor="top end" self="top start" :offset="[5, 0]"
+                            <q-menu
-                              style="background: #273238; z-index: 9000">
+                              anchor="top end"
+                              self="top start"
+                              :offset="[5, 0]"
+                              style="background: #273238; z-index: 9000"
+                            >
                               <q-list class="text-white q-py-sm">
-                                <q-item v-for="subMenu2 in subMenu.children" :key="subMenu2.label"
+                                <q-item
-                                  :to="{ name: `${subMenu2.path}` }" dense class="q-pl-md text-body2"
+                                  v-for="subMenu2 in subMenu.children"
-                                  active-class="text-primary active-item text-weight-medium" clickable>
+                                  :key="subMenu2.label"
+                                  :to="{ name: `${subMenu2.path}` }"
+                                  dense
+                                  class="q-pl-md text-body2"
+                                  active-class="text-primary active-item text-weight-medium"
+                                  clickable
+                                >
                                   <q-item-section>
                                     <q-item-label>{{
                                       subMenu2.label
@@ -603,9 +710,14 @@ const clickDelete = (id: string) => {
                             </q-menu>
                           </q-item>
 
-                          <q-item v-else dense class="q-pl-md q-pr-xl text-body2"
+                          <q-item
-                            active-class="text-primary active-item text-weight-medium" clickable
+                            v-else
-                            :to="{ name: `${subMenu.path}` }">
+                            dense
+                            class="q-pl-md q-pr-xl text-body2"
+                            active-class="text-primary active-item text-weight-medium"
+                            clickable
+                            :to="{ name: `${subMenu.path}` }"
+                          >
                             <q-item-section>
                               <q-item-label>{{ subMenu.label }}</q-item-label>
                             </q-item-section>
@@ -613,9 +725,13 @@ const clickDelete = (id: string) => {
                         </div>
                         <!-- เมนูย่อย 1 ชั้น -->
                         <div v-else>
-                          <q-item dense class="q-pl-md q-pr-xl text-body2"
+                          <q-item
-                            active-class="text-primary active-item text-weight-medium" clickable
+                            dense
-                            :to="{ name: `${subMenu.path}` }">
+                            class="q-pl-md q-pr-xl text-body2"
+                            active-class="text-primary active-item text-weight-medium"
+                            clickable
+                            :to="{ name: `${subMenu.path}` }"
+                          >
                             <q-item-section>
                               <q-item-label>{{ subMenu.label }}</q-item-label>
                             </q-item-section>
@@ -625,14 +741,25 @@ const clickDelete = (id: string) => {
                     </q-list>
                   </q-menu>
                 </q-item>
-                <q-item clickable v-ripple :to="{ name: `${menuItem.path}` }" :active="link === menuItem.label"
+                <q-item
-                  @click="link = menuItem.label" active-class="text-primary menuActiveMini" v-else>
+                  clickable
+                  v-ripple
+                  :to="{ name: `${menuItem.path}` }"
+                  :active="link === menuItem.label"
+                  @click="link = menuItem.label"
+                  active-class="text-primary menuActiveMini"
+                  v-else
+                >
                   <q-item-section avatar>
                     <q-avatar size="md" font-size="20px">
                       <q-icon :name="menuItem.icon" />
                     </q-avatar>
                   </q-item-section>
-                  <q-tooltip anchor="center right" self="center left" :offset="[10, 10]">
+                  <q-tooltip
+                    anchor="center right"
+                    self="center left"
+                    :offset="[10, 10]"
+                  >
                     {{ menuItem.label }}
                   </q-tooltip>
                 </q-item>
@@ -647,9 +774,16 @@ const clickDelete = (id: string) => {
       <q-scroll-area class="fit">
         <q-toolbar class="q-py-md">
           <q-toolbar-title shrink class="row items-center no-wrap">
-            <q-img src="@/assets/logo.png" spinner-color="white" style="height: 40px; max-width: 40px" />
+            <q-img
+              src="@/assets/logo.png"
+              spinner-color="white"
+              style="height: 40px; max-width: 40px"
+            />
             <div class="row q-ml-md">
-              <div style="color: #ffffff; letter-spacing: 1px" class="text-body2 text-weight-bolder">
+              <div
+                style="color: #ffffff; letter-spacing: 1px"
+                class="text-body2 text-weight-bolder"
+              >
                 ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
               </div>
               <div class="text-caption text-white">&nbsp;กรุงเทพมหานคร</div>
@@ -661,16 +795,27 @@ const clickDelete = (id: string) => {
           <div v-for="(menuItem, index) in menuList" :key="index">
             <!-- เมนูย่อย -->
             <div v-if="role.includes(menuItem.role)">
-              <q-expansion-item group="somegroup" class="menuSub" expand-icon="mdi-chevron-down"
+              <q-expansion-item
-                expanded-icon="mdi-chevron-up" v-if="menuItem.key == 3 ||
+                group="somegroup"
+                class="menuSub"
+                expand-icon="mdi-chevron-down"
+                expanded-icon="mdi-chevron-up"
+                v-if="
+                  menuItem.key == 3 ||
                   menuItem.key == 5 ||
                   menuItem.key == 6 ||
                   menuItem.key == 7 ||
-                  menuItem.key == 8
+                  menuItem.key == 8 ||
-                  ">
+                  menuItem.key == 9
+                "
+              >
                 <template v-slot:header>
                   <q-item-section avatar>
-                    <q-avatar :icon="menuItem.icon" size="md" font-size="20px" />
+                    <q-avatar
+                      :icon="menuItem.icon"
+                      size="md"
+                      font-size="20px"
+                    />
                   </q-item-section>
                   <q-item-section>{{ menuItem.label }}</q-item-section>
                 </template>
@@ -678,20 +823,38 @@ const clickDelete = (id: string) => {
                 <!-- เมนูย่อย 2 ชั้น (สรรหา) -->
                 <div v-if="menuItem.key == 5">
                   <div v-for="(subMenu, i) in menuItem.children" :key="i">
-                    <q-expansion-item switch-toggle-side dense-toggle :label="subMenu.label" v-if="subMenu.key !== 5.1"
+                    <q-expansion-item
-                      class="expan2" dense>
+                      switch-toggle-side
-                      <q-item dense class="menuSubHover"
+                      dense-toggle
-                        active-class="text-primary active-item text-weight-bold menuSubAct" clickable
+                      :label="subMenu.label"
-                        v-for="subMenu2 in subMenu.children" :key="subMenu2.key" :to="{ name: `${subMenu2.path}` }">
+                      v-if="subMenu.key !== 5.1"
+                      class="expan2"
+                      dense
+                    >
+                      <q-item
+                        dense
+                        class="menuSubHover"
+                        active-class="text-primary active-item text-weight-bold menuSubAct"
+                        clickable
+                        v-for="subMenu2 in subMenu.children"
+                        :key="subMenu2.key"
+                        :to="{ name: `${subMenu2.path}` }"
+                      >
                         <q-item-section>
-                          <q-item-label class="font-400 subLabel">{{ subMenu2.label }}
+                          <q-item-label class="font-400 subLabel"
+                            >{{ subMenu2.label }}
                           </q-item-label>
                         </q-item-section>
                       </q-item>
                     </q-expansion-item>
-                    <q-item v-else dense class="menuSubHover"
+                    <q-item
-                      active-class="text-primary active-item text-weight-bold menuSubAct" clickable
+                      v-else
-                      :to="{ name: `${subMenu.path}` }">
+                      dense
+                      class="menuSubHover"
+                      active-class="text-primary active-item text-weight-bold menuSubAct"
+                      clickable
+                      :to="{ name: `${subMenu.path}` }"
+                    >
                       <q-item-section>
                         <q-item-label>{{ subMenu.label }}</q-item-label>
                       </q-item-section>
@@ -699,9 +862,16 @@ const clickDelete = (id: string) => {
                   </div>
                 </div>
                 <!-- เมนูย่อย 1 ชั้น -->
-                <q-item v-else dense class="menuSubHover"
+                <q-item
-                  active-class="text-primary active-item text-weight-bold menuSubAct" clickable
+                  v-else
-                  v-for="(subMenu, j) in menuItem.children" :key="j" :to="{ name: `${subMenu.path}` }">
+                  dense
+                  class="menuSubHover"
+                  active-class="text-primary active-item text-weight-bold menuSubAct"
+                  clickable
+                  v-for="(subMenu, j) in menuItem.children"
+                  :key="j"
+                  :to="{ name: `${subMenu.path}` }"
+                >
                   <q-item-section>
                     <q-item-label class="font-400">{{
                       subMenu.label
@@ -711,15 +881,26 @@ const clickDelete = (id: string) => {
               </q-expansion-item>
 
               <!-- เมนูปกติ -->
-              <q-item class="text-weight-medium menu" :active="activeMenu(menuItem.path)"
+              <q-item
-                active-class="text-primary active-item text-weight-bold menuActive" :to="{ name: `${menuItem.path}` }"
+                class="text-weight-medium menu"
-                clickable v-ripple dense exact v-else>
+                :active="activeMenu(menuItem.path)"
+                active-class="text-primary active-item text-weight-bold menuActive"
+                :to="{ name: `${menuItem.path}` }"
+                clickable
+                v-ripple
+                dense
+                exact
+                v-else
+              >
                 <q-item-section avatar>
                   <q-avatar size="md" font-size="20px">
-                    <q-icon :name="menuItem.key === active
+                    <q-icon
-                      ? menuItem.activeIcon
+                      :name="
-                      : menuItem.icon
+                        menuItem.key === active
-                      " />
+                          ? menuItem.activeIcon
+                          : menuItem.icon
+                      "
+                    />
                   </q-avatar>
                 </q-item-section>
 
@@ -734,16 +915,37 @@ const clickDelete = (id: string) => {
     </q-drawer>
 
     <!-- drawer page registry/:id -->
-    <q-drawer side="right" class="bg-grey-2" show-if-above v-if="tabScroll()" v-model="drawerR" :width="220"
+    <q-drawer
-      :breakpoint="1023">
+      side="right"
+      class="bg-grey-2"
+      show-if-above
+      v-if="tabScroll()"
+      v-model="drawerR"
+      :width="220"
+      :breakpoint="1023"
+    >
       <q-scroll-area class="fit">
         <q-list padding>
-          <q-item v-for="(tabItem, index) in tabList" :key="index" :id="'tab--' + tabItem.tag" class="tabNative"
+          <q-item
-            active-class="text-blue-7 active-item text-weight-medium tabActive" :active="activeTab(tabItem.tag)" clickable
+            v-for="(tabItem, index) in tabList"
-            v-ripple dense exact @click="tagClick(tabItem.tag)">
+            :key="index"
+            :id="'tab--' + tabItem.tag"
+            class="tabNative"
+            active-class="text-blue-7 active-item text-weight-medium tabActive"
+            :active="activeTab(tabItem.tag)"
+            clickable
+            v-ripple
+            dense
+            exact
+            @click="tagClick(tabItem.tag)"
+          >
             <q-item-section>
-              <q-item-label><q-icon size="11px" name="mdi-circle-medium" /><span class="q-pl-xs">{{ tabItem.label
+              <q-item-label
-              }}</span></q-item-label>
+                ><q-icon size="11px" name="mdi-circle-medium" /><span
+                  class="q-pl-xs"
+                  >{{ tabItem.label }}</span
+                ></q-item-label
+              >
             </q-item-section>
           </q-item>
         </q-list>
@@ -751,16 +953,37 @@ const clickDelete = (id: string) => {
     </q-drawer>
 
     <!-- drawer page placement2/detail/:id -->
-    <q-drawer side="right" class="bg-grey-2" show-if-above v-if="tabScrollPlacement()" v-model="drawerR" :width="220"
+    <q-drawer
-      :breakpoint="1023">
+      side="right"
+      class="bg-grey-2"
+      show-if-above
+      v-if="tabScrollPlacement()"
+      v-model="drawerR"
+      :width="220"
+      :breakpoint="1023"
+    >
       <q-scroll-area class="fit">
         <q-list padding>
-          <q-item v-for="(tabItem, index) in tabListPlacement" :key="index" :id="'tab--' + tabItem.tag" class="tabNative"
+          <q-item
-            active-class="text-blue-7 active-item text-weight-medium tabActive" :active="activeTabPlacement(tabItem.tag)"
+            v-for="(tabItem, index) in tabListPlacement"
-            clickable v-ripple dense exact @click="tagClickPlacement(tabItem.tag)">
+            :key="index"
+            :id="'tab--' + tabItem.tag"
+            class="tabNative"
+            active-class="text-blue-7 active-item text-weight-medium tabActive"
+            :active="activeTabPlacement(tabItem.tag)"
+            clickable
+            v-ripple
+            dense
+            exact
+            @click="tagClickPlacement(tabItem.tag)"
+          >
             <q-item-section>
-              <q-item-label><q-icon size="11px" name="mdi-circle-medium" /><span class="q-pl-xs">{{ tabItem.label
+              <q-item-label
-              }}</span></q-item-label>
+                ><q-icon size="11px" name="mdi-circle-medium" /><span
+                  class="q-pl-xs"
+                  >{{ tabItem.label }}</span
+                ></q-item-label
+              >
             </q-item-section>
           </q-item>
         </q-list>