refactor: redirect to landing page on 404 permission error in messageError

- Display 'ยังไม่ได้แสดงความคิดเห็น' in red when isSysCancel is true
- Hide original comment button when system cancel
- Improve UX for pending comments on cancelled leaves

src/api/09_leave/api.leave.ts

@@ -25,6 +25,7 @@ export default {
   specialTime: () => `${leave}/admin/edit`,
   specialTimeApprove: (id: string) => `${leave}/admin/edit/approve/${id}`,
   specialTimeReject: (id: string) => `${leave}/admin/edit/reject/${id}`,
+  specialTimeApproveLists: `${leave}/admin/edit/approve-list`,
 
   /** รายการลา*/
   leaveType: () => `${leave}/type`,
@@ -63,4 +64,5 @@ export default {
     `${leave}/report/download/time-records/${type}`,
 
   leaveTask: `${leave}/admin/leave-task/process`,
+  leavePendingJobs: `${leave}/pending-jobs/`,
 };

src/api/recruiting/api.period-exam.ts

@@ -98,6 +98,9 @@ export default {
     `${env.API_URI}/placement/candidate/pdf/${candidateId}`,
 
   downloadCandidateExam: (id: string) =>
-    `${periodExam}download/candidate-exam/${id}`,
+    `${exam_report}candidate/candidate-new/${id}`,
   downloadPassExam: (id: string) => `${periodExam}download/pass-exam/${id}`,
+
+  downloadCandidatePassExam: (id: string) =>
+    `${exam_report}candidate/pass-new/${id}`,
 };

src/modules/02_organization/components/DialogFormAgency.vue

@@ -89,6 +89,11 @@ const formData = reactive<FormDataAgency>({
   DIVISION_CODE: "",
   SECTION_CODE: "",
   JOB_CODE: "",
+  ROOT_CODE: "",
+  CHILD1_CODE: "",
+  CHILD2_CODE: "",
+  CHILD3_CODE: "",
+  CHILD4_CODE: "",
 });
 
 /**
@@ -160,6 +165,11 @@ function onSubmit() {
       DIVISION_CODE: formData.DIVISION_CODE,
       SECTION_CODE: formData.SECTION_CODE,
       JOB_CODE: formData.JOB_CODE,
+      ROOT_CODE: formData.ROOT_CODE,
+      CHILD1_CODE: formData.CHILD1_CODE,
+      CHILD2_CODE: formData.CHILD2_CODE,
+      CHILD3_CODE: formData.CHILD3_CODE,
+      CHILD4_CODE: formData.CHILD4_CODE,
     };
 
     // เพิ่มข้อมูล
@@ -189,18 +199,20 @@ function onSubmit() {
             body
           )
           .then(async () => {
-            await props.fetchDataTree(store.draftId);
-            await props.edit?.(
-              props.dataNode?.orgTreeId,
-              type,
-              body,
-              props.dataNode?.orgRootCode
-            );
-            await props.fetchDataTable(
-              props?.dataNode?.orgTreeId,
-              props?.dataNode?.orgLevel,
-              false
-            );
+            await Promise.all([
+              await props.fetchDataTree(store.draftId),
+              await props.edit?.(
+                props.dataNode?.orgTreeId,
+                type,
+                body,
+                props.dataNode?.orgRootCode
+              ),
+              await props.fetchDataTable(
+                props?.dataNode?.orgTreeId,
+                props?.dataNode?.orgLevel,
+                false
+              ),
+            ]);
             await success($q, "บันทึกข้อมูลสำเร็จ");
             closeClear();
           })
@@ -231,6 +243,11 @@ function closeClear() {
   formData.isCommission = false;
   formData.isInformation = false;
   formData.misId = "";
+  formData.ROOT_CODE = "";
+  formData.CHILD1_CODE = "";
+  formData.CHILD2_CODE = "";
+  formData.CHILD3_CODE = "";
+  formData.CHILD4_CODE = "";
   formData.DEPARTMENT_CODE = "";
   formData.DIVISION_CODE = "";
   formData.SECTION_CODE = "";
@@ -456,6 +473,7 @@ watch(
       else {
         props.dataNode?.orgLevel === 1 && checkOfficer();
         if (props.dataNode) {
+          console.log(props.dataNode);
           formData.orgName = props.dataNode.orgTreeName;
           formData.orgShortName = props.dataNode.orgTreeShortName;
           formData.orgCode = props.dataNode.orgTreeCode;
@@ -474,6 +492,11 @@ watch(
           formData.DIVISION_CODE = props.dataNode.DIVISION_CODE;
           formData.SECTION_CODE = props.dataNode.SECTION_CODE;
           formData.JOB_CODE = props.dataNode.JOB_CODE;
+          formData.ROOT_CODE = props.dataNode.ROOT_CODE;
+          formData.CHILD1_CODE = props.dataNode.CHILD1_CODE;
+          formData.CHILD2_CODE = props.dataNode.CHILD2_CODE;
+          formData.CHILD3_CODE = props.dataNode.CHILD3_CODE;
+          formData.CHILD4_CODE = props.dataNode.CHILD4_CODE;
           orgLevelOption.value =
             props.dataNode.orgTreeRank === "DEPARTMENT"
               ? orgLevelOptionMain.value
@@ -730,6 +753,66 @@ watch(
                   </div>
                 </div>
               </div>
+              <div class="col-12">
+                <div class="col-12 row q-col-gutter-sm">
+                  <div class="col">
+                    <q-input
+                      v-model="formData.ROOT_CODE"
+                      dense
+                      outlined
+                      label="ROOT CODE"
+                      hide-bottom-space
+                      :class="classInput(false)"
+                      maxlength="3"
+                    />
+                  </div>
+                  <div class="col">
+                    <q-input
+                      v-model="formData.CHILD1_CODE"
+                      dense
+                      outlined
+                      label="CHILD1 CODE"
+                      hide-bottom-space
+                      :class="classInput(false)"
+                      maxlength="3"
+                    />
+                  </div>
+                  <div class="col">
+                    <q-input
+                      v-model="formData.CHILD2_CODE"
+                      dense
+                      outlined
+                      label="CHILD2 CODE"
+                      hide-bottom-space
+                      :class="classInput(false)"
+                      maxlength="3"
+                    />
+                  </div>
+                  <div class="col">
+                    <q-input
+                      v-model="formData.CHILD3_CODE"
+                      dense
+                      outlined
+                      label="CHILD3 CODE"
+                      hide-bottom-space
+                      :class="classInput(false)"
+                      maxlength="3"
+                    />
+                  </div>
+                  <div class="col">
+                    <q-input
+                      v-model="formData.CHILD4_CODE"
+                      dense
+                      outlined
+                      label="CHILD4 CODE"
+                      hide-bottom-space
+                      :class="classInput(false)"
+                      maxlength="3"
+                    />
+                  </div>
+                </div>
+              </div>
+
               <div class="col-12">
                 <q-input
                   v-model="formData.responsibility"

src/modules/02_organization/components/DialogStructureDetail.vue

@@ -36,6 +36,11 @@ const formData = reactive({
   responsibility: "", //หน้าที่ความรับผิดชอบ
   isCommission: "", //สำนักปลัด
   isDeputy: "", //สำนักงาน กก.
+  rootCode: "", //ROOT CODE
+  child1Code: "", //CHILD1 CODE
+  child2Code: "", //CHILD2 CODE
+  child3Code: "", //CHILD3 CODE
+  child4Code: "", //CHILD4 CODE
 });
 
 /**
@@ -76,6 +81,11 @@ async function fetchDetailTree(id: string, type: string) {
       formData.responsibility = data.responsibility ? data.responsibility : "-";
       formData.isDeputy = data.isDeputy ? "ใช่" : "-";
       formData.isCommission = data.isCommission ? "ใช่" : "-";
+      formData.rootCode = data.ROOT_CODE ? data.ROOT_CODE : "-";
+      formData.child1Code = data.CHILD1_CODE ? data.CHILD1_CODE : "-";
+      formData.child2Code = data.CHILD2_CODE ? data.CHILD2_CODE : "-";
+      formData.child3Code = data.CHILD3_CODE ? data.CHILD3_CODE : "-";
+      formData.child4Code = data.CHILD4_CODE ? data.CHILD4_CODE : "-";
     })
     .catch((err) => {
       messageError($q, err);
@@ -208,6 +218,41 @@ watch(
               </div>
             </div>
 
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">ROOT CODE</div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.rootCode }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">CHILD1 CODE</div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.child1Code }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">CHILD2 CODE</div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.child2Code }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">CHILD3 CODE</div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.child3Code }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">CHILD4 CODE</div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.child4Code }}</p>
+              </div>
+            </div>
+
             <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-4 text-bold">หน้าที่ความรับผิดชอบ</div>
               <div class="col-8 text-grey-8">

src/modules/02_organization/interface/index/Main.ts

@@ -44,6 +44,11 @@ interface FormDataAgency {
   DIVISION_CODE: string;
   SECTION_CODE: string;
   JOB_CODE: string;
+  ROOT_CODE: string;
+  CHILD1_CODE: string;
+  CHILD2_CODE: string;
+  CHILD3_CODE: string;
+  CHILD4_CODE: string;
 }
 
 interface FormDataPosition {

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

@@ -56,6 +56,7 @@ const optionsStatus = ref<ExamResultOption[]>([
   { label: "ขาดสอบ", value: "missed_exam" },
   { label: "ผ่าน", value: "pass" },
   { label: "ไม่ผ่าน", value: "notpass" },
+  { label: "อื่น ๆ", value: "other" },
 ]);
 
 const emit = defineEmits([

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

@@ -363,37 +363,59 @@ async function downloadFileDashboard() {
 }
 
 async function clickPassExam() {
-  showLoader();
-  await http
-    .get(config.API.downloadPassExam(examId.value))
-    .then(async (res) => {
-      const data = res.data.result;
-      data.reportName = `Candidate_Dashboard_${dateToISO(new Date())}`;
-      await genReport(data, data.reportName, "pdf");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  try {
+    showLoader();
+    const res = await http.get(
+      config.API.downloadCandidatePassExam(examId.value),
+      {
+        headers: {
+          "Content-Type": "application/pdf",
+          Accept: "application/pdf",
+        },
+        responseType: "blob",
+      }
+    );
+    const url = window.URL.createObjectURL(new Blob([res.data]));
+    const link = document.createElement("a");
+    link.href = url;
+    link.setAttribute(
+      "download",
+      `Candidate_Dashboard_${dateToISO(new Date())}` + ".pdf"
+    );
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
 async function clickCandidateList() {
-  showLoader();
-  await http
-    .get(config.API.downloadCandidateExam(examId.value))
-    .then(async (res) => {
-      const data = res.data.result;
-      data.reportName = `Candidate_Dashboard_${dateToISO(new Date())}`;
-      await genReport(data, data.reportName, "pdf");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
+  try {
+    showLoader();
+    const res = await http.get(config.API.downloadCandidateExam(examId.value), {
+      headers: {
+        "Content-Type": "application/pdf",
+        Accept: "application/pdf",
+      },
+      responseType: "blob",
     });
+    const url = window.URL.createObjectURL(new Blob([res.data]));
+    const link = document.createElement("a");
+    link.href = url;
+    link.setAttribute("download", "รายชื่อผู้มีสิทธิ์สอบ" + ".pdf");
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
 async function onCheckShowExaminfo() {
@@ -549,8 +571,20 @@ watch(
         </q-btn>
       </div>
       <div>
-        <q-btn icon="mdi-download" round color="green-6" flat>
-          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+        <q-btn
+          icon="mdi-download"
+          round
+          color="green-6"
+          flat
+          :disable="attrs.rows.length === 0"
+        >
+          <q-tooltip>
+            {{
+              attrs.rows.length !== 0
+                ? "ดาวน์โหลดไฟล์"
+                : "ไม่มีข้อมูลผู้สอบคัดเลือก"
+            }}</q-tooltip
+          >
           <q-menu>
             <q-list style="min-width: 100px">
               <!-- <q-item clickable v-close-popup @click="downloadFileDashboard">

src/modules/03_recruiting/interface/request/Period.ts

@@ -46,6 +46,7 @@ interface RequestPeriodCompete {
   year: number;
   announcementDate: string | null;
   rootDnaId: string;
+  scoreExpireDate: string | null;
 }
 
 interface RequestPeriodDisable {
@@ -65,6 +66,7 @@ interface RequestPeriodDisable {
   year: number;
   announcementDate: string | null;
   rootDnaId: string;
+  scoreExpireDate: string | null;
 }
 
 interface RequestPosition {

src/modules/03_recruiting/views/01_compete/PeriodAdd.vue

@@ -56,6 +56,7 @@ const fileImgDataUpload = ref<File[]>([]);
 const fileImgs = ref<UploadType[]>([]);
 const id = ref<string>("");
 const edit = ref<boolean>(false);
+const scoreExpireDate = ref<Date | null>(null); //วันหมดอายุบัญชี
 
 /** กลับไปหน้าหลัก */
 function clickBack() {
@@ -101,6 +102,7 @@ async function fetchData() {
 
       fileDocs.value = files;
       fileImgs.value = images;
+      scoreExpireDate.value = data.scoreExpireDate;
     })
     .catch((e) => {
       messageError($q, e);
@@ -256,7 +258,11 @@ function sendData() {
     year: yearly.value,
     announcementDate:
       dateAnnounce.value !== null ? convertDateToAPI(dateAnnounce.value) : null,
-     rootDnaId: !edit.value ?  dataPositionKeycloak.value.rootDnaId : undefined,
+    scoreExpireDate:
+      scoreExpireDate.value !== null
+        ? convertDateToAPI(scoreExpireDate.value)
+        : null,
+    rootDnaId: !edit.value ? dataPositionKeycloak.value.rootDnaId : undefined,
   };
   return valueData;
 }
@@ -359,6 +365,13 @@ function dateThaiRange(val: [Date, Date]) {
     return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
   }
 }
+function onUpdateScoreExpireDate(val: Date | null) {
+  if (val) {
+    const newDate = new Date(val);
+    newDate.setFullYear(newDate.getFullYear() + 2);
+    scoreExpireDate.value = newDate;
+  }
+}
 
 watch(organizationShortName, (count: DataOption2, prevCount: DataOption2) => {
   organizationNameOptions.value = [];
@@ -455,6 +468,7 @@ onMounted(async () => {
               </template>
             </datepicker>
           </div>
+
           <div class="col-xs-12 col-sm-4 col-md-2" v-if="announcementExam">
             <q-input
               outlined
@@ -470,6 +484,7 @@ onMounted(async () => {
               input-class="text-right"
             ></q-input>
           </div>
+
           <div class="col-xs-12 col-sm-4 col-md-3" v-if="announcementExam">
             <datepicker
               v-model="dateExam"
@@ -505,6 +520,7 @@ onMounted(async () => {
               </template>
             </datepicker>
           </div>
+
           <div class="col-xs-12 col-sm-3 col-md-3">
             <datepicker
               v-model="dateAnnouncement"
@@ -547,6 +563,7 @@ onMounted(async () => {
               </template>
             </datepicker>
           </div>
+
           <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
               v-model="dateRegister"
@@ -572,6 +589,7 @@ onMounted(async () => {
                     dateRegister != null ? dateThaiRange(dateRegister) : null
                   "
                   :label="`${'วันที่สมัคร'}`"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -585,6 +603,7 @@ onMounted(async () => {
               </template>
             </datepicker>
           </div>
+
           <div
             class="col-xs-12 col-sm-3 col-md-3"
             v-if="announcementExam && isFeeNotZero"
@@ -614,6 +633,7 @@ onMounted(async () => {
                   "
                   :label="`${'วันที่ชำระเงิน'}`"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่ชำระเงิน'}`]"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -636,6 +656,7 @@ onMounted(async () => {
               borderless
               :enableTimePicker="false"
               week-start="0"
+              @update:model-value="onUpdateScoreExpireDate"
             >
               <template #year="{ year }">
                 {{ year + 543 }}
@@ -653,6 +674,48 @@ onMounted(async () => {
                   "
                   :label="`${'วันประกาศผลสอบ'}`"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกวันประกาศผลสอบ'}`]"
+                  hide-bottom-space
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+
+          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
+            <datepicker
+              v-model="scoreExpireDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker q-mb-md"
+                  :model-value="
+                    scoreExpireDate != null ? date2Thai(scoreExpireDate) : null
+                  "
+                  :label="`${'วันหมดอายุบัญชี'}`"
+                  clearable
+                  @clear="scoreExpireDate = null"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon

src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue

@@ -47,7 +47,7 @@ const positionPathOptions = ref<DataOption2[]>([]);
 const organizationShortName = ref<DataOption2>({ id: "", name: "" });
 const organizationName = ref<DataOption2>({ id: "", name: "" });
 const organizationNameOptions = ref<DataOption2[]>([]);
-
+const scoreExpireDate = ref<Date | null>(null); //วันหมดอายุบัญชี
 const fileDocDataUpload = ref<File[]>([]);
 const fileDocs = ref<UploadType[]>([]);
 const fileImgDataUpload = ref<File[]>([]);
@@ -93,6 +93,7 @@ async function fetchData() {
         data.announcementDate != null ? new Date(data.announcementDate) : null;
       fileDocs.value = data.documents;
       fileImgs.value = data.images;
+      scoreExpireDate.value = data.scoreExpireDate;
     })
     .catch((e) => {
       messageError($q, e);
@@ -163,6 +164,10 @@ function sendData() {
     announcementDate:
       dateAnnounce.value !== null ? convertDateToAPI(dateAnnounce.value) : null,
     rootDnaId: !edit.value ? dataPositionKeycloak.value.rootDnaId : undefined,
+    scoreExpireDate:
+      scoreExpireDate.value !== null
+        ? convertDateToAPI(scoreExpireDate.value)
+        : null,
   };
   return valueData;
 }
@@ -352,6 +357,14 @@ function dateThaiRange(val: [Date, Date] | null) {
   }
 }
 
+function onUpdateScoreExpireDate(val: Date | null) {
+  if (val) {
+    const newDate = new Date(val);
+    newDate.setFullYear(newDate.getFullYear() + 2);
+    scoreExpireDate.value = newDate;
+  }
+}
+
 watch(organizationShortName, (count: DataOption2, prevCount: DataOption2) => {
   organizationNameOptions.value = [];
 });
@@ -390,7 +403,7 @@ onMounted(async () => {
     <q-form ref="myForm">
       <q-card-section class="q-pa-md">
         <div class="col-xs-12 col-sm-8"></div>
-        <div class="col-12 row items-center q-col-gutter-x-sm">
+        <div class="col-12 row q-col-gutter-sm">
           <div class="col-xs-12 col-sm-6">
             <q-input
               outlined
@@ -402,8 +415,10 @@ onMounted(async () => {
                 (val:string) =>
                   !!val || `${'กรุณากรอกชื่อรอบคัดเลือก/ชื่อประกาศ'}`,
               ]"
+              hide-bottom-space
             ></q-input>
           </div>
+
           <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
             <q-input
               outlined
@@ -413,8 +428,10 @@ onMounted(async () => {
               dense
               lazy-rules
               :rules="[(val:number) => val > 0 || `${'กรุณากรอกรอบการสอบให้ถูกต้อง'}`]"
+              hide-bottom-space
             ></q-input>
           </div>
+
           <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
             <datepicker
               v-model="yearly"
@@ -435,6 +452,7 @@ onMounted(async () => {
                   :model-value="yearly + 543"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
                   :label="`${'ปีงบประมาณ'}`"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -460,6 +478,7 @@ onMounted(async () => {
               :rules="[
                 (val:any) => val >= 0 || `${'กรุณากรอกค่าธรรมเนียมให้ถูกต้อง'}`,
               ]"
+              hide-bottom-space
             ></q-input>
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
@@ -484,6 +503,7 @@ onMounted(async () => {
                   :model-value="dateExam != null ? date2Thai(dateExam) : null"
                   :label="`${'วันที่สอบ'}`"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สอบ'}`]"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -517,10 +537,11 @@ onMounted(async () => {
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker"
                   :model-value="dateThaiRange(dateAnnouncement)"
                   :label="`${'วันที่ประกาศ'}`"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่ประกาศ'}`]"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -554,10 +575,11 @@ onMounted(async () => {
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker"
                   :model-value="dateThaiRange(dateRegister)"
                   :label="`${'วันที่สมัคร'}`"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สมัคร'}`]"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -594,12 +616,13 @@ onMounted(async () => {
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker"
                   :model-value="
                     datePayment != null ? dateThaiRange(datePayment) : null
                   "
                   :label="`${'วันที่ชำระเงิน'}`"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่ชำระเงิน'}`]"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -622,6 +645,7 @@ onMounted(async () => {
               borderless
               :enableTimePicker="false"
               week-start="0"
+              @update:model-value="onUpdateScoreExpireDate"
             >
               <template #year="{ year }">
                 {{ year + 543 }}
@@ -633,12 +657,54 @@ onMounted(async () => {
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker"
                   :model-value="
                     dateAnnounce != null ? date2Thai(dateAnnounce) : null
                   "
                   :label="`${'วันประกาศผลสอบ'}`"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกวันประกาศผลสอบ'}`]"
+                  hide-bottom-space
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+
+          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
+            <datepicker
+              v-model="scoreExpireDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker"
+                  :model-value="
+                    scoreExpireDate != null ? date2Thai(scoreExpireDate) : null
+                  "
+                  :label="`${'วันหมดอายุบัญชี'}`"
+                  clearable
+                  @clear="scoreExpireDate = null"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon

src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue

@@ -93,6 +93,7 @@ const examTypeOptions = [
   { name: "แพทย์", id: "docter" },
 ];
 const category = ref<string>("");
+const scoreExpireDate = ref<Date | null>(null);
 
 const fileDocDataUpload = ref<File[]>([]);
 const fileDocs = ref<UploadType[]>([]);
@@ -333,6 +334,7 @@ async function fetchData() {
       refNo1.value = data.refNo1;
       reason.value = data.reason;
       graduationYearLock.value = data.graduationYearLock;
+      scoreExpireDate.value = data.scoreExpireDate;
     })
     .catch((e) => {
       messageError($q, e);
@@ -506,6 +508,10 @@ function sendData() {
     refNo1: refNo1.value,
     reason: reason.value,
     graduationYearLock: Number(graduationYearLock.value),
+    scoreExpireDate:
+      scoreExpireDate.value != null
+        ? convertDateToAPI(scoreExpireDate.value)
+        : null,
   };
   return valueData;
 }
@@ -939,6 +945,14 @@ watch(
   }
 );
 
+function onUpdateScoreExpireDate(val: Date | null) {
+  if (val) {
+    const newDate = new Date(val);
+    newDate.setFullYear(newDate.getFullYear() + 2);
+    scoreExpireDate.value = newDate;
+  }
+}
+
 onMounted(async () => {
   hideLoader();
   if (route.params.id != undefined) {
@@ -1242,6 +1256,7 @@ onMounted(async () => {
               borderless
               :enableTimePicker="false"
               week-start="0"
+              @update:model-value="onUpdateScoreExpireDate"
             >
               <template #year="{ year }">
                 {{ year + 543 }}
@@ -1275,21 +1290,63 @@ onMounted(async () => {
               </template>
             </datepicker>
           </div>
-          <div class="row col-12" v-if="announcementExam">
-            <div class="col-xs-12 col-md-2">
-              <q-input
-                outlined
-                v-model="graduationYearLock"
-                label="ล็อกวันที่สำเร็จการศึกษา (ปี)"
-                dense
-                :readonly="checkRoutePermisson"
-                lazy-rules
-                :rules="[
+
+          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
+            <datepicker
+              v-model="scoreExpireDate"
+              :locale="'th'"
+              autoApply
+              :readonly="checkRoutePermisson"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  :readonly="checkRoutePermisson"
+                  dense
+                  class="full-width datepicker q-mb-md"
+                  :model-value="
+                    scoreExpireDate != null ? date2Thai(scoreExpireDate) : null
+                  "
+                  :label="`${'วันหมดอายุบัญชี'}`"
+                  clearable
+                  @clear="scoreExpireDate = null"
+                  hide-bottom-space
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+
+          <div class="col-xs-12 col-sm-2 col-md-2" v-if="announcementExam">
+            <q-input
+              outlined
+              v-model="graduationYearLock"
+              label="ล็อกวันที่สำเร็จการศึกษา (ปี)"
+              dense
+              :readonly="checkRoutePermisson"
+              lazy-rules
+              :rules="[
                   (val:string) => !!val || `${'กรุณากรอกล็อกวันที่สำเร็จการศึกษา (ปี)'}`,
                 ]"
-                type="number"
-              ></q-input>
-            </div>
+              type="number"
+            ></q-input>
           </div>
 
           <div class="col-12" v-if="announcementExam">

src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue

@@ -96,11 +96,11 @@ const columnsHistory = ref<QTableColumn[]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "prefix",
+    name: "prefixMain",
     align: "left",
     label: "คำนำหน้าชื่อ",
     sortable: true,
-    field: "prefix",
+    field: "prefixMain",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -256,7 +256,7 @@ const columnsHistory = ref<QTableColumn[]>([
 ]);
 const visibleColumnsHistory = ref<string[]>([
   "citizenId",
-  "prefix",
+  "prefixMain",
   "rank",
   "firstName",
   "lastName",
@@ -304,7 +304,7 @@ function onClickOpenDialog() {
   id.value = informaData.value.id;
   age.value = calculateAge(informaData.value.birthDate);
   formData.citizenId = informaData.value.citizenId;
-  formData.prefix = informaData.value.prefix;
+  formData.prefix = informaData.value.prefixMain;
   formData.rank = informaData.value.rank;
   formData.firstName = informaData.value.firstName;
   formData.lastName = informaData.value.lastName;

src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue

@@ -475,7 +475,7 @@ onMounted(async () => {
       icon="add"
       @click="
         () => {
-          changeNameData.prefix = profileInfo?.prefix;
+          changeNameData.prefix = profileInfo?.prefixMain;
           changeNameData.firstName = profileInfo?.firstName;
           changeNameData.lastName = profileInfo?.lastName;
           changeNameData.rank = profileInfo?.rank;
@@ -661,7 +661,6 @@ onMounted(async () => {
                 lazy-rules
                 emit-value
                 map-options
-                :rules="[(val:string) => !!val || `${'กรุณาเลือกยศ'}`]"
                 hide-bottom-space
                 input-debounce="0"
                 option-label="name"

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

@@ -48,12 +48,12 @@ const props = defineProps({
             </div>
           </div>
 
-          <div class="col">
+          <!-- <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> -->
         </div>
       </q-card>
     </div>

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

@@ -525,14 +525,14 @@ watch(props, () => {
                     <div class="col-7 header-sub-text">
                       <div class="q-pb-sm">ผลการสอบ</div>
                       <div class="q-pb-sm">ลำดับที่สอบได้</div>
-                      <div class="q-pb-sm">จำนวนครั้งที่สมัครสอบ</div>
+                      <!-- <div class="q-pb-sm">จำนวนครั้งที่สมัครสอบ</div> -->
                     </div>
                     <div class="col-5 sub-text-exam">
                       <div class="q-pb-sm">
                         {{ personalForm?.pass }}
                       </div>
                       <div class="q-pb-sm">{{ personalForm?.examNumber }}</div>
-                      <div class="q-pb-sm">{{ personalForm?.examRound }}</div>
+                      <!-- <div class="q-pb-sm">{{ personalForm?.examRound }}</div> -->
                     </div>
                   </div>
                 </div>

src/modules/05_placement/components/probation/DialogOrder.vue

@@ -264,7 +264,7 @@ watch(
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 85%">
-      <DialogHeader :tittle="'ส่งไปออกคำสั่ง'" :close="closeModal" />
+      <DialogHeader :tittle="'ส่งไปออกคำสั่ง'" :close="closeModal" /> 
       <q-separator />
       <q-card-section>
         <div class="row col-12 q-col-gutter-sm">
@@ -341,7 +341,7 @@ watch(
                   keep-color
                   color="primary"
                   dense
-                  :disable="commandType"
+                  :disable="!commandType ? true : false"
                   v-model="scope.selected"
                 />
               </template>
@@ -352,7 +352,7 @@ watch(
                       keep-color
                       color="primary"
                       dense
-                      :disable="commandType"
+                      :disable="!commandType ? true : false"
                       v-model="props.selected"
                     />
                   </q-td>

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

@@ -97,6 +97,8 @@ const develop_result_option = ref<any>([
 
 const isCheckFile = ref<boolean>(false);
 
+const isSelectionPartfour = ref<boolean>(false);
+
 // score
 const score1 = computed(() => {
   if (
@@ -212,20 +214,21 @@ const percent_sum: any = computed(() => {
 });
 const score4 = computed(() => {
   return (
-    (Number(orientation.value) +
-      Number(self_learning.value) +
-      Number(training_seminar.value) +
-      Number(other_training.value)) /
-    4
+    Number(orientation.value) +
+    Number(self_learning.value) +
+    Number(training_seminar.value) +
+    (isSelectionPartfour.value ? Number(other_training.value) : 0)
   );
 });
 const score5 = computed(() => {
-  const total =
+  const rawTotal =
     (Number(orientation_percent.value) +
       Number(self_learning_percent.value) +
       Number(training_seminar_percent.value) +
       Number(other_training_percent.value)) /
-    4;
+    (isSelectionPartfour.value ? 4 : 3);
+
+  const total = Math.trunc(rawTotal);
 
   develop_result.value = total > 60 ? 1 : 0;
 
@@ -1133,10 +1136,20 @@ onMounted(async () => {
               <q-separator class="q-my-xs" />
               <div class="row q-gutter-md align-center q-pl-md">
                 <div class="col-8">
+                  <q-checkbox
+                    class="q-mr-sm"
+                    dense
+                    v-model="isSelectionPartfour"
+                    @update:model-value="
+                      other_training = 0;
+                      other_training_percent = 0;
+                    "
+                  />
                   4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
                 </div>
                 <div class="col">
                   <q-input
+                    :disable="!isSelectionPartfour"
                     outlined
                     dense
                     type="number"
@@ -1148,6 +1161,7 @@ onMounted(async () => {
                 </div>
                 <div class="col">
                   <q-input
+                    :disable="!isSelectionPartfour"
                     outlined
                     dense
                     type="number"

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

@@ -90,6 +90,8 @@ const develop_result_option = ref<any>([
 // footer
 const dateAutherise = ref<any>(null);
 
+const isSelectionPartfour = ref<boolean>(false);
+
 onMounted(() => {
   fecthAssign(assignId.value);
 });
@@ -239,20 +241,21 @@ const percent_sum: any = computed(() => {
 });
 const score4 = computed(() => {
   return (
-    (Number(orientation.value) +
-      Number(self_learning.value) +
-      Number(training_seminar.value) +
-      Number(other_training.value)) /
-    4
+    Number(orientation.value) +
+    Number(self_learning.value) +
+    Number(training_seminar.value) +
+    (isSelectionPartfour.value ? Number(other_training.value) : 0)
   );
 });
 const score5 = computed(() => {
-  const total =
+  const rawTotal =
     (Number(orientation_percent.value) +
       Number(self_learning_percent.value) +
       Number(training_seminar_percent.value) +
       Number(other_training_percent.value)) /
-    4;
+    (isSelectionPartfour.value ? 4 : 3);
+
+  const total = Math.trunc(rawTotal);
 
   develop_result.value = total > 60 ? 1 : 0;
 
@@ -1214,10 +1217,20 @@ watch(lengthdiscipline_level, (newLength) => {
                   <q-separator class="q-my-xs" />
                   <div class="row q-gutter-md align-center q-pl-md">
                     <div class="col-8">
+                      <q-checkbox
+                        class="q-mr-sm"
+                        dense
+                        v-model="isSelectionPartfour"
+                        @update:model-value="
+                          other_training = 0;
+                          other_training_percent = 0;
+                        "
+                      />
                       4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
                     </div>
                     <div class="col">
                       <q-input
+                        :disable="!isSelectionPartfour"
                         outlined
                         dense
                         type="number"
@@ -1231,6 +1244,7 @@ watch(lengthdiscipline_level, (newLength) => {
                         outlined
                         dense
                         type="number"
+                        :disable="!isSelectionPartfour"
                         v-model="other_training_percent"
                         :rules="[(val:number) => val <= 100 || 'ร้อยละต้องไม่เกิน 100']"
                         hide-bottom-space

src/modules/09_leave/components/01_RoundTime/DialogForm.vue

@@ -212,7 +212,7 @@ watch(
           :close="close"
         />
         <q-separator color="grey-4" />
-        <q-card-section style="max-height: 80vh" class="scroll q-pa-none">
+        <q-card-section style="max-height: 55vh" class="scroll q-pa-none">
           <div
             class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
           >
@@ -362,6 +362,7 @@ watch(
               </datepicker>
             </div>
           </div>
+
           <div
             class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
           >
@@ -513,6 +514,7 @@ watch(
               </datepicker>
             </div>
           </div>
+
           <q-input
             class="col-12 bg-white q-ma-md"
             outlined
@@ -522,7 +524,8 @@ watch(
             label="คำอธิบาย"
             hide-bottom-space
             type="textarea"
-          ></q-input>
+          />
+
           <div
             class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
           >
@@ -541,6 +544,7 @@ watch(
               </label>
             </div>
           </div>
+
           <div
             class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
           >
@@ -559,6 +563,7 @@ watch(
             </div>
           </div>
         </q-card-section>
+
         <q-separator color="grey-4" v-if="!isRead" />
         <div class="q-pa-sm" v-if="!isRead">
           <div class="row justify-end">

src/modules/09_leave/components/02_WorkList/Tab4_Pending.vue

@@ -0,0 +1,263 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { QTableProps } from "quasar";
+import type { DataOption } from "@/interface/main";
+import type { DataPendingJobs } from "@/modules/09_leave/interface/response/work";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  useCounterMixin();
+
+/** ข้อมูลตาราง*/
+const keyword = ref<string>("");
+const timeOutMinutes = ref<string>("30");
+const rowsMain = ref<DataPendingJobs[]>([]);
+const rows = ref<DataPendingJobs[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "checkType",
+    align: "left",
+    label: "ลงเวลาเข้า/ลงเวลาออก",
+    sortable: true,
+    field: "checkType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return val ? convertcheckType(val) : "-";
+    },
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return val ? convertStatus(val) : "-";
+    },
+  },
+  {
+    name: "createdDate",
+    align: "left",
+    label: "ลงเวลาเมื่อ",
+    sortable: true,
+    field: "createdDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return val ? date2Thai(val, false, true) : "-";
+    },
+  },
+  {
+    name: "processingDate",
+    align: "left",
+    label: "เริ่มประมวลผล",
+    sortable: true,
+    field: "processingDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return val ? date2Thai(val, false, true) : "-";
+    },
+  },
+  {
+    name: "completedDate",
+    align: "left",
+    label: "ประมวลผลเสร็จ",
+    sortable: true,
+    field: "completedDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return val ? date2Thai(val, false, true) : "-";
+    },
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "createdFullName",
+  "checkType",
+  "status",
+  "createdDate",
+  "processingDate",
+  "completedDate",
+]);
+const timeOutMinutesOption = ref<DataOption[]>([
+  { id: "30", label: "30 นาที" },
+  { id: "60", label: "1 ชั่วโมง" },
+  { id: "1440", label: "1 วัน" },
+  { id: "10080", label: "7 วัน" },
+]);
+
+/** ฟังก์ชันดึงข้อมูลจาก API */
+async function fetchData() {
+  try {
+    showLoader();
+    const res = await http.get(
+      `${config.API.leavePendingJobs}${Number(timeOutMinutes.value)}`
+    );
+
+    rowsMain.value = res.data.result;
+    serchDataTable();
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
+}
+
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+/**
+ * ฟังก์ชันแปลงสถานะเป็นข้อความ
+ * @param val
+ */
+function convertStatus(val: string) {
+  switch (val) {
+    case "PENDING":
+      return "รอดำเนินการ";
+    case "COMPLETED":
+      return "ดำเนินการเสร็จสิ้น";
+    default:
+      break;
+  }
+}
+
+function convertcheckType(val: string) {
+  switch (val) {
+    case "CHECK_OUT":
+      return "ลงเวลาออก";
+    case "CHECK_IN":
+      return "ลงเวลาเข้า";
+    default:
+      break;
+  }
+}
+
+onMounted(() => {
+  fetchData();
+});
+</script>
+
+<template>
+  <div class="row items-center q-gutter-x-sm q-pb-sm">
+    <q-select
+      emit-value
+      map-options
+      outlined
+      dense
+      option-value="id"
+      option-label="label"
+      label="เวลาย้อนหลัง"
+      use-input
+      v-model="timeOutMinutes"
+      hide-selected
+      fill-input
+      :options="timeOutMinutesOption"
+      @update:model-value="fetchData"
+    >
+      <template v-slot:no-option>
+        <q-item>
+          <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+        </q-item>
+      </template>
+    </q-select>
+    <q-space />
+
+    <q-input
+      dense
+      outlined
+      v-model="keyword"
+      label="ค้นหา"
+      @keydown.enter.prevent="serchDataTable"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+    <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"
+      style="min-width: 140px"
+    />
+  </div>
+  <d-table
+    :columns="columns"
+    :rows="rows"
+    row-key="id"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th
+          v-for="col in props.cols"
+          :key="col.name"
+          :props="props"
+          style="color: #000000; font-weight: 500"
+        >
+          <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 v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'no'">
+            {{ props.rowIndex + 1 }}
+          </div>
+          <div v-else>
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+</template>
+
+<style scoped></style>

src/modules/09_leave/components/04_SpecialTime/DialogApprove.vue

@@ -96,8 +96,8 @@ watch(
       formData.checkOut = "";
       formData.note = "";
     } else if (props.editCheck === "PENDING") {
-      if (props.detailData) {
-        if (props.detailData.checkInEdit) {
+      if (props.detailData) { 
+       if (props.detailData.checkInEdit && props.detailData.checkOutEdit) {
           formData.checkIn = props.detailData.startTimeMorning;
           formData.checkOut = props.detailData.endTimeAfternoon;
         } else if (

src/modules/09_leave/components/04_SpecialTime/DialogMultipleApprove.vue

@@ -0,0 +1,344 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
+import { usePagination } from "@/composables/usePagination";
+
+import type { QTableProps } from "quasar";
+import type { DataSpecialTime } from "@/modules/09_leave/interface/index/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const store = useSpecialTimeStore();
+const {
+  hideLoader,
+  messageError,
+  showLoader,
+  success,
+  date2Thai,
+  dialogConfirm,
+  dialogMessageNotify,
+  dateToISO,
+} = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", fetchDataList);
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  fetchData: { type: Function, default: () => {} },
+  dateThaiRange: { type: Function, default: () => {} },
+  columns: { type: Array as () => QTableProps["columns"], default: () => [] },
+  visibleColumnsMain: { type: Array as () => string[], default: () => [] },
+});
+
+const filterKeyword = ref<string>("");
+const filterStatus = ref<string>("PENDING");
+const filterDate = ref<[Date, Date] | null>([new Date(), new Date()]); //วันที่ประกาศ
+
+const rows = ref<DataSpecialTime[]>([]);
+const visibleColumns = ref<string[]>(props.visibleColumnsMain);
+const selected = ref<DataSpecialTime[]>([]);
+const reason = ref<string>("");
+
+/** ฟังก์ชันเรียกข้อมูลรายการลงเวลากรณีพิเศษ*/
+async function fetchDataList() {
+  showLoader();
+  selected.value = [];
+  await http
+    .get(config.API.specialTime(), {
+      params: {
+        ...params.value,
+        keyword: filterKeyword.value.trim(),
+        status: filterStatus.value,
+        startDate: filterDate.value ? dateToISO(filterDate.value[0]) : null,
+        endDate: filterDate.value ? dateToISO(filterDate.value[1]) : null,
+      },
+    })
+    .then(async (res) => {
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      if (result.data.length > 0) {
+        rows.value = result.data.map((e: DataSpecialTime) => ({
+          ...e,
+          date: date2Thai(new Date(e.createdAt), false, true),
+          dateFix: date2Thai(new Date(e.checkDate)),
+          timeMorning:
+            e.startTimeMorning == null
+              ? "-"
+              : e.checkInEdit == true
+              ? e.startTimeMorning + " - " + e.endTimeMorning
+              : "-",
+          timeAfternoon:
+            e.startTimeAfternoon == null
+              ? "-"
+              : e.checkOutEdit == true
+              ? e.startTimeAfternoon + " - " + e.endTimeAfternoon
+              : "-",
+          checkIn: e.checkInTime,
+          checkOut: e.checkOutTime,
+          checkInStatus: store.convertStatus(e.checkInStatus),
+          checkOutStatus: store.convertStatus(e.checkOutStatus),
+          checkInStatusMain: e.checkInStatus,
+          checkOutStatusMain: e.checkOutStatus,
+        }));
+      } else {
+        rows.value = [];
+      }
+    })
+    .catch((e) => {
+      rows.value = [];
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ฟังก์ชันบันทึกข้อมูล*/
+function onSubmit() {
+  if (selected.value.length === 0) {
+    dialogMessageNotify($q, "กรุณาเลือกอย่างน้อย 1 รายการ");
+  } else {
+    dialogConfirm($q, async () => {
+      showLoader();
+      const payload = selected.value.map((e: DataSpecialTime) => {
+        let checkInTime: string;
+        let checkOutTime: string;
+
+        if (e.checkInEdit && e.checkOutEdit) {
+          checkInTime = e.startTimeMorning;
+          checkOutTime = e.endTimeAfternoon;
+        } else if (e.checkInEdit && !e.checkOutEdit) {
+          checkInTime = e.startTimeMorning;
+          checkOutTime = e.endTimeMorning;
+        } else if (!e.checkInEdit && e.checkOutEdit) {
+          checkInTime = e.startTimeAfternoon;
+          checkOutTime = e.endTimeAfternoon;
+        } else {
+          checkInTime = e.checkInTime;
+          checkOutTime = e.checkOutTime;
+        }
+
+        return {
+          recId: e.id,
+          checkInTime,
+          checkOutTime,
+          checkInStatus: e.checkInEdit ? "NORMAL" : e.checkInStatusMain,
+          checkOutStatus: e.checkOutEdit ? "NORMAL" : e.checkOutStatusMain,
+          reason: reason.value,
+        };
+      });
+
+      try {
+        await http.put(config.API.specialTimeApproveLists, payload);
+        await props.fetchData();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        handleClose();
+      } catch (error) {
+        messageError($q, error);
+      } finally {
+        hideLoader();
+      }
+    });
+  }
+}
+
+/** ฟังก์ชั่นค้นหาข้อมูล */
+function onSearchData() {
+  pagination.value.page = 1;
+  fetchDataList();
+}
+
+/** ฟังก์ชันปิด*/
+function handleClose() {
+  modal.value = false;
+  selected.value = [];
+  rows.value = [];
+  reason.value = "";
+  filterDate.value = [new Date(), new Date()];
+  filterKeyword.value = "";
+  pagination.value.page = 1;
+}
+
+watch(modal, async (val) => {
+  if (val) {
+    await fetchDataList();
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 800px">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          tittle="อนุมัติการลงเวลากรณีพิเศษแบบหลายรายการ"
+          :close="handleClose"
+        />
+        <q-separator />
+        <q-card-section class="row q-col-gutter-sm">
+          <div class="col-12">
+            <div class="row col-12 q-col-gutter-sm">
+              <div class="col-xs-12 col-sm-6 col-md-5">
+                <datepicker
+                  v-model="filterDate"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  range
+                  :enableTimePicker="false"
+                  week-start="0"
+                  @update:modelValue="onSearchData()"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      class="full-width datepicker"
+                      :model-value="
+                        filterDate != null ? dateThaiRange(filterDate) : null
+                      "
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+
+              <q-space v-if="!$q.screen.xs && !$q.screen.sm" />
+              <div class="col-xs-12 col-sm-6 col-md-4">
+                <q-input
+                  standout
+                  dense
+                  v-model="filterKeyword"
+                  outlined
+                  placeholder="ค้นหาชื่อ-นามสกุล"
+                  @keydown.enter.prevent="onSearchData()"
+                >
+                  <template v-slot:append>
+                    <q-icon name="search" />
+                  </template>
+                </q-input>
+              </div>
+
+              <div class="col-xs-12 col-sm-6 col-md-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"
+                />
+              </div>
+            </div>
+          </div>
+          <span class="text-red"
+            >*หมายเหตุเลือกทั้งหมดเฉพาะรายการที่แสดงเท่านั้น</span
+          >
+          <div class="col-12">
+            <p-table
+              :columns="columns"
+              :rows="rows"
+              row-key="id"
+              flat
+              bordered
+              :paging="false"
+              dense
+              :visible-columns="visibleColumns"
+              :rows-per-page-options="[10, 25, 50, 100]"
+              v-model:pagination="pagination"
+              @request="onRequest"
+              selection="multiple"
+              v-model:selected="selected"
+            >
+              <template v-slot:header-selection="scope">
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="scope.selected"
+                />
+              </template>
+
+              <template v-slot:body="props">
+                <q-tr :props="props">
+                  <q-td>
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="props.selected"
+                    />
+                  </q-td>
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+                    <div
+                      v-else-if="col.name === 'description'"
+                      class="table_ellipsis"
+                    >
+                      {{ col.value ?? "-" }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ?? "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </p-table>
+          </div>
+
+          <div class="col-12">
+            <q-input
+              outlined
+              v-model="reason"
+              dense
+              lazy-rules
+              type="textarea"
+              :rules="[(val:string) => !!val || 'กรุณาเหตุผลการอนุมัติ']"
+              label="เหตุผลการอนุมัติ"
+              hide-bottom-space
+              rows="3"
+            />
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="public" id="onSubmit" type="submit">
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/09_leave/components/05_Leave/DetailLeavePage.vue

@@ -260,6 +260,14 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+
+const isSysCancel = computed(() => {
+  return (
+    formData.reasonOligarch === "อนุมัติการขอยกเลิกการลา โดยระบบ" &&
+    statusCheck.value === "DELETE"
+  );
+});
+
 /**
  * ฟังก์ชั่นเรียกรายละเอียดของข้อมูล
  * @param paramsId รับ ID จาก paramID
@@ -1036,7 +1044,12 @@ onMounted(async () => {
                                 props.row.comment == ''
                               "
                             >
+                              <div v-if="isSysCancel" class="text-red-6">
+                                ยังไม่ได้แสดงความคิดเห็น
+                              </div>
+
                               <q-btn
+                                v-else
                                 dense
                                 :disable="
                                   statusCheck == 'NEW' ||
@@ -1133,7 +1146,13 @@ onMounted(async () => {
                   </div>
                 </div>
                 <div class="col-12"><q-separator /></div>
-                <div class="row col-12 q-pa-md">
+                <div v-if="isSysCancel" class="row col-12 q-pa-md">
+                  <q-banner class="bg-red-2 text-red-6 full-width" rounded>
+                    ผู้มีอำนาจยังไม่ได้พิจารณา ใบลานี้ถูกยกเลิกแล้ว
+                  </q-banner>
+                </div>
+
+                <div class="row col-12 q-pa-md" v-else>
                   <div class="col-12 row bg-white q-col-gutter-md">
                     <div class="col-xs-6 row items-start">
                       <div class="col-12 text-weight-bold text-top">

src/modules/09_leave/components/05_Leave/DetailLeaveReject.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted, computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 
@@ -158,6 +158,13 @@ const isLoadData = ref<boolean>(false);
 const leaveType = ref<LeaveType[]>([]); //ประเภทการลา
 const checkForm = ref<string>(""); //เช็คประเภทการลา
 
+const isSysCancel = computed(() => {
+  return (
+    formData.reasonOligarch === "อนุมัติการขอยกเลิกการลา โดยระบบ" &&
+    statusCheck.value === "DELETE"
+  );
+});
+
 /**
  * ฟังก์เรียกข้อมูลรายละเอียดของการยกเลิกลา
  * @param paramsId รับ ID จาก paramID
@@ -769,7 +776,13 @@ onMounted(async () => {
                   </div>
                 </div>
                 <q-separator />
-                <div class="row col-12 q-pa-md">
+
+                <div v-if="isSysCancel" class="row col-12 q-pa-md">
+                  <q-banner class="bg-green-2 text-green-6 full-width" rounded>
+                    {{ formDataReject.leaveDirectorComment }}
+                  </q-banner>
+                </div>
+                <div class="row col-12 q-pa-md" v-else>
                   <div class="col-12 row bg-white q-col-gutter-md">
                     <div class="col-xs-6 row items-start">
                       <div class="col-12 text-weight-bold text-top">
@@ -799,7 +812,7 @@ onMounted(async () => {
 
                     <div class="col-xs-6 row items-start">
                       <div class="col-12 text-weight-bold text-top">
-                        ผลการพิจารณา
+                        ผลการพิจารณายกเลิกวันลา
                       </div>
                       <div class="col-12 text-detail">
                         {{

src/modules/09_leave/components/05_Leave/Dialog/DialogAddCommander.vue

@@ -35,6 +35,7 @@ const props = defineProps({
 const pageId = ref<string>(route.params.id as string);
 const keyword = ref<string>("");
 const isAct = ref<boolean>(false);
+const isAllDirector = ref<boolean>(false);
 
 const total = ref<number>(0);
 const totalList = ref<number>(1);
@@ -105,6 +106,7 @@ async function getData() {
       page: pagination.value.page,
       keyword: keyword.value,
       isAct: isAct.value,
+      isAllDirector: isAllDirector.value,
       keycloakId: props.keycloakUserId,
       type:
         props.profileType?.toLocaleLowerCase() === "officer"
@@ -196,6 +198,7 @@ function closeDialog() {
   modal.value = false;
   rows.value = [];
   selected.value = [];
+  isAllDirector.value = false;
 }
 
 watch(
@@ -231,19 +234,45 @@ watch(
         <q-card-section>
           <div class="row q-col-gutter-sm">
             <div class="col-12">
-              <div class="row q-gutter-x-xs">
+              <div class="row items-center q-mb-sm">
                 <q-input
                   dense
                   outlined
                   label="ค้นหา"
                   v-model="keyword"
-                  style="width: 300px"
+                  class="col-grow"
+                  style="max-width: 400px"
                   @keydown.enter.prevent="onSearchData()"
                 >
                   <template v-slot:append>
                     <q-icon name="search"></q-icon>
                   </template>
                 </q-input>
+
+                <q-space />
+
+                <q-btn
+                  color="primary"
+                  icon="search"
+                  label="ค้นหา"
+                  class="q-px-md"
+                  @click.prevent="onSearchData"
+                  style="width: 150px"
+                />
+              </div>
+
+              <div
+                class="row items-center q-gutter-x-md text-subtitle2 text-grey-8"
+              >
+                <q-checkbox
+                  keep-color
+                  v-model="isAllDirector"
+                  label="หัวหน้าทั้งหน่วยงาน"
+                  color="primary"
+                  @update:model-value="onSearchData"
+                >
+                  <q-tooltip>หัวหน้าทั้งหน่วยงาน</q-tooltip>
+                </q-checkbox>
                 <q-checkbox
                   keep-color
                   v-model="isAct"
@@ -251,20 +280,11 @@ watch(
                   color="primary"
                   @update:model-value="onSearchData"
                 >
-                  <q-tooltip>แสดงเฉพาะรักษาการแทน </q-tooltip>
+                  <q-tooltip>แสดงเฉพาะรักษาการแทน</q-tooltip>
                 </q-checkbox>
-                <q-space />
-                <q-btn
-                  color="primary"
-                  icon="search"
-                  label="ค้นหา"
-                  class="q-pa-sm"
-                  @click.prevent="onSearchData"
-                  style="width: 200px"
-                >
-                </q-btn>
               </div>
             </div>
+
             <div class="col-12 text-red">
               {{
                 props.type == "APPROVER"

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

@@ -68,6 +68,8 @@ interface DataSpecialTime {
   statusSort: number;
   timeAfternoon: string;
   timeMorning: string;
+  checkInStatusMain: string;
+  checkOutStatusMain: string;
 }
 export type {
   DataOption,

src/modules/09_leave/interface/response/work.ts

@@ -98,6 +98,26 @@ interface DataProcess {
   errorMessage: string | null;
 }
 
+interface DataPendingJobs {
+  taskId: string;
+  keycloakUserId: string;
+  createdDate: string | Date;
+  processingDate: string | Date;
+  completedDate: string | Date;
+  status: string;
+  checkType: string;
+  checkInId: string;
+  errorMessage: string;
+  additionalData: string;
+  id: string;
+  createdAt: string | Date;
+  createdUserId: string;
+  lastUpdatedAt: string;
+  lastUpdateUserId: string;
+  createdFullName: string;
+  lastUpdateFullName: string;
+}
+
 export type {
   TableRows,
   DataResLog,
@@ -105,4 +125,5 @@ export type {
   TableRowsTime,
   FormDetail,
   DataProcess,
+  DataPendingJobs,
 };

src/modules/09_leave/views/02_WorkingMain.vue

@@ -9,6 +9,7 @@ import { useRoute } from "vue-router";
 import Tab1 from "@/modules/09_leave/components/02_WorkList/Tab1.vue";
 import Tab2 from "@/modules/09_leave/components/02_WorkList/Tab2.vue";
 import Tab3 from "@/modules/09_leave/components/02_WorkList/Tab3_Processed_Late.vue";
+import Tab4_Pending from "@/modules/09_leave/components/02_WorkList/Tab4_Pending.vue";
 
 const stores = useWorklistDataStore();
 const route = useRoute();
@@ -21,6 +22,10 @@ const isPermissionTab3 = computed(() => {
       checkPermission(route)?.attrIsUpdate)
   );
 });
+
+const isPermissionTab4 = computed(() => {
+  return checkPermission(route)?.attrOwnership === "OWNER";
+});
 </script>
 
 <template>
@@ -46,6 +51,7 @@ const isPermissionTab3 = computed(() => {
         name="3"
         label="ประมวลผลการขาดราชการ/มาสาย"
       />
+      <q-tab v-if="isPermissionTab4" name="4" label="รอประมวลผล" />
       <!-- เพิ่มแท็บใหม่ -->
     </q-tabs>
 
@@ -62,6 +68,9 @@ const isPermissionTab3 = computed(() => {
         <q-tab-panel name="3">
           <Tab3 />
         </q-tab-panel>
+        <q-tab-panel name="4">
+          <Tab4_Pending />
+        </q-tab-panel>
       </q-tab-panels>
     </div>
   </q-card>

src/modules/09_leave/views/04_SpecialTimeMain.vue

@@ -17,6 +17,7 @@ import type {
 
 import DialogReason from "@/components/Dialogs/PopupReason.vue";
 import DialogApprove from "@/modules/09_leave/components/04_SpecialTime/DialogApprove.vue";
+import DialogMultipleApprove from "@/modules/09_leave/components/04_SpecialTime/DialogMultipleApprove.vue";
 
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
@@ -47,6 +48,7 @@ const name = ref<string>("");
 const id = ref<string>("");
 const dateDialog = ref<string>("");
 const dateFixDialog = ref<string>("");
+const modalMultiple = ref<boolean>(false);
 
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
@@ -54,7 +56,7 @@ const filterStatus = ref<string>("PENDING");
 const filterDate = ref<[Date, Date] | null>([new Date(), new Date()]); //วันที่ประกาศ
 const optionStatus = ref<DataOption[]>(store.optionStatusMain);
 const rows = ref<DataSpecialTime[]>([]);
-const visibleColumns = ref<String[]>([
+const visibleColumns = ref<string[]>([
   "no",
   "fullName",
   "createdAt",
@@ -283,6 +285,20 @@ onMounted(async () => {
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     รายการลงเวลากรณีพิเศษ
+    <q-space />
+    <q-btn
+      v-if="
+        checkPermission($route)?.attrIsUpdate &&
+        checkPermission($route)?.attrIsGet
+      "
+      class="q-px-md"
+      color="primary"
+      dense
+      unelevated
+      @click="modalMultiple = true"
+    >
+      อนุมัติแบบหลายรายการ
+    </q-btn>
   </div>
 
   <q-card flat bordered class="col-12 q-pa-md">
@@ -492,6 +508,14 @@ onMounted(async () => {
     :detailData="detailData"
     :fetch-data="fetchData"
   />
+
+  <DialogMultipleApprove
+    v-model:modal="modalMultiple"
+    :fetch-data="fetchData"
+    :dateThaiRange="dateThaiRange"
+    :columns="columns"
+    :visibleColumnsMain="visibleColumns"
+  />
 </template>
 
 <style></style>

src/modules/18_command/components/Step/1_Detail.vue

@@ -113,8 +113,6 @@ const visibleColumns = ref<Array<string>>([
 
 const modalAddOperator = ref<boolean>(false); // แสดงเพิ่มรายชื่อลงนามในแนบท้ายคำสั่ง
 
-
-
 /**
  * ฟังก์ชันบันทึกข้อมูลรายละเอียดคำสั่ง
  * และกำหนด isChangeData เป็น false
@@ -225,6 +223,8 @@ onMounted(async () => {
     formData.commandExcecuteDate = props.formCommandList.commandExcecuteDate;
     formData.isBangkok = !store.isIdofficer
       ? null
+      : props.formCommandList.commandCode === "C-PM-47"
+      ? "BANGKOK"
       : props.formCommandList.isBangkok;
     commandCode.value = props.formCommandList.commandCode;
     const [volume, chapter] = props.formCommandList.commandNo.split("/");
@@ -486,12 +486,9 @@ onMounted(async () => {
                 />
               </div>
 
-              <div
-                class="col-12 q-gutter-sm"
-                v-if="store.isIdofficer && commandCode !== 'C-PM-47'"
-              >
+              <div class="col-12 q-gutter-sm" v-if="store.isIdofficer">
                 <q-radio
-                  :disable="store.readonly"
+                  :disable="store.readonly || commandCode === 'C-PM-47'"
                   keep-color
                   color="primary"
                   dense
@@ -501,7 +498,7 @@ onMounted(async () => {
                 />
 
                 <q-radio
-                  :disable="store.readonly"
+                  :disable="store.readonly || commandCode === 'C-PM-47'"
                   keep-color
                   color="primary"
                   dense

src/modules/20_positionTemp/components/DialogSelectPerson.vue

@@ -706,7 +706,7 @@ watch(
               </div>
             </q-card>
 
-            <div class="row col-12 q-pa-sm">
+            <!-- <div class="row col-12 q-pa-sm">
               <q-checkbox
                 keep-color
                 color="primary"
@@ -714,7 +714,7 @@ watch(
                 v-model="isSit"
                 label="นั่งทับตำแหน่ง"
               />
-            </div>
+            </div> -->
           </div>
         </q-card-section>
         <q-separator />

src/stores/mixin.ts

@@ -362,13 +362,21 @@ export const useCounterMixin = defineStore("mixin", () => {
   const messageError = (q: any, e: any = "", msg: string = "") => {
     if (e.response !== undefined) {
       if (e.response.data.status !== undefined) {
-        if (e.response.data.status == 401) {
+        if (
+          e.response.data.status == 401 ||
+          (e.response.data.status == 404 &&
+            e.response.data.message == "ไม่พบข้อมูลสิทธิ์")
+        ) {
           //invalid_token
+          const msg =
+            e.response.data.status == 401
+              ? "ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง"
+              : e.response.data.message;
           q.dialog({
             component: CustomComponent,
             componentProps: {
               title: `พบข้อผิดพลาด`,
-              message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
+              message: msg,
               icon: "warning",
               color: "red",
               onlycancel: true,

src/views/MainLayout.vue

@@ -561,6 +561,26 @@ function getImg(id: string, pathName: string) {
 function onViewDetailNoti(url: string) {
   window.open(url, "_blank");
 }
+
+function handleDeleteNotification() {
+  dialogRemove(
+    $q,
+    async () => {
+      try {
+        showLoader();
+        await http.delete(config.API.msgNotificate);
+        await getDataNotification(1, "DEL");
+        success($q, "ล้างการแจ้งสำเร็จ");
+      } catch (error) {
+        messageError($q, error);
+      } finally {
+        hideLoader();
+      }
+    },
+    "ยืนยันการล้างการแจ้งเตือนทั้งหมด",
+    `ต้องการล้างการแจ้งเตือนทั้งหมด (${totalInbox.value} รายการ) ใช่หรือไม่? การกระทำนี้ไม่สามารถย้อนกลับได้`
+  );
+}
 </script>
 
 <!-- โครงเว็บ -->
@@ -642,6 +662,21 @@ function onViewDetailNoti(url: string) {
               <div class="text-grey-5" style="font-size: 12px">
                 ทั้งหมด {{ totalInbox }} ข้อความ
               </div>
+              <q-btn
+                v-if="totalInbox !== 0"
+                flat
+                dense
+                no-caps
+                size="12px"
+                color="red-7"
+                icon="mdi-trash-can-outline"
+                label="ล้างทั้งหมด"
+                class="q-ml-sm"
+                aria-label="ล้างการแจ้งเตือนทั้งหมด"
+                @click.stop.prevent="handleDeleteNotification"
+              >
+                <q-tooltip>ล้างการแจ้งเตือนทั้งหมด</q-tooltip>
+              </q-btn>
             </div>
 
             <q-infinite-scroll